fix(notifications): show inhibited notification source

Author: adityathebe

src/components/Notifications/NotificationSendHistory/NotificationDetails.stories.tsx

@@ -0,0 +1,60 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ComponentProps, useState } from "react";
+import NotificationDetails from "./NotificationDetails";
+import {
+  inhibitedDeploymentNotification,
+  sentDeploymentNotification,
+  sentPodNotification
+} from "./__fixtures__/notificationDetails";
+
+function NotificationDetailsStory({
+  notification
+}: ComponentProps<typeof NotificationDetails>) {
+  const [queryClient] = useState(() => {
+    const client = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+          staleTime: Infinity
+        }
+      }
+    });
+
+    client.setQueryData(
+      ["notification_send_history_inhibitor", sentPodNotification.id],
+      sentPodNotification
+    );
+
+    return client;
+  });
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <NotificationDetails notification={notification} />
+    </QueryClientProvider>
+  );
+}
+
+const meta: Meta<typeof NotificationDetails> = {
+  title: "Notifications/Notification Details",
+  component: NotificationDetails
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NotificationDetails>;
+
+export const Inhibited: Story = {
+  render: (args) => <NotificationDetailsStory {...args} />,
+  args: {
+    notification: inhibitedDeploymentNotification
+  }
+};
+
+export const Sent: Story = {
+  render: (args) => <NotificationDetailsStory {...args} />,
+  args: {
+    notification: sentDeploymentNotification
+  }
+};

src/components/Notifications/NotificationSendHistory/NotificationDetails.tsx

@@ -14,7 +14,10 @@ import NotificationResourceDisplay from "../NotificationResourceDisplay";
 import { notificationSendHistoryStatus } from "../NotificationsStatusCell";
 import blockKitToMarkdown, { SlackMessage } from "@flanksource-ui/utils/slack";
 import { DisplayMarkdown } from "@flanksource-ui/components/Utils/Markdown";
-import { getNotificationSilencesByID } from "@flanksource-ui/api/services/notifications";
+import {
+  getNotificationSendHistoryById,
+  getNotificationSilencesByID
+} from "@flanksource-ui/api/services/notifications";
 import { useQuery } from "@tanstack/react-query";
 import { Status } from "@flanksource-ui/components/Status";
 import { sanitizeHTMLContent } from "@flanksource-ui/utils/common";
@@ -64,8 +67,7 @@ export default function NotificationDetails({
 
     try {
       const parsed = JSON.parse(legacyBody.trim()) as
-        | SlackMessage
-        | SlackMessage[];
+        SlackMessage | SlackMessage[];
 
       if (Array.isArray(parsed)) {
         const [firstMessage] = parsed;
@@ -92,6 +94,29 @@ export default function NotificationDetails({
     queryFn: () => getNotificationSilencesByID(notification.silenced_by!)
   });
 
+  const shouldFetchInhibitor =
+    notification.status === "inhibited" && !!notification.parent_id;
+
+  const { data: inhibitor, isLoading: isLoadingInhibitor } = useQuery({
+    queryKey: ["notification_send_history_inhibitor", notification.parent_id],
+    enabled: shouldFetchInhibitor,
+    queryFn: () => getNotificationSendHistoryById(notification.parent_id!)
+  });
+
+  const inhibitorLink = useMemo(() => {
+    if (!inhibitor) {
+      return undefined;
+    }
+
+    const params = new URLSearchParams({ id: inhibitor.id });
+    if (inhibitor.body_payload) {
+      params.set("hasBodyPayload", "1");
+    }
+    return `/notifications/resource/${encodeURIComponent(
+      inhibitor.resource_id
+    )}?${params.toString()}`;
+  }, [inhibitor]);
+
   return (
     <div className="flex flex-col gap-3 overflow-auto">
       <div className="grid grid-cols-4 gap-3">
@@ -181,6 +206,34 @@ export default function NotificationDetails({
             }
           />
         )}
+
+        {shouldFetchInhibitor && (
+          <VerticalDescription
+            label="Inhibited By"
+            value={
+              inhibitor ? (
+                <div className="flex flex-col gap-1">
+                  <NotificationResourceDisplay
+                    resource={inhibitor.resource}
+                    resourceKind={inhibitor.resource_kind}
+                  />
+                  {inhibitorLink && (
+                    <Link
+                      className="text-xs font-medium text-blue-500 hover:cursor-pointer hover:underline"
+                      to={inhibitorLink}
+                    >
+                      View notification
+                    </Link>
+                  )}
+                </div>
+              ) : isLoadingInhibitor ? (
+                "Loading..."
+              ) : (
+                "Unknown"
+              )
+            }
+          />
+        )}
       </div>
 
       {(bodyMarkdown || slackBody || legacyBody) && (

src/components/Notifications/NotificationSendHistory/__fixtures__/notificationDetails.ts

@@ -0,0 +1,90 @@
+import { NotificationSendHistoryDetailApiResponse } from "@flanksource-ui/api/types/notifications";
+
+const now = "2026-07-09T08:00:00.000Z";
+
+export const sentPodNotification: NotificationSendHistoryDetailApiResponse = {
+  id: "sent-pod-history-id",
+  notification_id: "notification-rule-id",
+  body: "Pod airsonic-7f9d4b9d9c-l6ptw is unhealthy",
+  body_payload: null,
+  status: "sent",
+  count: 1,
+  first_observed: now,
+  source_event: "config.unhealthy",
+  resource_id: "pod-resource-id",
+  playbook_run_id: undefined,
+  person_id: undefined,
+  connection_id: undefined,
+  error: undefined,
+  duration_millis: 250,
+  created_at: now,
+  parent_id: undefined,
+  resource_health: "unhealthy",
+  resource_status: "CrashLoopBackOff",
+  resource_health_description:
+    "Pod airsonic-7f9d4b9d9c-l6ptw is in CrashLoopBackOff",
+  resource_kind: "config",
+  resource_type: "Kubernetes::Pod",
+  resource: {
+    id: "pod-resource-id",
+    name: "airsonic-7f9d4b9d9c-l6ptw",
+    type: "Kubernetes::Pod",
+    health: "unhealthy",
+    status: "CrashLoopBackOff",
+    config_class: "Pod",
+    tags: {
+      namespace: "default"
+    }
+  },
+  playbook_run: undefined as any,
+  person: undefined as any,
+  body_markdown: "Pod airsonic-7f9d4b9d9c-l6ptw is unhealthy"
+};
+
+export const inhibitedDeploymentNotification: NotificationSendHistoryDetailApiResponse =
+  {
+    id: "inhibited-deployment-history-id",
+    notification_id: "notification-rule-id",
+    body: "Deployment airsonic is unhealthy",
+    body_payload: null,
+    status: "inhibited",
+    count: 1,
+    first_observed: now,
+    source_event: "config.unhealthy",
+    silenced_by: undefined,
+    resource_id: "deployment-resource-id",
+    playbook_run_id: undefined,
+    person_id: undefined,
+    connection_id: undefined,
+    error: undefined,
+    duration_millis: 25,
+    created_at: now,
+    parent_id: sentPodNotification.id,
+    resource_health: "unhealthy",
+    resource_status: "Unavailable",
+    resource_health_description: "Deployment airsonic has unavailable replicas",
+    resource_kind: "config",
+    resource_type: "Kubernetes::Deployment",
+    resource: {
+      id: "deployment-resource-id",
+      name: "airsonic",
+      type: "Kubernetes::Deployment",
+      health: "unhealthy",
+      status: "Unavailable",
+      config_class: "Deployment",
+      tags: {
+        namespace: "default"
+      }
+    },
+    playbook_run: undefined as any,
+    person: undefined as any,
+    body_markdown: "Deployment airsonic is unhealthy"
+  };
+
+export const sentDeploymentNotification: NotificationSendHistoryDetailApiResponse =
+  {
+    ...inhibitedDeploymentNotification,
+    id: "sent-deployment-history-id",
+    status: "sent",
+    parent_id: undefined
+  };

src/components/Notifications/NotificationSendHistory/__tests__/NotificationDetails.unit.test.tsx

@@ -0,0 +1,76 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import NotificationDetails from "../NotificationDetails";
+import {
+  inhibitedDeploymentNotification,
+  sentDeploymentNotification,
+  sentPodNotification
+} from "../__fixtures__/notificationDetails";
+
+jest.mock("../../../../api/services/notifications", () => ({
+  getNotificationSendHistoryById: jest.fn(),
+  getNotificationSilencesByID: jest.fn()
+}));
+
+const { getNotificationSendHistoryById: mockGetNotificationSendHistoryById } =
+  jest.requireMock("../../../../api/services/notifications") as {
+    getNotificationSendHistoryById: jest.Mock;
+  };
+
+function renderNotificationDetails(
+  notification: React.ComponentProps<typeof NotificationDetails>["notification"]
+) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false
+      }
+    }
+  });
+
+  return render(
+    <MemoryRouter
+      future={{ v7_relativeSplatPath: true, v7_startTransition: true }}
+    >
+      <QueryClientProvider client={queryClient}>
+        <NotificationDetails notification={notification} />
+      </QueryClientProvider>
+    </MemoryRouter>
+  );
+}
+
+describe("NotificationDetails", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("shows the inhibiting notification resource and send history link", async () => {
+    mockGetNotificationSendHistoryById.mockResolvedValue(sentPodNotification);
+
+    renderNotificationDetails(inhibitedDeploymentNotification);
+
+    expect(screen.getByText("Inhibited By")).toBeInTheDocument();
+    expect(
+      await screen.findByText("airsonic-7f9d4b9d9c-l6ptw")
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "View notification" })
+    ).toHaveAttribute(
+      "href",
+      `/notifications/resource/${sentPodNotification.resource_id}?id=${sentPodNotification.id}`
+    );
+    expect(screen.getByText("config.unhealthy")).toBeInTheDocument();
+    expect(mockGetNotificationSendHistoryById).toHaveBeenCalledTimes(1);
+    expect(mockGetNotificationSendHistoryById).toHaveBeenCalledWith(
+      sentPodNotification.id
+    );
+  });
+
+  it("does not fetch an inhibitor for non-inhibited history", () => {
+    renderNotificationDetails(sentDeploymentNotification);
+
+    expect(screen.queryByText("Inhibited By")).not.toBeInTheDocument();
+    expect(mockGetNotificationSendHistoryById).not.toHaveBeenCalled();
+  });
+});