Merge branch 'master' of http://git.quantgroup.cn/QA/qahome-diamond

src/api/docker.js

@@ -6,6 +6,18 @@ export function getAllRepos() {
   })
 }
 
+export function getBaseRepos() {
+  return request({
+    url: '/repo/getBase'
+  })
+}
+
+export function getAppRepos() {
+  return request({
+    url: '/repo/getApp'
+  })
+}
+
 export function getAllEnvTemplate() {
   return request({
     url: '/envTemplate/getAll'

src/router/modules/docker.js

@@ -41,6 +41,13 @@ const dockersRouter = {
       name: 'Detail',
       meta: { title: 'detail', noCache: true },
       hidden: true
+    },
+    {
+      path: 'deployEnv/:name',
+      component: () => import('@/views/docker/deployEnv'),
+      name: 'deploy',
+      meta: { title: '部署应用服务', noCache: true },
+      hidden: true
     }
   ]
 }

src/views/dbconfig/sync.vue

@@ -24,8 +24,9 @@
       </el-form>
 
       <div style="margin-left:420px">
-        <el-button :disabled="disableBool" type="primary" @click="sync()">{{ $t('table.confirm') }}</el-button>
-        <el-button :disabled="disableBool" @click="resetTemp()">{{ $t('table.cancel') }}</el-button>
+        <el-button @click="goBack()">{{ $t('table.cancel') }}</el-button>
+        <el-button :disabled="disableBool" type="primary" @click="sync()">{{ $t('table.confirm') }}
+        </el-button>
       </div >
     </div >
     <div style="padding:10px 20px 0px">
@@ -82,6 +83,9 @@ export default {
     this.getDBName()
   },
   methods: {
+    goBack() {
+      this.$router.go(-1)
+    },
     getNamespace() {
       getNamespaceTke().then(res => {
         this.namespaces = res.data && res.data.namespaces.map(item => item.name)

src/views/docker/createEnv.vue

 <template>
-  <div class="app-container" style="">
+  <div class="app-container">
     <el-form ref="dataForm" label-position="left" label-width="130px" style="width: 95%; margin-left:20px;">
+      <el-alert
+        type="warning"
+        style="margin-bottom: 20px; font-size: 14px;"
+        show-icon>
+        <slot name="description">
+          <p>环境创建成功后，到运行中环境页面</p>
+          <p>1. 同步数据库 和 rabbitmq</p>
+          <p>2. 再部署应用服务</p>
+        </slot>
+      </el-alert>
 
       <el-form-item label="Namespace名称">
         <el-input v-model="namespace" placeholder="请输入"/>
@@ -28,7 +38,7 @@
 </template>
 
 <script>
-import { getAllRepos, getAllEnvTemplate, createEnv } from '@/api/docker'
+import { getBaseRepos, getAllEnvTemplate, createEnv } from '@/api/docker'
 import permission from '@/directive/permission/index.js' // 权限判断指令
 
 export default {
@@ -58,8 +68,8 @@ export default {
 
   methods: {
     getAllRepos() {
-      getAllRepos().then(res => {
-        this.repoNamespaces = res.data
+      getBaseRepos().then(res => {
+        this.repoNamespaces = res.data.filter(item => item.type === 'base')
       })
     },
 

src/views/docker/deployEnv.vue

+<template>
+  <div class="app-container">
+    <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" :disabled="true"/>
+      </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>
+    <el-button style="margin-right:40px;margin-bottom:40px;float:right" @click="goBack()">{{ $t('table.cancel') }}</el-button>
+  </div>
+</template>
+
+<script>
+import { getAppRepos, getAllEnvTemplate, createEnv } from '@/api/docker'
+
+export default {
+
+  filters: {
+    upper: function(value) {
+      if (!value) return ''
+      value = value.toString()
+      return value[0].toUpperCase() + value.slice(1)
+    }
+  },
+
+  data() {
+    return {
+      namespace: '',
+      dependant: {},
+      repoNamespaces: [],
+      currentTemplate: '',
+      templates: {}
+    }
+  },
+
+  created() {
+    this.namespace = this.$route.params.name
+    this.getAllRepos()
+    this.getAllEnvTemplate()
+  },
+
+  methods: {
+    goBack() {
+      this.$router.go(-1)
+    },
+    getAllRepos() {
+      getAppRepos().then(res => {
+        this.repoNamespaces = res.data
+      })
+    },
+
+    getAllEnvTemplate() {
+      getAllEnvTemplate().then(res => {
+        this.templates = res.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 => {
+        if (key !== 'name' && key !== '_id') {
+          t[key].forEach(repo => {
+            vm.selectSystem(repo, key)
+          })
+        }
+      })
+    },
+
+    createData() {
+      const param = {
+        namespace: this.namespace,
+        dependant: this.dependant
+      }
+
+      createEnv(param).then(res => {
+        this.$router.push({
+          path: `/dockers/runingEnv/${this.namespace}`
+        })
+      })
+      this.$message({
+        message: '正在部署，请稍候',
+        type: 'success',
+        duration: 2000
+      })
+    }
+  }
+}
+</script>

src/views/docker/envDetail.vue

@@ -12,8 +12,8 @@
               更多操作
             </el-button>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item @click.native="syncDb">从线上同步DB</el-dropdown-item>
-              <el-dropdown-item @click.native="syncMq">从线上同步MQ</el-dropdown-item>
+              <el-dropdown-item @click.native="syncDb">同步线上MySQL</el-dropdown-item>
+              <el-dropdown-item @click.native="syncMq">同步线上MQ</el-dropdown-item>
               <el-dropdown-item @click.native="clearRedis">清理Redis缓存</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>

src/views/docker/runingEnv.vue

@@ -18,33 +18,32 @@
         <el-table-column
           prop="name"
           label="名称"
-        >
+          width="100">
           <template slot-scope="scope">
-            <span class="link-type" @click="handleDetail(scope.row)">{{ scope.row.name }}</span>
+            <span class="link-type" @click="handleDetail(scope.row.name)">{{ scope.row.name }}</span>
           </template>
         </el-table-column>
         <el-table-column
           prop="createdAt"
           label="创建时间"
-        />
+          width="160"/>
         <el-table-column
           prop="status"
           label="运行状态"
-        >
+          width="100">
           <template slot-scope="scope">
             {{ scope.row.status | formatStatus }}
           </template>
         </el-table-column>
         <el-table-column
-          prop="description"
-          label="描述信息"/>
-          <!--<el-table-column label="操作" min-width="100px">-->
-          <!--<template slot-scope="scope">-->
-          <!--<el-button type="infos" size="mini">备份</el-button>-->
-          <!--<el-button size="mini" type="primary">挂起</el-button>-->
-          <!--<el-button size="mini" type="danger">删除</el-button>-->
-          <!--</template>-->
-          <!--</el-table-column>-->
+          prop="operation"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button type="primary" size="mini" @click="syncMySQL(scope.row.name)">同步线上MySQL</el-button>
+            <el-button size="mini" type="primary" @click="syncMQ(scope.row.name)">同步线上MQ</el-button>
+            <el-button size="mini" type="primary" @click="deploy(scope.row.name)">部署应用服务</el-button>
+          </template>
+        </el-table-column>
       </el-table>
     </div>
   </div>
@@ -64,6 +63,20 @@ export default {
     this.fetchK8sList()
   },
   methods: {
+    syncMySQL(namespace) {
+      this.$router.push({
+        path: '/dbsync',
+        query: { namespace: namespace }
+      })
+    },
+    syncMQ(namespace) {
+      console.log('todo')
+    },
+    deploy(namespace) {
+      this.$router.push({
+        path: `/dockers/deployEnv/${namespace}`
+      })
+    },
     fetchK8sList() {
       fetchKubernetesList().then(res => {
         const exculde = ['default', 'kube-system']
@@ -80,9 +93,9 @@ export default {
     indexMethod(index) {
       return index + 1
     },
-    handleDetail(scope) {
+    handleDetail(namespace) {
       this.$router.push({
-        path: `/dockers/runingEnv/${scope.name}`
+        path: `/dockers/runingEnv/${namespace}`
       })
     },
     handleEdit() {