refactor: resource table columns

src/components/card-wrapper/index.less

@@ -2,6 +2,6 @@
   border-radius: var(--border-radius-small);
   background-color: var(--color-white-1);
   box-shadow: none;
-  padding: 10px;
+  padding: 10px 16px;
   border: 1px solid var(--ant-color-border);
 }

src/components/echarts/config.ts

@@ -67,6 +67,7 @@ export default function useChartConfig() {
   const legend = {
     itemWidth: 8,
     itemHeight: 8,
+    itemGap: 12,
     textStyle: {
       color: chartColorMap.axislabelColor
     }

src/components/echarts/line-chart.tsx

@@ -16,7 +16,10 @@ const LineChart: React.FC<ChartProps> = (props) => {
     tooltipValueFormatter = null,
     legendData = [],
     smooth,
-    title
+    title,
+    legendOptions,
+    gridOptions,
+    titleOptions
   } = props;
   const {
     grid,
@@ -42,7 +45,10 @@ const LineChart: React.FC<ChartProps> = (props) => {
     title: {
       text: ''
     },
-    grid,
+    grid: {
+      ...grid,
+      ...gridOptions
+    },
     tooltip: {
       ...tooltip,
       formatter(params: any) {
@@ -61,6 +67,7 @@ const LineChart: React.FC<ChartProps> = (props) => {
     yAxis,
     legend: {
       ...legend,
+      ...legendOptions,
       data: legendData.map((item: any) => {
         return {
           name: item,
@@ -93,6 +100,7 @@ const LineChart: React.FC<ChartProps> = (props) => {
       animation: false,
       title: {
         ...titleConfig,
+        ...titleOptions,
         text: title
       },
       yAxis: {
@@ -109,7 +117,16 @@ const LineChart: React.FC<ChartProps> = (props) => {
       },
       series: data
     };
-  }, [seriesData, xAxisData, yAxisName, title, smooth, legendData, options]);
+  }, [
+    seriesData,
+    xAxisData,
+    yAxisName,
+    title,
+    smooth,
+    titleOptions,
+    legendData,
+    options
+  ]);
 
   return (
     <>

src/components/echarts/types.ts

@@ -1,14 +1,29 @@
-import type { LegendComponentOption } from 'echarts/components';
+import type {
+  LegendComponentOption,
+  TitleComponentOption
+} from 'echarts/components';
 export interface ChartProps {
   seriesData: any[];
   showEmpty?: boolean;
   xAxisData: string[];
   legendData?: LegendComponentOption['data'];
+  legendOptions?: {
+    [K in keyof LegendComponentOption]?: LegendComponentOption[K];
+  };
+  gridOptions?: {
+    left?: string | number;
+    right?: string | number;
+    top?: string | number;
+    bottom?: string | number;
+  };
   labelFormatter?: (val?: any, index?: number) => string;
   tooltipValueFormatter?: (val: any) => string;
   height: string | number;
   width?: string | number;
   title?: string;
+  titleOptions?: {
+    [K in keyof TitleComponentOption]?: TitleComponentOption[K];
+  };
   value?: number;
   smooth?: boolean;
   color?: string;

src/components/page-tools/index.tsx

@@ -93,8 +93,8 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
     actionType = 'button',
     marginBottom = 10,
     marginTop = 10,
-    inputHolder = 'common.filter.name',
-    selectHolder = '',
+    inputHolder,
+    selectHolder,
     showPrimaryButton = true,
     showDeleteButton = true,
     width
@@ -165,9 +165,12 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
       left={
         <Space>
           <Input
-            placeholder={intl.formatMessage({
-              id: inputHolder
-            })}
+            placeholder={
+              inputHolder ||
+              intl.formatMessage({
+                id: 'common.filter.name'
+              })
+            }
             style={{ width: width?.input || 230 }}
             allowClear
             onChange={handleInputChange}
@@ -176,9 +179,7 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
             <Select
               allowClear
               showSearch={false}
-              placeholder={intl.formatMessage({
-                id: selectHolder
-              })}
+              placeholder={selectHolder}
               style={{ width: width?.select || 230 }}
               size="large"
               onChange={handleSelectChange}

src/components/seal-form/components/label-info.tsx

@@ -41,11 +41,7 @@ const NoteInfo: React.FC<NoteInfoProps> = (props) => {
 
   return (
     <span className="label-text">
-      {description ? (
-        <Tooltip title={description}>{labelContent}</Tooltip>
-      ) : (
-        labelContent
-      )}
+      <Tooltip title={description || false}>{labelContent}</Tooltip>
       {labelExtra}
     </span>
   );

src/config/global.d.ts

@@ -23,19 +23,20 @@ declare namespace Global {
     source: string;
     avatar_url?: string;
   }
+  type EmptyObject = Record<never, never>;
 
-  type BaseListItem<T, U extends Record<string, any>> = {
+  type BaseListItem<T, U extends object = EmptyObject> = {
     key: string;
     locale?: boolean;
     value: T;
-  } & U;
+  } & Partial<U>;
 
-  type BaseOption<T, U extends Record<string, any>> = {
+  type BaseOption<T, U extends object = EmptyObject> = {
     label: string;
     locale?: boolean;
     value: T;
     meta?: Record<string, any>;
-  } & U;
+  } & Partial<U>;
 
   interface HintOptions {
     label: string;

src/hooks/use-user-settings.ts

@@ -9,8 +9,6 @@ export default function useUserSettings() {
   const { light, dark, colorPrimary } = themeConfig;
   const [userSettings, setUserSettings] = useAtom(userSettingsHelperAtom);
 
-  console.log('userSettings===', userSettings);
-
   const getCurrentTheme = (mode: Theme): 'light' | 'realDark' => {
     if (mode === 'auto') {
       return window.matchMedia('(prefers-color-scheme: dark)').matches

src/locales/en-US/clusters.ts

@@ -0,0 +1,14 @@
+export default {
+  'clusters.title': 'Cluster',
+  'clusters.table.provider': 'Provider',
+  'clusters.table.deployments': 'Deployments',
+  'clusters.button.add': 'Add Cluster',
+  'clusters.button.addCredential': 'Add Cloud Credential',
+  'clusters.button.editCredential': 'Edit Cloud Credential',
+  'clusters.filterBy.cluster': 'Filter by Cluster',
+  'clusters.add.cluster': 'Add {cluster} Cluster',
+  'clusters.edit.cluster': 'Edit {cluster}',
+  'clusters.provider.custom': 'Custom',
+  'clusters.button.register': 'Register Cluster',
+  'clusters.button.addNodePool': 'Add Node Pool'
+};

src/locales/en-US/common.ts

@@ -257,5 +257,7 @@ export default {
   'common.login.password': 'Log in with Password',
   'common.external.login': 'Log in with {type}',
   'common.sso.noConfig':
-    'Single sign-on is not enabled on this system. Please contact your administrator.'
+    'Single sign-on is not enabled on this system. Please contact your administrator.',
+  'common.button.edit.item': 'Edit {name}',
+  'common.button.terminal': 'Terminal'
 };

src/locales/ja-JP/clusters.ts

@@ -0,0 +1,29 @@
+export default {
+  'clusters.title': 'Cluster',
+  'clusters.table.provider': 'Provider',
+  'clusters.table.deployments': 'Deployments',
+  'clusters.button.add': 'Add Cluster',
+  'clusters.button.addCredential': 'Add Cloud Credential',
+  'clusters.button.editCredential': 'Edit Cloud Credential',
+  'clusters.filterBy.cluster': 'Filter by Cluster',
+  'clusters.add.cluster': 'Add {cluster} Cluster',
+  'clusters.edit.cluster': 'Edit {cluster}',
+  'clusters.provider.custom': 'Custom',
+  'clusters.button.register': 'Register Cluster',
+  'clusters.button.addNodePool': 'Add Node Pool'
+};
+
+// ========== To-Do: Translate Keys (Remove After Translation) ==========
+// 1. 'clusters.title': 'Cluster',
+// 2. 'clusters.table.provider': 'Provider',
+// 3. 'clusters.table.deployments': 'Deployments',
+// 4. 'clusters.button.add': 'Add Cluster',
+// 5. 'clusters.button.addCredential': 'Add Cloud Credential',
+// 6. 'clusters.button.editCredential': 'Edit Cloud Credential',
+// 7. 'clusters.filterBy.cluster': 'Filter by Cluster',
+// 8. 'clusters.add.cluster': 'Add {cluster} Cluster',
+// 9. 'clusters.edit.cluster': 'Edit {cluster}',
+// 10. 'clusters.provider.custom': 'Custom',
+// 11. 'clusters.button.register': 'Register Cluster',
+// 12. 'clusters.button.addNodePool': 'Add Node Pool'
+// ========== End of To-Do List ==========

src/locales/ja-JP/common.ts

@@ -257,7 +257,9 @@ export default {
   'common.login.password': 'Log in with Password',
   'common.external.login': 'Log in with {type}',
   'common.sso.noConfig':
-    'Single sign-on is not enabled on this system. Please contact your administrator.'
+    'Single sign-on is not enabled on this system. Please contact your administrator.',
+  'common.button.edit.item': 'Edit {name}',
+  'common.button.terminal': 'Terminal'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -281,4 +283,6 @@ export default {
 // 18. 'common.external.login': 'Log in with {type}'
 // 19. 'common.login.password': 'Log in with Password',
 // 20. 'common.sso.noConfig': 'Single sign-on is not enabled on this system. Please contact your administrator.'
+// 21.  'common.button.edit.item': 'Edit {name}',
+// 22. 'common.button.terminal': 'Terminal'
 // ========== End of To-Do List ==========

src/locales/ru-RU/clusters.ts

@@ -0,0 +1,29 @@
+export default {
+  'clusters.title': 'Cluster',
+  'clusters.table.provider': 'Provider',
+  'clusters.table.deployments': 'Deployments',
+  'clusters.button.add': 'Add Cluster',
+  'clusters.button.addCredential': 'Add Cloud Credential',
+  'clusters.button.editCredential': 'Edit Cloud Credential',
+  'clusters.filterBy.cluster': 'Filter by Cluster',
+  'clusters.add.cluster': 'Add {cluster} Cluster',
+  'clusters.edit.cluster': 'Edit {cluster}',
+  'clusters.provider.custom': 'Custom',
+  'clusters.button.register': 'Register Cluster',
+  'clusters.button.addNodePool': 'Add Node Pool'
+};
+
+// ========== To-Do: Translate Keys (Remove After Translation) ==========
+// 1. 'clusters.title': 'Cluster',
+// 2. 'clusters.table.provider': 'Provider',
+// 3. 'clusters.table.deployments': 'Deployments',
+// 4. 'clusters.button.add': 'Add Cluster',
+// 5. 'clusters.button.addCredential': 'Add Cloud Credential',
+// 6. 'clusters.button.editCredential': 'Edit Cloud Credential',
+// 7. 'clusters.filterBy.cluster': 'Filter by Cluster',
+// 8. 'clusters.add.cluster': 'Add {cluster} Cluster',
+// 9. 'clusters.edit.cluster': 'Edit {cluster}',
+// 10. 'clusters.provider.custom': 'Custom',
+// 11. 'clusters.button.register': 'Register Cluster',
+// 12. 'clusters.button.addNodePool': 'Add Node Pool'
+// ========== End of To-Do List ==========

src/locales/ru-RU/common.ts

@@ -256,11 +256,15 @@ export default {
   'common.login.password': 'Log in with Password',
   'common.external.login': 'Log in with {type}',
   'common.sso.noConfig':
-    'Single sign-on is not enabled on this system. Please contact your administrator.'
+    'Single sign-on is not enabled on this system. Please contact your administrator.',
+  'common.button.edit.item': 'Edit {name}',
+  'common.button.terminal': 'Terminal'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
 // 1. 'common.external.login': 'Log in with {type}'
 // 2. 'common.login.password': 'Log in with Password'
 // 3. 'common.sso.noConfig': 'Single sign-on is not enabled on this system. Please contact your administrator.'
+// 4.  'common.button.edit.item': 'Edit {name}',
+// 5.  'common.button.terminal': 'Terminal'
 // ========== End of To-Do List ==========

src/locales/zh-CN/clusters.ts

@@ -0,0 +1,14 @@
+export default {
+  'clusters.title': '集群',
+  'clusters.table.provider': '提供商',
+  'clusters.table.deployments': '部署',
+  'clusters.button.add': '添加集群',
+  'clusters.button.addCredential': '添加云凭证',
+  'clusters.button.editCredential': '编辑云凭证',
+  'clusters.filterBy.cluster': '按集群过滤',
+  'clusters.add.cluster': '添加 {cluster} 集群',
+  'clusters.edit.cluster': '编辑 {cluster}',
+  'clusters.provider.custom': '自定义',
+  'clusters.button.register': '注册集群',
+  'clusters.button.addNodePool': '添加节点池'
+};

src/locales/zh-CN/common.ts

@@ -249,5 +249,7 @@ export default {
   'common.login.auth.failed': '认证失败',
   'common.login.password': '使用密码登录',
   'common.external.login': '使用 {type} 登录',
-  'common.sso.noConfig': '该系统未启用单点登录，请联系管理员。'
+  'common.sso.noConfig': '该系统未启用单点登录，请联系管理员。',
+  'common.button.edit.item': '编辑 {name}',
+  'common.button.terminal': '终端'
 };

src/locales/zh-CN/menu.ts

@@ -29,5 +29,5 @@ export default {
   'menu.accessControl.users': '用户',
   'menu.clusterManagement': '集群管理',
   'menu.clusterManagement.clusters': '集群',
-  'menu.clusterManagement.credentials': '凭据'
+  'menu.clusterManagement.credentials': '凭证'
 };

src/pages/cluster-management/clusters-copy.tsx

@@ -1,489 +0,0 @@
-import AutoTooltip from '@/components/auto-tooltip';
-import DeleteModal from '@/components/delete-modal';
-import DropDownActions from '@/components/drop-down-actions';
-import DropdownButtons from '@/components/drop-down-buttons';
-import IconFont from '@/components/icon-font';
-import PageTools from '@/components/page-tools';
-import { PageAction } from '@/config';
-import type { PageActionType } from '@/config/types';
-import useTableFetch from '@/hooks/use-table-fetch';
-import AddWorker from '@/pages/resources/components/add-worker';
-import {
-  DeleteOutlined,
-  DownOutlined,
-  EditOutlined,
-  KubernetesOutlined,
-  ProfileOutlined,
-  SyncOutlined
-} from '@ant-design/icons';
-import { PageContainer } from '@ant-design/pro-components';
-import { useIntl } from '@umijs/max';
-import {
-  Button,
-  ConfigProvider,
-  Empty,
-  Input,
-  Space,
-  Table,
-  message
-} from 'antd';
-import { useState } from 'react';
-import styled from 'styled-components';
-import {
-  createCredential,
-  deleteCredential,
-  queryCredentialList,
-  updateCredential
-} from './apis';
-import AddCluster from './components/add-cluster';
-import AddPool from './components/add-pool';
-import { ClusterDataList } from './config';
-import {
-  ClusterFormData as FormData,
-  ClusterListItem as ListItem
-} from './config/types';
-const { Column } = Table;
-
-const addActions = [
-  {
-    label: 'Custom',
-    locale: false,
-    value: 'custom',
-    key: 'custom',
-    icon: <IconFont type="icon-docker" className="size-16" />
-  },
-  {
-    label: 'Kubernetes',
-    locale: false,
-    value: 'kubernetes',
-    key: 'kubernetes',
-    icon: <KubernetesOutlined className="size-16" />
-  },
-  {
-    label: 'Digital Ocean',
-    locale: false,
-    value: 'digitalocean',
-    key: 'digitalocean',
-    icon: <IconFont type="icon-digitalocean" />
-  }
-];
-
-const WorkerWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  align-items: flex-start;
-  .worker {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    .value {
-      line-height: 1em;
-      color: var(--ant-color-text-secondary);
-    }
-  }
-  .dot {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    margin-right: 4px;
-    &.ready {
-      background-color: var(--ant-color-success);
-    }
-    &.error {
-      background-color: var(--ant-color-error);
-    }
-
-    &.transition {
-      background-color: var(--ant-blue-5);
-    }
-  }
-`;
-
-const ActionList = [
-  {
-    key: 'edit',
-    label: 'common.button.edit',
-    icon: <EditOutlined></EditOutlined>
-  },
-  {
-    key: 'add',
-    label: 'Add Worker',
-    locale: false,
-    icon: <EditOutlined></EditOutlined>
-  },
-
-  {
-    key: 'terminal',
-    label: 'common.button.detail',
-    icon: <ProfileOutlined />
-  },
-  {
-    key: 'addPool',
-    label: 'Add Node Pool',
-    locale: false,
-    icon: <IconFont type="icon-catalog1" />
-  },
-  {
-    key: 'delete',
-    props: {
-      danger: true
-    },
-    label: 'common.button.delete',
-    icon: <DeleteOutlined></DeleteOutlined>
-  }
-];
-
-const Credentials: React.FC = () => {
-  const {
-    dataSource,
-    rowSelection,
-    queryParams,
-    sortOrder,
-    modalRef,
-    handleDelete,
-    handleDeleteBatch,
-    fetchData,
-    handlePageChange,
-    handleTableChange,
-    handleSearch,
-    handleNameChange
-  } = useTableFetch<ListItem>({
-    fetchAPI: queryCredentialList,
-    deleteAPI: deleteCredential,
-    contentForDelete: 'users.table.user'
-  });
-
-  const intl = useIntl();
-  const [open, setOpen] = useState(false);
-  const [openAddModal, setOpenAddModal] = useState(false);
-  const [provider, setProvider] = useState<string>('custom');
-  const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
-  const [title, setTitle] = useState<string>('');
-  const [addPoolStatus, setAddPoolStatus] = useState<{
-    open: boolean;
-    action: PageActionType;
-    title: string;
-    provider: string;
-  }>({
-    open: false,
-    action: PageAction.CREATE,
-    title: '',
-    provider: 'digitalocean'
-  });
-  const [currentData, setCurrentData] = useState<ListItem | undefined>(
-    undefined
-  );
-
-  const setActions = (row: ListItem) => {
-    if (row.provider !== 'custom') {
-      return ActionList.filter((item) => item.key !== 'add');
-    }
-    return ActionList;
-  };
-
-  const handleAddCluster = (value: string) => {
-    setOpenAddModal(true);
-    setAction(PageAction.CREATE);
-    setProvider(value);
-    const label = addActions.find((item) => item.value === value)?.label;
-    setTitle(`Add ${label} Cluster`);
-  };
-
-  const handleAddPool = (value: string) => {
-    setAddPoolStatus({
-      open: true,
-      action: PageAction.CREATE,
-      title: `Add Node Pool`,
-      provider: value
-    });
-  };
-
-  const handleClickDropdown = (item: any) => {
-    handleAddCluster(item.key);
-  };
-
-  const handleModalOk = async (data: FormData) => {
-    const params = {
-      ...data
-    };
-    try {
-      if (action === PageAction.EDIT) {
-        await updateCredential({
-          data: {
-            ...params,
-            id: currentData?.id
-          }
-        });
-      } else {
-        await createCredential({ data: params });
-      }
-      fetchData();
-      setOpenAddModal(false);
-      message.success(intl.formatMessage({ id: 'common.message.success' }));
-    } catch (error) {
-      setOpenAddModal(false);
-    }
-  };
-
-  const handleModalCancel = () => {
-    console.log('handleModalCancel');
-    setOpenAddModal(false);
-  };
-
-  const handleEditUser = (row: ListItem) => {
-    setCurrentData(row);
-    setOpenAddModal(true);
-    setAction(PageAction.EDIT);
-    setTitle(`Edit ${row.name} Cluster`);
-  };
-
-  const handleSelect = (val: any, row: ListItem) => {
-    if (val === 'edit') {
-      handleEditUser(row);
-    } else if (val === 'delete') {
-      handleDelete({ ...row, name: row.name });
-    } else if (val === 'add') {
-      setOpen(true);
-      setCurrentData(row);
-    } else if (val === 'addPool') {
-      handleAddPool(row.provider);
-    }
-  };
-
-  const renderEmpty = (type?: string) => {
-    if (type !== 'Table') return;
-    if (
-      !dataSource.loading &&
-      dataSource.loadend &&
-      !dataSource.dataList.length
-    ) {
-      return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>;
-    }
-    return <div></div>;
-  };
-
-  return (
-    <>
-      <PageContainer
-        ghost
-        header={{
-          title: intl.formatMessage({
-            id: 'menu.clusterManagement.clusters'
-          }),
-          style: {
-            paddingInline: 'var(--layout-content-header-inlinepadding)'
-          },
-          breadcrumb: {}
-        }}
-        extra={[]}
-      >
-        <PageTools
-          marginBottom={22}
-          left={
-            <Space>
-              <Input
-                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}>
-              <DropDownActions
-                menu={{
-                  items: addActions,
-                  onClick: handleClickDropdown
-                }}
-                trigger={['click']}
-                placement="bottomRight"
-              >
-                <Button
-                  icon={<DownOutlined></DownOutlined>}
-                  type="primary"
-                  iconPosition="end"
-                >
-                  Add Cluster
-                </Button>
-              </DropDownActions>
-              <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
-            dataSource={ClusterDataList}
-            rowSelection={rowSelection}
-            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="Name"
-              dataIndex="name"
-              key="name"
-              ellipsis={{
-                showTitle: false
-              }}
-              render={(text, record) => {
-                return (
-                  <AutoTooltip ghost minWidth={20}>
-                    {text}
-                  </AutoTooltip>
-                );
-              }}
-            />
-            <Column
-              title="Provider"
-              dataIndex="provider"
-              key="provider"
-              ellipsis={{
-                showTitle: false
-              }}
-              render={(text, record) => {
-                return (
-                  <AutoTooltip ghost minWidth={20}>
-                    {addActions.find((item) => item.value === record.provider)
-                      ?.label || 'N/A'}
-                  </AutoTooltip>
-                );
-              }}
-            />
-            <Column
-              title="Workers"
-              dataIndex="workers"
-              key="workers"
-              ellipsis={{
-                showTitle: false
-              }}
-              render={(text, record) => {
-                return (
-                  <WorkerWrapper>
-                    <span className="worker">
-                      <span className="dot ready"></span>
-                      <span className="value">3</span>
-                    </span>
-                    <span className="worker">
-                      <span className="dot error"></span>
-                      <span className="value">1</span>
-                    </span>
-                  </WorkerWrapper>
-                );
-              }}
-            />
-            <Column
-              title="GPUs"
-              dataIndex="gpus"
-              key="gpus"
-              ellipsis={{
-                showTitle: false
-              }}
-              render={(text, record) => {
-                return (
-                  <AutoTooltip ghost minWidth={20}>
-                    {text}
-                  </AutoTooltip>
-                );
-              }}
-            />
-
-            <Column
-              title="Deployments"
-              dataIndex="deployments"
-              key="deployments"
-              ellipsis={{
-                showTitle: false
-              }}
-              render={(text, record) => {
-                return (
-                  <AutoTooltip ghost minWidth={20}>
-                    {text}
-                  </AutoTooltip>
-                );
-              }}
-            />
-            <Column
-              title={intl.formatMessage({ id: 'common.table.operation' })}
-              key="operation"
-              ellipsis={{
-                showTitle: false
-              }}
-              render={(text, record: ListItem) => {
-                return (
-                  <DropdownButtons
-                    items={setActions(record)}
-                    onSelect={(val) => handleSelect(val, record)}
-                  ></DropdownButtons>
-                );
-              }}
-            />
-          </Table>
-        </ConfigProvider>
-      </PageContainer>
-      <AddCluster
-        provider={provider}
-        open={openAddModal}
-        action={action}
-        title={title}
-        data={currentData}
-        onCancel={handleModalCancel}
-        onOk={handleModalOk}
-      ></AddCluster>
-      <AddPool
-        provider={addPoolStatus.provider}
-        open={addPoolStatus.open}
-        action={addPoolStatus.action}
-        title={addPoolStatus.title}
-        onCancel={() => {
-          setAddPoolStatus({
-            open: false,
-            action: PageAction.CREATE,
-            title: '',
-            provider: 'digitalocean'
-          });
-        }}
-        onOk={() => {
-          setAddPoolStatus({
-            open: false,
-            action: PageAction.CREATE,
-            title: '',
-            provider: 'digitalocean'
-          });
-        }}
-      ></AddPool>
-      <AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker>
-      <DeleteModal ref={modalRef}></DeleteModal>
-    </>
-  );
-};
-
-export default Credentials;

src/pages/cluster-management/clusters.tsx

@@ -6,6 +6,7 @@ import useTableFetch from '@/hooks/use-table-fetch';
 import AddWorker from '@/pages/resources/components/add-worker';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
+import { useMemoizedFn } from 'ahooks';
 import { Table, message } from 'antd';
 import { useState } from 'react';
 import {
@@ -23,7 +24,7 @@ import {
   ClusterFormData as FormData,
   ClusterListItem as ListItem
 } from './config/types';
-import useClusterColumns from './config/use-cluster-columns';
+import useClusterColumns from './hooks/use-cluster-columns';
 
 const Credentials: React.FC = () => {
   const {
@@ -112,12 +113,19 @@ const Credentials: React.FC = () => {
 
   const handleAddCluster = (value: string) => {
     const label = ProviderLabelMap[value];
+    const clusterLabel =
+      value === ProviderValueMap.Custom
+        ? intl.formatMessage({ id: 'clusters.provider.custom' })
+        : label;
 
     setOpenAddModal({
       open: true,
       action: PageAction.CREATE,
       currentData: undefined,
-      title: `Add ${label} Cluster`,
+      title: intl.formatMessage(
+        { id: 'clusters.add.cluster' },
+        { cluster: clusterLabel }
+      ),
       provider: value
     });
   };
@@ -184,7 +192,10 @@ const Credentials: React.FC = () => {
       open: true,
       action: PageAction.EDIT,
       currentData: row,
-      title: `Edit ${row.name} Cluster`,
+      title: intl.formatMessage(
+        { id: 'clusters.edit.cluster' },
+        { cluster: row.name }
+      ),
       provider: row.provider
     });
   };
@@ -214,7 +225,7 @@ const Credentials: React.FC = () => {
     } catch (error) {}
   };
 
-  const handleSelect = (val: any, row: ListItem) => {
+  const handleSelect = useMemoizedFn((val: any, row: ListItem) => {
     if (val === 'edit') {
       handleEditCluster(row);
     } else if (val === 'delete') {
@@ -231,7 +242,7 @@ const Credentials: React.FC = () => {
     } else if (val === 'register_cluster') {
       handleRegisterCluster(row);
     }
-  };
+  });
 
   const columns = useClusterColumns(handleSelect);
 
@@ -254,11 +265,10 @@ const Credentials: React.FC = () => {
           showSelect={false}
           showPrimaryButton={true}
           showDeleteButton={true}
-          selectHolder="Filter by name"
           marginBottom={22}
           marginTop={30}
           width={{ input: 300 }}
-          buttonText="Add Cluster"
+          buttonText={intl.formatMessage({ id: 'clusters.button.add' })}
           actionType="dropdown"
           actionItems={addActions}
           rowSelection={rowSelection}

src/pages/cluster-management/components/cluster-detail-content.tsx

@@ -1,17 +1,47 @@
 import GaugeChart from '@/components/echarts/gauge';
+import Card from '@/components/templates/card';
 import { PageAction } from '@/config';
 import { Col, Row } from 'antd';
+import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { queryClusterDetail } from '../apis';
 import { ProviderValueMap } from '../config';
 import { ClusterListItem, NodePoolListItem } from '../config/types';
 import AddPool from './add-pool';
+import TrendChart from './trend-chart';
 import WorkerPools from './worker-pools';
 
+const metricsMap = {
+  cpu: {
+    label: 'CPU',
+    type: 'CPU',
+    intl: false,
+    color: 'rgba(250, 173, 20,.8)'
+  },
+  ram: {
+    label: 'Used',
+    type: 'Used',
+    intl: false,
+    color: 'rgba(114, 46, 209,.8)'
+  },
+  gpu: {
+    label: 'GPU',
+    type: 'GPU',
+    intl: false,
+    color: 'rgba(84, 204, 152,.8)'
+  },
+  vram: {
+    label: 'Used',
+    type: 'Used',
+    intl: false,
+    color: 'rgba(255, 107, 179, 80%)'
+  }
+};
+
 const SubTitle = styled.div`
   font-size: var(--font-size-middle);
-  font-weight: 500;
+  font-weight: 700;
   color: var(--ant-color-text);
   margin-block: 24px 16px;
 `;
@@ -40,6 +70,12 @@ const gaugeConfig = {
   }
 };
 
+const formatValue = (value: number) => {
+  return _.round(value || 0, 1);
+};
+
+const CardHeight = 336;
+
 const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
   const chartHeight = 160;
   const [show, setShow] = React.useState(false);
@@ -49,7 +85,23 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
     title: '',
     provider: ProviderValueMap.DigitalOcean
   });
-  const [detailContent, setDetailContent] = useState<Record<string, any>>({});
+  const [detailContent, setDetailContent] = useState<{
+    current: {
+      cpu: number;
+      ram: number;
+      gpu: number;
+      vram: number;
+    };
+    history: Record<string, { timestamp: number; value: number }[]>;
+  }>({
+    current: {
+      cpu: 0,
+      ram: 0,
+      gpu: 0,
+      vram: 0
+    },
+    history: {}
+  });
 
   // pool action handler
   const handleOnAction = (action: string, record: NodePoolListItem) => {
@@ -71,10 +123,21 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
       const response = await queryClusterDetail({
         cluster_id: data!.id
       });
-      setDetailContent(response);
+      setDetailContent({
+        current: response.system_load?.current,
+        history: response.system_load?.history
+      });
       // handle response
     } catch (error) {
-      setDetailContent({});
+      setDetailContent({
+        current: {
+          cpu: 0,
+          ram: 0,
+          gpu: 0,
+          vram: 0
+        },
+        history: {}
+      });
     }
   };
 
@@ -91,7 +154,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
           <Col span={6}>
             <GaugeChart
               title="GPU Utilization"
-              value={85}
+              value={formatValue(detailContent.current.gpu)}
               height={chartHeight}
               gaugeConfig={gaugeConfig}
             />
@@ -99,7 +162,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
           <Col span={6}>
             <GaugeChart
               title="CPU Utilization"
-              value={50}
+              value={formatValue(detailContent.current.cpu)}
               height={chartHeight}
               gaugeConfig={gaugeConfig}
             />
@@ -107,7 +170,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
           <Col span={6}>
             <GaugeChart
               title="RAM Utilization"
-              value={70}
+              value={formatValue(detailContent.current.ram)}
               height={chartHeight}
               gaugeConfig={gaugeConfig}
             />
@@ -115,13 +178,44 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
           <Col span={6}>
             <GaugeChart
               title="VRAM Utilization"
-              value={60}
+              value={formatValue(detailContent.current.vram)}
               height={chartHeight}
               gaugeConfig={gaugeConfig}
             />
           </Col>
         </Row>
       </div>
+      <SubTitle>System Load</SubTitle>
+      <Row style={{ marginBottom: 20 }} gutter={20}>
+        <Col span={12}>
+          <Card height={CardHeight} clickable={false} ghost>
+            <TrendChart
+              data={detailContent?.history}
+              metrics={['vram', 'allocated']}
+              metricsMap={metricsMap}
+              title="VRAM"
+            ></TrendChart>
+          </Card>
+        </Col>
+        <Col span={12}>
+          <Card height={CardHeight} clickable={false} ghost>
+            <TrendChart
+              data={detailContent?.history}
+              metrics={['ram', 'allocated']}
+              metricsMap={metricsMap}
+              title="RAM"
+            ></TrendChart>
+          </Card>
+        </Col>
+      </Row>
+      <Card height={CardHeight} clickable={false} ghost>
+        <TrendChart
+          data={detailContent?.history}
+          metrics={['cpu', 'gpu']}
+          metricsMap={metricsMap}
+          title="CPU & GPU"
+        ></TrendChart>
+      </Card>
       {data?.provider === ProviderValueMap.DigitalOcean && (
         <>
           <SubTitle>Worker Pools</SubTitle>
@@ -143,7 +237,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
             open: false,
             action: PageAction.CREATE,
             title: '',
-            provider: 'digitalocean'
+            provider: ProviderValueMap.DigitalOcean
           });
         }}
         onOk={() => {
@@ -151,7 +245,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
             open: false,
             action: addPoolStatus.action,
             title: '',
-            provider: 'digitalocean'
+            provider: ProviderValueMap.DigitalOcean
           });
         }}
       ></AddPool>

src/pages/cluster-management/components/cluster-detail-modal.tsx

@@ -20,8 +20,8 @@ const ClusterDetailModal: React.FC<ClusterDetailModalProps> = ({
 
   return (
     <GSDrawer
-      width={'80vw'}
-      title={`Cluster Detail - ${currentData?.name}`}
+      width={'calc(100vw - 200px)'}
+      title={`${currentData?.name}`}
       open={open}
       onClose={handleOnClose}
     >

src/pages/cluster-management/components/trend-chart.tsx

@@ -0,0 +1,78 @@
+import LineChart from '@/components/echarts/line-chart';
+import { useIntl } from '@umijs/max';
+import dayjs from 'dayjs';
+import _ from 'lodash';
+import { useMemo } from 'react';
+
+interface TrendChartProps {
+  data: any;
+  metrics: string[];
+  metricsMap: Record<string, any>;
+  title: string;
+}
+
+const titleOptions = {
+  left: 0
+};
+
+const TrendChart: React.FC<TrendChartProps> = ({
+  data,
+  metrics,
+  metricsMap,
+  title
+}) => {
+  const intl = useIntl();
+
+  const tooltipValueFormatter = (value: any) => {
+    return !value ? value : `${value}%`;
+  };
+
+  const generateData = useMemo(() => {
+    const legendData: string[] = [];
+    const xAxisData: string[] = [];
+    let seriesData: { value: number; time: string; type: string }[] = [];
+    seriesData = _.map(metrics, (item: string) => {
+      const itemConfig = _.get(metricsMap, item, {});
+      const name = itemConfig.intl
+        ? intl.formatMessage({ id: itemConfig.label })
+        : itemConfig.label;
+      legendData.push(name);
+      const itemDataList = _.get(data, item, []);
+      return {
+        name: name,
+        color: itemConfig.color,
+        data: _.map(itemDataList, (item: any) => {
+          xAxisData.push(dayjs(item.timestamp * 1000).format('HH:mm:ss'));
+          return {
+            time: dayjs(item.timestamp * 1000).format('HH:mm:ss'),
+            value: _.round(_.get(item, 'value', 0), 1)
+          };
+        })
+      };
+    });
+    return {
+      seriesData,
+      legendData,
+      xAxisData: _.uniq(xAxisData)
+    };
+  }, [data, intl]);
+
+  return (
+    <>
+      <LineChart
+        height={320}
+        title={title}
+        seriesData={generateData.seriesData}
+        legendData={generateData.legendData}
+        xAxisData={generateData.xAxisData}
+        tooltipValueFormatter={tooltipValueFormatter}
+        smooth={true}
+        width="100%"
+        yAxisName="(%)"
+        titleOptions={titleOptions}
+      ></LineChart>
+    </>
+  );
+};
+
+export default TrendChart;

src/pages/cluster-management/config/index.ts

@@ -43,8 +43,8 @@ export const generateRegisterCommand = (params: {
 
 export const addActions = [
   {
-    label: 'Custom',
-    locale: false,
+    label: 'clusters.provider.custom',
+    locale: true,
     value: ProviderValueMap.Custom,
     key: ProviderValueMap.Custom,
     icon: icons.Docker
@@ -78,23 +78,23 @@ export const clusterActionList = [
   },
   {
     key: 'add_worker',
-    label: 'Add Worker',
+    label: 'resources.button.create',
     provider: ProviderValueMap.Custom,
-    locale: false,
+    locale: true,
     icon: icons.Docker
   },
   {
     key: 'register_cluster',
-    label: 'Register Cluster',
+    label: 'clusters.button.register',
     provider: ProviderValueMap.Kubernetes,
-    locale: false,
+    locale: true,
     icon: icons.KubernetesOutlined
   },
   {
     key: 'addPool',
-    label: 'Add Node Pool',
+    label: 'clusters.button.addNodePool',
     provider: ProviderValueMap.DigitalOcean,
-    locale: false,
+    locale: true,
     icon: icons.Catalog
   },
   {

src/pages/cluster-management/credentials.tsx

@@ -103,7 +103,7 @@ const Credentials: React.FC = () => {
       provider: ProviderValueMap.DigitalOcean,
       open: true,
       action: PageAction.CREATE,
-      title: 'Add Cloud Credential',
+      title: intl.formatMessage({ id: 'clusters.button.addCredential' }),
       currentData: undefined
     });
   };
@@ -141,7 +141,10 @@ const Credentials: React.FC = () => {
       provider: row.provider,
       open: true,
       action: PageAction.EDIT,
-      title: `Edit ${row.name} Credential`,
+      title: intl.formatMessage(
+        { id: 'common.buton.edit.item' },
+        { name: row.name }
+      ),
       currentData: row
     });
   };
@@ -186,7 +189,9 @@ const Credentials: React.FC = () => {
           showPrimaryButton={true}
           marginBottom={22}
           marginTop={30}
-          buttonText={'Add Cloud Credential'}
+          buttonText={intl.formatMessage({
+            id: 'clusters.button.addCredential'
+          })}
           handleDeleteByBatch={handleDeleteBatch}
           handleSearch={handleSearch}
           handleInputChange={handleNameChange}
@@ -212,7 +217,7 @@ const Credentials: React.FC = () => {
             }}
           >
             <Column
-              title="Name"
+              title={intl.formatMessage({ id: 'common.table.name' })}
               dataIndex="name"
               key="name"
               ellipsis={{
@@ -227,7 +232,7 @@ const Credentials: React.FC = () => {
               }}
             />
             <Column
-              title="Provider"
+              title={intl.formatMessage({ id: 'clusters.table.provider' })}
               dataIndex="provider"
               key="provider"
               ellipsis={{
@@ -261,7 +266,7 @@ const Credentials: React.FC = () => {
               }}
             />
             <Column
-              title="Description"
+              title={intl.formatMessage({ id: 'common.table.description' })}
               dataIndex="description"
               key="description"
               ellipsis={{

src/pages/cluster-management/hooks/use-cluster-columns.tsx

@@ -2,6 +2,7 @@
 import AutoTooltip from '@/components/auto-tooltip';
 import DropdownButtons from '@/components/drop-down-buttons';
 import StatusTag from '@/components/status-tag';
+import { useIntl } from '@umijs/max';
 import { ColumnsType } from 'antd/es/table';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
@@ -10,12 +11,13 @@ import {
   ClusterStatusLabelMap,
   ProviderLabelMap,
   clusterActionList
-} from '.';
-import { ClusterListItem } from './types';
+} from '../config';
+import { ClusterListItem } from '../config/types';
 
 const useClusterColumns = (
   handleSelect: (val: string, record: ClusterListItem) => void
 ): ColumnsType<ClusterListItem> => {
+  const intl = useIntl();
   const setActionsItems = (row: ClusterListItem) => {
     return clusterActionList.filter((item) => {
       if (item.provider) {
@@ -28,17 +30,17 @@ const useClusterColumns = (
   return useMemo(() => {
     return [
       {
-        title: 'Name',
+        title: intl.formatMessage({ id: 'common.table.name' }),
         dataIndex: 'name',
         render: (text: string) => <AutoTooltip ghost>{text}</AutoTooltip>
       },
       {
-        title: 'Provider',
+        title: intl.formatMessage({ id: 'clusters.table.provider' }),
         dataIndex: 'provider',
         render: (value: string) => <span>{ProviderLabelMap[value]}</span>
       },
       {
-        title: 'Status',
+        title: intl.formatMessage({ id: 'common.table.status' }),
         dataIndex: 'state',
         render: (value: number) => (
           <StatusTag
@@ -52,7 +54,11 @@ const useClusterColumns = (
       {
         title: 'Workers',
         dataIndex: 'workers',
-        render: (value: number) => <span>{value}</span>
+        render: (value: number, record: ClusterListItem) => (
+          <span>
+            {record.ready_workers} / {record.workers}
+          </span>
+        )
       },
       {
         title: 'GPUs',
@@ -60,12 +66,12 @@ const useClusterColumns = (
         render: (value: number) => <span>{value}</span>
       },
       {
-        title: 'Deployments',
+        title: intl.formatMessage({ id: 'clusters.table.deployments' }),
         dataIndex: 'models',
         render: (value: number) => <span>{value}</span>
       },
       {
-        title: 'Created',
+        title: intl.formatMessage({ id: 'common.table.createTime' }),
         dataIndex: 'created_at',
         width: 180,
         render: (value: string) => (
@@ -73,7 +79,7 @@ const useClusterColumns = (
         )
       },
       {
-        title: 'Operations',
+        title: intl.formatMessage({ id: 'common.table.operation' }),
         dataIndex: 'operations',
         render: (value: string, record: ClusterListItem) => (
           <DropdownButtons

src/pages/dashboard/components/system-load.tsx

@@ -1,24 +1,20 @@
 import CardWrapper from '@/components/card-wrapper';
 import GaugeChart from '@/components/echarts/gauge';
 import PageTools from '@/components/page-tools';
-import breakpoints from '@/config/breakpoints';
-import useWindowResize from '@/hooks/use-window-resize';
 import { useIntl } from '@umijs/max';
 import { Col, Row } from 'antd';
 import _ from 'lodash';
-import { memo, useContext, useEffect, useMemo, useState } from 'react';
+import { memo, useContext, useMemo } from 'react';
 import { DashboardContext } from '../config/dashboard-context';
 import ResourceUtilization from './resource-utilization';
 
+const smallChartHeight = 190;
+const largeChartHeight = 400;
+const resourceChartHeight = 400;
+
 const SystemLoad = () => {
   const intl = useIntl();
   const data = useContext(DashboardContext)?.system_load?.current || {};
-  const { size } = useWindowResize();
-  const [paddingRight, setPaddingRight] = useState<string>('20px');
-  const [smallChartHeight, setSmallChartHeight] = useState<number>(190);
-  const [largeChartHeight, setLargeChartHeight] = useState<number>(400);
-
-  const height = 400;
 
   const chartData = useMemo(() => {
     return {
@@ -37,16 +33,6 @@ const SystemLoad = () => {
     };
   }, [data]);
 
-  console.log('SystemLoad data:', chartData);
-
-  useEffect(() => {
-    if (size.width < breakpoints.xl) {
-      setPaddingRight('0');
-    } else {
-      setPaddingRight('20px');
-    }
-  }, [size.width]);
-
   return (
     <div>
       <div className="system-load">
@@ -58,22 +44,15 @@ const SystemLoad = () => {
             </span>
           }
         />
-        <Row style={{ width: '100%' }} gutter={[0, 20]}>
-          <Col
-            xs={24}
-            sm={24}
-            md={24}
-            lg={24}
-            xl={16}
-            style={{ paddingRight: paddingRight }}
-          >
-            <CardWrapper style={{ height: height, width: '100%' }}>
+        <Row gutter={[20, 20]}>
+          <Col xs={24} sm={24} md={24} lg={24} xl={16}>
+            <CardWrapper style={{ height: resourceChartHeight }}>
               <ResourceUtilization />
             </CardWrapper>
           </Col>
           <Col xs={24} sm={24} md={24} lg={24} xl={8}>
-            <CardWrapper style={{ height: largeChartHeight, width: '100%' }}>
-              <Row style={{ height: largeChartHeight, width: '100%' }}>
+            <CardWrapper style={{ height: largeChartHeight }}>
+              <Row style={{ height: largeChartHeight }}>
                 <Col span={12} style={{ height: smallChartHeight }}>
                   <GaugeChart
                     height={smallChartHeight}

src/pages/dashboard/components/usage-inner/index.tsx

@@ -91,20 +91,8 @@ const UsageInner: FC<{ maxWidth: number }> = ({ maxWidth }) => {
 
   return (
     <div>
-      <Row
-        style={{ width: '100%' }}
-        gutter={maxWidth < breakpoints.xl ? [0, 0] : [0, 20]}
-      >
-        <Col
-          xs={24}
-          sm={24}
-          md={24}
-          lg={24}
-          xl={16}
-          style={{
-            paddingRight: maxWidth < breakpoints.xl ? 0 : 20
-          }}
-        >
+      <Row gutter={maxWidth < breakpoints.xl ? [0, 0] : [20, 20]}>
+        <Col xs={24} sm={24} md={24} lg={24} xl={16}>
           <div
             style={{
               display: 'flex',

src/pages/llmodels/components/advance-config.tsx

@@ -2,7 +2,6 @@ import IconFont from '@/components/icon-font';
 import LabelSelector from '@/components/label-selector';
 import ListInput from '@/components/list-input';
 import CheckboxField from '@/components/seal-form/checkbox-field';
-import SealCascader from '@/components/seal-form/seal-cascader';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
@@ -28,7 +27,6 @@ import mindieConfig from '../config/mindie-config';
 import { FormData } from '../config/types';
 import vllmConfig from '../config/vllm-config';
 import dataformStyles from '../style/data-form.less';
-import GPUCard from './gpu-card';
 import Performance from './performance';
 
 interface AdvanceConfigProps {
@@ -265,7 +263,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
             </Form.Item>
           </>
         )}
-        {scheduleType === 'manual' && (
+        {/* {scheduleType === 'manual' && (
           <>
             <Form.Item
               name={['gpu_selector', 'gpu_ids']}
@@ -293,7 +291,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
               ></SealCascader>
             </Form.Item>
           </>
-        )}
+        )} */}
 
         <Form.Item name="backend_version">
           <SealInput.Input

src/pages/llmodels/components/deploy-builtin-modal.tsx

@@ -3,7 +3,6 @@ import GSDrawer from '@/components/scroller-modal/gs-drawer';
 import { PageActionType } from '@/config/types';
 import { createAxiosToken } from '@/hooks/use-chunk-request';
 import { ProviderValueMap } from '@/pages/cluster-management/config';
-import { CloseOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button } from 'antd';
 import _ from 'lodash';
@@ -506,22 +505,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
 
   return (
     <GSDrawer
-      title={
-        <div className="flex-between flex-center">
-          <span
-            style={{
-              color: 'var(--ant-color-text)',
-              fontWeight: 'var(--font-weight-medium)',
-              fontSize: 'var(--font-size-middle)'
-            }}
-          >
-            {title}
-          </span>
-          <Button type="text" size="small" onClick={handleCancel}>
-            <CloseOutlined></CloseOutlined>
-          </Button>
-        </div>
-      }
+      title={title}
       open={open}
       onClose={handleCancel}
       destroyOnClose={true}

src/pages/llmodels/components/deploy-modal.tsx

@@ -246,21 +246,18 @@ const AddModal: FC<AddModalProps> = (props) => {
       categories: getCategory(item)
     });
 
-    setWarningStatus(
-      {
-        show: true,
-        title: '',
-        type: 'transition',
-        message: intl.formatMessage({ id: 'models.form.evaluating' })
-      },
-      {
-        override: true
-      }
-    );
+    let warningStatus: MessageStatus = {
+      show: true,
+      title: '',
+      type: 'transition',
+      message: intl.formatMessage({ id: 'models.form.evaluating' })
+    };
 
     if (item.isGGUF) {
-      fetchModelFiles();
+      warningStatus.type = 'danger';
+      warningStatus.message = 'GGUF model is not supported.';
     }
+    setWarningStatus(warningStatus, { override: true });
   };
 
   const handleOnSelectModelAfterEvaluate = (item: any, manual?: boolean) => {
@@ -531,7 +528,11 @@ const AddModal: FC<AddModalProps> = (props) => {
                     showOkBtn={!showExtraButton}
                     extra={
                       showExtraButton && (
-                        <Button type="primary" onClick={handleSubmitAnyway}>
+                        <Button
+                          type="primary"
+                          onClick={handleSubmitAnyway}
+                          disabled={isGGUF}
+                        >
                           {intl.formatMessage({
                             id: 'models.form.submit.anyway'
                           })}

src/pages/llmodels/components/instance-item.tsx

@@ -681,4 +681,4 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
     </>
   );
 };
-export default React.memo(InstanceItem);
+export default InstanceItem;

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

@@ -174,8 +174,6 @@ const ModelCard: React.FC<{
       setModelData(null);
       setReadmeText(null);
       handleOnCollapse(null);
-      // setIsGGUF(false);
-      // setIsGGUFModel(false);
     }
   };
 
@@ -205,8 +203,6 @@ const ModelCard: React.FC<{
       setModelData(null);
       setReadmeText(null);
       handleOnCollapse(null);
-      // setIsGGUF(false);
-      // setIsGGUFModel(false);
     }
   };
 

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

@@ -199,7 +199,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
     try {
       const params = {
         Name: `${searchInputRef.current}`,
-        tags: ['gptq'],
+        tags: [],
         tasks: filterTaskRef.current
           ? ([ModelscopeTaskMap[filterTaskRef.current]] as string[])
           : [],

src/pages/llmodels/components/table-list.tsx

@@ -724,7 +724,9 @@ const Models: React.FC<ModelsProps> = ({
               <Select
                 allowClear
                 showSearch={false}
-                placeholder="Filter by cluster"
+                placeholder={intl.formatMessage({
+                  id: 'clusters.filterBy.cluster'
+                })}
                 style={{ width: 160 }}
                 size="large"
                 maxTagCount={1}

src/pages/llmodels/download/index.tsx

@@ -1,10 +1,11 @@
 import ModalFooter from '@/components/modal-footer';
 import GSDrawer from '@/components/scroller-modal/gs-drawer';
+import { ProviderValueMap } from '@/pages/cluster-management/config';
 import { useIntl } from '@umijs/max';
 import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ColumnWrapper from '../components/column-wrapper';
-import HFModelFile from '../components/hf-model-file';
+import CompatibilityAlert from '../components/compatible-alert';
 import ModelCard from '../components/model-card';
 import SearchModel from '../components/search-model';
 import Separator from '../components/separator';
@@ -19,7 +20,6 @@ type AddModalProps = {
   source: string;
   width?: string | number;
   hasLinuxWorker?: boolean;
-  workersList: Global.BaseOption<number>[];
   workerOptions: any[];
   onOk: (values: FormData) => void;
   onCancel: () => void;
@@ -28,7 +28,6 @@ type AddModalProps = {
 const DownloadModel: React.FC<AddModalProps> = (props) => {
   const {
     title,
-    workersList,
     open,
     onOk,
     onCancel,
@@ -47,14 +46,13 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
   const [selectedModel, setSelectedModel] = useState<any>({});
   const [collapsed, setCollapsed] = useState<boolean>(false);
   const [isGGUF, setIsGGUF] = useState<boolean>(false);
-  const [fileName, setFileName] = useState<string>('');
   const modelFileRef = useRef<any>(null);
 
   const generateModelInfo = () => {
     if (source === modelSourceMap.huggingface_value) {
       const huggingFaceModel = {
         huggingface_repo_id: selectedModel.name,
-        huggingface_filename: fileName || null
+        huggingface_filename: null
       };
       return huggingFaceModel;
     }
@@ -62,15 +60,12 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
     if (source === modelSourceMap.modelscope_value) {
       const modelScopeModel = {
         model_scope_model_id: selectedModel.name,
-        model_scope_file_path: fileName || null
+        model_scope_file_path: null
       };
       return modelScopeModel;
     }
     return {};
   };
-  const handleSelectModelFile = useCallback((item: any) => {
-    setFileName(item.fakeName);
-  }, []);
 
   const handleOnSelectModel = (item: any) => {
     setSelectedModel(item);
@@ -103,21 +98,30 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
     onCancel?.();
   }, [onCancel]);
 
-  useEffect(() => {
-    handleSelectModelFile({ fakeName: '' });
-  }, [selectedModel]);
+  const initDefaultWorker = () => {
+    if (!workerOptions || workerOptions.length === 0) {
+      form.current?.form?.setFieldValue('worker_id', []);
+      return;
+    }
+    const getWorkerId = (worker: any) => [
+      worker?.value ?? '',
+      worker?.children?.[0]?.value ?? ''
+    ];
+
+    const customWorker = workerOptions.find(
+      (item) => item.provider === ProviderValueMap.Custom
+    );
+
+    const worker_id = getWorkerId(customWorker || workerOptions[0]);
+    form.current?.form?.setFieldValue('worker_id', worker_id);
+  };
 
   useEffect(() => {
     if (!open) {
       setIsGGUF(false);
-    } else if (source === modelSourceMap.ollama_library_value) {
-      setIsGGUF(true);
     }
     if (open) {
-      form.current?.form?.setFieldValue(
-        'worker_id',
-        workersList[0]?.value || ''
-      );
+      initDefaultWorker();
     }
 
     return () => {
@@ -183,16 +187,6 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
                   modelSource={props.source}
                   setIsGGUF={handleSetIsGGUF}
                 ></ModelCard>
-                {isGGUF && (
-                  <HFModelFile
-                    ref={modelFileRef}
-                    selectedModel={selectedModel}
-                    modelSource={props.source}
-                    onSelectFile={handleSelectModelFile}
-                    collapsed={collapsed}
-                    isDownload={true}
-                  ></HFModelFile>
-                )}
               </ColumnWrapper>
               <Separator></Separator>
             </div>
@@ -203,9 +197,21 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
             paddingBottom={50}
             footer={
               <>
+                <CompatibilityAlert
+                  showClose={false}
+                  warningStatus={{
+                    show: isGGUF,
+                    type: 'danger',
+                    message: 'GGUF is not supported'
+                  }}
+                  contentStyle={{ paddingInline: 0 }}
+                ></CompatibilityAlert>
                 <ModalFooter
                   onCancel={handleCancel}
                   onOk={handleSumit}
+                  okBtnProps={{
+                    disabled: isGGUF
+                  }}
                   style={{
                     padding: '16px 24px',
                     display: 'flex',
@@ -228,7 +234,6 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
                 ref={form}
                 onOk={handleOk}
                 source={source}
-                workersList={workersList}
                 workerOptions={workerOptions}
               ></TargetForm>
             </>

src/pages/llmodels/download/target-form.tsx

@@ -1,3 +1,4 @@
+import SealCascader from '@/components/seal-form/seal-cascader';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
@@ -11,14 +12,13 @@ import { localPathTipsList, modelSourceMap, sourceOptions } from '../config';
 
 interface TargetFormProps {
   ref?: any;
-  workersList: Global.BaseOption<number>[];
   source: string;
   workerOptions: any[];
   onOk: (values: any) => void;
 }
 
 const TargetForm: React.FC<TargetFormProps> = forwardRef((props, ref) => {
-  const { onOk, source, workersList, workerOptions } = props;
+  const { onOk, source, workerOptions } = props;
   const { getRuleMessage } = useAppUtils();
   const intl = useIntl();
   const [form] = Form.useForm();
@@ -29,7 +29,14 @@ const TargetForm: React.FC<TargetFormProps> = forwardRef((props, ref) => {
 
   const handleOk = (values: any) => {
     const data = _.pickBy(values, (val: string) => val);
-    onOk(data);
+    onOk({
+      ...data,
+      worker_id: data.worker_id?.[1]
+    });
+    console.log('Form Data: ', {
+      ...data,
+      worker_id: data.worker_id?.[1]
+    });
   };
 
   const handleOnLocalPathBlur = (e: any) => {
@@ -116,12 +123,7 @@ const TargetForm: React.FC<TargetFormProps> = forwardRef((props, ref) => {
             }
           ]}
         >
-          <SealSelect
-            label="Worker"
-            options={workersList}
-            required
-          ></SealSelect>
-          {/* <SealCascader
+          <SealCascader
             required
             showSearch
             expandTrigger="hover"
@@ -131,9 +133,8 @@ const TargetForm: React.FC<TargetFormProps> = forwardRef((props, ref) => {
             label="Worker"
             options={workerOptions}
             showCheckedStrategy="SHOW_CHILD"
-            value={form.getFieldValue(['gpu_selector', 'gpu_ids'])}
             getPopupContainer={(triggerNode) => triggerNode.parentNode}
-          ></SealCascader> */}
+          ></SealCascader>
         </Form.Item>
         {source !== modelSourceMap.local_path_value && (
           <Form.Item<FormData>

src/pages/llmodels/hooks/use-form-initial-values.ts

@@ -12,14 +12,16 @@ import { queryGPUList } from '../apis';
 import { backendOptionsMap, setSourceRepoConfigValue } from '../config';
 import { GPUListItem, ListItem } from '../config/types';
 
-interface CascaderOption {
+type EmptyObject = Record<never, never>;
+
+type CascaderOption<T extends object = EmptyObject> = {
   label: string;
   value: string | number;
   parent?: boolean;
   disabled?: boolean;
   index?: number;
-  children?: CascaderOption[];
-}
+  children?: CascaderOption<T>[];
+} & Partial<T>;
 
 export const useGenerateGPUOptions = () => {
   const [gpuOptions, setGpuOptions] = useState<CascaderOption[]>([]);
@@ -102,7 +104,9 @@ export const useGenerateGPUOptions = () => {
 };
 
 export const useGenerateWorkerOptions = () => {
-  const [workerOptions, setWorkerOptions] = useState<CascaderOption[]>([]);
+  const [workerOptions, setWorkerOptions] = useState<
+    CascaderOption<{ state: string }>[]
+  >([]);
   const [clusterList, setClusterList] = useState<
     Global.BaseOption<number, { provider: string; state: string | number }>[]
   >([]);
@@ -117,18 +121,21 @@ export const useGenerateWorkerOptions = () => {
     workerList: WorkerListItem[],
     clusterList: ClusterListItem[]
   ) => {
-    const options = clusterList.map((cluster) => ({
-      label: cluster.name,
-      value: cluster.id,
-      parent: true,
-      children: workerList
-        .filter((worker) => worker.cluster_id === cluster.id)
-        .map((worker) => ({
-          disabled: WorkerStatusMap.ready !== worker.state,
-          label: worker.name,
-          value: worker.id
-        }))
-    }));
+    const options = clusterList
+      .map((cluster) => ({
+        label: cluster.name,
+        value: cluster.id,
+        parent: true,
+        children: workerList
+          .filter((worker) => worker.cluster_id === cluster.id)
+          .map((worker) => ({
+            disabled: WorkerStatusMap.ready !== worker.state,
+            state: worker.state,
+            label: worker.name,
+            value: worker.id
+          }))
+      }))
+      .filter((cluster) => cluster.children.length > 0); // Filter out clusters with no workers
     setWorkerOptions(options);
     return options;
   };

src/pages/profile/index.tsx

@@ -45,7 +45,7 @@ const Profile: React.FC = () => {
         children: <Appearance />
       }
     ];
-  }, [initialState?.currentUser?.source]);
+  }, [intl, initialState?.currentUser?.source]);
 
   const handleChangeTab = useCallback((key: string) => {
     setActiveKey(key);

src/pages/resources/components/gpus.tsx

@@ -1,44 +1,13 @@
-import AutoTooltip from '@/components/auto-tooltip';
 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 { queryClusterList } from '@/pages/cluster-management/apis';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
 import { ConfigProvider, Empty, Table } from 'antd';
-import _ from 'lodash';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { GPU_DEVICES_API, queryGpuDevicesList } from '../apis';
 import { GPUDeviceItem } from '../config/types';
-const { Column } = Table;
-
-const fieldList = [
-  {
-    label: 'resources.table.total',
-    key: 'total',
-    locale: true,
-    render: (val: any) => {
-      return convertFileSize(val, 0);
-    }
-  },
-  {
-    label: 'resources.table.used',
-    key: 'used',
-    locale: true,
-    render: (val: any) => {
-      return convertFileSize(val, 0);
-    }
-  },
-  {
-    label: 'resources.table.allocated',
-    key: 'allocated',
-    locale: true,
-    render: (val: any) => {
-      return convertFileSize(val, 0);
-    }
-  }
-];
+import useGPUColumns from '../hooks/use-gpu-columns';
 
 const GPUList: React.FC = () => {
   const {
@@ -56,6 +25,22 @@ const GPUList: React.FC = () => {
   });
 
   const intl = useIntl();
+  const [clusterList, setClusterList] = useState<Global.BaseOption<number>[]>(
+    []
+  );
+
+  const getClusterList = async () => {
+    try {
+      const res = await queryClusterList({ page: 1, perPage: 100 });
+      const list = res.items?.map((item) => ({
+        label: item.name,
+        value: item.id
+      }));
+      setClusterList(list || []);
+    } catch (error) {
+      setClusterList([]);
+    }
+  };
 
   const renderEmpty = (type?: string) => {
     if (type !== 'Table') return;
@@ -69,6 +54,20 @@ const GPUList: React.FC = () => {
     return <div></div>;
   };
 
+  const columns = useGPUColumns({
+    clusterList,
+    loadend: dataSource.loadend,
+    firstLoad: extraStatus.firstLoad
+  });
+
+  useEffect(() => {
+    console.log('columns changed!');
+  }, [columns]);
+
+  useEffect(() => {
+    getClusterList();
+  }, []);
+
   return (
     <>
       <PageContainer
@@ -94,6 +93,8 @@ const GPUList: React.FC = () => {
         ></FilterBar>
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table
+            columns={columns}
+            style={{ width: '100%' }}
             tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
             dataSource={dataSource.dataList}
             loading={dataSource.loading}
@@ -107,109 +108,7 @@ const GPUList: React.FC = () => {
               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>
-                );
-              }}
-            />
-            <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.vramutilization'
-              })}
-              dataIndex="VRAM"
-              key="VRAM"
-              render={(text, record: GPUDeviceItem, index: number) => {
-                return (
-                  <ProgressBar
-                    defaultOpen={
-                      index === 0 && dataSource.loadend && extraStatus.firstLoad
-                    }
-                    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>
+          ></Table>
         </ConfigProvider>
       </PageContainer>
     </>

src/pages/resources/components/model-files.tsx

@@ -1,10 +1,6 @@
 import { modelsExpandKeysAtom } from '@/atoms/models';
-import AutoTooltip from '@/components/auto-tooltip';
 import DeleteModal from '@/components/delete-modal';
-import DropdownButtons from '@/components/drop-down-buttons';
-import { TooltipOverlayScroller } from '@/components/overlay-scroller';
 import { FilterBar } from '@/components/page-tools';
-import StatusTag from '@/components/status-tag';
 import { PageAction } from '@/config';
 import useAppUtils from '@/hooks/use-app-utils';
 import useBodyScroll from '@/hooks/use-body-scroll';
@@ -15,26 +11,18 @@ import { backendOptionsMap, modelSourceMap } from '@/pages/llmodels/config';
 import { identifyModelTask } from '@/pages/llmodels/config/audio-catalog';
 import {
   modalConfig,
-  modelFileActions,
   onLineSourceOptions
 } from '@/pages/llmodels/config/button-actions';
 import { SourceType } from '@/pages/llmodels/config/types';
 import DownloadModal from '@/pages/llmodels/download';
 import { useGenerateWorkerOptions } from '@/pages/llmodels/hooks/use-form-initial-values';
-import { convertFileSize } from '@/utils';
-import {
-  CheckCircleFilled,
-  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';
+import { useMemoizedFn } from 'ahooks';
+import { ConfigProvider, Empty, Table, message } from 'antd';
 import { useAtom } from 'jotai';
 import _ from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
-import styled from 'styled-components';
+import { useEffect, useMemo, useState } from 'react';
 import { checkCurrentbackend } from '../../llmodels/hooks';
 import {
   MODEL_FILES_API,
@@ -43,242 +31,12 @@ import {
   queryModelFilesList,
   retryDownloadModelFile
 } from '../apis';
-import {
-  ModelfileState,
-  ModelfileStateMap,
-  ModelfileStateMapValue,
-  WorkerStatusMap
-} from '../config';
+import { WorkerStatusMap } from '../config';
 import { ModelFile as ListItem } from '../config/types';
-
-const { Paragraph } = Typography;
+import useFilesColumns from '../hooks/use-files-columns';
 
 const filterPattern = /^(.*?)(?:-\d+-of-\d+)?(\.gguf)?$/;
 
-const PathWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  height: 100%;
-  &::after {
-    content: '';
-    display: block;
-    width: 20px;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 1;
-  }
-  .btn-wrapper {
-    display: flex;
-    opacity: 0;
-    width: 0;
-    align-items: center;
-  }
-  &:hover {
-    .btn-wrapper {
-      width: auto;
-      opacity: 1;
-    }
-  }
-`;
-
-const ItemWrapper = styled.ul`
-  max-width: 300px;
-  margin: 0;
-  padding-inline: 13px 0;
-  word-break: break-word;
-  li {
-    line-height: 1.6;
-  }
-`;
-
-const FilesTag = styled(Tag)`
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  margin-inline: 4px 0;
-  height: 22px;
-  border-radius: var(--border-radius-base);
-`;
-
-const TextWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  height: 100%;
-`;
-
-const TypographyPara = styled(Paragraph)`
-  background: transparent;
-  color: inherit;
-  margin-bottom: 0;
-  font-size: 13px;
-`;
-
-const TooltipTitle: React.FC<{ path: string }> = ({ path }) => {
-  const intl = useIntl();
-  return (
-    <TypographyPara
-      style={{ margin: 0 }}
-      copyable={{
-        icon: [
-          <CopyOutlined key="copy-icon" />,
-          <CheckCircleFilled key="copied-icon" />
-        ],
-        text: path,
-        tooltips: [
-          intl.formatMessage({ id: 'common.button.copy' }),
-          intl.formatMessage({ id: 'common.button.copied' })
-        ]
-      }}
-    >
-      {path}
-    </TypographyPara>
-  );
-};
-
-const getWorkerName = (
-  id: number,
-  workersList: Global.BaseOption<number>[]
-) => {
-  const worker = workersList.find((item) => item.value === id);
-  return worker?.label || '';
-};
-
-const getModelInfo = (record: ListItem) => {
-  const source = _.get(modelSourceMap, record.source, '');
-  if (record.source === modelSourceMap.huggingface_value) {
-    return {
-      source: `${source}/${record.huggingface_repo_id}`,
-      repo_id: record.huggingface_repo_id,
-      title: `${record.huggingface_repo_id}/${record.huggingface_filename}`,
-      filename: record.huggingface_filename || record.huggingface_repo_id
-    };
-  }
-  if (record.source === modelSourceMap.modelscope_value) {
-    return {
-      source: `${source}/${record.model_scope_model_id}`,
-      repo_id: record.model_scope_model_id,
-      title: `${record.model_scope_model_id}/${record.model_scope_file_path}`,
-      filename: record.model_scope_file_path || record.model_scope_model_id
-    };
-  }
-  if (record.source === modelSourceMap.ollama_library_value) {
-    return {
-      source: `${source}/${record.ollama_library_model_name}`,
-      repo_id: record.ollama_library_model_name,
-      title: record.ollama_library_model_name,
-      filename: record.ollama_library_model_name
-    };
-  }
-  return {
-    source: `${source}${record.local_path}`,
-    repo_id: record.local_path,
-    title: record.local_path,
-    filename: _.split(record.local_path, /[\\/]/).pop()
-  };
-};
-
-const getResolvedPath = (pathList: string[]) => {
-  return _.split(pathList?.[0], /[\\/]/).pop();
-};
-
-const InstanceStatusTag = (props: { data: ListItem }) => {
-  const { data } = props;
-  if (!data.state) {
-    return null;
-  }
-  return (
-    <StatusTag
-      download={
-        data.state === ModelfileStateMap.Downloading
-          ? { percent: data.download_progress }
-          : undefined
-      }
-      statusValue={{
-        status:
-          data.state === ModelfileStateMap.Downloading &&
-          data.download_progress === 100
-            ? ModelfileState[ModelfileStateMap.Ready]
-            : ModelfileState[data.state],
-        text: ModelfileStateMapValue[data.state],
-        message:
-          data.state === ModelfileStateMap.Downloading &&
-          data.download_progress === 100
-            ? ''
-            : data.state_message
-      }}
-    />
-  );
-};
-
-const RenderParts = (props: { record: ListItem }) => {
-  const { record } = props;
-  const intl = useIntl();
-  const parts = record.resolved_paths || [];
-  if (parts.length <= 1) {
-    return null;
-  }
-
-  const renderItem = () => {
-    return (
-      <ItemWrapper>
-        {parts.map((item: string, index: number) => {
-          return <li key={index}>{_.split(item, /[\\/]/).pop()}</li>;
-        })}
-      </ItemWrapper>
-    );
-  };
-
-  return (
-    <TooltipOverlayScroller title={renderItem()}>
-      <FilesTag color="purple" icon={<InfoCircleOutlined />}>
-        <span style={{ opacity: 1 }}>
-          {record.resolved_paths?.length}{' '}
-          {intl.formatMessage({ id: 'models.form.files' })}
-        </span>
-      </FilesTag>
-    </TooltipOverlayScroller>
-  );
-};
-
-const ResolvedPathColumn = (props: { record: ListItem }) => {
-  const { record } = props;
-  const intl = useIntl();
-  if (
-    !record.resolved_paths.length &&
-    record.state === ModelfileStateMap.Downloading
-  ) {
-    return (
-      <span>
-        {intl.formatMessage({
-          id: 'resources.modelfiles.storagePath.holder'
-        })}
-      </span>
-    );
-  }
-  return (
-    record.resolved_paths?.length > 0 && (
-      <PathWrapper>
-        <TextWrapper>
-          <AutoTooltip
-            ghost
-            showTitle
-            title={
-              <TooltipTitle path={record.resolved_paths?.[0]}></TooltipTitle>
-            }
-          >
-            <span>{getResolvedPath(record.resolved_paths)}</span>
-          </AutoTooltip>
-        </TextWrapper>
-        <RenderParts record={record}></RenderParts>
-      </PathWrapper>
-    )
-  );
-};
-
 const ModelFiles = () => {
   const { getWorkerOptionList, workerOptions, clusterList, workersList } =
     useGenerateWorkerOptions();
@@ -387,7 +145,7 @@ const ModelFiles = () => {
     };
   };
 
-  const handleSelect = async (val: any, record: ListItem) => {
+  const handleSelect = useMemoizedFn(async (val: any, record: ListItem) => {
     try {
       if (val === 'delete') {
         handleDelete(
@@ -419,7 +177,7 @@ const ModelFiles = () => {
     } catch (error) {
       // console.log('error', error);
     }
-  };
+  });
 
   const renderEmpty = (type?: string) => {
     if (type !== 'Table') return;
@@ -464,14 +222,6 @@ const ModelFiles = () => {
     }
   };
 
-  const setActionList = (record: ListItem) => {
-    return _.filter(modelFileActions, (item: { key: string }) => {
-      if (item.key === 'deploy') {
-        return record.state === ModelfileStateMap.Ready;
-      }
-      return true;
-    });
-  };
   const handleDeployModalCancel = () => {
     setOpenDeployModal({
       ...openDeployModal,
@@ -506,104 +256,19 @@ const ModelFiles = () => {
     }
   };
 
-  const columns: any[] = [
-    {
-      title: intl.formatMessage({ id: 'models.form.source' }),
-      dataIndex: 'source',
-      ellipsis: {
-        showTitle: false
-      },
-      render: (text: string, record: ListItem) => {
-        const modelInfo = getModelInfo(record);
-        const { repo_id, source } = modelInfo;
-        return (
-          <TextWrapper style={{ paddingRight: 8 }}>
-            <AutoTooltip ghost title={source}>
-              {source}
-            </AutoTooltip>
-          </TextWrapper>
-        );
-      }
-    },
-    {
-      title: 'Worker',
-      dataIndex: 'worker_name',
-      ellipsis: {
-        showTitle: false
-      },
-      render: (text: string, record: ListItem) => {
-        return (
-          <AutoTooltip ghost>
-            <span>{getWorkerName(record.worker_id, workersList)}</span>
-          </AutoTooltip>
-        );
-      }
-    },
-    {
-      title: intl.formatMessage({ id: 'common.table.status' }),
-      dataIndex: 'state',
-      width: 132,
-      render: (text: string, record: ListItem) => {
-        return <InstanceStatusTag data={record} />;
-      }
-    },
-    {
-      title: intl.formatMessage({ id: 'resources.modelfiles.form.path' }),
-      dataIndex: 'resolved_paths',
-      width: '30%',
-      ellipsis: {
-        showTitle: false
-      },
-      render: (text: string, record: ListItem) => (
-        <ResolvedPathColumn record={record} />
-      )
-    },
-    {
-      title: intl.formatMessage({ id: 'resources.modelfiles.size' }),
-      dataIndex: 'size',
-      width: 110,
-      align: 'right',
-      ellipsis: {
-        showTitle: false
-      },
-      render: (text: string, record: ListItem) => {
-        return (
-          <AutoTooltip ghost>
-            <span>{convertFileSize(record.size, 1, true)}</span>
-          </AutoTooltip>
-        );
-      }
-    },
-    {
-      title: intl.formatMessage({ id: 'common.table.createTime' }),
-      dataIndex: 'created_at',
-      sorter: false,
-      width: 180,
-      ellipsis: {
-        showTitle: false
-      },
-      render: (text: number) => (
-        <AutoTooltip ghost minWidth={20}>
-          {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
-        </AutoTooltip>
-      )
-    },
-    {
-      title: intl.formatMessage({ id: 'common.table.operation' }),
-      dataIndex: 'operation',
-      width: 120,
-      render: (text: string, record: ListItem) => (
-        <DropdownButtons
-          items={setActionList(record)}
-          onSelect={(val) => handleSelect(val, record)}
-        ></DropdownButtons>
-      )
-    }
-  ];
+  const columns = useFilesColumns({
+    handleSelect,
+    workersList
+  });
 
   const readyWorkers = useMemo(() => {
-    return workersList.filter((item) => item.state === WorkerStatusMap.ready);
-  }, [workersList]);
+    return workerOptions.map((item) => {
+      item.children = item.children?.filter(
+        (child) => child.state === WorkerStatusMap.ready
+      );
+      return item;
+    });
+  }, [workerOptions]);
 
   return (
     <>
@@ -622,8 +287,8 @@ const ModelFiles = () => {
           marginBottom={22}
           marginTop={30}
           actionType="dropdown"
-          selectHolder="resources.filter.worker"
-          inputHolder="resources.filter.path"
+          selectHolder={intl.formatMessage({ id: 'resources.filter.worker' })}
+          inputHolder={intl.formatMessage({ id: 'resources.filter.path' })}
           buttonText={intl.formatMessage({
             id: 'resources.modelfiles.download'
           })}
@@ -666,8 +331,7 @@ const ModelFiles = () => {
           source={downloadModalStatus.source}
           width={downloadModalStatus.width}
           hasLinuxWorker={downloadModalStatus.hasLinuxWorker}
-          workersList={readyWorkers}
-          workerOptions={workerOptions}
+          workerOptions={readyWorkers}
         ></DownloadModal>
         <DeployModal
           deploymentType="modelFiles"

src/pages/resources/components/workers.tsx

@@ -1,24 +1,11 @@
-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 { 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';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { queryClusterList } from '@/pages/cluster-management/apis';
-import { convertFileSize } from '@/utils';
-import {
-  CodeOutlined,
-  DeleteOutlined,
-  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';
+import { useMemoizedFn } from 'ahooks';
+import { ConfigProvider, Empty, Table, message } from 'antd';
 import React, { useEffect, useState } from 'react';
 import {
   WORKERS_API,
@@ -26,82 +13,10 @@ import {
   queryWorkersList,
   updateWorker
 } from '../apis';
-import { WorkerStatusMapValue, status } from '../config';
-import { Filesystem, GPUDeviceItem, ListItem } from '../config/types';
+import { ListItem } from '../config/types';
+import useWorkerColumns from '../hooks/use-worker-columns';
 import UpdateLabels from './update-labels';
 
-const { Column } = Table;
-
-const fieldList = [
-  {
-    label: 'resources.table.total',
-    key: 'total',
-    locale: true,
-    render: (val: any) => {
-      return convertFileSize(val, 0);
-    }
-  },
-  {
-    label: 'resources.table.used',
-    key: 'used',
-    locale: true,
-    render: (val: any) => {
-      return convertFileSize(val, 0);
-    }
-  },
-  {
-    label: 'resources.table.allocated',
-    key: 'allocated',
-    locale: true,
-    render: (val: any) => {
-      return convertFileSize(val, 0);
-    }
-  }
-];
-
-const ActionList = [
-  {
-    label: 'common.button.edit',
-    key: 'edit',
-    icon: <EditOutlined />
-  },
-  {
-    label: 'common.button.logs',
-    locale: false,
-    key: 'logs',
-    icon: <IconFont type="icon-logs" />
-  },
-  {
-    label: 'Terminal',
-    locale: false,
-    key: 'terminal',
-    icon: <CodeOutlined />
-  },
-  {
-    label: 'common.button.delete',
-    key: 'delete',
-    props: {
-      danger: true
-    },
-    icon: <DeleteOutlined />
-  }
-];
-
-const formateUtilazation = (val1: number, val2: number): number => {
-  if (!val2 || !val1) {
-    return 0;
-  }
-  return _.round((val1 / val2) * 100, 0);
-};
-
-const calcStorage = (files: Filesystem[]) => {
-  const mountRoot = _.find(
-    files,
-    (item: Filesystem) => item.mount_point === '/'
-  );
-  return mountRoot ? formateUtilazation(mountRoot.used, mountRoot.total) : 0;
-};
-
 const Workers: React.FC = () => {
   const {
     dataSource,
@@ -203,7 +118,7 @@ const Workers: React.FC = () => {
     });
   };
 
-  const handleSelect = (val: any, record: ListItem) => {
+  const handleSelect = useMemoizedFn((val: any, record: ListItem) => {
     if (val === 'edit') {
       handleUpdateLabels(record);
       return;
@@ -211,7 +126,7 @@ const Workers: React.FC = () => {
     if (val === 'delete') {
       handleDelete(record);
     }
-  };
+  });
 
   const renderEmpty = (type?: string) => {
     if (type !== 'Table') return;
@@ -225,21 +140,6 @@ const Workers: React.FC = () => {
     return <div></div>;
   };
 
-  const renderStorageTooltip = (files: Filesystem[]) => {
-    const mountRoot = _.find(
-      files,
-      (item: Filesystem) => item.mount_point === '/'
-    );
-    return mountRoot ? (
-      <InfoColumn
-        fieldList={fieldList.filter((item) => item.key !== 'allocated')}
-        data={mountRoot}
-      ></InfoColumn>
-    ) : (
-      0
-    );
-  };
-
   const handleClusterChange = (value: number) => {
     handleQueryChange({
       page: 1,
@@ -247,6 +147,13 @@ const Workers: React.FC = () => {
     });
   };
 
+  const columns = useWorkerColumns({
+    clusterData,
+    dataSource,
+    extraStatus,
+    handleSelect
+  });
+
   useEffect(() => {
     getClusterList();
   }, []);
@@ -267,7 +174,7 @@ const Workers: React.FC = () => {
         <FilterBar
           showSelect={true}
           showPrimaryButton={false}
-          selectHolder="Filter by cluster"
+          selectHolder={intl.formatMessage({ id: 'clusters.filterBy.cluster' })}
           marginBottom={22}
           marginTop={30}
           buttonText={intl.formatMessage({ id: 'resources.button.create' })}
@@ -281,6 +188,7 @@ const Workers: React.FC = () => {
         ></FilterBar>
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table
+            columns={columns}
             tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
             style={{ width: '100%' }}
             dataSource={dataSource.dataList}
@@ -296,246 +204,7 @@ const Workers: React.FC = () => {
               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>
-                );
-              }}
-            />
-            <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="Cluster"
-              dataIndex="cluster"
-              key="cluster"
-              render={(text, record: ListItem) => {
-                return (
-                  <AutoTooltip ghost maxWidth={240}>
-                    <span>{clusterData.data[record.cluster_id]}</span>
-                  </AutoTooltip>
-                );
-              }}
-            />
-            <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) => {
-                        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>
-                        );
-                      }
-                    )}
-                  </span>
-                );
-              }}
-            />
-
-            <Column
-              title={intl.formatMessage({ id: 'resources.table.vram' })}
-              dataIndex="VRAM"
-              key="VRAM"
-              render={(text, record: ListItem, rIndex) => {
-                return (
-                  <span className="flex-column flex-gap-2">
-                    {_.map(
-                      _.sortBy(record?.status?.gpu_devices || [], ['index']),
-                      (item: GPUDeviceItem, index: number) => {
-                        return (
-                          <span key={index}>
-                            <span className="flex-center">
-                              <span
-                                className="m-r-5"
-                                style={{ display: 'flex', width: 25 }}
-                              >
-                                [{item.index}]
-                              </span>
-                              <ProgressBar
-                                defaultOpen={
-                                  rIndex === 0 &&
-                                  index === 0 &&
-                                  dataSource.loadend &&
-                                  extraStatus.firstLoad
-                                }
-                                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, index) => {
-                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>
+          ></Table>
         </ConfigProvider>
         <DeleteModal ref={modalRef}></DeleteModal>
         <UpdateLabels

src/pages/resources/hooks/use-files-columns.tsx

@@ -0,0 +1,366 @@
+import AutoTooltip from '@/components/auto-tooltip';
+import DropdownButtons from '@/components/drop-down-buttons';
+import { TooltipOverlayScroller } from '@/components/overlay-scroller';
+import StatusTag from '@/components/status-tag';
+import { modelSourceMap } from '@/pages/llmodels/config';
+import { modelFileActions } from '@/pages/llmodels/config/button-actions';
+import { convertFileSize } from '@/utils';
+import {
+  CheckCircleFilled,
+  CopyOutlined,
+  InfoCircleOutlined
+} from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Tag, Typography } from 'antd';
+import { ColumnsType } from 'antd/lib/table';
+import dayjs from 'dayjs';
+import _ from 'lodash';
+import { useMemo } from 'react';
+import styled from 'styled-components';
+import {
+  ModelfileState,
+  ModelfileStateMap,
+  ModelfileStateMapValue
+} from '../config';
+import { ModelFile as ListItem } from '../config/types';
+const { Paragraph } = Typography;
+
+const TextWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  height: 100%;
+`;
+
+const PathWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 100%;
+  &::after {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+  }
+  .btn-wrapper {
+    display: flex;
+    opacity: 0;
+    width: 0;
+    align-items: center;
+  }
+  &:hover {
+    .btn-wrapper {
+      width: auto;
+      opacity: 1;
+    }
+  }
+`;
+
+const FilesTag = styled(Tag)`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  margin-inline: 4px 0;
+  height: 22px;
+  border-radius: var(--border-radius-base);
+`;
+
+const TypographyPara = styled(Paragraph)`
+  background: transparent;
+  color: inherit;
+  margin-bottom: 0;
+  font-size: 13px;
+`;
+
+const ItemWrapper = styled.ul`
+  max-width: 300px;
+  margin: 0;
+  padding-inline: 13px 0;
+  word-break: break-word;
+  li {
+    line-height: 1.6;
+  }
+`;
+
+const getResolvedPath = (pathList: string[]) => {
+  return _.split(pathList?.[0], /[\\/]/).pop();
+};
+
+const setActionList = (record: ListItem) => {
+  return _.filter(modelFileActions, (item: { key: string }) => {
+    if (item.key === 'deploy') {
+      return record.state === ModelfileStateMap.Ready;
+    }
+    return true;
+  });
+};
+
+const TooltipTitle: React.FC<{ path: string }> = ({ path }) => {
+  const intl = useIntl();
+  return (
+    <TypographyPara
+      style={{ margin: 0 }}
+      copyable={{
+        icon: [
+          <CopyOutlined key="copy-icon" />,
+          <CheckCircleFilled key="copied-icon" />
+        ],
+        text: path,
+        tooltips: [
+          intl.formatMessage({ id: 'common.button.copy' }),
+          intl.formatMessage({ id: 'common.button.copied' })
+        ]
+      }}
+    >
+      {path}
+    </TypographyPara>
+  );
+};
+
+const InstanceStatusTag = (props: { data: ListItem }) => {
+  const { data } = props;
+  if (!data.state) {
+    return null;
+  }
+  return (
+    <StatusTag
+      download={
+        data.state === ModelfileStateMap.Downloading
+          ? { percent: data.download_progress }
+          : undefined
+      }
+      statusValue={{
+        status:
+          data.state === ModelfileStateMap.Downloading &&
+          data.download_progress === 100
+            ? ModelfileState[ModelfileStateMap.Ready]
+            : ModelfileState[data.state],
+        text: ModelfileStateMapValue[data.state],
+        message:
+          data.state === ModelfileStateMap.Downloading &&
+          data.download_progress === 100
+            ? ''
+            : data.state_message
+      }}
+    />
+  );
+};
+
+const getModelInfo = (record: ListItem) => {
+  const source = _.get(modelSourceMap, record.source, '');
+  if (record.source === modelSourceMap.huggingface_value) {
+    return {
+      source: `${source}/${record.huggingface_repo_id}`,
+      repo_id: record.huggingface_repo_id,
+      title: `${record.huggingface_repo_id}/${record.huggingface_filename}`,
+      filename: record.huggingface_filename || record.huggingface_repo_id
+    };
+  }
+  if (record.source === modelSourceMap.modelscope_value) {
+    return {
+      source: `${source}/${record.model_scope_model_id}`,
+      repo_id: record.model_scope_model_id,
+      title: `${record.model_scope_model_id}/${record.model_scope_file_path}`,
+      filename: record.model_scope_file_path || record.model_scope_model_id
+    };
+  }
+  if (record.source === modelSourceMap.ollama_library_value) {
+    return {
+      source: `${source}/${record.ollama_library_model_name}`,
+      repo_id: record.ollama_library_model_name,
+      title: record.ollama_library_model_name,
+      filename: record.ollama_library_model_name
+    };
+  }
+  return {
+    source: `${source}${record.local_path}`,
+    repo_id: record.local_path,
+    title: record.local_path,
+    filename: _.split(record.local_path, /[\\/]/).pop()
+  };
+};
+
+const RenderParts = (props: { record: ListItem }) => {
+  const { record } = props;
+  const intl = useIntl();
+  const parts = record.resolved_paths || [];
+  if (parts.length <= 1) {
+    return null;
+  }
+
+  const renderItem = () => {
+    return (
+      <ItemWrapper>
+        {parts.map((item: string, index: number) => {
+          return <li key={index}>{_.split(item, /[\\/]/).pop()}</li>;
+        })}
+      </ItemWrapper>
+    );
+  };
+
+  return (
+    <TooltipOverlayScroller title={renderItem()}>
+      <FilesTag color="purple" icon={<InfoCircleOutlined />}>
+        <span style={{ opacity: 1 }}>
+          {record.resolved_paths?.length}{' '}
+          {intl.formatMessage({ id: 'models.form.files' })}
+        </span>
+      </FilesTag>
+    </TooltipOverlayScroller>
+  );
+};
+
+const ResolvedPathColumn = (props: { record: ListItem }) => {
+  const { record } = props;
+  const intl = useIntl();
+  if (
+    !record.resolved_paths.length &&
+    record.state === ModelfileStateMap.Downloading
+  ) {
+    return (
+      <span>
+        {intl.formatMessage({
+          id: 'resources.modelfiles.storagePath.holder'
+        })}
+      </span>
+    );
+  }
+  return (
+    record.resolved_paths?.length > 0 && (
+      <PathWrapper>
+        <TextWrapper>
+          <AutoTooltip
+            ghost
+            showTitle
+            title={
+              <TooltipTitle path={record.resolved_paths?.[0]}></TooltipTitle>
+            }
+          >
+            <span>{getResolvedPath(record.resolved_paths)}</span>
+          </AutoTooltip>
+        </TextWrapper>
+        <RenderParts record={record}></RenderParts>
+      </PathWrapper>
+    )
+  );
+};
+
+const getWorkerName = (
+  id: number,
+  workersList: Global.BaseOption<number>[]
+) => {
+  const worker = workersList.find((item) => item.value === id);
+  return worker?.label || '';
+};
+
+const useFilesColumns = (props: {
+  handleSelect: (action: string, record: ListItem) => void;
+  workersList: Global.BaseOption<number>[];
+}): ColumnsType<ListItem> => {
+  const { workersList, handleSelect } = props;
+  const intl = useIntl();
+
+  return useMemo(() => {
+    return [
+      {
+        title: intl.formatMessage({ id: 'models.form.source' }),
+        dataIndex: 'source',
+        ellipsis: {
+          showTitle: false
+        },
+        render: (text: string, record: ListItem) => {
+          const modelInfo = getModelInfo(record);
+          const { repo_id, source } = modelInfo;
+          return (
+            <TextWrapper style={{ paddingRight: 8 }}>
+              <AutoTooltip ghost title={source}>
+                {source}
+              </AutoTooltip>
+            </TextWrapper>
+          );
+        }
+      },
+      {
+        title: 'Worker',
+        dataIndex: 'worker_name',
+        ellipsis: {
+          showTitle: false
+        },
+        render: (text: string, record: ListItem) => {
+          return (
+            <AutoTooltip ghost>
+              <span>{getWorkerName(record.worker_id, workersList)}</span>
+            </AutoTooltip>
+          );
+        }
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.status' }),
+        dataIndex: 'state',
+        width: 132,
+        render: (text: string, record: ListItem) => {
+          return <InstanceStatusTag data={record} />;
+        }
+      },
+      {
+        title: intl.formatMessage({ id: 'resources.modelfiles.form.path' }),
+        dataIndex: 'resolved_paths',
+        width: '30%',
+        ellipsis: {
+          showTitle: false
+        },
+        render: (text: string, record: ListItem) => (
+          <ResolvedPathColumn record={record} />
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'resources.modelfiles.size' }),
+        dataIndex: 'size',
+        width: 110,
+        align: 'right',
+        ellipsis: {
+          showTitle: false
+        },
+        render: (text: string, record: ListItem) => {
+          return (
+            <AutoTooltip ghost>
+              <span>{convertFileSize(record.size, 1, true)}</span>
+            </AutoTooltip>
+          );
+        }
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.createTime' }),
+        dataIndex: 'created_at',
+        sorter: false,
+        width: 180,
+        ellipsis: {
+          showTitle: false
+        },
+        render: (text: number) => (
+          <AutoTooltip ghost minWidth={20}>
+            {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
+          </AutoTooltip>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.operation' }),
+        dataIndex: 'operation',
+        width: 120,
+        render: (text: string, record: ListItem) => (
+          <DropdownButtons
+            items={setActionList(record)}
+            onSelect={(val) => handleSelect(val, record)}
+          ></DropdownButtons>
+        )
+      }
+    ];
+  }, [workersList, handleSelect]);
+};
+
+export default useFilesColumns;

src/pages/resources/hooks/use-gpu-columns.tsx

@@ -0,0 +1,138 @@
+import AutoTooltip from '@/components/auto-tooltip';
+import ProgressBar from '@/components/progress-bar';
+import InfoColumn from '@/components/simple-table/info-column';
+import { convertFileSize } from '@/utils';
+import { useIntl } from '@umijs/max';
+import { ColumnsType } from 'antd/lib/table';
+import _ from 'lodash';
+import { useMemo } from 'react';
+import { GPUDeviceItem } from '../config/types';
+
+const fieldList = [
+  {
+    label: 'resources.table.total',
+    key: 'total',
+    locale: true,
+    render: (val: any) => {
+      return convertFileSize(val, 0);
+    }
+  },
+  {
+    label: 'resources.table.used',
+    key: 'used',
+    locale: true,
+    render: (val: any) => {
+      return convertFileSize(val, 0);
+    }
+  },
+  {
+    label: 'resources.table.allocated',
+    key: 'allocated',
+    locale: true,
+    render: (val: any) => {
+      return convertFileSize(val, 0);
+    }
+  }
+];
+
+const useGPUColumns = (props: {
+  loadend: boolean;
+  firstLoad: boolean;
+  clusterList: Global.BaseOption<number>[];
+}): ColumnsType<GPUDeviceItem> => {
+  const { clusterList, loadend, firstLoad } = props;
+  const intl = useIntl();
+
+  return useMemo(() => {
+    return [
+      {
+        title: intl.formatMessage({ id: 'common.table.name' }),
+        dataIndex: 'name',
+        width: 240,
+        render: (text: string, record: GPUDeviceItem) => (
+          <AutoTooltip ghost maxWidth={240}>
+            {text}
+          </AutoTooltip>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'resources.table.index' }),
+        dataIndex: 'index',
+        render: (text: string, record: GPUDeviceItem) => <span>{text}</span>
+      },
+      {
+        title: intl.formatMessage({ id: 'clusters.title' }),
+        dataIndex: 'cluster_id',
+        render: (text: number, record: GPUDeviceItem) => (
+          <AutoTooltip ghost>
+            {clusterList.find((item) => item.value === text)?.label}
+          </AutoTooltip>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'resources.table.workername' }),
+        dataIndex: 'worker_name',
+        render: (text: string, record: GPUDeviceItem) => (
+          <AutoTooltip ghost>{text}</AutoTooltip>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'resources.table.vender' }),
+        dataIndex: 'vendor'
+      },
+      {
+        title: `${intl.formatMessage({ id: 'resources.table.temperature' })} (°C)`,
+        dataIndex: 'temperature',
+        render: (text: number, record: GPUDeviceItem) => (
+          <span>{text ? _.round(text, 1) : '-'}</span>
+        )
+      },
+      {
+        title: `${intl.formatMessage({ id: 'resources.table.utilization' })}`,
+        dataIndex: 'gpuUtil',
+        key: 'gpuUtil',
+        render: (text: number, record: GPUDeviceItem) => {
+          return (
+            <>
+              {record.core ? (
+                <ProgressBar
+                  percent={_.round(record.core?.utilization_rate, 2)}
+                ></ProgressBar>
+              ) : (
+                '-'
+              )}
+            </>
+          );
+        }
+      },
+      {
+        title: intl.formatMessage({ id: 'resources.table.vramutilization' }),
+        dataIndex: 'VRAM',
+        key: 'VRAM',
+        render: (text: number, record: GPUDeviceItem, index: number) => {
+          return (
+            <ProgressBar
+              defaultOpen={index === 0 && loadend && firstLoad}
+              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>
+          );
+        }
+      }
+    ];
+  }, [clusterList, loadend, firstLoad]);
+};
+
+export default useGPUColumns;

src/pages/resources/hooks/use-worker-columns.tsx

@@ -0,0 +1,318 @@
+import AutoTooltip from '@/components/auto-tooltip';
+import DropdownButtons from '@/components/drop-down-buttons';
+import IconFont from '@/components/icon-font';
+import ProgressBar from '@/components/progress-bar';
+import InfoColumn from '@/components/simple-table/info-column';
+import StatusTag from '@/components/status-tag';
+import { convertFileSize } from '@/utils';
+import {
+  CodeOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  InfoCircleOutlined
+} from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Tooltip } from 'antd';
+import { ColumnsType } from 'antd/lib/table';
+import _ from 'lodash';
+import { useMemo } from 'react';
+import styled from 'styled-components';
+import { WorkerStatusMapValue, status } from '../config';
+import { Filesystem, GPUDeviceItem, ListItem } from '../config/types';
+
+const LabelsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+`;
+
+const ActionList = [
+  { label: 'common.button.edit', key: 'edit', icon: <EditOutlined /> },
+  {
+    label: 'common.button.logs',
+    locale: false,
+    key: 'logs',
+    icon: <IconFont type="icon-logs" />
+  },
+  { label: 'Terminal', locale: false, key: 'terminal', icon: <CodeOutlined /> },
+  {
+    label: 'common.button.delete',
+    key: 'delete',
+    props: { danger: true },
+    icon: <DeleteOutlined />
+  }
+];
+
+const fieldList = [
+  {
+    label: 'resources.table.total',
+    key: 'total',
+    locale: true,
+    render: (val: any) => convertFileSize(val, 0)
+  },
+  {
+    label: 'resources.table.used',
+    key: 'used',
+    locale: true,
+    render: (val: any) => convertFileSize(val, 0)
+  },
+  {
+    label: 'resources.table.allocated',
+    key: 'allocated',
+    locale: true,
+    render: (val: any) => convertFileSize(val, 0)
+  }
+];
+
+const formateUtilization = (val1: number, val2: number): number =>
+  val1 && val2 ? _.round((val1 / val2) * 100, 0) : 0;
+
+const calcStorage = (files: Filesystem[]) => {
+  const mountRoot = _.find(
+    files,
+    (item: Filesystem) => item.mount_point === '/'
+  );
+  return mountRoot ? formateUtilization(mountRoot.used, mountRoot.total) : 0;
+};
+
+const LabelsCell = ({ labels }: { labels: Record<string, any> }) => (
+  <LabelsWrapper>
+    {_.map(labels, (value: string, key: string) => (
+      <AutoTooltip
+        key={key}
+        className="m-r-0"
+        maxWidth={155}
+        style={{ paddingInline: 8, borderRadius: 12 }}
+      >
+        <span>{key}</span>
+        <span>:{value}</span>
+      </AutoTooltip>
+    ))}
+  </LabelsWrapper>
+);
+
+const GPUCell = ({ devices }: { devices: GPUDeviceItem[] }) => (
+  <span className="flex-column flex-gap-2">
+    {_.map(
+      _.sortBy(devices || [], ['index']),
+      (item: GPUDeviceItem, index: number) => (
+        <span className="flex-center" key={index}>
+          <span className="m-r-5" style={{ display: 'flex', width: 25 }}>
+            [{item.index}]
+          </span>
+          {item.core ? (
+            <ProgressBar percent={_.round(item.core?.utilization_rate, 0)} />
+          ) : (
+            '-'
+          )}
+        </span>
+      )
+    )}
+  </span>
+);
+
+const VRAMCell = ({
+  devices,
+  intl,
+  rIndex,
+  dataSource,
+  extraStatus
+}: {
+  devices: GPUDeviceItem[];
+  intl: any;
+  rIndex: number;
+  dataSource: any;
+  extraStatus: any;
+}) => (
+  <span className="flex-column flex-gap-2">
+    {_.map(
+      _.sortBy(devices || [], ['index']),
+      (item: GPUDeviceItem, index: number) => (
+        <span key={index} className="flex-center">
+          <span className="m-r-5" style={{ display: 'flex', width: 25 }}>
+            [{item.index}]
+          </span>
+          <ProgressBar
+            defaultOpen={
+              rIndex === 0 &&
+              index === 0 &&
+              dataSource.loadend &&
+              extraStatus.firstLoad
+            }
+            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} />}
+          />
+          {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>
+);
+
+const StorageCell = ({ files }: { files: Filesystem[] }) => {
+  const mountRoot = _.find(
+    files,
+    (item: Filesystem) => item.mount_point === '/'
+  );
+  return (
+    <ProgressBar
+      percent={calcStorage(files)}
+      label={
+        mountRoot ? (
+          <InfoColumn
+            fieldList={fieldList.filter((f) => f.key !== 'allocated')}
+            data={mountRoot}
+          />
+        ) : (
+          0
+        )
+      }
+    />
+  );
+};
+
+const useWorkerColumns = ({
+  clusterData,
+  dataSource,
+  extraStatus,
+  handleSelect
+}: {
+  clusterData: {
+    list: Global.BaseOption<number>[];
+    data: Record<number, string>;
+  };
+  dataSource: any;
+  extraStatus: any;
+  handleSelect: (action: string, record: ListItem) => void;
+}): ColumnsType<ListItem> => {
+  const intl = useIntl();
+
+  return useMemo<ColumnsType<ListItem>>(
+    () => [
+      {
+        title: intl.formatMessage({ id: 'common.table.name' }),
+        dataIndex: 'name',
+        width: 100,
+        render: (text: string) => (
+          <AutoTooltip ghost maxWidth={240}>
+            {text}
+          </AutoTooltip>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'resources.table.labels' }),
+        dataIndex: 'labels',
+        width: 200,
+        render: (_, record) => <LabelsCell labels={record.labels} />
+      },
+      {
+        title: intl.formatMessage({ id: 'clusters.title' }),
+        dataIndex: 'cluster_id',
+        render: (id: number) => (
+          <AutoTooltip ghost maxWidth={240}>
+            {_.get(clusterData.data, id, '')}
+          </AutoTooltip>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.status' }),
+        dataIndex: 'state',
+        render: (_, record) => (
+          <StatusTag
+            maxTooltipWidth={400}
+            statusValue={{
+              status: status[record.state] as any,
+              text: WorkerStatusMapValue[record.state],
+              message: record.state_message
+            }}
+          />
+        )
+      },
+      {
+        title: 'IP',
+        dataIndex: 'ip',
+        render: (text: string) => (
+          <AutoTooltip ghost maxWidth={240}>
+            {text}
+          </AutoTooltip>
+        )
+      },
+      {
+        title: 'CPU',
+        dataIndex: 'cpu',
+        render: (text: string, record) => (
+          <ProgressBar
+            percent={_.round(record?.status?.cpu?.utilization_rate, 0)}
+          />
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'resources.table.memory' }),
+        dataIndex: 'memory',
+        render: (_, record) => (
+          <ProgressBar
+            percent={formateUtilization(
+              record?.status?.memory?.used,
+              record?.status?.memory?.total
+            )}
+            label={
+              <InfoColumn fieldList={fieldList} data={record.status.memory} />
+            }
+          />
+        )
+      },
+      {
+        title: 'GPU',
+        dataIndex: 'gpu',
+        render: (_, record) => <GPUCell devices={record?.status?.gpu_devices} />
+      },
+      {
+        title: intl.formatMessage({ id: 'resources.table.vram' }),
+        dataIndex: 'vram',
+        render: (_, record, rIndex) => (
+          <VRAMCell
+            devices={record?.status?.gpu_devices}
+            intl={intl}
+            rIndex={rIndex}
+            dataSource={dataSource}
+            extraStatus={extraStatus}
+          />
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'resources.table.disk' }),
+        dataIndex: 'storage',
+        render: (_, record) => <StorageCell files={record.status?.filesystem} />
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.operation' }),
+        key: 'operation',
+        render: (_, record) => (
+          <DropdownButtons
+            items={ActionList}
+            onSelect={(val) => handleSelect(val, record)}
+          />
+        )
+      }
+    ],
+    [intl, clusterData, dataSource, extraStatus, handleSelect]
+  );
+};
+
+export default useWorkerColumns;