添加硬件信息显示

zhangzengfei

2020-10-14 261e25074b7f35010efccb86bf82f6fe36e4b10d

 src/pages/settings/components/ClusterManagement.vue

@@ -7,23 +7,22 @@
      <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">
            <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-form-item>
              <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">
                <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"></ip-input>
              </el-form-item>
              <el-form-item style="width:440px">
              <el-form-item style="width:500px">
                <el-button type="primary" size="small" @click="submitForm('ruleForm')">保存</el-button>
              </el-form-item>
            </el-form>
@@ -33,7 +32,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 +52,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">
@@ -64,24 +69,24 @@
        </el-tabs>
        <!-- 有集群的情况 -->
        <div v-if="isHasColony" id="h-alaycluster">
          <el-form :model="ruleForm" ref="ruleForm" label-width="80px">
          <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-form-item>
            <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">
              <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"></ip-input>
            </el-form-item>
            <el-form-item style="width:440px;text-align: right;">
              <el-button size="small" type="danger" @click="leave">退出集群</el-button>
@@ -95,64 +100,76 @@
          </el-form>
        </div>
      </el-col>
      <el-col :span="14" style="height: 100%;" v-if="members.length !== 0">
      <el-col :span="12" style="height: 100%;" v-if="members.length !== 0">
        <serfDiagram
          ref="diagram"
          :members="members"
          :agent="agentName"
          v-loading="loading"
          @selected-node="joinNode"
          class="nodes-svg"
        ></serfDiagram>
      </el-col>
    </el-row>

    <div class="ui-top-view">
      <div class="ui-top-title">存储集群管理</div>
    </div>
    <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-input v-model="clusterip2" placeholder="请输入集群内任意IP地址" size="small">
                  <el-button
                    type="text"
                    slot="suffix"
                    v-show="!searchDis"
                    @click="searchColony"
                  >搜索集群</el-button>
                </el-input>
              <el-form-item label="IP地址" style="text-align: left;width: 300px;">
                <el-input
                  v-model="esNodeIp"
                  placeholder="请输入集群内任意IP地址"
                  size="small"
                  autocomplete="off"
                ></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>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {
  createColony,
  createSerfCluster,
  randomPwd,
  search,
  getSearchNodes,
@@ -160,11 +177,21 @@
  findCluster,
  updateClusterName,
  joinCluster,
  leave
  leave,
  getVrrp,
  setVrrp,
  createESNode,
  addESNode,
  getEsClusterInfo
} from "@/api/clusterManage";

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

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

import {isIPv4} from "@/scripts/validate";
export default {
  components: {
    serfDiagram,
@@ -176,24 +203,37 @@
        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();
        }
      }, 1000);
    };
    
    return {
      activeName: "1",
      sActiveName: "s-first",
      clusterid: "",
      clusterip2: "",
      esNodeIp: "",
      esNodeType: "",
      clusterpwd2: "",
      sClusterip: "",
      ruleForm: {
        clustername: "",
        clusterpwd: "",
        virtualip: ""
        virtualIp: ""
      },
      vrIpForm: {
        enable: true,
        //serve_port: "",
        serve_port: null,
        virtual_ip: ""
      },
      manageForm: {
        clustername: "测试集群1",
@@ -209,36 +249,22 @@
          { required: true, message: "请输入集群名称", trigger: "change" }
        ],
        clusterpwd: [{ validator: checkPwd, trigger: "change" }],
        virtualip: [
          { required: true, message: "请输入虚拟IP", trigger: "change" }
        virtualIp: [
          { required: true, validator: isIPv4, trigger: "change" }
        ]
      },
      // vrIpRules: {
      //   virtualIp: [
      //     { required: true, message: "请输入虚拟IP", trigger: "change" }
      //   ]
      // },
      joinRules: {
        clusterpwd: [
          { required: true, message: "请输入集群密码", trigger: "change" },
          { 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: {},
@@ -249,7 +275,11 @@
      members: []
    };
  },
  watch: {},
  mounted() {
    this.findCluster();
    this.getVrrpInfo();
    this.getEsClusterNodes();
  },
  methods: {
    cleanValue() {
      this.members = [];
@@ -260,14 +290,15 @@
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
          debugger
          //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.createCluster(json).then(() => {
            this.findCluster();
          });
        } else {
@@ -276,7 +307,28 @@
        }
      });
    },
    join(formName) {

    saveForm(formName) {
      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,8 +356,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 ? "成功" : "失败",
@@ -322,6 +374,7 @@
    async searchColony() {
      this.$refs["joinForm"].validate(valid => {
        if (valid) {
          this.members = [];
          let json = {
            password: this.joinForm.clusterpwd,
            ip: this.joinForm.clusterip
@@ -419,9 +472,11 @@
          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 => {
            debugger
            let obj = {};
            obj.device_type = i.device_type;
            obj.cluster_id = i.cluster_id;
            obj.clusterName = res.data.clusterName;
            obj.create_time = i.create_time;
@@ -439,6 +494,16 @@
          // 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 updateClusterName() {
      let res = await updateClusterName({
@@ -478,10 +543,11 @@
          this.ruleForm.clusterpwd = ""
          this.clusterid = "";
          this.isHasColony = false;
          this.activeName = "1"
          this.activeName = "1";
          this.members = [];
        }
      }).catch(() => { });
      

    },
    joinNode(event, node) {
      this.currentCluster.cluster_id = node.cluster_id;
@@ -532,20 +598,113 @@
        "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;

    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
        });
      })
    },
    onIpBlur (ip) {
      //this.vrIpForm.virtual_ip = ip;
      this.ruleForm.virtualIp = ip;
      console.log(this.ruleForm.virtualIp)
    }
  

    
  },
  mounted() {
  mounted () {
    this.findCluster();
    
  },
  created() { }
  created () { }

};
</script>
<style lang="scss">
@@ -617,4 +776,7 @@
  height: 30px;
  line-height: 30px;
}
.nodes-svg{
  background-color: aquamarine;
}
</style>