@incident-io/backstage 0.0.9 → 0.0.11

package/src/components/EntityIncidentCard/index.tsx

@@ -36,12 +36,25 @@ 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 { useAsync } from "react-use";
-import { IncidentApiRef } from "../../api/client";
-import { definitions } from "../../api/types";
-import { getBaseUrl } from "../../config";
+import { useIncidentList, useIdentity } from "../../hooks/useIncidentRequest";
 import { IncidentListItem } from "../IncidentListItem";
 
+const IncorrectConfigCard = () => {
+  return (
+    <Card>
+      <CardHeader title="incident.io" />
+      <Divider />
+      <CardContent>
+        <Typography variant="subtitle1">
+          No custom field configuration was found. In order to display
+          incidents, this entity must be mapped to an incident.io custom field
+          ID in Backstage's app-config.yaml.
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+};
+
 // The card displayed on the entity page showing a handful of the most recent
 // incidents that are on-going for that component.
 export const EntityIncidentCard = ({
@@ -50,19 +63,16 @@ export const EntityIncidentCard = ({
   maxIncidents?: number;
 }) => {
   const config = useApi(configApiRef);
-  const baseUrl = getBaseUrl(config);
   const { entity } = useEntity();
-
-  const IncidentApi = useApi(IncidentApiRef);
+  const {
+    value: identityResponse,
+    loading: identityResponseLoading,
+    error: identityResponseError,
+  } = useIdentity();
 
   const [reload, setReload] = useState(false);
 
   const entityFieldID = getEntityFieldID(config, entity);
-
-  if (!entityFieldID) {
-    return <IncorrectConfigCard />;
-  }
-
   const entityID = `${entity.metadata.namespace}/${entity.metadata.name}`;
 
   // This query filters incidents for those that are associated with this
@@ -72,7 +82,25 @@ export const EntityIncidentCard = ({
 
   // This restricts the previous filter to focus only on live incidents.
   const queryLive = new URLSearchParams(query);
-  queryLive.set(`status_category[one_of]`, "live");
+  queryLive.set(`status_category[one_of]`, "active");
+
+  const {
+    value: incidentsResponse,
+    loading: incidentsLoading,
+    error: incidentsError,
+  } = useIncidentList(queryLive, [reload]);
+
+  const incidents = incidentsResponse?.incidents;
+
+  if (!entityFieldID) {
+    return <IncorrectConfigCard />;
+  }
+
+  if (incidentsLoading || identityResponseLoading || !identityResponse) {
+    return <Progress />;
+  }
+
+  const baseUrl = identityResponse.identity.dashboard_url;
 
   const createIncidentLink: IconLinkVerticalProps = {
     label: "Create incident",
@@ -88,20 +116,6 @@ export const EntityIncidentCard = ({
     href: `${baseUrl}/incidents?${query.toString()}`,
   };
 
-  const {
-    value: incidentsResponse,
-    loading: incidentsLoading,
-    error: incidentsError,
-  } = useAsync(async () => {
-    return await IncidentApi.request<
-      definitions["IncidentsV2ListResponseBody"]
-    >({
-      path: `/v2/incidents?${queryLive.toString()}`,
-    });
-  }, [reload]);
-
-  const incidents = incidentsResponse?.incidents;
-
   return (
     <Card>
       <CardHeader
@@ -125,10 +139,12 @@ export const EntityIncidentCard = ({
       />
       <Divider />
       <CardContent>
-        {incidentsLoading && <Progress />}
         {incidentsError && (
           <Alert severity="error">{incidentsError.message}</Alert>
         )}
+        {identityResponseError && (
+          <Alert severity="error">{identityResponseError.message}</Alert>
+        )}
         {!incidentsLoading && !incidentsError && incidents && (
           <>
             {incidents && incidents.length > 0 && (
@@ -167,22 +183,6 @@ export const EntityIncidentCard = ({
   );
 };
 
-const IncorrectConfigCard = () => {
-  return (
-    <Card>
-      <CardHeader title="incident.io" />
-      <Divider />
-      <CardContent>
-        <Typography variant="subtitle1">
-          No custom field configuration was found. In order to display
-          incidents, this entity must be mapped to an incident.io custom field
-          ID in Backstage's app-config.yaml.
-        </Typography>
-      </CardContent>
-    </Card>
-  );
-};
-
 // Find the ID of the custom field in incident that represents the association
 // to this type of entity.
 //

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

@@ -0,0 +1,55 @@
+import { TestApiProvider, renderInTestApp } from "@backstage/test-utils";
+import React from "react";
+import { IncidentApi, IncidentApiRef } from "../../api/client";
+import { HomePageIncidentCardContent } from "./Content";
+
+const mockIncidentApi: jest.Mocked<Partial<IncidentApi>> = {
+  request: jest.fn().mockResolvedValue({
+    incidents: [
+      {
+        id: "incident-id",
+        name: "Incident",
+        reference: "INC-1",
+        incident_status: {
+          id: "status-id",
+          category: "active",
+          name: "triage",
+        },
+        incident_role_assignments: [
+          {
+            assignee: {
+              name: "John Smith",
+            },
+            role: {
+              role_type: "lead",
+            },
+          },
+        ],
+        incident_timestamp_values: [
+          {
+            incident_timestamp: {
+              id: "01FCNDV6P870EA6S7TK1DSYD5H",
+              name: "reported",
+              rank: 1,
+            },
+            value: {
+              value: "2021-08-17T13:28:57.801578Z",
+            },
+          },
+        ],
+      },
+    ],
+  }),
+};
+
+describe("HomePageIncidentCardContent", () => {
+  it("should render a list of live incidents", async () => {
+    const { getByTestId } = await renderInTestApp(
+      <TestApiProvider apis={[[IncidentApiRef, mockIncidentApi]]}>
+        <HomePageIncidentCardContent />
+      </TestApiProvider>,
+    );
+
+    expect(getByTestId("chip-status-id")).toBeInTheDocument();
+  });
+});

package/src/components/HomePageIncidentCard/Content.tsx

@@ -0,0 +1,55 @@
+import { Progress } from "@backstage/core-components";
+import Link from "@material-ui/core/Link";
+import { Alert } from "@material-ui/lab";
+import React from "react";
+import { useIncidentList } from "../../hooks/useIncidentRequest";
+import { Typography, List } from "@material-ui/core";
+import { IncidentListItem } from "../IncidentListItem";
+import { configApiRef, useApi } from "@backstage/core-plugin-api";
+
+export const HomePageIncidentCardContent = () => {
+  const config = useApi(configApiRef);
+    const baseUrl = config.getOptionalString('incident.baseUrl') || "https://app.incident.io";
+
+  const query = new URLSearchParams();
+  query.set(`status_category[one_of]`, "active");
+  const { loading, error, value } = useIncidentList(query);
+  const incidents = value?.incidents;
+
+  if (loading) return <Progress />;
+  if (error) return <Alert severity="error">{error.message}</Alert>;
+
+  return (
+    <>
+      {incidents && incidents.length > 0 && (
+        <Typography variant="subtitle1">
+          There are <strong>{incidents.length}</strong> ongoing incidents.
+        </Typography>
+      )}
+      {incidents && incidents.length === 0 && (
+        <Typography variant="subtitle1">No ongoing incidents.</Typography>
+      )}
+      <List dense>
+        {incidents?.map((incident) => {
+          return (
+            <IncidentListItem
+              key={incident.id}
+              incident={incident}
+              baseUrl={baseUrl}
+            />
+          );
+        })}
+      </List>
+      <Typography variant="subtitle1">
+        Click to{" "}
+        <Link target="_blank" href={`${baseUrl}/incidents?${query.toString()}`}>
+          see more.
+        </Link>
+      </Typography>
+    </>
+  );
+};
+
+export const Content = () => {
+  return <HomePageIncidentCardContent />;
+};

package/src/components/HomePageIncidentCard/index.ts

@@ -0,0 +1 @@
+export { Content } from "./Content";

package/src/components/IncidentListItem/index.tsx

@@ -13,8 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { DateTime, Duration } from 'luxon';
-import { BackstageTheme } from '@backstage/theme';
+import { DateTime, Duration } from "luxon";
+import { BackstageTheme } from "@backstage/theme";
 import {
   Chip,
   IconButton,
@@ -24,27 +24,27 @@ import {
   Tooltip,
   Typography,
   makeStyles,
-} from '@material-ui/core';
-import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
-import React from 'react';
-import { definitions } from '../../api/types';
+} 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 => ({
+const useStyles = makeStyles<BackstageTheme>((theme) => ({
   listItemPrimary: {
-    display: 'flex', // vertically align with chip
-    fontWeight: 'bold',
+    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,
     },
   },
@@ -56,10 +56,10 @@ export const IncidentListItem = ({
   incident,
 }: {
   baseUrl: string;
-  incident: definitions['IncidentV2ResponseBody'];
+  incident: definitions["IncidentV2ResponseBody"];
 }) => {
   const classes = useStyles();
-  const reportedAt = incident.incident_timestamp_values?.find(ts =>
+  const reportedAt = incident.incident_timestamp_values?.find((ts) =>
     ts.incident_timestamp.name.match(/reported/i),
   );
 
@@ -70,9 +70,9 @@ export const IncidentListItem = ({
     new Date().getTime() - new Date(reportedAtDate).getTime();
   const sinceReportedLabel = DateTime.local()
     .minus(Duration.fromMillis(sinceReported))
-    .toRelative({ locale: 'en' });
-  const lead = incident.incident_role_assignments.find(roleAssignment => {
-    return roleAssignment.role.role_type === 'lead';
+    .toRelative({ locale: "en" });
+  const lead = incident.incident_role_assignments.find((roleAssignment) => {
+    return roleAssignment.role.role_type === "lead";
   });
 
   return (
@@ -86,7 +86,7 @@ export const IncidentListItem = ({
               size="small"
               variant="outlined"
               className={
-                ['live'].includes(incident.incident_status.category)
+                ["active"].includes(incident.incident_status.category)
                   ? classes.error
                   : classes.warning
               }
@@ -95,15 +95,15 @@ export const IncidentListItem = ({
           </>
         }
         primaryTypographyProps={{
-          variant: 'body1',
+          variant: "body1",
           className: classes.listItemPrimary,
         }}
         secondary={
           <Typography noWrap variant="body2" color="textSecondary">
-            Reported {sinceReportedLabel} and{' '}
+            Reported {sinceReportedLabel} and{" "}
             {lead?.assignee
               ? `${lead.assignee.name} is lead`
-              : 'the lead is unassigned'}
+              : "the lead is unassigned"}
             .
           </Typography>
         }

package/src/hooks/useIncidentRequest.ts

@@ -0,0 +1,36 @@
+import { useApi } from "@backstage/core-plugin-api";
+import { useAsync } from "react-use";
+import { IncidentApiRef } from "../api/client";
+import { definitions } from "../api/types";
+import { DependencyList } from "react";
+
+export const useIncidentList = (
+  query: URLSearchParams,
+  deps?: DependencyList,
+) => {
+  const IncidentApi = useApi(IncidentApiRef);
+
+  const { value, loading, error } = useAsync(async () => {
+    return await IncidentApi.request<
+      definitions["IncidentsV2ListResponseBody"]
+    >({
+      path: `/v2/incidents?${query.toString()}`,
+    });
+  }, deps);
+
+  return { loading, error, value };
+};
+
+export const useIdentity = () => {
+  const IncidentApi = useApi(IncidentApiRef);
+
+  const { value, loading, error } = useAsync(async () => {
+    return await IncidentApi.request<
+      definitions["UtilitiesV1IdentityResponseBody"]
+    >({
+      path: `/v1/identity`,
+    });
+  });
+
+  return { value, loading, error };
+};

package/src/index.ts

@@ -13,4 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { incidentPlugin, EntityIncidentCard } from './plugin';
+export {
+  incidentPlugin,
+  EntityIncidentCard,
+  HomePageIncidentCard,
+} from "./plugin";

package/src/plugin.ts

@@ -19,12 +19,13 @@ import {
   createPlugin,
   discoveryApiRef,
   identityApiRef,
-} from '@backstage/core-plugin-api';
+} from "@backstage/core-plugin-api";
+import {CardExtensionProps, createCardExtension} from "@backstage/plugin-home-react";
 
-import { IncidentApi, IncidentApiRef } from './api/client';
+import { IncidentApi, IncidentApiRef } from "./api/client";
 
 export const incidentPlugin = createPlugin({
-  id: 'incident',
+  id: "incident",
   apis: [
     createApiFactory({
       api: IncidentApiRef,
@@ -41,12 +42,20 @@ export const incidentPlugin = createPlugin({
 
 export const EntityIncidentCard = incidentPlugin.provide(
   createComponentExtension({
-    name: 'EntityIncidentCard',
+    name: "EntityIncidentCard",
     component: {
       lazy: () =>
-        import('./components/EntityIncidentCard').then(
-          m => m.EntityIncidentCard,
+        import("./components/EntityIncidentCard").then(
+          (m) => m.EntityIncidentCard,
         ),
     },
   }),
 );
+
+export const HomePageIncidentCard: (props: CardExtensionProps<unknown>) => React.JSX.Element = incidentPlugin.provide(
+  createCardExtension({
+    name: "HomePageIncidentCard",
+    title: "Ongoing Incidents",
+    components: () => import("./components/HomePageIncidentCard"),
+  }),
+);

package/src/setupTests.ts

@@ -13,5 +13,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import '@testing-library/jest-dom';
-import 'cross-fetch/polyfill';
+import "@testing-library/jest-dom";
+import "cross-fetch/polyfill";

package/dist/esm/index-08133e09.esm.js

@@ -1,188 +0,0 @@
-import { HeaderIconLinkRow, Progress } from '@backstage/core-components';
-import { useApi, configApiRef } from '@backstage/core-plugin-api';
-import { useEntity } from '@backstage/plugin-catalog-react';
-import { makeStyles, ListItem, ListItemText, Chip, Typography, ListItemSecondaryAction, Tooltip, IconButton, Card, CardHeader, Divider, CardContent, List } from '@material-ui/core';
-import Link from '@material-ui/core/Link';
-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 { useAsync } from 'react-use';
-import { I as IncidentApiRef } from './index-14b311c0.esm.js';
-import { DateTime, Duration } from 'luxon';
-import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
-
-function getBaseUrl(config) {
-  try {
-    const baseUrl = config.getString("incident.baseUrl");
-    if (baseUrl !== "") {
-      return baseUrl;
-    }
-  } catch (e) {
-  }
-  return "https://app.incident.io";
-}
-
-const useStyles = makeStyles((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
-    }
-  }
-}));
-const IncidentListItem = ({
-  baseUrl,
-  incident
-}) => {
-  var _a, _b;
-  const classes = useStyles();
-  const reportedAt = (_a = incident.incident_timestamp_values) == null ? void 0 : _a.find(
-    (ts) => ts.incident_timestamp.name.match(/reported/i)
-  );
-  const reportedAtDate = ((_b = reportedAt == null ? void 0 : reportedAt.value) == null ? void 0 : _b.value) || incident.created_at;
-  const sinceReported = (/* @__PURE__ */ new Date()).getTime() - new Date(reportedAtDate).getTime();
-  const sinceReportedLabel = DateTime.local().minus(Duration.fromMillis(sinceReported)).toRelative({ locale: "en" });
-  const lead = incident.incident_role_assignments.find((roleAssignment) => {
-    return roleAssignment.role.role_type === "lead";
-  });
-  return /* @__PURE__ */ React.createElement(ListItem, { dense: true, key: incident.id }, /* @__PURE__ */ React.createElement(
-    ListItemText,
-    {
-      primary: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        Chip,
-        {
-          "data-testid": `chip-${incident.incident_status.id}`,
-          label: incident.incident_status.name,
-          size: "small",
-          variant: "outlined",
-          className: ["live"].includes(incident.incident_status.category) ? classes.error : classes.warning
-        }
-      ), incident.reference, " ", incident.name),
-      primaryTypographyProps: {
-        variant: "body1",
-        className: classes.listItemPrimary
-      },
-      secondary: /* @__PURE__ */ React.createElement(Typography, { noWrap: true, variant: "body2", color: "textSecondary" }, "Reported ", sinceReportedLabel, " and", " ", (lead == null ? void 0 : lead.assignee) ? `${lead.assignee.name} is lead` : "the lead is unassigned", ".")
-    }
-  ), /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(Tooltip, { title: "View in incident.io", placement: "top" }, /* @__PURE__ */ React.createElement(
-    IconButton,
-    {
-      href: `${baseUrl}/incidents/${incident.id}`,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      color: "primary"
-    },
-    /* @__PURE__ */ React.createElement(OpenInBrowserIcon, null)
-  ))));
-};
-
-const EntityIncidentCard = ({
-  maxIncidents = 2
-}) => {
-  var _a;
-  const config = useApi(configApiRef);
-  const baseUrl = getBaseUrl(config);
-  const { entity } = useEntity();
-  const IncidentApi = useApi(IncidentApiRef);
-  const [reload, setReload] = useState(false);
-  const entityFieldID = getEntityFieldID(config, entity);
-  if (!entityFieldID) {
-    return /* @__PURE__ */ React.createElement(IncorrectConfigCard, null);
-  }
-  const entityID = `${entity.metadata.namespace}/${entity.metadata.name}`;
-  const query = new URLSearchParams();
-  query.set(`custom_field[${entityFieldID}][one_of]`, entityID);
-  const queryLive = new URLSearchParams(query);
-  queryLive.set(`status_category[one_of]`, "live");
-  const createIncidentLink = {
-    label: "Create incident",
-    disabled: false,
-    icon: /* @__PURE__ */ React.createElement(WhatshotIcon, null),
-    href: `${baseUrl}/incidents/create`
-  };
-  const viewIncidentsLink = {
-    label: "View past incidents",
-    disabled: false,
-    icon: /* @__PURE__ */ React.createElement(HistoryIcon, null),
-    href: `${baseUrl}/incidents?${query.toString()}`
-  };
-  const {
-    value: incidentsResponse,
-    loading: incidentsLoading,
-    error: incidentsError
-  } = useAsync(async () => {
-    return await IncidentApi.request({
-      path: `/v2/incidents?${queryLive.toString()}`
-    });
-  }, [reload]);
-  const incidents = incidentsResponse == null ? void 0 : incidentsResponse.incidents;
-  return /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(
-    CardHeader,
-    {
-      title: "incident.io",
-      action: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        IconButton,
-        {
-          component: Link,
-          "aria-label": "Refresh",
-          disabled: false,
-          title: "Refresh",
-          onClick: () => setReload(!reload)
-        },
-        /* @__PURE__ */ React.createElement(CachedIcon, null)
-      )),
-      subheader: /* @__PURE__ */ React.createElement(HeaderIconLinkRow, { links: [createIncidentLink, viewIncidentsLink] })
-    }
-  ), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(CardContent, null, incidentsLoading && /* @__PURE__ */ React.createElement(Progress, null), incidentsError && /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, incidentsError.message), !incidentsLoading && !incidentsError && incidents && /* @__PURE__ */ React.createElement(React.Fragment, null, incidents && incidents.length > 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1" }, "There are ", /* @__PURE__ */ React.createElement("strong", null, incidents.length), " ongoing incidents involving ", /* @__PURE__ */ React.createElement("strong", null, entity.metadata.name), "."), incidents && incidents.length === 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1" }, "No ongoing incidents."), /* @__PURE__ */ React.createElement(List, { dense: true }, (_a = incidents == null ? void 0 : incidents.slice(0, maxIncidents)) == null ? void 0 : _a.map((incident) => {
-    return /* @__PURE__ */ React.createElement(
-      IncidentListItem,
-      {
-        key: incident.id,
-        incident,
-        baseUrl
-      }
-    );
-  })), /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1" }, "Click to", " ", /* @__PURE__ */ React.createElement(
-    Link,
-    {
-      target: "_blank",
-      href: `${baseUrl}/incidents?${queryLive.toString()}`
-    },
-    "see more."
-  )))));
-};
-const IncorrectConfigCard = () => {
-  return /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, { title: "incident.io" }), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1" }, "No custom field configuration was found. In order to display incidents, this entity must be mapped to an incident.io custom field ID in Backstage's app-config.yaml.")));
-};
-function getEntityFieldID(config, 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");
-    default:
-      throw new Error(`unrecognised entity kind: ${entity.kind}`);
-  }
-}
-
-export { EntityIncidentCard };
-//# sourceMappingURL=index-08133e09.esm.js.map