frontend: fix nullable node status

frontend/src/components/cluster/Charts.tsx

@@ -19,7 +19,7 @@ export function MemoryCircularChart(props: ResourceCircularChartProps) {
   }
 
   function memoryAvailableGetter(item: Node | Pod) {
-    return parseRam(item.status!.capacity.memory) / TO_GB;
+    return parseRam(item.status?.capacity?.memory) / TO_GB;
   }
 
   function getLegend(used: number, available: number) {
@@ -55,7 +55,7 @@ export function CpuCircularChart(props: ResourceCircularChartProps) {
   }
 
   function cpuAvailableGetter(item: Node | Pod) {
-    return parseCpu(item.status!.capacity.cpu) / TO_ONE_CPU;
+    return parseCpu(item.status?.capacity?.cpu) / TO_ONE_CPU;
   }
 
   function getLegend(used: number, available: number) {

frontend/src/components/cluster/__snapshots__/Overview.Events.stories.storyshot

@@ -371,7 +371,7 @@
                           <p
                             class="MuiTypography-root MuiTypography-body1 MuiTypography-gutterBottom css-7142su-MuiTypography-root"
                           >
-                            0 / 1 Ready
+                            0 / 2 Ready
                           </p>
                         </div>
                         <div

frontend/src/components/node/Details.tsx

@@ -55,12 +55,14 @@ export default function NodeDetails(props: { name?: string }) {
   }, [nodeFromAPI]);
 
   function getAddresses(item: Node) {
-    return item.status.addresses.map(({ type, address }) => {
-      return {
-        name: type,
-        value: address,
-      };
-    });
+    return (
+      item.status.addresses?.map(({ type, address }) => {
+        return {
+          name: type,
+          value: address,
+        };
+      }) || []
+    );
   }
 
   function handleNodeScheduleState(node: Node, cordon: boolean) {
@@ -283,7 +285,7 @@ function ChartsSection(props: ChartsSectionProps) {
       return '…';
     }
 
-    const readyInfo = node.status.conditions.find(({ type }) => type === 'Ready');
+    const readyInfo = node.status.conditions?.find(({ type }) => type === 'Ready');
     if (readyInfo) {
       return timeAgo(readyInfo.lastTransitionTime as string);
     }
@@ -352,7 +354,7 @@ function SystemInfoSection(props: SystemInfoSectionProps) {
     );
   }
 
-  if (!node) {
+  if (!node || !node.status.nodeInfo) {
     return null;
   }
 
@@ -412,7 +414,7 @@ interface NodeReadyLabelProps {
 
 export function NodeReadyLabel(props: NodeReadyLabelProps) {
   const { node } = props;
-  const isReady = !!node.status.conditions.find(
+  const isReady = !!node.status.conditions?.find(
     condition => condition.type === 'Ready' && condition.status === 'True'
   );
   const { t } = useTranslation();

frontend/src/components/node/List.stories.tsx

@@ -1,7 +1,9 @@
 import Container from '@mui/material/Container';
 import { Meta, StoryFn } from '@storybook/react';
+import { http, HttpResponse } from 'msw';
 import { TestContext } from '../../test';
 import List from './List';
+import { NODE_DUMMY_DATA } from './storyHelper';
 
 export default {
   title: 'node/List',
@@ -16,6 +18,22 @@ export default {
       );
     },
   ],
+  parameters: {
+    msw: {
+      handlers: {
+        story: [
+          http.get('http://localhost:4466/api/v1/nodes', () =>
+            HttpResponse.json({
+              kind: 'NodeList',
+              apiVersion: 'v1',
+              metadata: {},
+              items: NODE_DUMMY_DATA,
+            })
+          ),
+        ],
+      },
+    },
+  },
 } as Meta;
 
 const Template: StoryFn = () => {

frontend/src/components/node/List.tsx

@@ -60,7 +60,7 @@ export default function NodeList() {
           label: t('translation|Ready'),
           gridTemplate: 'minmax(150px, .3fr)',
           getValue: node => {
-            const isReady = !!node.status.conditions.find(
+            const isReady = !!node.status.conditions?.find(
               condition => condition.type === 'Ready' && condition.status === 'True'
             );
             return isReady ? t('translation|Yes') : t('translation|No');
@@ -99,14 +99,17 @@ export default function NodeList() {
           id: 'version',
           label: t('translation|Version'),
           gridTemplate: 'minmax(150px, .5fr)',
-          getValue: node => node.status.nodeInfo.kubeletVersion,
+          getValue: node => node.status.nodeInfo?.kubeletVersion,
         },
         {
           id: 'software',
           label: t('translation|Software'),
           gridTemplate: 'minmax(200px, 1.5fr)',
-          getValue: node => node.status.nodeInfo.operatingSystem,
+          getValue: node => node.status.nodeInfo?.operatingSystem,
           render: node => {
+            if (node.status.nodeInfo === undefined) {
+              return <></>;
+            }
             let osIcon = 'mdi:desktop-classic';
             if (node.status.nodeInfo.operatingSystem === 'linux') {
               osIcon = 'mdi:linux';

frontend/src/components/node/__snapshots__/List.Nodes.stories.storyshot

@@ -1096,6 +1096,114 @@
                       </button>
                     </td>
                   </tr>
+                  <tr
+                    class="MuiTableRow-root css-n8542r-MuiTableRow-root"
+                    data-index="1"
+                  >
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1my6grb-MuiTableCell-root"
+                      data-index="0"
+                    >
+                      <a
+                        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
+                        href="/"
+                      >
+                        node-2
+                      </a>
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1omirxm-MuiTableCell-root"
+                      data-index="1"
+                    >
+                      <div
+                        class="recharts-responsive-container css-a9n7s9"
+                        style="width: 95%; height: 20px; min-width: 0;"
+                      />
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-157islm-MuiTableCell-root"
+                      data-index="2"
+                    >
+                      <div
+                        class="recharts-responsive-container css-a9n7s9"
+                        style="width: 95%; height: 20px; min-width: 0;"
+                      />
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-l8pc90-MuiTableCell-root"
+                      data-index="3"
+                    >
+                      <span
+                        class="MuiTypography-root MuiTypography-body1 css-1q14vbw-MuiTypography-root"
+                        style="background-color: rgb(255, 235, 238); color: rgb(198, 40, 40);"
+                      >
+                        No
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-3v4n1h-MuiTableCell-root"
+                      data-index="4"
+                    >
+                      <div
+                        class="MuiBox-root css-am63uh"
+                      />
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-165tvm3-MuiTableCell-root"
+                      data-index="5"
+                    />
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-4hrpnu-MuiTableCell-root"
+                      data-index="6"
+                    />
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-g49sdf-MuiTableCell-root"
+                      data-index="7"
+                    />
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-nzc431-MuiTableCell-root"
+                      data-index="8"
+                    />
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-1k7434z-MuiTableCell-root"
+                      data-index="9"
+                    >
+                      <p
+                        aria-label="2022-01-01T00:00:00.000Z"
+                        class="MuiTypography-root MuiTypography-body1 css-1d0cpfm-MuiTypography-root"
+                        data-mui-internal-clone-element="true"
+                      >
+                        3mo
+                      </p>
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-e3iv5e-MuiTableCell-root"
+                      data-index="10"
+                    >
+                      <button
+                        aria-label="Row Actions"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1cxdeyj-MuiButtonBase-root-MuiIconButton-root"
+                        data-mui-internal-clone-element="true"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                          data-testid="MoreHorizIcon"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
+                          />
+                        </svg>
+                        <span
+                          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                        />
+                      </button>
+                    </td>
+                  </tr>
                 </tbody>
                 <tfoot
                   class="MuiTableFooter-root css-4ar9ic-MuiTableFooter-root"
@@ -1160,7 +1268,7 @@
                     <span
                       class="MuiTypography-root MuiTypography-body2 MuiTypography-alignCenter css-htm6yz-MuiTypography-root"
                     >
-                      1-1 of 1
+                      1-2 of 2
                     </span>
                     <div
                       class="MuiBox-root css-192dx0w"

frontend/src/components/node/storyHelper.ts

@@ -53,4 +53,23 @@ export const NODE_DUMMY_DATA: KubeNode[] = [
       },
     },
   },
+  {
+    kind: 'Node',
+    apiVersion: 'v1',
+    metadata: {
+      name: 'node-2',
+      namespace: 'default',
+      creationTimestamp,
+      uid: '123',
+      labels: {},
+    },
+    spec: {
+      podCIDR: '',
+      podCIDRs: [],
+      providerID: '',
+      taints: [],
+      unschedulable: false,
+    },
+    status: {},
+  },
 ];

frontend/src/lib/k8s/node.ts

@@ -7,30 +7,30 @@ import { KubeObject, KubeObjectInterface } from './KubeObject';
 
 export interface KubeNode extends KubeObjectInterface {
   status: {
-    addresses: {
+    addresses?: {
       address: string;
       type: string;
     }[];
-    allocatable: {
+    allocatable?: {
       cpu: any;
       memory: any;
       ephemeralStorage: any;
       hugepages_1Gi: any;
       hugepages_2Mi: any;
       pods: any;
     };
-    capacity: {
+    capacity?: {
       cpu: any;
       memory: any;
       ephemeralStorage: any;
       hugepages_1Gi: any;
       hugepages_2Mi: any;
       pods: any;
     };
-    conditions: (Omit<KubeCondition, 'lastProbeTime' | 'lastUpdateTime'> & {
+    conditions?: (Omit<KubeCondition, 'lastProbeTime' | 'lastUpdateTime'> & {
       lastHeartbeatTime: string;
     })[];
-    nodeInfo: {
+    nodeInfo?: {
       architecture: string;
       bootID: string;
       containerRuntimeVersion: string;
@@ -85,11 +85,11 @@ class Node extends KubeObject<KubeNode> {
   }
 
   getExternalIP(): string {
-    return this.status.addresses.find(address => address.type === 'ExternalIP')?.address || '';
+    return this.status.addresses?.find(address => address.type === 'ExternalIP')?.address || '';
   }
 
   getInternalIP(): string {
-    return this.status.addresses.find(address => address.type === 'InternalIP')?.address || '';
+    return this.status.addresses?.find(address => address.type === 'InternalIP')?.address || '';
   }
 }
 

frontend/src/lib/util.ts

@@ -134,6 +134,9 @@ export function getResourceMetrics(
   metrics: KubeMetrics[],
   resourceType: 'cpu' | 'memory'
 ) {
+  if (item.status.capacity === undefined) {
+    return [0, 0];
+  }
   const resourceParsers: any = {
     cpu: parseCpu,
     memory: parseRam,