From 4c7c89fe5a1fdcac09a355f054ef5d1695322459 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期一, 12 十月 2020 19:30:45 +0800
Subject: [PATCH] 完善存储集群管理功能
---
src/pages/settings/components/ClusterManagement.vue | 236 +++++++++++++++++++++++++++++++----------------
src/api/clusterManage.ts | 29 +++++
src/pages/desktop/index/App.vue | 16 +-
3 files changed, 192 insertions(+), 89 deletions(-)
diff --git a/src/api/clusterManage.ts b/src/api/clusterManage.ts
index bbeb747..690d640 100644
--- a/src/api/clusterManage.ts
+++ b/src/api/clusterManage.ts
@@ -11,7 +11,7 @@
};
// 鍒涘缓闆嗙兢
-export const createColony = (query: any) => {
+export const createSerfCluster = (query: any) => {
return request({
url: "/data/api-v/cluster/create",
method: "post",
@@ -100,4 +100,31 @@
method: "post",
data
})
+}
+
+// 鍒涘缓ES闆嗙兢
+export const createESNode = (data: any) => {
+ return request({
+ url: "/data/api-v/es/createNode",
+ method: "post",
+ data
+ })
+}
+
+// 鍔犲叆ES闆嗙兢
+export const addESNode = (data: any) => {
+ return request({
+ url: "/data/api-v/es/addCluster",
+ method: "post",
+ data
+ })
+}
+
+// 鑾峰彇ES闆嗙兢淇℃伅
+export const getEsClusterInfo = (data: any) => {
+ return request({
+ url: "/data/api-v/es/getEsClusterInfo",
+ method: "post",
+ data
+ })
}
\ No newline at end of file
diff --git a/src/pages/desktop/index/App.vue b/src/pages/desktop/index/App.vue
index 78897be..29c1394 100644
--- a/src/pages/desktop/index/App.vue
+++ b/src/pages/desktop/index/App.vue
@@ -52,8 +52,8 @@
time: new Date()
}, true);
}, 1000);
- window.addEventListener('message',(e) => {
- if(e.data.msg == 'AppUpdate'){
+ window.addEventListener('message', (e) => {
+ if (e.data.msg == 'AppUpdate') {
console.log('搴旂敤鏇存柊')
this.showApps();
}
@@ -70,14 +70,14 @@
if (rsp && rsp.success) {
_that.$store.state.desktop.docks = [];
rsp.data.forEach(function (item) {
- if(item.installed){
+ if (item.installed) {
let temp = {
id: item.id,
create_by: item.create_by,
create_time: item.create_time,
height: item.height,
icon: item.icon,
- src: item.iconBlob?'data:image/png;base64,'+item.iconBlob:item.icon,
+ src: item.iconBlob ? 'data:image/png;base64,' + item.iconBlob : item.icon,
installed: item.installed,
isDelete: item.isDelete,
isUpgrade: item.isUpgrade,
@@ -92,13 +92,13 @@
width: item.width,
isDefault: item.isDefault
}
-
+
_that.$store.commit('desktop/addDock', temp);
- console.log(item)
- console.log('apps update')
+ // console.log(item)
+ // console.log('apps update')
//console.log(this.$store.state.desktop.docks)
}
-
+
});
}
})
diff --git a/src/pages/settings/components/ClusterManagement.vue b/src/pages/settings/components/ClusterManagement.vue
index 77fa912..76ab639 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">
@@ -133,42 +133,46 @@
<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-form-item label="IP鍦板潃" style="text-align: left;width: 300px;">
<el-input
- v-model="clusterip2"
+ v-model="esNodeIp"
placeholder="璇疯緭鍏ラ泦缇ゅ唴浠绘剰IP鍦板潃"
size="small"
autocomplete="off"
- >
- <el-button
- type="text"
- slot="suffix"
- v-show="!searchDis"
- @click="searchColony"
- >鎼滅储闆嗙兢</el-button>
- </el-input>
+ ></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>
@@ -179,7 +183,7 @@
<script>
import {
- createColony,
+ createSerfCluster,
randomPwd,
search,
getSearchNodes,
@@ -189,8 +193,16 @@
joinCluster,
leave,
getVrrp,
- setVrrp
+ setVrrp,
+ createESNode,
+ addESNode,
+ getEsClusterInfo
} from "@/api/clusterManage";
+
+import {
+ getDevInfo
+} from "@/api/system";
+
import serfDiagram from "@/components/serfDiagram";
import ipInput from "@/components/subComponents/IPInput";
@@ -199,7 +211,7 @@
serfDiagram,
ipInput
},
- data () {
+ data() {
const checkPwd = (rule, value, callback) => {
if (!value) {
return callback(new Error("瀵嗙爜涓嶈兘涓虹┖"));
@@ -221,7 +233,8 @@
activeName: "1",
sActiveName: "s-first",
clusterid: "",
- clusterip2: "",
+ esNodeIp: "",
+ esNodeType: "",
clusterpwd2: "",
sClusterip: "",
ruleForm: {
@@ -264,26 +277,7 @@
{ 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,
currentCluster: {},
@@ -294,15 +288,19 @@
members: []
};
},
- watch: {},
+ mounted() {
+ this.findCluster();
+ this.getVrrpInfo();
+ this.getEsClusterNodes();
+ },
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!");
@@ -312,7 +310,7 @@
password: this.ruleForm.clusterpwd,
//virtualip: this.ruleForm.virtualip
};
- this.createColony(json).then(() => {
+ this.createCluster(json).then(() => {
this.findCluster();
});
} else {
@@ -321,8 +319,7 @@
}
});
},
- saveForm (formName) {
- debugger
+ saveForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit!");
@@ -341,7 +338,7 @@
}
});
},
- join (formName) {
+ join(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
if (Object.keys(this.currentCluster).length === 0) {
@@ -369,8 +366,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 ? "鎴愬姛" : "澶辫触",
@@ -378,13 +375,13 @@
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 = [];
@@ -410,7 +407,7 @@
}
});
},
- async search (json) {
+ async search(json) {
let res = await search(json);
if (res && res.success) {
console.log(res, "鎼滅储闆嗙兢");
@@ -422,7 +419,7 @@
this.stopSearch();
}, 10 * 1000);
},
- async getSearchNodes () {
+ async getSearchNodes() {
let res = await getSearchNodes();
if (res && res.success) {
let list = res.data.map(i => {
@@ -446,12 +443,12 @@
});
}
},
- setSchedule () {
+ setSchedule() {
this.scheduleId = window.setInterval(() => {
this.getSearchNodes();
}, 1000);
},
- async stopSearch () {
+ async stopSearch() {
if (!this.loading) {
return true;
}
@@ -476,7 +473,7 @@
// },2000)
})
},
- async findCluster () {
+ async findCluster() {
let res = await findCluster();
if (res && res.success) {
if (res.data && res.data.clusterId) {
@@ -506,7 +503,7 @@
}
}
},
- getVrrpInfo () {
+ getVrrpInfo() {
getVrrp().then(res => {
if (res.success) {
this.vrIpForm.virtual_ip = res.data.virtual_ip;
@@ -516,7 +513,7 @@
console.log(e)
})
},
- async updateClusterName () {
+ async updateClusterName() {
let res = await updateClusterName({
clusterName: this.mangeForm.colonyName
});
@@ -526,7 +523,7 @@
type: res.success ? "success" : "error"
});
},
- async joinCluster (json) {
+ async joinCluster(json) {
let res = await joinCluster(json);
if (res.success) {
this.members = []
@@ -537,7 +534,7 @@
type: res.success ? "success" : "error"
});
},
- leave () {
+ leave() {
this.$confirm(`纭畾閫�鍑洪泦缇ゅ悧?`, {
center: true,
cancelButtonClass: "comfirm-class-cancle",
@@ -560,8 +557,7 @@
}).catch(() => { });
},
- joinNode (event, node) {
- debugger
+ joinNode(event, node) {
this.currentCluster.cluster_id = node.cluster_id;
if (this.activeName === "3") {
this.manageForm.clustername = node.clusterName;
@@ -605,7 +601,7 @@
});
}
},
- generatePassword () {
+ generatePassword() {
var chars =
"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var uuid = [];
@@ -616,15 +612,95 @@
this.ruleForm.clusterpwd = uuid.join("");
},
- onIpBlur (ip) {
+ onIpBlur(ip) {
this.vrIpForm.virtual_ip = 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
+ });
+ })
}
- },
- mounted () {
- this.findCluster();
- this.getVrrpInfo();
- },
- created () { }
+ }
};
</script>
<style lang="scss">
--
Gitblit v1.8.0