refactor: for playbooks, use mantime react table

Fixes #2285

fix: fix props issue for playbooks

fix: fix issues with playbook runs

Author: mainawycliffe

src/components/Configs/ConfigDetailsTabs.tsx

@@ -70,7 +70,7 @@ export function ConfigDetailsTabs({
         contentClass="p-0 h-full overflow-y-hidden"
       >
         <div className={`flex h-full flex-row`}>
-          <div className="flex flex-1 flex-col">
+          <div className="flex flex-1 flex-col overflow-x-auto">
             <TabbedLinks
               activeTabName={activeTabName}
               tabLinks={configTabList}

src/components/Playbooks/Runs/PlaybookRunsList.tsx

@@ -4,29 +4,29 @@ import {
 } from "@flanksource-ui/api/types/playbooks";
 import { User } from "@flanksource-ui/api/types/users";
 import { Avatar } from "@flanksource-ui/ui/Avatar";
-import { DataTable, PaginationOptions } from "@flanksource-ui/ui/DataTable";
-import { DateCell } from "@flanksource-ui/ui/DataTable/Cells/DateCells";
 import FormatDuration from "@flanksource-ui/ui/Dates/FormatDuration";
 import { ConfigIcon } from "@flanksource-ui/ui/Icons/ConfigIcon";
 import { Icon } from "@flanksource-ui/ui/Icons/Icon";
-import { ColumnDef } from "@tanstack/react-table";
+import { MRTDateCell } from "@flanksource-ui/ui/MRTDataTable/Cells/MRTDateCells";
+import MRTDataTable from "@flanksource-ui/ui/MRTDataTable/MRTDataTable";
+import { MRT_ColumnDef } from "mantine-react-table";
 import { useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import PlaybookSpecIcon from "../Settings/PlaybookSpecIcon";
 import { PlaybookStatusDescription } from "./PlaybookRunsStatus";
 
-const playbookRunsTableColumns: ColumnDef<PlaybookRun>[] = [
+const playbookRunsTableColumns: MRT_ColumnDef<PlaybookRun>[] = [
   {
     header: "Name",
     accessorKey: "name",
-    cell: ({ row }) => {
+    Cell: ({ row }) => {
       return <PlaybookSpecIcon playbook={row.original.playbooks!} showLabel />;
     },
     size: 400
   },
   {
     header: "Resource",
-    cell: ({ row }) => {
+    Cell: ({ row }) => {
       const component = row.original.component;
       const componentId = row.original.component_id;
       const configId = row.original.config_id;
@@ -65,21 +65,21 @@ const playbookRunsTableColumns: ColumnDef<PlaybookRun>[] = [
   {
     header: "Status",
     accessorKey: "status",
-    cell: ({ getValue }) => {
-      const status = getValue<PlaybookRunStatus>();
+    Cell: ({ cell }) => {
+      const status = cell.getValue<PlaybookRunStatus>();
       return <PlaybookStatusDescription status={status} />;
     }
   },
   {
     header: "Date",
     accessorKey: "start_time",
-    cell: DateCell,
+    Cell: MRTDateCell,
     sortingFn: "datetime"
   },
   {
     header: "Duration",
     accessorKey: "duration",
-    cell: ({ row }) => {
+    Cell: ({ row }) => {
       return (
         <FormatDuration
           startTime={row.original.start_time}
@@ -91,14 +91,14 @@ const playbookRunsTableColumns: ColumnDef<PlaybookRun>[] = [
   {
     header: "Created At",
     accessorKey: "created_at",
-    cell: DateCell,
+    Cell: MRTDateCell,
     sortingFn: "datetime"
   },
   {
     header: "Created By",
     accessorKey: "created_by",
-    cell: ({ getValue }) => {
-      const user = getValue<User>();
+    Cell: ({ cell }) => {
+      const user = cell.getValue<User>();
       return <Avatar user={user} circular />;
     }
   }
@@ -107,14 +107,15 @@ const playbookRunsTableColumns: ColumnDef<PlaybookRun>[] = [
 type Props = {
   data: PlaybookRun[];
   isLoading?: boolean;
-  pagination?: PaginationOptions;
-} & Omit<React.HTMLProps<HTMLDivElement>, "data">;
+  numberOfPages?: number;
+  totalRecords?: number;
+};
 
 export default function PlaybookRunsTable({
   data,
   isLoading,
-  className,
-  ...rest
+  numberOfPages,
+  totalRecords
 }: Props) {
   const navigate = useNavigate();
 
@@ -126,17 +127,16 @@ export default function PlaybookRunsTable({
   );
 
   return (
-    <div className="flex flex-1 flex-col overflow-y-hidden" {...rest}>
-      <DataTable
-        stickyHead
+    <div className="flex flex-1 flex-col overflow-y-hidden">
+      <MRTDataTable
         columns={playbookRunsTableColumns}
         data={data}
-        tableStyle={{ borderSpacing: "0" }}
         isLoading={isLoading}
-        preferencesKey="connections-list"
-        savePreferences={false}
-        handleRowClick={(row) => onRowClick(row.original)}
-        className="overflow-x-hidden"
+        onRowClick={(row) => onRowClick(row)}
+        manualPageCount={numberOfPages}
+        totalRowCount={totalRecords}
+        enableServerSidePagination
+        enableServerSideSorting
       />
     </div>
   );

src/pages/config/details/ConfigDetailsPlaybooks.tsx

@@ -1,17 +1,14 @@
-import { useQuery } from "@tanstack/react-query";
-import { useMemo, useState } from "react";
-import { useParams } from "react-router-dom";
 import { getPlaybookRuns } from "@flanksource-ui/api/services/playbooks";
 import { ConfigDetailsTabs } from "@flanksource-ui/components/Configs/ConfigDetailsTabs";
 import PlaybookRunsTable from "@flanksource-ui/components/Playbooks/Runs/PlaybookRunsList";
+import useReactTablePaginationState from "@flanksource-ui/ui/DataTable/Hooks/useReactTablePaginationState";
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "react-router-dom";
 
 export function ConfigDetailsPlaybooksPage() {
   const { id } = useParams();
 
-  const [{ pageIndex, pageSize }, setPageState] = useState({
-    pageIndex: 0,
-    pageSize: 200
-  });
+  const { pageIndex, pageSize } = useReactTablePaginationState();
 
   const { data, isLoading, refetch } = useQuery({
     queryKey: ["playbookRuns", { pageIndex, pageSize, configId: id }],
@@ -27,31 +24,22 @@ export function ConfigDetailsPlaybooksPage() {
 
   const totalEntries = data?.totalEntries;
 
-  const pagination = useMemo(() => {
-    return {
-      setPagination: setPageState,
-      pageIndex,
-      pageSize,
-      pageCount: totalEntries ? Math.ceil(totalEntries / pageSize) : -1,
-      remote: true,
-      enable: true,
-      loading: isLoading
-    };
-  }, [pageIndex, pageSize, totalEntries, isLoading]);
-
   return (
     <ConfigDetailsTabs
       pageTitlePrefix={"Config Playbooks"}
       isLoading={isLoading}
       refetch={refetch}
       activeTabName="Playbooks"
     >
-      <div className={`flex h-full flex-1 flex-col space-y-2`}>
-        <div className="flex h-full flex-col overflow-y-hidden">
+      <div className={`flex h-full flex-1 flex-col space-y-2 overflow-auto`}>
+        <div className="flex h-full flex-col overflow-x-auto overflow-y-hidden">
           <PlaybookRunsTable
             data={playbookRuns ?? []}
             isLoading={isLoading}
-            pagination={pagination}
+            numberOfPages={
+              totalEntries ? Math.ceil(totalEntries / pageSize) : -1
+            }
+            totalRecords={totalEntries ?? 0}
           />
         </div>
       </div>

src/pages/playbooks/PlaybookRunsPage.tsx

@@ -11,12 +11,13 @@ import {
   BreadcrumbNav,
   BreadcrumbRoot
 } from "@flanksource-ui/ui/BreadcrumbNav";
+import useReactTablePaginationState from "@flanksource-ui/ui/DataTable/Hooks/useReactTablePaginationState";
 import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
 import { Head } from "@flanksource-ui/ui/Head";
 import { SearchLayout } from "@flanksource-ui/ui/Layout/SearchLayout";
 import TabbedLinks from "@flanksource-ui/ui/Tabs/TabbedLinks";
 import { useQuery } from "@tanstack/react-query";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { FaHome } from "react-icons/fa";
 import { useSearchParams } from "react-router-dom";
 import { useGetPlaybookSpecsDetails } from "../../api/query-hooks/playbooks";
@@ -31,12 +32,7 @@ export default function PlaybookRunsPage() {
   const { timeRangeAbsoluteValue: timeRange } = useTimeRangeParams(
     playbookRunsDefaultDateFilter
   );
-
-  const [{ pageIndex, pageSize }, setPageState] = useState({
-    pageIndex: 0,
-    pageSize: 150
-  });
-
+  const { pageIndex, pageSize } = useReactTablePaginationState();
   const {
     data,
     isLoading: isLoadingPlaybookRuns,
@@ -68,18 +64,6 @@ export default function PlaybookRunsPage() {
   const totalEntries = data?.totalEntries;
   const pageCount = totalEntries ? Math.ceil(totalEntries / pageSize) : -1;
 
-  const pagination = useMemo(() => {
-    return {
-      setPagination: setPageState,
-      pageIndex,
-      pageSize,
-      pageCount,
-      remote: true,
-      enable: true,
-      loading: isLoading
-    };
-  }, [setPageState, pageIndex, pageSize, pageCount, isLoading]);
-
   return (
     <>
       <Head
@@ -125,7 +109,7 @@ export default function PlaybookRunsPage() {
         contentClass="flex flex-col p-0 h-full overflow-y-hidden"
       >
         <TabbedLinks tabLinks={playbookRunsPageTabs}>
-          <div className={`mx-auto flex h-full max-w-screen-xl flex-col py-4`}>
+          <div className={`mx-auto flex h-full flex-col py-4`}>
             <div className="flex w-full flex-row justify-between gap-2 py-2">
               <PlaybookRunsFilterBar
                 isLoading={isLoading}
@@ -138,7 +122,8 @@ export default function PlaybookRunsPage() {
               <PlaybookRunsTable
                 data={playbookRuns ?? []}
                 isLoading={isLoadingPlaybookRuns}
-                pagination={pagination}
+                numberOfPages={pageCount}
+                totalRecords={totalEntries ?? 0}
               />
             </div>
           </div>