Conditionally render status icon for kube meta (#2298)

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,11 @@ 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 {
+function statusClassName(level: number): string {
-  object: KubeObject;
-}
-
-export class KubeObjectStatusIcon extends React.Component<Props> {
-  @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 +14,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 +25,83 @@ 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 };
+}
+
+interface Props {
+  object: KubeObject;
+}
+
+export class KubeObjectStatusIcon extends React.Component<Props> {
   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>
     );
   }
 
   render() {
-    const { objectStatuses} = this;
+    const statuses = kubeObjectStatusRegistry.getItemsForObject(this.props.object);
 
-    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

@@ -23,13 +23,11 @@ export class KubeObjectMeta extends React.Component<KubeObjectMetaProps> {
   }
 
   render() {
-    const object = this.props.object;
+    const { object } = this.props;
     const {
-      getName, getNs, getLabels, getResourceVersion, selfLink,
+      getNs, getLabels, getResourceVersion, selfLink, getAnnotations,
-      getAnnotations, getFinalizers, getId, getAge,
+      getFinalizers, getId, getAge, getName, metadata: { creationTimestamp },
-      metadata: { creationTimestamp },
     } = object;
-
     const ownerRefs = object.getOwnerRefs();
 
     return (
@@ -38,7 +36,8 @@ 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} />
+          {getName()}
+          <KubeObjectStatusIcon key="icon" object={object} />
         </DrawerItem>
         <DrawerItem name="Namespace" hidden={this.isHidden("namespace") || !getNs()}>
           {getNs()}
@@ -67,7 +66,7 @@ export class KubeObjectMeta extends React.Component<KubeObjectMetaProps> {
           labels={getFinalizers()}
           hidden={this.isHidden("finalizers")}
         />
-        {ownerRefs && ownerRefs.length > 0 &&
+        {ownerRefs?.length > 0 &&
         <DrawerItem name="Controlled By" hidden={this.isHidden("ownerReferences")}>
           {
             ownerRefs.map(ref => {