From df149177da87e78820ac787811addaffd3cfda5c Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Tue, 4 Jun 2024 14:46:49 +0300
Subject: [PATCH] fix: filter config list by health on click of the config item

fix: fix issue with config summary

chore: fix health filter link

fix: fix filters not working
---
 .../Cells/ConfigSummaryHealthCells.tsx        | 95 +++++++++++++++++++
 .../ConfigSummary/ConfigSummaryList.tsx       | 75 ++-------------
 2 files changed, 101 insertions(+), 69 deletions(-)
 create mode 100644 src/components/Configs/ConfigSummary/Cells/ConfigSummaryHealthCells.tsx

diff --git a/src/components/Configs/ConfigSummary/Cells/ConfigSummaryHealthCells.tsx b/src/components/Configs/ConfigSummary/Cells/ConfigSummaryHealthCells.tsx
new file mode 100644
index 000000000..66a9188b3
--- /dev/null
+++ b/src/components/Configs/ConfigSummary/Cells/ConfigSummaryHealthCells.tsx
@@ -0,0 +1,95 @@
+import { ConfigSummary } from "@flanksource-ui/api/types/configs";
+import {
+  StatusInfo,
+  StatusLine
+} from "@flanksource-ui/components/StatusLine/StatusLine";
+import { CellContext } from "@tanstack/react-table";
+import { useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
+import { getConfigStatusColor } from "../ConfigSummaryList";
+
+export function ConfigSummaryHealthCell({
+  getValue,
+  row
+}: CellContext<ConfigSummary, any>) {
+  const [searchParams] = useSearchParams();
+
+  const value = getValue<ConfigSummary["health"]>();
+  const type = row.original.type;
+  const groupBy = searchParams.get("groupBy");
+
+  const urlBase = useMemo(() => {
+    if (groupBy) {
+      return `/catalog?groupBy=${groupBy}&configType=${type}`;
+    }
+    return `/catalog?configType=${type}`;
+  }, [groupBy, type]);
+
+  const statusLines = useMemo(() => {
+    const data: StatusInfo[] = Object.entries(value ?? {}).map(
+      ([key, value]) => {
+        return {
+          label: value,
+          url: `${urlBase}&health=${key}:1`,
+          color: getConfigStatusColor({
+            [key]: value
+          } as ConfigSummary["health"])
+        };
+      }
+    );
+    return data;
+  }, [urlBase, value]);
+
+  if (!value) {
+    return null;
+  }
+
+  return (
+    <div
+      className="flex flex-row gap-1"
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+    >
+      <StatusLine label="" statuses={statusLines} />
+    </div>
+  );
+}
+
+export function ConfigSummaryHealthAggregateCell({
+  row
+}: CellContext<ConfigSummary, any>) {
+  const value = row.subRows.reduce((acc, row) => {
+    const health = row.original.health;
+    if (health) {
+      Object.entries(health).forEach(([key, value]) => {
+        acc[key] = (acc[key] || 0) + value;
+      });
+    }
+    return acc;
+  }, {} as Record<string, number>);
+
+  const statusLines = useMemo(() => {
+    const data: StatusInfo[] = Object.entries(value ?? {}).map(
+      ([key, value]) => {
+        return {
+          label: value.toString(),
+          color: getConfigStatusColor({
+            [key]: value
+          } as ConfigSummary["health"])
+        };
+      }
+    );
+    return data;
+  }, [value]);
+
+  if (!value) {
+    return null;
+  }
+  return (
+    <div className="flex flex-row gap-1">
+      <StatusLine label="" statuses={statusLines} />
+    </div>
+  );
+}
diff --git a/src/components/Configs/ConfigSummary/ConfigSummaryList.tsx b/src/components/Configs/ConfigSummary/ConfigSummaryList.tsx
index 4f1dcfe97..d6935f408 100644
--- a/src/components/Configs/ConfigSummary/ConfigSummaryList.tsx
+++ b/src/components/Configs/ConfigSummary/ConfigSummaryList.tsx
@@ -1,8 +1,4 @@
 import { ConfigSummary } from "@flanksource-ui/api/types/configs";
-import {
-  StatusInfo,
-  StatusLine
-} from "@flanksource-ui/components/StatusLine/StatusLine";
 import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import { CountBadge } from "@flanksource-ui/ui/Badge/CountBadge";
 import { DataTable } from "@flanksource-ui/ui/DataTable";
@@ -15,6 +11,10 @@ import ConfigListCostCell from "../ConfigList/Cells/ConfigListCostCell";
 import ConfigListDateCell from "../ConfigList/Cells/ConfigListDateCell";
 import ConfigsTypeIcon from "../ConfigsTypeIcon";
 import ConfigInsightsIcon from "../Insights/ConfigInsightsIcon";
+import {
+  ConfigSummaryHealthAggregateCell,
+  ConfigSummaryHealthCell
+} from "./Cells/ConfigSummaryHealthCells";
 
 export function getConfigStatusColor(health?: ConfigSummary["health"]) {
   if (!health) {
@@ -111,71 +111,8 @@ const configSummaryColumns: ColumnDef<ConfigSummary, any>[] = [
     accessorKey: "health",
     minSize: 50,
     maxSize: 100,
-    cell: ({ getValue }: CellContext<ConfigSummary, any>) => {
-      const value = getValue<ConfigSummary["health"]>();
-
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const statusLines = useMemo(() => {
-        const data: StatusInfo[] = Object.entries(value ?? {}).map(
-          ([key, value]) => {
-            return {
-              label: value,
-              // @ts-ignore
-              color: getConfigStatusColor({
-                [key]: value
-              })
-            };
-          }
-        );
-        return data;
-      }, [value]);
-
-      if (!value) {
-        return null;
-      }
-
-      return (
-        <div className="flex flex-row gap-1">
-          <StatusLine label="" statuses={statusLines} />
-        </div>
-      );
-    },
-    aggregatedCell: ({ row }: CellContext<ConfigSummary, any>) => {
-      const value = row.subRows.reduce((acc, row) => {
-        const health = row.original.health;
-        if (health) {
-          Object.entries(health).forEach(([key, value]) => {
-            acc[key] = (acc[key] || 0) + value;
-          });
-        }
-        return acc;
-      }, {} as Record<string, number>);
-
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const statusLines = useMemo(() => {
-        const data: StatusInfo[] = Object.entries(value ?? {}).map(
-          ([key, value]) => {
-            return {
-              label: value.toString(),
-              // @ts-ignore
-              color: getConfigStatusColor({
-                [key]: value
-              })
-            };
-          }
-        );
-        return data;
-      }, [value]);
-
-      if (!value) {
-        return null;
-      }
-      return (
-        <div className="flex flex-row gap-1">
-          <StatusLine label="" statuses={statusLines} />
-        </div>
-      );
-    }
+    cell: ConfigSummaryHealthCell,
+    aggregatedCell: ConfigSummaryHealthAggregateCell
   },
   {
     header: "analysis",