From d40f0071502682721e9172838894080f37c9a096 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期五, 16 十月 2020 15:54:25 +0800
Subject: [PATCH] 本机详细信息显示字段更新
---
src/pages/settings/components/ClusterManagement.vue | 349 +++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 261 insertions(+), 88 deletions(-)
diff --git a/src/pages/settings/components/ClusterManagement.vue b/src/pages/settings/components/ClusterManagement.vue
index d6d5d65..8bc48eb 100644
--- a/src/pages/settings/components/ClusterManagement.vue
+++ b/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="鎵嬪姩杈撳叆, 濡傗�滈泦缇鈥�" 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="鎵嬪姩杈撳叆, 濡傗�滈泦缇鈥�" 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,80 @@
</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 && isSearch" class="node-container">
<serfDiagram
ref="diagram"
:members="members"
:agent="agentName"
v-loading="loading"
@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-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,15 +181,26 @@
findCluster,
updateClusterName,
joinCluster,
- leave
+ leave,
+ getVrrp,
+ setVrrp,
+ createESNode,
+ addESNode,
+ getEsClusterInfo
} from "@/api/clusterManage";
+
+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";
export default {
components: {
serfDiagram,
- ipInput
+ ipInput,
+ cloudNode
},
data() {
const checkPwd = (rule, value, callback) => {
@@ -176,24 +208,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,47 +254,38 @@
{ required: true, message: "璇疯緭鍏ラ泦缇ゅ悕绉�", trigger: "change" }
],
clusterpwd: [{ validator: checkPwd, trigger: "change" }],
- virtualip: [
- { required: true, message: "璇疯緭鍏ヨ櫄鎷烮P", trigger: "change" }
+ virtualIp: [
+ { required: true, validator: isIPv4, trigger: "change" }
]
},
+ // vrIpRules: {
+ // virtualIp: [
+ // { required: true, message: "璇疯緭鍏ヨ櫄鎷烮P", 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,
+ isSearch: false,
currentCluster: {},
searchNum: "",
loading: false,
searchDis: false,
agentName: "",
- members: []
+ members: [],
+ innerNodes: [],
};
},
- watch: {},
+ mounted() {
+ this.findCluster();
+ this.getEsClusterNodes();
+ },
methods: {
cleanValue() {
this.members = [];
@@ -260,14 +296,14 @@
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
- alert("submit!");
+ //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 +312,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 +361,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 ? "鎴愬姛" : "澶辫触",
@@ -320,8 +377,10 @@
}
},
async searchColony() {
+ this.isSearch = true;
this.$refs["joinForm"].validate(valid => {
if (valid) {
+ this.members = [];
let json = {
password: this.joinForm.clusterpwd,
ip: this.joinForm.clusterip
@@ -336,10 +395,12 @@
.catch(() => {
this.searchDis = false;
this.loading = false;
+ this.isSearch = false;
});
} else {
this.searchDis = false;
this.loading = false;
+ this.isSearch = false;
return false;
}
});
@@ -356,6 +417,7 @@
this.stopSearch();
}, 10 * 1000);
},
+ //鎼滅储闆嗙兢
async getSearchNodes() {
let res = await getSearchNodes();
if (res && res.success) {
@@ -419,9 +481,14 @@
this.clusterid = res.data.clusterId;
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 => {
+ this.ruleForm.virtualIp = res.data.virtualIp
+ //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;
@@ -433,12 +500,24 @@
obj.role = i.role ? i.role : "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() {
let res = await updateClusterName({
@@ -478,12 +557,15 @@
this.ruleForm.clusterpwd = ""
this.clusterid = "";
this.isHasColony = false;
- this.activeName = "1"
+ this.activeName = "1";
+ this.members = [];
+ this.innerNodes = [];
}
}).catch(() => { });
-
+
},
joinNode(event, node) {
+ debugger
this.currentCluster.cluster_id = node.cluster_id;
if (this.activeName === "3") {
this.manageForm.clustername = node.clusterName;
@@ -532,20 +614,108 @@
"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() {
- this.findCluster();
- },
- created() { }
+
+ created () { }
+
};
</script>
<style lang="scss">
@@ -617,4 +787,7 @@
height: 30px;
line-height: 30px;
}
+.nodes-svg{
+ background-color: rgba(127, 172, 255, 0.459);
+}
</style>
--
Gitblit v1.8.0