fix: fix issue with table crashing due to server side pagination

Author: mainawycliffe

src/api/services/notifications.ts

@@ -26,7 +26,9 @@ export function getPagingParams({
 
 export const getNotificationsSummary = async ({
   pageIndex,
-  pageSize
+  pageSize,
+  sortBy,
+  sortOrder
 }: NotificationQueryFilterOptions) => {
   const pagingParams = getPagingParams({ pageIndex, pageSize });
 
@@ -37,9 +39,13 @@ export const getNotificationsSummary = async ({
     `created_by(${AVATAR_INFO})`
   ].join(",");
 
+  const sortParams = sortBy
+    ? `&order=${sortBy}.${sortOrder}`
+    : "&order=created_at.desc";
+
   return resolvePostGrestRequestWithPagination(
     IncidentCommander.get<NotificationRules[] | null>(
-      `/notifications_summary?select=${selectColumns}&order=created_at.desc${pagingParams}`,
+      `/notifications_summary?select=${selectColumns}${sortParams}${pagingParams}`,
       {
         headers: {
           Prefer: "count=exact"
@@ -131,11 +137,15 @@ export const getNotificationSendHistoryById = async (id: string) => {
 export type NotificationQueryFilterOptions = {
   pageIndex: number;
   pageSize: number;
+  sortBy?: string;
+  sortOrder?: "asc" | "desc";
 };
 
 export const getNotificationSilences = async ({
   pageIndex,
-  pageSize
+  pageSize,
+  sortBy,
+  sortOrder
 }: NotificationQueryFilterOptions) => {
   const pagingParams = getPagingParams({ pageIndex, pageSize });
 
@@ -147,9 +157,11 @@ export const getNotificationSilences = async ({
     `createdBy:created_by(${AVATAR_INFO})`
   ].join(",");
 
+  const sortParams = sortBy ? `&order=${sortBy}.${sortOrder}` : "";
+
   return resolvePostGrestRequestWithPagination(
     IncidentCommander.get<NotificationSilenceItemApiResponse[] | null>(
-      `/notification_silences?select=${selectColumns}&order=created_at.desc${pagingParams}&deleted_at=is.null`,
+      `/notification_silences?select=${selectColumns}&order=created_at.desc${pagingParams}&deleted_at=is.null&${sortParams}`,
       {
         headers: {
           Prefer: "count=exact"

src/components/Agents/List/AgentsTable.tsx

@@ -35,6 +35,7 @@ export default function AgentsTable({
           searchParams.set("id", agent.id!);
           setSearchParams(searchParams);
         }}
+        enableServerSideSorting
       />
       {agentId && (
         <AgentForm

src/components/Notifications/Rules/NotificationsRulesTable.tsx

@@ -60,13 +60,14 @@ export default function NotificationsRulesTable({
         </Modal>
       )}
       <MRTDataTable
-        data={notifications}
+        data={notifications ?? []}
         columns={notificationsRulesTableColumns}
         isLoading={isLoading}
         onRowClick={onSelectNotification}
         enableServerSidePagination
         manualPageCount={pageCount}
         totalRowCount={totalRecordCount}
+        enableServerSideSorting
       />
       {selectedNotificationId && (
         <EditNotificationRules

src/components/Notifications/SilenceNotificationsList.tsx

@@ -224,8 +224,9 @@ export default function SilenceNotificationsList({
         }}
         isLoading={isLoading}
         manualPageCount={pageCount}
-        enableServerSidePagination={true}
+        enableServerSidePagination
         totalRowCount={recordCount}
+        enableServerSideSorting
       />
       {selectedNotificationSilence && (
         <EditNotificationSilenceModal

src/pages/Settings/notifications/NotificationsRulesPage.tsx

@@ -1,5 +1,6 @@
 import { NotificationRules } from "@flanksource-ui/api/types/notifications";
 import useReactTablePaginationState from "@flanksource-ui/ui/DataTable/Hooks/useReactTablePaginationState";
+import useReactTableSortState from "@flanksource-ui/ui/DataTable/Hooks/useReactTableSortState";
 import { useState } from "react";
 import {
   useCreateNotification,
@@ -14,12 +15,15 @@ export default function NotificationRulesPage() {
   const [isOpen, setIsOpen] = useState(false);
 
   const { pageIndex, pageSize } = useReactTablePaginationState();
+  const [sortState] = useReactTableSortState();
 
   const { data, isLoading, refetch, isRefetching } =
     useNotificationsSummaryQuery(
       {
         pageIndex,
-        pageSize
+        pageSize,
+        sortBy: sortState[0]?.id,
+        sortOrder: sortState[0]?.desc ? "desc" : "asc"
       },
       {
         keepPreviousData: true

src/pages/Settings/notifications/NotificationsSilencedPage.tsx

@@ -1,14 +1,24 @@
 import { getNotificationSilences } from "@flanksource-ui/api/services/notifications";
 import SilenceNotificationsList from "@flanksource-ui/components/Notifications/SilenceNotificationsList";
 import useReactTablePaginationState from "@flanksource-ui/ui/DataTable/Hooks/useReactTablePaginationState";
+import useReactTableSortState from "@flanksource-ui/ui/DataTable/Hooks/useReactTableSortState";
 import { useQuery } from "@tanstack/react-query";
 import NotificationTabsLinks from "../../../components/Notifications/NotificationTabsLinks";
 
 export default function NotificationsSilencedPage() {
   const { pageIndex, pageSize } = useReactTablePaginationState();
+  const [sortState] = useReactTableSortState();
 
   const { data, isLoading, refetch, isRefetching } = useQuery({
-    queryKey: ["notification_silences", { pageIndex, pageSize }],
+    queryKey: [
+      "notification_silences",
+      {
+        pageIndex,
+        pageSize,
+        sortBy: sortState[0]?.id,
+        sortOrder: sortState[0]?.desc ? "desc" : "asc"
+      }
+    ],
     queryFn: () => getNotificationSilences({ pageIndex, pageSize }),
     keepPreviousData: true
   });