style: worker filter bar

src/components/page-tools/index.tsx

@@ -56,22 +56,24 @@ interface FilterBarProps {
   handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   handleSelectChange?: (value: any) => void;
   handleSearch: () => void;
-  handleDeleteByBatch: () => void;
+  handleDeleteByBatch?: () => void;
-  handleClickPrimary: (item: any) => void;
+  handleClickPrimary?: (item: any) => void;
-  rowSelection: any;
+  rowSelection?: any;
-  actionItems: ActionItem[];
+  actionItems?: ActionItem[];
   selectOptions?: Global.BaseOption<string | number>[];
   showSelect?: boolean;
   buttonText: string;
   buttonIcon?: React.ReactNode;
   marginBottom?: number;
   marginTop?: number;
-  inputHolder: string;
+  inputHolder?: string;
-  selectHolder: string;
+  selectHolder?: string;
-  actionType: 'dropdown' | 'button';
+  actionType?: 'dropdown' | 'button';
+  showPrimaryButton?: boolean;
+  showDeleteButton?: boolean;
   width?: {
-    input: number;
+    input?: number;
-    select: number;
+    select?: number;
   };
 }
 
@@ -88,15 +90,64 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
     showSelect,
     buttonText,
     buttonIcon,
-    actionType,
+    actionType = 'button',
     marginBottom = 10,
     marginTop = 10,
-    inputHolder,
+    inputHolder = 'common.filter.name',
     selectHolder,
+    showPrimaryButton = true,
+    showDeleteButton = true,
     width
   } = props;
   const intl = useIntl();
 
+  const renderRight = useMemo(() => {
+    if (!showPrimaryButton && !showDeleteButton) {
+      return null;
+    }
+    return (
+      <Space size={20}>
+        {actionType === 'dropdown' ? (
+          <DropDownActions
+            menu={{
+              items: actionItems,
+              onClick: handleClickPrimary
+            }}
+          >
+            <Button
+              icon={<DownOutlined></DownOutlined>}
+              type="primary"
+              iconPosition="end"
+            >
+              {buttonText}
+            </Button>
+          </DropDownActions>
+        ) : (
+          <Button
+            icon={buttonIcon ?? <PlusOutlined></PlusOutlined>}
+            type="primary"
+            onClick={handleClickPrimary}
+          >
+            {buttonText}
+          </Button>
+        )}
+        <Button
+          icon={<DeleteOutlined />}
+          danger
+          onClick={handleDeleteByBatch}
+          disabled={!rowSelection.selectedRowKeys.length}
+        >
+          <span>
+            {intl?.formatMessage?.({ id: 'common.button.delete' })}
+            {rowSelection.selectedRowKeys.length > 0 && (
+              <span>({rowSelection.selectedRowKeys?.length})</span>
+            )}
+          </span>
+        </Button>
+      </Space>
+    );
+  }, [actionItems, actionType]);
+
   return (
     <PageTools
       marginBottom={marginBottom}
@@ -132,47 +183,7 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
           ></Button>
         </Space>
       }
-      right={
+      right={renderRight}
-        <Space size={20}>
-          {actionType === 'dropdown' ? (
-            <DropDownActions
-              menu={{
-                items: actionItems,
-                onClick: handleClickPrimary
-              }}
-            >
-              <Button
-                icon={<DownOutlined></DownOutlined>}
-                type="primary"
-                iconPosition="end"
-              >
-                {buttonText}
-              </Button>
-            </DropDownActions>
-          ) : (
-            <Button
-              icon={buttonIcon ?? <PlusOutlined></PlusOutlined>}
-              type="primary"
-              onClick={handleClickPrimary}
-            >
-              {buttonText}
-            </Button>
-          )}
-          <Button
-            icon={<DeleteOutlined />}
-            danger
-            onClick={handleDeleteByBatch}
-            disabled={!rowSelection.selectedRowKeys.length}
-          >
-            <span>
-              {intl?.formatMessage?.({ id: 'common.button.delete' })}
-              {rowSelection.selectedRowKeys.length > 0 && (
-                <span>({rowSelection.selectedRowKeys?.length})</span>
-              )}
-            </span>
-          </Button>
-        </Space>
-      }
     ></PageTools>
   );
 };

src/hooks/use-table-fetch.ts

