added uid for identification (#620)

frontend/src/components/InstalledPackages/HealthStatus.tsx

@@ -1,40 +1,44 @@
 import { HD_RESOURCE_CONDITION_TYPE } from "../../API/releases";
 import { Tooltip } from "flowbite-react";
 import { ReleaseHealthStatus } from "../../data/types";
-import { v4 as uuidv4 } from "uuid";
 
 interface Props {
   statusData: ReleaseHealthStatus[];
 }
 
 const HealthStatus = ({ statusData }: Props) => {
-  const statuses = statusData.map((item) => {
+  const statuses = statusData.flatMap((item) => {
-    for (let i = 0; i < item.status.conditions.length; i++) {
+    return item.status?.conditions
-      const cond = item.status.conditions[i];
+      ?.filter((cond) => cond.type === HD_RESOURCE_CONDITION_TYPE)
+      .map((cond) => {
+        const stableKey =
+          item.metadata?.uid
+            ? `${item.metadata.uid}-${item.metadata.namespace ?? "default"}`
+            : `${item.kind}-${item.metadata?.namespace ?? "default"}-${item.metadata?.name}`;
 
-      if (cond.type !== HD_RESOURCE_CONDITION_TYPE) {
+        return (
-        continue;
+          <Tooltip
-      }
+            key={stableKey}
-
+            content={`${cond.status} ${item.kind} ${item.metadata?.name}`}
-      return (
+          >
-        <Tooltip
+            <span
-          key={uuidv4()} // this is not a good practice, we need to fetch some unique id from the backend
+              className={`inline-block ${
-          content={`${cond.status} ${item.kind} ${item.metadata.name}`}
+                cond.status === "Healthy"
-        >
+                  ? "bg-success"
-          <span
+                  : cond.status === "Progressing"
-            className={`inline-block ${
+                  ? "bg-warning"
-              cond.status === "Healthy"
+                  : "bg-danger"
-                ? "bg-success"
+              } w-2.5 h-2.5 rounded-sm`}
-                : cond.status === "Progressing"
+            ></span>
-                ? "bg-warning"
+          </Tooltip>
-                : "bg-danger"
+        );
-            } w-2.5 h-2.5 rounded-sm`}
+      });
-          ></span>
-        </Tooltip>
-      );
-    }
   });
   
+  if (statuses.length === 0) {
+    return <div>No health statuses available</div>;
+  }
+  
   return <div className="flex flex-wrap gap-1">{statuses}</div>;
 };
 

frontend/src/data/types.ts

@@ -53,10 +53,9 @@ export type ReleaseHealthStatus = {
   metadata: {
     name: string;
     namespace: string;
-    creationTimestamp?: string;
+    uid?: string; // added: Kubernetes UID for stable identification
-    labels: {
+    creationTimestamp: Date;
-      [key: string]: string;
+    labels: string[];
-    };
   };
   spec: unknown;
   status: {