chore: worker resource info adjust

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

@@ -42,7 +42,7 @@ export default [
     value: ProviderValueMap.AliCloud,
     key: ProviderValueMap.AliCloud,
     icon: icons.AliCloud,
-    description: 'Comming soon',
+    description: 'Coming soon',
     group: 'clusters.create.provider.cloud'
   },
   {
@@ -52,7 +52,7 @@ export default [
     value: ProviderValueMap.TencentCloud,
     key: ProviderValueMap.TencentCloud,
     icon: icons.TencentCloud,
-    description: 'Comming soon',
+    description: 'Coming soon',
     group: 'clusters.create.provider.cloud'
   }
 ];

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

@@ -17,7 +17,7 @@ import { Tooltip } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import _ from 'lodash';
 import { useMemo } from 'react';
-import { WorkerStatusMapValue, status } from '../config';
+import { status, WorkerStatusMap, WorkerStatusMapValue } from '../config';
 import { Filesystem, GPUDeviceItem, ListItem } from '../config/types';
 
 const ActionList = [
@@ -179,6 +179,18 @@ const StorageCell = ({ files }: { files: Filesystem[] }) => {
   );
 };
 
+const statusAvailable = (record: ListItem) => {
+  return (
+    WorkerStatusMap.provisioned !== record.state &&
+    WorkerStatusMap.provisioning !== record.state &&
+    record.status
+  );
+};
+
+const HolderStatus = () => {
+  return <span>N/A</span>;
+};
+
 const useWorkerColumns = ({
   clusterData,
   loadend,
@@ -249,49 +261,68 @@ const useWorkerColumns = ({
       {
         title: 'CPU',
         dataIndex: 'cpu',
-        render: (text: string, record) => (
+        render: (text: string, record) =>
-          <ProgressBar
+          statusAvailable(record) ? (
-            percent={_.round(record?.status?.cpu?.utilization_rate, 0)}
+            <ProgressBar
-          />
+              percent={_.round(record?.status?.cpu?.utilization_rate, 0)}
-        )
+            />
+          ) : (
+            <HolderStatus />
+          )
       },
       {
         title: intl.formatMessage({ id: 'resources.table.memory' }),
         dataIndex: 'memory',
-        render: (_, record) => (
+        render: (_, record) =>
-          <ProgressBar
+          statusAvailable(record) ? (
-            percent={formateUtilization(
+            <ProgressBar
-              record?.status?.memory?.used,
+              percent={formateUtilization(
-              record?.status?.memory?.total
+                record?.status?.memory?.used,
-            )}
+                record?.status?.memory?.total
-            label={
+              )}
-              <InfoColumn fieldList={fieldList} data={record.status.memory} />
+              label={
-            }
+                <InfoColumn fieldList={fieldList} data={record.status.memory} />
-          />
+              }
-        )
+            />
+          ) : (
+            <HolderStatus />
+          )
       },
       {
         title: 'GPU',
         dataIndex: 'gpu',
-        render: (_, record) => <GPUCell devices={record?.status?.gpu_devices} />
+        render: (_, record) =>
+          statusAvailable(record) ? (
+            <GPUCell devices={record?.status?.gpu_devices} />
+          ) : (
+            <HolderStatus />
+          )
       },
       {
         title: intl.formatMessage({ id: 'resources.table.vram' }),
         dataIndex: 'vram',
-        render: (_, record, rIndex) => (
+        render: (_, record, rIndex) =>
-          <VRAMCell
+          statusAvailable(record) ? (
-            devices={record?.status?.gpu_devices}
+            <VRAMCell
-            intl={intl}
+              devices={record?.status?.gpu_devices}
-            rIndex={rIndex}
+              intl={intl}
-            loadend={loadend}
+              rIndex={rIndex}
-            firstLoad={firstLoad}
+              loadend={loadend}
-          />
+              firstLoad={firstLoad}
-        )
+            />
+          ) : (
+            <HolderStatus />
+          )
       },
       {
         title: intl.formatMessage({ id: 'resources.table.disk' }),
         dataIndex: 'storage',
-        render: (_, record) => <StorageCell files={record.status?.filesystem} />
+        render: (_, record) =>
+          statusAvailable(record) ? (
+            <StorageCell files={record.status?.filesystem} />
+          ) : (
+            <HolderStatus />
+          )
       },
       {
         title: intl.formatMessage({ id: 'common.table.operation' }),