fix: ux issues

src/pages/gpu-service/storage/hooks/use-storage-columns.tsx

@@ -1,18 +1,20 @@
-import { AutoTooltip, DropdownButtons, StatusTag } from '@gpustack/core-ui';
+import { AutoTooltip, DropdownButtons } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import type { ColumnsType } from 'antd/lib/table';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
-import { rowActionList, status, StoragePhaseLabelMap } from '../config';
+import { rowActionList } from '../config';
 import { ListItem } from '../config/types';
 
 interface ColumnsHookProps {
   handleSelect: (val: string, record: ListItem) => void;
+  storageClassList: Global.BaseOption<string>[];
   sortOrder: string[];
 }
 
 const useStorageColumns = ({
   handleSelect,
+  storageClassList,
   sortOrder
 }: ColumnsHookProps): ColumnsType<ListItem> => {
   const intl = useIntl();
@@ -37,7 +39,14 @@ const useStorageColumns = ({
         dataIndex: ['spec', 'type'],
         key: 'type',
         sorter: false,
-        render: (value: string) => value || '-'
+        render: (value: string) => {
+          return (
+            <AutoTooltip ghost>
+              {storageClassList.find((item) => item.value === value)?.label ||
+                '-'}
+            </AutoTooltip>
+          );
+        }
       },
       {
         title: intl.formatMessage({ id: 'gpuservice.storage.capacity' }),
@@ -46,23 +55,23 @@ const useStorageColumns = ({
         sorter: false,
         render: (value: string) => (value ? value.replace(/Gi$/, 'GB') : '-')
       },
-      {
-        title: intl.formatMessage({ id: 'common.table.status' }),
-        dataIndex: ['status', 'phase'],
-        key: 'status',
-        sorter: false,
-        render: (value: string) =>
-          value ? (
-            <StatusTag
-              statusValue={{
-                status: status[value],
-                text: StoragePhaseLabelMap[value] || value
-              }}
-            ></StatusTag>
-          ) : (
-            '-'
-          )
-      },
+      // {
+      //   title: intl.formatMessage({ id: 'common.table.status' }),
+      //   dataIndex: ['status', 'phase'],
+      //   key: 'status',
+      //   sorter: false,
+      //   render: (value: string) =>
+      //     value ? (
+      //       <StatusTag
+      //         statusValue={{
+      //           status: status[value],
+      //           text: StoragePhaseLabelMap[value] || value
+      //         }}
+      //       ></StatusTag>
+      //     ) : (
+      //       '-'
+      //     )
+      // },
       {
         title: intl.formatMessage({ id: 'common.table.createTime' }),
         dataIndex: 'created_at',
@@ -89,7 +98,7 @@ const useStorageColumns = ({
         )
       }
     ];
-  }, [handleSelect, sortOrder, intl]);
+  }, [handleSelect, sortOrder, storageClassList, intl]);
 };
 
 export default useStorageColumns;