improve unschedulable display

assets/src/components/kubernetes/cluster/Node.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement, useMemo } from 'react'
 import {
   Card,
+  Chip,
   ChipList,
   SidecarItem,
   Table,
@@ -98,9 +99,16 @@ export default function Node(): ReactElement {
             <ResourceReadyChip ready={node?.ready} />
           </SidecarItem>
           <SidecarItem heading="Unschedulable">
-            {node?.unschedulable ? 'True' : 'False'}
+            <Chip
+              size="small"
+              severity={node?.unschedulable ? 'danger' : 'success'}
+            >
+              {node?.unschedulable ? 'True' : 'False'}
+            </Chip>
           </SidecarItem>
-          <SidecarItem heading="Pod CIDR">{node?.podCIDR}</SidecarItem>
+          {node.podCIDR && (
+            <SidecarItem heading="Pod CIDR">{node?.podCIDR}</SidecarItem>
+          )}
         </MetadataSidecar>
       }
     >

assets/src/components/kubernetes/common/utils.tsx

@@ -6,6 +6,8 @@ import moment from 'moment/moment'
 import yaml from 'js-yaml'
 import { capitalize } from 'lodash'
 
+import { ChipProps } from '@pluralsh/design-system/dist/components/Chip'
+
 import {
   Types_ListMeta as ListMetaT,
   Maybe,
@@ -110,9 +112,10 @@ const resourceConditionSeverity = {
 
 export function ResourceReadyChip({
   ready,
+  ...props
 }: {
   ready: string | boolean | undefined
-}) {
+} & ChipProps) {
   if (ready === undefined) return undefined
 
   const r = ready.toString()
@@ -122,6 +125,7 @@ export function ResourceReadyChip({
     <Chip
       size="small"
       severity={severity}
+      {...props}
     >
       {capitalize(r)}
     </Chip>