feat: modify route about service analysis

shell/app/common/utils/go-to.tsx

@@ -261,9 +261,12 @@ export enum pages {
   microServiceAddCustomDashboard = '/{orgName}/msp/{projectId}/{env}/{tenantGroup}/analysis/{terminusKey}/custom-dashboard/add',
   microServiceCustomDashboardDetail = '/{orgName}/msp/{projectId}/{env}/{tenantGroup}/analysis/{terminusKey}/custom-dashboard/{customDashboardId}',
 
-  // 微服务-服务分析页
+  // 微服务-总览服务列表
   mspServiceAnalyze = '/{orgName}/msp/{projectId}/{env}/{tenantGroup}/synopsis/{terminusKey}/service-list/{applicationId}/{serviceId}/{serviceName}',
 
+  // 微服务-监控中心-服务监控
+  mspServiceMonitor = '/{orgName}/msp/{projectId}/{env}/{tenantGroup}/monitor/{terminusKey}/service-analysis/{applicationId}/{serviceId}/{serviceName}',
+
   // 微服务-事务分析页
   mspServiceTransaction = '/{orgName}/msp/{projectId}/{env}/{tenantGroup}/synopsis/{terminusKey}/service-list/{applicationId}/{serviceId}/{serviceName}/transaction',
 

shell/app/modules/msp/env-overview/service-list/pages/index.tsx

@@ -84,11 +84,11 @@ const dataConvert: {
 };
 
 const CHART_MAP: {
-  [k in MSP_SERVICES.SERVICE_LIST_CHART_TYPE]: {
+  [k in MSP_SERVICES.SERVICE_LIST_CHART_TYPE]: Array<{
     key: string;
     name: string;
     tips: string;
-  }[];
+  }>;
 } = {
   RPS: [
     {
@@ -129,15 +129,15 @@ type ServiceStatus = MSP_SERVICES.ServiceStatus | 'allService';
 const listDetail = (serviceId: string, serviceName: string) => {
   const currentProject = mspStore.getState((s) => s.currentProject);
   const params = routeInfoStore.getState((s) => s.params);
-  goTo(goTo.pages.mspServiceAnalyze, {
+  goTo(goTo.pages.mspServiceMonitor, {
     ...params,
     applicationId: currentProject?.type === 'MSP' ? '-' : serviceId.split('_')[0],
     serviceName,
     serviceId: window.encodeURIComponent(serviceId || ''),
   });
 };
 
-const tabs: { label: string; value: ServiceStatus; countKey: keyof MSP_SERVICES.ServiceCount }[] = [
+const tabs: Array<{ label: string; value: ServiceStatus; countKey: keyof MSP_SERVICES.ServiceCount }> = [
   {
     label: i18n.t('msp:all service'),
     value: 'allService',
@@ -226,7 +226,7 @@ const MicroServiceOverview = () => {
     getServiceCount({ tenantId });
   }, [getServicesList]);
 
-  const columns: CardColumnsProps<IListItem>[] = [
+  const columns: Array<CardColumnsProps<IListItem>> = [
     {
       dataIndex: 'language',
       colProps: { span: 8, className: 'flex items-center' },

shell/app/modules/msp/env-overview/service-list/router.ts

@@ -14,6 +14,11 @@
 import i18n from 'i18n';
 import { ServiceNameSelect } from './pages/service-name-select';
 
+interface Tabs {
+  name: string;
+  key: string;
+}
+
 const tabs = [
   { key: 'overview', name: i18n.t('overview') },
   { key: 'transaction', name: i18n.t('msp:transaction') },
@@ -62,30 +67,19 @@ const serviceAnalysisRoutes = [
   },
 ];
 
-export default (pageTabs) => ({
+const serviceListRouter = (pageTabs: Tabs[]) => ({
   path: 'service-list',
   tabs: pageTabs,
   alwaysShowTabKey: 'service-list',
-  routes: [
-    {
-      path: ':applicationId/:applicationId/:serviceName',
-      breadcrumbName: i18n.t('msp:service monitor'),
-      tabs,
-      alwaysShowTabKey: 'overview',
-      pageNameInfo: ServiceNameSelect,
-      layout: { fullHeight: true },
-      routes: serviceAnalysisRoutes,
-    },
-    {
-      getComp: (cb: RouterGetComp) => cb(import('msp/env-overview/service-list/pages')),
-      layout: {
-        fullHeight: true,
-        noWrapper: true,
-      },
-    },
-  ],
+  getComp: (cb: RouterGetComp) => cb(import('msp/env-overview/service-list/pages')),
+  layout: {
+    fullHeight: true,
+    noWrapper: true,
+  },
 });
 
+export default serviceListRouter;
+
 export function serviceAnalysisRouter() {
   return {
     path: 'service-analysis',
@@ -94,6 +88,28 @@ export function serviceAnalysisRouter() {
     alwaysShowTabKey: 'overview',
     pageNameInfo: ServiceNameSelect,
     layout: { fullHeight: true },
-    routes: serviceAnalysisRoutes,
+    routes: [
+      ...serviceAnalysisRoutes,
+      {
+        path: ':applicationId',
+        breadcrumbName: i18n.t('msp:service list'),
+        routes: [
+          {
+            path: ':serviceId',
+            routes: [
+              {
+                path: ':serviceName',
+                breadcrumbName: i18n.t('msp:service monitor'),
+                tabs,
+                alwaysShowTabKey: 'overview',
+                pageNameInfo: ServiceNameSelect,
+                layout: { fullHeight: true },
+                routes: serviceAnalysisRoutes,
+              },
+            ],
+          },
+        ],
+      },
+    ],
   };
 }