feat(ui): 新增应用与服务拓扑图功能并引入图标字体

Author: sohandsomejie

ui-vue3/package.json

@@ -22,13 +22,15 @@
   },
   "dependencies": {
     "@antv/g2": "^5.1.12",
+    "@antv/g6": "^5.0.51",
     "@iconify/json": "^2.2.157",
     "@iconify/vue": "^4.1.1",
     "@types/lodash": "^4.14.202",
     "@types/lodash-es": "^4.17.12",
     "@types/nprogress": "^0.2.3",
     "ant-design-vue": "4.x",
     "dayjs": "^1.11.13",
+    "g6-extension-vue": "^0.1.0",
     "gsap": "^3.12.7",
     "js-cookie": "^3.0.5",
     "js-yaml": "^4.1.0",

ui-vue3/src/Login.vue

@@ -107,6 +107,7 @@ function loginHandle() {
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     display: flex;
     justify-content: center;
+    min-width: 350px;
     width: 22vw;
     //height: 30vh;
 

ui-vue3/src/api/mock/mockApp.ts

@@ -18,6 +18,53 @@
 import Mock from 'mockjs'
 import devTool from '@/utils/DevToolUtil'
 
+Mock.mock(devTool.mockUrl('/interface/graph'), 'get', () => {
+  return {
+    code: 'Success',
+    message: 'success',
+    data: {
+      nodes: [
+        {
+          id: 'dubbo-springboot-demo-provider10.83.120.105:50051',
+          label: 'dubbo-springboot-demo-provider10.83.120.105:50051',
+          data: {
+            appName: 'dubbo-springboot-demo-provider',
+            ip: '10.83.120.105',
+            name: 'dubbo-springboot-demo-provider10.83.120.105:50051',
+            protocol: 'tri',
+            qosPort: 0,
+            rpcPort: 50051,
+            tags: {
+              'meta-v': '2.0.0'
+            }
+          }
+        },
+        {
+          id: 'dubbo-springboot-demo-consumer10.83.120.106:50052',
+          label: 'dubbo-springboot-demo-consumer10.83.120.106:50052',
+          data: {
+            appName: 'dubbo-springboot-demo-consumer',
+            ip: '10.83.120.106',
+            name: 'dubbo-springboot-demo-consumer10.83.120.106:50052',
+            protocol: 'tri',
+            qosPort: 0,
+            rpcPort: 50052,
+            tags: {
+              'meta-v': '2.0.0'
+            }
+          }
+        }
+      ],
+      edges: [
+        {
+          source: 'dubbo-springboot-demo-consumer10.83.120.106:50052',
+          target: 'dubbo-springboot-demo-provider10.83.120.105:50051'
+        }
+      ]
+    }
+  }
+})
+
 Mock.mock('/mock/application/metrics', 'get', () => {
   return {
     code: 200,

ui-vue3/src/api/mock/mockService.ts

@@ -18,6 +18,65 @@
 import Mock from 'mockjs'
 import devTool from '@/utils/DevToolUtil'
 
+Mock.mock(devTool.mockUrl('/service/graph'), 'get', () => {
+  return {
+    code: 'Success',
+    message: 'success',
+    data: {
+      nodes: [
+        {
+          id: 'provider-01',
+          label: 'provider-01',
+          type: 'application',
+          rule: 'provider'
+        },
+        {
+          id: 'provider-02',
+          label: 'provider-02',
+          type: 'application',
+          rule: 'provider'
+        },
+        {
+          id: 'serviceName:version:group',
+          label: 'serviceName:version:group',
+          type: 'service',
+          rule: ''
+        },
+        {
+          id: 'consumer-01',
+          label: 'consumer-01',
+          type: 'application',
+          rule: 'consumer'
+        },
+        {
+          id: 'consumer-02',
+          label: 'consumer-02',
+          type: 'application',
+          rule: 'consumer'
+        }
+      ],
+      edges: [
+        {
+          source: 'serviceName:version:group',
+          target: 'provider-01'
+        },
+        {
+          source: 'serviceName:version:group',
+          target: 'provider-02'
+        },
+        {
+          source: 'consumer-01',
+          target: 'serviceName:version:group'
+        },
+        {
+          source: 'consumer-02',
+          target: 'serviceName:version:group'
+        }
+      ]
+    }
+  }
+})
+
 Mock.mock(devTool.mockUrl('/mock/service/search'), 'get', {
   code: 200,
   msg: 'success',

ui-vue3/src/api/service/app.ts

@@ -174,3 +174,11 @@ export const updateAppGrayIsolation = (appName: string, graySets: Array<any>): P
     }
   })
 }
+
+export const getInterfaceGraph = (serviceName: string): Promise<any> => {
+  return request({
+    url: '/interface/graph',
+    method: 'get',
+    params: { serviceName }
+  })
+}

ui-vue3/src/api/service/service.ts

@@ -27,7 +27,7 @@ export const searchService = (params: any): Promise<any> => {
 }
 
 export const getServiceDetail = (params: any): Promise<any> => {
-  return request({
+    return request({
     url: '/service/detail',
     method: 'get',
     params
@@ -136,3 +136,10 @@ export const updateParamRouteAPI = (data: {
     data
   })
 }
+
+export const getServiceGraph = (): Promise<any> => {
+  return request({
+    url: '/service/graph',
+    method: 'get'
+  })
+}