集群管理,统计查询(集群)更新

hanbaoshan

2020-10-21 dc14fbf78c19bbe343a79547260ead1e4bd9d24e

 src/pages/settings/components/ClusterManagement.vue

@@ -14,15 +14,15 @@
              <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:500px">
              <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>
              </el-form-item>
              <el-form-item label="虚拟/外部IP" prop="virtualIp">
                <ip-input :ip="ruleForm.virtualIp" :on-blur="onIpBlur"></ip-input>
              <el-form-item label="集群IP" prop="virtualIp">
                <ip-input :ip="ruleForm.virtualIp" :on-blur="onIpBlur" class="ip-input-comp"></ip-input>
              </el-form-item>
              <el-form-item style="width:500px">
              <el-form-item>
                <el-button type="primary" size="small" @click="submitForm('ruleForm')">保存</el-button>
              </el-form-item>
            </el-form>
@@ -30,11 +30,33 @@

          <!-- 加入已有集群 -->
          <el-tab-pane label="加入已有集群" name="2" :disabled="isHasColony">
            <el-form label-width="80px" :model="joinForm" :rules="joinRules" ref="joinForm" v-loading="joinLoading">
              <el-form-item label="IP地址" style="width:440px">
            <el-form
              label-width="80px"
              :model="joinForm"
              :rules="joinRules"
              ref="joinForm"
              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>
              <el-form-item label="IP地址" style="width:440px" prop="clusterip">
                <el-input
                  v-model="joinForm.clusterip"
                  placeholder="请输入集群内任意IP地址"
                  size="small"
                  autocomplete="new-password"
                ></el-input>

                <!-- <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-input
                  v-model="joinForm.clusterpwd"
                  placeholder="请输入集群密码"
                  show-password
                  size="small"
                  autocomplete="new-password"
                >
@@ -48,22 +70,11 @@
                    <i class="el-icon-loading"></i>停止搜索
                  </el-button>
                </el-input>

                <!-- <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-input
                  v-model="joinForm.clusterpwd"
                  placeholder="请输入集群密码"
                  show-password
                  size="small"
                  autocomplete="new-password"
                ></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>
              <div class="form-tip">请输入以上信息加入集群,或者通过集群密码搜索后进行加入</div>
            </el-form>
          </el-tab-pane>
        </el-tabs>
@@ -76,7 +87,7 @@
            <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:500px">
            <el-form-item label="集群密码" prop="clusterpwd">
              <el-input
                v-model="ruleForm.clusterpwd"
                disabled
@@ -85,10 +96,10 @@
              ></el-input>
            </el-form-item>

            <el-form-item label="虚拟/外部IP" prop="virtualIp">
              <ip-input :ip="ruleForm.virtualIp" :on-blur="onIpBlur"></ip-input>
            <el-form-item label="集群IP" prop="virtualIp">
              <ip-input :ip="ruleForm.virtualIp" :on-blur="onIpBlur" class="ip-input-comp"></ip-input>
            </el-form-item>
            <el-form-item style="width:440px;text-align: right;">
            <el-form-item style="text-align: right;">
              <el-button size="small" type="danger" @click="leave">退出集群</el-button>
              <el-button
                style="margin-right:10px;"
@@ -176,7 +187,7 @@
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row> -->
    </el-row>-->
  </div>
</template>

@@ -211,17 +222,12 @@
    ipInput,
    cloudNode
  },
  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位!"));
        // } else {
        //   callback();
        // }
        if (value.length != 6) {
          callback(new Error("密码应为6位!"));
        } else {
@@ -255,6 +261,7 @@
        virtualip: "192.168.1.188"
      },
      joinForm: {
        clusterid: "",
        clusterip: "",
        clusterpwd: ""
      },
@@ -273,8 +280,13 @@
      //   ]
      // },
      joinRules: {
        clusterid: [
          { required: true, message: "请输入集群ID", trigger: "change" },
        ],
        clusterip: [
          { required: true, validator: isIPv4, trigger: "change" }
        ],
        clusterpwd: [
          { required: true, message: "请输入集群密码", trigger: "change" },
          { validator: checkPwd, trigger: "change" }
        ]
      },
