实现健康检查配置、立即执行健康检查

web/public/js/components/common/health-check-config-box.js

@@ -0,0 +1,168 @@
+Vue.component("health-check-config-box", {
+	props: ["v-health-check-config"],
+	data: function () {
+		let healthCheckConfig = this.vHealthCheckConfig
+		let urlProtocol = "http"
+		let urlPort = ""
+		let urlRequestURI = "/"
+
+		if (healthCheckConfig == null) {
+			healthCheckConfig = {
+				isOn: false,
+				url: "",
+				interval: {count: 60, unit: "second"},
+				statusCodes: [200],
+				timeout: {count: 10, unit: "second"},
+				countTries: 3,
+				tryDelay: {count: 100, unit: "ms"}
+			}
+			let that = this
+			setTimeout(function () {
+				that.changeURL()
+			}, 500)
+		} else {
+			let url = new URL(healthCheckConfig.url)
+			urlProtocol = url.protocol.substring(0, url.protocol.length - 1)
+			urlPort = url.port
+			urlRequestURI = url.pathname
+			if (url.search.length > 0) {
+				urlRequestURI += url.search
+			}
+		}
+		return {
+			healthCheck: healthCheckConfig,
+			advancedVisible: false,
+			urlProtocol: urlProtocol,
+			urlPort: urlPort,
+			urlRequestURI: urlRequestURI
+		}
+	},
+	watch: {
+		urlRequestURI: function () {
+			if (this.urlRequestURI.length > 0 && this.urlRequestURI[0] != "/") {
+				this.urlRequestURI = "/" + this.urlRequestURI
+			}
+			this.changeURL()
+		},
+		urlPort: function (v) {
+			let port = parseInt(v)
+			if (!isNaN(port)) {
+				this.urlPort = port.toString()
+			} else {
+				this.urlPort = ""
+			}
+			this.changeURL()
+		},
+		urlProtocol: function () {
+			this.changeURL()
+		},
+		"healthCheck.countTries": function (v) {
+			let count = parseInt(v)
+			if (!isNaN(count)) {
+				this.healthCheck.countTries = count
+			} else {
+				this.healthCheck.countTries = 0
+			}
+		}
+	},
+	methods: {
+		showAdvanced: function () {
+			this.advancedVisible = !this.advancedVisible
+		},
+		changeURL: function () {
+			this.healthCheck.url = this.urlProtocol + "://${host}" + ((this.urlPort.length > 0) ? ":" + this.urlPort : "") + this.urlRequestURI
+		},
+		changeStatus: function (values) {
+			this.healthCheck.statusCodes = values.$map(function (k, v) {
+				let status = parseInt(v)
+				if (isNaN(status)) {
+					return 0
+				} else {
+					return status
+				}
+			})
+			console.log(this.healthCheck.statusCodes)
+		}
+	},
+	template: `<div>
+<input type="hidden" name="healthCheckJSON" :value="JSON.stringify(healthCheck)"/>
+<table class="ui table definition selectable">
+	<tbody>
+		<tr>
+			<td class="title">是否启用</td>
+			<td>
+				<div class="ui checkbox">
+					<input type="checkbox" value="1" v-model="healthCheck.isOn"/>
+					<label></label>
+				</div>
+			</td>
+		</tr>
+	</tbody>
+	<tbody v-show="healthCheck.isOn">
+		<tr>
+			<td>URL *</td>
+			<td>
+				<div class="ui fields inline">
+					<div class="ui field">
+						<select class="ui dropdown" v-model="urlProtocol">
+							<option value="http">http://</option>
+							<option value="https">https://</option>
+						</select>
+					</div>
+					<div class="ui field">
+						<var style="color:grey">\${host}</var>
+					</div>
+					<div class="ui field">:</div>
+					<div class="ui field">
+						<input type="text" maxlength="5" style="width:5.4em" placeholder="端口" v-model="urlPort"/>
+					</div>
+					<div class="ui field">
+						<input type="text" v-model="urlRequestURI" placeholder="/" style="width:23em"/>
+					</div>
+				</div>
+				<div class="ui divider"></div>
+				<p class="comment" v-if="healthCheck.url.length > 0">拼接后的URL：<code-label>{{healthCheck.url}}</code-label>，其中\${host}指的是节点地址。</p>
+			</td>
+		</tr>
+		<tr>
+			<td>检测时间间隔</td>
+			<td>
+				<time-duration-box :v-value="healthCheck.interval"></time-duration-box>
+			</td>
+		</tr>
+	</tbody>	
+	<tbody v-show="healthCheck.isOn">
+		<tr>
+			<td colspan="2"><more-options-angle @change="showAdvanced"></more-options-angle></td>
+		</tr>
+	</tbody>
+	<tbody v-show="advancedVisible && healthCheck.isOn">
+		<tr>
+			<td>允许的状态码</td>
+			<td>
+				<values-box :values="healthCheck.statusCodes" maxlength="3" @change="changeStatus"></values-box>
+			</td>
+		</tr>
+		<tr>
+			<td>超时时间</td>
+			<td>
+				<time-duration-box :v-value="healthCheck.timeout"></time-duration-box>
+			</td>	
+		</tr>
+		<tr>
+			<td>连续尝试次数</td>
+			<td>
+				<input type="text" v-model="healthCheck.countTries" style="width: 5em" maxlength="2"/>
+			</td>
+		</tr>
+		<tr>
+			<td>每次尝试间隔</td>
+			<td>
+				<time-duration-box :v-value="healthCheck.tryDelay"></time-duration-box>
+			</td>
+		</tr>
+		</tbody>
+</table>
+<div class="margin"></div>
+</div>`
+})

