feat: switch to mantine table with paging

* feat: add support for pagination for configs list

* feat: enable grouping and fix issue around expanded

fix: fix expand initial state issues

* fix: improve mrt by disabling dragging and dropping columns and hiding the
column menu button

fix: prevent mrt from dragging and drop columns

chore: improve table

* refactor: switch to MRT for Config Insights Table

Fixes #2285

* refactor: use mantime react table for config changes

Fixes #2285

fix: fix issue with config changes  table

* refactor: for playbooks, use mantime react table

Fixes #2285

fix: fix props issue for playbooks

fix: fix issues with playbook runs

* refactor: use MRT for config relationships

Fixes #2285

fix: typescript error

refactor: move to MRT for tables for configs

Fixes  #2285

fix: fix empty text for default grouping value

* fix: fix issue affecting sorting in MRT  tables

* fix: fix issue with config tables

---------

Co-authored-by: Moshe Immerman <moshe@flanksource.com>

Author: mainawycliffe

src/api/query-hooks/index.ts

@@ -19,6 +19,7 @@ import {
 import { getHypothesisResponse } from "../services/hypothesis";
 import { getIncident } from "../services/incident";
 import { LogsResponse, SearchLogsPayload, searchLogs } from "../services/logs";
+import { getPagingParams } from "../services/notifications";
 import {
   getComponentTeams,
   getHealthCheckSpecByID,
@@ -160,6 +161,8 @@ type ConfigListFilterQueryOptions = {
   labels?: string;
   health?: string;
   status?: string;
+  pageIndex?: number;
+  pageSize?: number;
 };
 
 export function prepareConfigListQuery({
@@ -172,7 +175,9 @@ export function prepareConfigListQuery({
   includeAgents = false,
   labels,
   health,
-  status
+  status,
+  pageIndex,
+  pageSize
 }: ConfigListFilterQueryOptions) {
   let query =
     "select=id,type,config_class,status,health,labels,name,tags,created_at,updated_at,deleted_at,cost_per_minute,cost_total_1d,cost_total_7d,cost_total_30d,changes,analysis";
@@ -219,6 +224,12 @@ export function prepareConfigListQuery({
   if (hideDeletedConfigs) {
     query = `${query}&deleted_at=is.null`;
   }
+  const pagingParams = getPagingParams({ pageIndex, pageSize });
+
+  if (pagingParams) {
+    query = `${query}${pagingParams}`;
+  }
+
   return query;
 }
 

src/api/query-hooks/settingsResourcesHooks.tsx

@@ -1,3 +1,4 @@
+import useReactTableSortState from "@flanksource-ui/ui/DataTable/Hooks/useReactTableSortState";
 import { useQuery } from "@tanstack/react-query";
 import { SchemaApi } from "../../components/SchemaResourcePage/resourceTypes";
 import {
@@ -7,10 +8,12 @@ import {
 } from "../schemaResources";
 
 export function useGetSettingsAllQuery(resourceInfo: SchemaApi) {
+  const [sortState] = useReactTableSortState();
+
   return useQuery<SchemaResourceWithJobStatus[], Error>(
-    ["settings", "all", resourceInfo],
+    ["settings", "all", resourceInfo, sortState],
     async () => {
-      const res = await getAll(resourceInfo);
+      const res = await getAll(resourceInfo, sortState);
       if (res.data.length === 0) {
         return [];
       }

src/api/query-hooks/useAllConfigsQuery.ts

@@ -1,4 +1,5 @@
 import { useHideDeletedConfigs } from "@flanksource-ui/components/Configs/ConfigListToggledDeletedItems/ConfigListToggledDeletedItems";
+import useReactTablePaginationState from "@flanksource-ui/ui/DataTable/Hooks/useReactTablePaginationState";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
@@ -24,6 +25,7 @@ export const useAllConfigsQuery = ({
   const labels = searchParams.get("labels") ?? undefined;
   const status = searchParams.get("status") ?? undefined;
   const health = searchParams.get("health") ?? undefined;
+  const { pageIndex, pageSize } = useReactTablePaginationState();
 
   const query = useMemo(
     () =>
@@ -36,7 +38,9 @@ export const useAllConfigsQuery = ({
         includeAgents: true,
         labels: labels,
         health,
-        status
+        status,
+        pageIndex,
+        pageSize
       }),
     [
       search,
@@ -46,7 +50,9 @@ export const useAllConfigsQuery = ({
       hideDeletedConfigs,
       labels,
       health,
-      status
+      status,
+      pageIndex,
+      pageSize
     ]
   );
 
@@ -61,7 +67,9 @@ export const useAllConfigsQuery = ({
       true,
       labels,
       health,
-      status
+      status,
+      pageIndex,
+      pageSize
     ],
     () => {
       return getAllConfigsMatchingQuery(query);

src/api/query-hooks/useFetchConfigInsights.tsx

@@ -0,0 +1,42 @@
+import { useSearchParams } from "react-router-dom";
+import { useConfigInsightsQuery } from "./useConfigAnalysisQuery";
+
+export default function useFetchConfigInsights(
+  setIsLoading: (isLoading: boolean) => void,
+  configId?: string
+) {
+  const [params] = useSearchParams();
+
+  const status = params.get("status") ?? undefined;
+  const severity = params.get("severity") ?? undefined;
+  const type = params.get("type") ?? undefined;
+  const configType = params.get("configType") ?? undefined;
+  const analyzer = params.get("analyzer") ?? undefined;
+  const component = params.get("component") ?? undefined;
+  const pageSize = +(params.get("pageSize") ?? 50);
+  const pageIndex = +(params.get("pageIndex") ?? 0);
+
+  return useConfigInsightsQuery(
+    {
+      status,
+      severity: severity?.toLowerCase(),
+      type,
+      analyzer,
+      component,
+      configId,
+      configType
+    },
+    {
+      sortBy: params.get("sortBy") ?? undefined,
+      sortOrder: params.get("sortOrder") as "asc" | "desc" | undefined
+    },
+    {
+      pageIndex,
+      pageSize
+    },
+    {
+      keepPreviousData: true,
+      onSuccess: () => setIsLoading(false)
+    }
+  );
+}

src/api/schemaResources.ts

@@ -9,6 +9,7 @@ import {
   SchemaApi,
   SchemaBackends
 } from "@flanksource-ui/components/SchemaResourcePage/resourceTypes";
+import { SortingState } from "@tanstack/react-table";
 import { AxiosResponse } from "axios";
 import { AVATAR_INFO } from "../constants";
 import { CanaryCheckerDB, ConfigDB, IncidentCommander } from "./axios";
@@ -85,10 +86,10 @@ const getTableName = (table: string) => {
   }
 };
 
-export const getAll = ({
-  table,
-  api
-}: SchemaApi): Promise<AxiosResponse<SchemaResourceWithJobStatus[]>> => {
+export const getAll = (
+  { table, api }: SchemaApi,
+  sort?: SortingState
+): Promise<AxiosResponse<SchemaResourceWithJobStatus[]>> => {
   const endpoint = getBackend(api);
   if (endpoint) {
     const tableName = getTableName(table);
@@ -100,8 +101,14 @@ export const getAll = ({
         table === "topologies" ? `,agent:agent_id(id,name,description)` : ""
       }`
     );
+
+    if (sort && sort?.length > 0) {
+      url.set("order", `${sort[0].id}.${sort[0].desc ? "desc" : "asc"}`);
+    } else {
+      url.set("order", "created_at.desc");
+    }
+
     url.set("deleted_at", "is.null");
-    url.set("order", "created_at.desc");
     url.set("limit", "100");
     return endpoint.get<SchemaResourceWithJobStatus[]>(
       `/${tableName}?${url.toString()}`
@@ -174,14 +181,20 @@ export async function getEventQueueStatus() {
 
 export async function getIntegrationsWithJobStatus(
   pageIndex: number,
-  pageSize: number
+  pageSize: number,
+  sortBy?: SortingState
 ) {
   const pagingParams = `&limit=${pageSize}&offset=${pageIndex * pageSize}`;
 
+  const sortParams =
+    sortBy && sortBy.length > 0
+      ? `&order=${sortBy[0].id}.${sortBy[0].desc ? "desc" : "asc"}`
+      : "";
+
   const res = await resolvePostGrestRequestWithPagination(
     CanaryCheckerDB.get<SchemaResourceWithJobStatus[] | null>(
       // todo: add back created_by
-      `integrations_with_status?order=created_at.desc&select=*&deleted_at=is.null${pagingParams}`,
+      `integrations_with_status?order=created_at.desc&select=*&deleted_at=is.null${pagingParams}${sortParams}`,
       {
         headers: {
           Prefer: "count=exact"

src/api/services/configs.ts

@@ -29,7 +29,13 @@ export const getAllConfigsMatchingQuery = (query: string) => {
   if (query) {
     url = `${url}&${query}`;
   }
-  return resolvePostGrestRequestWithPagination<ConfigItem[]>(ConfigDB.get(url));
+  return resolvePostGrestRequestWithPagination<ConfigItem[]>(
+    ConfigDB.get(url, {
+      headers: {
+        Prefer: "count=exact"
+      }
+    })
+  );
 };
 
 export const getAllConfigsForSearchPurpose = async () => {

src/api/services/playbooks.ts

@@ -1,5 +1,6 @@
 import { SubmitPlaybookRunFormValues } from "@flanksource-ui/components/Playbooks/Runs/Submit/SubmitPlaybookRunForm";
 import { AVATAR_INFO } from "@flanksource-ui/constants";
+import { SortingState } from "@tanstack/react-table";
 import { ConfigDB, IncidentCommander, PlaybookAPI } from "../axios";
 import { GetPlaybooksToRunParams } from "../query-hooks/playbooks";
 import { resolvePostGrestRequestWithPagination } from "../resolve";
@@ -150,7 +151,8 @@ export async function getPlaybookRuns({
   playbookId,
   status,
   starts,
-  ends
+  ends,
+  sort
 }: {
   componentId?: string;
   configId?: string;
@@ -160,6 +162,7 @@ export async function getPlaybookRuns({
   status?: string;
   starts?: string;
   ends?: string;
+  sort?: SortingState;
 }) {
   const searchParams = new URLSearchParams();
 
@@ -202,6 +205,11 @@ export async function getPlaybookRuns({
 
   const queryString = searchParams.toString();
 
+  const sortParams =
+    sort && sort.length > 0
+      ? `&order=${sort[0].id}.${sort[0].desc ? "desc" : "asc"}`
+      : "";
+
   const res = await resolvePostGrestRequestWithPagination(
     ConfigDB.get<PlaybookRun[] | null>(`/playbook_runs?${queryString}`, {
       headers: {