From 8ba52cd0ea7c0ed0f92a09cccd6c1756dcebccab Mon Sep 17 00:00:00 2001
From: jo-hnny <wuzhiqiang94@hotmail.com>
Date: Fri, 23 Apr 2021 18:18:28 +0800
Subject: [PATCH] fix(console): fix  some attribute  not have , let ui error
 (#1222)

---
 web/console/helpers/format.ts                  |  2 +-
 .../nodeManage/ComputerActionPanel.tsx         |  8 ++++----
 .../resource/nodeManage/ComputerTablePanel.tsx | 18 +++++++++---------
 .../resourceDetail/ResourceNodeDetailPanel.tsx | 15 ++++++---------
 4 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/web/console/helpers/format.ts b/web/console/helpers/format.ts
index d5ea16a80..547ebe74f 100644
--- a/web/console/helpers/format.ts
+++ b/web/console/helpers/format.ts
@@ -15,7 +15,7 @@ export const formatMemory = (
   memory: string,
   finalUnit: 'K' | 'M' | 'G' | 'T' | 'P' | 'E' | 'Ki' | 'Mi' | 'Gi' | 'Ti' | 'Pi' | 'Ei'
 ) => {
-  const unit = memory.toUpperCase().match(/[KMGTPEI]+/)[0] ?? 'MI';
+  const unit = memory.toUpperCase().match(/[KMGTPEI]+/)?.[0] ?? 'MI';
 
   const memoryNum = parseInt(memory);
 
diff --git a/web/console/src/modules/cluster/components/resource/nodeManage/ComputerActionPanel.tsx b/web/console/src/modules/cluster/components/resource/nodeManage/ComputerActionPanel.tsx
index 65fac4878..1a58ae735 100644
--- a/web/console/src/modules/cluster/components/resource/nodeManage/ComputerActionPanel.tsx
+++ b/web/console/src/modules/cluster/components/resource/nodeManage/ComputerActionPanel.tsx
@@ -56,7 +56,7 @@ export class ComputerActionPanel extends React.Component<RootProps, State> {
         item.metadata.name,
         item.status.phase,
         item.metadata.role,
-        `cpu: ${item.status.capacity.cpu ?? '-'} 核; 内存: ${item.status.capacity.memory ?? '-'}`,
+        `cpu: ${item?.status?.capacity?.cpu ?? '-'} 核; 内存: ${item?.status?.capacity?.memory ?? '-'}`,
         this._reduceIp(item),
         item.spec.podCIDR,
         dateFormatter(new Date(item.metadata.creationTimestamp), 'YYYY-MM-DD HH:mm:ss')
@@ -68,10 +68,10 @@ export class ComputerActionPanel extends React.Component<RootProps, State> {
   }
 
   _reduceCapacity(node: Computer) {
-    const capacity = node.status.capacity;
+    const capacity = node?.status?.capacity;
     const capacityInfo = {
-      cpu: capacity.cpu,
-      memory: capacity.memory
+      cpu: capacity?.cpu,
+      memory: capacity?.memory
     };
     const finalCpu = ReduceRequest('cpu', capacityInfo),
       finalmem = (ReduceRequest('memory', capacity) / 1024).toFixed(2);
diff --git a/web/console/src/modules/cluster/components/resource/nodeManage/ComputerTablePanel.tsx b/web/console/src/modules/cluster/components/resource/nodeManage/ComputerTablePanel.tsx
index a2f43f917..de1b2933b 100644
--- a/web/console/src/modules/cluster/components/resource/nodeManage/ComputerTablePanel.tsx
+++ b/web/console/src/modules/cluster/components/resource/nodeManage/ComputerTablePanel.tsx
@@ -128,10 +128,10 @@ export class ComputerTablePanel extends React.Component<RootProps, State> {
         width: '8%',
         render: x => (
           <React.Fragment>
-            <Text theme={ComputerStatus[x.status.phase]} verticalAlign="middle" parent={'p'}>
-              {x.status.phase || '-'}
+            <Text theme={ComputerStatus[x?.status?.phase]} verticalAlign="middle" parent={'p'}>
+              {x?.status?.phase || '-'}
             </Text>
-            {x.status.phase === 'Initializing' && (
+            {x?.status?.phase === 'Initializing' && (
               <Button
                 type="link"
                 onClick={() => {
@@ -250,8 +250,8 @@ export class ComputerTablePanel extends React.Component<RootProps, State> {
         width: '8%',
         render: x => (
           <React.Fragment>
-            <Text theme={ComputerStatus[x.status.phase]} verticalAlign="middle" parent={'p'}>
-              {x.status.phase || '-'}
+            <Text theme={ComputerStatus[x?.status?.phase]} verticalAlign="middle" parent={'p'}>
+              {x?.status?.phase ?? '-'}
             </Text>
             <div className="sl-editor-name">
               {x.spec.unschedulable && (
@@ -280,9 +280,9 @@ export class ComputerTablePanel extends React.Component<RootProps, State> {
 
           return (
             <React.Fragment>
-              <Text verticalAlign="middle">cpu: {capacity.cpu ?? '-'} 核</Text>
+              <Text verticalAlign="middle">cpu: {capacity?.cpu ?? '-'} 核</Text>
               <br />
-              <Text verticalAlign="middle">内存: {formatMemory(capacity.memory ?? '0', 'Gi')}</Text>
+              <Text verticalAlign="middle">内存: {formatMemory(capacity?.memory ?? '0', 'Gi')}</Text>
             </React.Fragment>
           );
         }
@@ -292,7 +292,7 @@ export class ComputerTablePanel extends React.Component<RootProps, State> {
         header: t('IP地址'),
         width: '15%',
         render: x => {
-          const finalIPInfo = x.status.addresses.filter(item => item.type !== 'Hostname');
+          const finalIPInfo = x?.status?.addresses?.filter(item => item.type !== 'Hostname') ?? [];
 
           return (
             <React.Fragment>
@@ -464,7 +464,7 @@ export class ComputerTablePanel extends React.Component<RootProps, State> {
    * @param mode:unSchedule|turn on scheduling    判断是否可进行操作
    */
   private getCanUnSchedule(computer: Computer, mode: 'unSchedule' | 'turnOnScheduling' = 'turnOnScheduling') {
-    const computerStatus = computer.status.phase === 'Running';
+    const computerStatus = computer?.status?.phase === 'Running';
 
     if (mode === 'unSchedule') {
       return computerStatus && (computer.spec.unschedulable == null || computer.spec.unschedulable === false);
diff --git a/web/console/src/modules/cluster/components/resource/resourceDetail/ResourceNodeDetailPanel.tsx b/web/console/src/modules/cluster/components/resource/resourceDetail/ResourceNodeDetailPanel.tsx
index 18b769598..44020ae17 100644
--- a/web/console/src/modules/cluster/components/resource/resourceDetail/ResourceNodeDetailPanel.tsx
+++ b/web/console/src/modules/cluster/components/resource/resourceDetail/ResourceNodeDetailPanel.tsx
@@ -55,7 +55,7 @@ export class ResourceNodeDetailPanel extends React.Component<RootProps, {}> {
 
                 {this._renderNodeStatus(resourceIns.status.conditions)}
 
-                {this._renderComputerConfig(resourceIns.status.capacity)}
+                {this._renderComputerConfig(resourceIns?.status?.capacity)}
 
                 {this._renderIPAddress(resourceIns.status.addresses)}
 
@@ -232,23 +232,20 @@ export class ResourceNodeDetailPanel extends React.Component<RootProps, {}> {
   /** 展示机器的配置 */
   private _renderComputerConfig(capacityConfig: any) {
     const capacity = {
-      cpu: capacityConfig.cpu,
-      memory: capacityConfig.memory
+      cpu: capacityConfig?.cpu,
+      memory: capacityConfig?.memory
     };
 
-    const finalCpu = ReduceRequest('cpu', capacity),
-      finalMem = (ReduceRequest('memory', capacity) / 1024).toFixed(2);
-
     return (
       <ListItem label={t('配置')}>
         <Text verticalAlign="middle" theme="label">{`CPU: `}</Text>
-        <Text verticalAlign="middle">{capacityConfig.cpu ?? '-'} 核</Text>
+        <Text verticalAlign="middle">{capacityConfig?.cpu ?? '-'} 核</Text>
         <Text verticalAlign="middle" theme="label">
           {t('内存: ')}
         </Text>
-        <Text verticalAlign="middle">{formatMemory(capacity.memory ?? '0', 'Gi')}</Text>
+        <Text verticalAlign="middle">{formatMemory(capacity?.memory ?? '0', 'Gi')}</Text>
         <Text verticalAlign="middle" theme="label">{`Pods: `}</Text>
-        <Text verticalAlign="middle">{capacityConfig.pods || 0}</Text>
+        <Text verticalAlign="middle">{capacityConfig?.pods || 0}</Text>
       </ListItem>
     );
   }