From c0c79d9b58705a3c8c13ea9f23b1dd0f724a04af Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期一, 19 十月 2020 19:14:52 +0800
Subject: [PATCH] 搜索集群节点样式更新
---
src/pages/settings/components/ClusterManagement.vue | 82 ++++++++++++++++++++++++++++------------
1 files changed, 57 insertions(+), 25 deletions(-)
diff --git a/src/pages/settings/components/ClusterManagement.vue b/src/pages/settings/components/ClusterManagement.vue
index 8bc48eb..bcef075 100644
--- a/src/pages/settings/components/ClusterManagement.vue
+++ b/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,29 +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 && isSearch" class="node-container">
+ <el-col
+ :span="12"
+ style="height: 100%;"
+ v-if="members.length !== 0 && isSearch"
+ class="node-container"
+ >
<serfDiagram
ref="diagram"
:members="members"
: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
+ :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>
@@ -129,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">
@@ -166,8 +176,7 @@
</el-tab-pane>
</el-tabs>
</el-col>
- </el-row>
-
+ </el-row> -->
</div>
</template>
@@ -195,7 +204,7 @@
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,
@@ -220,7 +229,7 @@
}
}, 1000);
};
-
+
return {
activeName: "1",
sActiveName: "s-first",
@@ -280,11 +289,20 @@
agentName: "",
members: [],
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() {
@@ -332,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",
@@ -353,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!!");
@@ -487,8 +511,8 @@
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;
@@ -497,10 +521,10 @@
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);
console.log(this.members)
} else {
@@ -519,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 ? "鎴愬姛" : "澶辫触",
@@ -706,7 +740,7 @@
});
})
},
- onIpBlur (ip) {
+ onIpBlur(ip) {
//this.vrIpForm.virtual_ip = ip;
this.ruleForm.virtualIp = ip;
console.log(this.ruleForm.virtualIp)
@@ -714,7 +748,7 @@
},
- created () { }
+ created() { }
};
</script>
@@ -787,7 +821,5 @@
height: 30px;
line-height: 30px;
}
-.nodes-svg{
- background-color: rgba(127, 172, 255, 0.459);
-}
+
</style>
--
Gitblit v1.8.0