change cluster

package.json

@@ -45,6 +45,7 @@
     "file-saver": "1.3.8",
     "fuse.js": "3.4.2",
     "js-cookie": "2.2.0",
+    "js-yaml": "^3.13.1",
     "jsonlint": "1.6.3",
     "jszip": "3.1.5",
     "mockjs": "1.0.1-beta3",

src/api/cluster.js

+import request from '@/utils/request'
+
+export function getCluster(query) {
+  return request({
+    url: '/cluster/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function addCluster(data) {
+  return request({
+    url: '/cluster/add',
+    method: 'post',
+    data
+  })
+}
+
+export function deleteCluster(query) {
+  return request({
+    url: '/cluster/delete',
+    method: 'get',
+    params: query
+  })
+}
+

src/components/Yaml/index.vue

+<template>
+  <div class="yaml-editor">
+    <textarea ref="textarea"/>
+  </div>
+</template>
+
+<script>
+import CodeMirror from 'codemirror'
+import 'codemirror/addon/lint/lint.css'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/rubyblue.css'
+
+export default {
+  name: 'YamlEditor',
+  /* eslint-disable vue/require-prop-types */
+  props: ['value'],
+  data() {
+    return {
+      yamlEditor: false
+    }
+  },
+  watch: {
+    value(value) {
+      const editor_value = this.yamlEditor.getValue()
+      if (value !== editor_value) {
+        this.yamlEditor.setValue(this.value)
+      }
+    }
+  },
+  mounted() {
+    this.yamlEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
+      lineNumbers: true,
+      mode: 'text/x-yaml',
+      gutters: ['CodeMirror-lint-markers'],
+      theme: 'rubyblue',
+      lint: true
+    })
+
+    this.yamlEditor.setValue(this.value)
+    this.yamlEditor.on('change', cm => {
+      this.$emit('changed', cm.getValue())
+      this.$emit('input', cm.getValue())
+    })
+  },
+  methods: {
+    getValue() {
+      return this.yamlEditor.getValue()
+    }
+  }
+}
+</script>
+
+<style>
+  .yaml-editor {
+    height: 100%;
+    position: relative;
+  }
+
+  /*.json-editor >>> .CodeMirror {*/
+    /*height: 400px;*/
+    /*min-height: 300px;*/
+  /*}*/
+
+  .yaml-editor >>> .CodeMirror-scroll {
+    min-height: 300px;
+  }
+
+  .yaml-editor >>> .cm-s-rubyblue span.cm-string {
+    color: #F08047;
+  }
+</style>

src/router/index.js

@@ -137,6 +137,19 @@ export const asyncRouterMap = [
       }
     ]
   },
