diff --git a/config/config.ts b/config/config.ts index 60231220..61ab16c5 100644 --- a/config/config.ts +++ b/config/config.ts @@ -1,8 +1,5 @@ import { defineConfig } from '@umijs/max'; -const path = require('path'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CompressionWebpackPlugin = require('compression-webpack-plugin'); -const DeleteCssPlugin = require('./plugins/delete-css-plugin'); import proxy from './proxy'; import routes from './routes'; @@ -17,23 +14,6 @@ export default defineConfig({ base: process.env.npm_config_base || '/', ...(isProduction ? { - // extraBabelPlugins: [ - // [ - // 'babel-plugin-named-asset-import', - // { - // loaderMap: { - // css: { - // loader: 'css-loader', - // options: { - // modules: { - // localIdentName: 'css/[name]__[local]___[hash:base64:5]' - // } - // } - // } - // } - // } - // ] - // ], scripts: [ { src: `/js/umi.${t}.js` diff --git a/config/routes.ts b/config/routes.ts index 6e6f1ff0..d816a057 100644 --- a/config/routes.ts +++ b/config/routes.ts @@ -7,14 +7,14 @@ export default [ redirect: '/dashboard' }, { - name: 'dashboard', + name: 'Dashboard', path: '/dashboard', key: 'dashboard', icon: 'home', component: './dashboard' }, { - name: 'playground', + name: 'Playground', title: 'Playground', path: '/playground', key: 'playground', @@ -22,14 +22,14 @@ export default [ component: './playground' }, { - name: 'models', + name: 'Models', path: '/models', key: 'models', icon: 'Block', component: './llmodels' }, { - name: 'resources', + name: 'Resources', path: '/resources', key: 'resources', icon: 'CloudServer', @@ -43,14 +43,14 @@ export default [ component: './api-keys' }, { - name: 'users', + name: 'Users', path: '/users', key: 'users', icon: 'Team', component: './users' }, { - name: 'profile', + name: 'Profile', path: '/profile', key: 'profile', hideInMenu: true, @@ -58,7 +58,7 @@ export default [ icon: 'User' }, { - name: 'login', + name: 'Login', path: '/login', key: 'login', layout: false, diff --git a/src/assets/styles/menu.less b/src/assets/styles/menu.less index a1f0cd83..a3ca4d4e 100644 --- a/src/assets/styles/menu.less +++ b/src/assets/styles/menu.less @@ -1,9 +1,9 @@ .ant-pro-layout { .ant-pro-sider { padding: 10px; - &.ant-layout-sider { - background: var(--color-white-1); - } + // &.ant-layout-sider { + // background: var(--color-white-1); + // } .ant-layout-sider-children { background-color: var(--color-fill-1); border-inline: none; @@ -11,12 +11,15 @@ padding-inline: 16px; padding-block-end: 12px; } + .umi-plugin-layout-right { width: 100%; + .umi-plugin-layout-action { padding: 12px; width: 100%; border-radius: var(--menu-border-radius-base); + &:hover { background-color: var(--color-white-1); } diff --git a/src/components/charts/gauge.tsx b/src/components/charts/gauge.tsx index 032903fc..1b6cca2e 100644 --- a/src/components/charts/gauge.tsx +++ b/src/components/charts/gauge.tsx @@ -29,14 +29,18 @@ const GaugeChart: React.FC = (props) => { range: rangColor } }, + startAngle: Math.PI, + endAngle: 0, title: { - // title, + title, + size: 0, titleFontSize: 14, style: { align: 'center' } }, style: { + arcShape: 'round', textContent: (target: number, total: number) => { return `${(target / total) * 100}%`; } diff --git a/src/components/charts/pie-chart.tsx b/src/components/charts/pie-chart.tsx new file mode 100644 index 00000000..de24bd93 --- /dev/null +++ b/src/components/charts/pie-chart.tsx @@ -0,0 +1,37 @@ +import { Pie } from '@ant-design/plots'; +import numeral from 'numeral'; + +interface PieChartProps { + data: { label: string; value: number }[]; + height?: number; + radius?: number; +} +const PieChart: React.FC = (props) => { + const { data, height = 340, radius = 0.9 } = props; + + return ( + { + return `${item.label}: ${numeral(item.value).format('0,0')}`; + } + }} + /> + ); +}; + +export default PieChart; diff --git a/src/components/page-tools/index.tsx b/src/components/page-tools/index.tsx index a100b5a1..6ab8283a 100644 --- a/src/components/page-tools/index.tsx +++ b/src/components/page-tools/index.tsx @@ -6,17 +6,27 @@ type PageToolsProps = { right?: React.ReactNode; marginBottom?: number; marginTop?: number; + style?: React.CSSProperties; }; const PageTools: React.FC = (props) => { - const { left, right, marginBottom = 0, marginTop = 70 } = props; + const { + left, + right, + marginBottom = 0, + marginTop = 70, + style: pageStyle + } = props; - const newStyle: Record = useMemo(() => { - const style: Record = {}; + const newStyle: React.CSSProperties = useMemo(() => { + const style: React.CSSProperties = {}; style.marginBottom = `${marginBottom}px`; style.marginTop = `${marginTop}px`; + if (pageStyle) { + Object.assign(style, pageStyle); + } return style; - }, [marginBottom, marginTop]); + }, [marginBottom, marginTop, pageStyle]); return (
diff --git a/src/components/status-tag/index.less b/src/components/status-tag/index.less index 50ed288f..21c52250 100644 --- a/src/components/status-tag/index.less +++ b/src/components/status-tag/index.less @@ -11,6 +11,10 @@ font-size: var(--font-size-base); overflow: hidden; + &.download { + background-color: rgb(47 191 133 / 30%); + } + .download { display: flex; justify-content: center; diff --git a/src/components/status-tag/index.tsx b/src/components/status-tag/index.tsx index 4b6861d2..2f18c572 100644 --- a/src/components/status-tag/index.tsx +++ b/src/components/status-tag/index.tsx @@ -48,7 +48,9 @@ const StatusTag: React.FC = ({ statusValue, download }) => { }; return ( - import { useAccessMarkedRoutes } from '@@/plugin-access'; import { useModel } from '@@/plugin-model'; import { ProLayout } from '@ant-design/pro-components'; @@ -141,97 +139,100 @@ export default (props: any) => { ); console.log('route===========', route); return ( - { - e.stopPropagation(); - e.preventDefault(); - navigate('/'); - }} - onPageChange={(route) => { - console.log('onRouteChange', route); - const { location } = history; - // 如果没有登录，重定向到 login - // if (!initialState?.currentUser && location.pathname !== loginPath) { - // history.push(loginPath); - // } - }} - formatMessage={userConfig.formatMessage || formatMessage} - menu={{ locale: userConfig.locale }} - logo={Logo} - menuItemRender={(menuItemProps, defaultDom) => { - console.log('meurender=========', { defaultDom }); - if (menuItemProps.isUrl || menuItemProps.children) { - return defaultDom; - } - if (menuItemProps.path && location.pathname !== menuItemProps.path) { - return ( - // handle wildcard route path, for example /slave/* from qiankun - - {defaultDom} - - ); - } - return <>{defaultDom}; - }} - itemRender={(route, _, routes) => { - const { breadcrumbName, title, path } = route; - const label = title || breadcrumbName; - const last = routes[routes.length - 1]; - if (last) { - if (last.path === path || last.linkPath === path) { - return {label}; +
+
+ { + e.stopPropagation(); + e.preventDefault(); + navigate('/'); + }} + onPageChange={(route) => { + console.log('onRouteChange', route); + const { location } = history; + // 如果没有登录，重定向到 login + // if (!initialState?.currentUser && location.pathname !== loginPath) { + // history.push(loginPath); + // } + }} + formatMessage={userConfig.formatMessage || formatMessage} + menu={{ locale: userConfig.locale }} + logo={Logo} + menuItemRender={(menuItemProps, defaultDom) => { + console.log('meurender=========', { defaultDom }); + if (menuItemProps.isUrl || menuItemProps.children) { + return defaultDom; } - } - return {label}; - }} - disableContentMargin - fixSiderbar - fixedHeader - {...runtimeConfig} - rightContentRender={ - runtimeConfig.rightContentRender !== false && - ((layoutProps) => { - const dom = getRightRenderContent({ - runtimeConfig, - loading, - initialState, - setInitialState - }); - if (runtimeConfig.rightContentRender) { - return runtimeConfig.rightContentRender(layoutProps, dom, { - // BREAK CHANGE userConfig > runtimeConfig - userConfig, + if (menuItemProps.path && location.pathname !== menuItemProps.path) { + return ( + // handle wildcard route path, for example /slave/* from qiankun + + {defaultDom} + + ); + } + return <>{defaultDom}; + }} + itemRender={(route, _, routes) => { + const { breadcrumbName, title, path } = route; + const label = title || breadcrumbName; + const last = routes[routes.length - 1]; + if (last) { + if (last.path === path || last.linkPath === path) { + return {label}; + } + } + return {label}; + }} + disableContentMargin + fixSiderbar + fixedHeader + {...runtimeConfig} + rightContentRender={ + runtimeConfig.rightContentRender !== false && + ((layoutProps) => { + const dom = getRightRenderContent({ runtimeConfig, loading, initialState, setInitialState }); - } - return dom; - }) - } - > - runtimeConfig + userConfig, + runtimeConfig, + loading, + initialState, + setInitialState + }); + } + return dom; + }) + } > - {runtimeConfig.childrenRender ? ( - runtimeConfig.childrenRender(, props) - ) : ( - - )} - - + + {runtimeConfig.childrenRender ? ( + runtimeConfig.childrenRender(, props) + ) : ( + + )} + + +
); }; diff --git a/src/pages/api-keys/index.tsx b/src/pages/api-keys/index.tsx index f7689b97..4be61616 100644 --- a/src/pages/api-keys/index.tsx +++ b/src/pages/api-keys/index.tsx @@ -141,7 +141,7 @@ const Models: React.FC = () => { left={ diff --git a/src/pages/dashboard/components/active-table.tsx b/src/pages/dashboard/components/active-table.tsx index 712de2f0..6c4b40e6 100644 --- a/src/pages/dashboard/components/active-table.tsx +++ b/src/pages/dashboard/components/active-table.tsx @@ -1,4 +1,5 @@ import ContentWrapper from '@/components/content-wrapper'; +import PageTools from '@/components/page-tools'; import { Col, Row, Table } from 'antd'; const modelColumns = [ @@ -132,10 +133,18 @@ const ActiveTable = () => { return ( - Active Models} - > + + Active Models + + } + right={false} + /> + { - Active Projects} - > + + Active Projects + + } + right={false} + /> +
{ return value; } return ( - + {value.healthy} {value.warning} {value.error} @@ -63,8 +63,8 @@ const Overview: React.FC = (props) => { ); }; return ( - - + + {overviewConfigs.map((config, index) => ( {renderCardItem({ @@ -75,7 +75,7 @@ const Overview: React.FC = (props) => { ))} - + ); }; diff --git a/src/pages/dashboard/components/resource-utilization.tsx b/src/pages/dashboard/components/resource-utilization.tsx index 914b62c2..3b7c94b2 100644 --- a/src/pages/dashboard/components/resource-utilization.tsx +++ b/src/pages/dashboard/components/resource-utilization.tsx @@ -26,13 +26,6 @@ const mockData = { }; const UtilizationOvertime: React.FC = () => { const timeList = [ - // '01:00:00', - // '02:00:00', - // '03:00:00', - // '04:00:00', - // '05:00:00', - // '06:00:00', - // '07:00:00', '08:00:00', '09:00:00', '10:00:00', @@ -67,7 +60,6 @@ const UtilizationOvertime: React.FC = () => { }; const data = generateData(); - // return ( <> diff --git a/src/pages/dashboard/components/system-load.tsx b/src/pages/dashboard/components/system-load.tsx index 5b65e730..d93a9481 100644 --- a/src/pages/dashboard/components/system-load.tsx +++ b/src/pages/dashboard/components/system-load.tsx @@ -10,19 +10,23 @@ const SystemLoad = () => { }; return ( - +
+ System Load + + } right={ } /> - -
+ + { rangColor={['#54cc98', '#ffd666', '#ff7875']} > - + { rangColor={['#54cc98', '#ffd666', '#ff7875']} > - + { rangColor={['#54cc98', '#ffd666', '#ff7875']} > - + { }; return ( <> - - - } - /> - - + Usage} + right={ + + } + /> + - + { yField="value" height={360} > - + - + { yField="value" height={360} > - + - + - + { yField="value" height={400} > - + - + { yField="value" height={400} > - + diff --git a/src/pages/dashboard/config/index.ts b/src/pages/dashboard/config/index.ts index 88a1338f..b524fc4a 100644 --- a/src/pages/dashboard/config/index.ts +++ b/src/pages/dashboard/config/index.ts @@ -3,30 +3,30 @@ export const overviewConfigs = [ key: 'workers', label: 'Workers', backgroundColor: - 'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)' + 'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)' }, { key: 'gpus', label: 'Total GPUs', backgroundColor: - 'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)' + 'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)' }, { key: 'allocatedGpus', label: 'Allocated GPUs', backgroundColor: - 'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)' + 'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)' }, { key: 'models', label: 'Models', backgroundColor: - 'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)' + 'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)' }, { key: 'instances', label: 'Instances', backgroundColor: - 'linear-gradient(180deg, rgba(0,188,203,.2) 0%, rgba(40,207,181,.2) 100%)' + 'linear-gradient(180deg, rgb(0 139 188 / 20%) 0%, rgba(40,207,181,.2) 100%)' } ]; diff --git a/src/pages/dashboard/styles/index.less b/src/pages/dashboard/styles/index.less index 3ff83c0c..3ac537c8 100644 --- a/src/pages/dashboard/styles/index.less +++ b/src/pages/dashboard/styles/index.less @@ -11,7 +11,7 @@ color: var(--ant-gold-6); } - .value-danger { + .value-error { color: var(--ant-red-6); } } diff --git a/src/pages/llmodels/components/add-modal.tsx b/src/pages/llmodels/components/add-modal.tsx index 3b1adefd..67d0bde5 100644 --- a/src/pages/llmodels/components/add-modal.tsx +++ b/src/pages/llmodels/components/add-modal.tsx @@ -5,7 +5,7 @@ import SealSelect from '@/components/seal-form/seal-select'; import { PageAction } from '@/config'; import { PageActionType } from '@/config/types'; import { convertFileSize } from '@/utils'; -import { Form, Modal } from 'antd'; +import { Form, Input, Modal } from 'antd'; import _ from 'lodash'; import { useEffect, useState } from 'react'; import { @@ -130,7 +130,9 @@ const AddModal: React.FC = (props) => { onSearch={debounceSearch} options={repoOptions} description="Only .gguf format is supported" - > + > + + name="huggingface_filename" diff --git a/src/pages/llmodels/index.tsx b/src/pages/llmodels/index.tsx index b50c864c..bf70c45c 100644 --- a/src/pages/llmodels/index.tsx +++ b/src/pages/llmodels/index.tsx @@ -382,7 +382,7 @@ const Models: React.FC = () => { left={ { left={ diff --git a/src/pages/resources/components/nodes.tsx b/src/pages/resources/components/nodes.tsx index 8661bd50..4cf3b94f 100644 --- a/src/pages/resources/components/nodes.tsx +++ b/src/pages/resources/components/nodes.tsx @@ -86,7 +86,7 @@ const Models: React.FC = () => { left={ diff --git a/src/pages/users/index.tsx b/src/pages/users/index.tsx index c6f56896..7e393ef1 100644 --- a/src/pages/users/index.tsx +++ b/src/pages/users/index.tsx @@ -166,7 +166,7 @@ const Models: React.FC = () => { left={