@@ -13,8 +13,16 @@ export default function useTableFetch<ListItem>(options: {
   fetchAPI: (params: any) => Promise<Global.PageResponse<ListItem>>;
   deleteAPI?: (id: number, params?: any) => Promise<any>;
   contentForDelete?: string;
+  defaultData?: any[];
 }) {
-  const { fetchAPI, deleteAPI, contentForDelete, API, watch } = options;
+  const {
+    fetchAPI,
+    deleteAPI,
+    contentForDelete,
+    API,
+    watch,
+    defaultData = []
+  } = options;
   const chunkRequedtRef = useRef<any>(null);
   const modalRef = useRef<any>(null);
   const rowSelection = useTableRowSelection();
@@ -28,7 +36,7 @@ export default function useTableFetch<ListItem>(options: {
     loadend: boolean;
     total: number;
   }>({
-    dataList: [],
+    dataList: [...defaultData],
     loading: false,
     loadend: false,
     total: 0

src/pages/resources/components/gpus.tsx

@@ -1,13 +1,13 @@
 import AutoTooltip from '@/components/auto-tooltip';
-import PageTools from '@/components/page-tools';
+import { FilterBar } from '@/components/page-tools';
 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 { SyncOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, ConfigProvider, Empty, Input, Space, Table } from 'antd';
+import { ConfigProvider, Empty, Table } from 'antd';
 import _ from 'lodash';
+import React from 'react';
 import { queryGpuDevicesList } from '../apis';
 import { GPUDeviceItem } from '../config/types';
 const { Column } = Table;
@@ -67,30 +67,17 @@ const GPUList: React.FC = () => {
 
   return (
     <>
-      <PageTools
+      <FilterBar
-        marginBottom={10}
+        buttonText={intl.formatMessage({ id: 'resources.button.create' })}
-        marginTop={10}
+        handleSearch={handleSearch}
-        left={
+        handleInputChange={handleNameChange}
-          <Space>
+        showDeleteButton={false}
-            <Input
+        showPrimaryButton={false}
-              placeholder={intl.formatMessage({
+        width={{ input: 300 }}
-                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>
-        }
-      ></PageTools>
       <ConfigProvider renderEmpty={renderEmpty}>
         <Table
+          tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
           dataSource={dataSource.dataList}
           loading={dataSource.loading}
           rowKey="id"

src/pages/resources/components/workers.tsx

@@ -1,7 +1,7 @@
 import AutoTooltip from '@/components/auto-tooltip';
 import DeleteModal from '@/components/delete-modal';
 import DropdownButtons from '@/components/drop-down-buttons';
-import PageTools from '@/components/page-tools';
+import { FilterBar } from '@/components/page-tools';
 import ProgressBar from '@/components/progress-bar';
 import InfoColumn from '@/components/simple-table/info-column';
 import StatusTag from '@/components/status-tag';
@@ -11,21 +11,10 @@ import { convertFileSize } from '@/utils';
 import {
   DeleteOutlined,
   EditOutlined,
-  InfoCircleOutlined,
+  InfoCircleOutlined
-  PlusOutlined,
-  SyncOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import {
+import { ConfigProvider, Empty, Table, Tooltip, message } from 'antd';
-  Button,
-  ConfigProvider,
-  Empty,
-  Input,
-  Space,
-  Table,
-  Tooltip,
-  message
-} from 'antd';
 import _ from 'lodash';
 import React, { useCallback, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -206,54 +195,18 @@ const Workers: React.FC = () => {
 
   return (
     <>
-      <PageTools
+      <FilterBar
-        marginBottom={10}
+        buttonText={intl.formatMessage({ id: 'resources.button.create' })}
-        marginTop={10}
+        handleDeleteByBatch={handleDeleteBatch}
-        left={
+        handleSearch={handleSearch}
-          <Space>
+        handleClickPrimary={handleAddWorker}
-            <Input
+        handleInputChange={handleNameChange}
-              placeholder={intl.formatMessage({
+        rowSelection={rowSelection}
-                id: 'common.filter.name'
+        width={{ input: 300 }}
-              })}
+      ></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={handleAddWorker}
-            >
-              {intl.formatMessage({ id: 'resources.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
+          tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
           style={{ width: '100%' }}
           dataSource={dataSource.dataList}
           loading={dataSource.loading}