From 3116aaeccbbb2b4842d41390d2a0ddec405b44a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=A5=A5=E8=B6=85?= <iwind.liu@gmail.com>
Date: Thu, 23 Mar 2023 14:50:12 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8A=82=E7=82=B9=E5=88=97=E8=A1=A8=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9IP=E8=B6=85=E5=87=BA4=E4=B8=AA=E5=90=8E=E5=8F=AF?=
 =?UTF-8?q?=E4=BB=A5=E8=87=AA=E5=8A=A8=E9=9A=90=E8=97=8F=E5=92=8C=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/views/@default/clusters/cluster/nodes.html |  8 ++++++--
 web/views/@default/clusters/cluster/nodes.js   | 13 +++++++++++++
 web/views/@default/clusters/nodes.html         |  9 +++++++--
 web/views/@default/clusters/nodes.js           | 13 +++++++++++++
 4 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/web/views/@default/clusters/cluster/nodes.html b/web/views/@default/clusters/cluster/nodes.html
index a253bb16..49ae4c72 100644
--- a/web/views/@default/clusters/cluster/nodes.html
+++ b/web/views/@default/clusters/cluster/nodes.html
@@ -73,7 +73,7 @@
 		<th class="two op">操作</th>
 	</tr>
 	</thead>
-	<tr v-for="node in nodes">
+	<tr v-for="(node, nodeIndex) in nodes">
         <td class="node-name-td"><a :href="'/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + node.id">{{node.name}}<sup v-if="node.level > 1"><span class="blue"> &nbsp;L{{node.level}}</span></sup></a>
 
             <a :href="'/clusters/cluster/node/update?clusterId=' + clusterId + '&nodeId=' + node.id" title="设置"><i class="icon setting grey"></i></a>
@@ -91,7 +91,7 @@
 		<td>
 			<span v-if="node.ipAddresses.length == 0" class="disabled">-</span>
 			<div v-else class="address-box">
-				<div v-for="addr in node.ipAddresses" style="margin-bottom:0.3em">
+				<div v-for="(addr, index) in node.ipAddresses" v-if="node.ipAddresses.length < mostIPVisible || node.ipAddressesVisible || index < mostIPVisible" style="margin-bottom:0.3em">
 					<div class="ui label tiny basic">{{addr.ip}}
 						<span class="small" v-if="addr.name.length > 0">（{{addr.name}}<span v-if="!addr.canAccess">，不可访问</span>）</span>
 						<span class="small" v-if="addr.name.length == 0 && !addr.canAccess">（不可访问）</span>
@@ -102,6 +102,10 @@
                         </div>
 					</div>
 				</div>
+                <a href="" @click.prevent="showMoreIP(nodeIndex, node)" v-show="node.ipAddresses.length > mostIPVisible">
+                    <span class="small grey" v-if="!node.ipAddressesVisible">更多IP...</span>
+                    <span class="small grey" v-if="node.ipAddressesVisible">...收起</span>
+                </a>
 			</div>
 		</td>
 		<td class="routes-box" :class="{'show-link': node.dnsRouteNames.length == 0 &&  hasClusterDNS}">
diff --git a/web/views/@default/clusters/cluster/nodes.js b/web/views/@default/clusters/cluster/nodes.js
index ae3b32b9..df687b9c 100644
--- a/web/views/@default/clusters/cluster/nodes.js
+++ b/web/views/@default/clusters/cluster/nodes.js
@@ -48,4 +48,17 @@ Tea.context(function () {
 			}
 		})
 	}
+
+	/**
+	 * 显示和隐藏IP
+	 */
+	this.mostIPVisible = 4
+
+	this.showMoreIP = function (nodeIndex, node) {
+		if (typeof node.ipAddressesVisible != "boolean") {
+			node.ipAddressesVisible = false
+		}
+		node.ipAddressesVisible = !node.ipAddressesVisible
+		Vue.set(this.nodes, nodeIndex, node)
+	}
 })
\ No newline at end of file
diff --git a/web/views/@default/clusters/nodes.html b/web/views/@default/clusters/nodes.html
index 6d0ddd13..0534b503 100644
--- a/web/views/@default/clusters/nodes.html
+++ b/web/views/@default/clusters/nodes.html
@@ -67,7 +67,7 @@
         <th class="one op">操作</th>
     </tr>
     </thead>
-    <tr v-for="node in nodes">
+    <tr v-for="(node, nodeIndex) in nodes">
         <td class="node-name-td"><a :href="'/clusters/cluster/node?clusterId=' + node.cluster.id + '&nodeId=' + node.id">{{node.name}}<sup v-if="node.level > 1"><span class="blue"> &nbsp;L{{node.level}}</span></sup></a>
 
             <a :href="'/clusters/cluster/node/update?clusterId=' + node.cluster.id + '&nodeId=' + node.id" title="设置"><i class="icon setting grey"></i></a>
@@ -85,7 +85,7 @@
         <td>
             <span v-if="node.ipAddresses.length == 0" class="disabled">-</span>
             <div v-else class="address-box">
-                <div v-for="addr in node.ipAddresses" style="margin-bottom:0.3em">
+                <div v-for="(addr, index) in node.ipAddresses" v-if="node.ipAddresses.length < mostIPVisible || node.ipAddressesVisible || index < mostIPVisible" style="margin-bottom:0.3em">
                     <div class="ui label tiny basic">{{addr.ip}}
                         <span class="small" v-if="addr.name.length > 0">（{{addr.name}}<span v-if="!addr.canAccess">，不可访问</span>）</span>
                         <span class="small" v-if="addr.name.length == 0 && !addr.canAccess">（不可访问）</span>
@@ -96,6 +96,11 @@
                         </div>
                     </div>
                 </div>
+
+                <a href="" @click.prevent="showMoreIP(nodeIndex, node)" v-show="node.ipAddresses.length > mostIPVisible">
+                    <span class="small grey" v-if="!node.ipAddressesVisible">更多IP...</span>
+                    <span class="small grey" v-if="node.ipAddressesVisible">...收起</span>
+                </a>
             </div>
         </td>
         <td class="routes-box" :class="{'show-link': node.dnsRouteNames.length == 0 &&  hasClusterDNS}">
diff --git a/web/views/@default/clusters/nodes.js b/web/views/@default/clusters/nodes.js
index 7e81ea26..1f35a34a 100644
--- a/web/views/@default/clusters/nodes.js
+++ b/web/views/@default/clusters/nodes.js
@@ -48,4 +48,17 @@ Tea.context(function () {
 			}
 		})
 	}
+
+	/**
+	 * 显示和隐藏IP
+	 */
+	this.mostIPVisible = 4
+
+	this.showMoreIP = function (nodeIndex, node) {
+		if (typeof node.ipAddressesVisible != "boolean") {
+			node.ipAddressesVisible = false
+		}
+		node.ipAddressesVisible = !node.ipAddressesVisible
+		Vue.set(this.nodes, nodeIndex, node)
+	}
 })
\ No newline at end of file