@incident-io/backstage 0.1.0 → 0.2.0

package/src/components/HomePageOnCallCard/Content.test.tsx

@@ -0,0 +1,90 @@
+/// <reference types="@testing-library/jest-dom" />
+import { screen } from "@testing-library/react";
+import { renderInTestApp } from "@backstage/test-utils";
+import { vi } from "vitest";
+
+vi.mock("../../hooks/useIncidentRequest", () => ({
+  useIdentity: vi.fn(),
+}));
+
+vi.mock("../../hooks/useOnCallRequest", () => ({
+  useAllEscalationPaths: vi.fn(),
+  useAllSchedules: vi.fn(),
+}));
+
+vi.mock("@backstage/core-components", () => ({
+  Progress: () => <div data-testid="progress" />,
+}));
+
+import { useIdentity } from "../../hooks/useIncidentRequest";
+import { useAllEscalationPaths, useAllSchedules } from "../../hooks/useOnCallRequest";
+import { Content } from "./Content";
+
+const mockIdentityLoaded = {
+  value: { identity: { dashboard_url: "https://app.incident.io" } },
+  loading: false,
+  error: undefined,
+};
+
+beforeEach(() => {
+  (useIdentity as ReturnType<typeof vi.fn>).mockReturnValue(mockIdentityLoaded);
+});
+
+describe("HomePageOnCallCard Content", () => {
+  it("should show a loading indicator while fetching", async () => {
+    (useAllEscalationPaths as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: undefined,
+      loading: true,
+      error: undefined,
+    });
+    (useAllSchedules as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: undefined,
+      loading: true,
+      error: undefined,
+    });
+
+    await renderInTestApp(<Content />);
+
+    expect(screen.getByTestId("progress")).toBeInTheDocument();
+  });
+
+  it("should show empty states when there are no EPs or schedules", async () => {
+    (useAllEscalationPaths as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: [],
+      loading: false,
+      error: undefined,
+    });
+    (useAllSchedules as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: [],
+      loading: false,
+      error: undefined,
+    });
+
+    await renderInTestApp(<Content />);
+
+    expect(screen.getByText(/No escalation paths/i)).toBeInTheDocument();
+    expect(screen.getByText(/No schedules/i)).toBeInTheDocument();
+  });
+
+  it("should render EP and schedule names when data is loaded", async () => {
+    (useAllEscalationPaths as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: [
+        { id: "ep-1", name: "Primary EP" },
+        { id: "ep-2", name: "Secondary EP" },
+      ],
+      loading: false,
+      error: undefined,
+    });
+    (useAllSchedules as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: [{ id: "sched-1", name: "Primary Schedule" }],
+      loading: false,
+      error: undefined,
+    });
+
+    await renderInTestApp(<Content />);
+
+    expect(screen.getByText("Primary EP")).toBeInTheDocument();
+    expect(screen.getByText("Secondary EP")).toBeInTheDocument();
+    expect(screen.getByText("Primary Schedule")).toBeInTheDocument();
+  });
+});

package/src/components/HomePageOnCallCard/Content.tsx

