完善存储集群管理功能

zhangzengfei

2020-10-12 4c7c89fe5a1fdcac09a355f054ef5d1695322459

完善存储集群管理功能

 src/api/clusterManage.ts

@@ -11,7 +11,7 @@
};

// 创建集群
export const createColony = (query: any) => {
export const createSerfCluster = (query: any) => {
  return request({
    url: "/data/api-v/cluster/create",
    method: "post",
@@ -100,4 +100,31 @@
    method: "post",
    data
  })
}

// 创建ES集群
export const createESNode = (data: any) => {
  return request({
    url: "/data/api-v/es/createNode",
    method: "post",
    data
  })
}

// 加入ES集群
export const addESNode = (data: any) => {
  return request({
    url: "/data/api-v/es/addCluster",
    method: "post",
    data
  })
}

// 获取ES集群信息
export const getEsClusterInfo = (data: any) => {
  return request({
    url: "/data/api-v/es/getEsClusterInfo",
    method: "post",
    data
  })
}

 src/pages/desktop/index/App.vue

@@ -52,8 +52,8 @@
        time: new Date()
      }, true);
    }, 1000);
    window.addEventListener('message',(e) => {
      if(e.data.msg == 'AppUpdate'){
    window.addEventListener('message', (e) => {
      if (e.data.msg == 'AppUpdate') {
        console.log('应用更新')
        this.showApps();
      }
@@ -70,14 +70,14 @@
        if (rsp && rsp.success) {
          _that.$store.state.desktop.docks = [];
          rsp.data.forEach(function (item) {
            if(item.installed){
            if (item.installed) {
              let temp = {
                id: item.id,
                create_by: item.create_by,
                create_time: item.create_time,
                height: item.height,
                icon: item.icon,
                src: item.iconBlob?'data:image/png;base64,'+item.iconBlob:item.icon,
                src: item.iconBlob ? 'data:image/png;base64,' + item.iconBlob : item.icon,
                installed: item.installed,
                isDelete: item.isDelete,
                isUpgrade: item.isUpgrade,
@@ -92,13 +92,13 @@
                width: item.width,
                isDefault: item.isDefault
              }
              

              _that.$store.commit('desktop/addDock', temp);
              console.log(item)
              console.log('apps update')
              // console.log(item)
              // console.log('apps update')
              //console.log(this.$store.state.desktop.docks)
            }
            

          });
        }
      })

 src/pages/settings/components/ClusterManagement.vue

@@ -4,7 +4,7 @@
      <div class="ui-top-title">视频分析集群管理</div>
    </div>
    <el-row>
      <el-col :span="12" >
      <el-col :span="12">
        <el-tabs v-model="activeName" id="e-alaycluster" v-if="!isHasColony">
          <el-tab-pane label="创建集群" name="1" :disabled="isHasColony">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
@@ -133,42 +133,46 @@
    <el-row>
      <el-col :span="12">
        <el-tabs id="e-dbcluster" v-model="sActiveName">
          <el-tab-pane label="创建集群" name="s-first">
            <el-button type="primary" style="float: none;margin: 20px 0px;" size="small">创建存储集群</el-button>
            <p>点击将本机创建为存储集群</p>
          <el-tab-pane label="创建集群" name="s-first" v-if="sActiveName != 's-third1'">
            <el-button
              type="primary"
              style="float: left;margin: 20px 0px;"
              size="small"
              @click="createEsCluster()"
            >创建存储集群</el-button>
            <!-- <p>点击将本机创建为存储集群</p> -->
          </el-tab-pane>
          <el-tab-pane label="加入已有集群" name="s-second">
          <el-tab-pane label="加入已有集群" name="s-second" v-if="sActiveName != 's-third1'">
            <el-form label-width="80px">
              <el-form-item label="IP地址" style="text-align: left;">
              <el-form-item label="IP地址" style="text-align: left;width: 300px;">
                <el-input
                  v-model="clusterip2"
                  v-model="esNodeIp"
                  placeholder="请输入集群内任意IP地址"
                  size="small"
                  autocomplete="off"
                >
                  <el-button
                    type="text"
                    slot="suffix"
                    v-show="!searchDis"
                    @click="searchColony"
                  >搜索集群</el-button>
                </el-input>
                ></el-input>
                <el-checkbox
                  label="主节点"
                  v-model="esNodeType"
                  style="margin-left: 20px;position: absolute;"
                ></el-checkbox>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="join('joinForm')" size="small">加入集群</el-button>
                <el-button
                  type="primary"
                  @click="joinESCluster()"
                  size="small"
                  style="float: left;"
                >加入集群</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="管理集群" name="s-third">
            <h3 style="text-align: left;margin: 10px 0px;">
              <b>集群名称</b>
              <span>xxx</span>
            </h3>
            <el-table :data="tableData" style="width: 100%">
          <el-tab-pane label="集群信息" name="s-third">
            <el-table :data="esNodes" style="width: 100%">
              <el-table-column prop="nodeType" label="节点类型"></el-table-column>
              <el-table-column prop="nodeName" label="节点名称"></el-table-column>
              <el-table-column prop="nodeIp" label="节点IP地址"></el-table-column>
              <el-table-column prop="registerTime" label="注册时间"></el-table-column>
              <el-table-column prop="name" label="节点名称"></el-table-column>
              <el-table-column prop="ip" label="节点IP地址" min-width="90px"></el-table-column>
              <el-table-column prop="buildDate" label="注册时间" min-width="120px"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
@@ -179,7 +183,7 @@

<script>
import {
  createColony,
  createSerfCluster,
  randomPwd,
  search,
  getSearchNodes,
@@ -189,8 +193,16 @@
  joinCluster,
  leave,
  getVrrp,
  setVrrp
  setVrrp,
  createESNode,
  addESNode,
  getEsClusterInfo
} from "@/api/clusterManage";

import {
  getDevInfo
} from "@/api/system";

import serfDiagram from "@/components/serfDiagram";
import ipInput from "@/components/subComponents/IPInput";

@@ -199,7 +211,7 @@
    serfDiagram,
    ipInput
  },
  data () {
  data() {
    const checkPwd = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
@@ -221,7 +233,8 @@
      activeName: "1",
      sActiveName: "s-first",
      clusterid: "",
      clusterip2: "",
      esNodeIp: "",
      esNodeType: "",
      clusterpwd2: "",
      sClusterip: "",
      ruleForm: {
@@ -264,26 +277,7 @@
          { validator: checkPwd, trigger: "change" }
        ]
      },
      tableData: [
        {
          nodeType: "主节点",
          nodeName: "xxxx",
          nodeIp: "192.168.12.102",
          registerTime: "2016-04-04"
        },
        {
          nodeType: "主节点",
          nodeName: "xxxx",
          nodeIp: "192.168.14.122",
          registerTime: "2016-05-04"
        },
        {
          nodeType: "主节点",
          nodeName: "xxxx",
          nodeIp: "192.168.10.132",
          registerTime: "2016-02-12"
        }
      ],
      esNodes: [],
      scheduleId: "",
      isHasColony: false,
      currentCluster: {},
@@ -294,15 +288,19 @@
      members: []
    };
  },
  watch: {},
  mounted() {
    this.findCluster();
    this.getVrrpInfo();
    this.getEsClusterNodes();
  },
  methods: {
    cleanValue () {
    cleanValue() {
      this.members = [];
    },
    sHandleClick (tab, event) {
    sHandleClick(tab, event) {
      console.log(tab, event);
    },
    submitForm (formName) {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //alert("submit!");
@@ -312,7 +310,7 @@
            password: this.ruleForm.clusterpwd,
            //virtualip: this.ruleForm.virtualip
          };
          this.createColony(json).then(() => {
          this.createCluster(json).then(() => {
            this.findCluster();
          });
        } else {
@@ -321,8 +319,7 @@
        }
      });
    },
    saveForm (formName) {
      debugger
    saveForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
@@ -341,7 +338,7 @@
        }
      });
    },
    join (formName) {
    join(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (Object.keys(this.currentCluster).length === 0) {
@@ -369,8 +366,8 @@
        }
      });
    },
    async createColony (json) {
      let res = await createColony(json);
    async createCluster(json) {
      let res = await createSerfCluster(json);
      console.log(res, "创建集群");
      this.$notify({
        title: res.success ? "成功" : "失败",
@@ -378,13 +375,13 @@
        type: res.success ? "success" : "error"
      });
    },
    async randomPwd () {
    async randomPwd() {
      let res = await randomPwd();
      if (res && res.success) {
        this.ruleForm.clusterpwd = res.data;
      }
    },
    async searchColony () {
    async searchColony() {
      this.$refs["joinForm"].validate(valid => {
        if (valid) {
          this.members = [];
@@ -410,7 +407,7 @@
        }
      });
    },
    async search (json) {
    async search(json) {
      let res = await search(json);
      if (res && res.success) {
        console.log(res, "搜索集群");
@@ -422,7 +419,7 @@
        this.stopSearch();
      }, 10 * 1000);
    },
    async getSearchNodes () {
    async getSearchNodes() {
      let res = await getSearchNodes();
      if (res && res.success) {
        let list = res.data.map(i => {
@@ -446,12 +443,12 @@
        });
      }
    },
    setSchedule () {
    setSchedule() {
      this.scheduleId = window.setInterval(() => {
        this.getSearchNodes();
      }, 1000);
    },
    async stopSearch () {
    async stopSearch() {
      if (!this.loading) {
        return true;
      }
@@ -476,7 +473,7 @@
        // },2000)
      })
    },
    async findCluster () {
    async findCluster() {
      let res = await findCluster();
      if (res && res.success) {
        if (res.data && res.data.clusterId) {
@@ -506,7 +503,7 @@
        }
      }
    },
    getVrrpInfo () {
    getVrrpInfo() {
      getVrrp().then(res => {
        if (res.success) {
          this.vrIpForm.virtual_ip = res.data.virtual_ip;
@@ -516,7 +513,7 @@
        console.log(e)
      })
    },
    async updateClusterName () {
    async updateClusterName() {
      let res = await updateClusterName({
        clusterName: this.mangeForm.colonyName
      });
@@ -526,7 +523,7 @@
        type: res.success ? "success" : "error"
      });
    },
    async joinCluster (json) {
    async joinCluster(json) {
      let res = await joinCluster(json);
      if (res.success) {
        this.members = []
@@ -537,7 +534,7 @@
        type: res.success ? "success" : "error"
      });
    },
    leave () {
    leave() {
      this.$confirm(`确定退出集群吗?`, {
        center: true,
        cancelButtonClass: "comfirm-class-cancle",
@@ -560,8 +557,7 @@
      }).catch(() => { });

    },
    joinNode (event, node) {
      debugger
    joinNode(event, node) {
      this.currentCluster.cluster_id = node.cluster_id;
      if (this.activeName === "3") {
        this.manageForm.clustername = node.clusterName;
@@ -605,7 +601,7 @@
        });
      }
    },
    generatePassword () {
    generatePassword() {
      var chars =
        "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
      var uuid = [];
@@ -616,15 +612,95 @@

      this.ruleForm.clusterpwd = uuid.join("");
    },
    onIpBlur (ip) {
    onIpBlur(ip) {
      this.vrIpForm.virtual_ip = ip;
    },
    async getEsClusterNodes() {
      let rsp = await getDevInfo();
      let hostIpAddr = "";
      if (rsp && rsp.success) {
        hostIpAddr = rsp.data.ip;
      }

      if (hostIpAddr.length) {
        rsp = await getEsClusterInfo({ ip: hostIpAddr });
        if (rsp && rsp.success) {
          this.esNodes = rsp.data.map(el => {
            return {
              // buildDate: "2018-06-11T23:38:03.357887Z",
              buildDate: el.buildDate.split("T")[0] + " " + el.buildDate.split("T")[1].slice(0, 8),
              ip: el.ip,
              name: el.name,
              nodeType: el.nodeType,
            }
          })

          if (this.esNodes.length) {
            this.sActiveName = 's-third';
          }
        }
      }
    },
    createEsCluster() {
      createESNode().then(rsp => {
        if (rsp && rsp.success) {
          this.$message({
            type: "success",
            duration: 2000,
            message: "创建成功"
          });

          this.getSearchNodes();
        } else {
          this.$message({
            type: "error",
            duration: 2000,
            message: rsp.msg
          });
        }
      }).catch(rsp => {
        this.$message({
          type: "error",
          duration: 2000,
          message: rsp.msg
        });
      })
    },
    joinESCluster() {
      if (!this.esNodeIp.length) {
        this.$message({
          type: "error",
          duration: 2000,
          message: "请输入正确的ip地址"
        });
        return;
      }

      addESNode({ ip: this.esNodeIp, option: this.esNodeType ? "1" : "2" }).then(rsp => {
        if (rsp && rsp.success) {
          this.$message({
            type: "success",
            duration: 2000,
            message: "加入成功"
          });

          this.getSearchNodes();
        } else {
          this.$message({
            type: "error",
            duration: 2000,
            message: rsp.msg
          });
        }
      }).catch(rsp => {
        this.$message({
          type: "error",
          duration: 2000,
          message: rsp.msg
        });
      })
    }
  },
  mounted () {
    this.findCluster();
    this.getVrrpInfo();
  },
  created () { }
  }
};
</script>
<style lang="scss">