@incident-io/backstage 0.1.0 → 0.2.0

package/src/components/AlertListItem/index.tsx

@@ -0,0 +1,82 @@
+import { DateTime } from "luxon";
+import {
+  Chip,
+  IconButton,
+  ListItem,
+  ListItemSecondaryAction,
+  ListItemText,
+  Tooltip,
+  Typography,
+} from "@material-ui/core";
+import OpenInBrowserIcon from "@material-ui/icons/OpenInBrowser";
+import { components } from "../../api/types";
+import { useStyles } from "../styles";
+
+// Single item in the list of on-going alerts.
+export const AlertListItem = ({
+  baseUrl,
+  alert,
+  source,
+  priority
+}: {
+  baseUrl: string;
+  alert: components["schemas"]["AlertV2"];
+  source: string;
+  priority?: string; 
+}) => {
+  const classes = useStyles();
+
+  const sinceCreatedLabel = DateTime.fromISO(alert.created_at).toRelative({ base: DateTime.now() });
+
+  return (
+    <ListItem dense key={alert.id}>
+      <ListItemText
+        primary={
+          <>
+            <Chip
+              data-testid={`chip-${alert.status}`}
+              label={alert.status}
+              size="small"
+              variant="outlined"
+              className={
+                ["firing"].includes(alert.status)
+                  ? classes.error
+                  : classes.success
+              }
+            />
+            {alert.title}
+            {priority && (
+              <Chip
+                data-testid={`chip-${priority}`}
+                label={priority}
+                size="small"
+                variant="outlined"
+              />
+            )}
+          </>
+        }
+        primaryTypographyProps={{
+          variant: "body1",
+          className: classes.listItemPrimary,
+        }}
+        secondary={
+          <Typography noWrap variant="body2" color="textSecondary">
+            Created {sinceCreatedLabel} from {source}.
+          </Typography>
+        }
+      />
+      <ListItemSecondaryAction>
+        <Tooltip title="View in incident.io" placement="top">
+          <IconButton
+            href={`${baseUrl}/on-call/alerts/${alert.id}/details`}
+            target="_blank"
+            rel="noopener noreferrer"
+            color="primary"
+          >
+            <OpenInBrowserIcon />
+          </IconButton>
+        </Tooltip>
+      </ListItemSecondaryAction>
+    </ListItem>
+  );
+};

package/src/components/EntityAlertCard/index.test.tsx

