搜索集群节点样式更新

hanbaoshan

2020-10-19 c0c79d9b58705a3c8c13ea9f23b1dd0f724a04af

 src/pages/settings/components/ClusterManagement.vue

@@ -30,7 +30,7 @@

          <!-- 加入已有集群 -->
          <el-tab-pane label="加入已有集群" name="2" :disabled="isHasColony">
            <el-form label-width="80px" :model="joinForm" :rules="joinRules" ref="joinForm">
            <el-form label-width="80px" :model="joinForm" :rules="joinRules" ref="joinForm" v-loading="joinLoading">
              <el-form-item label="IP地址" style="width:440px">
                <el-input
                  v-model="joinForm.clusterip"
@@ -94,26 +94,39 @@
                style="margin-right:10px;"
                type="primary"
                size="small"
                @click="submitForm('manageForm')"
                @click="updateCluster('manageForm')"
              >保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="12" style="height: 100%;" v-if="members.length !== 0">
      <el-col
        :span="12"
        style="height: 100%;"
        v-if="members.length !== 0 && isSearch"
        class="node-container"
      >
        <serfDiagram
          ref="diagram"
          :members="members"
          :searchNodes="nodes"
          :agent="agentName"
          v-loading="loading"
          :isShowHover="false"
          @selected-node="joinNode"
          class="nodes-svg"
        ></serfDiagram>
      </el-col>
      <el-col
        :span="12"
        style="height: 100%;"
        v-if="innerNodes.length !== 0 && !isSearch"
        class="node-container"
      >
        <cloud-node :nodes="innerNodes"></cloud-node>
      </el-col>
    </el-row>

    <div class="ui-top-view">
    <!-- <div class="ui-top-view">
      <div class="ui-top-title">存储集群管理</div>
    </div>
    <el-row>
@@ -126,7 +139,7 @@
              size="small"
              @click="createEsCluster()"
            >创建存储集群</el-button>
            <!-- <p>点击将本机创建为存储集群</p> -->
            
          </el-tab-pane>
          <el-tab-pane label="加入已有集群" name="s-second" v-if="sActiveName != 's-third1'">
            <el-form label-width="80px">
@@ -163,8 +176,7 @@
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    </el-row> -->
  </div>
</template>

@@ -189,14 +201,15 @@
import {
  getDevInfo
} from "@/api/system";

import cloudNode from "./CloudNode";
import serfDiagram from "@/components/serfDiagram";
import ipInput from "@/components/subComponents/IPInput";
import {isIPv4} from "@/scripts/validate";
import { isIPv4 } from "@/scripts/validate";
export default {
  components: {
    serfDiagram,
    ipInput
    ipInput,
    cloudNode
  },
  data() {
    const checkPwd = (rule, value, callback) => {
@@ -216,7 +229,7 @@
        }
      }, 1000);
    };
    

    return {
      activeName: "1",
      sActiveName: "s-first",
@@ -268,18 +281,28 @@
      esNodes: [],
      scheduleId: "",
      isHasColony: false,
      isSearch: false,
      currentCluster: {},
      searchNum: "",
      loading: false,
      searchDis: false,
      agentName: "",
      members: [],
      nodes: [],
      innerNodes: [],
      intervalTimer: null,
      joinLoading: false
    };
  },
  mounted() {
    this.findCluster();
    let _this = this;
    this.intervalTimer = setInterval(()=>{
      _this.findCluster();
    },30000);
    this.getEsClusterNodes();
  },
  beforeDestroy(){
    clearInterval(this.intervalTimer);
  },
  methods: {
    cleanValue() {
@@ -327,10 +350,12 @@
        }
      });
    },
   
    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",
@@ -348,7 +373,11 @@
            nodeIps: nodeIps
          };
          this.joinCluster(json).then(() => {
            _this.joinLoading = false;
            this.findCluster();
          }).catch(e=>{
            console.log(e);
            _this.joinLoading = false;
          });
        } else {
          console.log("error submit!!");
@@ -372,6 +401,7 @@
      }
    },
    async searchColony() {
      this.isSearch = true;
      this.$refs["joinForm"].validate(valid => {
        if (valid) {
          this.members = [];
@@ -389,10 +419,12 @@
            .catch(() => {
              this.searchDis = false;
              this.loading = false;
              this.isSearch = false;
            });
        } else {
          this.searchDis = false;
          this.loading = false;
          this.isSearch = false;
          return false;
        }
      });
@@ -429,8 +461,7 @@
            return element.node_id === i.node_id;
          });
          if (found === undefined) {
            //this.members.push(i);
            this.nodes.push(i);
            this.members.push(i);
          }
        });
      }
@@ -475,12 +506,13 @@
          this.ruleForm.clustername = res.data.clusterName;
          this.ruleForm.clusterpwd = res.data.clusterpwd
          this.ruleForm.virtualIp = res.data.virtualIp
          let list = res.data.nodes.map(i => {
            debugger
          //let list = res.data.nodes.map(i => {
          this.isSearch = false;
          this.innerNodes = res.data.nodes.map(i => {
            let obj = {};
            obj.device_type = i.device_type;
            obj.workType = i.device_type.substr(2,2);
            obj.hardwareType = i.device_type.substr(4,2);
            obj.workType = i.device_type.substr(2, 2);
            obj.hardwareType = i.device_type.substr(4, 2);
            obj.cluster_id = i.cluster_id;
            obj.clusterName = res.data.clusterName;
            obj.create_time = i.create_time;
@@ -489,10 +521,11 @@
            obj.node_ip = i.node_ip;
            obj.nodeName = i.node_name;
            obj.Address = i.node_ip;
            obj.role = i.role ? i.role : "pc";
            obj.role = i.drift_state ? i.drift_state : "pc";
            return obj;
          });
          this.members = this.members.concat(list);

          //this.members = this.members.concat(list);
          console.log(this.members)
        } else {
          this.isHasColony = false;
@@ -510,9 +543,19 @@
        console.log(e)
      })
    },
    async updateClusterName() {
    async updateCluster() {
      if (this.ruleForm.clustername === "") {
        this.$message({
          type: "error",
          message: "集群名称不能为空"
        })

        return
      }

      let res = await updateClusterName({
        clusterName: this.mangeForm.colonyName
        clusterName: this.ruleForm.clustername,
        virtualIp: this.ruleForm.virtualIp
      });
      this.$notify({
        title: res.success ? "成功" : "失败",
@@ -550,6 +593,7 @@
          this.isHasColony = false;
          this.activeName = "1";
          this.members = [];
          this.innerNodes = [];
        }
      }).catch(() => { });

@@ -696,7 +740,7 @@
        });
      })
    },
    onIpBlur (ip) {
    onIpBlur(ip) {
      //this.vrIpForm.virtual_ip = ip;
      this.ruleForm.virtualIp = ip;
      console.log(this.ruleForm.virtualIp)
@@ -704,7 +748,7 @@

  },

  created () { }
  created() { }

};
</script>
@@ -777,7 +821,5 @@
  height: 30px;
  line-height: 30px;
}
.nodes-svg{
  background-color: rgba(127, 255, 212, 0.459);
}

</style>