refactor: user table list

src/locales/en-US/models.ts

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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',
+  //   label: 'Terminal',
-    locale: false,
+  //   locale: false,
-    key: 'terminal',
+  //   key: 'terminal',
-    icon: <CodeOutlined />
+  //   icon: <CodeOutlined />
-  },
+  // },
   {
     label: 'common.button.downloadLog',
     key: 'download',

src/pages/llmodels/components/search-model.tsx

@@ -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 }) => {
+              prefix={
-                return (
+                <span>{intl.formatMessage({ id: 'model.deploy.sort' })}:</span>
-                  <span>
+              }
-                    {intl.formatMessage({ id: 'model.deploy.sort' })}: {label}
-                  </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

@@ -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',
+  //   label: 'common.button.detail',
-    key: 'details',
+  //   key: 'details',
-    icon: <FileTextOutlined></FileTextOutlined>
+  //   icon: <FileTextOutlined></FileTextOutlined>
-  },
+  // },
   {
     label: 'resources.worker.download.privatekey',
     key: 'download_ssh_key',

src/pages/users/components/add-modal.tsx

@@ -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

@@ -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

@@ -1,40 +1,18 @@
-import AutoTooltip from '@/components/auto-tooltip';
 import DeleteModal from '@/components/delete-modal';
-import DropdownButtons from '@/components/drop-down-buttons';
+import { FilterBar } from '@/components/page-tools';
-import IconFont from '@/components/icon-font';
-import PageTools 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 {
+import { useMemoizedFn } from 'ahooks';
-  Button,
+import { ConfigProvider, Empty, message, Switch, Table } from 'antd';
-  ConfigProvider,
-  Empty,
-  Input,
-  message,
-  Space,
-  Switch,
-  Table,
-  Tag
-} from 'antd';
-import dayjs from 'dayjs';
 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 [openAddModalStatus, setOpenAddModalStatus] = useState<{
-
+    action: PageActionType;
-  const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
+    open: boolean;
-  const [title, setTitle] = useState<string>('');
+    title: string;
-  const [currentData, setCurrentData] = useState<ListItem | undefined>(
+    currentData?: ListItem | null;
-    undefined
+  }>({
-  );
+    action: PageAction.CREATE,
+    title: '',
+    open: false,
+    currentData: null
+  });
 
   const handleAddUser = () => {
-    setOpenAddModal(true);
+    setOpenAddModalStatus({
-    setAction(PageAction.CREATE);
+      action: PageAction.CREATE,
-    setTitle(intl.formatMessage({ id: 'users.form.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);
+    setOpenAddModalStatus({
-    setOpenAddModal(true);
+      title: intl.formatMessage({ id: 'users.form.edit' }),
-    setAction(PageAction.EDIT);
+      action: PageAction.EDIT,
-    setTitle(intl.formatMessage({ id: 'users.form.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(
+  const columns = useUsersColumns({
-    HotKeys.CREATE,
+    handleSelect,
-    () => {
+    sortOrder
-      handleAddUser();
+  });
-    },
-    {
-      enabled: !openAddModal
-    }
-  );
 
   return (
     <>
@@ -191,56 +164,20 @@ const Users: React.FC = () => {
         }}
         extra={[]}
       >
-        <PageTools
+        <FilterBar
           marginBottom={22}
-          left={
+          marginTop={30}
-            <Space>
+          buttonText={intl.formatMessage({ id: 'users.button.create' })}
-              <Input
+          handleSearch={handleSearch}
-                prefix={
+          handleDeleteByBatch={handleDeleteBatch}
-                  <SearchOutlined
+          handleClickPrimary={handleAddUser}
-                    style={{ color: 'var(--ant-color-text-placeholder)' }}
+          handleInputChange={handleNameChange}
-                  ></SearchOutlined>
+          rowSelection={rowSelection}
-                }
+          width={{ input: 300 }}
-                placeholder={intl.formatMessage({ id: 'common.filter.name' })}
+        ></FilterBar>
-                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>
         <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
             }}
-          >
+          ></Table>
-            <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>
         </ConfigProvider>
       </PageContainer>
       <AddModal
-        open={openAddModal}
+        open={openAddModalStatus.open}
-        action={action}
+        action={openAddModalStatus.action}
-        title={title}
+        title={openAddModalStatus.title}
-        data={currentData}
+        data={openAddModalStatus.currentData}
         onCancel={handleModalCancel}
         onOk={handleModalOk}
       ></AddModal>