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;
@@ -73,31 +76,36 @@ export function StatusLine({
   url,
   statuses,
   className = "py-1",
+  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>
-      )}
-      {!url && (
-        <span
-          title={label}
-          className="h-4 cursor-pointer overflow-hidden truncate text-xs"
-        >
-          {label}
-        </span>
+      {!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>
+          )}
+        </>
       )}
       <div className="flex flex-row space-x-1.5">
         {statuses.map((status, index) => {

src/components/Topology/TopologyCard/TopologCardStatuses.tsx

@@ -169,7 +169,7 @@ function getTopologyHealthStatuses(topology: Topology) {
   return data;
 }
 
-function getTopologyHealthSummary(
+export function getTopologyHealthSummary(
   topology: Topology,
   viewType: "individual_level" | "children_level"
 ) {
@@ -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/TopologyCard.tsx

@@ -13,6 +13,7 @@ import { CardMetrics } from "./CardMetrics";
 import TopologyCardStatuses from "./TopologCardStatuses";
 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/TopologyItemHealthSummary.tsx

@@ -0,0 +1,26 @@
+import { Topology } from "@flanksource-ui/api/types/topology";
+import { StatusLine } from "@flanksource-ui/components/StatusLine/StatusLine";
+import { useMemo } from "react";
+import { getTopologyHealthSummary } from "./TopologCardStatuses";
+
+type TopologyItemHealthSummaryProps = {
+  topology: Topology;
+};
+
+export default function TopologyItemHealthSummary({
+  topology
+}: TopologyItemHealthSummaryProps) {
+  const statusLines = useMemo(() => {
+    return getTopologyHealthSummary(topology, "individual_level");
+  }, [topology]);
+
+  if (!statusLines || statusLines.statuses.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col gap-1">
+      <StatusLine {...statusLines} hideName />
+    </div>
+  );
+}