fix: fix sorting and paging not working on config changes

chore: default to created at when no sorting is set
flanksource · Oct 22, 2024 · c8d1724 · c8d1724
1 parent 20a659b
commit c8d1724
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 21 deletions.
diff --git a/src/api/query-hooks/useConfigChangesHooks.ts b/src/api/query-hooks/useConfigChangesHooks.ts
@@ -1,6 +1,8 @@
 import { configChangesDefaultDateFilter } from "@flanksource-ui/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter";
 import { useHideDeletedConfigChanges } from "@flanksource-ui/components/Configs/Changes/ConfigsRelatedChanges/FilterBar/ConfigChangesToggledDeletedItems";
 import { useConfigChangesArbitraryFilters } from "@flanksource-ui/hooks/useConfigChangesArbitraryFilters";
+import useReactTablePaginationState from "@flanksource-ui/ui/DataTable/Hooks/useReactTablePaginationState";
+import useReactTableSortState from "@flanksource-ui/ui/DataTable/Hooks/useReactTableSortState";
 import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
 import { UseQueryOptions, useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
@@ -50,11 +52,9 @@ export function useGetAllConfigsChangesQuery(
   const configType = params.get("configType") ?? undefined;
   const from = timeRangeValue?.from ?? undefined;
   const to = timeRangeValue?.to ?? undefined;
-  const sortBy = params.get("sortBy") ?? undefined;
-  const sortDirection = params.get("sortDirection") ?? "desc";
+  const [sortBy] = useReactTableSortState();
   const configTypes = params.get("configTypes") ?? "all";
-  const page = params.get("page") ?? "1";
-  const pageSize = params.get("pageSize") ?? "200";
+  const { pageSize, pageIndex } = useReactTablePaginationState();
 
   const tags = useConfigChangesTagsFilter();
 
@@ -68,9 +68,9 @@ export function useGetAllConfigsChangesQuery(
     to,
     configTypes,
     configType,
-    sortBy,
-    sortOrder: sortDirection === "desc" ? "desc" : "asc",
-    page: page,
+    sortBy: sortBy[0]?.id,
+    sortOrder: sortBy[0]?.desc ? "desc" : "asc",
+    pageIndex: pageIndex,
     pageSize: pageSize,
     arbitraryFilter,
     tags
@@ -102,11 +102,9 @@ export function useGetConfigChangesByIDQuery(
   const severity = params.get("severity") ?? undefined;
   const from = timeRangeValue?.from ?? undefined;
   const to = timeRangeValue?.to ?? undefined;
-  const sortBy = params.get("sortBy") ?? undefined;
-  const sortDirection = params.get("sortDirection") ?? "desc";
   const configTypes = params.get("configTypes") ?? "all";
-  const page = params.get("page") ?? "1";
-  const pageSize = params.get("pageSize") ?? "200";
+  const { pageIndex, pageSize } = useReactTablePaginationState();
+  const [sortBy] = useReactTableSortState();
   const upstream = params.get("upstream") === "true";
   const downstream = params.get("downstream") === "true";
   const all = upstream && downstream;
@@ -137,10 +135,10 @@ export function useGetConfigChangesByIDQuery(
     from,
     to,
     configTypes,
-    sortBy,
-    sortOrder: sortDirection === "desc" ? "desc" : "asc",
-    page: page,
-    pageSize: pageSize,
+    sortBy: sortBy[0]?.id,
+    sortOrder: sortBy[0]?.desc ? "desc" : "asc",
+    pageSize,
+    pageIndex,
     tags,
     arbitraryFilter
   } satisfies GetConfigsRelatedChangesParams;

diff --git a/src/api/services/configs.ts b/src/api/services/configs.ts
@@ -216,8 +216,8 @@ export type GetConfigsRelatedChangesParams = {
   to?: string;
   configTypes?: string;
   configType?: string;
-  page?: string;
-  pageSize?: string;
+  pageSize?: number | string;
+  pageIndex?: number | string;
   sortBy?: string;
   sortOrder?: "asc" | "desc";
   arbitraryFilter?: Record<string, string>;
@@ -238,7 +238,7 @@ export async function getConfigsChanges({
   to,
   configTypes,
   configType,
-  page,
+  pageIndex,
   pageSize,
   sortBy,
   sortOrder,
@@ -289,14 +289,17 @@ export async function getConfigsChanges({
   if (severity) {
     requestData.set("severity", severity);
   }
-  if (page && pageSize) {
-    requestData.set("page", parseInt(page));
-    requestData.set("page_size", parseInt(pageSize));
+  if (pageIndex && pageSize) {
+    requestData.set("page", parseInt(pageIndex.toString()) + 1);
+    requestData.set("page_size", pageSize);
   }
   if (sortBy) {
     // for descending order, we need to add a "-" before the sortBy field
     requestData.set("sort_by", `${sortOrder === "desc" ? "-" : ""}${sortBy}`);
+  } else {
+    requestData.set("sort_by", "-created_at");
   }
+
   if (tags) {
     const tagList = Object.entries(
       tags.reduce(