| | |
| | | <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" placeholder="请输入6-12位密码,或点击生成" 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> |
| | | </el-tab-pane> |
| | | |
| | | |
| | | <!-- 加入已有集群 --> |
| | | <el-tab-pane label="加入已有集群" name="2" :disabled="isHasColony"> |
| | | <el-tab-pane label="加入已有集群" name="3" :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-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="请输入集群密码" |
| | |
| | | <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 |
| | |
| | | ></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 |
| | |
| | | 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"> |
| | |
| | | findCluster, |
| | | updateClusterName, |
| | | joinCluster, |
| | | leave |
| | | leave, |
| | | getVrrp, |
| | | setVrrp |
| | | } from "@/api/clusterManage"; |
| | | import serfDiagram from "@/components/serfDiagram"; |
| | | import ipInput from "@/components/subComponents/IPInput"; |
| | |
| | | ruleForm: { |
| | | clustername: "", |
| | | clusterpwd: "", |
| | | virtualip: "" |
| | | //virtualip: "" |
| | | }, |
| | | vrIpForm: { |
| | | enable: true, |
| | | //serve_port: "", |
| | | serve_port: null, |
| | | virtual_ip: "" |
| | | }, |
| | | manageForm: { |
| | | clustername: "测试集群1", |
| | |
| | | { required: true, message: "请输入集群名称", trigger: "change" } |
| | | ], |
| | | clusterpwd: [{ validator: checkPwd, trigger: "change" }], |
| | | // virtualip: [ |
| | | // { required: true, message: "请输入虚拟IP", trigger: "change" } |
| | | // ] |
| | | }, |
| | | vrIpRules: { |
| | | virtualip: [ |
| | | { required: true, message: "请输入虚拟IP", trigger: "change" } |
| | | ] |
| | |
| | | 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(); |
| | | }); |
| | | } else { |
| | | console.log("error submit!!"); |
| | | return false; |
| | | } |
| | | }); |
| | | }, |
| | | 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!!"); |
| | |
| | | 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; |
| | |
| | | // 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({ |
| | |
| | | this.ruleForm.clusterpwd = uuid.join(""); |
| | | }, |
| | | onIpBlur(ip) { |
| | | this.ruleForm.virtualip = ip; |
| | | this.vrIpForm.virtual_ip = ip; |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.findCluster(); |
| | | this.getVrrpInfo(); |
| | | }, |
| | | created() { } |
| | | }; |