From b5e2e236828b7fbc0e8f2bdbf66651ad8907e3b1 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 21 七月 2021 16:40:17 +0800
Subject: [PATCH] all
---
src/pages/systemSettings/components/ClusterManagement.vue | 422 ++++++++++++++++++++++++++++++---------------------
1 files changed, 247 insertions(+), 175 deletions(-)
diff --git a/src/pages/systemSettings/components/ClusterManagement.vue b/src/pages/systemSettings/components/ClusterManagement.vue
index bedd193..f4bfa1a 100644
--- a/src/pages/systemSettings/components/ClusterManagement.vue
+++ b/src/pages/systemSettings/components/ClusterManagement.vue
@@ -7,23 +7,52 @@
<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="100px">
+ <el-form
+ :model="ruleForm"
+ :rules="rules"
+ ref="ruleForm"
+ label-width="100px"
+ >
<el-form-item label="闆嗙兢鍚嶇О" prop="clustername">
- <el-input v-model="ruleForm.clustername" placeholder="鎵嬪姩杈撳叆, 濡傗�滈泦缇鈥�" size="small"></el-input>
+ <el-input
+ v-model="ruleForm.clustername"
+ placeholder="鎵嬪姩杈撳叆, 濡傗�滈泦缇鈥�"
+ size="small"
+ ></el-input>
</el-form-item>
<el-form-item label="闆嗙兢ID">
- <el-input v-model="clusterid" placeholder="涓嶅厑璁歌緭鍏�,淇濆瓨鍚庡洖鏄�" disabled size="small"></el-input>
+ <el-input
+ v-model="clusterid"
+ placeholder="涓嶅厑璁歌緭鍏�,淇濆瓨鍚庡洖鏄�"
+ disabled
+ size="small"
+ ></el-input>
</el-form-item>
<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
+ 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" class="ip-input-comp"></ip-input>
+ <ip-input
+ :ip="ruleForm.virtualIp"
+ :on-blur="onIpBlur"
+ class="ip-input-comp"
+ ></ip-input>
</el-form-item>
<el-form-item>
- <el-button type="primary" size="small" @click="submitForm('ruleForm')">淇濆瓨</el-button>
+ <el-button
+ type="primary"
+ size="small"
+ @click="submitForm('ruleForm')"
+ >淇濆瓨</el-button
+ >
</el-form-item>
</el-form>
</el-tab-pane>
@@ -38,10 +67,22 @@
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
+ 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-form-item
+ label="IP鍦板潃"
+ style="width: 440px"
+ prop="clusterip"
+ >
<el-input
v-model="joinForm.clusterip"
placeholder="璇疯緭鍏ラ泦缇ゅ唴浠绘剰IP鍦板潃"
@@ -52,7 +93,11 @@
<!-- <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: 440px"
+ >
<el-input
v-model="joinForm.clusterpwd"
placeholder="璇疯緭鍏ラ泦缇ゅ瘑鐮�"
@@ -65,16 +110,26 @@
slot="suffix"
v-show="!searchDis"
@click="searchColony"
- >鎼滅储闆嗙兢</el-button>
- <el-button type="text" slot="suffix" v-show="searchDis" @click="stopSearch">
+ >鎼滅储闆嗙兢</el-button
+ >
+ <el-button
+ type="text"
+ slot="suffix"
+ v-show="searchDis"
+ @click="stopSearch"
+ >
<i class="el-icon-loading"></i>鍋滄鎼滅储
</el-button>
</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 style="width: 440px">
+ <el-button type="primary" @click="join('joinForm')" size="small"
+ >鍔犲叆闆嗙兢</el-button
+ >
</el-form-item>
- <div class="form-tip">璇疯緭鍏ヤ互涓婁俊鎭姞鍏ラ泦缇�,鎴栬�呴�氳繃闆嗙兢瀵嗙爜鎼滅储鍚庤繘琛屽姞鍏�</div>
+ <div class="form-tip">
+ 璇疯緭鍏ヤ互涓婁俊鎭姞鍏ラ泦缇�,鎴栬�呴�氳繃闆嗙兢瀵嗙爜鎼滅储鍚庤繘琛屽姞鍏�
+ </div>
</el-form>
</el-tab-pane>
</el-tabs>
@@ -82,10 +137,19 @@
<div v-if="isHasColony" id="h-alaycluster">
<el-form :model="ruleForm" ref="ruleForm" label-width="100px">
<el-form-item label="闆嗙兢鍚嶇О" prop="clustername">
- <el-input v-model="ruleForm.clustername" placeholder="鎵嬪姩杈撳叆, 濡傗�滈泦缇鈥�" size="small"></el-input>
+ <el-input
+ v-model="ruleForm.clustername"
+ placeholder="鎵嬪姩杈撳叆, 濡傗�滈泦缇鈥�"
+ size="small"
+ ></el-input>
</el-form-item>
<el-form-item label="闆嗙兢ID">
- <el-input v-model="clusterid" placeholder="涓嶅厑璁歌緭鍏�,淇濆瓨鍚庡洖鏄�" disabled size="small"></el-input>
+ <el-input
+ v-model="clusterid"
+ placeholder="涓嶅厑璁歌緭鍏�,淇濆瓨鍚庡洖鏄�"
+ disabled
+ size="small"
+ ></el-input>
</el-form-item>
<el-form-item label="闆嗙兢瀵嗙爜" prop="clusterpwd">
<el-input
@@ -97,23 +161,30 @@
</el-form-item>
<el-form-item label="闆嗙兢IP" prop="virtualIp">
- <ip-input :ip="ruleForm.virtualIp" :on-blur="onIpBlur" class="ip-input-comp"></ip-input>
+ <ip-input
+ :ip="ruleForm.virtualIp"
+ :on-blur="onIpBlur"
+ class="ip-input-comp"
+ ></ip-input>
</el-form-item>
- <el-form-item style="text-align: right;">
- <el-button size="small" type="danger" @click="leave">閫�鍑洪泦缇�</el-button>
+ <el-form-item style="text-align: right">
+ <el-button size="small" type="danger" @click="leave"
+ >閫�鍑洪泦缇�</el-button
+ >
<el-button
- style="margin-right:10px;"
+ style="margin-right: 10px"
type="primary"
size="small"
@click="updateCluster('manageForm')"
- >淇濆瓨</el-button>
+ >淇濆瓨</el-button
+ >
</el-form-item>
</el-form>
</div>
</el-col>
<el-col
:span="12"
- style="height: 100%;"
+ style="height: 100%"
v-if="members.length !== 0 && isSearch"
class="node-container"
>
@@ -129,7 +200,7 @@
</el-col>
<el-col
:span="12"
- style="height: 100%;"
+ style="height: 100%"
v-if="innerNodes.length !== 0 && !isSearch"
class="node-container"
>
@@ -206,12 +277,10 @@
setVrrp,
createESNode,
addESNode,
- getEsClusterInfo
+ getEsClusterInfo,
} from "@/api/clusterManage";
-import {
- getDevInfo
-} from "@/api/system";
+import { getDevInfo } from "@/api/system";
import cloudNode from "./CloudNode";
import serfDiagram from "@/components/serfDiagram";
import ipInput from "@/components/subComponents/IPInput";
@@ -220,10 +289,11 @@
components: {
serfDiagram,
ipInput,
- cloudNode
+ cloudNode,
},
data() {
const checkPwd = (rule, value, callback) => {
+ debugger
if (!value) {
return callback(new Error("瀵嗙爜涓嶈兘涓虹┖"));
}
@@ -247,48 +317,37 @@
ruleForm: {
clustername: "",
clusterpwd: "",
- virtualIp: ""
+ virtualIp: "",
},
vrIpForm: {
enable: true,
//serve_port: "",
serve_port: null,
- virtual_ip: ""
+ virtual_ip: "",
},
manageForm: {
clustername: "娴嬭瘯闆嗙兢1",
clusterpwd: "123456",
- virtualip: "192.168.1.188"
+ virtualip: "192.168.1.188",
},
joinForm: {
clusterid: "",
clusterip: "",
- clusterpwd: ""
+ clusterpwd: "",
},
rules: {
clustername: [
- { required: true, message: "璇疯緭鍏ラ泦缇ゅ悕绉�", trigger: "change" }
+ { required: true, message: "璇疯緭鍏ラ泦缇ゅ悕绉�", trigger: "change" },
],
clusterpwd: [{ validator: checkPwd, trigger: "change" }],
- virtualIp: [
- { required: true, validator: isIPv4, trigger: "change" }
- ]
+ virtualIp: [{ required: true, validator: isIPv4, trigger: "change" }],
},
- // vrIpRules: {
- // virtualIp: [
- // { required: true, message: "璇疯緭鍏ヨ櫄鎷烮P", trigger: "change" }
- // ]
- // },
joinRules: {
clusterid: [
{ required: true, message: "璇疯緭鍏ラ泦缇D", trigger: "change" },
],
- clusterip: [
- { required: true, validator: isIPv4, trigger: "change" }
- ],
- clusterpwd: [
- { validator: checkPwd, trigger: "change" }
- ]
+ clusterip: [{ required: true, validator: isIPv4, trigger: "change" }],
+ clusterpwd: [{ validator: checkPwd, trigger: "change" }],
},
esNodes: [],
scheduleId: "",
@@ -303,7 +362,7 @@
innerNodes: [],
intervalTimer: null,
joinLoading: false,
- showJoinConfirm: false
+ showJoinConfirm: false,
};
},
mounted() {
@@ -319,7 +378,7 @@
},
methods: {
checkPsd(psd) {
- return psd.trim().length === 6
+ return psd.trim().length === 6;
},
// cleanValue() {
// this.members = [];
@@ -328,14 +387,14 @@
// console.log(tab, event);
// },
submitForm(formName) {
- this.$refs[formName].validate(valid => {
+ this.$refs[formName].validate((valid) => {
if (valid) {
//alert("submit!");
let json = {
clusterId: this.clusterid,
clusterName: this.ruleForm.clustername,
password: this.ruleForm.clusterpwd,
- virtualIp: this.ruleForm.virtualIp
+ virtualIp: this.ruleForm.virtualIp,
};
this.createCluster(json).then(() => {
this.findCluster();
@@ -369,7 +428,7 @@
join(formName) {
let _this = this;
- this.$refs[formName].validate(valid => {
+ this.$refs[formName].validate((valid) => {
if (valid) {
_this.joinLoading = true;
// if (Object.keys(this.currentCluster).length === 0) {
@@ -381,22 +440,24 @@
// _this.joinLoading = false;
// return true;
// }
- let nodeIps = this.members.map(i => {
+ let nodeIps = this.members.map((i) => {
return i.Address;
});
let json = {
//clusterId: this.currentCluster.cluster_id,
clusterId: this.joinForm.clusterid,
password: this.joinForm.clusterpwd,
- nodeIps: [this.joinForm.clusterip]
+ nodeIps: [this.joinForm.clusterip],
};
- this.joinCluster(json).then(() => {
- _this.joinLoading = false;
- this.findCluster();
- }).catch(e => {
- console.log(e);
- _this.joinLoading = false;
- });
+ this.joinCluster(json)
+ .then(() => {
+ _this.joinLoading = false;
+ this.findCluster();
+ })
+ .catch((e) => {
+ console.log(e);
+ _this.joinLoading = false;
+ });
} else {
console.log("error submit!!");
return false;
@@ -409,7 +470,7 @@
this.$notify({
title: res.success ? "鎴愬姛" : "澶辫触",
message: res.msg,
- type: res.success ? "success" : "error"
+ type: res.success ? "success" : "error",
});
},
async randomPwd() {
@@ -421,7 +482,7 @@
async searchColony() {
this.isSearch = true;
this.$refs["joinForm"].clearValidate();
- this.$refs["joinForm"].validateField('clusterpwd');
+ this.$refs["joinForm"].validateField("clusterpwd");
if (this.checkPsd(this.joinForm.clusterpwd)) {
this.members = [];
let json = {
@@ -464,7 +525,7 @@
async getSearchNodes() {
let res = await getSearchNodes();
if (res && res.success) {
- let list = res.data.map(i => {
+ let list = res.data.map((i) => {
let obj = {};
obj.cluster_id = i.clusterID ? i.clusterID : "";
obj.create_time = i.create_time ? i.create_time : "";
@@ -475,8 +536,8 @@
obj.role = i.role ? i.role : "pc";
return obj;
});
- list.map(i => {
- let found = this.members.find(element => {
+ list.map((i) => {
+ let found = this.members.find((element) => {
return element.node_id === i.node_id;
});
if (found === undefined) {
@@ -495,25 +556,27 @@
return true;
}
stopSearching({
- searchNum: this.searchNum
- }).then((res) => {
- console.log(res, '姝ｅ父缁撴潫')
- this.loading = false;
- this.searchDis = false;
- window.clearInterval(this.scheduleId);
- }).catch((err) => {
- console.log(err, '鎶ラ敊缁撴潫')
- this.$notify({
- type: 'error',
- duration: 1000,
- message: '鍋滄鎼滅储鎶ラ敊锛�'
- })
- // window.setTimeout(()=>{
- // this.loading = false;
- // this.searchDis = false;
- // window.clearInterval(this.scheduleId);
- // },2000)
+ searchNum: this.searchNum,
})
+ .then((res) => {
+ console.log(res, "姝ｅ父缁撴潫");
+ this.loading = false;
+ this.searchDis = false;
+ window.clearInterval(this.scheduleId);
+ })
+ .catch((err) => {
+ console.log(err, "鎶ラ敊缁撴潫");
+ this.$notify({
+ type: "error",
+ duration: 1000,
+ message: "鍋滄鎼滅储鎶ラ敊锛�",
+ });
+ // window.setTimeout(()=>{
+ // this.loading = false;
+ // this.searchDis = false;
+ // window.clearInterval(this.scheduleId);
+ // },2000)
+ });
},
async findCluster() {
let res = await findCluster();
@@ -523,11 +586,11 @@
this.activeName = "3";
this.clusterid = res.data.clusterId;
this.ruleForm.clustername = res.data.clusterName;
- this.ruleForm.clusterpwd = '******';
- this.ruleForm.virtualIp = res.data.virtualIp
+ this.ruleForm.clusterpwd = "******";
+ this.ruleForm.virtualIp = res.data.virtualIp;
//let list = res.data.nodes.map(i => {
this.isSearch = false;
- this.innerNodes = res.data.nodes.map(i => {
+ this.innerNodes = res.data.nodes.map((i) => {
let obj = {};
obj.device_type = i.device_type;
obj.workType = i.device_type.substr(2, 2);
@@ -545,7 +608,7 @@
});
//this.members = this.members.concat(list);
- console.log(this.members)
+ console.log(this.members);
} else {
this.isHasColony = false;
// this.activeName = '1'
@@ -566,67 +629,68 @@
if (this.ruleForm.clustername === "") {
this.$message({
type: "error",
- message: "闆嗙兢鍚嶇О涓嶈兘涓虹┖"
- })
+ message: "闆嗙兢鍚嶇О涓嶈兘涓虹┖",
+ });
- return
+ return;
}
let res = await updateClusterName({
clusterName: this.ruleForm.clustername,
- virtualIp: this.ruleForm.virtualIp
+ virtualIp: this.ruleForm.virtualIp,
});
this.$notify({
title: res.success ? "鎴愬姛" : "澶辫触",
message: res.msg,
- type: res.success ? "success" : "error"
+ type: res.success ? "success" : "error",
});
},
async joinCluster(json) {
let res = await joinCluster(json);
if (res.success) {
- this.members = []
+ this.members = [];
}
this.$notify({
title: res.success ? "鎴愬姛" : "澶辫触",
message: res.msg,
- type: res.success ? "success" : "error"
+ type: res.success ? "success" : "error",
});
},
leave() {
this.$confirm(`纭畾閫�鍑洪泦缇ゅ悧?`, {
center: true,
cancelButtonClass: "comfirm-class-cancle",
- confirmButtonClass: "comfirm-class-sure"
- }).then(async () => {
- let res = await leave();
- this.$notify({
- title: res.success ? "鎴愬姛" : "澶辫触",
- message: res.msg,
- type: res.success ? "success" : "error"
- });
- if (res && res.success) {
+ confirmButtonClass: "comfirm-class-sure",
+ })
+ .then(async () => {
+ let res = await leave();
+ this.$notify({
+ title: res.success ? "鎴愬姛" : "澶辫触",
+ message: res.msg,
+ type: res.success ? "success" : "error",
+ });
+ if (res && res.success) {
+ this.ruleForm.clustername = "";
+ this.ruleForm.clusterpwd = "";
+ this.clusterid = "";
+ this.isHasColony = false;
+ this.activeName = "1";
+ this.members = [];
+ this.innerNodes = [];
+ }
+ })
+ .catch(() => {
this.ruleForm.clustername = "";
- this.ruleForm.clusterpwd = ""
+ this.ruleForm.clusterpwd = "";
this.clusterid = "";
this.isHasColony = false;
this.activeName = "1";
this.members = [];
this.innerNodes = [];
- }
- }).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)
+ console.log("join", node);
let _this = this;
this.currentCluster.cluster_id = node.cluster_id;
if (this.activeName === "3") {
@@ -640,7 +704,7 @@
this.$confirm("鏄惁瑕佸姞鍏ヨ妭鐐� " + node.nodeName + "?", "鍔犲叆闆嗙兢", {
confirmButtonText: "纭畾",
cancelButtonText: "鍙栨秷",
- type: "success"
+ type: "success",
})
.then(() => {
_this.showJoinConfirm = true;
@@ -648,17 +712,20 @@
//clusterId: this.currentCluster.cluster_id,
clusterId: node.cluster_id,
password: this.joinForm.clusterpwd,
- nodeIps: [node.Address]
+ 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.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 => {
@@ -713,91 +780,96 @@
if (hostIpAddr.length) {
rsp = await getEsClusterInfo({ ip: hostIpAddr });
if (rsp && rsp.success) {
- this.esNodes = rsp.data.map(el => {
+ 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),
+ 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';
+ this.sActiveName = "s-third";
}
}
}
},
createEsCluster() {
- createESNode().then(rsp => {
- if (rsp && rsp.success) {
- this.$message({
- type: "success",
- duration: 2000,
- message: "鍒涘缓鎴愬姛"
- });
+ createESNode()
+ .then((rsp) => {
+ if (rsp && rsp.success) {
+ this.$message({
+ type: "success",
+ duration: 2000,
+ message: "鍒涘缓鎴愬姛",
+ });
- this.getSearchNodes();
- } else {
+ this.getSearchNodes();
+ } else {
+ this.$message({
+ type: "error",
+ duration: 2000,
+ message: rsp.msg,
+ });
+ }
+ })
+ .catch((rsp) => {
this.$message({
type: "error",
duration: 2000,
- message: rsp.msg
+ 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鍦板潃"
+ 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: "鍔犲叆鎴愬姛"
- });
+ 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.getSearchNodes();
+ } else {
+ this.$message({
+ type: "error",
+ duration: 2000,
+ message: rsp.msg,
+ });
+ }
+ })
+ .catch((rsp) => {
this.$message({
type: "error",
duration: 2000,
- message: rsp.msg
+ 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)
- }
-
+ console.log(this.ruleForm.virtualIp);
+ },
},
- created() { }
-
+ created() {},
};
</script>
<style lang="scss">
--
Gitblit v1.8.0