监控ui

heyujie

2021-10-11 ae2d855c89ca722ac7309fdf1aa6ceed370e3b95

 src/pages/systemSettings/components/ClusterManagement.vue

@@ -7,23 +7,52 @@
      <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="100px">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
            >
              <el-form-item label="集群名称" prop="clustername">
                <el-input v-model="ruleForm.clustername" placeholder="手动输入, 如“集群A”" size="small"></el-input>
                <el-input
                  v-model="ruleForm.clustername"
                  placeholder="手动输入, 如“集群A”"
                  size="small"
                ></el-input>
              </el-form-item>
              <el-form-item label="集群ID">
                <el-input v-model="clusterid" placeholder="不允许输入,保存后回显" disabled size="small"></el-input>
                <el-input
                  v-model="clusterid"
                  placeholder="不允许输入,保存后回显"
                  disabled
                  size="small"
                ></el-input>
              </el-form-item>
              <el-form-item label="集群密码" prop="clusterpwd">
                <el-input v-model="ruleForm.clusterpwd" placeholder="请输入6位密码,或点击生成" size="small">
                  <el-button type="text" slot="suffix" @click="generatePassword">生成密码</el-button>
                <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">
                <ip-input :ip="ruleForm.virtualIp" :on-blur="onIpBlur" class="ip-input-comp"></ip-input>
                <ip-input
                  :ip="ruleForm.virtualIp"
                  :on-blur="onIpBlur"
                  class="ip-input-comp"
                ></ip-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="submitForm('ruleForm')">保存</el-button>
                <el-button
                  type="primary"
                  size="small"
                  @click="submitForm('ruleForm')"
                  >保存</el-button
                >
              </el-form-item>
            </el-form>
          </el-tab-pane>
@@ -38,10 +67,22 @@
              class="join-form"
              v-loading="joinLoading"
            >
              <el-form-item label="集群ID" style="width:440px" prop="clusterid">
                <el-input v-model="joinForm.clusterid" placeholder size="small"></el-input>
              <el-form-item
                label="集群ID"
                style="width: 440px"
                prop="clusterid"
              >
                <el-input
                  v-model="joinForm.clusterid"
                  placeholder
                  size="small"
                ></el-input>
              </el-form-item>
              <el-form-item label="IP地址" style="width:440px" prop="clusterip">
              <el-form-item
                label="IP地址"
                style="width: 440px"
                prop="clusterip"
              >
                <el-input
                  v-model="joinForm.clusterip"
                  placeholder="请输入集群内任意IP地址"
@@ -52,7 +93,11 @@
                <!-- <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: 440px"
              >
                <el-input
                  v-model="joinForm.clusterpwd"
                  placeholder="请输入集群密码"
@@ -65,16 +110,26 @@
                    slot="suffix"
                    v-show="!searchDis"
                    @click="searchColony"
                  >搜索集群</el-button>
                  <el-button type="text" slot="suffix" v-show="searchDis" @click="stopSearch">
                    >搜索集群</el-button
                  >
                  <el-button
                    type="text"
                    slot="suffix"
                    v-show="searchDis"
                    @click="stopSearch"
                  >
                    <i class="el-icon-loading"></i>停止搜索
                  </el-button>
                </el-input>
              </el-form-item>
              <el-form-item style="width:440px">
                <el-button type="primary" @click="join('joinForm')" size="small">加入集群</el-button>
              <el-form-item style="width: 440px">
                <el-button type="primary" @click="join('joinForm')" size="small"
                  >加入集群</el-button
                >
              </el-form-item>
              <div class="form-tip">请输入以上信息加入集群,或者通过集群密码搜索后进行加入</div>
              <div class="form-tip">
                请输入以上信息加入集群,或者通过集群密码搜索后进行加入
              </div>
            </el-form>
          </el-tab-pane>
        </el-tabs>
