From fa7044f3ccc9a91bc2bc117d1a06f650d86554f2 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@iotlink.com> Date: 星期二, 15 六月 2021 16:07:16 +0800 Subject: [PATCH] 优化联动规则加载场景列表的操作 --- src/pages/settings/components/ClusterManagement.vue | 690 ++++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 438 insertions(+), 252 deletions(-) diff --git a/src/pages/settings/components/ClusterManagement.vue b/src/pages/settings/components/ClusterManagement.vue index 77fa912..bedd193 100644 --- a/src/pages/settings/components/ClusterManagement.vue +++ b/src/pages/settings/components/ClusterManagement.vue @@ -4,26 +4,25 @@ <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"> + <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: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>--> - <el-form-item style="width:500px"> + <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> <el-button type="primary" size="small" @click="submitForm('ruleForm')">淇濆瓨</el-button> </el-form-item> </el-form> @@ -31,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" > @@ -49,35 +70,24 @@ <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> <!-- 鏈夐泦缇ょ殑鎯呭喌 --> <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:500px"> + <el-form-item label="闆嗙兢瀵嗙爜" prop="clusterpwd"> <el-input v-model="ruleForm.clusterpwd" disabled @@ -86,100 +96,104 @@ ></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>--> - <el-form-item style="width:440px;text-align: right;"> + <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="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="10" 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-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 + :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> <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> + </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> </el-col> - </el-row> + </el-row>--> </div> </template> <script> import { - createColony, + createSerfCluster, randomPwd, search, getSearchNodes, @@ -189,27 +203,31 @@ joinCluster, leave, getVrrp, - setVrrp + 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 () { + 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浣�!")); - // } else { - // callback(); - // } if (value.length != 6) { callback(new Error("瀵嗙爜搴斾负6浣�!")); } else { @@ -217,17 +235,19 @@ } }, 1000); }; + return { activeName: "1", sActiveName: "s-first", clusterid: "", - clusterip2: "", + esNodeIp: "", + esNodeType: "", clusterpwd2: "", sClusterip: "", ruleForm: { clustername: "", clusterpwd: "", - //virtualip: "" + virtualIp: "" }, vrIpForm: { enable: true, @@ -241,6 +261,7 @@ virtualip: "192.168.1.188" }, joinForm: { + clusterid: "", clusterip: "", clusterpwd: "" }, @@ -249,60 +270,64 @@ { 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" } + 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: [ - { 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: [], + intervalTimer: null, + joinLoading: false, + showJoinConfirm: false }; }, - watch: {}, + mounted() { + this.findCluster(); + 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); - }, - submitForm (formName) { + // cleanValue() { + // this.members = []; + // }, + // sHandleClick(tab, event) { + // console.log(tab, event); + // }, + submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { //alert("submit!"); @@ -310,9 +335,9 @@ 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 { @@ -321,47 +346,56 @@ } }); }, - 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) { + // 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) { + 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!!"); @@ -369,8 +403,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,39 +412,43 @@ type: res.success ? "success" : "error" }); }, - async randomPwd () { + async randomPwd() { let res = await randomPwd(); if (res && res.success) { this.ruleForm.clusterpwd = res.data; } }, - async searchColony () { - this.$refs["joinForm"].validate(valid => { - if (valid) { - this.members = []; - let json = { - password: this.joinForm.clusterpwd, - ip: this.joinForm.clusterip - }; + async searchColony() { + 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) { + async search(json) { let res = await search(json); if (res && res.success) { console.log(res, "鎼滅储闆嗙兢"); @@ -422,7 +460,8 @@ this.stopSearch(); }, 10 * 1000); }, - async getSearchNodes () { + //鎼滅储闆嗙兢 + async getSearchNodes() { let res = await getSearchNodes(); if (res && res.success) { let list = res.data.map(i => { @@ -446,12 +485,12 @@ }); } }, - setSchedule () { + setSchedule() { this.scheduleId = window.setInterval(() => { this.getSearchNodes(); }, 1000); }, - async stopSearch () { + async stopSearch() { if (!this.loading) { return true; } @@ -476,7 +515,7 @@ // },2000) }) }, - async findCluster () { + async findCluster() { let res = await findCluster(); if (res && res.success) { if (res.data && res.data.clusterId) { @@ -484,10 +523,15 @@ this.activeName = "3"; 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.clusterpwd = '******'; + 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; @@ -496,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 ? "鎴愬姛" : "澶辫触", @@ -526,7 +582,7 @@ type: res.success ? "success" : "error" }); }, - async joinCluster (json) { + async joinCluster(json) { let res = await joinCluster(json); if (res.success) { this.members = [] @@ -537,7 +593,7 @@ type: res.success ? "success" : "error" }); }, - leave () { + leave() { this.$confirm(`纭畾閫�鍑洪泦缇ゅ悧?`, { center: true, cancelButtonClass: "comfirm-class-cancle", @@ -556,12 +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) { - debugger + 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; @@ -569,43 +635,63 @@ 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 () { + generatePassword() { var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; var uuid = []; @@ -616,15 +702,102 @@ this.ruleForm.clusterpwd = uuid.join(""); }, - 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 + }); + }) + }, + onIpBlur(ip) { + //this.vrIpForm.virtual_ip = ip; + this.ruleForm.virtualIp = ip; + console.log(this.ruleForm.virtualIp) } + }, - mounted () { - this.findCluster(); - this.getVrrpInfo(); - }, - created () { } + + created() { } + }; </script> <style lang="scss"> @@ -632,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; } } @@ -686,9 +872,9 @@ #h-alaycluster { .el-form-item__content { text-align: left; - input { - max-width: 360px; - } + // input { + // max-width: 360px; + // } } } } -- Gitblit v1.8.0