Merge pull request apache#208 from ikun-Lg/master

Front:Feature about the page of instance(detail tab and config tab)
Helltab · Mar 4, 2024 · 708a2a5 · 708a2a5
2 parents 5ca79d6 + 1958545
commit 708a2a5
Show file tree

Hide file tree

Showing 32 changed files with 1,203 additions and 460 deletions.
diff --git a/ui-vue3/src/App.vue b/ui-vue3/src/App.vue
@@ -68,6 +68,10 @@ const localeGlobal = reactive(i18n.global.locale)
 </template>
 
 <style lang="less">
+.ant-descriptions-item-content {
+  padding-left: 20px !important;
+}
+
 .__global_float_button_question {
   right: 24px;
 }

diff --git a/ui-vue3/src/api/mock/mockApp.ts b/ui-vue3/src/api/mock/mockApp.ts
@@ -16,135 +16,107 @@
  */
 
 import Mock from 'mockjs'
-import devTool from "@/utils/DevToolUtil";
+import devTool from '@/utils/DevToolUtil'
 
 Mock.mock('/mock/application/search', 'get', () => {
-    let total = Mock.mock('@integer(8, 1000)')
-    let list = []
-    for (let i = 0; i < total; i++) {
-        list.push({
-            appName: 'app_' + Mock.mock('@string(2,10)'),
-            instanceNum: Mock.mock('@integer(80, 200)'),
-            deployCluster: 'cluster_' + Mock.mock('@string(5)'),
-            'registerClusters|1-3': ['cluster_' + Mock.mock('@string(5)')]
-        })
-    }
-    return {
-        code: 200,
-        message: 'success',
-        data: Mock.mock({
-            total: total,
-            curPage: 1,
-            pageSize: 10,
-            data: list
-        })
-    }
+  let total = Mock.mock('@integer(8, 1000)')
+  let list = []
+  for (let i = 0; i < total; i++) {
+    list.push({
+      appName: 'app_' + Mock.mock('@string(2,10)'),
+      instanceNum: Mock.mock('@integer(80, 200)'),
+      deployCluster: 'cluster_' + Mock.mock('@string(5)'),
+      'registerClusters|1-3': ['cluster_' + Mock.mock('@string(5)')]
+    })
+  }
+  return {
+    code: 200,
+    message: 'success',
+    data: Mock.mock({
+      total: total,
+      curPage: 1,
+      pageSize: 10,
+      data: list
+    })
+  }
 })
 Mock.mock('/mock/application/instance/statistics', 'get', () => {
-    return {
-        "code": 1000,
-        "message": "success",
-        "data": {
-            "instanceTotal": 43,
-            "versionTotal": 4,
-            "cpuTotal": "56c",
-            "memoryTotal": "108.2GB"
-        }
+  return {
+    code: 1000,
+    message: 'success',
+    data: {
+      instanceTotal: 43,
+      versionTotal: 4,
+      cpuTotal: '56c',
+      memoryTotal: '108.2GB'
     }
+  }
 })
 
 Mock.mock(devTool.mockUrl('/mock/application/instance/info'), 'get', () => {
-
-    let total = Mock.mock('@integer(8, 1000)')
-    let list = []
-    for (let i = 0; i < total; i++) {
-        list.push(
-            {
-                "ip": "121.90.211.162",
-                "name": "shop-user",
-                "deployState": Mock.Random.pick(['Running','Pending', 'Terminating', 'Crashing']),
-                "deployCluster": "tx-shanghai-1",
-                "registerStates": [
-                    {
-                        "label": "Registed",
-                        "value": "Registed",
-                        "level": "healthy"
-                    }
-                ],
-                "registerClusters": [
-                    "ali-hangzhou-1",
-                    "ali-hangzhou-2"
-                ],
-                "cpu": "1.2c",
-                "memory": "2349MB",
-                "startTime": "2023-06-09 03:47:10",
-                "registerTime": "2023-06-09 03:48:20",
-                "labels": {
-                    "region": "beijing",
-                    "version": "v1"
-                }
-            }
-        )
-    }
-    return {
-        code: 200,
-        message: 'success',
-        data: Mock.mock({
-            total: total,
-            curPage: 1,
-            pageSize: 10,
-            data: list
-        })
-    }
+  let total = Mock.mock('@integer(8, 1000)')
+  let list = []
+  for (let i = 0; i < total; i++) {
+    list.push({
+      ip: '121.90.211.162',
+      name: 'shop-user',
+      deployState: Mock.Random.pick(['Running', 'Pending', 'Terminating', 'Crashing']),
+      deployCluster: 'tx-shanghai-1',
+      registerStates: [
+        {
+          label: 'Registed',
+          value: 'Registed',
+          level: 'healthy'
+        }
+      ],
+      registerClusters: ['ali-hangzhou-1', 'ali-hangzhou-2'],
+      cpu: '1.2c',
+      memory: '2349MB',
+      startTime: '2023-06-09 03:47:10',
+      registerTime: '2023-06-09 03:48:20',
+      labels: {
+        region: 'beijing',
+        version: 'v1'
+      }
+    })
+  }
+  return {
+    code: 200,
+    message: 'success',
+    data: Mock.mock({
+      total: total,
+      curPage: 1,
+      pageSize: 10,
+      data: list
+    })
+  }
 })
 
 Mock.mock('/mock/application/detail', 'get', () => {
-    return {
-        "code": 200,
-        "message": "success",
-        "data": {
-            "appName": [
-                "shop-user"
-            ],
-            "rpcProtocols": [
-                "dubbo 2.0.2"
-            ],
-            "dubboVersions": [
-                "Dubbo 3.2.10",
-                "Dubbo 2.7.4.1"
-            ],
-            "dubboPorts": [
-                "20880"
-            ],
-            "serialProtocols": [
-                "fastjson2"
-            ],
-            "appTypes": [
-                "无状态"
-            ],
-            "images": [
-                "harbor.apche.org/dubbo-samples-shop-user:v1.0",
-                "harbor.apche.org/dubbo-samples-shop-user:v1.1",
-                "harbor.apche.org/dubbo-samples-shop-user:v1.2",
-            ],
-            "workloads": [
-                "dubbo-samples-shop-user-base",
-                "dubbo-samples-shop-user-gray",
-                "dubbo-samples-shop-user-gray",
-                "dubbo-samples-shop-user-gray",
-            ],
-            "deployCluster": [
-                "ali-shanghai-1",
-                "tx-shanghai-2"
-            ],
-            "registerCluster": [
-                "nacos-cluster-1",
-                "nacos-cluster-2"
-            ],
-            "registerMode": [
-                "应用级",
-                "接口级"
-            ]
-        }
+  return {
+    code: 200,
+    message: 'success',
+    data: {
+      appName: ['shop-user'],
+      rpcProtocols: ['dubbo 2.0.2'],
+      dubboVersions: ['Dubbo 3.2.10', 'Dubbo 2.7.4.1'],
+      dubboPorts: ['20880'],
+      serialProtocols: ['fastjson2'],
+      appTypes: ['无状态'],
+      images: [
+        'harbor.apche.org/dubbo-samples-shop-user:v1.0',
+        'harbor.apche.org/dubbo-samples-shop-user:v1.1',
+        'harbor.apche.org/dubbo-samples-shop-user:v1.2'
+      ],
+      workloads: [
+        'dubbo-samples-shop-user-base',
+        'dubbo-samples-shop-user-gray',
+        'dubbo-samples-shop-user-gray',
+        'dubbo-samples-shop-user-gray'
+      ],
+      deployCluster: ['ali-shanghai-1', 'tx-shanghai-2'],
+      registerCluster: ['nacos-cluster-1', 'nacos-cluster-2'],
+      registerMode: ['应用级', '接口级']
     }
+  }
 })
diff --git a/ui-vue3/src/api/mock/mockInstance.ts b/ui-vue3/src/api/mock/mockInstance.ts
@@ -0,0 +1,103 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Mock from 'mockjs'
+
+Mock.mock('/mock/instance/search', 'get', {
+  code: 200,
+  message: 'laborum qui',
+  data: {
+    total: 66,
+    curPage: 82,
+    pageSize: 31,
+    data: [
+      {
+        ip: '205.216.185.96',
+        name: '用省中际解理',
+        deployState: {
+          label: 'dolor',
+          value: 'in amet',
+          level: 'amet nisi incididunt',
+          tip: '133.16.55.40'
+        },
+        deployCluster: 'veniam elit irure',
+        registerStates: [
+          {
+            label: 'in consequat est',
+            value: 'esse non Lorem',
+            level: 'sit',
+            tip: '122.249.164.252'
+          }
+        ],
+        registerClusters: ['cupidatat'],
+        cpu: 'officia cupidatat reprehenderit magna ex',
+        memory: 'mollit',
+        startTime: '2016-07-31 19:20:31',
+        registerTime: '2014-02-09 04:02:41',
+        labels: ['cupidat']
+      },
+      {
+        ip: '117.23.142.162',
+        name: '之受力即此',
+        deployState: {
+          label: 'sint culpa elit quis id',
+          value: 'amet',
+          level: 'adipisicing do',
+          tip: '112.176.231.68'
+        },
+        deployCluster: 'esse sit',
+        registerStates: [
+          {
+            label: 'ut',
+            value: 'eu sit',
+            level: 'in eiusmod ullamco',
+            tip: '220.153.108.236'
+          }
+        ],
+        registerClusters: ['ea consectetur'],
+        cpu: 'dolor sint deserunt',
+        memory: 'sint eu commodo proident',
+        startTime: '1994-12-22 18:24:57',
+        registerTime: '1986-07-24 03:18:24'
+      },
+      {
+        ip: '41.215.196.61',
+        name: '值青给值',
+        deployState: {
+          label: 'sunt',
+          value: 'consectetur in',
+          level: 'culpa dolore',
+          tip: '142.182.249.124'
+        },
+        deployCluster: 'cupidatat eu nostrud',
+        registerStates: [
+          {
+            label: 'ad quis',
+            value: 'Excepteur esse dolore Ut dolore',
+            level: 'ipsum ad quis',
+            tip: '220.55.203.4'
+          }
+        ],
+        registerClusters: ['Excepteur sit laboris'],
+        cpu: 'fugiat pariatur laborum ut',
+        memory: 'Lorem adipisicing sunt',
+        startTime: '1984-04-25 12:22:51',
+        registerTime: '1976-06-06 19:58:58'
+      }
+    ]
+  }
+})
diff --git a/ui-vue3/src/api/mock/mockService.ts b/ui-vue3/src/api/mock/mockService.ts
@@ -16,7 +16,7 @@
  */
 
 import Mock from 'mockjs'
-import devTool from "@/utils/DevToolUtil";
+import devTool from '@/utils/DevToolUtil'
 
 Mock.mock(devTool.mockUrl('/mock/service/search'), 'get', {
   code: 200,

diff --git a/ui-vue3/src/api/service/app.ts b/ui-vue3/src/api/service/app.ts
@@ -25,7 +25,6 @@ export const searchApplications = (params: any): Promise<any> => {
   })
 }
 
-
 export const getApplicationDetail = (params: any): Promise<any> => {
   return request({
     url: '/application/detail',
@@ -48,5 +47,3 @@ export const getApplicationInstanceInfo = (params: any): Promise<any> => {
     params
   })
 }
-
-
diff --git a/ui-vue3/src/api/service/instance.ts b/ui-vue3/src/api/service/instance.ts
@@ -0,0 +1,26 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import request from '@/base/http/request'
+
+export const searchInstances = (params: any): Promise<any> => {
+  return request({
+    url: '/instance/search',
+    method: 'get',
+    params
+  })
+}