初步实现多集群共享节点

2025-11-27 05:00:25 +08:00 · 2021-07-31 22:23:07 +08:00
parent 3614b9f3b7
commit 867215e2af
38 changed files with 610 additions and 201 deletions
--- a/web/public/js/components/cluster/cluster-selector.js
+++ b/web/public/js/components/cluster/cluster-selector.js
@@ -1,3 +1,4 @@
+// 单个集群选择
 Vue.component("cluster-selector", {
 	mounted: function () {
 		let that = this
--- a/web/public/js/components/cluster/node-clusters-labels.js
+++ b/web/public/js/components/cluster/node-clusters-labels.js
@@ -0,0 +1,28 @@
+// 显示节点的多个集群
+Vue.component("node-clusters-labels", {
+	props: ["v-primary-cluster", "v-secondary-clusters", "size"],
+	data: function () {
+		let cluster = this.vPrimaryCluster
+		let secondaryClusters = this.vSecondaryClusters
+		if (secondaryClusters == null) {
+			secondaryClusters = []
+		}
+
+		let labelSize = this.size
+		if (labelSize == null) {
+			labelSize = "small"
+		}
+		if (labelSize == "tiny") {
+			labelSize += " olive"
+		}
+		return {
+			cluster: cluster,
+			secondaryClusters: secondaryClusters,
+			labelSize: labelSize
+		}
+	},
+	template: `<div>
+	<a v-if="cluster != null" :href="'/clusters/cluster?clusterId=' + cluster.id" class="ui label basic" :class="labelSize" title="主集群" style="margin-bottom: 0.3em;">{{cluster.name}}</a>
+	<a v-for="c in secondaryClusters" :href="'/clusters/cluster?clusterId=' + c.id" class="ui label basic" :class="labelSize" title="从集群" style="margin-bottom: 0.3em;"><span class="grey" style="text-decoration: none">{{c.name}}</span></a>
+</div>`
+})
--- a/web/public/js/components/cluster/node-clusters-selector.js
+++ b/web/public/js/components/cluster/node-clusters-selector.js
@@ -0,0 +1,98 @@
+// 一个节点的多个集群选择器
+Vue.component("node-clusters-selector", {
+	props: ["v-primary-cluster", "v-secondary-clusters"],
+	data: function () {
+		let primaryCluster = this.vPrimaryCluster
+
+		let secondaryClusters = this.vSecondaryClusters
+		if (secondaryClusters == null) {
+			secondaryClusters = []
+		}
+
+		return {
+			primaryClusterId: (primaryCluster == null) ? 0 : primaryCluster.id,
+			secondaryClusterIds: secondaryClusters.map(function (v) {
+				return v.id
+			}),
+
+			primaryCluster: primaryCluster,
+			secondaryClusters: secondaryClusters
+		}
+	},
+	methods: {
+		addPrimary: function () {
+			let that = this
+			let selectedClusterIds = [this.primaryClusterId].concat(this.secondaryClusterIds)
+			teaweb.popup("/clusters/selectPopup?selectedClusterIds=" + selectedClusterIds.join(",") + "&mode=single", {
+				height: "38em",
+				width: "50em",
+				callback: function (resp) {
+					if (resp.data.cluster != null) {
+						that.primaryCluster = resp.data.cluster
+						that.primaryClusterId = that.primaryCluster.id
+						that.notifyChange()
+					}
+				}
+			})
+		},
+		removePrimary: function () {
+			this.primaryClusterId = 0
+			this.primaryCluster = null
+			this.notifyChange()
+		},
+		addSecondary: function () {
+			let that = this
+			let selectedClusterIds = [this.primaryClusterId].concat(this.secondaryClusterIds)
+			teaweb.popup("/clusters/selectPopup?selectedClusterIds=" + selectedClusterIds.join(",") + "&mode=multiple", {
+				height: "38em",
+				width: "50em",
+				callback: function (resp) {
+					if (resp.data.cluster != null) {
+						that.secondaryClusterIds.push(resp.data.cluster.id)
+						that.secondaryClusters.push(resp.data.cluster)
+						that.notifyChange()
+					}
+				}
+			})
+		},
+		removeSecondary: function (index) {
+			this.secondaryClusterIds.$remove(index)
+			this.secondaryClusters.$remove(index)
+			this.notifyChange()
+		},
+		notifyChange: function () {
+			this.$emit("change", {
+				clusterId: this.primaryClusterId
+			})
+		}
+	},
+	template: `<div>
+	<input type="hidden" name="primaryClusterId" :value="primaryClusterId"/>
+	<input type="hidden" name="secondaryClusterIds" :value="JSON.stringify(secondaryClusterIds)"/>
+	<table class="ui table">
+		<tr>
+			<td class="title">主集群</td>
+			<td>
+				<div v-if="primaryCluster != null">
+					<div class="ui label basic small">{{primaryCluster.name}} &nbsp; <a href="" title="删除" @click.prevent="removePrimary"><i class="icon remove small"></i></a> </div>
+				</div>
+				<div style="margin-top: 0.6em" v-if="primaryClusterId == 0">
+					<button class="ui button tiny" type="button" @click.prevent="addPrimary">+</button>
+				</div>
+				<p class="comment">多个集群配置有冲突时，优先使用主集群配置。</p>
+			</td>
+		</tr>
+		<tr>
+			<td>从集群</td>
+			<td>
+				<div v-if="secondaryClusters.length > 0">
+					<div class="ui label basic small" v-for="(cluster, index) in secondaryClusters"><span class="grey">{{cluster.name}}</span> &nbsp; <a href="" title="删除" @click.prevent="removeSecondary(index)"><i class="icon remove small"></i></a> </div>
+				</div>
+				<div style="margin-top: 0.6em">
+					<button class="ui button tiny" type="button" @click.prevent="addSecondary">+</button>
+				</div>
+			</td>
+		</tr>
+	</table>
+</div>`
+})
--- a/web/public/js/components/dns/dns-route-selector.js
+++ b/web/public/js/components/dns/dns-route-selector.js
@@ -8,7 +8,7 @@ Vue.component("dns-route-selector", {
 		return {
 			routes: routes,
 			routeCodes: routes.$map(function (k, v) {
-				return v.code
+				return v.code + "@" + v.domainId
 			}),
 			isAdding: false,
 			routeCode: ""
@@ -31,7 +31,7 @@ Vue.component("dns-route-selector", {
 			}
 			let that = this
 			let route = this.vAllRoutes.$find(function (k, v) {
-				return v.code == that.routeCode
+				return v.code + "@" + v.domainId == that.routeCode
 			})
 			if (route == null) {
 				return
@@ -53,8 +53,8 @@ Vue.component("dns-route-selector", {
 	template: `<div>
 	<input type="hidden" name="dnsRoutesJSON" :value="JSON.stringify(routeCodes)"/>
 	<div v-if="routes.length > 0">
-		<tiny-basic-label v-for="route in routes" :key="route.code">
-			{{route.name}} <a href="" @click.prevent="remove(route)"><i class="icon remove"></i></a>
+		<tiny-basic-label v-for="route in routes" :key="route.code + '@' + route.domainId">
+			{{route.name}} <span class="grey small">（{{route.domainName}}）</span><a href="" @click.prevent="remove(route)"><i class="icon remove"></i></a>
 		</tiny-basic-label>
 		<div class="ui divider"></div>
 	</div>
@@ -64,7 +64,7 @@ Vue.component("dns-route-selector", {
 			<div class="ui field">
 				<select class="ui dropdown auto-width" v-model="routeCode">
 					<option value="">[请选择]</option>
-					<option v-for="route in vAllRoutes" :value="route.code">{{route.name}}</option>
+					<option v-for="route in vAllRoutes" :value="route.code + '@' + route.domainId">{{route.name}}（{{route.domainName}}）</option>
 				</select>
 			</div>
 			<div class="ui field">