Topology-card-improvements

pages/organizations/orgs-switched.tsx

@@ -17,9 +17,7 @@ export default function OrgsSwitchedPage() {
   const { push } = useRouter();
 
   useEffect(() => {
-    console.log("Attempting to clear cache");
     client.clear();
-    console.log("Cleared cache, redirecting to /topology");
     push("/topology");
   }, [client, push]);
 

src/components/Authentication/Kratos/KratosLogin.tsx

@@ -157,7 +157,6 @@ const KratosLogin = () => {
     }
   }, [flow, submitFlow, credentials]);
 
-
   return (
     <div className="w-96">
       <ToasterWithCloseButton />

src/components/Canary/CanaryTabs.tsx

@@ -95,7 +95,6 @@ export function generateTabs(tabBy: string, checks: HealthCheck[]) {
       )
     };
   }
-  console.log("tabs", tabs);
   return tabs;
 }
 

src/components/Connections/TestConnection.tsx

@@ -36,7 +36,6 @@ export function TestConnection({ connectionId }: TestConnectionProps) {
       }>
     ) => {
       if (res?.code === "ERR_BAD_REQUEST") {
-        console.log(res?.response?.data.error);
         if (res?.response?.data.error) {
           try {
             const error = JSON.parse(res.response.data.error);

src/components/Incidents/Hypothesis/EvidenceSection/index.tsx

@@ -17,7 +17,7 @@ import { ConfigDetailsChanges } from "@flanksource-ui/components/Configs/Changes
 import ConfigLink from "@flanksource-ui/components/Configs/ConfigLink/ConfigLink";
 import { ConfigAnalysisLink } from "@flanksource-ui/components/Configs/Insights/ConfigAnalysisLink/ConfigAnalysisLink";
 import { LogsTable } from "@flanksource-ui/components/Logs/Table/LogsTable";
-import { TopologyCard } from "@flanksource-ui/components/Topology/TopologyCard";
+import { TopologyCard } from "@flanksource-ui/components/Topology/TopologyCard/TopologyCard";
 import { Size, ViewType } from "@flanksource-ui/types";
 import { Age } from "@flanksource-ui/ui/Age";
 import { Button } from "@flanksource-ui/ui/Buttons/Button";

src/components/Incidents/IncidentDetails/DefinitionOfDone/EvidenceView/index.tsx

@@ -5,18 +5,18 @@ import {
 } from "@flanksource-ui/api/query-hooks";
 import { getCanaries } from "@flanksource-ui/api/services/topology";
 import { Evidence, EvidenceType } from "@flanksource-ui/api/types/evidence";
+import { CardMetrics } from "@flanksource-ui/components/Topology/TopologyCard/CardMetrics";
+import { StatusStyles } from "@flanksource-ui/components/Topology/TopologyCard/TopologyCard";
 import { Size, ViewType } from "@flanksource-ui/types";
 import { Badge } from "@flanksource-ui/ui/Badge/Badge";
+import { ConfigIcon } from "@flanksource-ui/ui/Icons/ConfigIcon";
+import { Icon } from "@flanksource-ui/ui/Icons/Icon";
 import TextSkeletonLoader from "@flanksource-ui/ui/SkeletonLoader/TextSkeletonLoader";
 import { useQuery } from "@tanstack/react-query";
 import clsx from "clsx";
 import { useMemo } from "react";
 import { BsFillCircleFill, BsPersonFill } from "react-icons/bs";
 import { Link } from "react-router-dom";
-import { ConfigIcon } from "../../../../../ui/Icons/ConfigIcon";
-import { Icon } from "../../../../../ui/Icons/Icon";
-import { StatusStyles } from "../../../../Topology/TopologyCard";
-import { CardMetrics } from "../../../../Topology/TopologyCard/CardMetrics";
 import {
   ConfigAnalysisEvidence,
   ConfigChangeEvidence

src/components/StatusLine/StatusLine.tsx

@@ -18,17 +18,26 @@ export type StatusLineData = {
   statuses: StatusInfo[];
 };
 
-export type StatusLineProps = React.HTMLProps<HTMLDivElement> & StatusLineData;
+export type StatusLineProps = React.HTMLProps<HTMLDivElement> &
+  StatusLineData & {
+    hideName?: boolean;
+  };
 
-const renderIcon = (icon: string | React.ReactNode) => {
+interface RenderIconProps {
+  icon: string | React.ReactNode;
+}
+
+const RenderIcon: React.FC<RenderIconProps> = ({ icon }) => {
   if (!icon) {
     return null;
   }
   if (typeof icon === "object") {
-    return icon;
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{icon}</>;
   } else if (typeof icon === "string") {
-    return <Icon name={icon} className="h-4 w-4" />;
+    return <Icon name={icon} className="h-4 w-4 min-w-max" />;
   }
+  return null;
 };
 
 const StatusInfoEntry = ({
@@ -46,14 +55,14 @@ const StatusInfoEntry = ({
         to={statusInfo.url}
         target={target || ""}
       >
-        {statusInfo.icon && renderIcon(statusInfo.icon)}
+        {statusInfo.icon && <RenderIcon icon={statusInfo.icon} />}
         <Chip text={statusInfo.label} color={statusInfo.color} />
       </Link>
     );
   } else {
     return (
       <span className="inline-flex cursor-pointer space-x-1">
-        {statusInfo.icon && renderIcon(statusInfo.icon)}
+        {statusInfo.icon && <RenderIcon icon={statusInfo.icon} />}
         <Chip text={statusInfo.label} color={statusInfo.color} />
       </span>
     );
@@ -66,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)}
+      className={clsx("flex flex-row items-center space-x-0.5", className)}
       {...rest}
     >
-      {icon && renderIcon(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">
+      <div className="flex flex-row space-x-0.5 text-xs">
         {statuses.map((status, index) => {
           return <StatusInfoEntry statusInfo={status} key={index} />;
         })}

src/components/Topology/TopologyCard/CardMetrics.tsx

@@ -24,6 +24,10 @@ export const CardMetrics = ({
   labelClasses = "text-gray-600 font-semibold text-xs mb-0.5",
   metricsClasses = "font-bold text-xs leading-1.21rel flex flex-center justify-center"
 }: IProps) => {
+  if (!items || items.length === 0) {
+    return null;
+  }
+
   return (
     <div className="flex flex-1 items-center justify-between divide-x rounded-b-8px">
       {items.map((item) => (

src/components/Topology/TopologyCard/TopologyCard.stories.tsx

@@ -1,7 +1,7 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { Topology } from "../../../api/types/topology";
 import { Size } from "../../../types";
-import { TopologyCard } from "./index";
+import { TopologyCard } from "./TopologyCard";
 
 export default {
   title: "TopologyCard",