Make Improvements to the Config Relationships - Graph and Table

src/api/types/configs.ts

@@ -56,7 +56,7 @@ export interface ConfigItem extends Timestamped, Avatar, Agent, Costs {
   config?: Record<string, any>;
   description?: string | null;
   health?: "healthy" | "unhealthy" | "warn" | "unknown";
-  related_id?: string;
+  related_ids?: string[];
   agent?: {
     id: string;
     name: string;

src/components/Configs/ConfigList/ConfigsRelationshipsTable.tsx

@@ -0,0 +1,148 @@
+import { ConfigItem } from "@flanksource-ui/api/types/configs";
+import { DataTable } from "@flanksource-ui/ui/DataTable";
+import { Row, SortingState, Updater } from "@tanstack/react-table";
+import { useCallback, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { configListColumns } from "./ConfigListColumn";
+
+export interface Props {
+  data: ConfigItem[];
+  isLoading: boolean;
+  columnsToHide?: string[];
+  groupBy?: string[];
+  expandAllRows?: boolean;
+}
+
+export default function ConfigsRelationshipsTable({
+  data,
+  isLoading,
+  columnsToHide = ["type"],
+  groupBy = [],
+  expandAllRows = false
+}: Props) {
+  const [queryParams, setSearchParams] = useSearchParams({
+    sortBy: "type",
+    sortOrder: "asc"
+  });
+
+  const navigate = useNavigate();
+
+  const sortField = queryParams.get("sortBy") ?? "type";
+
+  const isSortOrderDesc =
+    queryParams.get("sortOrder") === "desc" ? true : false;
+
+  const determineSortColumnOrder = useCallback(
+    (sortState: SortingState): SortingState => {
+      const sortStateWithoutDeletedAt = sortState.filter(
+        (sort) => sort.id !== "deleted_at"
+      );
+      return [{ id: "deleted_at", desc: false }, ...sortStateWithoutDeletedAt];
+    },
+    []
+  );
+
+  const [sortBy, setSortBy] = useState<SortingState>(() => {
+    return sortField
+      ? determineSortColumnOrder([
+          {
+            id: sortField,
+            desc: isSortOrderDesc
+          },
+          ...(sortField !== "name"
+            ? [
+                {
+                  id: "name",
+                  desc: isSortOrderDesc
+                }
+              ]
+            : [])
+        ])
+      : determineSortColumnOrder([]);
+  });
+
+  const updateSortBy = useCallback(
+    (newSortBy: Updater<SortingState>) => {
+      const getSortBy = Array.isArray(newSortBy)
+        ? newSortBy
+        : newSortBy(sortBy);
+      // remove deleted_at from sort state, we don't want it to be save to the
+      // URL for the purpose of sorting
+      const sortStateWithoutDeleteAt = getSortBy.filter(
+        (state) => state.id !== "deleted_at"
+      );
+      const { id: field, desc } = sortStateWithoutDeleteAt[0] ?? {};
+      const order = desc ? "desc" : "asc";
+      if (field && order && field !== "type" && order !== "asc") {
+        queryParams.set("sortBy", field);
+        queryParams.set("sortOrder", order);
+      } else {
+        queryParams.delete("sortBy");
+        queryParams.delete("sortOrder");
+      }
+      setSearchParams(queryParams);
+      const sortByValue =
+        typeof newSortBy === "function" ? newSortBy(sortBy) : newSortBy;
+      if (sortByValue.length > 0) {
+        setSortBy(determineSortColumnOrder(sortByValue));
+      }
+    },
+    [determineSortColumnOrder, queryParams, setSearchParams, sortBy]
+  );
+
+  const hiddenColumns = ["deleted_at", "changed", ...columnsToHide];
+
+  const determineRowClassNames = useCallback((row: Row<ConfigItem>) => {
+    if (row.getIsGrouped()) {
+      // check if the whole group is deleted
+      const allDeleted = row.getLeafRows().every((row) => {
+        if (row.original.deleted_at) {
+          return true;
+        }
+        return false;
+      });
+
+      if (allDeleted) {
+        return "text-gray-500";
+      }
+    } else {
+      if (row.original.deleted_at) {
+        return "text-gray-500";
+      }
+    }
+    return "";
+  }, []);
+
+  const handleRowClick = useCallback(
+    (row?: { original?: { id: string } }) => {
+      const id = row?.original?.id;
+      if (id) {
+        navigate(`/catalog/${id}`);
+      }
+    },
+    [navigate]
+  );
+
+  return (
+    <DataTable
+      stickyHead
+      isVirtualized
+      columns={configListColumns}
+      data={data}
+      handleRowClick={handleRowClick}
+      tableStyle={{ borderSpacing: "0" }}
+      isLoading={isLoading}
+      groupBy={groupBy}
+      hiddenColumns={hiddenColumns}
+      className="max-w-full table-auto table-fixed"
+      tableSortByState={sortBy}
+      enableServerSideSorting
+      onTableSortByChanged={updateSortBy}
+      determineRowClassNamesCallback={determineRowClassNames}
+      preferencesKey="config-list"
+      virtualizedRowEstimatedHeight={37}
+      overScan={20}
+      expandAllRows={expandAllRows}
+    />
+  );
+}

src/components/Configs/Graph/ConfigRelationshipGraph.tsx

@@ -13,7 +13,7 @@ export type ConfigGraphNodes =
       config: Pick<
         ConfigRelationships,
         | "id"
-        | "related_id"
+        | "related_ids"
         | "direction"
         | "type"
         | "name"
@@ -33,7 +33,7 @@ export type ConfigGraphNodes =
       configs: Pick<
         ConfigRelationships,
         | "id"
-        | "related_id"
+        | "related_ids"
         | "direction"
         | "type"
         | "name"
@@ -61,32 +61,35 @@ export function ConfigRelationshipGraph({
   );
 
   const edges: Edge<ConfigGraphNodes>[] = useMemo(() => {
-    return configsForGraph.map((config) => {
+    const e: Edge<ConfigGraphNodes>[] = [];
+    configsForGraph.forEach((config) => {
       if (config.nodeType === "config") {
-        return {
-          id: `${config.config.id}-related-to-${config.config.related_id}`,
+        config.config.related_ids?.forEach((related_id) => {
+          e.push({
+            id: `${config.config.id}-related-to-${related_id}`,
+            source:
+              config.config.direction === "incoming"
+                ? config.config.id
+                : related_id,
+            target:
+              config.config.direction === "incoming"
+                ? related_id
+                : config.config.id
+          } satisfies Edge);
+        });
+      } else {
+        e.push({
+          id: `${config.id}-related-to-${config.related_id}`,
           source:
-            config.config.direction === "incoming"
-              ? config.config.id
-              : config.config.related_id!,
+            config.direction === "incoming" ? config.id : config.related_id!,
           target:
-            config.config.direction === "incoming"
-              ? config.config.related_id!
-              : config.config.id
-        } satisfies Edge;
+            config.direction === "incoming" ? config.related_id! : config.id
+        } satisfies Edge);
       }
-
-      return {
-        id: `${config.id}-related-to-${config.related_id}`,
-        source:
-          config.direction === "incoming" ? config.id : config.related_id!,
-        target: config.direction === "incoming" ? config.related_id! : config.id
-      } satisfies Edge;
     });
+    return e;
   }, [configsForGraph]);
 
-  console.log("configsForGraph", JSON.stringify(configsForGraph, null, 2));
-
   const nodes: Node<ConfigGraphNodes>[] = useMemo(() => {
     // break this down by config types
     return configsForGraph.map((config) => {