feat: Notification silence new fields (#2447)

* rearrange columns in notification silence list

* feat: add name to the silence form

* feat: display resource and the filter in the same column

* feat: add indefinitely option to duration picker

* feat: config hard parents

* feat: rearrange columns and don't use Age component

* feat: different form for notification silences

* feat: show attributes in the silence form

* feat: multiple selection of attributes and change tag display

src/api/query-hooks/useCheck.ts

@@ -0,0 +1,10 @@
+import { getHealthCheckByID } from "../services/check";
+import { useQuery } from "@tanstack/react-query";
+
+export function useCheckDetail(id: string) {
+  return useQuery({
+    queryKey: ["check", id],
+    queryFn: () => getHealthCheckByID(id),
+    select: (data) => data?.data
+  });
+}

src/api/query-hooks/useComponent.ts

@@ -0,0 +1,10 @@
+import { getTopologyByID } from "../services/topology";
+import { useQuery } from "@tanstack/react-query";
+
+export function useComponentDetail(id: string) {
+  return useQuery({
+    queryKey: ["component", id],
+    queryFn: () => getTopologyByID(id),
+    select: (data) => data?.data
+  });
+}

src/api/query-hooks/useConfigRelationshipsQuery.tsx

@@ -6,7 +6,7 @@ import { useSearchParams } from "react-router-dom";
 import { getAConfigRelationships } from "../services/configs";
 import { ConfigItem } from "../types/configs";
 
-export default function useConfigRelationshipsQuery(id: string | undefined) {
+export function useConfigRelationshipsQuery(id: string | undefined) {
   const [searchParams] = useSearchParams();
   const hideDeleted = useHideDeletedConfigs();
   const tag = searchParams.get("tag") ?? undefined;
@@ -82,3 +82,19 @@ export default function useConfigRelationshipsQuery(id: string | undefined) {
     select: (data) => transformConfigRelationships(data ?? [])
   });
 }
+
+export function useConfigHardParents(id: string) {
+  return useQuery({
+    queryKey: ["config", "relationships", id],
+    queryFn: () =>
+      getAConfigRelationships({
+        configId: id!,
+        type_filter: "incoming",
+        hideDeleted: true,
+        relation: "hard"
+      }),
+    enabled: id !== undefined,
+    keepPreviousData: true,
+    select: (data) => data ?? []
+  });
+}

src/api/services/check.ts

@@ -0,0 +1,10 @@
+import { IncidentCommander } from "../axios";
+import { HealthCheck } from "../types/health";
+
+export const getHealthCheckByID = async (checkID: string) => {
+  if (checkID === "") {
+    return Promise.resolve({ data: [] }); // Ensure consistent return type
+  }
+
+  return IncidentCommander.get<HealthCheck[]>(`/checks?id=eq.${checkID}`);
+};

src/api/services/configs.ts

@@ -419,6 +419,10 @@ export const getAConfigRelationships = async ({
   health,
   status
 }: GetAConfigRelationshipsParams) => {
+  if (configId === "") {
+    return null;
+  }
+
   const searchParams = new URLSearchParams();
   searchParams.append("config_id", configId);
   searchParams.append("include_deleted_configs", `${!hideDeleted}`);

src/api/services/notifications.ts

@@ -94,6 +94,10 @@ export const silenceNotification = async (
 export const updateNotificationSilence = async (
   data: Omit<NotificationSilenceItem, "created_at">
 ) => {
+  if (data.until === "indefinitely") {
+    data["until"] = null;
+  }
+
   const res = await IncidentCommander.patch(
     `/notification_silences?id=eq.${data.id}`,
     data

src/api/services/topology.ts

@@ -22,6 +22,7 @@ import {
   ComponentTemplateItem,
   Topology
 } from "../types/topology";
+import { AxiosResponse } from "axios";
 
 interface IParam {
   id?: string;
@@ -216,6 +217,10 @@ export const getTopologyNameByID = (topologyID: string) => {
 };
 
 export const getTopologyByID = async (topologyID: string) => {
+  if (topologyID === "") {
+    return Promise.resolve({ data: [] }); // Ensure consistent return type
+  }
+
   return IncidentCommander.get<Topology[]>(`/components?id=eq.${topologyID}`);
 };
 

src/api/types/configs.ts

@@ -52,6 +52,7 @@ export interface ConfigItem extends Timestamped, Avatar, Agent, Costs {
   external_id?: string;
   config_class?: string;
   type: string;
+  path?: string;
   changes?: number;
   analysis?: Record<string, any>;
   tags?: Record<string, any>;

src/api/types/notifications.ts

@@ -46,18 +46,20 @@ export type NotificationRules = {
 
 export type SilenceNotificationResponse = {
   id: string;
+  name: string;
   filter?: string;
+  selectors?: string;
   component_id?: string;
   config_id?: string;
   check_id?: string;
   canary_id?: string;
   from: string;
-  until: string;
+  until: string | null;
   description?: string;
   recursive?: boolean;
   namespace?: string;
   error?: string;
-  source?: "source1" | "source2" | "source3";
+  source?: "KubernetesCRD" | "UI";
 };
 
 export type NotificationSendHistory = {
@@ -87,18 +89,19 @@ export type NotificationSendHistoryApiResponse = NotificationSendHistory & {
 
 export type NotificationSilenceItem = {
   id: string;
+  name: string;
   namespace: string;
   description?: string;
   filter?: string;
   error?: string;
   from: string;
-  until: string;
+  until: string | null;
   recursive?: boolean;
   config_id?: string;
   check_id?: string;
   canary_id?: string;
   component_id?: string;
-  source?: "source1" | "source2" | "source3";
+  source?: "KubernetesCRD" | "UI";
   created_by?: string;
   created_at: string;
   updated_at: string;

src/components/Notifications/NotificationTabsLinks.tsx

@@ -111,17 +111,17 @@ export default function NotificationTabsLinks({
                             action="write"
                             key="add-notifications"
                           >
-                            <Link
-                              key="notifications-silenced-add"
+                            <button
+                              key="notifications-add"
                               type="button"
                               className=""
-                              to="/notifications/silences/add"
+                              onClick={() => setIsModalOpen(true)}
                             >
                               <AiFillPlusCircle
                                 size={32}
                                 className="text-blue-600"
                               />
-                            </Link>
+                            </button>
                           </AuthorizationAccessCheck>
                         ])
                   ]