refactor: resource table columns

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/config/use-cluster-columns.tsx

@@ -1,89 +0,0 @@
-// columns.ts
-import AutoTooltip from '@/components/auto-tooltip';
-import DropdownButtons from '@/components/drop-down-buttons';
-import StatusTag from '@/components/status-tag';
-import { ColumnsType } from 'antd/es/table';
-import dayjs from 'dayjs';
-import { useMemo } from 'react';
-import {
-  ClusterStatus,
-  ClusterStatusLabelMap,
-  ProviderLabelMap,
-  clusterActionList
-} from '.';
-import { ClusterListItem } from './types';
-
-const useClusterColumns = (
-  handleSelect: (val: string, record: ClusterListItem) => void
-): ColumnsType<ClusterListItem> => {
-  const setActionsItems = (row: ClusterListItem) => {
-    return clusterActionList.filter((item) => {
-      if (item.provider) {
-        return item.provider === row.provider;
-      }
-      return true;
-    });
-  };
-
-  return useMemo(() => {
-    return [
-      {
-        title: 'Name',
-        dataIndex: 'name',
-        render: (text: string) => <AutoTooltip ghost>{text}</AutoTooltip>
-      },
-      {
-        title: 'Provider',
-        dataIndex: 'provider',
-        render: (value: string) => <span>{ProviderLabelMap[value]}</span>
-      },
-      {
-        title: 'Status',
-        dataIndex: 'state',
-        render: (value: number) => (
-          <StatusTag
-            statusValue={{
-              status: ClusterStatus[value],
-              text: ClusterStatusLabelMap[value]
-            }}
-          />
-        )
-      },
-      {
-        title: 'Workers',
-        dataIndex: 'workers',
-        render: (value: number) => <span>{value}</span>
-      },
-      {
-        title: 'GPUs',
-        dataIndex: 'gpus',
-        render: (value: number) => <span>{value}</span>
-      },
-      {
-        title: 'Deployments',
-        dataIndex: 'models',
-        render: (value: number) => <span>{value}</span>
-      },
-      {
-        title: 'Created',
-        dataIndex: 'created_at',
-        width: 180,
-        render: (value: string) => (
-          <span>{dayjs(value).format('YYYY-MM-DD HH:mm:ss')}</span>
-        )
-      },
-      {
-        title: 'Operations',
-        dataIndex: 'operations',
-        render: (value: string, record: ClusterListItem) => (
-          <DropdownButtons
-            items={setActionsItems(record)}
-            onSelect={(val) => handleSelect(val, record)}
-          ></DropdownButtons>
-        )
-      }
-    ];
-  }, [handleSelect]);
-};
-
-export default useClusterColumns;