feat: revamp notification silences ui

Author: yashmehrotra

src/api/services/notifications.ts

@@ -271,6 +271,73 @@ export const getNotificationSilencesByID = async (id: string) => {
   return res.data?.[0] ?? undefined;
 };
 
+export const getNotificationSilencesHistory = async ({
+  pageIndex = 0,
+  pageSize = 10,
+  component_id,
+  config_id,
+  check_id,
+  canary_id,
+  filter,
+  selectors
+}: {
+  pageIndex?: number;
+  pageSize?: number;
+  component_id?: string;
+  config_id?: string;
+  check_id?: string;
+  canary_id?: string;
+  filter?: string;
+  selectors?: string;
+}) => {
+  const pagingParams = getPagingParams({ pageIndex, pageSize });
+
+  const selectColumns = [
+    "*",
+    "checks:check_id(id,name,type,status)",
+    "catalog:config_id(id,name,type,config_class)",
+    "component:component_id(id,name,icon)",
+    `createdBy:created_by(${AVATAR_INFO})`
+  ].join(",");
+
+  // Filter for past 15 days
+  const fifteenDaysAgo = new Date();
+  fifteenDaysAgo.setDate(fifteenDaysAgo.getDate() - 15);
+  const dateFilter = `&created_at=gte.${fifteenDaysAgo.toISOString()}`;
+
+  // Build filters based on provided criteria
+  let filters = "";
+  if (component_id) {
+    filters += `&component_id=eq.${component_id}`;
+  }
+  if (config_id) {
+    filters += `&config_id=eq.${config_id}`;
+  }
+  if (check_id) {
+    filters += `&check_id=eq.${check_id}`;
+  }
+  if (canary_id) {
+    filters += `&canary_id=eq.${canary_id}`;
+  }
+  if (filter) {
+    filters += `&filter=eq.${encodeURIComponent(filter)}`;
+  }
+  if (selectors) {
+    filters += `&selectors=eq.${encodeURIComponent(selectors)}`;
+  }
+
+  return resolvePostGrestRequestWithPagination(
+    IncidentCommander.get<NotificationSilenceItemApiResponse[] | null>(
+      `/notification_silences?select=${selectColumns}&order=created_at.desc${pagingParams}&deleted_at=is.null${dateFilter}${filters}`,
+      {
+        headers: {
+          Prefer: "count=exact"
+        }
+      }
+    )
+  );
+};
+
 export const deleteNotificationSilence = async (id: string) => {
   return IncidentCommander.patch<NotificationSilenceItem>(
     `/notification_silences?id=eq.${id}`,

src/components/Notifications/SilenceNotificationForm/FormikNotificationResourceField.tsx

@@ -2,10 +2,18 @@ import FormikResourceSelectorDropdown from "@flanksource-ui/components/Forms/For
 import { Label } from "@flanksource-ui/ui/FormControls/Label";
 import { Switch } from "@flanksource-ui/ui/FormControls/Switch";
 import { useFormikContext } from "formik";
-import { useMemo, useState } from "react";
+import { useMemo, useState, useEffect } from "react";
 
-export default function FormikNotificationResourceField() {
-  const { values } = useFormikContext<Record<string, any>>();
+type FormikNotificationResourceFieldProps = {
+  disabled?: boolean;
+  onFieldChange?: (hasValue: boolean) => void;
+};
+
+export default function FormikNotificationResourceField({
+  disabled = false,
+  onFieldChange
+}: FormikNotificationResourceFieldProps = {}) {
+  const { values, setFieldValue } = useFormikContext<Record<string, any>>();
 
   const component_id = values.component_id;
   const config_id = values.config_id;
@@ -55,6 +63,12 @@ export default function FormikNotificationResourceField() {
     }
   }, [switchOption]);
 
+  // Monitor field values and call onFieldChange when they change
+  useEffect(() => {
+    const hasValue = !!(component_id || config_id || check_id || canary_id);
+    onFieldChange?.(hasValue);
+  }, [component_id, config_id, check_id, canary_id, onFieldChange]);
+
   return (
     <div className="flex flex-col gap-2">
       <Label label="Resource" required={true} />
@@ -66,38 +80,40 @@ export default function FormikNotificationResourceField() {
             itemsClassName=""
             defaultValue="Go Template"
             value={switchOption}
+            disabled={disabled}
             onChange={(v) => {
               setSwitchOption(v);
               // clear the other fields if the user selects a different option
               if (v === "Component") {
-                values.config_id = null;
-                values.check_id = null;
-                values.canary_id = null;
+                setFieldValue('config_id', null);
+                setFieldValue('check_id', null);
+                setFieldValue('canary_id', null);
               }
 
               if (v === "Catalog") {
-                values.component_id = null;
-                values.check_id = null;
-                values.canary_id = null;
+                setFieldValue('component_id', null);
+                setFieldValue('check_id', null);
+                setFieldValue('canary_id', null);
               }
 
               if (v === "Check") {
-                values.component_id = null;
-                values.config_id = null;
-                values.canary_id = null;
+                setFieldValue('component_id', null);
+                setFieldValue('config_id', null);
+                setFieldValue('canary_id', null);
               }
 
               if (v === "Canary") {
-                values.component_id = null;
-                values.config_id = null;
-                values.check_id = null;
+                setFieldValue('component_id', null);
+                setFieldValue('config_id', null);
+                setFieldValue('check_id', null);
               }
             }}
           />
         </div>
 
         <FormikResourceSelectorDropdown
           name={fieldName.name}
+          disabled={disabled}
           checkResourceSelector={
             switchOption === "Check" ? [{ id: check_id }] : undefined
           }