refactor: use mantime react table for config changes

mainawycliffe · mainawycliffe · commit fb7364a2f4df · 2024-10-14T13:41:24.000+03:00
Fixes #2285 fix: fix issue with config changes table
diff --git a/src/components/Configs/Changes/ConfigChangeTable.tsx b/src/components/Configs/Changes/ConfigChangeTable.tsx
@@ -2,16 +2,14 @@ import { useGetConfigChangesById } from "@flanksource-ui/api/query-hooks/useGetC
 import { ConfigChange } from "@flanksource-ui/api/types/configs";
 import GetUserAvatar from "@flanksource-ui/components/Users/GetUserAvatar";
 import { Age } from "@flanksource-ui/ui/Age";
-import { DataTable, PaginationOptions } from "@flanksource-ui/ui/DataTable";
 import FilterByCellValue from "@flanksource-ui/ui/DataTable/FilterByCellValue";
-import useReactTableSortState from "@flanksource-ui/ui/DataTable/Hooks/useReactTableSortState";
 import { ChangeIcon } from "@flanksource-ui/ui/Icons/ChangeIcon";
+import MRTDataTable from "@flanksource-ui/ui/MRTDataTable/MRTDataTable";
 import { CellContext } from "@tanstack/react-table";
-import { ColumnDef } from "@tanstack/table-core";
-import React, { useState } from "react";
+import { MRT_ColumnDef } from "mantine-react-table";
+import { useState } from "react";
 import ConfigLink from "../ConfigLink/ConfigLink";
