refactor: resource table columns

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