集群管理,应用中心离线安装更新

hanbaoshan

2020-10-10 f98f5deaaa6c5a9cf4023e2d2dd1c445980e5a8f

 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">
@@ -14,16 +14,16 @@
              <el-form-item label="集群ID">
                <el-input v-model="clusterid" placeholder="不允许输入,保存后回显" disabled size="small"></el-input>
              </el-form-item>
              <el-form-item label="集群密码" prop="clusterpwd" style="width:440px">
                <el-input v-model="ruleForm.clusterpwd" placeholder="请输入6-12位密码,或点击生成" size="small">
              <el-form-item label="集群密码" prop="clusterpwd" style="width:500px">
                <el-input v-model="ruleForm.clusterpwd" placeholder="请输入6位密码,或点击生成" size="small">
                  <el-button type="text" slot="suffix" @click="generatePassword">生成密码</el-button>
                </el-input>
              </el-form-item>

              <el-form-item label="虚拟IP" prop="virtualip">
              <!-- <el-form-item label="虚拟IP" prop="virtualip">
                <ip-input :ip="ruleForm.virtualip" :on-blur="onIpBlur"></ip-input>
              </el-form-item>
              <el-form-item style="width:440px">
              </el-form-item>-->
              <el-form-item style="width:500px">
                <el-button type="primary" size="small" @click="submitForm('ruleForm')">保存</el-button>
              </el-form-item>
            </el-form>
@@ -33,7 +33,12 @@
          <el-tab-pane label="加入已有集群" name="2" :disabled="isHasColony">
            <el-form label-width="80px" :model="joinForm" :rules="joinRules" ref="joinForm">
              <el-form-item label="IP地址" style="width:440px">
                <el-input v-model="joinForm.clusterip" placeholder="请输入集群内任意IP地址" size="small">
                <el-input
                  v-model="joinForm.clusterip"
                  placeholder="请输入集群内任意IP地址"
                  size="small"
                  autocomplete="new-password"
                >
                  <el-button
                    type="text"
                    slot="suffix"
@@ -48,12 +53,13 @@
                <!-- <el-button size="mini" :disabled="searchDis" @click="searchColony">搜索集群</el-button>
                <el-button size="mini" @click="stopSearch">停止搜索</el-button>-->
              </el-form-item>
              <el-form-item label="集群密码" prop="clusterpwd" style="width:440px">
              <el-form-item label="集群密码" prop="clusterpwd" style="width:500px">
                <el-input
                  v-model="joinForm.clusterpwd"
                  placeholder="请输入集群密码"
                  show-password
                  size="small"
                  autocomplete="new-password"
                ></el-input>
              </el-form-item>
              <el-form-item style="width:440px">
@@ -71,18 +77,18 @@
            <el-form-item label="集群ID">
              <el-input v-model="clusterid" placeholder="不允许输入,保存后回显" disabled size="small"></el-input>
            </el-form-item>
            <el-form-item label="集群密码" prop="clusterpwd" style="width:440px">
            <el-form-item label="集群密码" prop="clusterpwd" style="width:500px">
              <el-input
                v-model="ruleForm.clusterpwd"
                disabled
                placeholder="请输入6-12位密码,或点击生成"
                placeholder="请输入6位密码,或点击生成"
                size="small"
              ></el-input>
            </el-form-item>

            <el-form-item label="虚拟IP" prop="virtualip">
            <!-- <el-form-item label="虚拟IP" prop="virtualip">
              <ip-input :ip="ruleForm.virtualip" :on-blur="onIpBlur"></ip-input>
            </el-form-item>
            </el-form-item>-->
            <el-form-item style="width:440px;text-align: right;">
              <el-button size="small" type="danger" @click="leave">退出集群</el-button>
              <el-button
@@ -95,7 +101,7 @@
          </el-form>
        </div>
      </el-col>
      <el-col :span="14" style="height: 100%;" v-if="members.length !== 0">
      <el-col :span="10" style="height: 100%;" v-if="members.length !== 0">
        <serfDiagram
          ref="diagram"
          :members="members"
