feat(gpu-service): add status column to storage and storage-type lists

src/pages/gpu-service/storage-types/config/index.ts

@@ -1,6 +1,23 @@
+import { StatusMaps } from '@/config';
+import { StatusType } from '@/config/types';
 import { icons } from '@gpustack/core-ui';
 import { StorageTypeKind } from './types';
 
+export const StorageTypePhaseValueMap = {
+  Ready: 'Ready',
+  Deleting: 'Deleting'
+};
+
+export const StorageTypePhaseLabelMap: Record<string, string> = {
+  [StorageTypePhaseValueMap.Ready]: 'Ready',
+  [StorageTypePhaseValueMap.Deleting]: 'Deleting'
+};
+
+export const status: Record<string, StatusType> = {
+  [StorageTypePhaseValueMap.Ready]: StatusMaps.success,
+  [StorageTypePhaseValueMap.Deleting]: StatusMaps.warning
+};
+
 export const StorageTypeKindValueMap: Record<string, StorageTypeKind> = {
   NFS: 'nfs',
   S3: 's3'

src/pages/gpu-service/storage-types/config/types.ts

@@ -44,4 +44,8 @@ export interface ListItem {
     nfs?: StorageTypeNFS | null;
     s3?: Omit<StorageTypeS3, 'secretKey'> | null;
   };
+  status?: {
+    phase?: string | null;
+    phaseMessage?: string | null;
+  } | null;
 }

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

@@ -5,13 +5,19 @@ import {
   AutoTooltip,
   DropdownButtons,
   IconFont,
+  StatusTag,
   ThemeTag
 } 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, StorageTypeKindLabelMap } from '../config';
+import {
+  rowActionList,
+  status,
+  StorageTypeKindLabelMap,
+  StorageTypePhaseLabelMap
+} from '../config';
 import { ListItem } from '../config/types';
 
 interface ColumnsHookProps {
@@ -81,6 +87,24 @@ const useStorageTypeColumns = ({
         sorter: false,
         render: (_text, record) => getKindLabel(record)
       },
+      {
+        title: intl.formatMessage({ id: 'common.table.status' }),
+        dataIndex: ['status', 'phase'],
+        key: 'status',
+        sorter: false,
+        render: (value: string, record: ListItem) =>
+          value ? (
+            <StatusTag
+              statusValue={{
+                status: status[value],
+                text: StorageTypePhaseLabelMap[value] || value,
+                message: record?.status?.phaseMessage || ''
+              }}
+            ></StatusTag>
+          ) : (
+            '-'
+          )
+      },
       ...creatorCols,
       // {
       //   title: intl.formatMessage({ id: 'common.table.description' }),

src/pages/gpu-service/storage/config/index.ts

@@ -3,21 +3,18 @@ import { StatusType } from '@/config/types';
 import { icons } from '@gpustack/core-ui';
 
 export const StoragePhaseValueMap = {
-  Available: 'Available',
+  Ready: 'Ready',
-  Unavailable: 'Unavailable',
+  Deleting: 'Deleting'
-  Pending: 'Pending'
 };
 
 export const StoragePhaseLabelMap: Record<string, string> = {
-  [StoragePhaseValueMap.Available]: 'Available',
+  [StoragePhaseValueMap.Ready]: 'Ready',
-  [StoragePhaseValueMap.Unavailable]: 'Unavailable',
+  [StoragePhaseValueMap.Deleting]: 'Deleting'
-  [StoragePhaseValueMap.Pending]: 'Pending'
 };
 
 export const status: Record<string, StatusType> = {
-  [StoragePhaseValueMap.Available]: StatusMaps.success,
+  [StoragePhaseValueMap.Ready]: StatusMaps.success,
-  [StoragePhaseValueMap.Unavailable]: StatusMaps.error,
+  [StoragePhaseValueMap.Deleting]: StatusMaps.warning
-  [StoragePhaseValueMap.Pending]: StatusMaps.transitioning
 };
 
 export const rowActionList = [

src/pages/gpu-service/storage/config/types.ts

@@ -33,6 +33,7 @@ export interface ListItem {
   };
   status?: {
     phase?: string | null;
+    phaseMessage?: string | null;
   } | null;
 }
 

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

@@ -1,11 +1,11 @@
 import useCreatorColumn from '@/pages/gpu-service/hooks/use-creator-column';
 import { usePluginListColumns } from '@/plugins/list-extra-columns';
-import { AutoTooltip, DropdownButtons } from '@gpustack/core-ui';
+import { AutoTooltip, DropdownButtons, StatusTag } 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 } from '../config';
+import { rowActionList, status, StoragePhaseLabelMap } from '../config';
 import { ListItem } from '../config/types';
 
 interface ColumnsHookProps {
@@ -70,24 +70,25 @@ 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, record: ListItem) =>
+          value ? (
+            <StatusTag
+              statusValue={{
+                status: status[value],
+                text: StoragePhaseLabelMap[value] || value,
+                message: record?.status?.phaseMessage || ''
+              }}
+            ></StatusTag>
+          ) : (
+            '-'
+          )
+      },
       ...creatorCols,
-      // {
-      //   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',