实现基本的集群DNS列表、设置、简单数据同步

web/views/@default/dns/domains/routesPopup.html

@@ -0,0 +1,17 @@
+{$layout "layout_popup"}
+
+<h3>域名支持的线路</h3>
+
+<table class="ui table definition selectable">
+	<tr>
+		<td class="title">线路</td>
+		<td>
+			<p class="comment" v-if="routes.length == 0">暂时还没有支持的线路。</p>
+			<div v-if="routes.length > 0">
+				<div class="ui label tiny" v-for="route in routes" style="margin-bottom: 0.5em">{{route}}</div>
+			</div>
+		</td>
+	</tr>
+</table>
+
+<button class="ui button primary" @click.prevent="close" type="button">确定</button>

web/views/@default/dns/domains/routesPopup.js

@@ -0,0 +1,3 @@
+Tea.context(function () {
+	this.close = NotifyPopup
+})

web/views/@default/dns/domains/updatePopup.html

@@ -0,0 +1,33 @@
+{$layout "layout_popup"}
+
+<h3>添加管理域名</h3>
+
+<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
+	<input type="hidden" name="domainId" :value="domain.id"/>
+	<csrf-token></csrf-token>
+	<table class="ui table definition selectable">
+		<tr>
+			<td class="title">域名 *</td>
+			<td>
+				<input type="text" name="name" maxlength="64" ref="focus" v-model="domain.name"/>
+				<p class="comment">在DNS服务商中可以管理的域名。</p>
+			</td>
+		</tr>
+		<tr>
+			<td colspan="2"><more-options-indicator></more-options-indicator></td>
+		</tr>
+		<tbody v-show="moreOptionsVisible">
+			<tr>
+				<td>是否启用</td>
+				<td>
+					<div class="ui checkbox">
+						<input type="checkbox" name="isOn" value="1" v-model="domain.isOn"/>
+						<label></label>
+					</div>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+
+	<submit-btn></submit-btn>
+</form>

web/views/@default/dns/domains/updatePopup.js

@@ -0,0 +1,3 @@
+Tea.context(function () {
+	this.success = NotifyPopup
+})

web/views/@default/dns/index.css

@@ -0,0 +1,4 @@
+.italic {
+  font-style: italic !important;
+}
+/*# sourceMappingURL=index.css.map */

web/views/@default/dns/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA;EACC,6BAAA","file":"index.css"}

web/views/@default/dns/index.html

@@ -1,3 +1,39 @@
 {$layout}
 
-<p class="ui message">此功能暂未开放，敬请期待。</p>
+<div class="margin"></div>
+
+<p class="comment" v-if="clusters.length == 0">暂时还没有集群。</p>
+<table class="ui table selectable" v-if="clusters.length > 0">
+	<thead>
+		<tr>
+			<th>集群</th>
+			<th>域名解析</th>
+			<th>DNS服务商</th>
+			<th>DNS服务商账号</th>
+			<th class="two op">操作</th>
+		</tr>
+	</thead>
+	<tr v-for="cluster in clusters">
+		<td>
+			<a :href="'/clusters/cluster?clusterId=' + cluster.id">{{cluster.name}}</a>
+		</td>
+		<td>
+			<span v-if="cluster.dnsName.length > 0 && cluster.domainName.length > 0"><em class="italic">{{cluster.dnsName}}</em>.{{cluster.domainName}}</span>
+			<span v-else="" class="disabled">-</span>
+		</td>
+		<td>
+			<span v-if="cluster.providerTypeName.length > 0">{{cluster.providerTypeName}}</span>
+			<span v-else class="disabled">-</span>
+		</td>
+		<td>
+			<a v-if="cluster.providerName.length > 0" :href="'/dns/providers/provider?providerId=' + cluster.providerId">{{cluster.providerName}}</a>
+			<span v-else="" class="disabled">-</span>
+		</td>
+		<td>
+			<a href="" @click.prevent="updateCluster(cluster.id)">修改</a>
+		</td>
+	</tr>
+</table>
+<p class="comment">这里列出了所有集群对应的域名设置。</p>
+
+<div class="page" v-html="page"></div>

web/views/@default/dns/index.js

