fix: show two columns, when the other one is empty

fix: show two columns when no none headline properties

chore: remove console.log

chore: update spacing

fix: show two property columns when no analytics

fix: fix issues with cards styling

fix: scroll issues

Author: mainawycliffe

src/components/Canary/HealthChecksSummary.tsx

@@ -23,7 +23,7 @@ export function HealthChecksSummary({
 
     const data: StatusLineProps = {
       label: "Health Checks",
-      icon: <AiFillHeart className="mr-1 inline-block h-3.5 w-3.5" />,
+      icon: <AiFillHeart className="inline-block h-4 w-4" />,
       url: "/health",
       statuses: [
         ...(checks.healthy > 0

src/components/StatusLine/StatusLine.tsx

@@ -20,15 +20,21 @@ export type StatusLineData = {
 
 export type StatusLineProps = React.HTMLProps<HTMLDivElement> & StatusLineData;
 
-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 +52,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>
     );
@@ -74,7 +80,7 @@ export function StatusLine({
       className={clsx("flex flex-row items-center space-x-1", className)}
       {...rest}
     >
-      {icon && renderIcon(icon)}
+      {icon && <RenderIcon icon={icon} />}
       {url && (
         <Link
           title={label}

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.tsx

@@ -85,24 +85,6 @@ export function TopologyCard({
     [size]
   );
 
-  const canShowChildHealth = () => {
-    let totalCount = 0;
-    if (topology?.summary?.checks) {
-      topology.summary.checks.healthy = topology.summary.checks.healthy || 0;
-      topology.summary.checks.unhealthy =
-        topology.summary.checks.unhealthy || 0;
-      topology.summary.checks.warning = topology.summary.checks.warning || 0;
-      Object.keys(topology.summary.checks).forEach((key) => {
-        totalCount +=
-          topology.summary?.checks?.[key as keyof Topology["summary"]] || 0;
-      });
-    }
-    return (
-      !topology?.components?.length &&
-      (!topology?.is_leaf || (topology.is_leaf && totalCount !== 1))
-    );
-  };
-
   const prepareTopologyLink = (topologyItem: Topology) => {
     if (topologyItem.id === parentId && parentId) {
       return "";
@@ -143,22 +125,49 @@ export function TopologyCard({
     [topology?.components]
   );
 
+  const { heading, properties, isPropertiesPanelEmpty } = useMemo(() => {
+    const allProperties = topology?.properties || [];
+    const properties = allProperties.filter((i) => !i.headline);
+
+    const heading = allProperties.filter(
+      (i) => i.headline && (!!i.value || !!i.text || !!i.url)
+    );
+
+    const isPropertiesPanelShown =
+      properties.filter(
+        (i) => !i.headline && i.type !== "hidden" && (i.text || i.value)
+      ).length > 0;
+
+    return {
+      heading,
+      properties,
+      isPropertiesPanelEmpty: !isPropertiesPanelShown
+    };
+  }, [topology?.properties]);
+
+  const isAnalyticsPanelEmpty = useMemo(() => {
+    // if there are no insights, checks or components, we don't need to show the
+    // second panel at all
+    return (
+      !topology?.summary?.insights &&
+      !topology?.summary?.checks &&
+      (sortedTopologyComponents ?? []).length === 0
+    );
+  }, [
+    sortedTopologyComponents,
+    topology?.summary?.checks,
+    topology?.summary?.insights
+  ]);
+
   if (topology == null) {
     return <TopologyCardSkeletonLoader />;
   }
 
-  const allProperties = topology.properties || [];
-  const properties = allProperties.filter((i) => !i.headline);
-
-  const heading = allProperties.filter(
-    (i) => i.headline && (!!i.value || !!i.text || !!i.url)
-  );
-
   return (
     <div
       style={{ width: CardWidth[size as Size] || size }}
       className={clsx(
-        "card relative mb-3 mr-3 rounded-8px border-0 border-t-8 bg-lightest-gray shadow-card",
+        "card relative mb-3 mr-3 overflow-hidden rounded-8px border-0 border-t-8 bg-lightest-gray shadow-card",
         StatusStyles[topology.status as ComponentStatus] || "border-white",
         selectionMode ? "cursor-pointer" : ""
       )}
@@ -224,42 +233,43 @@ export function TopologyCard({
         </div>
       </div>
       <div className="flex flex-nowrap space-x-4 rounded-b-8px bg-lightest-gray">
-        {metricsInFooter ? (
+        {metricsInFooter && heading.length > 0 ? (
           <div className="flex flex-1 py-4">
             <CardMetrics items={heading} />
           </div>
         ) : (
           <>
-            <TopologyCardPropertiesColumn properties={properties} />
-            <CustomScroll
-              className="flex-1 space-y-1.5 py-2 pl-2 pr-2"
-              showMoreClass="text-xs linear-1.21rel mr-1 cursor-pointer"
-              maxHeight="200px"
-              minChildCount={5}
-            >
-              <TopologyConfigAnalysisLine topology={topology} />
-              {canShowChildHealth() && (
-                <HealthSummary
-                  className=""
-                  target={target}
-                  key={topology.id}
-                  component={topology}
-                />
-              )}
-              <HealthChecksSummary
-                checks={topology?.summary?.checks}
-                className=""
-              />
-              {topology?.id && <IncidentCardSummary topology={topology} />}
-              {sortedTopologyComponents?.map((component: any) => (
-                <HealthSummary
+            <TopologyCardPropertiesColumn
+              displayTwoColumns={isAnalyticsPanelEmpty}
+              properties={properties}
+            />
+            {!isAnalyticsPanelEmpty && (
+              <CustomScroll
+                className={clsx(
+                  "flex-1 py-2 pl-2 pr-2",
+                  isPropertiesPanelEmpty ? "grid grid-cols-2 gap-1" : ""
+                )}
+                showMoreClass="text-xs linear-1.21rel mr-1 cursor-pointer"
+                maxHeight="200px"
+                // When we showing two columns, we need to show more items
+                minChildCount={isPropertiesPanelEmpty ? 5 : 10}
+              >
+                <TopologyConfigAnalysisLine topology={topology} />
+                <HealthChecksSummary
+                  checks={topology?.summary?.checks}
                   className=""
-                  target={target}
-                  key={component.id}
-                  component={component}
                 />
-              ))}
-            </CustomScroll>
+                {topology?.id && <IncidentCardSummary topology={topology} />}
+                {sortedTopologyComponents?.map((component: any) => (
+                  <HealthSummary
+                    className=""
+                    target={target}
+                    key={component.id}
+                    component={component}
+                  />
+                ))}
+              </CustomScroll>
+            )}
           </>
         )}
       </div>

src/components/Topology/TopologyCard/TopologyCardPropertiesColumn.tsx

@@ -1,13 +1,16 @@
 import { Property } from "@flanksource-ui/api/types/topology";
 import { CustomScroll } from "@flanksource-ui/ui/CustomScroll";
+import clsx from "clsx";
 import { PropertyDisplay } from "./Property";
 
 type TopologyCardPropertiesColumnProps = {
   properties: Property[];
+  displayTwoColumns?: boolean;
 };
 
 export default function TopologyCardPropertiesColumn({
-  properties
+  properties,
+  displayTwoColumns = false
 }: TopologyCardPropertiesColumnProps) {
   // Filter out properties that are hidden, have no text or value, and are not a
   // headline property.
@@ -21,7 +24,10 @@ export default function TopologyCardPropertiesColumn({
 
   return (
     <CustomScroll
-      className="flex-1 py-2 pl-2"
+      className={clsx(
+        "flex-1 py-2 pl-2",
+        displayTwoColumns ? "grid grid-cols-2" : ""
+      )}
       showMoreClass="text-xs linear-1.21rel mr-1 cursor-pointer"
       maxHeight="200px"
       minChildCount={6}

src/components/Topology/TopologyCard/Utils/FormatProperties.tsx

@@ -14,7 +14,6 @@ type FormatPropertyProps = {
 };
 
 export function FormatPropertyURL({ property }: FormatPropertyProps) {
-  console.log("property", property);
   if (property == null) {
     return null;
   }

src/ui/CustomScroll/index.tsx

@@ -34,11 +34,7 @@ export const CustomScroll = ({
 
   return (
     <div
-      className={clsx(
-        "relative overflow-hidden",
-        className,
-        hasScroll && !showMore ? "hover:overflow-y-scroll" : ""
-      )}
+      className={clsx("relative overflow-y-auto", className)}
       style={{ ...style, maxHeight, height: "min-content" }}
       {...rest}
     >
@@ -51,7 +47,7 @@ export const CustomScroll = ({
             setShowMore(false);
           }}
           className={clsx(
-            "bottom-0 m-auto w-full hover:underline",
+            "bottom-0 col-span-2 m-auto w-full hover:underline",
             showMoreClass
           )}
         >