@@ -0,0 +1,58 @@
+import { Progress } from "@backstage/core-components";
+import { useIdentity } from "../../hooks/useIncidentRequest";
+import { useAllEscalationPaths, useAllSchedules } from "../../hooks/useOnCallRequest";
+import { Alert } from "@material-ui/lab";
+import {
+  Box,
+  Divider,
+  IconButton,
+  Tooltip,
+  Typography,
+} from "@material-ui/core";
+import OpenInBrowserIcon from "@material-ui/icons/OpenInBrowser";
+
+export const Content = () => {
+  const { value: identity } = useIdentity();
+  const baseUrl = identity?.identity.dashboard_url ?? "app.incident.io";
+
+  const { value: eps, loading: epsLoading, error: epsError } = useAllEscalationPaths();
+  const { value: schedules, loading: schedulesLoading, error: schedulesError } = useAllSchedules();
+
+  if (epsLoading || schedulesLoading) return <Progress />;
+
+  return (
+    <>
+      <Typography variant="subtitle1"><strong>Escalation Paths</strong></Typography>
+      <Divider />
+      {epsError && <Alert severity="error">{epsError.message}</Alert>}
+      {eps && eps.length === 0 && <Typography variant="body2" color="textSecondary">No escalation paths.</Typography>}
+      {eps && eps.map(ep => (
+        <Box key={ep.id} display="flex" alignItems="center" justifyContent="space-between" py={0.5}>
+          <Typography variant="body2">{ep.name}</Typography>
+          <Tooltip title="View in incident.io" placement="top">
+            <IconButton size="small" href={`${baseUrl}/on-call/escalation-paths/${ep.id}`} target="_blank" rel="noopener noreferrer" color="primary">
+              <OpenInBrowserIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
+        </Box>
+      ))}
+
+      <Box mt={2}>
+        <Typography variant="subtitle1"><strong>Schedules</strong></Typography>
+        <Divider />
+        {schedulesError && <Alert severity="error">{schedulesError.message}</Alert>}
+        {schedules && schedules.length === 0 && <Typography variant="body2" color="textSecondary">No schedules.</Typography>}
+        {schedules && schedules.map(schedule => (
+          <Box key={schedule.id} display="flex" alignItems="center" justifyContent="space-between" py={0.5}>
+            <Typography variant="body2">{schedule.name}</Typography>
+            <Tooltip title="View in incident.io" placement="top">
+              <IconButton size="small" href={`${baseUrl}/on-call/schedules/${schedule.id}`} target="_blank" rel="noopener noreferrer" color="primary">
+                <OpenInBrowserIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          </Box>
+        ))}
+      </Box>
+    </>
+  );
+};

package/src/components/HomePageOnCallCard/index.ts

@@ -0,0 +1,3 @@
+export { Content } from "./Content";
+
+export const ContextProvider = ({ children }: { children: JSX.Element }) => children;

