fix: move self topology status to subtitle

Author: mainawycliffe

src/components/StatusLine/StatusLine.tsx

@@ -18,7 +18,10 @@ export type StatusLineData = {
   statuses: StatusInfo[];
 };
 
-export type StatusLineProps = React.HTMLProps<HTMLDivElement> & StatusLineData;
+export type StatusLineProps = React.HTMLProps<HTMLDivElement> &
+  StatusLineData & {
+    hideName?: boolean;
+  };
 
 interface RenderIconProps {
   icon: string | React.ReactNode;
@@ -72,34 +75,39 @@ export function StatusLine({
   label,
   url,
   statuses,
-  className = "py-1",
+  className = "py-0.5",
+  hideName = false,
   ...rest
 }: StatusLineProps) {
   return (
     <div
       className={clsx("flex flex-row items-center space-x-1", className)}
       {...rest}
     >
-      {icon && <RenderIcon icon={icon} />}
-      {url && (
-        <Link
-          title={label}
-          target={target || ""}
-          className="h-4 cursor-pointer overflow-hidden truncate text-xs"
-          to={url}
-        >
-          {label}
-        </Link>
+      {!hideName && (
+        <>
+          {icon && <RenderIcon icon={icon} />}
+          {url && (
+            <Link
+              title={label}
+              target={target || ""}
+              className="h-4 cursor-pointer overflow-hidden truncate text-xs"
+              to={url}
+            >
+              {label}
+            </Link>
+          )}
+          {!url && (
+            <span
+              title={label}
+              className="h-4 cursor-pointer overflow-hidden truncate text-xs"
+            >
+              {label}
+            </span>
+          )}
+        </>
       )}
-      {!url && (
-        <span
-          title={label}
-          className="h-4 cursor-pointer overflow-hidden truncate text-xs"
-        >
-          {label}
-        </span>
-      )}
-      <div className="flex flex-row space-x-1.5">
+      <div className="flex flex-row space-x-1">
         {statuses.map((status, index) => {
           return <StatusInfoEntry statusInfo={status} key={index} />;
         })}

src/components/Topology/TopologyCard/TopologyCard.tsx

@@ -10,9 +10,10 @@ import { MouseEventHandler, useMemo } from "react";
 import { Link, useParams, useSearchParams } from "react-router-dom";
 import AgentName from "../../Agents/AgentName";
 import { CardMetrics } from "./CardMetrics";
-import TopologyCardStatuses from "./TopologCardStatuses";
+import TopologyCardStatuses from "./TopologyCardStatuses";
 import TopologyCardPropertiesColumn from "./TopologyCardPropertiesColumn";
 import { TopologyDropdownMenu } from "./TopologyDropdownMenu";
+import TopologyItemHealthSummary from "./TopologyItemHealthSummary";
 
 export enum ComponentHealth {
   unhealthy = "unhealthy",
@@ -214,6 +215,7 @@ export function TopologyCard({
                   {topology.status_reason}
                 </div>
               )}
+              <TopologyItemHealthSummary topology={topology} />
             </div>
           </div>
         </div>

src/components/Topology/TopologyCard/TopologCardStatuses.tsx renamed to src/components/Topology/TopologyCard/TopologyCardStatuses.tsx

@@ -169,7 +169,7 @@ function getTopologyHealthStatuses(topology: Topology) {
   return data;
 }
 
-function getTopologyHealthSummary(
+export function getTopologyHealthSummary(
   topology: Topology,
   viewType: "individual_level" | "children_level"
 ) {
@@ -206,7 +206,7 @@ function getTopologyHealthSummary(
   return data;
 }
 
-function topologiesHealthSummaries(topology: Topology) {
+export function topologiesHealthSummaries(topology: Topology) {
   return topology?.components
     ?.sort((a, b) => {
       // we want to move unhealthy components to the top, then warning, then healthy
@@ -277,15 +277,13 @@ export default function TopologyCardStatuses({
       return [];
     }
 
-    const healthSummary =
-      getTopologyHealthSummary(topology, "individual_level") ?? [];
     const healthChecks = getTopologyHealthStatuses(topology);
     const insights = insightStatuses(topology);
     const incidents = incidentsStatuses(topology) ?? [];
     const components = topologiesHealthSummaries(topology) ?? [];
 
     return (
-      [healthSummary, healthChecks, insights, ...incidents, ...components]
+      [healthChecks, insights, ...incidents, ...components]
         .filter((status) => status)
         //   remove empty statuses
         .filter((status) => status!.statuses.length > 0)

src/components/Topology/TopologyCard/TopologyItemHealthSummary.tsx

@@ -0,0 +1,78 @@
+import { Topology } from "@flanksource-ui/api/types/topology";
+import {
+  StatusInfo,
+  StatusLine
+} from "@flanksource-ui/components/StatusLine/StatusLine";
+import { useMemo } from "react";
+
+type TopologyItemHealthSummaryProps = {
+  topology: Topology;
+};
+
+export default function TopologyItemHealthSummary({
+  topology
+}: TopologyItemHealthSummaryProps) {
+  console.log(
+    "TopologyItemHealthSummaryProps",
+    topology.components?.map((c) => c.summary?.checks)
+  );
+
+  const statusLines = useMemo(() => {
+    const summary = topology.components?.reduce(
+      (acc, component) => {
+        const health =
+          (component.summary?.healthy || 0) +
+          (component.summary?.checks?.healthy || 0);
+        const warning =
+          component.summary?.warning ||
+          0 + (component.summary?.checks?.warning || 0);
+        const unhealthy =
+          component.summary?.unhealthy ||
+          0 + (component.summary?.checks?.unhealthy || 0);
+        if (health) {
+          acc["health"] += health;
+        }
+        if (warning) {
+          acc["warning"] += warning;
+        }
+        if (unhealthy) {
+          acc["unhealthy"] += unhealthy;
+        }
+        return acc;
+      },
+      {
+        health: 0,
+        unhealthy: 0,
+        warning: 0
+      }
+    );
+
+    if (!summary) {
+      return undefined;
+    }
+
+    return Object.entries(summary)
+      .filter(([_, count]) => count > 0)
+      .map(([status, count]) => {
+        return {
+          label: count,
+          color:
+            status === "health"
+              ? "green"
+              : status === "warning"
+                ? "orange"
+                : "red"
+        } satisfies StatusInfo;
+      });
+  }, [topology]);
+
+  if (!statusLines || statusLines.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col gap-1">
+      <StatusLine statuses={statusLines} hideName label={""} />
+    </div>
+  );
+}