web/public/js/components/common/values-box.js

@@ -37,10 +37,12 @@ Vue.component("values-box", {
 			} else {
 				this.vValues.push(this.value);
 			}
-			this.cancel();
+			this.cancel()
+			this.$emit("change", this.vValues)
 		},
 		remove: function (index) {
-			this.vValues.$remove(index);
+			this.vValues.$remove(index)
+			this.$emit("change", this.vValues)
 		},
 		cancel: function () {
 			this.isUpdating = false;

web/public/js/components/node/node-ip-addresses-box.js

@@ -8,6 +8,8 @@ Vue.component("node-ip-addresses-box", {
 	methods: {
 		// 添加IP地址
 		addIPAddress: function () {
+			window.UPDATING_NODE_IP_ADDRESS = null
+
 			let that = this;
 			teaweb.popup("/nodes/ipAddresses/createPopup", {
 				callback: function (resp) {
@@ -18,8 +20,10 @@ Vue.component("node-ip-addresses-box", {
 
 		// 修改地址
 		updateIPAddress: function (index, address) {
+			window.UPDATING_NODE_IP_ADDRESS = address
+
 			let that = this;
-			teaweb.popup("/nodes/ipAddresses/updatePopup?addressId=" + address.id, {
+			teaweb.popup("/nodes/ipAddresses/updatePopup", {
 				callback: function (resp) {
 					Vue.set(that.ipAddresses, index, resp.data.ipAddress);
 				}
@@ -32,11 +36,13 @@ Vue.component("node-ip-addresses-box", {
 		}
 	},
 	template: `<div>
-	<input type="hidden" name="ipAddresses" :value="JSON.stringify(ipAddresses)"/>
+	<input type="hidden" name="ipAddressesJSON" :value="JSON.stringify(ipAddresses)"/>
 	<div v-if="ipAddresses.length > 0">
 		<div>
 			<div v-for="(address, index) in ipAddresses" class="ui label small">
-				{{address.ip}}<span class="small" v-if="address.name.length > 0">（{{address.name}}）</span>
+				{{address.ip}}
+				<span class="small" v-if="address.name.length > 0">（{{address.name}}<span v-if="!address.canAccess">，不可访问</span>）</span>
+				<span class="small" v-if="address.name.length == 0 && !address.canAccess">（不可访问）</span>
 				<a href="" title="修改" @click.prevent="updateIPAddress(index, address)"><i class="icon pencil small"></i></a>
 				<a href="" title="删除" @click.prevent="removeIPAddress(index)"><i class="icon remove"></i></a>
 			</div>
@@ -46,6 +52,5 @@ Vue.component("node-ip-addresses-box", {
 	<div>
 		<button class="ui button small" type="button" @click.prevent="addIPAddress()">+</button>
 	</div>
-	<p class="comment">添加已经绑定的IP地址，仅做记录用。</p>
 </div>`
 })