优化节点创建流程

web/public/js/components/grant/grant-selector.js

@@ -16,21 +16,24 @@ Vue.component("grant-selector", {
 					if (that.grantId > 0) {
 						that.grant = resp.data.grant;
 					}
+					that.notifyUpdate()
 				}
-			});
+			})
 		},
 
 		// 创建授权
 		create: function () {
+			let that = this
 			teaweb.popup("/clusters/grants/createPopup", {
 				height: "26em",
 				callback: (resp) => {
-					this.grantId = resp.data.grant.id;
-					if (this.grantId > 0) {
-						this.grant = resp.data.grant;
+					that.grantId = resp.data.grant.id;
+					if (that.grantId > 0) {
+						that.grant = resp.data.grant;
 					}
+					that.notifyUpdate()
 				}
-			});
+			})
 		},
 
 		// 修改授权
@@ -39,18 +42,24 @@ Vue.component("grant-selector", {
 				window.location.reload();
 				return;
 			}
+			let that = this
 			teaweb.popup("/clusters/grants/updatePopup?grantId=" + this.grant.id, {
 				height: "26em",
 				callback: (resp) => {
-					this.grant = resp.data.grant;
+					that.grant = resp.data.grant
+					that.notifyUpdate()
 				}
 			})
 		},
 
 		// 删除已选择授权
 		remove: function () {
-			this.grant = null;
-			this.grantId = 0;
+			this.grant = null
+			this.grantId = 0
+			this.notifyUpdate()
+		},
+		notifyUpdate: function () {
+			this.$emit("change", this.grant)
 		}
 	},
 	template: `<div>

web/public/js/components/node/node-login-suggest-ports.js

@@ -0,0 +1,60 @@
+// 节点登录推荐端口
+Vue.component("node-login-suggest-ports", {
+	data: function () {
+		return {
+			ports: [],
+			availablePorts: [],
+			autoSelected: false,
+			isLoading: false
+		}
+	},
+	methods: {
+		reload: function (host) {
+			let that = this
+			this.autoSelected = false
+			this.isLoading = true
+			Tea.action("/clusters/cluster/suggestLoginPorts")
+				.params({
+					host: host
+				})
+				.success(function (resp) {
+					if (resp.data.availablePorts != null) {
+						that.availablePorts = resp.data.availablePorts
+						if (that.availablePorts.length > 0) {
+							that.autoSelectPort(that.availablePorts[0])
+							that.autoSelected = true
+						}
+					}
+					if (resp.data.ports != null) {
+						that.ports = resp.data.ports
+						if (that.ports.length > 0 && !that.autoSelected) {
+							that.autoSelectPort(that.ports[0])
+							that.autoSelected = true
+						}
+					}
+				})
+				.done(function () {
+					that.isLoading = false
+				})
+				.post()
+		},
+		selectPort: function (port) {
+			this.$emit("select", port)
+		},
+		autoSelectPort: function (port) {
+			this.$emit("auto-select", port)
+		}
+	},
+	template: `<span>
+	<span v-if="isLoading">正在检查端口...</span>
+	<span v-if="availablePorts.length > 0">
+		推荐端口：<a href="" v-for="port in availablePorts" @click.prevent="selectPort(port)" class="ui label tiny basic blue" style="border: 1px #2185d0 dashed; font-weight: normal">{{port}}</a>
+		&nbsp; &nbsp;
+	</span>
+	<span v-if="ports.length > 0">
+		常用端口：<a href="" v-for="port in ports" @click.prevent="selectPort(port)" class="ui label tiny basic blue" style="border: 1px #2185d0 dashed;  font-weight: normal">{{port}}</a>
+	</span>
+	<span v-if="ports.length == 0">常用端口有22等。</span>
+	<span v-if="ports.length > 0" class="grey small">（可以点击要使用的端口）</span>
+</span>`
+})