@@ -0,0 +1,12 @@
+Tea.context(function () {
+	this.updateCluster = function (clusterId) {
+		teaweb.popup("/dns/updateClusterPopup?clusterId=" + clusterId, {
+			height: "22em",
+			callback: function () {
+				teaweb.success("保存成功", function () {
+					teaweb.reload()
+				})
+			}
+		})
+	}
+})

web/views/@default/dns/index.less

@@ -0,0 +1,3 @@
+.italic {
+	font-style: italic !important;
+}

web/views/@default/dns/issues/index.html

@@ -0,0 +1,3 @@
+{$layout}
+
+<p class="ui message">此功能暂未开放，敬请期待。</p>

web/views/@default/dns/providers/provider.html

@@ -39,21 +39,46 @@
 	<thead>
 		<tr>
 			<th>域名</th>
+			<th>线路</th>
+			<th>集群域名</th>
+			<th>服务域名</th>
 			<th>数据更新时间</th>
 			<th>状态</th>
-			<th class="two op">操作</th>
+			<th class="three op">操作</th>
 		</tr>
 	</thead>
-	<tr v-for="domain in domains">
+	<tr v-for="(domain, index) in domains">
 		<td>{{domain.name}}</td>
+		<td>
+			<a href="" v-if="domain.countRoutes > 0" @click.prevent="showRoutes(domain.id)">{{domain.countRoutes}}个</a>
+			<span v-else class="disabled">0个</span>
+		</td>
+		<td>
+			<a href="" v-if="domain.countClusterRecords > 0">{{domain.countClusterRecords}}个</a>
+			<span v-else class="disabled">0个</span>
+		</td>
+		<td>
+			<a href="" v-if="domain.countServerRecords > 0">{{domain.countServerRecords}}个</a>
+			<span v-else class="disabled">0个</span>
+		</td>
 		<td>
 			<span v-if="domain.dataUpdatedTime.length > 0">{{domain.dataUpdatedTime}}</span>
 			<span v-else class="disabled">尚未更新</span>
 		</td>
-		<td><label-on :v-is-on="domain.isOn"></label-on></td>
 		<td>
-			<a href="">修改</a> &nbsp;
-			<a href="" @click.prevent="deleteDomain(domain)">删除</a>
+			<div v-if="domain.countRoutes == 0 || !domain.allClustersResolved || !domain.allServersResolved">
+				<a href=""  style="border-bottom: 1px #db2828 dashed" title="点击和DNS服务商系统同步" @click.prevent="syncDomain(index,domain)" v-if="!domain.isSyncing"><span class="red">需要同步</span></a>
+				<span v-else>正在同步...</span>
+			</div>
+			<div v-else>
+				<label-on :v-is-on="domain.isOn"></label-on>
+			</div>
+		</td>
+		<td>
+			<a href="" @click.prevent="syncDomain(index, domain)" v-if="!domain.isSyncing">同步</a>
+			<span v-else>正在同步...</span>&nbsp;
+			<a href="" @click.prevent="updateDomain(domain.id)" v-if="!domain.isSyncing">修改</a> &nbsp;
+			<a href="" @click.prevent="deleteDomain(domain)" v-if="!domain.isSyncing">删除</a>
 		</td>
 	</tr>
 </table>

web/views/@default/dns/providers/provider.js

@@ -20,6 +20,16 @@ Tea.context(function () {
 		})
 	}
 
+	this.updateDomain = function (domainId) {
+		teaweb.popup("/dns/domains/updatePopup?domainId=" + domainId, {
+			callback: function () {
+				teaweb.success("保存成功", function () {
+					teaweb.reload()
+				})
+			}
+		})
+	}
+
 	this.deleteDomain = function (domain) {
 		let that = this
 		teaweb.confirm("确定要删除域名\"" + domain.name + "\"吗？", function () {
@@ -31,4 +41,34 @@ Tea.context(function () {
 				.refresh()
 		})
 	}
+
+	this.syncDomain = function (index, domain) {
+		domain.isSyncing = true
+		Vue.set(this.domains, index, domain)
+
+		this.$post("/dns/domains/sync")
+			.params({
+				domainId: domain.id
+			})
+			.success(function () {
+				teaweb.success("同步成功", function () {
+					teaweb.reload()
+				})
+			})
+			.fail(function (resp) {
+				teaweb.warn(resp.message, function () {
+					if (resp.data.shouldFix) {
+						window.location = "/dns/issues"
+					}
+				})
+			})
+			.done(function () {
+				domain.isSyncing = false
+				Vue.set(this.domains, index, domain)
+			})
+	}
+
+	this.showRoutes = function (domainId) {
+		teaweb.popup("/dns/domains/routesPopup?domainId=" + domainId)
+	}
 })