@@ -294,25 +306,28 @@
      showJoinConfirm: false
    };
  },
  mounted() {
  mounted () {
    this.findCluster();
    let _this = this;
    this.intervalTimer = setInterval(()=>{
    this.intervalTimer = setInterval(() => {
      _this.findCluster();
    },30000);
    this.getEsClusterNodes();
    }, 30000);
    //this.getEsClusterNodes();
  },
  beforeDestroy(){
  beforeDestroy () {
    clearInterval(this.intervalTimer);
  },
  methods: {
    cleanValue() {
    checkPsd (psd) {
      return psd.trim().length === 6
    },
    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!");
@@ -332,7 +347,7 @@
      });
    },

    saveForm(formName) {
    saveForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
@@ -352,32 +367,33 @@
      });
    },

    join(formName) {
    join (formName) {
      let _this = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          _this.joinLoading = true;
          if (Object.keys(this.currentCluster).length === 0) {
            this.$notify({
              type: "info",
              duration: 1000,
              message: "请先选择一个集群节点"
            });
            _this.joinLoading = false;
            return true;
          }
          // if (Object.keys(this.currentCluster).length === 0) {
          //   this.$notify({
          //     type: "info",
          //     duration: 1000,
          //     message: "请先选择一个集群节点"
          //   });
          //   _this.joinLoading = false;
          //   return true;
          // }
          let nodeIps = this.members.map(i => {
            return i.Address;
          });
          let json = {
            clusterId: this.currentCluster.cluster_id,
            //clusterId: this.currentCluster.cluster_id,
            clusterId: this.joinForm.clusterid,
            password: this.joinForm.clusterpwd,
            nodeIps: nodeIps
            nodeIps: [this.joinForm.clusterip]
          };
          this.joinCluster(json).then(() => {
            _this.joinLoading = false;
            this.findCluster();
          }).catch(e=>{
          }).catch(e => {
            console.log(e);
            _this.joinLoading = false;
          });
@@ -387,7 +403,7 @@
        }
      });
    },
    async createCluster(json) {
    async createCluster (json) {
      let res = await createSerfCluster(json);
      console.log(res, "创建集群");
      this.$notify({
@@ -396,42 +412,43 @@
        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.isSearch = true;
      this.$refs["joinForm"].validate(valid => {
        if (valid) {
          this.members = [];
          let json = {
            password: this.joinForm.clusterpwd,
            ip: this.joinForm.clusterip
          };
      this.$refs["joinForm"].clearValidate();
      this.$refs["joinForm"].validateField('clusterpwd');
      if (this.checkPsd(this.joinForm.clusterpwd)) {
        this.members = [];
        let json = {
          password: this.joinForm.clusterpwd,
          //ip: this.joinForm.clusterip
        };

          this.search(json)
            .then(() => {
              this.setSchedule();
              // this.searchDis = false;
              // this.loading = false;
            })
            .catch(() => {
              this.searchDis = false;
              this.loading = false;
              this.isSearch = false;
            });
        } else {
          this.searchDis = false;
          this.loading = false;
          this.isSearch = false;
          return false;
        }
      });
        this.search(json)
          .then(() => {
            this.setSchedule();
            // this.searchDis = false;
            // this.loading = false;
          })
          .catch(() => {
            this.searchDis = false;
            this.loading = false;
            this.isSearch = false;
          });
      } else {
        this.searchDis = false;
        this.loading = false;
        this.isSearch = false;
        return false;
      }
      //});
    },
    async search(json) {
    async search (json) {
      let res = await search(json);
      if (res && res.success) {
        console.log(res, "搜索集群");
@@ -444,7 +461,7 @@
      }, 10 * 1000);
    },
    //搜索集群
    async getSearchNodes() {
    async getSearchNodes () {
      let res = await getSearchNodes();
      if (res && res.success) {
        let list = res.data.map(i => {
@@ -468,12 +485,12 @@
        });
      }
    },
    setSchedule() {
    setSchedule () {
      this.scheduleId = window.setInterval(() => {
        this.getSearchNodes();
      }, 1000);
    },
    async stopSearch() {
    async stopSearch () {
      if (!this.loading) {
        return true;
      }
@@ -498,7 +515,7 @@
        // },2000)
      })
    },
    async findCluster() {
    async findCluster () {
      let res = await findCluster();
      if (res && res.success) {
        if (res.data && res.data.clusterId) {
@@ -506,7 +523,7 @@
          this.activeName = "3";
          this.clusterid = res.data.clusterId;
          this.ruleForm.clustername = res.data.clusterName;
          this.ruleForm.clusterpwd = res.data.clusterpwd
          this.ruleForm.clusterpwd = '******';
          this.ruleForm.virtualIp = res.data.virtualIp
          //let list = res.data.nodes.map(i => {
          this.isSearch = false;
@@ -535,7 +552,7 @@
        }
      }
    },
    getVrrpInfo() {
    getVrrpInfo () {
      getVrrp().then(res => {
        if (res.success) {
          this.vrIpForm.virtual_ip = res.data.virtual_ip;
@@ -545,7 +562,7 @@
        console.log(e)
      })
    },
    async updateCluster() {
    async updateCluster () {
      if (this.ruleForm.clustername === "") {
        this.$message({
          type: "error",
@@ -565,7 +582,7 @@
        type: res.success ? "success" : "error"
      });
    },
    async joinCluster(json) {
    async joinCluster (json) {
      let res = await joinCluster(json);
      if (res.success) {
        this.members = []
@@ -576,7 +593,7 @@
        type: res.success ? "success" : "error"
      });
    },
    leave() {
    leave () {
      this.$confirm(`确定退出集群吗?`, {
        center: true,
        cancelButtonClass: "comfirm-class-cancle",
@@ -600,7 +617,8 @@
      }).catch(() => { });

    },
    joinNode(event, node) {
    joinNode (event, node) {
      console.log('join',node)
      let _this = this;
      this.currentCluster.cluster_id = node.cluster_id;
      if (this.activeName === "3") {
@@ -609,47 +627,64 @@
        return;
      }
      if (this.activeName === "2") {
        this.$refs["joinForm"].validate(valid => {
          if (valid) {
            if(_this.showJoinConfirm) return;
        debugger
        if (_this.showJoinConfirm) return;

        this.$confirm("是否要加入节点 " + node.nodeName + "?", "加入集群", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "success"
        })
          .then(() => {
            _this.showJoinConfirm = true;
            this.$confirm("是否要加入节点 " + node.nodeName + "?", "加入集群", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "success"
            })
              .then(() => {
                // this.agentName = 'node' + this.members.length
                // this.members.push({
                //   nodeName: this.agentName,
                //   Address: '172.10.10.26',
                //   role: 'pc'
                // })
                // this.$notify({
                //   type: 'success',
                //   duration: 1000,
                //   message: '加入成功!'
                // })
                console.log(this.currentCluster, '选择的集群节点')
                this.join("joinForm");
                _this.showJoinConfirm = false;
              })
              .catch(() => {
                this.$notify({
                  type: "info",
                  duration: 1000,
                  message: "已取消"
                });
                _this.showJoinConfirm = false;
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
            let json = {
              //clusterId: this.currentCluster.cluster_id,
              clusterId: node.cluster_id,
              password: this.joinForm.clusterpwd,
              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.$refs["joinForm"].validate(valid => {
        //   if (valid) {
        //     if (_this.showJoinConfirm) return;
        //     _this.showJoinConfirm = true;
        //     this.$confirm("是否要加入节点 " + node.nodeName + "?", "加入集群", {
        //       confirmButtonText: "确定",
        //       cancelButtonText: "取消",
        //       type: "success"
        //     })
        //       .then(() => {

        //         console.log(this.currentCluster, '选择的集群节点')
        //         this.join("joinForm");
        //         _this.showJoinConfirm = false;
        //       })
        //       .catch(() => {
        //         this.$notify({
        //           type: "info",
        //           duration: 1000,
        //           message: "已取消"
        //         });
        //         _this.showJoinConfirm = false;
        //       });
        //   } else {
        //     console.log("error submit!!");
        //     return false;
        //   }
        // });
      }
    },
    generatePassword() {
    generatePassword () {
      var chars =
        "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
      var uuid = [];
@@ -661,7 +696,7 @@
      this.ruleForm.clusterpwd = uuid.join("");
    },

    async getEsClusterNodes() {
    async getEsClusterNodes () {
      let rsp = await getDevInfo();
      let hostIpAddr = "";
      if (rsp && rsp.success) {
@@ -687,7 +722,7 @@
        }
      }
    },
    createEsCluster() {
    createEsCluster () {
      createESNode().then(rsp => {
        if (rsp && rsp.success) {
          this.$message({
@@ -712,7 +747,7 @@
        });
      })
    },
    joinESCluster() {
    joinESCluster () {
      if (!this.esNodeIp.length) {
        this.$message({
          type: "error",
@@ -746,7 +781,7 @@
        });
      })
    },
    onIpBlur(ip) {
    onIpBlur (ip) {
      //this.vrIpForm.virtual_ip = ip;
      this.ruleForm.virtualIp = ip;
      console.log(this.ruleForm.virtualIp)
@@ -754,7 +789,7 @@

  },

  created() { }
  created () { }

};
</script>
@@ -763,14 +798,27 @@
  width: 100%;
  height: 100%;
  overflow: auto;

  .el-form-item {
    width: 500px;
  }
  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before,
  .el-form-item.is-required:not(.is-no-asterisk)
    .el-form-item__label-wrap
    > .el-form-item__label:before {
    display: none;
  }
  .ip-input-comp {
    width: 400px;
    max-width: 400px;
  }
  .el-button {
    float: right;
  }
  .el-form-item__content {
    text-align: left;

    input {
      max-width: 360px;
      max-width: 400px !important;
    }
  }

@@ -817,9 +865,9 @@
  #h-alaycluster {
    .el-form-item__content {
      text-align: left;
      input {
        max-width: 360px;
      }
      // input {
      //   max-width: 360px;
      // }
    }
  }
}
@@ -827,5 +875,4 @@
  height: 30px;
  line-height: 30px;
}

</style>