feat(ui): Added application and service topology mapping feature

Author: sohandsomejie

ui-vue3/package.json

@@ -23,6 +23,7 @@
   },
   "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",
@@ -31,6 +32,7 @@
     "ant-design-vue": "4.x",
     "axios": "^1.13.6",
     "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/api/service/app.ts

@@ -25,11 +25,13 @@ export const searchApplications = (params: any): Promise<any> => {
   })
 }
 
-export const getApplicationDetail = (params: any): Promise<any> => {
+export const getApplicationDetail = (appName: string): Promise<any> => {
   return request({
     url: '/application/detail',
     method: 'get',
-    params
+    params: {
+      appName
+    }
   })
 }
 
@@ -174,3 +176,11 @@ export const updateAppGrayIsolation = (appName: string, graySets: Array<any>): P
     }
   })
 }
+
+export const getApplicationGraph = (serviceName: string): Promise<any> => {
+  return request({
+    url: '/application/graph',
+    method: 'get',
+    params: { serviceName }
+  })
+}

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

@@ -26,11 +26,19 @@ export const searchService = (params: any): Promise<any> => {
   })
 }
 
-export const getServiceDetail = (params: any): Promise<any> => {
+export const getServiceDetail = ({
+  serviceName,
+  version,
+  group
+}: {
+  serviceName: string
+  version?: string
+  group?: string
+}): Promise<any> => {
   return request({
     url: '/service/detail',
     method: 'get',
-    params
+    params: { serviceName, version, group }
   })
 }
 
@@ -137,6 +145,16 @@ export const updateParamRouteAPI = (data: {
   })
 }
 
+export const getServiceGraph = (serviceName: string): Promise<any> => {
+  return request({
+    url: '/service/graph',
+    method: 'get',
+    params: {
+      serviceName
+    }
+  })
+}
+
 // get service methods list
 export const getServiceMethodsAPI = (params: {
   serviceName: string