@@ -103,6 +109,22 @@
          v-loading="loading"
          @selected-node="joinNode"
        ></serfDiagram>
      </el-col>
    </el-row>
    <div class="ui-top-view">
      <div class="ui-top-title">漂移IP</div>
    </div>
    <el-row>
      <el-col :span="12">
        <el-form :model="vrIpForm" ref="vrIpForm" :rules="vrIpRules" style="padding:20px 40px;">
          <el-form-item label="虚拟IP" prop="virtual_ip">
            <ip-input :ip="vrIpForm.virtual_ip" :on-blur="onIpBlur"></ip-input>
            <el-switch v-model="vrIpForm.enable" style="margin-left:30px;"></el-switch>
          </el-form-item>
          <el-form-item style="width:500px">
            <el-button type="primary" size="small" @click="saveForm('vrIpForm')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <div class="ui-top-view">
@@ -118,7 +140,12 @@
          <el-tab-pane label="加入已有集群" name="s-second">
            <el-form label-width="80px">
              <el-form-item label="IP地址" style="text-align: left;">
                <el-input v-model="clusterip2" placeholder="请输入集群内任意IP地址" size="small">
                <el-input
                  v-model="clusterip2"
                  placeholder="请输入集群内任意IP地址"
                  size="small"
                  autocomplete="off"
                >
                  <el-button
                    type="text"
                    slot="suffix"