@@ -82,10 +137,19 @@
        <div v-if="isHasColony" id="h-alaycluster">
          <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
            <el-form-item label="集群名称" prop="clustername">
              <el-input v-model="ruleForm.clustername" placeholder="手动输入, 如“集群A”" size="small"></el-input>
              <el-input
                v-model="ruleForm.clustername"
                placeholder="手动输入, 如“集群A”"
                size="small"
              ></el-input>
            </el-form-item>
            <el-form-item label="集群ID">
              <el-input v-model="clusterid" placeholder="不允许输入,保存后回显" disabled size="small"></el-input>
              <el-input
                v-model="clusterid"
                placeholder="不允许输入,保存后回显"
                disabled
                size="small"
              ></el-input>
            </el-form-item>
            <el-form-item label="集群密码" prop="clusterpwd">
              <el-input
@@ -97,23 +161,30 @@
            </el-form-item>

            <el-form-item label="集群IP" prop="virtualIp">
              <ip-input :ip="ruleForm.virtualIp" :on-blur="onIpBlur" class="ip-input-comp"></ip-input>
              <ip-input
                :ip="ruleForm.virtualIp"
                :on-blur="onIpBlur"
                class="ip-input-comp"
              ></ip-input>
            </el-form-item>
            <el-form-item style="text-align: right;">
              <el-button size="small" type="danger" @click="leave">退出集群</el-button>
            <el-form-item style="text-align: right">
              <el-button size="small" type="danger" @click="leave"
                >退出集群</el-button
              >
              <el-button
                style="margin-right:10px;"
                style="margin-right: 10px"
                type="primary"
                size="small"
                @click="updateCluster('manageForm')"
              >保存</el-button>
                >保存</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col
        :span="12"
        style="height: 100%;"
        style="height: 100%"
        v-if="members.length !== 0 && isSearch"
        class="node-container"
      >
@@ -129,7 +200,7 @@
      </el-col>
      <el-col
        :span="12"
        style="height: 100%;"
        style="height: 100%"
        v-if="innerNodes.length !== 0 && !isSearch"
        class="node-container"
      >
@@ -202,16 +273,13 @@
  updateClusterName,
  joinCluster,
  leave,
  getVrrp,
  setVrrp,
  createESNode,
  addESNode,
  getEsClusterInfo
  getEsClusterInfo,
} from "@/api/clusterManage";

