2284-Notifications-Silence

package.json

@@ -17,7 +17,7 @@
     "@heroicons/react": "^1.0.3",
     "@hookform/resolvers": "^2.8.8",
     "@monaco-editor/react": "^4.6.0",
-    "@netlify/plugin-nextjs": "^5.1.2",
+    "@netlify/plugin-nextjs": "^5.7.1",
     "@next/bundle-analyzer": "^14.2.5",
     "@ory/client": "^1.2.11",
     "@ory/integrations": "^1.1.5",
@@ -41,6 +41,7 @@
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/testing-library__react": "^10.2.0",
     "ansi-to-html": "^0.7.2",
+    "autoprefixer": "^10.4.20",
     "axios": "^1.6.2",
     "casbin.js": "^0.5.0",
     "clsx": "^2.1.1",

src/App.tsx

@@ -54,6 +54,7 @@ import {
 import { ConnectionsPage } from "./pages/Settings/ConnectionsPage";
 import { EventQueueStatusPage } from "./pages/Settings/EventQueueStatus";
 import { FeatureFlagsPage } from "./pages/Settings/FeatureFlagsPage";
+import NotificationSilencePage from "./pages/Settings/NotificationSilencePage";
 import { TopologyCardPage } from "./pages/TopologyCard";
 import { UsersPage } from "./pages/UsersPage";
 import { ConfigInsightsPage } from "./pages/config/ConfigInsightsList";
@@ -374,14 +375,27 @@ export function IncidentManagerRoutes({ sidebar }: { sidebar: ReactNode }) {
             true
           )}
         />
-        <Route
-          path="notifications"
-          element={withAuthorizationAccessCheck(
-            <NotificationsPage />,
-            tables.database,
-            "read"
-          )}
-        />
+        <Route path="notifications">
+          <Route
+            index
+            element={withAuthorizationAccessCheck(
+              <NotificationsPage />,
+              tables.database,
+              "read",
+              true
+            )}
+          />
+
+          <Route
+            path="silence"
+            element={withAuthorizationAccessCheck(
+              <NotificationSilencePage />,
+              tables.database,
+              "write",
+              true
+            )}
+          />
+        </Route>
         <Route
           path="feature-flags"
           element={withAuthorizationAccessCheck(

src/api/axios.ts

@@ -136,6 +136,15 @@ export const Rback = axios.create({
   }
 });
 
+export const NotificationAPI = axios.create({
+  baseURL: `${API_BASE}/notification`,
+  headers: {
+    Accept: "application/json",
+    Prefer: "return=representation",
+    "Content-Type": "application/json"
+  }
+});
+
 for (const client of [
   Auth,
   IncidentCommander,

src/api/query-hooks/useConfigChangesHooks.ts

@@ -1,7 +1,7 @@
 import { configChangesDefaultDateFilter } from "@flanksource-ui/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter";
 import { useHideDeletedConfigChanges } from "@flanksource-ui/components/Configs/Changes/ConfigsRelatedChanges/FilterBar/ConfigChangesToggledDeletedItems";
 import { useConfigChangesArbitraryFilters } from "@flanksource-ui/hooks/useConfigChangesArbitraryFilters";
-import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams";
+import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
 import { UseQueryOptions, useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { useParams, useSearchParams } from "react-router-dom";

src/api/query-hooks/useJobsHistoryQuery.ts

@@ -2,7 +2,7 @@ import { durationOptions } from "@flanksource-ui/components/JobsHistory/Filters/
 import { jobHistoryDefaultDateFilter } from "@flanksource-ui/components/JobsHistory/Filters/JobsHistoryFilters";
 import { JobHistory } from "@flanksource-ui/components/JobsHistory/JobsHistoryTable";
 import { resourceTypeMap } from "@flanksource-ui/components/SchemaResourcePage/SchemaResourceEditJobsTab";
-import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams";
+import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
 import { useQuery, UseQueryOptions } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { useSearchParams } from "react-router-dom";

src/api/services/notifications.ts

@@ -1,7 +1,8 @@
-import { Notification } from "../../components/Notifications/notificationsTableColumns";
+import { Notification } from "@flanksource-ui/components/Notifications/notificationsTableColumns";
 import { AVATAR_INFO } from "../../constants";
-import { IncidentCommander } from "../axios";
+import { IncidentCommander, NotificationAPI } from "../axios";
 import { resolvePostGrestRequestWithPagination } from "../resolve";
+import { SilenceNotificationResponse } from "../types/notifications";
 
 export const getNotificationsSummary = async () => {
   return resolvePostGrestRequestWithPagination(
@@ -22,3 +23,10 @@ export const getNotificationById = async (id: string) => {
   );
   return res.data ? res.data?.[0] : undefined;
 };
+
+export const silenceNotification = async (
+  data: SilenceNotificationResponse
+) => {
+  const res = await NotificationAPI.post("/silence", data);
+  return res.data;
+};

src/api/services/topology.ts

@@ -11,6 +11,7 @@ import { SchemaResourceI } from "../schemaResources";
 import { PaginationInfo } from "../types/common";
 import {
   HealthCheck,
+  HealthCheckNames,
   HealthCheckStatus,
   HealthCheckSummary
 } from "../types/health";
@@ -294,3 +295,18 @@ export const getComponentChecks = async (id: string) => {
   );
   return res.data;
 };
+
+export const getCheckNames = async () => {
+  const res = await IncidentCommander.get<HealthCheckNames[]>(`/check_names`);
+  return res.data;
+};
+
+export const getCanaryNames = async () => {
+  const res = await IncidentCommander.get<
+    {
+      id: string;
+      name: string;
+    }[]
+  >(`/canary_names`);
+  return res.data;
+};

src/api/types/health.ts

@@ -62,6 +62,11 @@ export type HealthCheckSummary = Pick<
   | "last_transition_time"
 >;
 
+export type HealthCheckNames = Pick<
+  HealthCheck,
+  "id" | "name" | "canary_id" | "status" | "type"
+>;
+
 export interface HealthCheckStatus {
   status: boolean;
   time: string;

src/api/types/notifications.ts

@@ -0,0 +1,11 @@
+export type SilenceNotificationResponse = {
+  id: string;
+  component_id: string;
+  config_id: string;
+  check_id: string;
+  canary_id: string;
+  from: string;
+  until: string;
+  description: string;
+  recursive: boolean;
+};

src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx

@@ -1,5 +1,5 @@
-import { TimeRangePicker } from "@flanksource-ui/ui/TimeRangePicker";
-import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams";
+import { TimeRangePicker } from "@flanksource-ui/ui/Dates/TimeRangePicker";
+import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
 import { URLSearchParamsInit } from "react-router-dom";
 
 type Props = {