From 1e1e5f612f252d66b0d0386cf52873bb1f3f7d7b Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期五, 01 九月 2023 16:10:37 +0800
Subject: [PATCH] 系统维护+系统监控器+调试工具的app 增加
---
src/pages/settings/components/ClusterManagement.vue | 439 +++++++++++++++++++++++++++++++++---------------------
1 files changed, 271 insertions(+), 168 deletions(-)
diff --git a/src/pages/settings/components/ClusterManagement.vue b/src/pages/settings/components/ClusterManagement.vue
index 9a04946..bedd193 100644
--- a/src/pages/settings/components/ClusterManagement.vue
+++ b/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">
- <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: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">
<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,34 +96,48 @@
></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;"
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"
: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>
@@ -125,7 +150,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">
@@ -162,8 +187,7 @@
</el-tab-pane>
</el-tabs>
</el-col>
- </el-row>
-
+ </el-row>-->
</div>
</template>
@@ -188,14 +212,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) => {
@@ -203,11 +228,6 @@
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 {
@@ -215,7 +235,7 @@
}
}, 1000);
};
-
+
return {
activeName: "1",
sActiveName: "s-first",
@@ -241,6 +261,7 @@
virtualip: "192.168.1.188"
},
joinForm: {
+ clusterid: "",
clusterip: "",
clusterpwd: ""
},
@@ -259,38 +280,56 @@
// ]
// },
joinRules: {
+ clusterid: [
+ { required: true, message: "璇疯緭鍏ラ泦缇D", trigger: "change" },
+ ],
+ clusterip: [
+ { required: true, validator: isIPv4, trigger: "change" }
+ ],
clusterpwd: [
- { required: true, message: "璇疯緭鍏ラ泦缇ゅ瘑鐮�", trigger: "change" },
{ validator: checkPwd, trigger: "change" }
]
},
esNodes: [],
scheduleId: "",
isHasColony: false,
+ isSearch: false,
currentCluster: {},
searchNum: "",
loading: false,
searchDis: false,
agentName: "",
- members: []
+ members: [],
+ innerNodes: [],
+ intervalTimer: null,
+ joinLoading: false,
+ showJoinConfirm: false
};
},
mounted() {
this.findCluster();
- this.getVrrpInfo();
- this.getEsClusterNodes();
+ let _this = this;
+ this.intervalTimer = setInterval(() => {
+ _this.findCluster();
+ }, 30000);
+ //this.getEsClusterNodes();
+ },
+ beforeDestroy() {
+ clearInterval(this.intervalTimer);
},
methods: {
- cleanValue() {
- this.members = [];
+ checkPsd(psd) {
+ return psd.trim().length === 6
},
- sHandleClick(tab, event) {
- console.log(tab, event);
- },
+ // cleanValue() {
+ // this.members = [];
+ // },
+ // sHandleClick(tab, event) {
+ // console.log(tab, event);
+ // },
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
- debugger
//alert("submit!");
let json = {
clusterId: this.clusterid,
@@ -308,47 +347,55 @@
});
},
- 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,
+ // 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) {
+ // };
+ // setVrrp(json).then(() => {
+ // this.getVrrpInfo();
+ // });
+ // } else {
+ // console.log("error submit!!");
+ // return false;
+ // }
+ // });
+ // },
+
+ join(formName) {
+ let _this = this;
this.$refs[formName].validate(valid => {
if (valid) {
- if (Object.keys(this.currentCluster).length === 0) {
- this.$notify({
- type: "info",
- duration: 1000,
- message: "璇峰厛閫夋嫨涓�涓泦缇よ妭鐐�"
- });
- return true;
- }
+ _this.joinLoading = 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 => {
+ console.log(e);
+ _this.joinLoading = false;
});
} else {
console.log("error submit!!");
@@ -372,30 +419,34 @@
}
},
async searchColony() {
- this.$refs["joinForm"].validate(valid => {
- if (valid) {
- this.members = [];
- let json = {
- password: this.joinForm.clusterpwd,
- ip: this.joinForm.clusterip
- };
+ this.isSearch = true;
+ 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;
- });
- } else {
- this.searchDis = false;
- this.loading = 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) {
let res = await search(json);
@@ -409,6 +460,7 @@
this.stopSearch();
}, 10 * 1000);
},
+ //鎼滅储闆嗙兢
async getSearchNodes() {
let res = await getSearchNodes();
if (res && res.success) {
@@ -471,12 +523,15 @@
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 => {
- 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.cluster_id = i.cluster_id;
obj.clusterName = res.data.clusterName;
obj.create_time = i.create_time;
@@ -485,29 +540,41 @@
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;
// 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() {
+ // 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: "闆嗙兢鍚嶇О涓嶈兘涓虹┖"
+ })
+
+ return
+ }
+
let res = await updateClusterName({
- clusterName: this.mangeForm.colonyName
+ clusterName: this.ruleForm.clustername,
+ virtualIp: this.ruleForm.virtualIp
});
this.$notify({
title: res.success ? "鎴愬姛" : "澶辫触",
@@ -545,11 +612,22 @@
this.isHasColony = false;
this.activeName = "1";
this.members = [];
+ this.innerNodes = [];
}
- }).catch(() => { });
+ }).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)
+ let _this = this;
this.currentCluster.cluster_id = node.cluster_id;
if (this.activeName === "3") {
this.manageForm.clustername = node.clusterName;
@@ -557,40 +635,60 @@
return;
}
if (this.activeName === "2") {
- this.$refs["joinForm"].validate(valid => {
- if (valid) {
- 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");
- })
- .catch(() => {
- this.$notify({
- type: "info",
- duration: 1000,
- message: "宸插彇娑�"
- });
- });
- } else {
- console.log("error submit!!");
- return false;
- }
- });
+ if (_this.showJoinConfirm) return;
+
+ this.$confirm("鏄惁瑕佸姞鍏ヨ妭鐐� " + node.nodeName + "?", "鍔犲叆闆嗙兢", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "success"
+ })
+ .then(() => {
+ _this.showJoinConfirm = true;
+ 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() {
@@ -690,20 +788,15 @@
});
})
},
- onIpBlur (ip) {
+ onIpBlur(ip) {
//this.vrIpForm.virtual_ip = ip;
this.ruleForm.virtualIp = ip;
console.log(this.ruleForm.virtualIp)
}
-
-
},
- mounted () {
- this.findCluster();
-
- },
- created () { }
+
+ created() { }
};
</script>
@@ -712,14 +805,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;
}
}
@@ -766,17 +872,14 @@
#h-alaycluster {
.el-form-item__content {
text-align: left;
- input {
- max-width: 360px;
- }
+ // input {
+ // max-width: 360px;
+ // }
}
}
}
.ui-top-view {
height: 30px;
line-height: 30px;
-}
-.nodes-svg{
- background-color: aquamarine;
}
</style>
--
Gitblit v1.8.0