import {
  getDevInfo
} from "@/api/system";
import { getDevInfo } from "@/api/system";
import cloudNode from "./CloudNode";
import serfDiagram from "@/components/serfDiagram";
import ipInput from "@/components/subComponents/IPInput";
@@ -220,10 +288,11 @@
  components: {
    serfDiagram,
    ipInput,
    cloudNode
    cloudNode,
  },
  data() {
    const checkPwd = (rule, value, callback) => {
      debugger
      if (!value) {
        return callback(new Error("密码不能为空"));
      }
@@ -247,48 +316,37 @@
      ruleForm: {
        clustername: "",
        clusterpwd: "",
        virtualIp: ""
        virtualIp: "",
      },
      vrIpForm: {
        enable: true,
        //serve_port: "",
        serve_port: null,
        virtual_ip: ""
        virtual_ip: "",
      },
      manageForm: {
        clustername: "测试集群1",
        clusterpwd: "123456",
        virtualip: "192.168.1.188"
        virtualip: "192.168.1.188",
      },
      joinForm: {
        clusterid: "",
        clusterip: "",
        clusterpwd: ""
        clusterpwd: "",
      },
      rules: {
        clustername: [
          { required: true, message: "请输入集群名称", trigger: "change" }
          { required: true, message: "请输入集群名称", trigger: "change" },
        ],
        clusterpwd: [{ validator: checkPwd, trigger: "change" }],
        virtualIp: [
          { required: true, validator: isIPv4, trigger: "change" }
        ]
        virtualIp: [{ required: true, validator: isIPv4, trigger: "change" }],
      },
      // vrIpRules: {
      //   virtualIp: [
      //     { required: true, message: "请输入虚拟IP", trigger: "change" }
      //   ]
      // },
      joinRules: {
        clusterid: [
          { required: true, message: "请输入集群ID", trigger: "change" },
        ],
        clusterip: [
          { required: true, validator: isIPv4, trigger: "change" }
        ],
        clusterpwd: [
          { validator: checkPwd, trigger: "change" }
        ]
        clusterip: [{ required: true, validator: isIPv4, trigger: "change" }],
        clusterpwd: [{ validator: checkPwd, trigger: "change" }],
      },
      esNodes: [],
      scheduleId: "",
@@ -303,7 +361,7 @@
      innerNodes: [],
      intervalTimer: null,
      joinLoading: false,
      showJoinConfirm: false
      showJoinConfirm: false,
    };
  },
  mounted() {
@@ -319,7 +377,7 @@
  },
  methods: {
    checkPsd(psd) {
      return psd.trim().length === 6
      return psd.trim().length === 6;
    },
    // cleanValue() {
    //   this.members = [];
@@ -328,14 +386,14 @@
    //   console.log(tab, event);
    // },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //alert("submit!");
          let json = {
            clusterId: this.clusterid,
            clusterName: this.ruleForm.clustername,
            password: this.ruleForm.clusterpwd,
            virtualIp: this.ruleForm.virtualIp
            virtualIp: this.ruleForm.virtualIp,
          };
          this.createCluster(json).then(() => {
            this.findCluster();
@@ -369,7 +427,7 @@

    join(formName) {
      let _this = this;
      this.$refs[formName].validate(valid => {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          _this.joinLoading = true;
          // if (Object.keys(this.currentCluster).length === 0) {
@@ -381,22 +439,24 @@
          //   _this.joinLoading = false;
          //   return true;
          // }
          let nodeIps = this.members.map(i => {
          let nodeIps = this.members.map((i) => {
            return i.Address;
          });
          let json = {
            //clusterId: this.currentCluster.cluster_id,
            clusterId: this.joinForm.clusterid,
            password: this.joinForm.clusterpwd,
            nodeIps: [this.joinForm.clusterip]
            nodeIps: [this.joinForm.clusterip],
          };
          this.joinCluster(json).then(() => {
            _this.joinLoading = false;
            this.findCluster();
          }).catch(e => {
            console.log(e);
            _this.joinLoading = false;
          });
          this.joinCluster(json)
            .then(() => {
              _this.joinLoading = false;
              this.findCluster();
            })
            .catch((e) => {
              console.log(e);
              _this.joinLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
@@ -409,7 +469,7 @@
      this.$notify({
        title: res.success ? "成功" : "失败",
        message: res.msg,
        type: res.success ? "success" : "error"
        type: res.success ? "success" : "error",
      });
    },
    async randomPwd() {
@@ -421,7 +481,7 @@
    async searchColony() {
      this.isSearch = true;
      this.$refs["joinForm"].clearValidate();
      this.$refs["joinForm"].validateField('clusterpwd');
      this.$refs["joinForm"].validateField("clusterpwd");
      if (this.checkPsd(this.joinForm.clusterpwd)) {
        this.members = [];
        let json = {
@@ -464,7 +524,7 @@
    async getSearchNodes() {
      let res = await getSearchNodes();
      if (res && res.success) {
        let list = res.data.map(i => {
        let list = res.data.map((i) => {
          let obj = {};
          obj.cluster_id = i.clusterID ? i.clusterID : "";
          obj.create_time = i.create_time ? i.create_time : "";
@@ -475,8 +535,8 @@
          obj.role = i.role ? i.role : "pc";
          return obj;
        });
        list.map(i => {
          let found = this.members.find(element => {
        list.map((i) => {
          let found = this.members.find((element) => {
            return element.node_id === i.node_id;
          });
          if (found === undefined) {
@@ -495,25 +555,27 @@
        return true;
      }
      stopSearching({
        searchNum: this.searchNum
      }).then((res) => {
        console.log(res, '正常结束')
        this.loading = false;
        this.searchDis = false;
        window.clearInterval(this.scheduleId);
      }).catch((err) => {
        console.log(err, '报错结束')
        this.$notify({
          type: 'error',
          duration: 1000,
          message: '停止搜索报错！'
        })
        // window.setTimeout(()=>{
        //   this.loading = false;
        //   this.searchDis = false;
        //   window.clearInterval(this.scheduleId);
        // },2000)
        searchNum: this.searchNum,
      })
        .then((res) => {
          console.log(res, "正常结束");
          this.loading = false;
          this.searchDis = false;
          window.clearInterval(this.scheduleId);
        })
        .catch((err) => {
          console.log(err, "报错结束");
          this.$notify({
            type: "error",
            duration: 1000,
            message: "停止搜索报错！",
          });
          // window.setTimeout(()=>{
          //   this.loading = false;
          //   this.searchDis = false;
          //   window.clearInterval(this.scheduleId);
          // },2000)
        });
    },
    async findCluster() {
      let res = await findCluster();
@@ -523,11 +585,11 @@
          this.activeName = "3";
          this.clusterid = res.data.clusterId;
          this.ruleForm.clustername = res.data.clusterName;
          this.ruleForm.clusterpwd = '******';
          this.ruleForm.virtualIp = res.data.virtualIp
          this.ruleForm.clusterpwd = "******";
          this.ruleForm.virtualIp = res.data.virtualIp;
          //let list = res.data.nodes.map(i => {
          this.isSearch = false;
          this.innerNodes = res.data.nodes.map(i => {
          this.innerNodes = res.data.nodes.map((i) => {
            let obj = {};
            obj.device_type = i.device_type;
            obj.workType = i.device_type.substr(2, 2);
@@ -545,88 +607,79 @@
          });

          //this.members = this.members.concat(list);
          console.log(this.members)
          console.log(this.members);
        } else {
          this.isHasColony = false;
          // this.activeName = '1'
        }
      }
    },
    // 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 updateCluster() {
      if (this.ruleForm.clustername === "") {
        this.$message({
          type: "error",
          message: "集群名称不能为空"
        })
          message: "集群名称不能为空",
        });

        return
        return;
      }

      let res = await updateClusterName({
        clusterName: this.ruleForm.clustername,
        virtualIp: this.ruleForm.virtualIp
        virtualIp: this.ruleForm.virtualIp,
      });
      this.$notify({
        title: res.success ? "成功" : "失败",
        message: res.msg,
        type: res.success ? "success" : "error"
        type: res.success ? "success" : "error",
      });
    },
    async joinCluster(json) {
      let res = await joinCluster(json);
      if (res.success) {
        this.members = []
        this.members = [];
      }
      this.$notify({
        title: res.success ? "成功" : "失败",
        message: res.msg,
        type: res.success ? "success" : "error"
        type: res.success ? "success" : "error",
      });
    },
    leave() {
      this.$confirm(`确定退出集群吗?`, {
        center: true,
        cancelButtonClass: "comfirm-class-cancle",
        confirmButtonClass: "comfirm-class-sure"
      }).then(async () => {
        let res = await leave();
        this.$notify({
          title: res.success ? "成功" : "失败",
          message: res.msg,
          type: res.success ? "success" : "error"
        });
        if (res && res.success) {
        confirmButtonClass: "comfirm-class-sure",
      })
        .then(async () => {
          let res = await leave();
          this.$notify({
            title: res.success ? "成功" : "失败",
            message: res.msg,
            type: res.success ? "success" : "error",
          });
          if (res && res.success) {
            this.ruleForm.clustername = "";
            this.ruleForm.clusterpwd = "";
            this.clusterid = "";
            this.isHasColony = false;
            this.activeName = "1";
            this.members = [];
            this.innerNodes = [];
          }
        })
        .catch(() => {
          this.ruleForm.clustername = "";
          this.ruleForm.clusterpwd = ""
          this.ruleForm.clusterpwd = "";
          this.clusterid = "";
          this.isHasColony = false;
          this.activeName = "1";
          this.members = [];
          this.innerNodes = [];
        }
      }).catch(() => {
         this.ruleForm.clustername = "";
          this.ruleForm.clusterpwd = ""
          this.clusterid = "";
          this.isHasColony = false;
          this.activeName = "1";
          this.members = [];
          this.innerNodes = [];
       });

        });
    },
    joinNode(event, node) {
      console.log('join', node)
      console.log("join", node);
      let _this = this;
      this.currentCluster.cluster_id = node.cluster_id;
      if (this.activeName === "3") {
@@ -640,7 +693,7 @@
        this.$confirm("是否要加入节点 " + node.nodeName + "?", "加入集群", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "success"
          type: "success",
        })
          .then(() => {
            _this.showJoinConfirm = true;
@@ -648,17 +701,20 @@
              //clusterId: this.currentCluster.cluster_id,
              clusterId: node.cluster_id,
              password: this.joinForm.clusterpwd,
              nodeIps: [node.Address]
              nodeIps: [node.Address],
            };
            this.joinCluster(json).then(() => {
              _this.showJoinConfirm = false;
              this.findCluster();
            }).catch(e => {
              console.log(e);
              _this.showJoinConfirm = false;
            });
          }).catch(e => {
            console.log(e)
            this.joinCluster(json)
              .then(() => {
                _this.showJoinConfirm = false;
                this.findCluster();
              })
              .catch((e) => {
                console.log(e);
                _this.showJoinConfirm = false;
              });
          })
          .catch((e) => {
            console.log(e);
          });

        // this.$refs["joinForm"].validate(valid => {
@@ -713,91 +769,96 @@
      if (hostIpAddr.length) {
        rsp = await getEsClusterInfo({ ip: hostIpAddr });
        if (rsp && rsp.success) {
          this.esNodes = rsp.data.map(el => {
          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),
              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';
            this.sActiveName = "s-third";
          }
        }
      }
    },
    createEsCluster() {
      createESNode().then(rsp => {
        if (rsp && rsp.success) {
          this.$message({
            type: "success",
            duration: 2000,
            message: "创建成功"
          });
      createESNode()
        .then((rsp) => {
          if (rsp && rsp.success) {
            this.$message({
              type: "success",
              duration: 2000,
              message: "创建成功",
            });

          this.getSearchNodes();
        } else {
            this.getSearchNodes();
          } else {
            this.$message({
              type: "error",
              duration: 2000,
              message: rsp.msg,
            });
          }
        })
        .catch((rsp) => {
          this.$message({
            type: "error",
            duration: 2000,
            message: rsp.msg
            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地址"
          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: "加入成功"
          });
      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.getSearchNodes();
          } else {
            this.$message({
              type: "error",
              duration: 2000,
              message: rsp.msg,
            });
          }
        })
        .catch((rsp) => {
          this.$message({
            type: "error",
            duration: 2000,
            message: rsp.msg
            message: rsp.msg,
          });
        }
      }).catch(rsp => {
        this.$message({
          type: "error",
          duration: 2000,
          message: rsp.msg
        });
      })
    },
    onIpBlur(ip) {
      //this.vrIpForm.virtual_ip = ip;
      this.ruleForm.virtualIp = ip;
      console.log(this.ruleForm.virtualIp)
    }

      console.log(this.ruleForm.virtualIp);
    },
  },

  created() { }

  created() {},
};
</script>
<style lang="scss">
@@ -872,9 +933,6 @@
  #h-alaycluster {
    .el-form-item__content {
      text-align: left;
      // input {
      //   max-width: 360px;
      // }
    }
  }
}