-import ConfigListTagsCell from "../ConfigList/Cells/ConfigListTagsCell";
-import { ConfigSummaryAnalysisCell } from "../ConfigSummary/ConfigSummaryList";
+import MRTConfigListTagsCell from "../ConfigList/Cells/MRTConfigListTagsCell";
 import { ConfigDetailChangeModal } from "./ConfigDetailsChanges/ConfigDetailsChanges";
 
 export const paramsToReset = {
@@ -38,7 +36,7 @@ export function ConfigChangeDateCell({
   );
 }
 
-const configChangesColumn: ColumnDef<ConfigChange>[] = [
+const configChangesColumn: MRT_ColumnDef<ConfigChange>[] = [
   {
     header: "Last Seen",
     id: "created_at",
@@ -48,15 +46,30 @@ const configChangesColumn: ColumnDef<ConfigChange>[] = [
       cellClassName: "text-ellipsis overflow-hidden"
     },
     maxSize: 70,
-    cell: ConfigChangeDateCell
+    Cell: ({ cell, row, column }) => {
+      const dateString = row?.getValue<string>(column.id);
+      const firstObserved = row?.original.first_observed;
+      const count = row.original.count;
+
+      return (
+        <div className="text-xs">
+          <Age from={dateString} />
+          {(count || 1) > 1 && (
+            <span className="inline-block pl-1 text-gray-500">
+              (x{count} over <Age from={firstObserved} />)
+            </span>
+          )}
+        </div>
+      );
+    }
   },
   {
     header: "Catalog",
     id: "config_id",
     accessorKey: "config_id",
     enableHiding: true,
     enableSorting: false,
-    cell: function ConfigLinkCell({ row }) {
+    Cell: ({ row }) => {
       const configId = row.original.config_id;
       return (
         <FilterByCellValue
@@ -77,7 +90,7 @@ const configChangesColumn: ColumnDef<ConfigChange>[] = [
   {
     header: "Type",
     accessorKey: "change_type",
-    cell: function ConfigChangeTypeCell({ row, column }) {
+    Cell: function ConfigChangeTypeCell({ row, column }) {
       const changeType = row?.getValue(column.id) as string;
       return (
         <FilterByCellValue
@@ -103,8 +116,8 @@ const configChangesColumn: ColumnDef<ConfigChange>[] = [
     },
     maxSize: 500,
     minSize: 250,
-    cell: ({ getValue }) => {
-      const summary = getValue<string>();
+    Cell: ({ cell }) => {
+      const summary = cell.getValue<string>();
 
       return (
         <FilterByCellValue
@@ -120,17 +133,14 @@ const configChangesColumn: ColumnDef<ConfigChange>[] = [
   {
     header: "Tags",
     accessorKey: "tags",
-    cell: React.memo((props) => (
-      <ConfigListTagsCell {...props} enableFilterByTag />
-    )),
-    aggregatedCell: "",
+    Cell: (props) => <MRTConfigListTagsCell {...props} enableFilterByTag />,
     size: 100
   },
   {
     header: "Created By",
     size: 100,
     enableSorting: false,
-    cell: ({ row }) => {
+    Cell: ({ row }) => {
       const userID = row.original.created_by;
       if (userID) {
         return (
@@ -178,17 +188,15 @@ const configChangesColumn: ColumnDef<ConfigChange>[] = [
 type ConfigChangeTableProps = {
   data: ConfigChange[];
   isLoading?: boolean;
-  className?: string;
-  tableStyle?: React.CSSProperties;
-  pagination?: PaginationOptions;
+  totalRecords: number;
+  numberOfPages: number;
 };
 
 export function ConfigChangeTable({
   data,
   isLoading,
-  className = "table-auto table-fixed",
-  pagination,
-  tableStyle
+  totalRecords,
+  numberOfPages
 }: ConfigChangeTableProps) {
   const [selectedConfigChange, setSelectedConfigChange] =
     useState<ConfigChange>();
@@ -203,26 +211,18 @@ export function ConfigChangeTable({
       }
     );
 
-  const [sortBy, onTableSortByChanged] = useReactTableSortState();
-
   return (
     <>
-      <DataTable
-        className={className}
+      <MRTDataTable
         columns={configChangesColumn}
         data={data}
         isLoading={isLoading}
-        stickyHead
-        isVirtualized={false}
-        tableStyle={tableStyle}
-        pagination={pagination}
-        preferencesKey="config-change-history"
-        savePreferences={false}
         enableServerSideSorting
-        tableSortByState={sortBy}
-        onTableSortByChanged={onTableSortByChanged}
-        handleRowClick={(row) => {
-          setSelectedConfigChange(row.original);
+        totalRowCount={totalRecords}
+        manualPageCount={numberOfPages}
+        enableServerSidePagination
+        onRowClick={(row) => {
+          setSelectedConfigChange(row);
           setModalIsOpen(true);
         }}
       />
diff --git a/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx b/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx
@@ -84,7 +84,7 @@ export function ConfigChangeFilters({
   }, [configType]);
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className="flex w-full flex-col gap-2">
       <FormikFilterForm
         paramsToReset={paramsToReset}
         filterFields={["configTypes", "changeType", "severity", "tags"]}
diff --git a/src/components/Configs/ConfigList/Cells/ConfigListTagsCell.tsx b/src/components/Configs/ConfigList/Cells/ConfigListTagsCell.tsx
@@ -14,7 +14,7 @@ type ConfigListTagsCellProps<T extends Pick<ConfigItem, "tags" | "id">> = Pick<
 };
 
 export default function ConfigListTagsCell<
-  T extends { tags?: Record<string, any>; id: string }
+  T extends { tags?: Record<string, any>; id: string } 
 >({
   row,
   getValue,
diff --git a/src/components/Configs/ConfigList/Cells/MRTConfigListTagsCell.tsx b/src/components/Configs/ConfigList/Cells/MRTConfigListTagsCell.tsx
@@ -0,0 +1,114 @@
+import { MRTCellProps } from "@flanksource-ui/ui/MRTDataTable/MRTCellProps";
+import { Tag } from "@flanksource-ui/ui/Tags/Tag";
+import { useCallback } from "react";
+import { useSearchParams } from "react-router-dom";
+import { ConfigItem } from "../../../../api/types/configs";
+
+type MRTConfigListTagsCellProps<T extends Pick<ConfigItem, "tags" | "id">> =
+  Pick<MRTCellProps<T>, "cell" | "row"> & {
+    hideGroupByView?: boolean;
+    label?: string;
+    enableFilterByTag?: boolean;
+  };
+
+export default function MRTConfigListTagsCell<
+  T extends { tags?: Record<string, any>; id: string }
+>({
+  row,
+  cell,
+  hideGroupByView = false,
+  enableFilterByTag = false
+}: MRTConfigListTagsCellProps<T>): JSX.Element | null {
+  const [params, setParams] = useSearchParams();
+
+  const tagMap = cell.getValue<ConfigItem["tags"]>() || {};
+  const tagKeys = Object.keys(tagMap)
+    .sort()
+    .filter((key) => key !== "toString");
+
+  const onFilterByTag = useCallback(
+    (
+      e: React.MouseEvent<HTMLButtonElement>,
+      tag: {
+        key: string;
+        value: string;
+      },
+      action: "include" | "exclude"
+    ) => {
+      if (!enableFilterByTag) {
+        return;
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      // Get the current tags from the URL
+      const currentTags = params.get("tags");
+      const currentTagsArray = (
+        currentTags ? currentTags.split(",") : []
+      ).filter((value) => {
+        const tagKey = value.split("____")[0];
+        const tagAction = value.split(":")[1] === "1" ? "include" : "exclude";
+
+        if (tagKey === tag.key && tagAction !== action) {
+          return false;
+        }
+        return true;
+      });
+
+      // Append the new value, but for same tags, don't allow including and excluding at the same time
+      const updatedValue = currentTagsArray
+        .concat(`${tag.key}____${tag.value}:${action === "include" ? 1 : -1}`)
+        .filter((value, index, self) => self.indexOf(value) === index)
+        .join(",");
+
+      // Update the URL
+      params.set("tags", updatedValue);
+      setParams(params);
+    },
+    [enableFilterByTag, params, setParams]
+  );
+
+  const groupByProp = decodeURIComponent(params.get("groupByProp") ?? "");
+
+  if (tagKeys.length === 0) {
+    return null;
+  }
+
+  if (!hideGroupByView && groupByProp) {
+    if (!tagMap[groupByProp]) {
+      return null;
+    }
+
+    return (
+      <div className="flex w-full max-w-full flex-wrap space-y-1 pl-1 font-mono">
+        <div
+          className="mr-1 max-w-full overflow-hidden text-ellipsis rounded-md border border-gray-300 bg-gray-200 px-1 py-0.75 text-xs font-semibold text-gray-600"
+          key={groupByProp}
+        >
+          {groupByProp}:{" "}
+          <span className="font-light">{tagMap[groupByProp]}</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-wrap gap-1">
+      {Object.entries(tagMap).map(([key, value]) => (
+        <Tag
+          tag={{
+            key,
+            value
+          }}
+          id={row.original.id}
+          key={value}
+          variant="gray"
+          onFilterByTag={enableFilterByTag ? onFilterByTag : undefined}
+        >
+          {value}
+        </Tag>
+      ))}
+    </div>
+  );
+}
diff --git a/src/pages/config/ConfigChangesPage.tsx b/src/pages/config/ConfigChangesPage.tsx
@@ -8,24 +8,18 @@ import {
   BreadcrumbNav,
   BreadcrumbRoot
 } from "@flanksource-ui/ui/BreadcrumbNav";
-import { PaginationOptions } from "@flanksource-ui/ui/DataTable";
 import { Head } from "@flanksource-ui/ui/Head";
 import { SearchLayout } from "@flanksource-ui/ui/Layout/SearchLayout";
 import { refreshButtonClickedTrigger } from "@flanksource-ui/ui/SlidingSideBar/SlidingSideBar";
 import { useAtom } from "jotai";
-import { useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
 
 export function ConfigChangesPage() {
   const [, setRefreshButtonClickedTrigger] = useAtom(
     refreshButtonClickedTrigger
   );
-  const [params, setParams] = useSearchParams({
-    sortBy: "created_at",
-    sortDirection: "desc"
-  });
+  const [params] = useSearchParams({});
 
-  const page = params.get("page") ?? "1";
   const pageSize = params.get("pageSize") ?? "200";
 
   const { data, isLoading, error, isRefetching, refetch } =
@@ -45,30 +39,6 @@ export function ConfigChangesPage() {
   const totalChanges = data?.total ?? 0;
   const totalChangesPages = Math.ceil(totalChanges / parseInt(pageSize));
 
-  const pagination = useMemo(() => {
-    const pagination: PaginationOptions = {
-      setPagination: (updater) => {
-        const newParams =
-          typeof updater === "function"
-            ? updater({
-                pageIndex: parseInt(page) - 1,
-                pageSize: parseInt(pageSize)
-              })
-            : updater;
-        params.set("page", (newParams.pageIndex + 1).toString());
-        params.set("pageSize", newParams.pageSize.toString());
-        setParams(params);
-      },
-      pageIndex: parseInt(page) - 1,
-      pageSize: parseInt(pageSize),
-      pageCount: totalChangesPages,
-      remote: true,
-      enable: true,
-      loading: isLoading
-    };
-    return pagination;
-  }, [page, pageSize, totalChangesPages, isLoading, params, setParams]);
-
   const errorMessage =
     typeof error === "string"
       ? error
@@ -98,7 +68,7 @@ export function ConfigChangesPage() {
           refetch();
         }}
         loading={isLoading || isRefetching}
-        contentClass="p-0 h-full"
+        contentClass="p-0 h-full flex flex-col flex-1"
       >
         <ConfigPageTabs activeTab="Changes">
           {error ? (
@@ -109,7 +79,8 @@ export function ConfigChangesPage() {
               <ConfigChangeTable
                 data={changes}
                 isLoading={isLoading}
-                pagination={pagination}
+                totalRecords={totalChanges}
+                numberOfPages={totalChangesPages}
               />
             </>
           )}
diff --git a/src/pages/config/details/ConfigDetailsChangesPage.tsx b/src/pages/config/details/ConfigDetailsChangesPage.tsx
@@ -74,13 +74,14 @@ export function ConfigDetailsChangesPage() {
       activeTabName="Changes"
     >
       <div className={`flex h-full flex-1 flex-col overflow-y-auto`}>
-        <div className="flex flex-1 flex-col items-start gap-2 overflow-y-auto">
+        <div className="flex w-full flex-1 flex-col items-start gap-2 overflow-y-auto">
           <ConfigRelatedChangesFilters paramsToReset={["page"]} />
-          <div className="flex flex-1 flex-col overflow-y-auto">
+          <div className="flex w-full flex-1 flex-col overflow-y-auto">
             <ConfigChangeTable
               data={changes}
               isLoading={isLoading}
-              pagination={pagination}
+              numberOfPages={totalChangesPages}
+              totalRecords={totalChanges}
             />
           </div>
         </div>
