联调

src/api/docker.js

 import request from '@/utils/request'
 
+export function getAllRepos() {
+  return request({
+    url: '/repo/getAll'
+  })
+}
+
+export function getAllEnvTemplate() {
+  return request({
+    url: '/envTemplate/getAll'
+  })
+}
+
+export function createEnvTemplate(data) {
+  return request({
+    url: '/envTemplate/create',
+    method: 'post',
+    data
+  })
+}
+
+export function createEnv(data) {
+  return request({
+    url: '/env/create',
+    method: 'post',
+    data
+  })
+}
+
 export function fetchKubernetesList() {
   return request({
     url: '/k8s/namespace',
@@ -117,20 +145,6 @@ export function modifyIngressHost(data) {
   })
 }
 
-export function getNamespaceTemplate() {
-  return request({
-    url: '/docker/get_namespace_template_new',
-    method: 'get'
-  })
-}
-
-export function getSystemByType() {
-  return request({
-    url: '/docker/get_systems_by_type_new',
-    method: 'get'
-  })
-}
-
 export function initNamespace(data) {
   return request({
     url: '/k8s/namespace/init',

src/router/modules/docker.js

@@ -17,12 +17,12 @@ const dockersRouter = {
       name: 'RuningEnv',
       meta: { title: 'runingEnv', noCache: true }
     },
-    {
-      path: 'hangUpEnv',
-      component: () => import('@/views/docker/hangUpEnv'),
-      name: 'HangUpEnv',
-      meta: { title: 'hangUpEnv', noCache: true }
-    },
+    // {
+    //   path: 'hangUpEnv',
+    //   component: () => import('@/views/docker/hangUpEnv'),
+    //   name: 'HangUpEnv',
+    //   meta: { title: 'hangUpEnv', noCache: true }
+    // },
     {
       path: 'createEnv',
       component: () => import('@/views/docker/createEnv'),

src/views/container/XTerm.js

+import { Terminal } from 'xterm'
+import * as fit from 'xterm/lib/addons/fit/fit'
+import * as attach from 'xterm/lib/addons/attach/attach'
+import * as fullscreen from 'xterm/lib/addons/fullscreen/fullscreen'
+
+Terminal.applyAddon(fit)
+Terminal.applyAddon(attach)
+Terminal.applyAddon(fullscreen)
+export default Terminal

src/views/container/console.vue

+<template>
+  <div id="terminal" class="xterm"/>
+</template>
+<script>
+import Terminal from './XTerm'
+export default {
+  name: 'Console',
+  props: {
+    // terminal: {
+    //   type: Object,
+    //   default: {}
+    // }
+  },
+  data() {
+    return {
+      term: null,
+      terminalSocket: null
+    }
+  },
+  mounted() {
+    console.log(444)
+    var term = new Terminal()
+
+    term.open(document.getElementById('terminal'))
+    term.toggleFullScreen()
+    term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
+
+    this.term = term
+
+    var ws = new WebSocket('ws://localhost:3000/test/1')
+    ws.onopen = function() {
+      this.term.attach(ws)
+      this.term._initialized = true
+      // Web Socket 已连接上，使用 send() 方法发送数据
+      ws.send('发送数据')
+      console.log('数据发送中...')
+    }
+
+    ws.onmessage = function(evt) {
+      var received_msg = evt.data
+      console.log('数据已接收...', received_msg)
+    }
+
+    ws.onclose = function() {
+      // 关闭 websocket
+      console.log('连接已关闭...')
+    }
+  },
+  beforeDestroy() {},
+  methods: {}
+}
+</script>

src/views/docker/createEnv.vue

 <template>
   <div class="app-container" style="">
-    <el-form ref="dataForm" :rules="rules" label-position="left" label-width="130px" style="width: 95%; margin-left:20px;">
+    <el-form ref="dataForm" label-position="left" label-width="130px" style="width: 95%; margin-left:20px;">
 
       <el-form-item label="Namespace名称">
         <el-input v-model="namespace" placeholder="请输入"/>
       </el-form-item>
-      <!-- <el-form-item label="创建环境确认码">
-        <el-input v-model="code" placeholder="请输入"/>
-      </el-form-item> -->
       <el-form-item label="选择模板" >
-        <el-select v-model="currentTemplate" value-key="preset_name" style="width:100%" @change="refershTemplateSelect">
-          <el-option v-for="item in templateArray" :value="item" :label="item.preset_name" :key="item.preset_name" />
+        <el-select v-model="currentTemplate" value-key="preset_name" style="width:100%" @change="useTemplate">
+          <el-option v-for="item in templates" :value="item.name" :key="item.name" />
         </el-select>
       </el-form-item>
-      <el-form-item v-for="(systemValue,systemKey) in system" :label="systemKey | upper" :key="systemKey">
-        <el-card >
-          <el-button v-for="item in systemValue" :key="item" :type="templateSystem[systemKey].includes(item) ?'success':''" style="margin:3px" @click="selectSystem(systemKey,item)">
-            {{ item }}
+      <el-form-item v-for="(ns, index) in repoNamespaces" :label="ns.type | upper" :key="index">
+        <el-card>
+          <el-button
+            v-for="item in ns.repos"
+            :key="item.domain"
+            :type="dependant[ns.type] && dependant[ns.type].find(sys => sys.appname === item.appname) ? 'success' : ''"
+            style="margin:3px"
+            @click="selectSystem(item, ns.type)">
+            {{ item.appname }}
           </el-button>
         </el-card>
       </el-form-item>
     </el-form>
-    <!-- <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button> -->
     <el-button style="margin-right:40px;margin-bottom:40px;float:right" type="primary" @click="createData()">{{ $t('table.confirm') }}</el-button>
   </div>
 </template>
 
 <script>
-import { getNamespaceTemplate, getSystemByType, initNamespace } from '@/api/docker'
+import { getAllRepos, getAllEnvTemplate, createEnv } from '@/api/docker'
 
 export default {
 
   filters: {
-    serviceType(service) {
-      const serviceObj = {
-        common: '基础服务',
-        backend: '后端服务',
-        frontend: '前端服务'
-      }
-      return serviceObj[service]
-    },
     upper: function(value) {
       if (!value) return ''
       value = value.toString()
@@ -49,65 +42,66 @@ export default {
 
   data() {
     return {
-      rules: {
-        dbname: [{ required: true, message: '请输入', trigger: 'change' }]
-      },
       namespace: '',
-      code: undefined,
-      templateArray: [],
-      currentTemplate: undefined,
-      system: [],
-      templateSystem: {}
+      dependant: {},
+      repoNamespaces: [],
+      currentTemplate: '',
+      templates: {}
     }
   },
 
   created() {
-    this.getNamespaceTemplate()
-    this.getSystem()
+    this.getAllRepos()
+    this.getAllEnvTemplate()
   },
 
   methods: {
-    getNamespaceTemplate() {
-      getNamespaceTemplate().then(res => {
-        this.templateArray = res.data.data
+    getAllRepos() {
+      getAllRepos().then(res => {
+        this.repoNamespaces = res.data
       })
     },
 
-    getSystem() {
-      getSystemByType().then(res => {
-        this.system = res.data.data
-        for (const index in this.system) {
-          this.templateSystem[index] = []
-        }
+    getAllEnvTemplate() {
+      getAllEnvTemplate().then(res => {
+        this.templates = res.data.data
       })
     },
 
-    refershTemplateSelect(template) {
-      for (const index in template.details) {
-        this.templateSystem[index] = template.details[index]
+    selectSystem(item, type) {
+      if (!this.dependant[type]) this.$set(this.dependant, type, [])
+      const index = this.dependant[type].findIndex(sys => sys.appname === item.appname)
+      if (index === -1) {
+        this.dependant[type].push(item)
+      } else {
+        this.dependant[type].splice(index, 1)
       }
     },
 
-    selectSystem(key, value) {
-      const temp = this.templateSystem
-      const index = this.templateSystem[key].indexOf(value)
-      this.templateSystem = {}
-      if (index >= 0) {
-        temp[key].splice(index, 1)
-        this.templateSystem = temp
-      } else {
-        temp[key].push(value)
-        this.templateSystem = temp
+    useTemplate() {
+      const vm = this
+      const t = this.templates.find(item => item.name === this.currentTemplate)
+      // 清空所有选择
+      vm.$set(this, 'dependant', {})
+
+      // 遍历设置
+      const keys = Object.keys(t)
+      keys.forEach(key => {
+        if (key !== 'name' && key !== '_id') {
+          t[key].forEach(repo => {
+            vm.selectSystem(repo, key)
+          })
         }
+      })
     },
 
     createData() {
-      const obj = {
-        code: this.code,
+      const param = {
         namespace: this.namespace,
-        systems: this.templateSystem
+        dependant: this.dependant
       }
-      initNamespace(obj).then(res => {
+
+      createEnv(param).then(res => {
         if (res.data.code === '0000') {
           this.$message({
             message: res.data.data,

src/views/docker/envTemplate.vue

+<template>
+  <div class="app-container" style="">
+    <el-form ref="dataForm" label-position="left" label-width="130px" style="width: 95%; margin-left:20px;">
+      <el-form-item label="模板名称">
+        <el-input v-model="name"/>
+      </el-form-item>
+      <el-form-item label="选择已有模板" >
+        <el-select v-model="currentTemplate" value-key="preset_name" style="width:100%" @change="useTemplate">
+          <el-option v-for="item in templates" :value="item.name" :key="item.name" />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-for="(ns, index) in repoNamespaces" :label="ns.type | upper" :key="index">
+        <el-card>
+          <el-button
+            v-for="item in ns.repos"
+            :key="item.domain"
+            :type="dependant[ns.type] && dependant[ns.type].find(sys => sys.appname === item.appname) ? 'success' : ''"
+            style="margin:3px"
+            @click="selectSystem(item, ns.type)">
+            {{ item.appname }}
+          </el-button>
+        </el-card>
+      </el-form-item>
+    </el-form>
+    <el-button style="margin-right:40px;margin-bottom:40px;float:right" type="primary" @click="createData()">{{ $t('table.confirm') }}</el-button>
+  </div>
+</template>
+
+<script>
+import { getAllRepos, getAllEnvTemplate, createEnvTemplate } from '@/api/docker'
+
+export default {
+
+  filters: {
+    upper: function(value) {
+      if (!value) return ''
+      value = value.toString()
+      return value[0].toUpperCase() + value.slice(1)
+    }
+  },
+
+  data() {
+    return {
+      name: '',
+      dependant: {},
+      repoNamespaces: [],
+      currentTemplate: '',
+      templates: {}
+    }
+  },
+
+  created() {
+    this.getAllRepos()
+    this.getAllEnvTemplate()
+  },
+
+  methods: {
+    getAllRepos() {
+      getAllRepos().then(res => {
+        this.repoNamespaces = res.data
+      })
+    },
+
+    getAllEnvTemplate() {
+      getAllEnvTemplate().then(res => {
+        // todo: http服务统一返回res.data
+        this.templates = res.data.data
+      })
+    },
+
+    selectSystem(item, type) {
+      if (!this.dependant[type]) this.$set(this.dependant, type, [])
+      const index = this.dependant[type].findIndex(sys => sys.appname === item.appname)
+      if (index === -1) {
+        this.dependant[type].push(item)
+      } else {
+        this.dependant[type].splice(index, 1)
+      }
+    },
+
+    useTemplate() {
+      const vm = this
+      const t = this.templates.find(item => item.name === this.currentTemplate)
+      // 清空所有选择
+      vm.$set(this, 'dependant', {})
+
+      // 遍历设置
+      const keys = Object.keys(t)
+      keys.forEach(key => {
+        console.log(t, key)
+        if (key !== 'name' && key !== '_id') {
+          t[key].forEach(repo => {
+            vm.selectSystem(repo, key)
+          })
+        }
+      })
+    },
+
+    createData() {
+      const param = {
+        name: this.name,
+        ...this.dependant
+      }
+      createEnvTemplate(param).then(res => {
+        // todo: 异常在http服务统一处理
+        if (res.data.code === '0000') {
+          this.$message({
+            message: res.data.data,
+            type: 'success',
+            duration: 1000
+          })
+        } else {
+          this.$message({
+            message: res.data.msg,
+            type: 'error'
+          })
+        }
+      })
+    }
+  }
+}
+</script>