refactor(api): Unify interface naming and adjust service topology parameters

Author: sohandsomejie

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

@@ -18,7 +18,7 @@
 import Mock from 'mockjs'
 import devTool from '@/utils/DevToolUtil'
 
-Mock.mock(devTool.mockUrl('/interface/graph'), 'get', () => {
+Mock.mock(devTool.mockUrl('/application/graph'), 'get', () => {
   return {
     code: 'Success',
     message: 'success',

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

@@ -175,9 +175,9 @@ export const updateAppGrayIsolation = (appName: string, graySets: Array<any>): P
   })
 }
 
-export const getInterfaceGraph = (serviceName: string): Promise<any> => {
+export const getApplicationGraph = (serviceName: string): Promise<any> => {
   return request({
-    url: '/interface/graph',
+    url: '/application/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
@@ -137,9 +137,12 @@ export const updateParamRouteAPI = (data: {
   })
 }
 
-export const getServiceGraph = (): Promise<any> => {
+export const getServiceGraph = (serviceName: string): Promise<any> => {
   return request({
     url: '/service/graph',
-    method: 'get'
+    method: 'get',
+    params: {
+      serviceName
+    }
   })
 }

ui-vue3/src/views/resources/applications/tabs/topology.vue

@@ -47,7 +47,7 @@
 
 <script setup lang="tsx">
 import { PRIMARY_COLOR } from '@/base/constants'
-import { getApplicationDetail, getInterfaceGraph } from '@/api/service/app'
+import { getApplicationDetail, getApplicationGraph } from '@/api/service/app'
 import { HTTP_STATUS } from '@/base/http/constants'
 import { computed, defineComponent, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
 import type { PropType } from 'vue'
@@ -268,7 +268,7 @@ let resizeHandler: (() => void) | null = null
 onMounted(async () => {
   try {
     const serviceName = String(route.params?.pathId ?? '')
-    const res = await getInterfaceGraph(serviceName)
+    const res = await getApplicationGraph(serviceName)
     if (res?.code !== HTTP_STATUS.SUCCESS) return
 
     const graphData = buildGraphData(res?.data)

ui-vue3/src/views/resources/services/tabs/topology.vue

@@ -272,7 +272,7 @@ const renderTopology = (graphData: any) => {
     const nodeData: any = serviceName ? graphRef.value?.getNodeData(serviceName) : undefined
     const params = {
       serviceName: serviceName,
-      side: nodeData?.type ?? 'application',
+      side: nodeData?.rule ?? 'provider',
       version: route.params?.version || '',
       group: route.params?.group || ''
     }
@@ -321,7 +321,9 @@ const renderTopology = (graphData: any) => {
 let resizeHandler: (() => void) | null = null
 onMounted(async () => {
   try {
-    const res = await getServiceGraph()
+    const serviceName = String(route.params?.pathId ?? '')
+    console.log('topology', serviceName)
+    const res = await getServiceGraph(serviceName)
     if (res?.code !== HTTP_STATUS.SUCCESS) return
     const graphData = buildGraphData(res?.data)
     renderTopology(graphData)