fix page redirect error when click projectName (#843) (#845)

* fix(msp): fix page redirect error when click projectName * fix(msp): modify env text Co-authored-by: Zero <mobius_pan@yeah.net>
erda-project · Aug 4, 2021 · d6a4153 · d6a4153
1 parent 13c7a85
commit d6a4153
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 20 deletions.
diff --git a/shell/app/locales/en.json b/shell/app/locales/en.json
@@ -707,6 +707,7 @@
   "common": {
     "Application and application roles need to be set at the same time": "Application and application roles need to be set at the same time",
     "Are you sure to quit?": "Are you sure to quit?",
+    "DEFAULT": "DEFAULT",
     "DEV": "DEV",
     "Filter conditions": "Filter conditions",
     "PROD": "PROD",

diff --git a/shell/app/locales/zh.json b/shell/app/locales/zh.json
@@ -707,6 +707,7 @@
   "common": {
     "Application and application roles need to be set at the same time": "应用和应用角色需同时设置",
     "Are you sure to quit?": "您确认要退出",
+    "DEFAULT": "默认",
     "DEV": "开发",
     "Filter conditions": "筛选过滤条件",
     "PROD": "生产",

diff --git a/shell/app/modules/msp/config.ts b/shell/app/modules/msp/config.ts
@@ -28,7 +28,7 @@ export const envMap = {
   TEST: i18n.t('common:TEST'),
   STAGING: i18n.t('common:STAGING'),
   PROD: i18n.t('common:PROD'),
-  DEFAULT: i18n.t('common:PROD'),
+  DEFAULT: i18n.t('common:DEFAULT'),
 };
 
 interface IMSPathParams {

diff --git a/shell/app/modules/msp/pages/micro-service/switch-env.tsx b/shell/app/modules/msp/pages/micro-service/switch-env.tsx
@@ -14,8 +14,7 @@
 import React from 'react';
 import routeInfoStore from 'core/stores/route';
 import { Dropdown, Menu } from 'app/nusi';
-import { useUpdateEffect } from 'react-use';
-import mspStore, { initMenu } from 'msp/stores/micro-service';
+import mspStore from 'msp/stores/micro-service';
 import { ErdaCustomIcon } from 'common';
 import { goTo } from 'common/utils';
 
@@ -26,9 +25,6 @@ const SwitchEnv = () => {
   React.useEffect(() => {
     setEnv(env);
   }, [env]);
-  useUpdateEffect(() => {
-    initMenu(true);
-  }, [env]);
   const [menu, envName] = React.useMemo(() => {
     const handleChangeEnv = ({ key }: { key: string }) => {
       const selectEnv = relationship.find((item) => item.workspace === key);
@@ -58,7 +54,7 @@ const SwitchEnv = () => {
       <Dropdown overlay={menu} trigger={['click']}>
         <div className="font-bold text-base h-8 rounded border border-solid border-transparent flex justify-center cursor-pointer hover:border-primary">
           <span className="self-center">{envName}</span>
-          <ErdaCustomIcon class="self-center" type="caret-down" size="16" />
+          <ErdaCustomIcon className="self-center" type="caret-down" size="16" />
         </div>
       </Dropdown>
     </div>

diff --git a/shell/app/modules/msp/stores/micro-service.tsx b/shell/app/modules/msp/stores/micro-service.tsx
@@ -34,8 +34,14 @@ interface IState {
   clusterType: string;
   DICE_CLUSTER_TYPE: string;
   isK8S: boolean;
+  currentEnvInfo: {
+    projectId: string;
+    env: MS_INDEX.IMspProjectEnv;
+    tenantGroup: string;
+  };
   currentProject: MS_INDEX.IMspProject;
 }
+
 const currentLocale = getCurrentLocale();
 
 const generateMSMenu = (menuData: MS_INDEX.IMspMenu[], params: Record<string, any>, query: Record<string, any>) => {
@@ -104,17 +110,30 @@ const initState: IState = {
   clusterType: '',
   DICE_CLUSTER_TYPE: '',
   isK8S: true,
+  currentEnvInfo: {},
   currentProject: {},
 };
 
 const mspStore = createStore({
   name: 'msp',
   state: initState,
   subscriptions({ listenRoute }: IStoreSubs) {
-    listenRoute(async ({ isEntering, isLeaving }: IRouteInfo) => {
-      if (isEntering('mspDetail')) {
-        await mspStore.effects.getMspProjectDetail();
-        initMenu();
+    listenRoute(async ({ params, isLeaving, isIn }: IRouteInfo) => {
+      const { projectId, tenantGroup, env } = params;
+      const mspReg = /\/msp\/\d+\/[A-Z]+\/[a-z0-9A-Z]+$/;
+      const isMspDetailIndex = mspReg.test(location.href);
+      const currentEnvInfo = mspStore.getState((s) => s.currentEnvInfo);
+      if (isIn('mspDetail')) {
+        if (projectId !== currentEnvInfo.projectId) {
+          mspStore.reducers.updateCurrentEnvInfo({ projectId, env, tenantGroup });
+          await mspStore.effects.getMspProjectDetail();
+          initMenu(true);
+        } else if (isMspDetailIndex && (env !== currentEnvInfo.env || tenantGroup !== currentEnvInfo.tenantGroup)) {
+          mspStore.reducers.updateCurrentEnvInfo({ projectId, env, tenantGroup });
+          initMenu(true);
+        } else if (isMspDetailIndex) {
+          initMenu();
+        }
       }
       if (isLeaving('mspDetail')) {
         setGlobal('service-provider', undefined);
@@ -125,6 +144,7 @@ const mspStore = createStore({
           DICE_CLUSTER_TYPE: undefined,
         });
         mspStore.reducers.clearMenuInfo();
+        mspStore.reducers.updateCurrentEnvInfo({});
         breadcrumbStore.reducers.setInfo('mspProjectName', '');
       }
     });
@@ -141,16 +161,16 @@ const mspStore = createStore({
     async getMspMenuList({ call, select, update }, payload?: { refresh: boolean }) {
       const [params, routes, query] = routeInfoStore.getState((s) => [s.params, s.routes, s.query]);
       let [mspMenu, currentProject] = await select((s) => [s.mspMenu, s.currentProject]);
-      const { env, projectId, tenantGroup } = params;
+      const { env, tenantGroup } = params;
       let menuData: MS_INDEX.IMspMenu[] = [];
       if (isEmpty(mspMenu) || payload?.refresh) {
         // 如果菜单数据为空说明是第一次进入具体微服务，请求菜单接口
         menuData = await call(mspService.getMspMenuList, { tenantId: tenantGroup, type: currentProject.type });
       }
-
-      const [firstMenu] = menuData;
-      const siderName = `${currentLocale.key === 'zh' ? firstMenu.cnName : firstMenu.enName}(${envMap[env]})`;
       mspMenu = generateMSMenu(menuData, params, query);
+      const [firstMenu] = mspMenu;
+      const firstMenuHref = get(firstMenu, 'subMenu.[0].href');
+      const siderName = `${firstMenu.text}(${envMap[env]})`;
       const msMenuMap = {};
       menuData.forEach((m) => {
         msMenuMap[m.key] = m;
@@ -176,12 +196,8 @@ const mspStore = createStore({
 
       if (routes[0].mark === 'mspDetail') {
         // 总览页过来的进入拓扑图
-        goTo(goTo.pages.mspTopology, {
+        goTo(firstMenuHref, {
           replace: true,
-          tenantGroup,
-          projectId,
-          env,
-          terminusKey: get(menuData, '[0].children[0].params.terminusKey'),
         });
       }
       return menuData;
@@ -197,6 +213,9 @@ const mspStore = createStore({
     clearMenuInfo(state) {
       state.mspMenu = [];
     },
+    updateCurrentEnvInfo(state, payload) {
+      state.currentEnvInfo = payload;
+    },
   },
 });