root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: flatten menu items

Browse Source
This commit is contained in:
jialin
2025-07-10 09:47:12 +08:00
parent 751ddbb3f3
commit 51450c2b02
23 changed files with 1052 additions and 553 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ const checkDefaultPage = async (userInfo: any) => {
if (isFirstLogin === null && isOnline()) {
writeState(IS_FIRST_LOGIN, true);
if (userInfo && userInfo?.is_admin) {
history.push('/models/list');
history.push('/models/deployment');
}
}
};
src/atoms/settings.ts
+3 -1
View File
@@ -7,13 +7,15 @@ type UserSettings = {
mode: 'light' | 'realDark' | 'auto';
colorPrimary: string;
isDarkTheme: boolean;
collapsed: boolean;
};
const defaultSettings: UserSettings = {
theme: 'light',
mode: 'auto',
isDarkTheme: false,
colorPrimary: colorPrimary
colorPrimary: colorPrimary,
collapsed: false
};
export const getStorageUserSettings = () => {
src/components/icon-font/index.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import { createFromIconfontCN } from '@ant-design/icons';
import './iconfont/iconfont.js';
// import './iconfont/iconfont.js';
const IconFont = createFromIconfontCN({
scriptUrl: ''
scriptUrl: '//at.alicdn.com/t/c/font_4613488_35np53id3ax.js'
});
export default IconFont;
src/config/theme/dark.ts
+1 -1
View File
@@ -32,7 +32,7 @@ export default {
iconSize: 16,
iconMarginInlineEnd: 12,
itemBorderRadius: 4,
itemHeight: 36,
itemHeight: 32,
itemSelectedColor: '#007BFF',
darkItemSelectedBg: '#141414',
darkItemHoverBg: 'rgba(255, 255, 255, 0.03)',
src/config/theme/light.ts
+1 -1
View File
@@ -33,7 +33,7 @@ export default {
iconMarginInlineEnd: 12,
itemBorderRadius: 4,
itemSelectedColor: '#007BFF',
itemHeight: 36,
itemHeight: 32,
groupTitleColor: 'rgba(0,0,0,1)',
itemHoverColor: 'rgba(0,0,0,1)',
itemColor: 'rgba(0,0,0,1)',
src/global.less
+10 -1
View File
@@ -252,7 +252,8 @@ body {
}
.ant-pro-sider .ant-layout-sider-children {
background-color: var(--color-fill-sider);
// background-color: var(--color-fill-sider);
border-right: 1px solid var(--ant-color-split);
}
}
@@ -292,6 +293,10 @@ body {
}
}
.ant-pro-sider-actions-list-collapsed {
margin-block-end: 0;
}
.ant-pro-page-container-children-container {
padding-block: var(--layout-content-blockpadding);
padding-inline: var(--layout-content-inlinepadding);
@@ -334,6 +339,10 @@ body {
// color: var(--ant-color-primary) !important;
font-weight: 400;
}
.ant-menu-item-group-title.hide-submenu + .ant-menu-item-group-list {
display: none;
}
}
}
}
src/layouts/index.tsx
+88 -32
View File
@@ -28,7 +28,7 @@ import {
useNavigate,
type IRoute
} from '@umijs/max';
import { Button, ConfigProvider, Modal, theme } from 'antd';
import { Button, ConfigProvider, Modal, Tooltip, theme } from 'antd';
import 'driver.js/dist/driver.css';
import { useAtom } from 'jotai';
import 'overlayscrollbars/overlayscrollbars.css';
@@ -39,6 +39,7 @@ import { LogoIcon, SLogoIcon } from './Logo';
import ErrorBoundary from './error-boundary';
import { getRightRenderContent } from './rightRender';
import { patchRoutes } from './runtime';
import SiderMenu from './sider-menu';
const loginPath = '/login';
@@ -102,7 +103,8 @@ export default (props: any) => {
defer: false
});
const [modal, contextHolder] = Modal.useModal();
const { themeData, setTheme, userSettings, isDarkTheme } = useUserSettings();
const { themeData, setTheme, setUserSettings, userSettings, isDarkTheme } =
useUserSettings();
const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
const { initialize: initializeMenu } = useOverlayScroller();
const [userInfo] = useAtom(userAtom);
@@ -113,8 +115,9 @@ export default (props: any) => {
const navigate = useNavigate();
const intl = useIntl();
const { clientRoutes, pluginManager } = useAppData();
const [collapsed, setCollapsed] = useState(false);
// const [collapsed, setCollapsed] = useState(userSettings.collapsed || false);
const [collapseValue, setCollapseValue] = useState(false);
const [collapseKeys, setCollapseKeys] = useState<Set<string>>(new Set());
const initialInfo = (useModel && useModel('@@initialState')) || {
initialState: undefined,
@@ -187,7 +190,11 @@ export default (props: any) => {
const handleToggleCollapse = (e: any) => {
e.stopPropagation();
setCollapsed(!collapsed);
// setCollapsed(!collapsed);
setUserSettings({
...userSettings,
collapsed: !userSettings.collapsed
});
};
const newRoutes = filterRoutes(
@@ -203,6 +210,8 @@ export default (props: any) => {
const role = initialState?.currentUser?.is_admin ? 'admin' : 'user';
const [route] = useAccessMarkedRoutes(mapRoutes(newRoutes, role));
console.log('route============', route);
patchRoutes({
routes: route.children,
initialState: initialInfo.initialState
@@ -213,6 +222,24 @@ export default (props: any) => {
[location.pathname]
);
const allRouteKeys = useMemo(() => {
const keys = new Set<string>();
const childrenRoutes = route?.children || [];
const traverseRoutes = (routes) => {
routes.forEach((r) => {
if (r.path) {
keys.add(r.path);
}
if (r.children) {
traverseRoutes(r.children);
}
});
};
traverseRoutes(childrenRoutes);
return keys;
}, [route?.children]);
const showUpgrade = useMemo(() => {
return (
initialState?.currentUser?.is_admin &&
@@ -256,13 +283,17 @@ export default (props: any) => {
return () => clearTimeout(timeout);
}, [initializeMenu, matchedRoute, location]);
const collapsed = useMemo(() => {
return userSettings.collapsed || false;
}, [userSettings.collapsed]);
const renderMenuHeader = (logo, title) => {
return (
<>
{logo}
<div className="collapse-wrap" onClick={handleToggleCollapse}>
<Button
style={{ marginRight: collapsed ? 0 : -14 }}
style={{ marginRight: collapsed ? 0 : -14, border: 'none' }}
size="small"
type={collapsed ? 'default' : 'text'}
>
@@ -284,7 +315,29 @@ export default (props: any) => {
);
};
const handleToggleGroup = (menuItemProps, e) => {
e.stopPropagation();
if (collapseKeys.has(menuItemProps.key)) {
collapseKeys.delete(menuItemProps.key);
} else {
collapseKeys.add(menuItemProps.key);
}
setCollapseKeys(new Set(collapseKeys));
};
const onMenuItemClick = (menuItem) => {
navigate(menuItem.path);
};
const menuContentRender = (menuProps, defaultDom) => {
return (
<SiderMenu {...menuProps} onMenuItemClick={onMenuItemClick}></SiderMenu>
);
};
const actionRender = (layoutProps) => {
console.log('actionRender', layoutProps);
const dom = getRightRenderContent({
runtimeConfig,
loading,
@@ -300,38 +353,36 @@ export default (props: any) => {
return dom;
};
const 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 <span>{label}</span>;
}
}
return <Link to={path}>{label}</Link>;
};
const menuItemRender = (menuItemProps, defaultDom) => {
console.log('defaultdom==========', menuItemProps, defaultDom);
if (menuItemProps.isUrl || menuItemProps.children) {
return defaultDom;
}
if (menuItemProps.path && location.pathname !== menuItemProps.path) {
return (
<Link
to={menuItemProps.path.replace('/*', '')}
target={menuItemProps.target}
<Tooltip
title={collapsed ? menuItemProps.name : false}
placement="right"
>
{defaultDom}
</Link>
<Link
to={menuItemProps.path.replace('/*', '')}
target={menuItemProps.target}
>
{defaultDom}
</Link>
</Tooltip>
);
}
return <>{defaultDom}</>;
return (
<Tooltip title={collapsed ? menuItemProps.name : false} placement="right">
{defaultDom}
</Tooltip>
);
};
const menuDataRender = (menuData) => {
const currentItem = menuData.find((s) => location.pathname === s.path);
return menuData.map((item) => {
const result = menuData.map((item) => {
const newItem = { ...item };
const selected =
@@ -347,18 +398,17 @@ export default (props: any) => {
}
if (newItem.children) {
newItem.children = menuDataRender(newItem.children);
if (selected) {
newItem.icon = <IconFont type={newItem.selectedIcon} />;
}
}
return newItem;
});
return result;
};
const onPageChange = (route) => {
const { location } = history;
const { pathname } = location;
console.log('onPageChange', pathname, route);
initRouteCacheValue(pathname);
dropRouteCache(pathname);
@@ -387,7 +437,11 @@ export default (props: any) => {
};
const onCollapse = (value) => {
setCollapsed(value);
// setCollapsed(value);
setUserSettings({
...userSettings,
collapsed: value
});
};
useEffect(() => {
@@ -467,15 +521,17 @@ export default (props: any) => {
onCollapse={onCollapse}
onMenuHeaderClick={onMenuHeaderClick}
menuHeaderRender={renderMenuHeader}
collapsed={collapsed}
collapsed={userSettings.collapsed}
onPageChange={onPageChange}
formatMessage={formatMessage}
menu={{
locale: true
locale: true,
type: 'group'
}}
splitMenus={true}
logo={collapsed ? SLogoIcon : LogoIcon}
menuContentRender={menuContentRender}
menuItemRender={menuItemRender}
itemRender={itemRender}
menuDataRender={menuDataRender}
disableContentMargin
fixSiderbar
src/layouts/rightRender.tsx
+29 -30
View File
@@ -20,23 +20,14 @@ import { Avatar, Menu, Spin } from 'antd';
import _ from 'lodash';
import React from 'react';
const themeConfig = [
{
key: 'realDark',
label: 'common.appearance.dark',
icon: <MoonOutlined />
},
{
key: 'light',
label: 'common.appearance.light',
icon: <SunOutlined />
}
// {
// key: 'auto',
// label: 'common.appearance.system',
// icon: <IconFont type="icon-theme-auto" />
// }
];
const getMenuStyle = (
collapsed: boolean,
siderWidth: number,
extraStyle: React.CSSProperties = {}
) => ({
width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`,
...extraStyle
});
export const getRightRenderContent = (opts: {
runtimeConfig: any;
@@ -300,6 +291,20 @@ export const getRightRenderContent = (opts: {
</span>
),
children: [
{
key: 'apikeys',
label: (
<span className="flex flex-center">
<IconFont type="icon-key" />
<span className="m-l-8" style={{ marginLeft: 8 }}>
{intl?.formatMessage?.({ id: 'menu.apikeys' })}
</span>
</span>
),
onClick: () => {
history.push('/api-keys');
}
},
{
key: 'settings',
label: (
@@ -333,23 +338,17 @@ export const getRightRenderContent = (opts: {
]
};
const getMenuStyle = (
collapsed: boolean,
siderWidth: number,
extraStyle: React.CSSProperties = {}
) => ({
width: collapsed ? 40 : `calc(${siderWidth}px - 16px)`,
...extraStyle
});
return (
<div>
<>
<Menu {...helpMenu} style={getMenuStyle(collapsed, siderWidth)} />
<Menu {...langMenu} style={getMenuStyle(collapsed, siderWidth)} />
{/* <Menu {...langMenu} style={getMenuStyle(collapsed, siderWidth)} /> */}
<Menu
{...userMenu}
style={getMenuStyle(collapsed, siderWidth, { marginTop: 20 })}
style={getMenuStyle(collapsed, siderWidth, {
marginTop: 8,
marginBottom: 0
})}
/>
</div>
</>
);
};
src/layouts/sider-menu.tsx
+240
View File
@@ -0,0 +1,240 @@
import IconFont from '@/components/icon-font';
import { CaretDownOutlined } from '@ant-design/icons';
import { useLocation } from '@umijs/max';
import { Divider, Tooltip } from 'antd';
import { createStyles } from 'antd-style';
import React, { useMemo, useState } from 'react';
interface MenuItem {
icon?: string;
selectedIcon?: string;
defaultIcon?: string;
children?: MenuItem[];
[key: string]: any;
}
interface SiderMenuProps {
menuData: MenuItem[];
collapsed?: boolean;
onMenuItemClick: (item: MenuItem) => void;
}
const useStyles = createStyles(({ css, token }) => {
console.log('useStyles', token);
// @ts-ignore
const { Menu } = token;
return {
siderMenu: css`
&.sider-menu-collapsed {
.menu-item {
justify-content: center;
padding: 0;
}
}
`,
groupTitle: css`
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: var(--ant-padding-xs) var(--ant-padding);
line-height: var(--ant-menu-group-title-line-height);
font-size: 12px;
padding-bottom: 4px;
color: var(--ant-color-text-secondary);
overflow: hidden;
height: 30px;
transtion: all var(--ant-motion-duration-slow);
&:hover {
.group-title-text {
color: var(--ant-color-text);
}
}
.anticon {
transform: scale(0.8);
}
.group-title-text {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--ant-color-text-secondary);
font-weight: 400;
}
&.menu-item-group-title-collapsed {
height: 1px;
padding-block: 0;
padding-inline: 0;
}
`,
menuItemContent: css`
margin: 4px;
border-radius: 4px;
overflow: hidden;
`,
menuItemWrapper: css`
display: flex;
gap: 12px;
cursor: pointer;
position: relative;
padding-inline: calc(var(--ant-font-size) * 2) var(--ant-padding);
padding-left: 16px;
overflow: hidden;
height: ${Menu.itemHeight}px;
line-height: ${Menu.itemHeight}px;
color: var(--ant-color-text-secondary);
&:hover {
background-color: ${Menu.itemHoverBg};
color: ${Menu.itemHoverColor};
}
&.menu-item-selected {
background-color: ${Menu.itemSelectedBg};
color: ${Menu.itemSelectedColor};
}
&:active {
background-color: ${Menu.itemActiveBg};
color: ${Menu.itemActiveColor};
}
.anticon {
font-size: 16px;
}
.icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
`,
menuItemGroup: css`
&.menu-item-group-hidden {
display: none;
}
`
};
});
const SiderMenu: React.FC<SiderMenuProps> = (props) => {
const { menuData, collapsed, onMenuItemClick } = props;
const { styles, cx } = useStyles();
const location = useLocation();
const [collapseKeys, setCollapseKeys] = useState<Set<string>>(new Set());
console.log('SiderMenu', props);
const dividerStyles = useMemo(() => {
if (collapsed) {
return {
margin: '6px 0'
};
}
return {
margin: '6px 16px',
width: 'unset',
minWidth: 'unset',
maxWidth: 'unset'
};
}, [collapsed]);
const handleToggleGroup = (e: any, menuGroup: any) => {
e.stopPropagation();
console.log('handleToggleGroup', menuGroup.key);
if (collapseKeys.has(menuGroup.key)) {
collapseKeys.delete(menuGroup.key);
} else {
collapseKeys.add(menuGroup.key);
}
setCollapseKeys(new Set(collapseKeys));
};
const menuItemRender = (menuItem: MenuItem, key: string) => {
return (
<div
className={cx(styles.menuItemContent, 'menu-item-content')}
key={key}
>
<div
onClick={() => onMenuItemClick(menuItem)}
className={cx(styles.menuItemWrapper, 'menu-item', {
'menu-item-selected': location.pathname === menuItem.path
})}
>
{collapsed ? (
<Tooltip title={menuItem.name} placement="right">
<span className="icon-wrapper">
<IconFont
type={
location.pathname === menuItem.path
? menuItem.selectedIcon || ''
: menuItem.defaultIcon || ''
}
></IconFont>
</span>
</Tooltip>
) : (
<>
{menuItem.icon}
<span>{menuItem.name}</span>
</>
)}
</div>
</div>
);
};
return (
<div
className={cx(styles.siderMenu, 'sider-menu', {
'sider-menu-collapsed': collapsed
})}
>
{menuData.map((item: MenuItem, index: number) => (
<div key={item.key}>
{item.children && item.children.length > 0 ? (
<>
{
<div
className={cx(styles.groupTitle, {
'menu-item-group-title-collapsed': collapsed
})}
onClick={(e) => handleToggleGroup(e, item)}
>
{!collapsed ? (
<span className="group-title-text">
<span>{item.name}</span>
<CaretDownOutlined
rotate={collapseKeys.has(item.key) ? -90 : 0}
></CaretDownOutlined>
</span>
) : (
<Divider style={dividerStyles} />
)}
</div>
}
<div
className={cx(styles.menuItemGroup, {
'menu-item-group-collapsed': collapsed,
'menu-item-group-hidden':
!collapsed && collapseKeys.has(item.key)
})}
>
{item.children?.map((child: MenuItem) =>
menuItemRender(child, child.key)
)}
</div>
</>
) : (
<>{menuItemRender(item, item.key)}</>
)}
</div>
))}
</div>
);
};
export default SiderMenu;
src/locales/en-US/menu.ts
+7
View File
@@ -11,10 +11,17 @@ export default {
'menu.models.modelList': 'Deploy & Manage',
'menu.models.modelCatalog': 'Catalog',
'menu.models.catalog': 'Model Catalog',
'menu.models.deployment': 'Deployment',
'menu.modelCatalog': 'Catalog',
'menu.resources': 'Resources',
'menu.apikeys': 'API Keys',
'menu.users': 'Users',
'menu.resources.workers': 'Workers',
'menu.resources.gpus': 'GPUs',
'menu.resources.modelfiles': 'Model Files',
'menu.accessControl': 'Access Control',
'menu.accessControl.apikeys': 'API Keys',
'menu.accessControl.users': 'Users',
'menu.profile': 'Profile',
'menu.login': 'Login',
'menu.usage': 'Usage',
src/locales/ja-JP/menu.ts
+18 -1
View File
@@ -11,6 +11,7 @@ export default {
'menu.models.modelList': 'デプロイと管理',
'menu.models.modelCatalog': 'カタログ',
'menu.models.catalog': 'モデルカタログ',
'menu.models.deployment': 'Deployment',
'menu.modelCatalog': 'カタログ',
'menu.resources': 'リソース',
'menu.apikeys': 'APIキー',
@@ -18,5 +19,21 @@ export default {
'menu.profile': 'プロフィール',
'menu.login': 'ログイン',
'menu.usage': '使用状況',
'menu.404': '404'
'menu.404': '404',
'menu.resources.workers': 'Workers',
'menu.resources.gpus': 'GPUs',
'menu.resources.modelfiles': 'Model Files',
'menu.accessControl': 'Access Control',
'menu.accessControl.apikeys': 'API Keys',
'menu.accessControl.users': 'Users'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
// 1. 'menu.models.deployment': 'Deployment',
// 2. 'menu.resources.workers': 'Workers',
// 3. 'menu.resources.gpus': 'GPUs',
// 4. 'menu.resources.modelfiles': 'Model Files',
// 5. 'menu.accessControl': 'Access Control',
// 6. 'menu.accessControl.apikeys': 'API Keys',
// 7. 'menu.accessControl.users': 'Users',
// ========== End of To-Do List ==========
src/locales/ru-RU/menu.ts
+18 -1
View File
@@ -11,6 +11,7 @@ export default {
'menu.models.modelList': 'Развертывание и управление',
'menu.models.modelCatalog': 'Каталог',
'menu.models.catalog': 'Каталог моделей',
'menu.models.deployment': 'Deployment',
'menu.modelCatalog': 'Каталог',
'menu.resources': 'Ресурсы',
'menu.apikeys': 'API-ключи',
@@ -18,5 +19,21 @@ export default {
'menu.profile': 'Профиль',
'menu.login': 'Авторизация',
'menu.usage': 'Использование',
'menu.404': '404'
'menu.404': '404',
'menu.resources.workers': 'Workers',
'menu.resources.gpus': 'GPUs',
'menu.resources.modelfiles': 'Model Files',
'menu.accessControl': 'Access Control',
'menu.accessControl.apikeys': 'API Keys',
'menu.accessControl.users': 'Users'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
// 1. 'menu.models.deployment': 'Deployment',
// 2. 'menu.resources.workers': 'Workers',
// 3. 'menu.resources.gpus': 'GPUs',
// 4. 'menu.resources.modelfiles': 'Model Files',
// 5. 'menu.accessControl': 'Access Control',
// 6. 'menu.accessControl.apikeys': 'API Keys',
// 7. 'menu.accessControl.users': 'Users',
// ========== End of To-Do List ==========
src/locales/zh-CN/menu.ts
+9 -2
View File
@@ -2,7 +2,7 @@ export default {
'menu.dashboard': '概览',
'menu.playground': '试验场',
'menu.playground.rerank': '重排',
'menu.playground.embedding': '文本嵌入',
'menu.playground.embedding': '嵌入',
'menu.playground.chat': '对话',
'menu.playground.speech': '语音',
'menu.playground.text2images': '图像',
@@ -10,6 +10,7 @@ export default {
'menu.models': '模型',
'menu.models.modelList': '部署与管理',
'menu.models.modelCatalog': '模型库',
'menu.models.deployment': '部署',
'menu.modelCatalog': '模型库',
'menu.models.catalog': '模型库',
'menu.resources': '资源',
@@ -18,5 +19,11 @@ export default {
'menu.profile': '个人信息',
'menu.login': '登录',
'menu.usage': '使用量',
'menu.404': '404'
'menu.404': '404',
'menu.resources.workers': 'Workers',
'menu.resources.gpus': 'GPUs',
'menu.resources.modelfiles': '模型文件',
'menu.accessControl': '访问控制',
'menu.accessControl.apikeys': 'API 密钥',
'menu.accessControl.users': '用户'
};
src/pages/api-keys/index.tsx
+2 -1
View File
@@ -100,7 +100,8 @@ const APIKeys: React.FC = () => {
title: intl.formatMessage({ id: 'apikeys.title' }),
style: {
paddingInline: 'var(--layout-content-header-inlinepadding)'
}
},
breadcrumb: {}
}}
extra={[]}
>
src/pages/llmodels/catalog.tsx
+1 -1
View File
@@ -172,7 +172,7 @@ const Catalog: React.FC = () => {
});
message.success(intl.formatMessage({ id: 'common.message.success' }));
setModelsExpandKeys([modelData.id]);
navigate('/models/list');
navigate('/models/deployment');
} catch (error) {}
},
[openDeployModal]
src/pages/login/utils.ts
+1 -1
View File
@@ -12,7 +12,7 @@ export const checkDefaultPage = async (userInfo: any, replace: boolean) => {
if (isFirstLogin === null && isOnline()) {
writeState(IS_FIRST_LOGIN, true);
const pathname =
userInfo && userInfo?.is_admin ? '/models/list' : '/playground';
userInfo && userInfo?.is_admin ? '/models/deployment' : '/playground';
history.push(pathname);
return;
}
src/pages/playground/config/samples.ts
+1 -1
View File
@@ -37,7 +37,7 @@ export const rerankerSamples: Record<
}
> = {
'zh-CN': {
query: '如何提高睡眠质量?',
query: '如何提高睡眠质量？',
documents: [
'保持规律的作息时间，晚上避免使用电子产品。',
'参加更多社交活动有助于提高情绪。',
src/pages/profile/components/appearance.tsx
+36 -15
View File
@@ -1,7 +1,9 @@
import useUserSettings from '@/hooks/use-user-settings';
import langConfigMap from '@/locales/lang-config-map';
import { MoonOutlined, SunOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { getAllLocales, setLocale, useIntl } from '@umijs/max';
import { Select } from 'antd';
import _ from 'lodash';
import React from 'react';
import styled from 'styled-components';
@@ -10,21 +12,19 @@ const Wrapper = styled.div`
flex-direction: column;
gap: 16px;
padding: 16px 0;
.theme {
`;
const SettingsItem = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
max-width: 300px;
.label {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 300px;
}
.theme-label {
display: flex;
align-items: center;
font-size: 16px;
font-size: 14px;
font-weight: var(--font-weight-500);
}
.tips {
color: var(--ant-color-text-secondary);
}
`;
const Appearance: React.FC = () => {
@@ -33,6 +33,7 @@ const Appearance: React.FC = () => {
console.log('userSettings', userSettings);
const intl = useIntl();
const allLocals = getAllLocales();
const ThemeOptions = [
{
@@ -56,10 +57,17 @@ const Appearance: React.FC = () => {
setTheme(value);
};
console.log('allLocals', allLocals);
const languageOptions = allLocals.map((locale) => ({
value: locale,
label: _.get(langConfigMap, [locale, 'label'])
}));
return (
<Wrapper>
<div className="theme">
<span className="theme-label">
<SettingsItem>
<span className="label">
<span>{intl.formatMessage({ id: 'common.appearance.theme' })}</span>
</span>
<Select
@@ -68,7 +76,20 @@ const Appearance: React.FC = () => {
onChange={handleOnChange}
style={{ width: 200 }}
></Select>
</div>
</SettingsItem>
<SettingsItem>
<span className="label">
<span>{intl.formatMessage({ id: 'common.settings.language' })}</span>
</span>
<Select
value={intl.locale}
options={languageOptions}
onChange={(value) => {
setLocale(value, false);
}}
style={{ width: 200 }}
></Select>
</SettingsItem>
</Wrapper>
);
};
src/pages/resources/components/gpus.tsx
+133 -117
View File
@@ -4,6 +4,7 @@ import ProgressBar from '@/components/progress-bar';
import InfoColumn from '@/components/simple-table/info-column';
import useTableFetch from '@/hooks/use-table-fetch';
import { convertFileSize } from '@/utils';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { ConfigProvider, Empty, Table } from 'antd';
import _ from 'lodash';
@@ -69,128 +70,143 @@ const GPUList: React.FC = () => {
return (
<>
<FilterBar
buttonText={intl.formatMessage({ id: 'resources.button.create' })}
handleSearch={handleSearch}
handleInputChange={handleNameChange}
showDeleteButton={false}
showPrimaryButton={false}
width={{ input: 300 }}
></FilterBar>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
dataSource={dataSource.dataList}
loading={dataSource.loading}
rowKey="id"
onChange={handleTableChange}
pagination={{
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
>
<Column
title={intl.formatMessage({ id: 'common.table.name' })}
dataIndex="name"
key="name"
width={240}
render={(text, record) => {
return (
<AutoTooltip ghost maxWidth={240}>
{text}
</AutoTooltip>
);
<PageContainer
ghost
header={{
title: 'GPUs',
style: {
paddingInline: 'var(--layout-content-header-inlinepadding)'
},
breadcrumb: {}
}}
extra={[]}
>
<FilterBar
marginBottom={22}
buttonText={intl.formatMessage({ id: 'resources.button.create' })}
handleSearch={handleSearch}
handleInputChange={handleNameChange}
showDeleteButton={false}
showPrimaryButton={false}
width={{ input: 300 }}
></FilterBar>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
dataSource={dataSource.dataList}
loading={dataSource.loading}
rowKey="id"
onChange={handleTableChange}
pagination={{
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.index' })}
dataIndex="index"
key="index"
render={(text, record: GPUDeviceItem) => {
return <span>{record.index}</span>;
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.workername' })}
dataIndex="worker_name"
key="worker_name"
width={200}
render={(text, record: GPUDeviceItem) => {
return (
<span style={{ display: 'flex', width: '100%' }}>
<AutoTooltip ghost maxWidth={340}>
>
<Column
title={intl.formatMessage({ id: 'common.table.name' })}
dataIndex="name"
key="name"
width={240}
render={(text, record) => {
return (
<AutoTooltip ghost maxWidth={240}>
{text}
</AutoTooltip>
</span>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.vender' })}
dataIndex="vendor"
key="vendor"
/>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.index' })}
dataIndex="index"
key="index"
render={(text, record: GPUDeviceItem) => {
return <span>{record.index}</span>;
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.workername' })}
dataIndex="worker_name"
key="worker_name"
width={200}
render={(text, record: GPUDeviceItem) => {
return (
<span style={{ display: 'flex', width: '100%' }}>
<AutoTooltip ghost maxWidth={340}>
{text}
</AutoTooltip>
</span>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.vender' })}
dataIndex="vendor"
key="vendor"
/>
<Column
title={`${intl.formatMessage({ id: 'resources.table.temperature' })} (°C)`}
dataIndex="temperature"
key="Temperature"
render={(text, record: GPUDeviceItem) => {
return <span>{text ? _.round(text, 1) : '-'}</span>;
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.gpuutilization' })}
dataIndex="gpuUtil"
key="gpuUtil"
render={(text, record: GPUDeviceItem) => {
return (
<>
{record.core ? (
<ProgressBar
percent={_.round(record.core?.utilization_rate, 2)}
></ProgressBar>
) : (
'-'
)}
</>
);
}}
/>
<Column
title={`${intl.formatMessage({ id: 'resources.table.temperature' })} (°C)`}
dataIndex="temperature"
key="Temperature"
render={(text, record: GPUDeviceItem) => {
return <span>{text ? _.round(text, 1) : '-'}</span>;
}}
/>
<Column
title={intl.formatMessage({
id: 'resources.table.gpuutilization'
})}
dataIndex="gpuUtil"
key="gpuUtil"
render={(text, record: GPUDeviceItem) => {
return (
<>
{record.core ? (
<ProgressBar
percent={_.round(record.core?.utilization_rate, 2)}
></ProgressBar>
) : (
'-'
)}
</>
);
}}
/>
<Column
title={intl.formatMessage({
id: 'resources.table.vramutilization'
})}
dataIndex="VRAM"
key="VRAM"
render={(text, record: GPUDeviceItem) => {
return (
<ProgressBar
percent={
record.memory?.used
? _.round(record.memory?.utilization_rate, 0)
: _.round(
record.memory?.allocated / record.memory?.total,
0
) * 100
}
label={
<InfoColumn
fieldList={fieldList}
data={record.memory}
></InfoColumn>
}
></ProgressBar>
);
}}
/>
</Table>
</ConfigProvider>
<Column
title={intl.formatMessage({
id: 'resources.table.vramutilization'
})}
dataIndex="VRAM"
key="VRAM"
render={(text, record: GPUDeviceItem) => {
return (
<ProgressBar
percent={
record.memory?.used
? _.round(record.memory?.utilization_rate, 0)
: _.round(
record.memory?.allocated / record.memory?.total,
0
) * 100
}
label={
<InfoColumn
fieldList={fieldList}
data={record.memory}
></InfoColumn>
}
></ProgressBar>
);
}}
/>
</Table>
</ConfigProvider>
</PageContainer>
</>
);
};
src/pages/resources/components/model-files.tsx
+76 -60
View File
@@ -26,6 +26,7 @@ import {
CopyOutlined,
InfoCircleOutlined
} from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl, useNavigate } from '@umijs/max';
import { ConfigProvider, Empty, Table, Tag, Typography, message } from 'antd';
import dayjs from 'dayjs';
@@ -541,7 +542,7 @@ const ModelFiles = () => {
});
message.success(intl.formatMessage({ id: 'common.message.success' }));
setModelsExpandKeys([modelData.id]);
navigate('/models/list');
navigate('/models/deployment');
} catch (error) {
// console.log('error', error);
}
@@ -648,66 +649,81 @@ const ModelFiles = () => {
return (
<>
<FilterBar
actionType="dropdown"
selectHolder="resources.filter.worker"
inputHolder="resources.filter.path"
buttonText={intl.formatMessage({ id: 'resources.modelfiles.download' })}
handleSelectChange={handleWorkerChange}
handleDeleteByBatch={handleDeleteByBatch}
handleClickPrimary={handleClickDropdown}
handleSearch={handleSearch}
selectOptions={workersList}
handleInputChange={handleNameChange}
rowSelection={rowSelection}
actionItems={onLineSourceOptions}
showSelect={true}
></FilterBar>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
rowKey="id"
tableLayout="fixed"
style={{ width: '100%' }}
onChange={handleTableChange}
dataSource={dataSource.dataList}
loading={dataSource.loading}
<PageContainer
ghost
header={{
title: intl.formatMessage({ id: 'resources.modelfiles.modelfile' }),
style: {
paddingInline: 'var(--layout-content-header-inlinepadding)'
},
breadcrumb: {}
}}
extra={[]}
>
<FilterBar
marginBottom={22}
actionType="dropdown"
selectHolder="resources.filter.worker"
inputHolder="resources.filter.path"
buttonText={intl.formatMessage({
id: 'resources.modelfiles.download'
})}
handleSelectChange={handleWorkerChange}
handleDeleteByBatch={handleDeleteByBatch}
handleClickPrimary={handleClickDropdown}
handleSearch={handleSearch}
selectOptions={workersList}
handleInputChange={handleNameChange}
rowSelection={rowSelection}
columns={columns}
pagination={{
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
></Table>
</ConfigProvider>
<DeleteModal ref={modalRef}></DeleteModal>
<DownloadModal
onCancel={handleDownloadCancel}
onOk={handleDownload}
title={intl.formatMessage({ id: 'resources.modelfiles.download' })}
open={downloadModalStatus.show}
source={downloadModalStatus.source}
width={downloadModalStatus.width}
hasLinuxWorker={downloadModalStatus.hasLinuxWorker}
workersList={readyWorkers}
></DownloadModal>
<DeployModal
deploymentType="modelFiles"
title={intl.formatMessage({ id: 'models.button.deploy' })}
onCancel={handleDeployModalCancel}
onOk={handleCreateModel}
open={openDeployModal.show}
action={PageAction.CREATE}
source={openDeployModal.source}
width={openDeployModal.width}
gpuOptions={openDeployModal.gpuOptions}
modelFileOptions={openDeployModal.modelFileOptions || []}
initialValues={openDeployModal.initialValues}
isGGUF={openDeployModal.isGGUF}
></DeployModal>
actionItems={onLineSourceOptions}
showSelect={true}
></FilterBar>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
rowKey="id"
tableLayout="fixed"
style={{ width: '100%' }}
onChange={handleTableChange}
dataSource={dataSource.dataList}
loading={dataSource.loading}
rowSelection={rowSelection}
columns={columns}
pagination={{
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
></Table>
</ConfigProvider>
<DeleteModal ref={modalRef}></DeleteModal>
<DownloadModal
onCancel={handleDownloadCancel}
onOk={handleDownload}
title={intl.formatMessage({ id: 'resources.modelfiles.download' })}
open={downloadModalStatus.show}
source={downloadModalStatus.source}
width={downloadModalStatus.width}
hasLinuxWorker={downloadModalStatus.hasLinuxWorker}
workersList={readyWorkers}
></DownloadModal>
<DeployModal
deploymentType="modelFiles"
title={intl.formatMessage({ id: 'models.button.deploy' })}
onCancel={handleDeployModalCancel}
onOk={handleCreateModel}
open={openDeployModal.show}
action={PageAction.CREATE}
source={openDeployModal.source}
width={openDeployModal.width}
gpuOptions={openDeployModal.gpuOptions}
modelFileOptions={openDeployModal.modelFileOptions || []}
initialValues={openDeployModal.initialValues}
isGGUF={openDeployModal.isGGUF}
></DeployModal>
</PageContainer>
</>
);
};
src/pages/resources/components/workers.tsx
+261 -244
View File
@@ -13,6 +13,7 @@ import {
EditOutlined,
InfoCircleOutlined
} from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { ConfigProvider, Empty, Table, Tooltip, message } from 'antd';
import _ from 'lodash';
@@ -202,263 +203,279 @@ const Workers: React.FC = () => {
return (
<>
<FilterBar
buttonText={intl.formatMessage({ id: 'resources.button.create' })}
handleDeleteByBatch={handleDeleteBatch}
handleSearch={handleSearch}
handleClickPrimary={handleAddWorker}
handleInputChange={handleNameChange}
rowSelection={rowSelection}
width={{ input: 300 }}
></FilterBar>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
style={{ width: '100%' }}
dataSource={dataSource.dataList}
loading={dataSource.loading}
rowKey="id"
onChange={handleTableChange}
<PageContainer
ghost
header={{
title: 'Workers',
style: {
paddingInline: 'var(--layout-content-header-inlinepadding)'
},
breadcrumb: {}
}}
extra={[]}
>
<FilterBar
marginBottom={22}
buttonText={intl.formatMessage({ id: 'resources.button.create' })}
handleDeleteByBatch={handleDeleteBatch}
handleSearch={handleSearch}
handleClickPrimary={handleAddWorker}
handleInputChange={handleNameChange}
rowSelection={rowSelection}
pagination={{
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
>
<Column
title={intl.formatMessage({ id: 'common.table.name' })}
dataIndex="name"
key="name"
width={100}
render={(text, record: ListItem) => {
return (
<AutoTooltip ghost maxWidth={240}>
<span>{record.name}</span>
</AutoTooltip>
);
width={{ input: 300 }}
></FilterBar>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
style={{ width: '100%' }}
dataSource={dataSource.dataList}
loading={dataSource.loading}
rowKey="id"
onChange={handleTableChange}
rowSelection={rowSelection}
pagination={{
showSizeChanger: true,
pageSize: queryParams.perPage,
current: queryParams.page,
total: dataSource.total,
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.labels' })}
dataIndex="labels"
key="labels"
width={200}
render={(text, record: ListItem) => {
return (
<div
style={{
display: 'flex',
flexWrap: 'wrap',
gap: 6
}}
>
{_.map(record.labels, (value: any, key: string) => {
return (
<AutoTooltip
key={key}
className="m-r-0"
maxWidth={155}
style={{
paddingInline: 8,
borderRadius: 12
}}
>
<span>{key}</span>
<span>:{value}</span>
</AutoTooltip>
);
})}
</div>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'common.table.status' })}
dataIndex="state"
key="state"
render={(text, record: ListItem) => {
return (
<StatusTag
maxTooltipWidth={400}
statusValue={{
status: status[record.state] as any,
text: WorkerStatusMapValue[record.state],
message: record.state_message
}}
></StatusTag>
);
}}
/>
<Column title="IP" dataIndex="ip" key="address" />
<Column
title="CPU"
dataIndex="CPU"
key="CPU"
render={(text, record: ListItem) => {
return (
<ProgressBar
percent={_.round(record?.status?.cpu?.utilization_rate, 0)}
></ProgressBar>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.memory' })}
dataIndex="memory"
key="Memory"
render={(text, record: ListItem) => {
return (
<ProgressBar
percent={formateUtilazation(
record?.status?.memory?.used,
record?.status?.memory?.total
)}
label={
<InfoColumn
fieldList={fieldList}
data={record.status.memory}
></InfoColumn>
}
></ProgressBar>
);
}}
/>
<Column
title="GPU"
dataIndex="GPU"
key="GPU"
render={(text, record: ListItem) => {
return (
<span className="flex-column flex-gap-2">
{_.map(
_.sortBy(record?.status?.gpu_devices || [], ['index']),
(item: GPUDeviceItem, index: string) => {
>
<Column
title={intl.formatMessage({ id: 'common.table.name' })}
dataIndex="name"
key="name"
width={100}
render={(text, record: ListItem) => {
return (
<AutoTooltip ghost maxWidth={240}>
<span>{record.name}</span>
</AutoTooltip>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.labels' })}
dataIndex="labels"
key="labels"
width={200}
render={(text, record: ListItem) => {
return (
<div
style={{
display: 'flex',
flexWrap: 'wrap',
gap: 6
}}
>
{_.map(record.labels, (value: any, key: string) => {
return (
<span className="flex-center" key={index}>
<span
className="m-r-5"
style={{ display: 'flex', width: 25 }}
>
[{item.index}]
</span>
{item.core ? (
<ProgressBar
key={index}
percent={_.round(item.core?.utilization_rate, 0)}
></ProgressBar>
) : (
'-'
)}
</span>
<AutoTooltip
key={key}
className="m-r-0"
maxWidth={155}
style={{
paddingInline: 8,
borderRadius: 12
}}
>
<span>{key}</span>
<span>:{value}</span>
</AutoTooltip>
);
})}
</div>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'common.table.status' })}
dataIndex="state"
key="state"
render={(text, record: ListItem) => {
return (
<StatusTag
maxTooltipWidth={400}
statusValue={{
status: status[record.state] as any,
text: WorkerStatusMapValue[record.state],
message: record.state_message
}}
></StatusTag>
);
}}
/>
<Column title="IP" dataIndex="ip" key="address" />
<Column
title="CPU"
dataIndex="CPU"
key="CPU"
render={(text, record: ListItem) => {
return (
<ProgressBar
percent={_.round(record?.status?.cpu?.utilization_rate, 0)}
></ProgressBar>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.memory' })}
dataIndex="memory"
key="Memory"
render={(text, record: ListItem) => {
return (
<ProgressBar
percent={formateUtilazation(
record?.status?.memory?.used,
record?.status?.memory?.total
)}
label={
<InfoColumn
fieldList={fieldList}
data={record.status.memory}
></InfoColumn>
}
)}
</span>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.vram' })}
dataIndex="VRAM"
key="VRAM"
render={(text, record: ListItem) => {
return (
<span className="flex-column flex-gap-2">
{_.map(
_.sortBy(record?.status?.gpu_devices || [], ['index']),
(item: GPUDeviceItem, index: string) => {
return (
<span key={index}>
<span className="flex-center">
></ProgressBar>
);
}}
/>
<Column
title="GPU"
dataIndex="GPU"
key="GPU"
render={(text, record: ListItem) => {
return (
<span className="flex-column flex-gap-2">
{_.map(
_.sortBy(record?.status?.gpu_devices || [], ['index']),
(item: GPUDeviceItem, index: string) => {
return (
<span className="flex-center" key={index}>
<span
className="m-r-5"
style={{ display: 'flex', width: 25 }}
>
[{item.index}]
</span>
<ProgressBar
key={index}
percent={
item.memory?.used
? _.round(item.memory?.utilization_rate, 0)
: _.round(
(item.memory?.allocated /
item.memory?.total) *
100,
0
)
}
label={
<InfoColumn
fieldList={fieldList}
data={item.memory}
></InfoColumn>
}
></ProgressBar>
{item.memory.is_unified_memory && (
<Tooltip
title={intl.formatMessage({
id: 'resources.table.unified'
})}
>
<InfoCircleOutlined
className="m-l-5"
style={{ color: 'var(--ant-blue-5)' }}
/>
</Tooltip>
{item.core ? (
<ProgressBar
key={index}
percent={_.round(
item.core?.utilization_rate,
0
)}
></ProgressBar>
) : (
'-'
)}
</span>
</span>
);
}
)}
</span>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.disk' })}
dataIndex="storage"
key="storage"
render={(text, record: ListItem) => {
return (
<ProgressBar
percent={calcStorage(record.status?.filesystem)}
label={renderStorageTooltip(record.status.filesystem)}
></ProgressBar>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'common.table.operation' })}
key="operation"
render={(text, record: ListItem) => {
return (
<DropdownButtons
items={ActionList}
onSelect={(val) => handleSelect(val, record)}
></DropdownButtons>
);
}}
/>
</Table>
</ConfigProvider>
<DeleteModal ref={modalRef}></DeleteModal>
<AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker>
<UpdateLabels
open={updateLabelsData.open}
onOk={handleUpdateLabelsOk}
onCancel={handleCancelUpdateLabels}
data={{
name: updateLabelsData.data.name,
labels: updateLabelsData.data.labels
}}
></UpdateLabels>
);
}
)}
</span>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.vram' })}
dataIndex="VRAM"
key="VRAM"
render={(text, record: ListItem) => {
return (
<span className="flex-column flex-gap-2">
{_.map(
_.sortBy(record?.status?.gpu_devices || [], ['index']),
(item: GPUDeviceItem, index: string) => {
return (
<span key={index}>
<span className="flex-center">
<span
className="m-r-5"
style={{ display: 'flex', width: 25 }}
>
[{item.index}]
</span>
<ProgressBar
key={index}
percent={
item.memory?.used
? _.round(item.memory?.utilization_rate, 0)
: _.round(
(item.memory?.allocated /
item.memory?.total) *
100,
0
)
}
label={
<InfoColumn
fieldList={fieldList}
data={item.memory}
></InfoColumn>
}
></ProgressBar>
{item.memory.is_unified_memory && (
<Tooltip
title={intl.formatMessage({
id: 'resources.table.unified'
})}
>
<InfoCircleOutlined
className="m-l-5"
style={{ color: 'var(--ant-blue-5)' }}
/>
</Tooltip>
)}
</span>
</span>
);
}
)}
</span>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'resources.table.disk' })}
dataIndex="storage"
key="storage"
render={(text, record: ListItem) => {
return (
<ProgressBar
percent={calcStorage(record.status?.filesystem)}
label={renderStorageTooltip(record.status.filesystem)}
></ProgressBar>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'common.table.operation' })}
key="operation"
render={(text, record: ListItem) => {
return (
<DropdownButtons
items={ActionList}
onSelect={(val) => handleSelect(val, record)}
></DropdownButtons>
);
}}
/>
</Table>
</ConfigProvider>
<DeleteModal ref={modalRef}></DeleteModal>
<AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker>
<UpdateLabels
open={updateLabelsData.open}
onOk={handleUpdateLabelsOk}
onCancel={handleCancelUpdateLabels}
data={{
name: updateLabelsData.data.name,
labels: updateLabelsData.data.labels
}}
></UpdateLabels>
</PageContainer>
</>
);
};
src/pages/users/index.tsx
+2 -1
View File
@@ -158,7 +158,8 @@ const Users: React.FC = () => {
title: intl.formatMessage({ id: 'users.title' }),
style: {
paddingInline: 'var(--layout-content-header-inlinepadding)'
}
},
breadcrumb: {}
}}
extra={[]}
>