From b01e7b822cb556d61c687f32e3ae3677fe675d28 Mon Sep 17 00:00:00 2001
From: Moshe Immermam <moshe@flanksource.com>
Date: Fri, 8 Nov 2024 12:04:12 +0200
Subject: [PATCH] feat: add notification silence filter

---
 src/api/types/notifications.ts                   |  2 ++
 .../NotificationSilenceForm.tsx                  |  6 ++++++
 .../Notifications/SilenceNotificationsList.tsx   | 16 +++++++++++++++-
 src/ui/AlertDialog/ConfirmationPromptDialog.tsx  |  5 +----
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/api/types/notifications.ts b/src/api/types/notifications.ts
index 725a7b9b5..25a139aad 100644
--- a/src/api/types/notifications.ts
+++ b/src/api/types/notifications.ts
@@ -45,6 +45,7 @@ export type NotificationRules = {
 
 export type SilenceNotificationResponse = {
   id: string;
+  filter?: string;
   component_id?: string;
   config_id?: string;
   check_id?: string;
@@ -85,6 +86,7 @@ export type NotificationSilenceItem = {
   id: string;
   namespace: string;
   description?: string;
+  filter?: string;
   from: string;
   until: string;
   recursive?: boolean;
diff --git a/src/components/Notifications/SilenceNotificationForm/NotificationSilenceForm.tsx b/src/components/Notifications/SilenceNotificationForm/NotificationSilenceForm.tsx
index bdd31fcaf..57919563a 100644
--- a/src/components/Notifications/SilenceNotificationForm/NotificationSilenceForm.tsx
+++ b/src/components/Notifications/SilenceNotificationForm/NotificationSilenceForm.tsx
@@ -53,6 +53,7 @@ export default function NotificationSilenceForm({
       if (data.id) {
         return updateNotificationSilence({
           id: data.id,
+          filter: data.filter,
           updated_at: "now()",
           source: data.source,
           canary_id: data.canary_id,
@@ -126,6 +127,11 @@ export default function NotificationSilenceForm({
               label="Silence Duration"
             />
             <FormikTextArea name="description" label="Reason" />
+            <FormikTextArea
+              name="filter"
+              label="Filter"
+              hint="CEL expression for the silence to match against"
+            />
           </div>
           <div className={`${footerClassName}`}>
             {data?.id && (
diff --git a/src/components/Notifications/SilenceNotificationsList.tsx b/src/components/Notifications/SilenceNotificationsList.tsx
index 369b7a995..43d52cf66 100644
--- a/src/components/Notifications/SilenceNotificationsList.tsx
+++ b/src/components/Notifications/SilenceNotificationsList.tsx
@@ -103,7 +103,7 @@ const DeleteCell = ({
       <ConfirmationPromptDialog
         isOpen={isOpen}
         onClose={() => setIsOpen(false)}
-        title="Delete Notification Silence"
+        title="Delete Silence"
         description="Are you sure you want to delete this notification silence?"
         onConfirm={() => deleteItem(id)}
       />
@@ -187,6 +187,20 @@ const silenceNotificationListColumns: MRT_ColumnDef<NotificationSilenceItemApiRe
         );
       }
     },
+
+    {
+      header: "Filter",
+      accessorKey: "filter",
+      size: 100,
+      Cell: ({ row }) => {
+        const isExpired = dayjs(row.original.until).isBefore(dayjs());
+        return (
+          <span className={clsx(isExpired && "line-through")}>
+            {row.original.filter}
+          </span>
+        );
+      }
+    },
     {
       header: "Reason",
       accessorKey: "description",
diff --git a/src/ui/AlertDialog/ConfirmationPromptDialog.tsx b/src/ui/AlertDialog/ConfirmationPromptDialog.tsx
index 5042ae65b..f7ff81d1f 100644
--- a/src/ui/AlertDialog/ConfirmationPromptDialog.tsx
+++ b/src/ui/AlertDialog/ConfirmationPromptDialog.tsx
@@ -85,10 +85,7 @@ export function ConfirmationPromptDialog({
               {title}
             </h3>
             <div className="mt-2">
-              <p className="text-sm text-gray-500">
-                Are you sure you want to deactivate your account? All of your
-                data will be permanently removed. This action cannot be undone.
-              </p>
+              <p className="text-sm text-gray-500">{description}</p>
             </div>
           </div>
         </div>