@incident-io/backstage 0.0.2

package/src/components/EntityIncidentCard/index.tsx

@@ -0,0 +1,182 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * 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 { useEntity } from '@backstage/plugin-catalog-react';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Divider,
+  IconButton,
+  List,
+  Typography,
+} 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 { IncidentApiRef } from '../../api/client';
+import { definitions } from '../../api/types';
+import { getBaseUrl } from '../../config';
+import { IncidentListItem } from '../IncidentListItem';
+
+// 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 = ({
+  maxIncidents = 2,
+}: {
+  maxIncidents?: number;
+}) => {
+  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);
+  const entityID = `${entity.metadata.namespace}/${entity.metadata.name}`;
+
+  // This query filters incidents for those that are associated with this
+  // entity.
+  const query = new URLSearchParams();
+  query.set(`custom_field[${entityFieldID}][one_of]`, entityID);
+
+  // This restricts the previous filter to focus only on live incidents.
+  const queryLive = new URLSearchParams(query);
+  queryLive.set(`status_category[one_of]`, 'live');
+
+  const createIncidentLink: IconLinkVerticalProps = {
+    label: 'Create incident',
+    disabled: false,
+    icon: <WhatshotIcon />,
+    href: `${baseUrl}/incidents/create`,
+  };
+
+  const viewIncidentsLink: IconLinkVerticalProps = {
+    label: 'View past incidents',
+    disabled: false,
+    icon: <HistoryIcon />,
+    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
+        title="Incidents"
+        action={
+          <>
+            <IconButton
+              component={Link}
+              aria-label="Refresh"
+              disabled={false}
+              title="Refresh"
+              onClick={() => setReload(!reload)}
+            >
+              <CachedIcon />
+            </IconButton>
+          </>
+        }
+        subheader={
+          <HeaderIconLinkRow links={[createIncidentLink, viewIncidentsLink]} />
+        }
+      />
+      <Divider />
+      <CardContent>
+        {incidentsLoading && <Progress />}
+        {incidentsError && (
+          <Alert severity="error">{incidentsError.message}</Alert>
+        )}
+        {!incidentsLoading && !incidentsError && incidents && (
+          <>
+            {incidents && incidents.length >= 0 && (
+              <Typography variant="subtitle1">
+                There are <strong>{incidents.length}</strong> ongoing incidents
+                involving <strong>{entity.metadata.name}</strong>.
+              </Typography>
+            )}
+            {incidents && incidents.length === 0 && (
+              <Typography variant="subtitle1">No ongoing incidents.</Typography>
+            )}
+            <List dense>
+              {incidents?.slice(0, maxIncidents)?.map(incident => {
+                return (
+                  <IncidentListItem
+                    key={incident.id}
+                    incident={incident}
+                    baseUrl={baseUrl}
+                  />
+                );
+              })}
+            </List>
+            <Typography variant="subtitle1">
+              Click to{' '}
+              <Link
+                target="_blank"
+                href={`${baseUrl}/incidents?${queryLive.toString()}`}
+              >
+                see more.
+              </Link>
+            </Typography>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+// 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.get('integrations.incident.fields.api');
+    case 'Component':
+      return config.get('integrations.incident.fields.component');
+    case 'Domain':
+      return config.get('integrations.incident.fields.domain');
+    case 'System':
+      return config.get('integrations.incident.fields.system');
+    default:
+      throw new Error(`unrecognised entity kind: ${entity.kind}`);
+  }
+}

package/src/components/IncidentListItem/index.tsx

@@ -0,0 +1,125 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * 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 {
+  Chip,
+  IconButton,
+  ListItem,
+  ListItemSecondaryAction,
+  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,
+    },
+  },
+}));
+
+// Single item in the list of on-going incidents.
+export const IncidentListItem = ({
+  baseUrl,
+  incident,
+}: {
+  baseUrl: string;
+  incident: definitions['IncidentV2ResponseBody'];
+}) => {
+  const classes = useStyles();
+  const reportedAt = incident.incident_timestamp_values?.find(ts =>
+    ts.incident_timestamp.name.match(/reported/i),
+  );
+
+  // If reported isn't here for some reason, use created at.
+  const reportedAtDate = reportedAt?.value?.value || incident.created_at;
+
+  const sinceReported =
+    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 (
+    <ListItem dense key={incident.id}>
+      <ListItemText
+        primary={
+          <>
+            <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={
+          <Typography noWrap variant="body2" color="textSecondary">
+            Reported {sinceReportedLabel} and{' '}
+            {lead?.assignee
+              ? `${lead.assignee.name} is lead`
+              : 'the lead is unassigned'}
+            .
+          </Typography>
+        }
+      />
+      <ListItemSecondaryAction>
+        <Tooltip title="View in incident.io" placement="top">
+          <IconButton
+            href={`${baseUrl}/incidents/${incident.id}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            color="primary"
+          >
+            <OpenInBrowserIcon />
+          </IconButton>
+        </Tooltip>
+      </ListItemSecondaryAction>
+    </ListItem>
+  );
+};

package/src/config.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ConfigApi } from '@backstage/core-plugin-api';
+
+// Find the baseUrl of the incident dashboard.
+export function getBaseUrl(config: ConfigApi) {
+  try {
+    const baseUrl = config.getString('incident.baseUrl');
+    if (baseUrl !== '') {
+      return baseUrl;
+    }
+  } catch (e) {
+    // no action
+  }
+
+  return 'https://app.incident.io';
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { incidentPlugin, EntityIncidentCard } from './plugin';

package/src/plugin.test.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { incidentPlugin } from "./plugin";
+
+describe("incident", () => {
+  it("should export plugin", () => {
+    expect(incidentPlugin).toBeDefined();
+  });
+});

package/src/plugin.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+  createApiFactory,
+  createComponentExtension,
+  createPlugin,
+  discoveryApiRef,
+  identityApiRef,
+} from '@backstage/core-plugin-api';
+
+import { IncidentApi, IncidentApiRef } from './api/client';
+
+export const incidentPlugin = createPlugin({
+  id: 'incident',
+  apis: [
+    createApiFactory({
+      api: IncidentApiRef,
+      deps: { discoveryApi: discoveryApiRef, identityApi: identityApiRef },
+      factory: ({ discoveryApi, identityApi }) => {
+        return new IncidentApi({
+          discoveryApi: discoveryApi,
+          identityApi: identityApi,
+        });
+      },
+    }),
+  ],
+});
+
+export const EntityIncidentCard = incidentPlugin.provide(
+  createComponentExtension({
+    name: 'EntityIncidentCard',
+    component: {
+      lazy: () =>
+        import('./components/EntityIncidentCard').then(
+          m => m.EntityIncidentCard,
+        ),
+    },
+  }),
+);

package/src/setupTests.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import '@testing-library/jest-dom';
+import 'cross-fetch/polyfill';