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

refactor: user table list

Browse Source
This commit is contained in:
jialin
2025-10-13 19:55:08 +08:00
parent d3f39ae06b
commit 2c9f5062a9
10 changed files with 254 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/locales/en-US/models.ts
+2 -1
View File
@@ -181,5 +181,6 @@ export default {
'models.table.noselected': 'No users selected',
'models.table.users.all': 'All Users',
'models.table.users.selected': 'Selected Users',
'models.table.nouserFound': 'No users found'
'models.table.nouserFound': 'No users found',
'models.form.performance': 'Performance'
};
src/locales/ja-JP/models.ts
+4 -2
View File
@@ -178,7 +178,8 @@ export default {
'models.table.noselected': 'No users selected',
'models.table.users.all': 'All Users',
'models.table.users.selected': 'Selected Users',
'models.table.nouserFound': 'No users found'
'models.table.nouserFound': 'No users found',
'models.form.performance': 'Performance'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -200,5 +201,6 @@ export default {
// 16. 'models.table.nouserFound': 'No users found',
// 17. 'models.table.users.all': 'All Users',
// 18. 'models.table.users.selected': 'Selected Users',
// 19. 'models.table.nouserFound': 'No users found'
// 19. 'models.table.nouserFound': 'No users found',
// 20. 'models.form.performance': 'Performance'
// ========== End of To-Do List ==========
src/locales/ru-RU/models.ts
+4 -2
View File
@@ -181,7 +181,8 @@ export default {
'models.table.noselected': 'No users selected',
'models.table.users.all': 'All users',
'models.table.users.selected': 'Selected users',
'models.table.nouserFound': 'No users found'
'models.table.nouserFound': 'No users found',
'models.form.performance': 'Performance'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -195,5 +196,6 @@ export default {
// 8. 'models.table.noselected': 'No users selected',
// 9. 'models.table.users.all': 'All users',
// 10. 'models.table.users.selected': 'Selected users',
// 11. 'models.table.nouserFound': 'No users found'
// 11. 'models.table.nouserFound': 'No users found',
// 12. 'models.form.performance': 'Performance'
// ========== End of To-Do List ==========
src/locales/zh-CN/models.ts
+2 -1
View File
@@ -171,5 +171,6 @@ export default {
'models.table.noselected': '未选择用户',
'models.table.users.all': '所有用户',
'models.table.users.selected': '已选用户',
'models.table.nouserFound': '未找到用户'
'models.table.nouserFound': '未找到用户',
'models.form.performance': '性能'
};
src/pages/llmodels/components/instance-item.tsx
+6 -7
View File
@@ -12,7 +12,6 @@ import useDownloadStream from '@/hooks/use-download-stream';
import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
import { convertFileSize } from '@/utils';
import {
CodeOutlined,
DeleteOutlined,
DownloadOutlined,
HddFilled,
@@ -273,12 +272,12 @@ const childActionList = [
],
icon: <IconFont type="icon-logs" />
},
{
label: 'Terminal',
locale: false,
key: 'terminal',
icon: <CodeOutlined />
},
// {
// label: 'Terminal',
// locale: false,
// key: 'terminal',
// icon: <CodeOutlined />
// },
{
label: 'common.button.downloadLog',
key: 'download',
src/pages/llmodels/components/search-model.tsx
+5 -8
View File
@@ -23,6 +23,7 @@ import SearchResult from './search-result';
const filterOptions = [
{ label: 'AWQ', value: 'awq' },
{ label: 'GPTQ', value: 'gptq' }
// { label: 'GGUF', value: 'gguf' }
];
const PaginationMain = styled(Pagination)`
.ant-pagination-slash {
@@ -532,13 +533,9 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
<BaseSelect
value={dataSource.sortType}
onChange={handleSortChange}
labelRender={({ label }) => {
return (
<span>
{intl.formatMessage({ id: 'model.deploy.sort' })}: {label}
</span>
);
}}
prefix={
<span>{intl.formatMessage({ id: 'model.deploy.sort' })}:</span>
}
options={modelFilesSortOptions}
size="middle"
style={{ width: '150px' }}
@@ -549,7 +546,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
onChange={handleFilterChange}
options={filterOptions}
size="middle"
placeholder="quantization type"
placeholder={intl.formatMessage({ id: 'common.input.type' })}
style={{ width: 150 }}
></BaseSelect>
</span>
src/pages/resources/hooks/use-worker-columns.tsx
+5 -6
View File
@@ -9,7 +9,6 @@ import {
DeleteOutlined,
DownloadOutlined,
EditOutlined,
FileTextOutlined,
InfoCircleOutlined
} from '@ant-design/icons';
import { useIntl } from '@umijs/max';
@@ -22,11 +21,11 @@ import { Filesystem, GPUDeviceItem, ListItem } from '../config/types';
const ActionList = [
{ label: 'common.button.edit', key: 'edit', icon: <EditOutlined /> },
{
label: 'common.button.detail',
key: 'details',
icon: <FileTextOutlined></FileTextOutlined>
},
// {
// label: 'common.button.detail',
// key: 'details',
// icon: <FileTextOutlined></FileTextOutlined>
// },
{
label: 'resources.worker.download.privatekey',
key: 'download_ssh_key',
src/pages/users/components/add-modal.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ type AddModalProps = {
action: PageActionType;
open: boolean;
onOk: (values: FormData) => void;
data?: ListItem;
data?: ListItem | null;
onCancel: () => void;
};
const AddModal: React.FC<AddModalProps> = ({
src/pages/users/hooks/use-users-columns.tsx
+163
View File
@@ -0,0 +1,163 @@
// columns.ts
import AutoTooltip from '@/components/auto-tooltip';
import DropdownButtons from '@/components/drop-down-buttons';
import IconFont from '@/components/icon-font';
import icons from '@/components/icon-font/icons';
import { useIntl } from '@umijs/max';
import { Tag } from 'antd';
import type { SortOrder } from 'antd/es/table/interface';
import { ColumnsType } from 'antd/lib/table';
import dayjs from 'dayjs';
import { useMemo } from 'react';
import { ListItem } from '../config/types';
interface ColumnsHookProps {
handleSelect: (val: string, record: ListItem) => void;
sortOrder: SortOrder;
}
const actionList: Global.ActionItem[] = [
{
label: 'common.button.edit',
key: 'edit',
icon: icons.EditOutlined
},
{
label: 'common.button.delete',
key: 'delete',
icon: icons.DeleteOutlined,
props: { danger: true }
}
];
const useUsersColumns = ({
handleSelect,
sortOrder
}: ColumnsHookProps): ColumnsType<ListItem> => {
const intl = useIntl();
return useMemo(() => {
return [
{
title: intl.formatMessage({ id: 'common.table.name' }),
dataIndex: 'username',
key: 'username',
render: (text: string, record: ListItem) => (
<AutoTooltip ghost style={{ maxWidth: 400 }}>
{text}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'users.table.role' }),
dataIndex: 'role',
key: 'role',
ellipsis: {
showTitle: false
},
render: (text: string, record: ListItem) => {
return record.is_admin ? (
<AutoTooltip ghost minWidth={50}>
<IconFont type="icon-manage_user" className="size-16"></IconFont>
<span className="m-l-5">
{intl.formatMessage({ id: 'users.form.admin' })}
</span>
</AutoTooltip>
) : (
<AutoTooltip ghost minWidth={50}>
<IconFont type="icon-user" className="size-16"></IconFont>
<span className="m-l-5">
{intl.formatMessage({ id: 'users.form.user' })}
</span>
</AutoTooltip>
);
}
},
{
title: intl.formatMessage({ id: 'users.form.fullname' }),
dataIndex: 'full_name',
key: 'full_name',
ellipsis: {
showTitle: false
},
render: (text: string, record: ListItem) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'users.form.source' }),
dataIndex: 'source',
key: 'source',
ellipsis: {
showTitle: false
},
render: (text: string[], record: ListItem) => (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'users.table.status' }),
dataIndex: 'is_active',
key: 'is_active',
ellipsis: {
showTitle: false
},
render: (text: string, record: ListItem) => {
return (
<>
<Tag
style={{
marginRight: 0,
paddingInline: 12,
borderRadius: 12
}}
color={record.is_active ? 'success' : 'default'}
>
{intl.formatMessage({
id: record.is_active
? 'users.status.active'
: 'users.status.inactive'
})}
</Tag>
</>
);
}
},
{
title: intl.formatMessage({ id: 'common.table.createTime' }),
dataIndex: 'created_at',
key: 'created_at',
defaultSortOrder: 'descend',
showSorterTooltip: false,
sortOrder,
sorter: false,
ellipsis: {
showTitle: false
},
render: (text: number) => (
<AutoTooltip ghost>
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
</AutoTooltip>
)
},
{
title: intl.formatMessage({ id: 'common.table.operation' }),
key: 'operation',
dataIndex: 'operation',
span: 3,
render: (text, record) => (
<DropdownButtons
items={actionList}
onSelect={(val) => handleSelect(val, record)}
/>
)
}
];
}, [sortOrder, intl, handleSelect]);
};
export default useUsersColumns;
src/pages/users/index.tsx
+62 -257
View File
@@ -1,40 +1,18 @@
import AutoTooltip from '@/components/auto-tooltip';
import DeleteModal from '@/components/delete-modal';
import DropdownButtons from '@/components/drop-down-buttons';
import IconFont from '@/components/icon-font';
import PageTools from '@/components/page-tools';
import { FilterBar } from '@/components/page-tools';
import { PageAction } from '@/config';
import HotKeys from '@/config/hotkeys';
import type { PageActionType } from '@/config/types';
import useTableFetch from '@/hooks/use-table-fetch';
import {
DeleteOutlined,
EditOutlined,
PlusOutlined,
SearchOutlined,
SyncOutlined
} from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import {
Button,
ConfigProvider,
Empty,
Input,
message,
Space,
Switch,
Table,
Tag
} from 'antd';
import dayjs from 'dayjs';
import { useMemoizedFn } from 'ahooks';
import { ConfigProvider, Empty, message, Switch, Table } from 'antd';
import { useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import styled from 'styled-components';
import { createUser, deleteUser, queryUsersList, updateUser } from './apis';
import AddModal from './components/add-modal';
import { FormData, ListItem } from './config/types';
const { Column } = Table;
import useUsersColumns from './hooks/use-users-columns';
const StyledSwitch = styled(Switch)`
.ant-switch-handle::before {
@@ -43,22 +21,6 @@ const StyledSwitch = styled(Switch)`
}
`;
const ActionList = [
{
key: 'edit',
label: 'common.button.edit',
icon: <EditOutlined></EditOutlined>
},
{
key: 'delete',
props: {
danger: true
},
label: 'common.button.delete',
icon: <DeleteOutlined></DeleteOutlined>
}
];
const Users: React.FC = () => {
const {
dataSource,
@@ -80,65 +42,81 @@ const Users: React.FC = () => {
});
const intl = useIntl();
const [openAddModal, setOpenAddModal] = useState(false);
const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
const [title, setTitle] = useState<string>('');
const [currentData, setCurrentData] = useState<ListItem | undefined>(
undefined
);
const [openAddModalStatus, setOpenAddModalStatus] = useState<{
action: PageActionType;
open: boolean;
title: string;
currentData?: ListItem | null;
}>({
action: PageAction.CREATE,
title: '',
open: false,
currentData: null
});
const handleAddUser = () => {
setOpenAddModal(true);
setAction(PageAction.CREATE);
setTitle(intl.formatMessage({ id: 'users.form.create' }));
setOpenAddModalStatus({
action: PageAction.CREATE,
title: intl.formatMessage({ id: 'users.form.create' }),
open: true,
currentData: null
});
};
const handleModalOk = async (data: FormData) => {
const params = {
...currentData,
...openAddModalStatus.currentData,
...data,
is_admin: data.is_admin === 'admin'
};
try {
if (action === PageAction.EDIT) {
if (openAddModalStatus.action === PageAction.EDIT) {
await updateUser({
data: {
...params,
id: currentData?.id
id: openAddModalStatus.currentData?.id
}
});
} else {
await createUser({ data: params });
}
fetchData();
setOpenAddModal(false);
setOpenAddModalStatus({
...openAddModalStatus,
open: false
});
message.success(intl.formatMessage({ id: 'common.message.success' }));
} catch (error) {
setOpenAddModal(false);
setOpenAddModalStatus({ ...openAddModalStatus, open: false });
message.error(intl.formatMessage({ id: 'common.message.fail' }));
}
};
const handleModalCancel = () => {
console.log('handleModalCancel');
setOpenAddModal(false);
setOpenAddModalStatus({
...openAddModalStatus,
open: false,
currentData: null
});
};
const handleEditUser = (row: ListItem) => {
setCurrentData(row);
setOpenAddModal(true);
setAction(PageAction.EDIT);
setTitle(intl.formatMessage({ id: 'users.form.edit' }));
setOpenAddModalStatus({
title: intl.formatMessage({ id: 'users.form.edit' }),
action: PageAction.EDIT,
open: true,
currentData: row
});
};
const handleSelect = (val: any, row: ListItem) => {
const handleSelect = useMemoizedFn((val: any, row: ListItem) => {
if (val === 'edit') {
handleEditUser(row);
} else if (val === 'delete') {
handleDelete({ ...row, name: row.username });
}
};
});
const handleActiveChange = async (checked: boolean, row: ListItem) => {
try {
@@ -168,15 +146,10 @@ const Users: React.FC = () => {
return <div></div>;
};
useHotkeys(
HotKeys.CREATE,
() => {
handleAddUser();
},
{
enabled: !openAddModal
}
);
const columns = useUsersColumns({
handleSelect,
sortOrder
});
return (
<>
@@ -191,56 +164,20 @@ const Users: React.FC = () => {
}}
extra={[]}
>
<PageTools
<FilterBar
marginBottom={22}
left={
<Space>
<Input
prefix={
<SearchOutlined
style={{ color: 'var(--ant-color-text-placeholder)' }}
></SearchOutlined>
}
placeholder={intl.formatMessage({ id: 'common.filter.name' })}
style={{ width: 300 }}
allowClear
onChange={handleNameChange}
></Input>
<Button
type="text"
style={{ color: 'var(--ant-color-text-tertiary)' }}
onClick={handleSearch}
icon={<SyncOutlined></SyncOutlined>}
></Button>
</Space>
}
right={
<Space size={20}>
<Button
icon={<PlusOutlined></PlusOutlined>}
type="primary"
onClick={handleAddUser}
>
{intl.formatMessage({ id: 'users.button.create' })}
</Button>
<Button
icon={<DeleteOutlined />}
danger
onClick={handleDeleteBatch}
disabled={!rowSelection.selectedRowKeys.length}
>
<span>
{intl?.formatMessage?.({ id: 'common.button.delete' })}
{rowSelection.selectedRowKeys.length > 0 && (
<span>({rowSelection.selectedRowKeys?.length})</span>
)}
</span>
</Button>
</Space>
}
></PageTools>
marginTop={30}
buttonText={intl.formatMessage({ id: 'users.button.create' })}
handleSearch={handleSearch}
handleDeleteByBatch={handleDeleteBatch}
handleClickPrimary={handleAddUser}
handleInputChange={handleNameChange}
rowSelection={rowSelection}
width={{ input: 300 }}
></FilterBar>
<ConfigProvider renderEmpty={renderEmpty}>
<Table
columns={columns}
dataSource={dataSource.dataList}
rowSelection={rowSelection}
loading={dataSource.loading}
@@ -254,146 +191,14 @@ const Users: React.FC = () => {
hideOnSinglePage: queryParams.perPage === 10,
onChange: handlePageChange
}}
>
<Column
title={intl.formatMessage({ id: 'common.table.name' })}
dataIndex="username"
key="name"
ellipsis={{
showTitle: false
}}
render={(text, record) => {
return (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'users.table.role' })}
dataIndex="role"
key="role"
ellipsis={{
showTitle: false
}}
render={(text, record: ListItem) => {
return record.is_admin ? (
<AutoTooltip ghost minWidth={50}>
<IconFont
type="icon-manage_user"
className="size-16"
></IconFont>
<span className="m-l-5">
{intl.formatMessage({ id: 'users.form.admin' })}
</span>
</AutoTooltip>
) : (
<AutoTooltip ghost minWidth={50}>
<IconFont type="icon-user" className="size-16"></IconFont>
<span className="m-l-5">
{intl.formatMessage({ id: 'users.form.user' })}
</span>
</AutoTooltip>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'users.form.fullname' })}
dataIndex="full_name"
key="full_name"
ellipsis={{
showTitle: false
}}
render={(text, record) => {
return (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'users.form.source' })}
dataIndex="source"
key="source"
ellipsis={{
showTitle: false
}}
render={(text, record) => {
return (
<AutoTooltip ghost minWidth={20}>
{text}
</AutoTooltip>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'users.table.status' })}
dataIndex="is_active"
key="status"
ellipsis={{
showTitle: false
}}
render={(text, record: ListItem) => {
return (
<>
<Tag
style={{ marginRight: 0 }}
color={record.is_active ? 'success' : 'default'}
>
{intl.formatMessage({
id: record.is_active
? 'users.status.active'
: 'users.status.inactive'
})}
</Tag>
</>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'common.table.createTime' })}
dataIndex="created_at"
key="createTime"
defaultSortOrder="descend"
sortOrder={sortOrder}
showSorterTooltip={false}
sorter={false}
ellipsis={{
showTitle: false
}}
render={(text, record) => {
return (
<AutoTooltip ghost minWidth={20}>
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
</AutoTooltip>
);
}}
/>
<Column
title={intl.formatMessage({ id: 'common.table.operation' })}
key="operation"
ellipsis={{
showTitle: false
}}
render={(text, record: ListItem) => {
return (
<DropdownButtons
items={ActionList}
onSelect={(val) => handleSelect(val, record)}
></DropdownButtons>
);
}}
/>
</Table>
></Table>
</ConfigProvider>
</PageContainer>
<AddModal
open={openAddModal}
action={action}
title={title}
data={currentData}
open={openAddModalStatus.open}
action={openAddModalStatus.action}
title={openAddModalStatus.title}
data={openAddModalStatus.currentData}
onCancel={handleModalCancel}
onOk={handleModalOk}
></AddModal>