@@ -160,7 +187,9 @@
  findCluster,
  updateClusterName,
  joinCluster,
  leave
  leave,
  getVrrp,
  setVrrp
} from "@/api/clusterManage";
import serfDiagram from "@/components/serfDiagram";
import ipInput from "@/components/subComponents/IPInput";
@@ -170,14 +199,19 @@
    serfDiagram,
    ipInput
  },
  data() {
  data () {
    const checkPwd = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      }
      setTimeout(() => {
        if (value.length > 16 || value.length < 6) {
          callback(new Error("密码应为6-16位!"));
        // if (value.length > 16 || value.length < 6) {
        //   callback(new Error("密码应为6-16位!"));
        // } else {
        //   callback();
        // }
        if (value.length != 6) {
          callback(new Error("密码应为6位!"));
        } else {
          callback();
        }
@@ -193,7 +227,13 @@
      ruleForm: {
        clustername: "",
        clusterpwd: "",
        virtualip: ""
        //virtualip: ""
      },
      vrIpForm: {
        enable: true,
        //serve_port: "",
        serve_port: null,
        virtual_ip: ""
      },
      manageForm: {
        clustername: "测试集群1",
@@ -209,6 +249,11 @@
          { required: true, message: "请输入集群名称", trigger: "change" }
        ],
        clusterpwd: [{ validator: checkPwd, trigger: "change" }],
        // virtualip: [
        //   { required: true, message: "请输入虚拟IP", trigger: "change" }
        // ]
      },
      vrIpRules: {
        virtualip: [
          { required: true, message: "请输入虚拟IP", trigger: "change" }
        ]
@@ -251,21 +296,21 @@
  },
  watch: {},
  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!");
          //alert("submit!");
          let json = {
            clusterId: this.clusterid,
            clusterName: this.ruleForm.clustername,
            password: this.ruleForm.clusterpwd,
            virtualip: this.ruleForm.virtualip
            //virtualip: this.ruleForm.virtualip
          };
          this.createColony(json).then(() => {
            this.findCluster();
@@ -276,7 +321,27 @@
        }
      });
    },
    join(formName) {
    saveForm (formName) {
      debugger
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
          let json = {
            enable: this.vrIpForm.enable,
            serve_port: this.vrIpForm.serve_port,
            virtual_ip: this.vrIpForm.virtual_ip,

          };
          setVrrp(json).then(() => {
            this.getVrrpInfo();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    join (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (Object.keys(this.currentCluster).length === 0) {
@@ -304,7 +369,7 @@
        }
      });
    },
    async createColony(json) {
    async createColony (json) {
      let res = await createColony(json);
      console.log(res, "创建集群");
      this.$notify({
@@ -313,15 +378,16 @@
        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 = [];
          let json = {
            password: this.joinForm.clusterpwd,
            ip: this.joinForm.clusterip
@@ -344,7 +410,7 @@
        }
      });
    },
    async search(json) {
    async search (json) {
      let res = await search(json);
      if (res && res.success) {
        console.log(res, "搜索集群");
@@ -356,7 +422,7 @@
        this.stopSearch();
      }, 10 * 1000);
    },
    async getSearchNodes() {
    async getSearchNodes () {
      let res = await getSearchNodes();
      if (res && res.success) {
        let list = res.data.map(i => {
@@ -380,12 +446,12 @@
        });
      }
    },
    setSchedule() {
    setSchedule () {
      this.scheduleId = window.setInterval(() => {
        this.getSearchNodes();
      }, 1000);
    },
    async stopSearch() {
    async stopSearch () {
      if (!this.loading) {
        return true;
      }
@@ -410,7 +476,7 @@
        // },2000)
      })
    },
    async findCluster() {
    async findCluster () {
      let res = await findCluster();
      if (res && res.success) {
        if (res.data && res.data.clusterId) {
@@ -419,7 +485,7 @@
          this.clusterid = res.data.clusterId;
          this.ruleForm.clustername = res.data.clusterName;
          this.ruleForm.clusterpwd = res.data.clusterpwd
          this.ruleForm.virtualip = res.data.virtualip
          //this.ruleForm.virtualip = res.data.virtualip
          let list = res.data.nodes.map(i => {
            let obj = {};
            obj.cluster_id = i.cluster_id;
@@ -440,7 +506,17 @@
        }
      }
    },
    async updateClusterName() {
    getVrrpInfo () {
      getVrrp().then(res => {
        if (res.success) {
          this.vrIpForm.virtual_ip = res.data.virtual_ip;
          this.vrIpForm.enable = res.data.enable;
        }
      }).catch(e => {
        console.log(e)
      })
    },
    async updateClusterName () {
      let res = await updateClusterName({
        clusterName: this.mangeForm.colonyName
      });
@@ -450,7 +526,7 @@
        type: res.success ? "success" : "error"
      });
    },
    async joinCluster(json) {
    async joinCluster (json) {
      let res = await joinCluster(json);
      if (res.success) {
        this.members = []
@@ -461,7 +537,7 @@
        type: res.success ? "success" : "error"
      });
    },
    leave() {
    leave () {
      this.$confirm(`确定退出集群吗?`, {
        center: true,
        cancelButtonClass: "comfirm-class-cancle",
@@ -478,12 +554,14 @@
          this.ruleForm.clusterpwd = ""
          this.clusterid = "";
          this.isHasColony = false;
          this.activeName = "1"
          this.activeName = "1";
          this.members = [];
        }
      }).catch(() => { });
      

    },
    joinNode(event, node) {
    joinNode (event, node) {
      debugger
      this.currentCluster.cluster_id = node.cluster_id;
      if (this.activeName === "3") {
        this.manageForm.clustername = node.clusterName;
@@ -527,25 +605,26 @@
        });
      }
    },
    generatePassword() {
    generatePassword () {
      var chars =
        "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
      var uuid = [];

      for (let i = 0; i < 16; i++) {
      for (let i = 0; i < 6; i++) {
        uuid[i] = chars[0 | (Math.random() * 50)];
      }

      this.ruleForm.clusterpwd = uuid.join("");
    },
    onIpBlur(ip) {
      this.ruleForm.virtualip = ip;
    onIpBlur (ip) {
      this.vrIpForm.virtual_ip = ip;
    }
  },
  mounted() {
  mounted () {
    this.findCluster();
    this.getVrrpInfo();
  },
  created() { }
  created () { }
};
</script>
<style lang="scss">