feature(web): 优化服务集群展示，新增按 ip 展示微服务节点情况

service-web/src/main/resources/static/components/cloud-tab.js

@@ -1,3 +1,27 @@
+function cloudCrud(title, path) {
+    return {
+        type: 'crud',
+        title: title,
+        api: `\${base}${path}`,
+        interval: 2000,
+        syncLocation: false,
+        silentPolling: true,
+        headerToolbar: ['reload'],
+        loadDataOnce: true,
+        affixHeader: false,
+        perPage: 100,
+        columns: [
+            {name: 'name', label: '名称'},
+            {
+                name: 'serviceId',
+                label: '服务',
+                width: 200,
+            },
+            {name: 'url', label: '地址', width: 200},
+        ]
+    }
+}
+
 function cloudTab() {
     return {
         title: 'Cloud 集群',
@@ -16,24 +40,8 @@ function cloudTab() {
                 ],
             },
             {type: 'divider'},
-            {
-                type: 'crud',
-                title: '服务列表',
-                api: '${base}/cloud/list',
-                interval: 2000,
-                syncLocation: false,
-                silentPolling: true,
-                headerToolbar: ['reload'],
-                columns: [
-                    {name: 'name', label: '名称'},
-                    {
-                        name: 'serviceId',
-                        label: '服务',
-                        width: 100,
-                    },
-                    {name: 'url', label: '地址', width: 200},
-                ]
-            }
+            cloudCrud('服务列表', '/cloud/list'),
+            cloudCrud('服务列表 (IP)', '/cloud/list_ip'),
         ],
     }
 }