package/src/components/IncidentListItem/index.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { DateTime, Duration } from "luxon";
-import { BackstageTheme } from "@backstage/theme";
 import {
   Chip,
   IconButton,
@@ -23,32 +22,10 @@ import {
   ListItemText,
   Tooltip,
   Typography,
-  makeStyles,
 } from "@material-ui/core";
 import OpenInBrowserIcon from "@material-ui/icons/OpenInBrowser";
-import React from "react";
-import { definitions } from "../../api/types";
-
-const useStyles = makeStyles<BackstageTheme>((theme) => ({
-  listItemPrimary: {
-    display: "flex", // vertically align with chip
-    fontWeight: "bold",
-  },
-  warning: {
-    borderColor: theme.palette.status.warning,
-    color: theme.palette.status.warning,
-    "& *": {
-      color: theme.palette.status.warning,
-    },
-  },
-  error: {
-    borderColor: theme.palette.status.error,
-    color: theme.palette.status.error,
-    "& *": {
-      color: theme.palette.status.error,
-    },
-  },
-}));
+import { components } from "../../api/types";
+import {useStyles} from "../styles";
 
 // Single item in the list of on-going incidents.
 export const IncidentListItem = ({
@@ -56,7 +33,7 @@ export const IncidentListItem = ({
   incident,
 }: {
   baseUrl: string;
-  incident: definitions["IncidentV2ResponseBody"];
+  incident: components["schemas"]["IncidentV2"];
 }) => {
   const classes = useStyles();
   const reportedAt = incident.incident_timestamp_values?.find((ts) =>

package/src/components/styles.tsx

@@ -0,0 +1,30 @@
+import { makeStyles, Theme } from "@material-ui/core";
+
+export const useStyles = makeStyles<Theme>((theme) => ({
+  listItemPrimary: {
+    display: "flex", // vertically align with chip
+    fontWeight: "bold",
+    gap: theme.spacing(1),    
+  },
+  warning: {
+    borderColor: theme.palette.warning.main,
+    color: theme.palette.warning.main,
+    "& *": {
+      color: theme.palette.warning.main,
+    },
+  },
+  error: {
+    borderColor: theme.palette.error.main,
+    color: theme.palette.error.main,
+    "& *": {
+      color: theme.palette.error.main,
+    },
+  },
+  success: {
+    borderColor: theme.palette.success.main,
+    color: theme.palette.success.main,
+    "& *": {
+      color: theme.palette.success.main,
+    },
+  },
+}));

package/src/components/utils.tsx

@@ -0,0 +1,24 @@
+import { Entity } from "@backstage/catalog-model";
+import { ConfigApi } from "@backstage/core-plugin-api";
+
+
+// Find the ID of the custom field in incident that represents the association
+// to this type of entity.
+//
+// In practice, this will be kind=Component => ID of Affected components field.
+export function getEntityFieldID(config: ConfigApi, entity: Entity) {
+  switch (entity.kind) {
+    case "API":
+      return config.getOptional("incident.fields.api");
+    case "Component":
+      return config.getOptional("incident.fields.component");
+    case "Domain":
+      return config.getOptional("incident.fields.domain");
+    case "System":
+      return config.getOptional("incident.fields.system");
+    case "Group":
+      return config.getOptional("incident.fields.group");
+    default:
+      throw new Error(`unrecognised entity kind: ${entity.kind}`);
+  }
+}

package/src/hooks/useIncidentRequest.test.ts

@@ -0,0 +1,189 @@
+import { renderHook, waitFor, act } from "@testing-library/react";
+import { vi } from "vitest";
+import {
+  useIncidentList,
+  useIdentity,
+  useAlertList,
+  useIncidentAlertList,
+  useAlertSourceList,
+} from "./useIncidentRequest";
+
+// Mock @backstage/core-plugin-api so useApi returns our fake client
+vi.mock("@backstage/core-plugin-api", () => ({
+  useApi: vi.fn(),
+  createApiRef: vi.fn(),
+}));
+
+import { useApi } from "@backstage/core-plugin-api";
+
+describe("useIncidentList", () => {
+  it("should return incidents from the API", async () => {
+    const mockResponse = { incidents: [{ id: "INC-1", name: "Test incident" }] };
+    (useApi as ReturnType<typeof vi.fn>).mockReturnValue({
+      request: vi.fn().mockResolvedValue(mockResponse),
+    });
+
+    const { result } = renderHook(() =>
+      useIncidentList(new URLSearchParams({ status: "active" }), []),
+    );
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    expect(result.current.value).toEqual(mockResponse);
+    expect(result.current.error).toBeUndefined();
+  });
+});
+
+describe("useAlertList", () => {
+  const mockAlert = {
+    id: "01KNS58MGQGMHDT8C2X8094MAF",
+    title: "High error rate",
+    description: "CPU exceeded 75% for 5 minutes",
+    status: "firing",
+    created_at: "2026-04-09T12:00:00Z",
+    updated_at: "2026-04-09T12:00:00Z",
+    deduplication_key: "abc123",
+    alert_source_id: "src-1",
+    source_url: "https://datadog.com/alerts/123",
+  };
+  const mockResponse = { alerts: [mockAlert], pagination_meta: { page_size: 25 } };
+
+  it("should return alerts from the API", async () => {
+    (useApi as ReturnType<typeof vi.fn>).mockReturnValue({
+      request: vi.fn().mockResolvedValue(mockResponse),
+    });
+
+    const { result } = renderHook(() => useAlertList());
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    expect(result.current.value).toEqual(mockResponse);
+    expect(result.current.error).toBeUndefined();
+  });
+
+  it("passes the status filter as a query param", async () => {
+    const mockRequest = vi.fn().mockResolvedValue(mockResponse);
+    (useApi as ReturnType<typeof vi.fn>).mockReturnValue({ request: mockRequest });
+
+    const { result } = renderHook(() => useAlertList("firing"));
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    expect(mockRequest).toHaveBeenCalledWith(
+      expect.objectContaining({ path: expect.stringContaining("status%5Bone_of%5D=firing") }),
+    );
+  });
+
+  it("does not pass a status param when status is undefined", async () => {
+    const mockRequest = vi.fn().mockResolvedValue(mockResponse);
+    (useApi as ReturnType<typeof vi.fn>).mockReturnValue({ request: mockRequest });
+
+    const { result } = renderHook(() => useAlertList(undefined));
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    expect(mockRequest).toHaveBeenCalledWith(
+      expect.objectContaining({ path: expect.not.stringContaining("status") }),
+    );
+  });
+
+  it("re-fetches when deps change", async () => {
+    const mockRequest = vi.fn().mockResolvedValue(mockResponse);
+    (useApi as ReturnType<typeof vi.fn>).mockReturnValue({ request: mockRequest });
+
+    let reload = false;
+    const { result, rerender } = renderHook(() => useAlertList("firing", [reload]));
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(mockRequest).toHaveBeenCalledTimes(1);
+
+    act(() => { reload = true; });
+    rerender();
+
+    await waitFor(() => expect(mockRequest).toHaveBeenCalledTimes(2));
+  });
+});
+
+describe("useIncidentAlertList", () => {
+  it("returns empty immediately when no incident IDs are given", async () => {
+    (useApi as ReturnType<typeof vi.fn>).mockReturnValue({
+      request: vi.fn(),
+    });
+
+    const { result } = renderHook(() => useIncidentAlertList([]));
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    expect(result.current.value?.incident_alerts).toEqual([]);
+    expect(result.current.error).toBeUndefined();
+  });
+
+  it("makes one request per incident ID and flattens results", async () => {
+    const mockRequest = vi.fn()
+      .mockResolvedValueOnce({ incident_alerts: [{ id: "ia-1", alert: { id: "a-1" }, incident: { id: "inc-1" } }], pagination_meta: { page_size: 25 } })
+      .mockResolvedValueOnce({ incident_alerts: [{ id: "ia-2", alert: { id: "a-2" }, incident: { id: "inc-2" } }], pagination_meta: { page_size: 25 } });
+
+    (useApi as ReturnType<typeof vi.fn>).mockReturnValue({ request: mockRequest });
+
+    const { result } = renderHook(() => useIncidentAlertList(["inc-1", "inc-2"]));
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    expect(mockRequest).toHaveBeenCalledTimes(2);
+    expect(result.current.value?.incident_alerts).toHaveLength(2);
+    expect(result.current.value?.incident_alerts.map(ia => ia.id)).toEqual(["ia-1", "ia-2"]);
+  });
+
+  it("re-fetches when deps change even if incident IDs are unchanged", async () => {
+    const mockRequest = vi.fn().mockResolvedValue({
+      incident_alerts: [{ id: "ia-1", alert: { id: "a-1" }, incident: { id: "inc-1" } }],
+      pagination_meta: { page_size: 25 },
+    });
+    (useApi as ReturnType<typeof vi.fn>).mockReturnValue({ request: mockRequest });
+
+    let reload = false;
+    const { result, rerender } = renderHook(() => useIncidentAlertList(["inc-1"], [reload]));
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(mockRequest).toHaveBeenCalledTimes(1);
+
+    act(() => { reload = true; });
+    rerender();
+
+    await waitFor(() => expect(mockRequest).toHaveBeenCalledTimes(2));
+  });
+});
+
+describe("useAlertSourceList", () => {
+  it("should return alert sources from the API", async () => {
+    const mockResponse = {
+      alert_sources: [{ id: "src-1", name: "Datadog", source_type: "datadog" }],
+    };
+    (useApi as ReturnType<typeof vi.fn>).mockReturnValue({
+      request: vi.fn().mockResolvedValue(mockResponse),
+    });
+
+    const { result } = renderHook(() => useAlertSourceList());
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    expect(result.current.value).toEqual(mockResponse);
+    expect(result.current.error).toBeUndefined();
+  });
+});
+
+describe("useIdentity", () => {
+  it("should return identity from the API", async () => {
+    const mockIdentity = { current_user: { id: "user-1", name: "Alice" } };
+    (useApi as ReturnType<typeof vi.fn>).mockReturnValue({
+      request: vi.fn().mockResolvedValue(mockIdentity),
+    });
+
+    const { result } = renderHook(() => useIdentity());
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    expect(result.current.value).toEqual(mockIdentity);
+    expect(result.current.error).toBeUndefined();
+  });
+});

package/src/hooks/useIncidentRequest.ts

@@ -1,7 +1,7 @@
 import { useApi } from "@backstage/core-plugin-api";
 import { useAsync } from "react-use";
 import { IncidentApiRef } from "../api/client";
-import { definitions } from "../api/types";
+import { components } from "../api/types";
 import { DependencyList } from "react";
 
 export const useIncidentList = (
@@ -12,7 +12,7 @@ export const useIncidentList = (
 
   const { value, loading, error } = useAsync(async () => {
     return await IncidentApi.request<
-      definitions["IncidentsV2ListResponseBody"]
+      components["schemas"]["IncidentsListResultV2"]
     >({
       path: `/v2/incidents?${query.toString()}`,
     });
@@ -21,12 +21,65 @@ export const useIncidentList = (
   return { loading, error, value };
 };
 
+export const useAlertList = (status?: "firing" | "resolved", deps?: DependencyList) => {
+  const IncidentApi = useApi(IncidentApiRef);
+
+  const { value, loading, error } = useAsync(async () => {
+    const query = new URLSearchParams({ page_size: "25" });
+    if (status) query.set("status[one_of]", status);
+    return await IncidentApi.request<
+      components["schemas"]["AlertsListResultV2"]
+    >({
+      path: `/v2/alerts?${query.toString()}`,
+    });
+  }, [status, ...(deps ?? [])]);
+
+  return { loading, error, value };
+};
+
+export const useAlertSourceList = () => {
+  const IncidentApi = useApi(IncidentApiRef);
+
+  const { value, loading, error } = useAsync(async () => {
+    return await IncidentApi.request<
+      components["schemas"]["AlertSourcesListResultV2"]
+    >({
+      path: `/v2/alert_sources`,
+    });
+  });
+
+  return { loading, error, value };
+};
+
+export const useIncidentAlertList = (incidentIds: string[], deps?: DependencyList) => {
+  const IncidentApi = useApi(IncidentApiRef);
+
+  const { value, loading, error } = useAsync(async () => {
+    if (incidentIds.length === 0) {
+      return { incident_alerts: [], pagination_meta: { page_size: 25 } };
+    }
+    const results = await Promise.all(
+      incidentIds.map(id =>
+        IncidentApi.request<components["schemas"]["AlertsListIncidentAlertsResultV2"]>({
+          path: `/v2/incident_alerts?incident_id=${id}&page_size=25`,
+        }),
+      ),
+    );
+    return {
+      incident_alerts: results.flatMap(r => r.incident_alerts),
+      pagination_meta: { page_size: 25 },
+    };
+  }, [incidentIds.join(","), ...(deps ?? [])]);
+
+  return { loading, error, value };
+};
+
 export const useIdentity = () => {
   const IncidentApi = useApi(IncidentApiRef);
 
   const { value, loading, error } = useAsync(async () => {
     return await IncidentApi.request<
-      definitions["UtilitiesV1IdentityResponseBody"]
+      components["schemas"]["UtilitiesIdentityResultV1"]
     >({
       path: `/v1/identity`,
     });

package/src/hooks/useOnCallRequest.test.ts

@@ -0,0 +1,52 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { vi } from "vitest";
+import { useAllEscalationPaths, useAllSchedules } from "./useOnCallRequest";
+
+vi.mock("@backstage/core-plugin-api", () => ({
+  useApi: vi.fn(),
+  createApiRef: vi.fn(),
+}));
+
+import { useApi } from "@backstage/core-plugin-api";
+
+describe("useAllEscalationPaths", () => {
+  it("should return all escalation paths from the API", async () => {
+    const mockResponse = {
+      escalation_paths: [
+        { id: "ep-1", name: "Primary EP" },
+        { id: "ep-2", name: "Secondary EP" },
+      ],
+    };
+    (useApi as ReturnType<typeof vi.fn>).mockReturnValue({
+      request: vi.fn().mockResolvedValue(mockResponse),
+    });
+
+    const { result } = renderHook(() => useAllEscalationPaths([]));
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    expect(result.current.value).toEqual(mockResponse.escalation_paths);
+    expect(result.current.error).toBeUndefined();
+  });
+});
+
+describe("useAllSchedules", () => {
+  it("should return all schedules from the API", async () => {
+    const mockResponse = {
+      schedules: [
+        { id: "sched-1", name: "Primary Schedule" },
+        { id: "sched-2", name: "Secondary Schedule" },
+      ],
+    };
+    (useApi as ReturnType<typeof vi.fn>).mockReturnValue({
+      request: vi.fn().mockResolvedValue(mockResponse),
+    });
+
+    const { result } = renderHook(() => useAllSchedules([]));
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    expect(result.current.value).toEqual(mockResponse.schedules);
+    expect(result.current.error).toBeUndefined();
+  });
+});