web/views/@default/dns/updateClusterPopup.html

@@ -0,0 +1,49 @@
+{$layout "layout_popup"}
+
+<h3>修改集群DNS设置</h3>
+
+<form method="post" class="ui form" data-tea-success="success" data-tea-action="$">
+	<input type="hidden" name="clusterId" :value="clusterId"/>
+	<csrf-token></csrf-token>
+
+	<table class="ui table definition selectable">
+		<tr>
+			<td class="title">DNS服务商</td>
+			<td>
+				<select name="providerType" class="ui dropdown auto-width" v-model="providerType" @change="changeProviderType">
+					<option v-for="providerType in providerTypes" :value="providerType.code">{{providerType.name}}</option>
+				</select>
+			</td>
+		</tr>
+		<tr>
+			<td>账号</td>
+			<td>
+				<p class="comment" v-if="providers.length == 0">没有账号可选</p>
+				<select name="providerId" class="ui dropdown auto-width" v-model="providerId" v-show="providers.length > 0">
+					<option v-for="provider in providers" :value="provider.id">{{provider.name}}</option>
+				</select>
+			</td>
+		</tr>
+		<tr v-show="providerId > 0">
+			<td>域名</td>
+			<td>
+				<p class="comment" v-if="domains.length == 0">没有域名可选</p>
+				<select name="domainId" class="ui dropdown auto-width" v-model="domainId" v-show="domains.length > 0">
+					<option v-for="domain in domains" :value="domain.id">{{domain.name}}</option>
+				</select>
+			</td>
+		</tr>
+		<tr>
+			<td>子域名</td>
+			<td>
+				<div class="ui input right labeled">
+					<input type="text" name="dnsName" v-model="dnsName" maxlength="64" size="20" style="width:10em"/>
+					<span class="ui label">.<span v-if="domain.length == 0">主域名</span><span v-else>{{domain}}</span></span>
+				</div>
+				<p class="comment">子域名和主域名共同组成集群的域名。</p>
+			</td>
+		</tr>
+	</table>
+
+	<submit-btn></submit-btn>
+</form>

web/views/@default/dns/updateClusterPopup.js

@@ -0,0 +1,80 @@
+Tea.context(function () {
+	this.$delay(function () {
+		this.changeProviderType()
+		this.changeProvider()
+
+		this.$watch("providerId", function () {
+			this.changeProvider()
+		})
+		this.$watch("domainId", function () {
+			this.changeDomain()
+		})
+	})
+
+	this.success = NotifyPopup
+
+	// 初始化的内容
+	// this.domainId = 0
+	// this.domain = ""
+	// this.providerId = 0
+
+	if (this.providerType == "") {
+		this.providerType = this.providerTypes[0].code
+	}
+	this.providers = []
+	this.domains = []
+
+	this.changeProviderType = function () {
+		this.$post(".providerOptions")
+			.params({
+				type: this.providerType
+			})
+			.success(function (resp) {
+				this.providers = resp.data.providers
+
+				// 检查providerId
+				if (this.providers.length == 0) {
+					this.providerId = 0
+					return
+				}
+				let that = this
+				if (this.providers.$find(function (k, v) {
+					return v.id == that.providerId
+				}) == null) {
+					this.providerId = this.providers[0].id
+				}
+				this.changeProvider()
+			})
+	}
+
+	this.changeProvider = function () {
+		this.$post(".domainOptions")
+			.params({
+				providerId: this.providerId
+			})
+			.success(function (resp) {
+				this.domains = resp.data.domains
+				this.changeDomain()
+			})
+	}
+
+	this.changeDomain = function () {
+		if (this.domains.length == 0) {
+			this.domainId = 0
+			this.domain = ""
+			return
+		}
+
+		let domainId = this.domainId
+		let domainInfo = this.domains.$find(function (k, v) {
+			return v.id == domainId
+		})
+		if (domainInfo == null) {
+			// 默认选取第一个
+			this.domainId = this.domains[0].id
+			this.domain = this.domains[0].name
+		} else {
+			this.domain = domainInfo.name
+		}
+	}
+})