Conditionally render status icon for kube meta

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/extensions/registries/kube-object-status-registry.ts

@@ -9,9 +9,17 @@ export interface KubeObjectStatusRegistration {
 
 export class KubeObjectStatusRegistry extends BaseRegistry<KubeObjectStatusRegistration> {
   getItemsForKind(kind: string, apiVersion: string) {
-    return this.getItems().filter((item) => {
+    return this.getItems()
-      return item.kind === kind && item.apiVersions.includes(apiVersion);
+      .filter((item) => (
-    });
+        item.kind === kind
+        && item.apiVersions.includes(apiVersion)
+      ));
+  }
+
+  getItemsForObject(src: KubeObject) {
+    return this.getItemsForKind(src.kind, src.apiVersion)
+      .map(item => item.resolve(src))
+      .filter(Boolean);
   }
 }
 

src/renderer/components/kube-object-status-icon/kube-object-status-icon.tsx

@@ -2,25 +2,26 @@ import "./kube-object-status-icon.scss";
 
 import React from "react";
 import { Icon } from "../icon";
-import { KubeObject } from "../../api/kube-object";
 import { cssNames, formatDuration } from "../../utils";
-import { KubeObjectStatusRegistration, kubeObjectStatusRegistry } from "../../../extensions/registries/kube-object-status-registry";
+import { KubeObject, KubeObjectStatus, KubeObjectStatusLevel } from "../../..//extensions/renderer-api/k8s-api";
-import { KubeObjectStatus, KubeObjectStatusLevel } from "../../..//extensions/renderer-api/k8s-api";
+import { kubeObjectStatusRegistry } from "../../../extensions/registries";
-import { computed } from "mobx";
 
-interface Props {
+interface BaseProps {
+  statuses?: KubeObjectStatus[];
+  object?: KubeObject;
+}
+
+interface StatusProps extends BaseProps {
+  statuses: KubeObjectStatus[];
+  object?: undefined;
+}
+
+interface ObjectProps extends BaseProps {
+  statuses?: undefined;
   object: KubeObject;
 }
 
-export class KubeObjectStatusIcon extends React.Component<Props> {
+function statusClassName(level: number): string {
-  @computed get objectStatuses() {
-    const { object } = this.props;
-    const registrations = kubeObjectStatusRegistry.getItemsForKind(object.kind, object.apiVersion);
-
-    return registrations.map((item: KubeObjectStatusRegistration) => { return item.resolve(object); }).filter((item: KubeObjectStatus) => !!item);
-  }
-
-  statusClassName(level: number): string {
   switch (level) {
     case KubeObjectStatusLevel.INFO:
       return "info";
@@ -28,12 +29,10 @@ export class KubeObjectStatusIcon extends React.Component<Props> {
       return "warning";
     case KubeObjectStatusLevel.CRITICAL:
       return "error";
-      default:
-        return "";
   }
 }
 
-  statusTitle(level: number): string {
+function statusTitle(level: KubeObjectStatusLevel): string {
   switch (level) {
     case KubeObjectStatusLevel.INFO:
       return "Info";
@@ -41,66 +40,87 @@ export class KubeObjectStatusIcon extends React.Component<Props> {
       return "Warning";
     case KubeObjectStatusLevel.CRITICAL:
       return "Critical";
-      default:
-        return "";
   }
 }
 
-  getAge(timestamp: string) {
+function getAge(timestamp: string) {
-    if (!timestamp) return "";
+  return timestamp
-    const diff = Date.now() - new Date(timestamp).getTime();
+    ? formatDuration(Date.now() - new Date(timestamp).getTime(), true)
-
+    : "";
-    return formatDuration(diff, true);
 }
 
+interface SplitStatusesByLevel {
+  maxLevel: string,
+  criticals: KubeObjectStatus[];
+  warnings: KubeObjectStatus[];
+  infos: KubeObjectStatus[];
+}
+
+/**
+ * This fuction returns the class level for corresponding to the highest status level
+ * and the statuses split by their levels.
+ * @param src a list of status items
+ */
+function splitByLevel(src: KubeObjectStatus[]): SplitStatusesByLevel {
+  const parts = new Map(Object.values(KubeObjectStatusLevel).map(v => [v, []]));
+
+  src.forEach(status => parts.get(status.level).push(status));
+
+  const criticals = parts.get(KubeObjectStatusLevel.CRITICAL);
+  const warnings = parts.get(KubeObjectStatusLevel.WARNING);
+  const infos = parts.get(KubeObjectStatusLevel.INFO);
+  const maxLevel = statusClassName(criticals[0]?.level ?? warnings[0]?.level ?? infos[0].level);
+
+  return { maxLevel, criticals, warnings, infos };
+}
+
+export class KubeObjectStatusIcon extends React.Component<StatusProps | ObjectProps> {
   renderStatuses(statuses: KubeObjectStatus[], level: number) {
     const filteredStatuses = statuses.filter((item) => item.level == level);
 
     return filteredStatuses.length > 0 && (
-      <div className={cssNames("level", this.statusClassName(level))}>
+      <div className={cssNames("level", statusClassName(level))}>
         <span className="title">
-          {this.statusTitle(level)}
+          {statusTitle(level)}
         </span>
-        { filteredStatuses.map((status, index) =>{
+        {
-          return (
+          filteredStatuses.map((status, index) => (
             <div key={`kube-resource-status-${level}-${index}`} className={cssNames("status", "msg")}>
-              - {status.text} <span className="age"> · { this.getAge(status.timestamp) }</span>
+              - {status.text} <span className="age"> · {getAge(status.timestamp)}</span>
-            </div>
+            </div>
-          );
+          ))
-        })}
+        }
       </div>
     );
   }
 
+  resolveStatusesFromProps() {
+    if (this.props.statuses) {
+      return this.props.statuses;
+    }
+
+    return kubeObjectStatusRegistry.getItemsForObject(this.props.object);
+  }
+
   render() {
-    const { objectStatuses} = this;
+    const statuses = this.resolveStatusesFromProps();
 
-    if (!objectStatuses.length) return null;
+    if (statuses.length === 0) {
-
+      return null;
-    const sortedStatuses = objectStatuses.sort((a: KubeObjectStatus, b: KubeObjectStatus) => {
-      if (a.level < b.level ) {
-        return 1;
     }
 
-      if (a.level > b.level ) {
+    const { maxLevel, criticals, warnings, infos } = splitByLevel(statuses);
-        return -1;
-      }
-
-      return 0;
-    });
-
-    const level = this.statusClassName(sortedStatuses[0].level);
 
     return (
       <Icon
-        material={level}
+        material={maxLevel}
-        className={cssNames("KubeObjectStatusIcon", level)}
+        className={cssNames("KubeObjectStatusIcon", maxLevel)}
         tooltip={{
           children: (
             <div className="KubeObjectStatusTooltip">
-              {this.renderStatuses(sortedStatuses, KubeObjectStatusLevel.CRITICAL)}
+              {this.renderStatuses(criticals, KubeObjectStatusLevel.CRITICAL)}
-              {this.renderStatuses(sortedStatuses, KubeObjectStatusLevel.WARNING)}
+              {this.renderStatuses(warnings, KubeObjectStatusLevel.WARNING)}
-              {this.renderStatuses(sortedStatuses, KubeObjectStatusLevel.INFO)}
+              {this.renderStatuses(infos, KubeObjectStatusLevel.INFO)}
             </div>
           )
         }}

src/renderer/components/kube-object/kube-object-meta.tsx

@@ -5,6 +5,7 @@ import { lookupApiLink } from "../../api/kube-api";
 import { Link } from "react-router-dom";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { getDetailsUrl } from "./kube-object-details";
+import { kubeObjectStatusRegistry } from "../../../extensions/registries";
 
 export interface KubeObjectMetaProps {
   object: KubeObject;
@@ -22,10 +23,21 @@ export class KubeObjectMeta extends React.Component<KubeObjectMetaProps> {
     return hideFields.includes(field);
   }
 
+  renderObjectName() {
+    const { object } = this.props;
+    const statuses = kubeObjectStatusRegistry.getItemsForObject(object);
+
+    if (statuses.length === 0) {
+      return object.getName();
+    }
+
+    return <>{object.getName()} <KubeObjectStatusIcon key="icon" statuses={statuses} /></>;
+  }
+
   render() {
-    const object = this.props.object;
+    const { object } = this.props;
     const {
-      getName, getNs, getLabels, getResourceVersion, selfLink,
+      getNs, getLabels, getResourceVersion, selfLink,
       getAnnotations, getFinalizers, getId, getAge,
       metadata: { creationTimestamp },
     } = object;
@@ -38,7 +50,7 @@ export class KubeObjectMeta extends React.Component<KubeObjectMetaProps> {
           {getAge(true, false)} ago ({creationTimestamp})
         </DrawerItem>
         <DrawerItem name="Name" hidden={this.isHidden("name")}>
-          {getName()} <KubeObjectStatusIcon key="icon" object={object} />
+          {this.renderObjectName()}
         </DrawerItem>
         <DrawerItem name="Namespace" hidden={this.isHidden("namespace") || !getNs()}>
           {getNs()}