集群健康检查URL中可以输入主机名

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

@@ -5,6 +5,7 @@ Vue.component("health-check-config-box", {
         let urlProtocol = "http"
         let urlPort = ""
         let urlRequestURI = "/"
+        let urlHost = ""
 
         if (healthCheckConfig == null) {
             healthCheckConfig = {
@@ -27,6 +28,17 @@ Vue.component("health-check-config-box", {
             try {
                 let url = new URL(healthCheckConfig.url)
                 urlProtocol = url.protocol.substring(0, url.protocol.length - 1)
+
+                // 域名
+                urlHost = url.host
+                if (urlHost == "%24%7Bhost%7D") {
+                    urlHost = "${host}"
+                }
+                let colonIndex = urlHost.indexOf(":")
+                if (colonIndex > 0) {
+                    urlHost = urlHost.substring(0, colonIndex)
+                }
+
                 urlPort = url.port
                 urlRequestURI = url.pathname
                 if (url.search.length > 0) {
@@ -54,11 +66,11 @@ Vue.component("health-check-config-box", {
                 healthCheckConfig.countDown = 1
             }
         }
-		console.log(healthCheckConfig.countUp, healthCheckConfig.countDown)
         return {
             healthCheck: healthCheckConfig,
             advancedVisible: false,
             urlProtocol: urlProtocol,
+            urlHost: urlHost,
             urlPort: urlPort,
             urlRequestURI: urlRequestURI
         }
@@ -82,6 +94,9 @@ Vue.component("health-check-config-box", {
         urlProtocol: function () {
             this.changeURL()
         },
+        urlHost: function () {
+            this.changeURL()
+        },
         "healthCheck.countTries": function (v) {
             let count = parseInt(v)
             if (!isNaN(count)) {
@@ -112,7 +127,11 @@ Vue.component("health-check-config-box", {
             this.advancedVisible = !this.advancedVisible
         },
         changeURL: function () {
-			this.healthCheck.url = this.urlProtocol + "://${host}" + ((this.urlPort.length > 0) ? ":" + this.urlPort : "") + this.urlRequestURI
+            let urlHost = this.urlHost
+            if (urlHost.length == 0) {
+                urlHost = "${host}"
+            }
+            this.healthCheck.url = this.urlProtocol + "://" + urlHost + ((this.urlPort.length > 0) ? ":" + this.urlPort : "") + this.urlRequestURI
         },
         changeStatus: function (values) {
             this.healthCheck.statusCodes = values.$map(function (k, v) {
@@ -143,27 +162,39 @@ Vue.component("health-check-config-box", {
 		<tr>
 			<td>URL *</td>
 			<td>
-				<div class="ui fields inline">
+			    <table class="ui table">
-					<div class="ui field">
+			         <tr>
-						<select class="ui dropdown" v-model="urlProtocol">
+			            <td class="title">协议</td> 
+			            <td>
+			            	<select class="ui dropdown auto-width" 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>
+                            <input type="text" v-model="urlHost"/>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>端口</td>
+                        <td>
+                            <input type="text" maxlength="5" style="width:5.4em" placeholder="端口" v-model="urlPort"/>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>RequestURI</td>
+                        <td><input type="text" v-model="urlRequestURI" placeholder="/" style="width:20em"/></td>
+                    </tr>
+                </table>
+				<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>
         </tr>
 		<tr>
 			<td>检测时间间隔</td>