@@ -0,0 +1,242 @@
+/// <reference types="@testing-library/jest-dom" />
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+
+vi.mock("@backstage/core-plugin-api", () => ({
+  useApi: vi.fn(),
+  configApiRef: {},
+}));
+
+vi.mock("@backstage/plugin-catalog-react", () => ({
+  useEntity: vi.fn(),
+}));
+
+vi.mock("../../hooks/useIncidentRequest", () => ({
+  useIncidentList: vi.fn(),
+  useIncidentAlertList: vi.fn(),
+  useAlertList: vi.fn(),
+  useAlertSourceList: vi.fn(),
+  useIdentity: vi.fn(),
+}));
+
+vi.mock("@backstage/core-components", () => ({
+  Progress: () => <div data-testid="progress" />,
+}));
+
+vi.mock("../AlertListItem", () => ({
+  AlertListItem: ({ alert }: any) => (
+    <div data-testid={`alert-${alert.id}`}>{alert.title}</div>
+  ),
+}));
+
+vi.mock("../utils", () => ({
+  getEntityFieldID: vi.fn(),
+}));
+
+import { useApi } from "@backstage/core-plugin-api";
+import { useEntity } from "@backstage/plugin-catalog-react";
+import {
+  useIncidentList,
+  useIncidentAlertList,
+  useAlertList,
+  useAlertSourceList,
+  useIdentity,
+} from "../../hooks/useIncidentRequest";
+import { getEntityFieldID } from "../utils";
+import { EntityAlertCard } from "./index";
+
+const mockEntity = {
+  kind: "Component",
+  metadata: { name: "my-service", namespace: "default" },
+};
+
+const mockIdentityLoaded = {
+  value: { identity: { dashboard_url: "https://app.incident.io" } },
+  loading: false,
+  error: undefined,
+};
+
+const mockSourcesLoaded = {
+  value: { alert_sources: [] },
+  loading: false,
+  error: undefined,
+};
+
+beforeEach(() => {
+  (useEntity as ReturnType<typeof vi.fn>).mockReturnValue({
+    entity: mockEntity,
+  });
+  (useIdentity as ReturnType<typeof vi.fn>).mockReturnValue(mockIdentityLoaded);
+  (useAlertSourceList as ReturnType<typeof vi.fn>).mockReturnValue(
+    mockSourcesLoaded,
+  );
+  (useApi as ReturnType<typeof vi.fn>).mockReturnValue({
+    getOptional: () => "01FIELD123",
+    getOptionalString: () => undefined,
+  });
+});
+
+describe("EntityAlertCard", () => {
+  it("should show MissingConfigCard when getEntityFieldID returns undefined", () => {
+    (getEntityFieldID as ReturnType<typeof vi.fn>).mockReturnValue(undefined);
+    (useIncidentList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: undefined,
+      loading: false,
+      error: undefined,
+    });
+    (useIncidentAlertList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: undefined,
+      loading: false,
+      error: undefined,
+    });
+    (useAlertList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: undefined,
+      loading: false,
+      error: undefined,
+    });
+
+    render(<EntityAlertCard />);
+
+    expect(
+      screen.getByText(/No custom field configuration was found/i),
+    ).toBeInTheDocument();
+  });
+
+  it("should show progress when a hook is loading", () => {
+    (getEntityFieldID as ReturnType<typeof vi.fn>).mockReturnValue("01FIELD123");
+    (useIncidentList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: undefined,
+      loading: true,
+      error: undefined,
+    });
+    (useIncidentAlertList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: undefined,
+      loading: false,
+      error: undefined,
+    });
+    (useAlertList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: undefined,
+      loading: false,
+      error: undefined,
+    });
+
+    render(<EntityAlertCard />);
+
+    expect(screen.getByTestId("progress")).toBeInTheDocument();
+  });
+
+  it("should show 'No alerts.' when incidentIds is empty", () => {
+    (getEntityFieldID as ReturnType<typeof vi.fn>).mockReturnValue("01FIELD123");
+    (useIncidentList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: { incidents: [] },
+      loading: false,
+      error: undefined,
+    });
+    (useIncidentAlertList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: { incident_alerts: [] },
+      loading: false,
+      error: undefined,
+    });
+    (useAlertList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: { alerts: [] },
+      loading: false,
+      error: undefined,
+    });
+
+    render(<EntityAlertCard />);
+
+    expect(screen.getByText("No alerts.")).toBeInTheDocument();
+  });
+
+  it("should show alert count and AlertListItem when alerts are linked", () => {
+    (getEntityFieldID as ReturnType<typeof vi.fn>).mockReturnValue("01FIELD123");
+    (useIncidentList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: { incidents: [{ id: "inc-1" }] },
+      loading: false,
+      error: undefined,
+    });
+    (useIncidentAlertList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: { incident_alerts: [{ alert: { id: "alert-1" } }] },
+      loading: false,
+      error: undefined,
+    });
+    (useAlertList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: {
+        alerts: [
+          {
+            id: "alert-1",
+            title: "High error rate",
+            status: "firing",
+            alert_source_id: "src-1",
+            attributes: [],
+          },
+        ],
+      },
+      loading: false,
+      error: undefined,
+    });
+
+    render(<EntityAlertCard />);
+
+    expect(
+      screen.getByText((_, el) => {
+        if (!el) return false;
+        return (
+          el.tagName === "H6" &&
+          !!el.textContent?.includes("There are") &&
+          !!el.textContent?.includes("1") &&
+          !!el.textContent?.includes("firing")
+        );
+      }),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId("alert-alert-1")).toBeInTheDocument();
+  });
+
+  it("should render a refresh button", () => {
+    (getEntityFieldID as ReturnType<typeof vi.fn>).mockReturnValue("01FIELD123");
+    (useIncidentList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: { incidents: [] },
+      loading: false,
+      error: undefined,
+    });
+    (useIncidentAlertList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: { incident_alerts: [] },
+      loading: false,
+      error: undefined,
+    });
+    (useAlertList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: { alerts: [] },
+      loading: false,
+      error: undefined,
+    });
+
+    render(<EntityAlertCard />);
+
+    expect(screen.getByRole("button", { name: "Refresh" })).toBeInTheDocument();
+  });
+
+  it("should render status filter tabs", () => {
+    (getEntityFieldID as ReturnType<typeof vi.fn>).mockReturnValue("01FIELD123");
+    (useIncidentList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: { incidents: [] },
+      loading: false,
+      error: undefined,
+    });
+    (useIncidentAlertList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: { incident_alerts: [] },
+      loading: false,
+      error: undefined,
+    });
+    (useAlertList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: { alerts: [] },
+      loading: false,
+      error: undefined,
+    });
+
+    render(<EntityAlertCard />);
+
+    expect(screen.getByRole("tab", { name: "Firing" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Resolved" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "All" })).toBeInTheDocument();
+  });
+});

