diff --git a/shell/app/locales/en.json b/shell/app/locales/en.json
index e269c7a4cc..d7da5acf48 100644
--- 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
index 37a5dd0190..6a1a00dfac 100644
--- 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
index 44d4e95e02..fc00643ddb 100644
--- 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
index e3871ebec1..4570c09863 100644
--- 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 = () => {
{envName}
-
+
diff --git a/shell/app/modules/msp/stores/micro-service.tsx b/shell/app/modules/msp/stores/micro-service.tsx
index 833c52b23a..8807965c5d 100644
--- 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, query: Record) => {
@@ -104,6 +110,7 @@ const initState: IState = {
clusterType: '',
DICE_CLUSTER_TYPE: '',
isK8S: true,
+ currentEnvInfo: {},
currentProject: {},
};
@@ -111,10 +118,22 @@ 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;
+ },
},
});