+  {
+    path: '/cluster',
+    component: Layout,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/cluster/cluster'),
+        name: '设置集群',
+        meta: { title: '集群设置', icon: 'lock', roles: ['admin'] }
+      }
+    ]
+  },
 
   dockersRouter,
   {

src/views/cluster/cluster.vue

+<template>
+  <div>
+    <div style="float: right;margin-right: 20px;margin-top: 10px">
+      <el-button type="primary" @click="addCluster('add')">添加集群</el-button>
+    </div>
+    <el-table
+      :data="tableData"
+      style="width: 100%">
+      <el-table-column type="expand">
+        <template slot-scope="props">
+          <el-form label-position="left" inline class="demo-table-expand">
+            <el-form-item class="preshow" label="YAML配置" style="width: 100%">
+              <div class="editor-container">
+                <yaml-editor ref="yamlEditor" v-model="props.row.caYaml"/>
+              </div>
+              <!--<div style="width: 100%">-->
+              <!--<el-input v-model="props.row.caYaml" type="textarea"/>-->
+              <!--<pre style="width: 100%">{{ props.row.caYaml }}</pre>-->
+              <!--</div>-->
+            </el-form-item>
+          </el-form>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="集群名称"
+        prop="clusterName"/>
+      <el-table-column
+        label="集群域名"
+        prop="clusterDomain"/>
+      <el-table-column
+        width="400px"
+        label="集群host"
+        prop="clusterDomain">
+        <template slot-scope="scope">
+          <div v-for="item in scope.row.hosts" :key="item.key">{{ item.value }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button
+            size="small"
+            type="primary"
+            @click="handleEdit(scope.row)">编辑</el-button>
+          <el-button
+            size="small"
+            type="danger"
+            @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog :visible.sync="dialogFormVisible" title="添加集群配置" class="warp-ruleform">
+      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
+        <el-form-item label="集群名称" prop="clusterName">
+          <el-input v-model="ruleForm.clusterName"/>
+        </el-form-item>
+        <el-form-item label="集群域名" prop="clusterDomain">
+          <el-input v-model="ruleForm.clusterDomain"/>
+        </el-form-item>
+        <el-form-item
+          v-for="(domain, index) in ruleForm.hosts"
+          :label="'host' + index"
+          :key="domain.key"
+          :prop="'hosts.' + index + '.value'"
+          :rules="{
+            required: true, message: '域名不能为空', trigger: 'blur'
+          }"
+        >
+          <el-input v-model="domain.value" placeholder="127.0.0.1=>http:localhost"/><el-button style="margin-left: 10px" type="danger" size="small" @click.prevent="removeDomain(domain)">删除</el-button>
+        </el-form-item>
+        <el-form-item label="集群CA" prop="clusterCA">
+          <el-input v-model="ruleForm.clusterCA" class="preinput" type="textarea"/>
+        </el-form-item>
+        <el-form-item class="action_footer">
+          <el-button @click="addDomain">新增host</el-button>
+          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import yaml from 'js-yaml'
+import { addCluster, getCluster, deleteCluster } from '@/api/cluster'
+import YamlEditor from '@/components/Yaml'
+export default {
+  components: { YamlEditor },
+  data() {
+    return {
+      isSave: true,
+      clusterId: '',
+      dialogFormVisible: false,
+      tableData: [],
+      ruleForm: {
+        clusterName: '',
+        clusterCA: '',
+        clusterDomain: '',
+        hosts: [
+          {
+            value: '',
+            key: Date.now()
+          }
+        ]
+      },
+      code: '',
+      rules: {
+        clusterName: [
+          { required: true, message: '请输入集群的名称', trigger: 'blur' },
+          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
+        ],
+        clusterDomain: [
+          { required: true, message: '请输入集群域名信息', trigger: 'blur' }
+        ],
+        clusterCA: [
+          { required: true, message: '请输入集群的名称', trigger: 'blur' }
+        ]
+
+      }
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      getCluster().then((res) => {
+        this.tableData = res.data
+        this.tableData.map((item) => {
+          console.log(item.clusterCA)
+          item.caYaml = yaml.dump(item.clusterCA)
+        })
+      })
+    },
+    handleEdit(scope) {
+      this.isSave = false
+      this.dialogFormVisible = true
+      this.clusterId = scope._id
+      this.ruleForm = { ...scope }
+      this.ruleForm.clusterCA = scope.caYaml
+    },
+    handleDelete(scope) {
+      this.$confirm('此操作将删除集群配置信息,会导致集群不可用，是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteCluster({ id: scope._id, disable: 0 }).then((res) => {
+          if (res.code === '0000') {
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            })
+            this.getData()
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    addCluster() {
+      this.ruleForm = {
+        clusterName: '',
+        clusterCA: '',
+        clusterDomain: '',
+        hosts: [
+          {
+            value: '',
+            key: Date.now()
+          }
+        ]
+      }
+      this.dialogFormVisible = true
+      this.isSave = true
+      this.clusterId = ''
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          let clusterCa = null
+          yaml.safeLoadAll(this.ruleForm.clusterCA, function(doc) {
+            clusterCa = doc
+          })
+          const sendData = {
+            clusterName: this.ruleForm.clusterName,
+            clusterCA: clusterCa,
+            hosts: this.ruleForm.hosts,
+            clusterDomain: this.ruleForm.clusterDomain,
+            disable: 1
+          }
+          if (!this.isSave) {
+            sendData._id = this.clusterId
+          }
+          addCluster(sendData).then((res) => {
+            if (res.code === '0000') {
+              this.$message({
+                message: '集群设置成功',
+                type: 'success'
+              })
+              this.dialogFormVisible = false
+              this.getData()
+            } else {
+              this.$message({
+                message: '集群设置添加失败',
+                type: 'error'
+              })
+            }
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    // resetForm(formName) {
+    //   this.$refs[formName].resetFields()
+    // },
+    removeDomain(item) {
+      var index = this.ruleForm.hosts.indexOf(item)
+      if (index !== -1) {
+        this.ruleForm.hosts.splice(index, 1)
+      }
+    },
+    addDomain() {
+      this.ruleForm.hosts.push({
+        value: '',
+        key: Date.now()
+      })
+    }
+  }
+}
+</script>
+<style>
+  .demo-ruleForm .el-input{
+    width: 380px;
+  }
+  .preinput .el-textarea__inner{
+    font-family: monospace, monospace;
+    font-size: 1em;
+    /*width: 370px;*/
+    height: 300px;
+  }
+  .preshow .el-form-item__content{
+    width: 100%;
+    background: #c0ccda;
+    overflow-x: scroll;
+
+  }
+  .action_footer .el-form-item__content{
+    text-align: center;
+    margin-left: 0px !important;
+  }
+</style>

src/views/docker/runingEnvDev.vue

@@ -5,7 +5,7 @@
         <svg-icon icon-class="list"/>
         运行环境列表
         <el-select v-model="cluster" placeholder="请选择集群名称" @change="changeCluster">
-          <el-option v-for="item in clusterArray" :value="item" :label="item" :key="item" />
+          <el-option v-for="item in clusterArray" :value="item.clusterName" :label="item.clusterName" :key="item.clusterName" />
         </el-select>
       </p>
       <el-table
@@ -51,7 +51,8 @@
   </div>
 </template>
 <script>
-import { fetchKubernetesList, getCluster } from '@/api/docker'
+import { fetchKubernetesList } from '@/api/docker'
+import { getCluster } from '@/api/cluster'
 
 export default {
   data() {

src/views/docker/runingEnvTest.vue

@@ -5,7 +5,7 @@
         <svg-icon icon-class="list"/>
         运行环境列表
         <el-select v-model="cluster" placeholder="请选择集群名称" @change="changeCluster">
-          <el-option v-for="item in clusterArray" :value="item" :label="item" :key="item" />
+          <el-option v-for="item in clusterArray" :value="item.clusterName" :label="item.clusterName" :key="item.clusterName" />
         </el-select>
       </p>
       <el-table
@@ -51,7 +51,8 @@
   </div>
 </template>
 <script>
-import { fetchKubernetesList, getCluster } from '@/api/docker'
+import { fetchKubernetesList } from '@/api/docker'
+import { getCluster } from '@/api/cluster'
 
 export default {
   data() {