package/src/components/EntityAlertCard/index.tsx

@@ -0,0 +1,168 @@
+import { Progress } from "@backstage/core-components";
+import { configApiRef, useApi } from "@backstage/core-plugin-api";
+import { useEntity } from "@backstage/plugin-catalog-react";
+import {
+  Box,
+  Card,
+  CardContent,
+  CardHeader,
+  Divider,
+  IconButton,
+  List,
+  Tab,
+  Tabs,
+  Typography,
+} from "@material-ui/core";
+import Link from "@material-ui/core/Link";
+import { Alert } from "@material-ui/lab";
+import CachedIcon from "@material-ui/icons/Cached";
+import { useState } from "react";
+import {
+  useAlertList,
+  useAlertSourceList,
+  useIdentity,
+  useIncidentAlertList,
+  useIncidentList,
+} from "../../hooks/useIncidentRequest";
+import { getEntityFieldID } from "../utils";
+import { AlertListItem } from "../AlertListItem";
+
+type StatusFilter = "firing" | "resolved" | undefined;
+
+const STATUS_TABS: { label: string; value: StatusFilter }[] = [
+  { label: "Firing", value: "firing" },
+  { label: "Resolved", value: "resolved" },
+  { label: "All", value: undefined },
+];
+
+const IncorrectConfigCard = () => (
+  <Card>
+    <CardHeader title="Alerts" />
+    <Divider />
+    <CardContent>
+      <Typography variant="subtitle1">
+        No custom field configuration was found. In order to display alerts,
+        this entity must be mapped to an incident.io custom field ID in
+        Backstage's app-config.yaml.
+      </Typography>
+    </CardContent>
+  </Card>
+);
+
+export const EntityAlertCard = () => {
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>("firing");
+  const [reload, setReload] = useState(false);
+
+  const config = useApi(configApiRef);
+  const { entity } = useEntity();
+  const entityFieldID = getEntityFieldID(config, entity);
+  const entityID = `${entity.metadata.namespace}/${entity.metadata.name}`;
+
+  // query for incidents associated with this entity
+  const incidentQuery = new URLSearchParams();
+  incidentQuery.set(`custom_field[${entityFieldID}][one_of]`, entityID);
+
+  const { value: incidentsResponse, loading: incidentsLoading } =
+    useIncidentList(incidentQuery, [reload]);
+  const incidentIds = (incidentsResponse?.incidents ?? []).map(i => i.id);
+
+  // query for alerts linked to those incidents
+  const { value: incidentAlertsResponse, loading: incidentAlertsLoading } =
+    useIncidentAlertList(incidentIds, [reload]);
+  const linkedAlertIds = new Set(
+    (incidentAlertsResponse?.incident_alerts ?? []).map(ia => ia.alert.id),
+  );
+
+  const { value: alertsResponse, loading: alertsLoading, error } =
+    useAlertList(statusFilter, [reload]);
+  const { value: sourcesResponse } = useAlertSourceList();
+  const { value: identityResponse } = useIdentity();
+
+  // get alerts for this entity's incidents
+  const allAlerts = alertsResponse?.alerts ?? [];
+  const alerts = incidentIds.length > 0
+    ? allAlerts.filter(a => linkedAlertIds.has(a.id))
+    : [];
+
+  const baseUrl = identityResponse?.identity.dashboard_url ?? "";
+
+  const sourceById = Object.fromEntries(
+    (sourcesResponse?.alert_sources ?? []).map(s => [s.id, s]),
+  );
+
+  const currentTabIndex = STATUS_TABS.findIndex(t => t.value === statusFilter);
+  if (!entityFieldID) {
+    return <IncorrectConfigCard />;
+  }
+
+  if (incidentsLoading || incidentAlertsLoading || alertsLoading) {
+    return <Progress />;
+  }
+
+  return (
+    <Card>
+      <CardHeader
+        title="incident.io Alerts"
+        action={
+          <>
+            <IconButton
+              component={Link}
+              aria-label="Refresh"
+              disabled={false}
+              title="Refresh"
+              onClick={() => setReload(!reload)}
+            >
+              <CachedIcon />
+            </IconButton>
+          </>
+        }
+      />
+      <Divider />
+      <Tabs
+        value={currentTabIndex}
+        onChange={(_, idx) => setStatusFilter(STATUS_TABS[idx].value)}
+        indicatorColor="primary"
+        textColor="primary"
+      >
+        {STATUS_TABS.map(tab => (
+          <Tab key={tab.label} label={tab.label} />
+        ))}
+      </Tabs>
+      <Divider />
+      <CardContent>
+        {error && <Alert severity="error">{error.message}</Alert>}
+        {!error && alerts.length === 0 && (
+          <Typography variant="subtitle1">No alerts.</Typography>
+        )}
+        {!error && alerts.length > 0 && (
+          <>
+            <Typography variant="subtitle1">
+              There are <strong>{alerts.length}</strong>{" "}
+              {statusFilter ?? ""} alerts.
+            </Typography>
+            <Box style={{ maxHeight: 400, overflowY: "auto" }}>
+              <List dense>
+                {alerts.map(alert => (
+                  <AlertListItem
+                    key={alert.id}
+                    alert={alert}
+                    baseUrl={baseUrl}
+                    source={sourceById[alert.alert_source_id]?.name ?? "-"}
+                    priority={alert.attributes.find(a => a.attribute.name === "Priority")?.value?.label}
+                  />
+                ))}
+              </List>
+            </Box>
+          </>
+        )}
+        {baseUrl && (
+          <Typography variant="subtitle1">
+            <Link target="_blank" href={`${baseUrl}/on-call/alerts`}>
+              View all alerts
+            </Link>
+          </Typography>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

package/src/components/EntityIncidentCard/index.test.tsx

@@ -0,0 +1,135 @@
+/// <reference types="@testing-library/jest-dom" />
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+
+vi.mock("@backstage/core-plugin-api", () => ({
+  useApi: vi.fn(),
+  configApiRef: {},
+}));
+
+vi.mock("@backstage/plugin-catalog-react", () => ({
+  useEntity: vi.fn(),
+}));
+
+vi.mock("../../hooks/useIncidentRequest", () => ({
+  useIncidentList: vi.fn(),
+  useIdentity: vi.fn(),
+}));
+
+vi.mock("@backstage/core-components", () => ({
+  Progress: () => <div data-testid="progress" />,
+  HeaderIconLinkRow: () => null,
+}));
+
+vi.mock("../IncidentListItem", () => ({
+  IncidentListItem: ({ incident }: any) => <div>{incident.name}</div>,
+}));
+
+import { useApi } from "@backstage/core-plugin-api";
+import { useEntity } from "@backstage/plugin-catalog-react";
+import { useIncidentList, useIdentity } from "../../hooks/useIncidentRequest";
+import { EntityIncidentCard } from "./index";
+
+const mockEntity = {
+  kind: "Component",
+  metadata: { name: "my-service", namespace: "default" },
+};
+
+const mockIdentityLoaded = {
+  value: { identity: { dashboard_url: "https://app.incident.io" } },
+  loading: false,
+  error: undefined,
+};
+
+beforeEach(() => {
+  (useEntity as ReturnType<typeof vi.fn>).mockReturnValue({ entity: mockEntity });
+});
+
+describe("EntityIncidentCard", () => {
+  it("should show misconfiguration message when no custom field is configured", () => {
+    (useApi as ReturnType<typeof vi.fn>).mockReturnValue({
+      getOptional: () => undefined,
+    });
+    (useIdentity as ReturnType<typeof vi.fn>).mockReturnValue(mockIdentityLoaded);
+    (useIncidentList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: undefined,
+      loading: false,
+      error: undefined,
+    });
+
+    render(<EntityIncidentCard />);
+
+    expect(
+      screen.getByText(/No custom field configuration was found/i),
+    ).toBeInTheDocument();
+  });
+
+  it("should show a loading indicator while fetching", () => {
+    (useApi as ReturnType<typeof vi.fn>).mockReturnValue({
+      getOptional: () => "01FIELD123",
+    });
+    (useIdentity as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: undefined,
+      loading: true,
+      error: undefined,
+    });
+    (useIncidentList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: undefined,
+      loading: true,
+      error: undefined,
+    });
+
+    render(<EntityIncidentCard />);
+
+    expect(screen.getByTestId("progress")).toBeInTheDocument();
+  });
+
+  it("should show empty state when there are no ongoing incidents", () => {
+    (useApi as ReturnType<typeof vi.fn>).mockReturnValue({
+      getOptional: () => "01FIELD123",
+    });
+    (useIdentity as ReturnType<typeof vi.fn>).mockReturnValue(mockIdentityLoaded);
+    (useIncidentList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: { incidents: [] },
+      loading: false,
+      error: undefined,
+    });
+
+    render(<EntityIncidentCard />);
+
+    expect(screen.getByText(/No ongoing incidents/i)).toBeInTheDocument();
+  });
+
+  it("should show incident count and list items when incidents exist", () => {
+    (useApi as ReturnType<typeof vi.fn>).mockReturnValue({
+      getOptional: () => "01FIELD123",
+    });
+    (useIdentity as ReturnType<typeof vi.fn>).mockReturnValue(mockIdentityLoaded);
+    (useIncidentList as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: {
+        incidents: [
+          { id: "INC-1", name: "Database down" },
+          { id: "INC-2", name: "API latency spike" },
+        ],
+      },
+      loading: false,
+      error: undefined,
+    });
+
+    render(<EntityIncidentCard />);
+
+    expect(
+      screen.getByText((_, el) => {
+        if (!el) return false;
+        return (
+          el.tagName === "H6" &&
+          !!el.textContent?.includes("There are") &&
+          !!el.textContent?.includes("2") &&
+          !!el.textContent?.includes("ongoing incidents")
+        );
+      })
+    ).toBeInTheDocument();
+    expect(screen.getByText("Database down")).toBeInTheDocument();
+    expect(screen.getByText("API latency spike")).toBeInTheDocument();
+  });
+});

package/src/components/EntityIncidentCard/index.tsx

@@ -13,13 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Entity } from "@backstage/catalog-model";
 import {
   HeaderIconLinkRow,
   IconLinkVerticalProps,
   Progress,
 } from "@backstage/core-components";
-import { ConfigApi, configApiRef, useApi } from "@backstage/core-plugin-api";
+import { configApiRef, useApi } from "@backstage/core-plugin-api";
 import { useEntity } from "@backstage/plugin-catalog-react";
 import {
   Card,
@@ -35,9 +34,10 @@ import CachedIcon from "@material-ui/icons/Cached";
 import HistoryIcon from "@material-ui/icons/History";
 import WhatshotIcon from "@material-ui/icons/Whatshot";
 import { Alert } from "@material-ui/lab";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useIncidentList, useIdentity } from "../../hooks/useIncidentRequest";
 import { IncidentListItem } from "../IncidentListItem";
+import { getEntityFieldID } from "../utils";
 
 const IncorrectConfigCard = () => {
   return (
@@ -183,23 +183,3 @@ export const EntityIncidentCard = ({
   );
 };
 
-// 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.
-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}`);
-  }
-}