Merge branch 'main' into 2285-Catalog-Detail-Page---Add-pagination

Author: moshloop

next.config.js

@@ -27,6 +27,11 @@ const config = {
         source: "/settings/notifications/:path*",
         destination: "/notifications/:path*",
         permanent: true
+      },
+      {
+        source: "/notifications/silence",
+        destination: "/notifications/silences/add",
+        permanent: true
       }
     ];
   },

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@flanksource/flanksource-ui",
-  "version": "1.0.796",
+  "version": "1.0.799",
   "private": false,
   "files": [
     "build",

package.json

@@ -164,39 +164,58 @@ export async function getPlaybookRuns({
   ends?: string;
   sort?: SortingState;
 }) {
-  const componentParamString = componentId
-    ? `&component_id=eq.${componentId}`
-    : "";
+  const searchParams = new URLSearchParams();
 
-  const configParamString = configId ? `&config_id=eq.${configId}` : "";
+  if (componentId) {
+    searchParams.append("component_id", `eq.${componentId}`);
+  }
 
-  const statusParamString = status ? `&status=eq.${status}` : "";
+  if (configId) {
+    searchParams.append("config_id", `eq.${configId}`);
+  }
 
-  const pagingParams = `&limit=${pageSize}&offset=${pageIndex * pageSize}`;
+  if (status) {
+    searchParams.append("status", `eq.${status}`);
+  }
 
-  const dateFilter =
-    starts && ends
-      ? `&and=(start_time.gte.${starts},start_time.lte.${ends})`
-      : "";
+  searchParams.append("limit", pageSize.toString());
+  searchParams.append("offset", (pageIndex * pageSize).toString());
+  searchParams.append("order", "created_at.desc");
+
+  if (starts && ends) {
+    searchParams.append(
+      "or",
+      `(and(start_time.gte.${starts},start_time.lte.${ends}),and(created_at.gte.${starts},created_at.lte.${ends}))`
+    );
+  }
+
+  if (playbookId) {
+    searchParams.append("playbook_id", `eq.${playbookId}`);
+  }
+
+  const select = [
+    "*",
+    "playbooks(id,name,title,spec,icon)",
+    "component:components(id,name,icon)",
+    "check:checks(id,name,icon)",
+    "config:config_items(id,name,type,config_class)"
+  ].join(",");
+
+  searchParams.append("select", select);
 
-  const playbookParamsString = playbookId
-    ? `&playbook_id=eq.${playbookId}`
-    : "";
+  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?select=*,playbooks(id,name,title,spec,icon),component:components(id,name,icon),check:checks(id,name,icon),config:config_items(id,name,type,config_class)&&order=created_at.desc${playbookParamsString}${componentParamString}&${configParamString}${pagingParams}${statusParamString}${dateFilter}${sortParams}`,
-      {
-        headers: {
-          Prefer: "count=exact"
-        }
+    ConfigDB.get<PlaybookRun[] | null>(`/playbook_runs?${queryString}`, {
+      headers: {
+        Prefer: "count=exact"
       }
-    )
+    })
   );
   return res;
 }

src/api/services/playbooks.ts

@@ -8,6 +8,7 @@ import { formatDuration } from "@flanksource-ui/utils/date";
 import { atom, useAtom } from "jotai";
 import { MRT_ColumnDef } from "mantine-react-table";
 import { useState } from "react";
+import { createPortal } from "react-dom";
 import { FaExclamationTriangle } from "react-icons/fa";
 import { Tooltip } from "react-tooltip";
 import JobHistoryStatusColumn from "../../JobsHistory/JobHistoryStatusColumn";
@@ -193,7 +194,6 @@ export const notificationsRulesTableColumns: MRT_ColumnDef<NotificationRules>[]
               <>
                 <span
                   data-tooltip-id={`error-tooltip-${row.original.id}`}
-                  data-tooltip-content={error}
                   onClick={(e) => {
                     e.stopPropagation();
                     e.preventDefault();
@@ -202,7 +202,15 @@ export const notificationsRulesTableColumns: MRT_ColumnDef<NotificationRules>[]
                 >
                   <FaExclamationTriangle className="mr-1 inline h-4 w-4 text-red-500" />
                 </span>
-                <Tooltip id={`error-tooltip-${row.original.id}`} />
+                {createPortal(
+                  <Tooltip
+                    className="z-[9999999999]"
+                    id={`error-tooltip-${row.original.id}`}
+                  >
+                    <pre className="whitespace-pre-wrap text-sm">{error}</pre>
+                  </Tooltip>,
+                  document.body
+                )}
 
                 <Modal
                   open={showError}
@@ -259,11 +267,7 @@ export const notificationsRulesTableColumns: MRT_ColumnDef<NotificationRules>[]
         return (
           <>
             <div
-              className="z-[99999999] w-full"
               data-tooltip-id="most-common-error-tooltip"
-              data-tooltip-content={
-                value > 0 ? notification.most_common_error : undefined
-              }
               onClick={(e) => {
                 if (notification.most_common_error) {
                   e.stopPropagation();
@@ -273,7 +277,18 @@ export const notificationsRulesTableColumns: MRT_ColumnDef<NotificationRules>[]
             >
               {value}
             </div>
-            {value > 0 && <Tooltip id="most-common-error-tooltip" />}
+            {value > 0 &&
+              createPortal(
+                <Tooltip
+                  id="most-common-error-tooltip"
+                  className="z-[9999999999] max-w-[95vw]"
+                >
+                  <pre className="whitespace-pre-wrap text-sm">
+                    {notification.most_common_error}
+                  </pre>
+                </Tooltip>,
+                document.body
+              )}
           </>
         );
       }

src/components/Notifications/Rules/notificationsRulesTableColumns.tsx

@@ -1,16 +1,27 @@
 import NotificationTabsLinks from "@flanksource-ui/components/Notifications/NotificationTabsLinks";
 import NotificationSilenceForm from "@flanksource-ui/components/Notifications/SilenceNotificationForm/NotificationSilenceForm";
+import { useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "react-router-dom";
 
 export default function NotificationSilencedAddPage() {
   const navigate = useNavigate();
+  const client = useQueryClient();
 
   return (
     <NotificationTabsLinks activeTab={"Silences"} isAddSilence>
       <div className="mx-auto flex h-full max-w-screen-md flex-1 flex-col px-6 py-6 pb-0">
         <h3 className="px-4 text-xl font-semibold">Silence Notification</h3>
         <NotificationSilenceForm
-          onSuccess={() => navigate("/notifications/silences")}
+          onSuccess={() => {
+            navigate("/notifications/silences");
+            client.invalidateQueries({
+              queryKey: ["notification_silences"]
+            });
+
+            client.refetchQueries({
+              queryKey: ["notification_silences"]
+            });
+          }}
         />
       </div>
     </NotificationTabsLinks>