fix: improve the notifications

src/components/Notifications/Filters/NotificationFilterBar.tsx

@@ -0,0 +1,17 @@
+import FormikFilterForm from "../../Forms/FormikFilterForm";
+import NotificationResourceTypeDropdown from "./NotificationResourceTypeDropdown";
+import NotificationStatusDropdown from "./NotificationStatusDropdown";
+
+export default function NotificationFilterBar() {
+  return (
+    <FormikFilterForm
+      paramsToReset={["pageIndex", "pageSize"]}
+      filterFields={["status", "resource_type"]}
+    >
+      <div className="flex flex-row gap-2 py-3">
+        <NotificationStatusDropdown />
+        <NotificationResourceTypeDropdown />
+      </div>
+    </FormikFilterForm>
+  );
+}

src/components/Notifications/Filters/NotificationResourceTypeDropdown.tsx

@@ -0,0 +1,50 @@
+import TristateReactSelect, {
+  TriStateOptions
+} from "@flanksource-ui/ui/Dropdowns/TristateReactSelect";
+import { useField } from "formik";
+
+export const jobHistoryResourceTypes: TriStateOptions[] = [
+  {
+    label: "Canary",
+    value: "canary",
+    id: "canary"
+  },
+  {
+    label: "Check",
+    value: "check",
+    id: "check"
+  },
+  {
+    label: "Component",
+    value: "component",
+    id: "component"
+  },
+  {
+    label: "Catalog",
+    value: "catalog",
+    id: "catalog"
+  }
+].sort((a, b) => a.label.localeCompare(b.label));
+
+export default function NotificationResourceTypeDropdown() {
+  const [field] = useField({
+    name: "resource_type"
+  });
+
+  return (
+    <div className="flex flex-col">
+      <TristateReactSelect
+        value={field.value}
+        options={jobHistoryResourceTypes}
+        onChange={(val) => {
+          if (val && val !== "All") {
+            field.onChange({ target: { value: val, name: field.name } });
+          } else {
+            field.onChange({ target: { value: undefined, name: field.name } });
+          }
+        }}
+        label="Resource Type"
+      />
+    </div>
+  );
+}

src/components/Notifications/Filters/NotificationStatusDropdown.tsx

@@ -0,0 +1,51 @@
+import TristateReactSelect, {
+  TriStateOptions
+} from "@flanksource-ui/ui/Dropdowns/TristateReactSelect";
+import { useField } from "formik";
+
+const statusOptions: Record<string, TriStateOptions> = {
+  running: {
+    id: "sent",
+    label: "Sent",
+    value: "Sent"
+  },
+  failed: {
+    id: "failed",
+    label: "Failed",
+    value: "Failed"
+  },
+  silenced: {
+    id: "silenced",
+    label: "Silenced",
+    value: "Silenced"
+  },
+  repeated: {
+    id: "repeated",
+    label: "Repeated",
+    value: "Repeated"
+  }
+};
+
+export default function NotificationStatusDropdown() {
+  const [field] = useField({
+    name: "status",
+    id: "status"
+  });
+
+  return (
+    <div className="flex flex-col">
+      <TristateReactSelect
+        value={field.value}
+        options={Object.values(statusOptions)}
+        onChange={(val) => {
+          if (val && val !== "All") {
+            field.onChange({ target: { value: val, name: field.name } });
+          } else {
+            field.onChange({ target: { value: undefined, name: field.name } });
+          }
+        }}
+        label="Status"
+      />
+    </div>
+  );
+}

src/pages/Settings/notifications/NotificationsPage.tsx

@@ -2,6 +2,7 @@ import { getNotificationSendHistory } from "@flanksource-ui/api/services/notific
 import NotificationSendHistoryList from "@flanksource-ui/components/Notifications/NotificationSendHistory";
 import useReactTablePaginationState from "@flanksource-ui/ui/DataTable/Hooks/useReactTablePaginationState";
 import { useQuery } from "@tanstack/react-query";
+import NotificationFilterBar from "../../../components/Notifications/Filters/NotificationFilterBar";
 import NotificationTabsLinks from "../../../components/Notifications/NotificationTabsLinks";
 
 export default function NotificationsPage() {
@@ -28,6 +29,7 @@ export default function NotificationsPage() {
       isLoading={isLoading || isRefetching}
     >
       <div className="flex h-full w-full flex-1 flex-col p-6 pb-0">
+        <NotificationFilterBar />
         <NotificationSendHistoryList
           data={notifications ?? []}
           isLoading={isLoading || isRefetching}