From f98f5deaaa6c5a9cf4023e2d2dd1c445980e5a8f Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期六, 10 十月 2020 20:28:30 +0800
Subject: [PATCH] 集群管理,应用中心离线安装更新
---
src/pages/settings/components/ClusterManagement.vue | 171 +++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 125 insertions(+), 46 deletions(-)
diff --git a/src/pages/settings/components/ClusterManagement.vue b/src/pages/settings/components/ClusterManagement.vue
index d6d5d65..77fa912 100644
--- a/src/pages/settings/components/ClusterManagement.vue
+++ b/src/pages/settings/components/ClusterManagement.vue
@@ -4,7 +4,7 @@
<div class="ui-top-title">瑙嗛鍒嗘瀽闆嗙兢绠＄悊</div>
</div>
<el-row>
- <el-col :span="12">
+ <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">
@@ -14,16 +14,16 @@
<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">
+ <!-- <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>-->
+ <el-form-item style="width:500px">
<el-button type="primary" size="small" @click="submitForm('ruleForm')">淇濆瓨</el-button>
</el-form-item>
</el-form>
@@ -33,7 +33,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 +53,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">
@@ -71,18 +77,18 @@
<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">
+ <!-- <el-form-item label="铏氭嫙IP" prop="virtualip">
<ip-input :ip="ruleForm.virtualip" :on-blur="onIpBlur"></ip-input>
- </el-form-item>
+ </el-form-item>-->
<el-form-item style="width:440px;text-align: right;">
<el-button size="small" type="danger" @click="leave">閫�鍑洪泦缇�</el-button>
<el-button
@@ -95,7 +101,7 @@
</el-form>
</div>
</el-col>
- <el-col :span="14" style="height: 100%;" v-if="members.length !== 0">
+ <el-col :span="10" style="height: 100%;" v-if="members.length !== 0">
<serfDiagram
ref="diagram"
:members="members"
@@ -103,6 +109,22 @@
v-loading="loading"
@selected-node="joinNode"
></serfDiagram>
+ </el-col>
+ </el-row>
+ <div class="ui-top-view">
+ <div class="ui-top-title">婕傜ЩIP</div>
+ </div>
+ <el-row>
+ <el-col :span="12">
+ <el-form :model="vrIpForm" ref="vrIpForm" :rules="vrIpRules" style="padding:20px 40px;">
+ <el-form-item label="铏氭嫙IP" prop="virtual_ip">
+ <ip-input :ip="vrIpForm.virtual_ip" :on-blur="onIpBlur"></ip-input>
+ <el-switch v-model="vrIpForm.enable" style="margin-left:30px;"></el-switch>
+ </el-form-item>
+ <el-form-item style="width:500px">
+ <el-button type="primary" size="small" @click="saveForm('vrIpForm')">淇濆瓨</el-button>
+ </el-form-item>
+ </el-form>
</el-col>
</el-row>
<div class="ui-top-view">
@@ -118,7 +140,12 @@
<el-tab-pane label="鍔犲叆宸叉湁闆嗙兢" name="s-second">
<el-form label-width="80px">
<el-form-item label="IP鍦板潃" style="text-align: left;">
- <el-input v-model="clusterip2" placeholder="璇疯緭鍏ラ泦缇ゅ唴浠绘剰IP鍦板潃" size="small">
+ <el-input
+ v-model="clusterip2"
+ placeholder="璇疯緭鍏ラ泦缇ゅ唴浠绘剰IP鍦板潃"
+ size="small"
+ autocomplete="off"
+ >
<el-button
type="text"
slot="suffix"
@@ -160,7 +187,9 @@
findCluster,
updateClusterName,
joinCluster,
- leave
+ leave,
+ getVrrp,
+ setVrrp
} from "@/api/clusterManage";
import serfDiagram from "@/components/serfDiagram";
import ipInput from "@/components/subComponents/IPInput";
@@ -170,14 +199,19 @@
serfDiagram,
ipInput
},
- data() {
+ data () {
const checkPwd = (rule, value, callback) => {
if (!value) {
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();
}
@@ -193,7 +227,13 @@
ruleForm: {
clustername: "",
clusterpwd: "",
- virtualip: ""
+ //virtualip: ""
+ },
+ vrIpForm: {
+ enable: true,
+ //serve_port: "",
+ serve_port: null,
+ virtual_ip: ""
},
manageForm: {
clustername: "娴嬭瘯闆嗙兢1",
@@ -209,6 +249,11 @@
{ required: true, message: "璇疯緭鍏ラ泦缇ゅ悕绉�", trigger: "change" }
],
clusterpwd: [{ validator: checkPwd, trigger: "change" }],
+ // virtualip: [
+ // { required: true, message: "璇疯緭鍏ヨ櫄鎷烮P", trigger: "change" }
+ // ]
+ },
+ vrIpRules: {
virtualip: [
{ required: true, message: "璇疯緭鍏ヨ櫄鎷烮P", trigger: "change" }
]
@@ -251,21 +296,21 @@
},
watch: {},
methods: {
- cleanValue() {
+ cleanValue () {
this.members = [];
},
- sHandleClick(tab, event) {
+ sHandleClick (tab, event) {
console.log(tab, event);
},
- submitForm(formName) {
+ 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.findCluster();
@@ -276,7 +321,27 @@
}
});
},
- join(formName) {
+ saveForm (formName) {
+ debugger
+ 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,7 +369,7 @@
}
});
},
- async createColony(json) {
+ async createColony (json) {
let res = await createColony(json);
console.log(res, "鍒涘缓闆嗙兢");
this.$notify({
@@ -313,15 +378,16 @@
type: res.success ? "success" : "error"
});
},
- async randomPwd() {
+ async randomPwd () {
let res = await randomPwd();
if (res && res.success) {
this.ruleForm.clusterpwd = res.data;
}
},
- async searchColony() {
+ async searchColony () {
this.$refs["joinForm"].validate(valid => {
if (valid) {
+ this.members = [];
let json = {
password: this.joinForm.clusterpwd,
ip: this.joinForm.clusterip
@@ -344,7 +410,7 @@
}
});
},
- async search(json) {
+ async search (json) {
let res = await search(json);
if (res && res.success) {
console.log(res, "鎼滅储闆嗙兢");
@@ -356,7 +422,7 @@
this.stopSearch();
}, 10 * 1000);
},
- async getSearchNodes() {
+ async getSearchNodes () {
let res = await getSearchNodes();
if (res && res.success) {
let list = res.data.map(i => {
@@ -380,12 +446,12 @@
});
}
},
- setSchedule() {
+ setSchedule () {
this.scheduleId = window.setInterval(() => {
this.getSearchNodes();
}, 1000);
},
- async stopSearch() {
+ async stopSearch () {
if (!this.loading) {
return true;
}
@@ -410,7 +476,7 @@
// },2000)
})
},
- async findCluster() {
+ async findCluster () {
let res = await findCluster();
if (res && res.success) {
if (res.data && res.data.clusterId) {
@@ -419,7 +485,7 @@
this.clusterid = res.data.clusterId;
this.ruleForm.clustername = res.data.clusterName;
this.ruleForm.clusterpwd = res.data.clusterpwd
- this.ruleForm.virtualip = res.data.virtualip
+ //this.ruleForm.virtualip = res.data.virtualip
let list = res.data.nodes.map(i => {
let obj = {};
obj.cluster_id = i.cluster_id;
@@ -440,7 +506,17 @@
}
}
},
- 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 updateClusterName () {
let res = await updateClusterName({
clusterName: this.mangeForm.colonyName
});
@@ -450,7 +526,7 @@
type: res.success ? "success" : "error"
});
},
- async joinCluster(json) {
+ async joinCluster (json) {
let res = await joinCluster(json);
if (res.success) {
this.members = []
@@ -461,7 +537,7 @@
type: res.success ? "success" : "error"
});
},
- leave() {
+ leave () {
this.$confirm(`纭畾閫�鍑洪泦缇ゅ悧?`, {
center: true,
cancelButtonClass: "comfirm-class-cancle",
@@ -478,12 +554,14 @@
this.ruleForm.clusterpwd = ""
this.clusterid = "";
this.isHasColony = false;
- this.activeName = "1"
+ this.activeName = "1";
+ this.members = [];
}
}).catch(() => { });
-
+
},
- joinNode(event, node) {
+ joinNode (event, node) {
+ debugger
this.currentCluster.cluster_id = node.cluster_id;
if (this.activeName === "3") {
this.manageForm.clustername = node.clusterName;
@@ -527,25 +605,26 @@
});
}
},
- generatePassword() {
+ generatePassword () {
var chars =
"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;
+ onIpBlur (ip) {
+ this.vrIpForm.virtual_ip = ip;
}
},
- mounted() {
+ mounted () {
this.findCluster();
+ this.getVrrpInfo();
},
- created() { }
+ created () { }
};
</script>
<style lang="scss">
--
Gitblit v1.8.0