diff --git a/pkg/web/index.html b/pkg/web/index.html
index aaedd7dd9a6952c64388bde7eed8e3b3fe983f6f..d31ffe505cc966b8ef307ee831e86f7fe40b19c8 100644
--- a/pkg/web/index.html
+++ b/pkg/web/index.html
@@ -6,7 +6,7 @@
<title>Crane Dashboard</title>
<meta name="description" content="React UI Component" />
<meta name="theme-color" content="#ffffff" />
- <link rel="icon" href="/favicon.ico" />
+ <link rel="icon" href="/crane.svg" sizes="360x360" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
<meta name="msapplication-TileColor" content="#FFFFFF" />
<link rel="mask-icon" href="/favicon.svg" color="#FFFFFF" />
diff --git a/pkg/web/package-lock.json b/pkg/web/package-lock.json
index b5b31622596272d913d959e6d38320301b037eb9..84cdfa55ee3d9c2b5aab912e507abad2e811ff3f 100644
--- a/pkg/web/package-lock.json
+++ b/pkg/web/package-lock.json
@@ -19,6 +19,7 @@
"i18next": "^21.6.6",
"i18next-browser-languagedetector": "^6.1.3",
"i18next-icu": "^2.0.3",
+ "intl-messageformat": "^9.11.1",
"lodash": "^4.17.21",
"mockjs": "^1.1.0",
"qrcode.react": "^3.0.2",
@@ -1995,7 +1996,6 @@
"version": "1.11.4",
"resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
"integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
- "peer": true,
"dependencies": {
"@formatjs/intl-localematcher": "0.2.25",
"tslib": "^2.1.0"
@@ -2005,7 +2005,6 @@
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
"integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
- "peer": true,
"dependencies": {
"tslib": "^2.1.0"
}
@@ -2014,7 +2013,6 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz",
"integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==",
- "peer": true,
"dependencies": {
"@formatjs/ecma402-abstract": "1.11.4",
"@formatjs/icu-skeleton-parser": "1.3.6",
@@ -2025,7 +2023,6 @@
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
"integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
- "peer": true,
"dependencies": {
"@formatjs/ecma402-abstract": "1.11.4",
"tslib": "^2.1.0"
@@ -2035,7 +2032,6 @@
"version": "0.2.25",
"resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
"integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
- "peer": true,
"dependencies": {
"tslib": "^2.1.0"
}
@@ -5998,7 +5994,6 @@
"version": "9.13.0",
"resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz",
"integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==",
- "peer": true,
"dependencies": {
"@formatjs/ecma402-abstract": "1.11.4",
"@formatjs/fast-memoize": "1.2.1",
@@ -10181,7 +10176,6 @@
"version": "1.11.4",
"resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
"integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
- "peer": true,
"requires": {
"@formatjs/intl-localematcher": "0.2.25",
"tslib": "^2.1.0"
@@ -10191,7 +10185,6 @@
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
"integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
- "peer": true,
"requires": {
"tslib": "^2.1.0"
}
@@ -10200,7 +10193,6 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz",
"integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==",
- "peer": true,
"requires": {
"@formatjs/ecma402-abstract": "1.11.4",
"@formatjs/icu-skeleton-parser": "1.3.6",
@@ -10211,7 +10203,6 @@
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
"integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
- "peer": true,
"requires": {
"@formatjs/ecma402-abstract": "1.11.4",
"tslib": "^2.1.0"
@@ -10221,7 +10212,6 @@
"version": "0.2.25",
"resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
"integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
- "peer": true,
"requires": {
"tslib": "^2.1.0"
}
@@ -13108,7 +13098,6 @@
"version": "9.13.0",
"resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz",
"integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==",
- "peer": true,
"requires": {
"@formatjs/ecma402-abstract": "1.11.4",
"@formatjs/fast-memoize": "1.2.1",
diff --git a/pkg/web/public/crane.svg b/pkg/web/public/crane.svg
new file mode 100644
index 0000000000000000000000000000000000000000..577adbb9350dbd9d72da56e3dbbe9ff9ad0bec8d
--- /dev/null
+++ b/pkg/web/public/crane.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="鍥惧眰_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="306px" height="186px" viewBox="144.139 425.446 306 186" enable-background="new 144.139 425.446 306 186"
+ xml:space="preserve">
+<path fill="#58BDA6" d="M267.919,572.702c-0.372,5.728-4.972,10.091-10.27,9.743l-40.779-2.65c-5.3-0.347-9.293-5.269-8.923-10.991
+ l2.974-45.702c0.373-5.728,4.973-10.088,10.271-9.743l40.78,2.652c5.299,0.345,9.293,5.267,8.921,10.99L267.919,572.702z"/>
+<path fill="#EE7300" d="M355.802,528.969c-28.058-24.713-63.021-62.657-91.196-87.232c-1.938-1.69-5.604-3.409-7.457-2.647
+ c-1.938,0.795-3.404,4.46-3.778,7.058c-1.761,12.192-2.91,28.237-4.656,40.433c-0.437,3.041-1.971,6.067-3.571,8.762
+ c-2.041,3.435-0.873,12.792,2.958,15.723c3.085,2.357,4.303,5.096,1.854,7.834c-1.351,1.512-4.525,1.391-6.992,2.032
+ c2.374,2.482,5.765,2.633,9.24-0.084c3.808-2.979,2.631-7.084-4.054-14.46c4.628-3.659,5.886-7.839,2.424-13.33
+ c-1.104-1.75-0.191-4.886,0.068-7.356c1.027-9.761,2.094-23.278,3.315-33.019c0.292-2.324,1.237-4.564,2.349-8.479
+ c26.078,34.224,56.794,78.868,82.623,112.767c0.93-6.764-0.387-17.9-0.708-23.131c-0.193-3.154-5.785-8.536-7.861-11.352
+ c-3.039-4.109-6.746-7.742-9.644-11.94c-0.76-1.101-0.824-2.206,0.128-3.594c1.252-1.816,2.925,0.178,3.865,1.018
+ c9.287,8.277,25.465,24.596,31.02,35.665c0.248,0.495-1.506-11.808-0.865-10.746"/>
+<path d="M185.44,554.611v-4.04c0-2.692-0.57-4.727-1.712-6.104c-1.145-1.375-2.634-2.062-4.475-2.062
+ c-3.021-0.056-5.026,0.505-6.021,1.686c-0.994,1.179-1.49,2.806-1.49,4.881l-0.11,31.229c0,1.796,0.515,3.188,1.548,4.166
+ c1.028,0.982,2.834,1.476,5.412,1.476c1.618,0,2.908-0.295,3.866-0.883c0.957-0.593,1.692-1.334,2.21-2.231
+ c0.515-0.896,0.828-1.88,0.938-2.946c0.11-1.064,0.166-2.076,0.166-3.028v-5.726h19.442v7.744c0,2.693-0.534,5.176-1.603,7.449
+ c-1.067,2.271-2.727,4.224-4.972,5.85c-2.247,1.629-5.156,2.894-8.729,3.788c-3.573,0.897-7.826,1.347-12.761,1.347
+ c-4.493,0-8.305-0.447-11.435-1.347c-3.132-0.896-5.688-2.201-7.679-3.914c-1.988-1.71-3.442-3.813-4.363-6.312
+ c-0.922-2.497-1.382-5.349-1.382-8.545v-25.929c0-6.899,2.117-11.979,6.354-15.233c4.232-3.254,10.808-4.883,19.72-4.883
+ c4.124,0,7.823,0.353,11.104,1.054c3.275,0.702,6.058,1.782,8.341,3.239c2.282,1.461,4.033,3.354,5.248,5.684
+ s1.821,5.092,1.821,8.29v5.304H185.44V554.611z"/>
+<path fill="#FFFFFF" d="M231.8,574.649l-16.795-1.156l3.754-54.526l24.521,1.688c6.934,0.479,12.024,1.985,15.27,4.521
+ c3.243,2.536,4.682,6.521,4.308,11.945c-0.2,2.909-0.979,5.362-2.329,7.364c-1.354,2.001-3.818,3.488-7.4,4.457l-0.009,0.146
+ c2.324,0.553,4.212,1.483,5.653,2.801c1.443,1.316,2.162,2.924,2.161,4.824c0.049,1.125,0.066,2.486,0.052,4.094
+ c-0.013,1.604-0.028,3.235-0.047,4.892c-0.019,1.655-0.018,3.236,0.007,4.749c0.023,1.514,0.135,2.712,0.329,3.603
+ c0.389,0.854,0.887,1.521,1.49,2.002l-0.051,0.729l-18.317-1.261c-0.219-0.552-0.392-1.086-0.515-1.608
+ c-0.125-0.518-0.199-1.046-0.228-1.586c0.039-2.43,0.165-4.724,0.379-6.877c0.211-2.148,0.247-4.084,0.11-5.799
+ c-0.139-1.712-0.569-3.105-1.294-4.18c-0.726-1.074-2.071-1.726-4.036-1.958l-5.533-0.381L231.8,574.649z M233.957,543.314
+ l5.726,0.396c1.208,0.081,2.222-0.041,3.045-0.375c0.821-0.334,1.479-0.801,1.966-1.399s0.842-1.305,1.058-2.118
+ c0.216-0.812,0.354-1.631,0.409-2.455c0.108-1.6-0.026-2.875-0.409-3.827c-0.38-0.949-1.034-1.679-1.958-2.18
+ c-0.923-0.501-2.132-0.842-3.62-1.017c-1.49-0.177-3.255-0.311-5.294-0.401L233.957,543.314z"/>
+<path d="M265.164,595.689l18.116-63.132h23.423l18.006,63.132h-19.663l-2.762-12.291h-15.246l-2.318,12.291H265.164z
+ M294.992,544.005h-0.222l-5.634,28.282h11.269L294.992,544.005z"/>
+<path d="M352.709,556.745l-0.223,0.168l1.77,35.188h-18.448v-63.132h19.995l15.024,35.269h0.331l-1.88-35.269h18.45V592.1h-19.887
+ L352.709,556.745z"/>
+<path d="M397.406,595.689v-63.132h44.521v12.625H416.85V556.8h24.305v12.627H416.85v13.636h26.403v12.627L397.406,595.689
+ L397.406,595.689z"/>
+<circle fill="#FFFFFF" cx="344.901" cy="536.967" r="3.136"/>
+</svg>
diff --git a/pkg/web/src/components/common/SideMenu.tsx b/pkg/web/src/components/common/SideMenu.tsx
deleted file mode 100644
index 110d5b8924914391ad44c62645c7f50616b58b2b..0000000000000000000000000000000000000000
--- a/pkg/web/src/components/common/SideMenu.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Routes, useNavigate } from 'react-router-dom';
-import { Menu } from 'tdesign-react';
-
-import { useSideMenuSelection } from '../../hooks/useSideMenuSelection';
-import { RoutesEnum } from '../../routes/routeEnum';
-
-export const SideMenu: React.FC = () => {
- const { t } = useTranslation();
- const selection = useSideMenuSelection();
- const navigate = useNavigate();
-
- return (
- <Menu style={{ minHeight: '100%' }} theme="dark" value={selection}>
- <Menu.MenuItem
- value={RoutesEnum.OVERVIEW}
- onClick={() => {
- navigate(RoutesEnum.OVERVIEW);
- }}
- >
- {t('鎴愭湰姒傝')}
- </Menu.MenuItem>
- <Menu.MenuItem
- value={RoutesEnum.INSIGHT}
- onClick={() => {
- navigate(RoutesEnum.INSIGHT);
- }}
- >
- {t('鎴愭湰娲炲療')}
- </Menu.MenuItem>
- </Menu>
- );
-};
diff --git a/pkg/web/src/hooks/index.ts b/pkg/web/src/hooks/index.ts
index 72498879dcb66ea19bf0e3b56bf460d8ccbe7c73..da483481ec444022eec92def40b66078cc6b56d3 100644
--- a/pkg/web/src/hooks/index.ts
+++ b/pkg/web/src/hooks/index.ts
@@ -4,4 +4,3 @@ export * from './useGrafanaQueyStr';
export * from './useIsIntersecting';
export * from './useIsNeedSelectNamespace';
export * from './useIsValidPanel';
-export * from './useSideMenuSelection';
diff --git a/pkg/web/src/hooks/useSideMenuSelection.ts b/pkg/web/src/hooks/useSideMenuSelection.ts
deleted file mode 100644
index 31d411c2623987a001319fedde1463ef88c50a60..0000000000000000000000000000000000000000
--- a/pkg/web/src/hooks/useSideMenuSelection.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { matchPath, matchRoutes, useLocation, useRoutes } from 'react-router-dom';
-import { RoutesEnum } from 'router/routeEnum';
-
-export const useSideMenuSelection = () => {
- const { pathname } = useLocation();
-
- const isOverview = matchPath(`${RoutesEnum.OVERVIEW}/*`, pathname);
- const isInsight = matchPath(`${RoutesEnum.INSIGHT}/*`, pathname);
-
- if (isOverview) return RoutesEnum.OVERVIEW;
- if (isInsight) return RoutesEnum.INSIGHT;
- return null;
-};
diff --git a/pkg/web/src/pages/Dashboard/Base/chart.ts b/pkg/web/src/pages/Dashboard/Base/chart.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dfa9441c8b64fffec7ebcc0ad59300caadd9b716
--- /dev/null
+++ b/pkg/web/src/pages/Dashboard/Base/chart.ts
@@ -0,0 +1,261 @@
+import type { EChartOption } from 'echarts';
+import { getChartDataSet, ONE_WEEK_LIST } from 'utils/chart';
+
+export const getLineChartOptions = (dateTime: Array<string> = []): EChartOption => {
+ const [timeArray, inArray, outArray] = getChartDataSet(dateTime);
+ return {
+ tooltip: {
+ trigger: 'item',
+ },
+ grid: {
+ left: '0',
+ right: '20px',
+ top: '5px',
+ bottom: '36px',
+ containLabel: true,
+ },
+ legend: {
+ left: 'center',
+ bottom: '0',
+ orient: 'horizontal', // legend 妯悜甯冨眬銆�
+ data: ['鏈湀', '涓婃湀'],
+ textStyle: {
+ fontSize: 12,
+ },
+ },
+ xAxis: {
+ type: 'category',
+ data: timeArray,
+ boundaryGap: false,
+ axisLine: {
+ lineStyle: {
+ color: '#E3E6EB',
+ width: 1,
+ },
+ },
+ },
+ yAxis: {
+ type: 'value',
+ },
+ series: [
+ {
+ name: '鏈湀',
+ data: outArray,
+ type: 'line',
+ smooth: false,
+ showSymbol: true,
+ symbol: 'circle',
+ symbolSize: 8,
+ itemStyle: {
+ borderWidth: 1,
+ },
+ areaStyle: {
+ color: '#0053D92F',
+ },
+ },
+ {
+ name: '涓婃湀',
+ data: inArray,
+ type: 'line',
+ smooth: false,
+ showSymbol: true,
+ symbol: 'circle',
+ symbolSize: 8,
+ itemStyle: {
+ borderWidth: 1,
+ },
+ },
+ ],
+ };
+};
+
+export const getPieChartOptions = (radius = 42): EChartOption => ({
+ tooltip: {
+ trigger: 'item',
+ },
+ grid: {
+ top: '0',
+ right: '0',
+ },
+ legend: {
+ itemWidth: 12,
+ itemHeight: 4,
+ textStyle: {
+ fontSize: 12,
+ },
+ left: 'center',
+ bottom: '0',
+ orient: 'horizontal', // legend 妯悜甯冨眬銆�
+ },
+ series: [
+ {
+ name: '鍛藉悕绌洪棿鎴愭湰鍒嗗竷',
+ type: 'pie',
+ radius: ['48%', '60%'],
+ avoidLabelOverlap: false,
+ silent: true,
+ itemStyle: {
+ borderWidth: 1,
+ },
+ label: {
+ show: true,
+ position: 'center',
+ formatter: ['{value|{d}%}', '{name|{b}鍗犳瘮}'].join('\n'),
+ rich: {
+ value: {
+ fontSize: 28,
+ fontWeight: 'normal',
+ lineHeight: 46,
+ },
+ name: {
+ color: '#909399',
+ fontSize: 12,
+ lineHeight: 14,
+ },
+ },
+ },
+ labelLine: {
+ show: false,
+ },
+ data: [
+ { value: 1048, name: 'kube-system' },
+ { value: radius * 7, name: 'crane-system' },
+ ],
+ },
+ ],
+});
+
+export const getBarChartOptions = (dateTime: Array<string> = []): EChartOption => {
+ const [timeArray, inArray, outArray] = getChartDataSet(dateTime);
+ return {
+ tooltip: {
+ trigger: 'item',
+ },
+ xAxis: {
+ type: 'category',
+ data: timeArray,
+ axisLine: {
+ lineStyle: {
+ width: 1,
+ },
+ },
+ },
+ yAxis: {
+ type: 'value',
+ },
+ grid: {
+ top: '5%',
+ left: '25px',
+ right: 0,
+ bottom: '60px',
+ },
+ legend: {
+ icon: 'rect',
+ itemWidth: 12,
+ itemHeight: 4,
+ itemGap: 48,
+ textStyle: {
+ fontSize: 12,
+ color: 'rgba(0, 0, 0, 0.6)',
+ },
+ left: 'center',
+ bottom: '0',
+ orient: 'horizontal',
+ data: ['鏈湀', '涓婃湀'],
+ },
+ series: [
+ {
+ name: '鏈湀',
+ data: outArray,
+ type: 'bar',
+ },
+ {
+ name: '涓婃湀',
+ data: inArray,
+ type: 'bar',
+ },
+ ],
+ };
+};
+
+// PieChartIcon Data
+export const MICRO_CHART_OPTIONS_LINE: EChartOption = {
+ xAxis: {
+ type: 'category',
+ show: false,
+ data: ONE_WEEK_LIST,
+ },
+ yAxis: {
+ show: false,
+ type: 'value',
+ },
+ grid: {
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ tooltip: {
+ show: false,
+ },
+ },
+ color: ['#fff'],
+ series: [
+ {
+ data: [150, 230, 224, 218, 135, 147, 260],
+ type: 'line',
+ showSymbol: false,
+ },
+ ],
+};
+
+// BarChartIcon Data
+export const MICRO_CHART_OPTIONS_BAR: EChartOption = {
+ xAxis: {
+ type: 'category',
+ show: false,
+ data: ONE_WEEK_LIST,
+ },
+ yAxis: {
+ show: false,
+ type: 'value',
+ },
+ grid: {
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ tooltip: {
+ show: false,
+ },
+ },
+ series: [
+ {
+ data: [
+ 100,
+ 130,
+ 184,
+ 218,
+ {
+ value: 135,
+ itemStyle: {
+ opacity: 0.2,
+ },
+ },
+ {
+ value: 118,
+ itemStyle: {
+ opacity: 0.2,
+ },
+ },
+ {
+ value: 60,
+ itemStyle: {
+ opacity: 0.2,
+ },
+ },
+ ],
+ type: 'bar',
+ barWidth: 9,
+ },
+ ],
+};
diff --git a/pkg/web/src/pages/Dashboard/Base/components/CpuChart.module.less b/pkg/web/src/pages/Dashboard/Base/components/CpuChart.module.less
new file mode 100644
index 0000000000000000000000000000000000000000..4aae1b0c782a93f9bc2cc2673522b1a0d3ba1b52
--- /dev/null
+++ b/pkg/web/src/pages/Dashboard/Base/components/CpuChart.module.less
@@ -0,0 +1,3 @@
+.cpuChartPanel {
+ margin-top: 16px;
+}
diff --git a/pkg/web/src/pages/Dashboard/Base/components/CpuChart.tsx b/pkg/web/src/pages/Dashboard/Base/components/CpuChart.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2503da6df4d8be2bf8a77402a90b921e66d5ab91
--- /dev/null
+++ b/pkg/web/src/pages/Dashboard/Base/components/CpuChart.tsx
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { Col, Row, Card } from 'tdesign-react';
+import ReactEcharts from 'echarts-for-react';
+import useDynamicChart from 'hooks/useDynamicChart';
+import LastWeekDatePicker from 'components/DatePicker';
+import { getLineChartOptions } from '../chart';
+import Style from './CpuChart.module.less';
+
+const lineOptions = getLineChartOptions();
+
+const CpuChart = () => {
+ const [customOptions, setCustomOptions] = useState(lineOptions);
+
+ const onTimeChange = (value: Array<string>) => {
+ const options = getLineChartOptions(value);
+ setCustomOptions(options);
+ };
+
+ const dynamicLineChartOption = useDynamicChart(customOptions, {
+ placeholderColor: ['legend.textStyle.color', 'xAxis.axisLabel.color', 'yAxis.axisLabel.color'],
+ borderColor: ['series.0.itemStyle.borderColor', 'series.1.itemStyle.borderColor'],
+ });
+
+ return (
+ <Row gutter={[16, 16]} className={Style.cpuChartPanel}>
+ <Col span={12}>
+ <Card title='CPU 璧勬簮浣跨敤' actions={LastWeekDatePicker(onTimeChange)}>
+ <ReactEcharts option={dynamicLineChartOption} notMerge={true} lazyUpdate={false} />
+ </Card>
+ </Col>
+ </Row>
+ );
+};
+
+export default React.memo(CpuChart);
diff --git a/pkg/web/src/pages/Dashboard/Base/components/MemoryChart.module.less b/pkg/web/src/pages/Dashboard/Base/components/MemoryChart.module.less
new file mode 100644
index 0000000000000000000000000000000000000000..5082dfbaca7a31d958acf4c019c5ba4ad26f4679
--- /dev/null
+++ b/pkg/web/src/pages/Dashboard/Base/components/MemoryChart.module.less
@@ -0,0 +1,3 @@
+.memoryChartPanel {
+ margin-top: 16px;
+}
diff --git a/pkg/web/src/pages/Dashboard/Base/components/MemoryChart.tsx b/pkg/web/src/pages/Dashboard/Base/components/MemoryChart.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8bc925cc817fcc28b835ce01ee0a10f60c47f1fd
--- /dev/null
+++ b/pkg/web/src/pages/Dashboard/Base/components/MemoryChart.tsx
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { Col, Row, Card } from 'tdesign-react';
+import ReactEcharts from 'echarts-for-react';
+import useDynamicChart from 'hooks/useDynamicChart';
+import LastWeekDatePicker from 'components/DatePicker';
+import { getLineChartOptions } from '../chart';
+import Style from './MemoryChart.module.less';
+
+const lineOptions = getLineChartOptions();
+
+const MemoryChart = () => {
+ const [customOptions, setCustomOptions] = useState(lineOptions);
+
+ const onTimeChange = (value: Array<string>) => {
+ const options = getLineChartOptions(value);
+ setCustomOptions(options);
+ };
+
+ const dynamicLineChartOption = useDynamicChart(customOptions, {
+ placeholderColor: ['legend.textStyle.color', 'xAxis.axisLabel.color', 'yAxis.axisLabel.color'],
+ borderColor: ['series.0.itemStyle.borderColor', 'series.1.itemStyle.borderColor'],
+ });
+
+ return (
+ <Row gutter={[16, 16]} className={Style.cpuChartPanel}>
+ <Col span={12}>
+ <Card title='Memory 璧勬簮浣跨敤' actions={LastWeekDatePicker(onTimeChange)}>
+ <ReactEcharts option={dynamicLineChartOption} notMerge={true} lazyUpdate={false} />
+ </Card>
+ </Col>
+ </Row>
+ );
+};
+
+export default React.memo(MemoryChart);
diff --git a/pkg/web/src/pages/Dashboard/Base/components/MiddleChart.module.less b/pkg/web/src/pages/Dashboard/Base/components/MiddleChart.module.less
new file mode 100644
index 0000000000000000000000000000000000000000..0c8afcdc2fef1002dd549588d98d020ca6edd766
--- /dev/null
+++ b/pkg/web/src/pages/Dashboard/Base/components/MiddleChart.module.less
@@ -0,0 +1,3 @@
+.middleChartPanel {
+ margin-top: 16px;
+}
diff --git a/pkg/web/src/pages/Dashboard/Base/components/MiddleChart.tsx b/pkg/web/src/pages/Dashboard/Base/components/MiddleChart.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..872bb228fd00048d810dcafc42d2c47f598d5f06
--- /dev/null
+++ b/pkg/web/src/pages/Dashboard/Base/components/MiddleChart.tsx
@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { Col, Row, Card } from 'tdesign-react';
+import ReactEcharts from 'echarts-for-react';
+import useDynamicChart from 'hooks/useDynamicChart';
+import LastWeekDatePicker from 'components/DatePicker';
+import { getLineChartOptions, getPieChartOptions } from '../chart';
+import Style from './MiddleChart.module.less';
+
+const lineOptions = getLineChartOptions();
+const pieOptions = getPieChartOptions();
+
+const MiddleChart = () => {
+ const [customOptions, setCustomOptions] = useState(lineOptions);
+
+ const onTimeChange = (value: Array<string>) => {
+ const options = getLineChartOptions(value);
+ setCustomOptions(options);
+ };
+
+ const dynamicLineChartOption = useDynamicChart(customOptions, {
+ placeholderColor: ['legend.textStyle.color', 'xAxis.axisLabel.color', 'yAxis.axisLabel.color'],
+ borderColor: ['series.0.itemStyle.borderColor', 'series.1.itemStyle.borderColor'],
+ });
+
+ const dynamicPieChartOption = useDynamicChart(pieOptions, {
+ placeholderColor: ['legend.textStyle.color'],
+ containerColor: ['series.0.itemStyle.borderColor'],
+ textColor: ['label.color', 'label.color'],
+ });
+
+ return (
+ <Row gutter={[16, 16]} className={Style.middleChartPanel}>
+ <Col xs={12} xl={9}>
+ <Card title='鎴愭湰璧板娍' subtitle='(鍏�)' actions={LastWeekDatePicker(onTimeChange)}>
+ <ReactEcharts option={dynamicLineChartOption} notMerge={true} lazyUpdate={false} />
+ </Card>
+ </Col>
+ <Col xs={12} xl={3}>
+ <Card title='鍛藉悕绌洪棿鎴愭湰鍒嗗竷' subtitle='2021-12'>
+ <ReactEcharts option={dynamicPieChartOption} notMerge={true} lazyUpdate={true} />
+ </Card>
+ </Col>
+ </Row>
+ );
+};
+
+export default React.memo(MiddleChart);
diff --git a/pkg/web/src/pages/Dashboard/Base/components/TopPanel.tsx b/pkg/web/src/pages/Dashboard/Base/components/TopPanel.tsx
index 29838cd5448398a3f0341d99c661b7d4e6dc607a..54bdef4368c8e4c5dc6fa36f1dc9dd54b3ef13b9 100644
--- a/pkg/web/src/pages/Dashboard/Base/components/TopPanel.tsx
+++ b/pkg/web/src/pages/Dashboard/Base/components/TopPanel.tsx
@@ -4,7 +4,7 @@ import Board, { ETrend, IBoardProps, TimeType } from 'components/BoardChart';
const PANE_LIST: Array<IBoardProps> = [
{
- title: 'Nodes Monthly Estimated Costs',
+ title: '褰撴湀鎬绘垚鏈�',
countPrefix: '楼 ',
trend: ETrend.up,
trendNum: '20.5%',
@@ -20,7 +20,7 @@ by (node)) * 730 * (100/100.0)`,
timeType: TimeType.Range,
},
{
- title: 'Total Requests Monthly Estimated Costs',
+ title: '棰勬祴姣忔湀鎬绘垚鏈�',
countPrefix: '楼 ',
trend: ETrend.up,
trendNum: '20.5%',
@@ -49,32 +49,7 @@ sum(
timeType: TimeType.Range,
},
{
- title: 'Total Usage Monthly Estimated Costs',
- countPrefix: '楼 ',
- trend: ETrend.up,
- trendNum: '20.5%',
- // Icon: <PieChartIcon />,
- query: `sum (
- sum(label_replace(irate(container_cpu_usage_seconds_total{container!="POD", container!="",image!=""}[1h]), "node", "$1", "instance", "(.*)")) by (container, pod, node, namespace)
- * on (node) group_left()
- avg(
- avg_over_time(node_cpu_hourly_cost[1h]) * on (node) group_left() max(kube_node_labels{label_beta_kubernetes_io_instance_type!~"eklet",label_node_kubernetes_io_instance_type!~"eklet"}
- ) by (node)
- ) by (node)
-
-+
-
- sum(label_replace(avg_over_time(container_memory_working_set_bytes{container!="POD",container!="",image!=""}[1h]), "node", "$1", "instance", "(.*)")) by (container, pod, node, namespace) / 1024.0 / 1024.0 / 1024.0
- * on (node) group_left()
- avg(
- avg_over_time(node_ram_hourly_cost[1h]) * on (node) group_left() max(kube_node_labels{label_beta_kubernetes_io_instance_type!~"eklet", label_node_kubernetes_io_instance_type!~"eklet"}
- ) by (node)
- ) by (node)
-) * 730 * (100./100.)`,
- timeType: TimeType.Range,
- },
- {
- title: 'Cpu Requests Monthly Estimated Costs',
+ title: '褰撴湀CPU鎬绘垚鏈�',
query: `sum(
sum(kube_pod_container_resource_requests{resource="cpu", unit="core"}) by (container, pod, node, namespace)
* on (node) group_left()
@@ -89,41 +64,13 @@ sum(
timeType: TimeType.Range,
},
{
- title: 'Cpu Usage Monthly Estimated Costs',
- query: `sum(
- sum(label_replace(irate(container_cpu_usage_seconds_total{container!="POD", container!="",image!=""}[1h]), "node", "$1", "instance", "(.*)")) by (container, pod, node, namespace) * on (node) group_left()
- avg(
- avg_over_time(node_cpu_hourly_cost[1h]) * on (node) group_left() max(kube_node_labels{label_beta_kubernetes_io_instance_type!~"eklet", label_node_kubernetes_io_instance_type!~"eklet"}
- ) by (node)
- ) by (node)
-) * 730 * (100./100.)`,
- countPrefix: '楼 ',
- trend: ETrend.down,
- trendNum: '20.5%',
- timeType: TimeType.Range,
- },
- {
- title: 'Ram Requests Monthly Estimated Costs',
+ title: '褰撴湀Memory鎬绘垚鏈�',
query: `sum(
sum(kube_pod_container_resource_requests{resource="memory", unit="byte", namespace!=""} / 1024./ 1024. / 1024.) by (container, pod, node, namespace) * on (node) group_left()
avg(
avg_over_time(node_ram_hourly_cost[1h]) * on (node) group_left() max(kube_node_labels{label_beta_kubernetes_io_instance_type!~"eklet", label_node_kubernetes_io_instance_type!~"eklet"}
) by (node)
) by (node)
-) * 730 * (100./100.)`,
- countPrefix: '楼 ',
- trend: ETrend.down,
- trendNum: '20.5%',
- timeType: TimeType.Range,
- },
- {
- title: 'Ram Usage Monthly Estimated Costs',
- query: `sum(
- sum(label_replace(avg_over_time(container_memory_working_set_bytes{container!="POD",container!="",image!=""}[1h]), "node", "$1", "instance", "(.*)")) by (container, pod, node, namespace) / 1024.0 / 1024.0 / 1024.0 * on (node) group_left()
- avg(
- avg_over_time(node_ram_hourly_cost[1h]) * on (node) group_left() max(kube_node_labels{label_beta_kubernetes_io_instance_type!~"eklet", label_node_kubernetes_io_instance_type!~"eklet"}
- ) by (node)
- ) by (node)
) * 730 * (100./100.)`,
countPrefix: '楼 ',
trend: ETrend.down,
diff --git a/pkg/web/src/pages/Dashboard/Base/constant.ts b/pkg/web/src/pages/Dashboard/Base/constant.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cd7dc6a95f52838a85525618ae80de9903374369
--- /dev/null
+++ b/pkg/web/src/pages/Dashboard/Base/constant.ts
@@ -0,0 +1,77 @@
+export const SALE_TREND_LIST = [
+ {
+ growUp: 1,
+ productName: '鍥藉鐢电綉鏈夐檺鍏徃',
+ count: 7059,
+ date: '2021-09-01',
+ },
+ {
+ growUp: -1,
+ productName: '娣卞湷鐕冩皵闆嗗洟鑲′唤鏈夐檺鍏徃',
+ count: 6437,
+ date: '2021-09-01',
+ },
+ {
+ growUp: 4,
+ productName: '鍥藉鐑熻崏涓撳崠灞€',
+ count: 4221,
+ date: '2021-09-01',
+ },
+ {
+ growUp: 3,
+ productName: '涓浗鐢典俊闆嗗洟鏈夐檺鍏徃',
+ count: 3317,
+ date: '2021-09-01',
+ },
+ {
+ growUp: -3,
+ productName: '涓浗绉诲姩閫氫俊闆嗗洟鏈夐檺鍏徃',
+ count: 3015,
+ date: '2021-09-01',
+ },
+ {
+ growUp: -3,
+ productName: '鏂颁綑甯傚姙鍏敤鎴烽噰璐」鐩�',
+ count: 2015,
+ date: '2021-09-12',
+ },
+];
+
+export const PURCHASE_TREND_LIST = [
+ {
+ growUp: 1,
+ productName: '鑵捐绉戞妧锛堟繁鍦筹級鏈夐檺鍏徃',
+ count: 3015,
+ date: '2021-09-01',
+ },
+ {
+ growUp: -1,
+ productName: '澶ф鼎鍙戞湁闄愬叕鍙�',
+ count: 2015,
+ date: '2021-09-01',
+ },
+ {
+ growUp: 6,
+ productName: '鍥涘窛娴峰簳鎹炶偂浠芥湁闄愬叕鍙�',
+ count: 1815,
+ date: '2021-09-11',
+ },
+ {
+ growUp: -3,
+ productName: '绱㈠凹锛堜腑鍥斤級鏈夐檺鍏徃',
+ count: 1015,
+ date: '2021-09-21',
+ },
+ {
+ growUp: -4,
+ productName: '鏉句笅鐢靛櫒锛堜腑鍥斤級鏈夐檺鍏徃',
+ count: 445,
+ date: '2021-09-19',
+ },
+ {
+ growUp: -3,
+ productName: '鏂颁綑甯傚姙鍏敤鎴烽噰璐」鐩�',
+ count: 2015,
+ date: '2021-09-12',
+ },
+];
diff --git a/pkg/web/src/pages/Dashboard/Base/index.tsx b/pkg/web/src/pages/Dashboard/Base/index.tsx
index 986b7d8ac03acde6ec863bc008cee259dd0e1c86..3b666c4a6c9167152edd4b243174c384caac693f 100644
--- a/pkg/web/src/pages/Dashboard/Base/index.tsx
+++ b/pkg/web/src/pages/Dashboard/Base/index.tsx
@@ -1,9 +1,15 @@
import React, { memo } from 'react';
import TopPanel from './components/TopPanel';
+import MiddleChart from "./components/MiddleChart";
+import CpuChart from "./components/CpuChart";
+import MemoryChart from "./components/MemoryChart";
const DashBoard = () => (
<div style={{ overflowX: 'hidden' }}>
<TopPanel />
+ <MiddleChart />
+ <CpuChart />
+ <MemoryChart />
</div>
);
diff --git a/pkg/web/src/pages/WorkloadOptimize/RecommendationRule/components/SearchForm.tsx b/pkg/web/src/pages/Recommend/RecommendationRule/components/SearchForm.tsx
similarity index 100%
rename from pkg/web/src/pages/WorkloadOptimize/RecommendationRule/components/SearchForm.tsx
rename to pkg/web/src/pages/Recommend/RecommendationRule/components/SearchForm.tsx
diff --git a/pkg/web/src/pages/WorkloadOptimize/RecommendationRule/consts.ts b/pkg/web/src/pages/Recommend/RecommendationRule/consts.ts
similarity index 100%
rename from pkg/web/src/pages/WorkloadOptimize/RecommendationRule/consts.ts
rename to pkg/web/src/pages/Recommend/RecommendationRule/consts.ts
diff --git a/pkg/web/src/pages/WorkloadOptimize/RecommendationRule/index.module.less b/pkg/web/src/pages/Recommend/RecommendationRule/index.module.less
similarity index 100%
rename from pkg/web/src/pages/WorkloadOptimize/RecommendationRule/index.module.less
rename to pkg/web/src/pages/Recommend/RecommendationRule/index.module.less
diff --git a/pkg/web/src/pages/WorkloadOptimize/RecommendationRule/index.tsx b/pkg/web/src/pages/Recommend/RecommendationRule/index.tsx
similarity index 100%
rename from pkg/web/src/pages/WorkloadOptimize/RecommendationRule/index.tsx
rename to pkg/web/src/pages/Recommend/RecommendationRule/index.tsx
diff --git a/pkg/web/src/pages/WorkloadOptimize/ReplicaRecommend/components/SearchForm.tsx b/pkg/web/src/pages/Recommend/ReplicaRecommend/components/SearchForm.tsx
similarity index 100%
rename from pkg/web/src/pages/WorkloadOptimize/ReplicaRecommend/components/SearchForm.tsx
rename to pkg/web/src/pages/Recommend/ReplicaRecommend/components/SearchForm.tsx
diff --git a/pkg/web/src/pages/WorkloadOptimize/ReplicaRecommend/consts.ts b/pkg/web/src/pages/Recommend/ReplicaRecommend/consts.ts
similarity index 100%
rename from pkg/web/src/pages/WorkloadOptimize/ReplicaRecommend/consts.ts
rename to pkg/web/src/pages/Recommend/ReplicaRecommend/consts.ts
diff --git a/pkg/web/src/pages/WorkloadOptimize/ReplicaRecommend/index.module.less b/pkg/web/src/pages/Recommend/ReplicaRecommend/index.module.less
similarity index 100%
rename from pkg/web/src/pages/WorkloadOptimize/ReplicaRecommend/index.module.less
rename to pkg/web/src/pages/Recommend/ReplicaRecommend/index.module.less
diff --git a/pkg/web/src/pages/WorkloadOptimize/ReplicaRecommend/index.tsx b/pkg/web/src/pages/Recommend/ReplicaRecommend/index.tsx
similarity index 97%
rename from pkg/web/src/pages/WorkloadOptimize/ReplicaRecommend/index.tsx
rename to pkg/web/src/pages/Recommend/ReplicaRecommend/index.tsx
index ab60303ca5174e2f5824924001cb475f548a5d1d..cf030cfcbc2ebf49d68e472de635c43277263441 100644
--- a/pkg/web/src/pages/WorkloadOptimize/ReplicaRecommend/index.tsx
+++ b/pkg/web/src/pages/Recommend/ReplicaRecommend/index.tsx
@@ -41,7 +41,7 @@ export const SelectTable = () => {
return (
<>
<Row>
- <Button onClick={() => navigate('/workload-optimize/recommendationRule')}>鏂板缓鎺ㄨ崘瑙勫垯</Button>
+ <Button onClick={() => navigate('/recommend/recommendationRule')}>绠＄悊鎺ㄨ崘瑙勫垯</Button>
</Row>
<Divider></Divider>
<Row justify='start' style={{ marginBottom: '20px' }}>
diff --git a/pkg/web/src/pages/WorkloadOptimize/ResourcesRecommend/components/SearchForm.tsx b/pkg/web/src/pages/Recommend/ResourcesRecommend/components/SearchForm.tsx
similarity index 100%
rename from pkg/web/src/pages/WorkloadOptimize/ResourcesRecommend/components/SearchForm.tsx
rename to pkg/web/src/pages/Recommend/ResourcesRecommend/components/SearchForm.tsx
diff --git a/pkg/web/src/pages/WorkloadOptimize/ResourcesRecommend/consts.ts b/pkg/web/src/pages/Recommend/ResourcesRecommend/consts.ts
similarity index 100%
rename from pkg/web/src/pages/WorkloadOptimize/ResourcesRecommend/consts.ts
rename to pkg/web/src/pages/Recommend/ResourcesRecommend/consts.ts
diff --git a/pkg/web/src/pages/WorkloadOptimize/ResourcesRecommend/index.module.less b/pkg/web/src/pages/Recommend/ResourcesRecommend/index.module.less
similarity index 100%
rename from pkg/web/src/pages/WorkloadOptimize/ResourcesRecommend/index.module.less
rename to pkg/web/src/pages/Recommend/ResourcesRecommend/index.module.less
diff --git a/pkg/web/src/pages/WorkloadOptimize/ResourcesRecommend/index.tsx b/pkg/web/src/pages/Recommend/ResourcesRecommend/index.tsx
similarity index 98%
rename from pkg/web/src/pages/WorkloadOptimize/ResourcesRecommend/index.tsx
rename to pkg/web/src/pages/Recommend/ResourcesRecommend/index.tsx
index 2288e1594eae13364414b64d1b702c5abdb25fe2..0416dbc736e6cdb85c761fa47f9342e7b61b749d 100644
--- a/pkg/web/src/pages/WorkloadOptimize/ResourcesRecommend/index.tsx
+++ b/pkg/web/src/pages/Recommend/ResourcesRecommend/index.tsx
@@ -40,7 +40,7 @@ export const SelectTable = () => {
return (
<>
<Row>
- <Button onClick={() => navigate('/workload-optimize/recommendationRule')}>鏂板缓鎺ㄨ崘瑙勫垯</Button>
+ <Button onClick={() => navigate('/recommend/recommendationRule')}>绠＄悊鎺ㄨ崘瑙勫垯</Button>
</Row>
<Divider></Divider>
<Row justify='start' style={{ marginBottom: '20px' }}>
diff --git a/pkg/web/src/pages/Manager/cluster/EditClusterModal.tsx b/pkg/web/src/pages/Settings/cluster/EditClusterModal.tsx
similarity index 100%
rename from pkg/web/src/pages/Manager/cluster/EditClusterModal.tsx
rename to pkg/web/src/pages/Settings/cluster/EditClusterModal.tsx
diff --git a/pkg/web/src/pages/Manager/cluster/OverviewActionPanel.tsx b/pkg/web/src/pages/Settings/cluster/OverviewActionPanel.tsx
similarity index 100%
rename from pkg/web/src/pages/Manager/cluster/OverviewActionPanel.tsx
rename to pkg/web/src/pages/Settings/cluster/OverviewActionPanel.tsx
diff --git a/pkg/web/src/pages/Manager/cluster/OverviewPanel.tsx b/pkg/web/src/pages/Settings/cluster/OverviewPanel.tsx
similarity index 100%
rename from pkg/web/src/pages/Manager/cluster/OverviewPanel.tsx
rename to pkg/web/src/pages/Settings/cluster/OverviewPanel.tsx
diff --git a/pkg/web/src/pages/Manager/cluster/OverviewTablePanel.tsx b/pkg/web/src/pages/Settings/cluster/OverviewTablePanel.tsx
similarity index 100%
rename from pkg/web/src/pages/Manager/cluster/OverviewTablePanel.tsx
rename to pkg/web/src/pages/Settings/cluster/OverviewTablePanel.tsx
diff --git a/pkg/web/src/router/index.ts b/pkg/web/src/router/index.ts
index f3412c85f5161fd9b1a440803b4dfa9ea7f3973a..3f30e6883ba40a0e211a20c8322e45364a5b0fc2 100644
--- a/pkg/web/src/router/index.ts
+++ b/pkg/web/src/router/index.ts
@@ -1,8 +1,8 @@
import cost from './modules/cost';
import dashboard from './modules/dashboard';
-import manager from './modules/manager';
+import settings from './modules/settings';
import otherRoutes from './modules/others';
-import workloadOptimize from './modules/workload-optimize';
+import recommend from './modules/recommend';
import React from 'react';
import { BrowserRouterProps } from 'react-router-dom';
@@ -39,6 +39,6 @@ const routes: IRouter[] = [
},
];
-const allRoutes = [...routes, ...dashboard, ...cost, ...workloadOptimize, ...manager, ...otherRoutes];
+const allRoutes = [...routes, ...dashboard, ...cost, ...recommend, ...settings, ...otherRoutes];
export default allRoutes;
diff --git a/pkg/web/src/router/modules/cost.ts b/pkg/web/src/router/modules/cost.ts
index 99fda61b6070f9fd1586d931d5c194428030e4f8..4e3df701c1d4ee483bd35c5207adbe8ebaa6bb72 100644
--- a/pkg/web/src/router/modules/cost.ts
+++ b/pkg/web/src/router/modules/cost.ts
@@ -1,20 +1,20 @@
import { IRouter } from '../index';
import { lazy } from 'react';
-import { WalletIcon } from 'tdesign-icons-react';
+import { ChartIcon } from 'tdesign-icons-react';
const cost: IRouter[] = [
{
path: '/cost',
meta: {
- title: '鎴愭湰澶у笀',
- Icon: WalletIcon,
+ title: '鎴愭湰娲炲療',
+ Icon: ChartIcon,
},
children: [
{
path: 'insight',
Component: lazy(() => import('pages/Cost/insight/InsightPanel')),
meta: {
- title: '鎴愭湰娲炲療',
+ title: 'Grafana 鍥捐〃',
},
},
],
diff --git a/pkg/web/src/router/modules/dashboard.ts b/pkg/web/src/router/modules/dashboard.ts
index 20fe8cbbb9aa78981f4d3383591229620e6e1def..8d5807b1c9ae6b316528152b732d4576ae5e15b4 100644
--- a/pkg/web/src/router/modules/dashboard.ts
+++ b/pkg/web/src/router/modules/dashboard.ts
@@ -6,18 +6,10 @@ const dashboard: IRouter[] = [
{
path: '/dashboard',
meta: {
- title: '缁熻鎶ヨ〃',
+ title: '闆嗙兢鎬昏',
Icon: DashboardIcon,
},
- children: [
- {
- path: 'base',
- Component: lazy(() => import('pages/Dashboard/Base')),
- meta: {
- title: '姒傝浠〃鐩�',
- },
- },
- ],
+ Component: lazy(() => import('pages/Dashboard/Base')),
},
];
diff --git a/pkg/web/src/router/modules/recommend.ts b/pkg/web/src/router/modules/recommend.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b29a9037fd97843860e7fc184af8a8d6204f107
--- /dev/null
+++ b/pkg/web/src/router/modules/recommend.ts
@@ -0,0 +1,38 @@
+import { IRouter } from '../index';
+import { lazy } from 'react';
+import { ScanIcon } from 'tdesign-icons-react';
+
+const recommend: IRouter[] = [
+ {
+ path: '/recommend',
+ meta: {
+ title: '鎴愭湰鍒嗘瀽',
+ Icon: ScanIcon,
+ },
+ children: [
+ {
+ path: 'recommendationRule',
+ Component: lazy(() => import('pages/Recommend/RecommendationRule')),
+ meta: {
+ title: '鎺ㄨ崘瑙勫垯',
+ },
+ },
+ {
+ path: 'resourcesRecommend',
+ Component: lazy(() => import('pages/Recommend/ResourcesRecommend')),
+ meta: {
+ title: '璧勬簮鎺ㄨ崘',
+ },
+ },
+ {
+ path: 'replicaRecommend',
+ Component: lazy(() => import('pages/Recommend/ReplicaRecommend')),
+ meta: {
+ title: '鍓湰鏁版帹鑽�',
+ },
+ },
+ ],
+ },
+];
+
+export default recommend;
diff --git a/pkg/web/src/router/modules/manager.ts b/pkg/web/src/router/modules/settings.ts
similarity index 62%
rename from pkg/web/src/router/modules/manager.ts
rename to pkg/web/src/router/modules/settings.ts
index f355fca87b7265e0b3916d78a44133330aac52e9..152b97837308f9889f6272e84768926b5b68acbe 100644
--- a/pkg/web/src/router/modules/manager.ts
+++ b/pkg/web/src/router/modules/settings.ts
@@ -2,17 +2,17 @@ import { IRouter } from '../index';
import { lazy } from 'react';
import { SettingIcon } from 'tdesign-icons-react';
-const manager: IRouter[] = [
+const settings: IRouter[] = [
{
- path: '/manager',
+ path: '/settings',
meta: {
- title: '绠＄悊涓績',
+ title: '璁剧疆',
Icon: SettingIcon,
},
children: [
{
path: 'cluster',
- Component: lazy(() => import('pages/Manager/cluster/OverviewPanel')),
+ Component: lazy(() => import('pages/Settings/cluster/OverviewPanel')),
meta: {
title: '闆嗙兢绠＄悊',
},
@@ -21,4 +21,4 @@ const manager: IRouter[] = [
},
];
-export default manager;
+export default settings;
diff --git a/pkg/web/src/router/modules/workload-optimize.ts b/pkg/web/src/router/modules/workload-optimize.ts
deleted file mode 100644
index 76cadbfee9616df042368d3d0fde8cea65033ab9..0000000000000000000000000000000000000000
--- a/pkg/web/src/router/modules/workload-optimize.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { IRouter } from '../index';
-import { lazy } from 'react';
-import { AppIcon, SettingIcon } from 'tdesign-icons-react';
-
-const workloadOptimize: IRouter[] = [
- {
- path: '/workload-optimize',
- meta: {
- title: '宸ヤ綔璐熻浇浼樺寲',
- Icon: AppIcon,
- },
- children: [
- {
- path: 'recommendationRule',
- Component: lazy(() => import('pages/WorkloadOptimize/RecommendationRule')),
- meta: {
- title: '鎺ㄨ崘瑙勫垯',
- },
- },
- {
- path: 'resourcesRecommend',
- Component: lazy(() => import('pages/WorkloadOptimize/ResourcesRecommend')),
- meta: {
- title: '璧勬簮鎺ㄨ崘',
- },
- },
- {
- path: 'replicaRecommend',
- Component: lazy(() => import('pages/WorkloadOptimize/ReplicaRecommend')),
- meta: {
- title: '鍓湰鏁版帹鑽�',
- },
- },
- ],
- },
-];
-
-export default workloadOptimize;
diff --git a/pkg/web/src/router/routeEnum.ts b/pkg/web/src/router/routeEnum.ts
deleted file mode 100644
index 6e3321f09576887134b40f4d37c3fa7e0de821ac..0000000000000000000000000000000000000000
--- a/pkg/web/src/router/routeEnum.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export enum RoutesEnum {
- DEFAULT = '/',
-
- OVERVIEW = '/manager/cluster',
-
- INSIGHT = '/insight',
-}