chore: extract fetch hooks for common table

src/components/progress-bar/index.tsx

@@ -11,15 +11,7 @@ const RenderProgress = memo(
     successPercent?: number;
     successColor?: string;
   }) => {
-    const {
-      open,
-      percent,
-      steps = 5,
-      download,
-      label,
-      successPercent,
-      successColor
-    } = props;
+    const { open, percent, download, label, successPercent } = props;
 
     const strokeColor = useMemo(() => {
       if (download) {
@@ -39,7 +31,7 @@ const RenderProgress = memo(
       return (
         <Progress
           percentPosition={{ align: 'center', type: 'inner' }}
-          size={[undefined, 16]}
+          size={['', 16]}
           format={() => {
             return (
               <span
@@ -64,7 +56,11 @@ const RenderProgress = memo(
     return (
       <>
         {label ? (
-          <Tooltip title={label} open={open}>
+          <Tooltip
+            title={label}
+            open={open}
+            overlayInnerStyle={{ paddingInline: 12 }}
+          >
             {renderProgress}
           </Tooltip>
         ) : (

src/components/simple-table/info-column.tsx

@@ -40,7 +40,7 @@ const InfoColumn: React.FC<InfoColumnProps> = (props) => {
                 type="vertical"
                 style={{
                   height: 30,
-                  marginInline: 16,
+                  marginInline: 12,
                   borderColor: 'var(--color-white-light-2)',
                   alignSelf: 'center'
                 }}

src/hooks/use-table-fetch.ts

@@ -0,0 +1,109 @@
+import useTableRowSelection from '@/hooks/use-table-row-selection';
+import useTableSort from '@/hooks/use-table-sort';
+import _ from 'lodash';
+import { useEffect, useState } from 'react';
+
+export default function useTableFetch<ListItem>(options: {
+  fetchAPI: (params: any) => Promise<Global.PageResponse<ListItem>>;
+}) {
+  const { fetchAPI } = options;
+  const rowSelection = useTableRowSelection();
+  const { sortOrder, setSortOrder } = useTableSort({
+    defaultSortOrder: 'descend'
+  });
+
+  const [dataSource, setDataSource] = useState<{
+    dataList: ListItem[];
+    loading: boolean;
+    loadend: boolean;
+    total: number;
+  }>({
+    dataList: [],
+    loading: false,
+    loadend: false,
+    total: 0
+  });
+  const [queryParams, setQueryParams] = useState({
+    page: 1,
+    perPage: 10,
+    search: ''
+  });
+
+  const fetchData = async (params?: { query: any }) => {
+    const { query } = params || {};
+    setDataSource((pre) => {
+      pre.loading = true;
+      return { ...pre };
+    });
+    try {
+      const params = {
+        ..._.pickBy(query || queryParams, (val: any) => !!val)
+      };
+      const res = await fetchAPI(params);
+
+      setDataSource({
+        dataList: res.items || [],
+        loading: false,
+        loadend: true,
+        total: res.pagination.total
+      });
+    } catch (error) {
+      console.log('error', error);
+      setDataSource({
+        dataList: [],
+        loading: false,
+        loadend: true,
+        total: dataSource.total
+      });
+    }
+  };
+
+  const handlePageChange = (page: number, pageSize: number) => {
+    setQueryParams({
+      ...queryParams,
+      page: page,
+      perPage: pageSize || 10
+    });
+    fetchData({ query: { ...queryParams, page, perPage: pageSize || 10 } });
+  };
+
+  const handleTableChange = (pagination: any, filters: any, sorter: any) => {
+    setSortOrder(sorter.order);
+  };
+
+  const handleSearch = (e: any) => {
+    fetchData();
+  };
+
+  const handleNameChange = (e: any) => {
+    setQueryParams({
+      ...queryParams,
+      page: 1,
+      search: e.target.value
+    });
+
+    fetchData({
+      query: {
+        ...queryParams,
+        page: 1,
+        search: e.target.value
+      }
+    });
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return {
+    dataSource,
+    rowSelection,
+    sortOrder,
+    queryParams,
+    fetchData,
+    handlePageChange,
+    handleTableChange,
+    handleSearch,
+    handleNameChange
+  };
+}

src/pages/api-keys/index.tsx

@@ -4,8 +4,7 @@ import PageTools from '@/components/page-tools';
 import { PageAction } from '@/config';
 import HotKeys from '@/config/hotkeys';
 import type { PageActionType } from '@/config/types';
-import useTableRowSelection from '@/hooks/use-table-row-selection';
-import useTableSort from '@/hooks/use-table-sort';
+import useTableFetch from '@/hooks/use-table-fetch';
 import { handleBatchRequest } from '@/utils';
 import { DeleteOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
@@ -20,8 +19,7 @@ import {
   Tooltip
 } from 'antd';
 import dayjs from 'dayjs';
-import _ from 'lodash';
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { deleteApisKey, queryApisKeysList } from './apis';
 import AddAPIKeyModal from './components/add-apikey';
@@ -30,81 +28,25 @@ import { ListItem } from './config/types';
 const { Column } = Table;
 
 const APIKeys: React.FC = () => {
-  const rowSelection = useTableRowSelection();
-  const { sortOrder, setSortOrder } = useTableSort({
-    defaultSortOrder: 'descend'
+  const {
+    dataSource,
+    rowSelection,
+    queryParams,
+    sortOrder,
+    fetchData,
+    handlePageChange,
+    handleTableChange,
+    handleSearch,
+    handleNameChange
+  } = useTableFetch<ListItem>({
+    fetchAPI: queryApisKeysList
   });
+
   const intl = useIntl();
   const modalRef = useRef<any>(null);
-  const [dataSource, setDataSource] = useState<{
-    dataList: ListItem[];
-    loading: boolean;
-    loadend: boolean;
-    total: number;
-  }>({
-    dataList: [],
-    loading: false,
-    loadend: false,
-    total: 0
-  });
+
   const [openAddModal, setOpenAddModal] = useState(false);
   const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
-  const [queryParams, setQueryParams] = useState({
-    page: 1,
-    perPage: 10,
-    search: ''
-  });
-
-  const handlePageChange = (page: number, pageSize: number) => {
-    setQueryParams({
-      ...queryParams,
-      page: page,
-      perPage: pageSize || 10
-    });
-  };
-
-  const handleTableChange = (pagination: any, filters: any, sorter: any) => {
-    setSortOrder(sorter.order);
-  };
-
-  const fetchData = async () => {
-    setDataSource((pre) => {
-      pre.loading = true;
-      return { ...pre };
-    });
-    try {
-      const params = {
-        ..._.pickBy(queryParams, (val: any) => !!val)
-      };
-      const res = await queryApisKeysList(params);
-
-      setDataSource({
-        dataList: res.items || [],
-        loading: false,
-        loadend: true,
-        total: res.pagination.total
-      });
-    } catch (error) {
-      console.log('error', error);
-      setDataSource({
-        dataList: [],
-        loading: false,
-        loadend: true,
-        total: dataSource.total
-      });
-    }
-  };
-  const handleSearch = (e: any) => {
-    fetchData();
-  };
-
-  const handleNameChange = (e: any) => {
-    setQueryParams({
-      ...queryParams,
-      page: 1,
-      search: e.target.value
-    });
-  };
 
   const handleAddUser = () => {
     setOpenAddModal(true);
@@ -163,10 +105,6 @@ const APIKeys: React.FC = () => {
     return <div></div>;
   };
 
-  useEffect(() => {
-    fetchData();
-  }, [queryParams]);
-
   useHotkeys(
     HotKeys.CREATE,
     () => {

src/pages/resources/components/gpus.tsx

@@ -2,13 +2,12 @@ import AutoTooltip from '@/components/auto-tooltip';
 import PageTools from '@/components/page-tools';
 import ProgressBar from '@/components/progress-bar';
 import InfoColumn from '@/components/simple-table/info-column';
-import useTableSort from '@/hooks/use-table-sort';
+import useTableFetch from '@/hooks/use-table-fetch';
 import { convertFileSize } from '@/utils';
 import { SyncOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, ConfigProvider, Empty, Input, Space, Table } from 'antd';
 import _ from 'lodash';
-import { useEffect, useState } from 'react';
 import { queryGpuDevicesList } from '../apis';
 import { GPUDeviceItem } from '../config/types';
 const { Column } = Table;
@@ -41,79 +40,18 @@ const fieldList = [
 ];
 
 const GPUList: React.FC = () => {
-  console.log('GPUList======');
+  const {
+    dataSource,
+    queryParams,
+    handlePageChange,
+    handleTableChange,
+    handleSearch,
+    handleNameChange
+  } = useTableFetch<GPUDeviceItem>({
+    fetchAPI: queryGpuDevicesList
+  });
+
   const intl = useIntl();
-  const { sortOrder, setSortOrder } = useTableSort({
-    defaultSortOrder: 'descend'
-  });
-  const [dataSource, setDataSource] = useState<{
-    dataList: GPUDeviceItem[];
-    loading: boolean;
-    loadend: boolean;
-    total: number;
-  }>({
-    dataList: [],
-    loading: false,
-    loadend: false,
-    total: 0
-  });
-  const [queryParams, setQueryParams] = useState({
-    page: 1,
-    perPage: 10,
-    search: ''
-  });
-
-  const handlePageChange = (page: number, perPage: number | undefined) => {
-    console.log(page, perPage);
-    setQueryParams({
-      ...queryParams,
-      page: page,
-      perPage: perPage || 10
-    });
-  };
-
-  const handleTableChange = (pagination: any, filters: any, sorter: any) => {
-    setSortOrder(sorter.order);
-  };
-
-  const fetchData = async () => {
-    setDataSource((pre) => {
-      pre.loading = true;
-      return { ...pre };
-    });
-    try {
-      const params = {
-        ..._.pickBy(queryParams, (val: any) => !!val)
-      };
-      const res = await queryGpuDevicesList(params);
-
-      setDataSource({
-        dataList: res.items || [],
-        loading: false,
-        loadend: true,
-        total: res.pagination.total
-      });
-    } catch (error) {
-      setDataSource({
-        dataList: [],
-        loading: false,
-        loadend: true,
-        total: dataSource.total
-      });
-      console.log('error', error);
-    }
-  };
-  const handleSearch = (e: any) => {
-    fetchData();
-  };
-
-  const handleNameChange = (e: any) => {
-    setQueryParams({
-      ...queryParams,
-      page: 1,
-      search: e.target.value
-    });
-  };
 
   const renderEmpty = (type?: string) => {
     if (type !== 'Table') return;
@@ -127,10 +65,6 @@ const GPUList: React.FC = () => {
     return <div></div>;
   };
 
-  useEffect(() => {
-    fetchData();
-  }, [queryParams]);
-
   return (
     <>
       <PageTools

src/pages/resources/components/workers.tsx

@@ -6,8 +6,7 @@ import ProgressBar from '@/components/progress-bar';
 import InfoColumn from '@/components/simple-table/info-column';
 import StatusTag from '@/components/status-tag';
 import Hotkeys from '@/config/hotkeys';
-import useTableRowSelection from '@/hooks/use-table-row-selection';
-import useTableSort from '@/hooks/use-table-sort';
+import useTableFetch from '@/hooks/use-table-fetch';
 import { convertFileSize, handleBatchRequest } from '@/utils';
 import {
   DeleteOutlined,
@@ -28,7 +27,7 @@ import {
   message
 } from 'antd';
 import _ from 'lodash';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { deleteWorker, queryWorkersList, updateWorker } from '../apis';
 import { WorkerStatusMapValue, status } from '../config';
@@ -82,29 +81,24 @@ const ActionList = [
 ];
 
 const Workers: React.FC = () => {
-  const { sortOrder, setSortOrder } = useTableSort({
-    defaultSortOrder: 'descend'
+  const {
+    dataSource,
+    rowSelection,
+    queryParams,
+    sortOrder,
+    fetchData,
+    handlePageChange,
+    handleTableChange,
+    handleSearch,
+    handleNameChange
+  } = useTableFetch<ListItem>({
+    fetchAPI: queryWorkersList
   });
+
   const modalRef = useRef<any>(null);
-  const rowSelection = useTableRowSelection();
   const intl = useIntl();
   const [open, setOpen] = useState(false);
-  const [dataSource, setDataSource] = useState<{
-    dataList: ListItem[];
-    loading: boolean;
-    loadend: boolean;
-    total: number;
-  }>({
-    dataList: [],
-    loading: false,
-    loadend: false,
-    total: 0
-  });
-  const [queryParams, setQueryParams] = useState({
-    page: 1,
-    perPage: 10,
-    search: ''
-  });
+
   const [updateLabelsData, setUpdateLabelsData] = useState<{
     open: boolean;
     data: ListItem;
@@ -113,62 +107,6 @@ const Workers: React.FC = () => {
     data: {} as ListItem
   });
 
-  const fetchData = useCallback(async () => {
-    setDataSource((pre) => {
-      pre.loading = true;
-      return { ...pre };
-    });
-    try {
-      const params = {
-        ..._.pickBy(queryParams, (val: any) => !!val)
-      };
-      const res = await queryWorkersList(params);
-
-      setDataSource({
-        dataList: res.items,
-        loading: false,
-        loadend: true,
-        total: res.pagination.total
-      });
-    } catch (error) {
-      setDataSource({
-        dataList: [],
-        loading: false,
-        loadend: true,
-        total: dataSource.total
-      });
-      console.log('error', error);
-    }
-  }, [queryParams]);
-
-  const handlePageChange = (page: number, perPage: number | undefined) => {
-    console.log(page, perPage);
-    setQueryParams({
-      ...queryParams,
-      page: page,
-      perPage: perPage || 10
-    });
-  };
-
-  const handleTableChange = useCallback(
-    (pagination: any, filters: any, sorter: any) => {
-      setSortOrder(sorter.order);
-    },
-    []
-  );
-
-  const handleSearch = (e: any) => {
-    fetchData();
-  };
-
-  const handleNameChange = (e: any) => {
-    setQueryParams({
-      ...queryParams,
-      page: 1,
-      search: e.target.value
-    });
-  };
-
   const formateUtilazation = (val1: number, val2: number): number => {
     if (!val2 || !val1) {
       return 0;
@@ -286,10 +224,6 @@ const Workers: React.FC = () => {
     );
   };
 
-  useEffect(() => {
-    fetchData();
-  }, [queryParams]);
-
   useHotkeys(Hotkeys.CREATE.join(','), handleAddWorker, {
     enabled: !open
   });

src/pages/users/index.tsx

@@ -5,8 +5,7 @@ import PageTools from '@/components/page-tools';
 import { PageAction } from '@/config';
 import HotKeys from '@/config/hotkeys';
 import type { PageActionType } from '@/config/types';
-import useTableRowSelection from '@/hooks/use-table-row-selection';
-import useTableSort from '@/hooks/use-table-sort';
+import useTableFetch from '@/hooks/use-table-fetch';
 import { handleBatchRequest } from '@/utils';
 import {
   DeleteOutlined,
@@ -28,112 +27,53 @@ import {
   message
 } from 'antd';
 import dayjs from 'dayjs';
-import _ from 'lodash';
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { createUser, deleteUser, queryUsersList, updateUser } from './apis';
 import AddModal from './components/add-modal';
 import { FormData, ListItem } from './config/types';
 const { Column } = Table;
 
+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 = () => {
-  console.log('users======');
-  const rowSelection = useTableRowSelection();
-  const { sortOrder, setSortOrder } = useTableSort({
-    defaultSortOrder: 'descend'
+  const {
+    dataSource,
+    rowSelection,
+    queryParams,
+    sortOrder,
+    fetchData,
+    handlePageChange,
+    handleTableChange,
+    handleSearch,
+    handleNameChange
+  } = useTableFetch<ListItem>({
+    fetchAPI: queryUsersList
   });
+
   const intl = useIntl();
   const modalRef = useRef<any>(null);
   const [openAddModal, setOpenAddModal] = useState(false);
-  const [dataSource, setDataSource] = useState<{
-    dataList: ListItem[];
-    loading: boolean;
-    loadend: boolean;
-    total: number;
-  }>({
-    dataList: [],
-    loading: false,
-    loadend: false,
-    total: 0
-  });
+
   const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
   const [title, setTitle] = useState<string>('');
   const [currentData, setCurrentData] = useState<ListItem | undefined>(
     undefined
   );
-  const [queryParams, setQueryParams] = useState({
-    page: 1,
-    perPage: 10,
-    search: ''
-  });
-
-  const ActionList = [
-    {
-      key: 'edit',
-      label: 'common.button.edit',
-      icon: <EditOutlined></EditOutlined>
-    },
-    {
-      key: 'delete',
-      props: {
-        danger: true
-      },
-      label: 'common.button.delete',
-      icon: <DeleteOutlined></DeleteOutlined>
-    }
-  ];
-  const fetchData = async () => {
-    setDataSource((pre) => {
-      pre.loading = true;
-      return { ...pre };
-    });
-    try {
-      const params = {
-        ..._.pickBy(queryParams, (val: any) => !!val)
-      };
-      const res = await queryUsersList(params);
-      setDataSource({
-        dataList: res.items || [],
-        loading: false,
-        loadend: true,
-        total: res.pagination.total
-      });
-    } catch (error) {
-      setDataSource({
-        dataList: [],
-        loading: false,
-        loadend: true,
-        total: dataSource.total
-      });
-      console.log('error', error);
-    }
-  };
-
-  const handlePageChange = (page: number, pageSize: number | undefined) => {
-    console.log(page, pageSize);
-    setQueryParams({
-      ...queryParams,
-      perPage: pageSize || 10,
-      page: page
-    });
-  };
-
-  const handleTableChange = (pagination: any, filters: any, sorter: any) => {
-    console.log('handleTableChange=======', pagination, filters, sorter);
-    setSortOrder(sorter.order);
-  };
-
-  const handleSearch = (e: any) => {
-    fetchData();
-  };
-
-  const handleNameChange = (e: any) => {
-    setQueryParams({
-      ...queryParams,
-      page: 1,
-      search: e.target.value
-    });
-  };
 
   const handleAddUser = () => {
     setOpenAddModal(true);
@@ -223,10 +163,6 @@ const Users: React.FC = () => {
     return <div></div>;
   };
 
-  useEffect(() => {
-    fetchData();
-  }, [queryParams]);
-
   useHotkeys(
     HotKeys.CREATE,
     () => {