@incident-io/backstage 0.0.15 → 0.2.0

package/README.md

@@ -36,13 +36,30 @@ First, install the incident plugin via a CLI:
 yarn --cwd packages/app add @incident-io/backstage
 ```
 
+### Using the new extension-based architecture
+
+Next, enable the plugin's extensions in `app-config.yaml`. No other code changes are needed:
+
+```yaml
+app:
+  ...
+  extensions:
+    - entity-card:incident-io/EntityIncidentCard: true
+    - entity-card:incident-io/EntityAlertCard: true
+    - entity-card:incident-io/EntityOnCallCard: true
+    ... 
+```
+
+
+### Using the legacy Backstage system 
+
 Next, add the plugin to `EntityPage.tsx` in
 `packages/app/src/components/catalog` by adding the following code snippets.
 
 Add the following imports to the top of the file:
 
 ```ts
-import { EntityIncidentCard } from "@incident-io/backstage";
+import { EntityIncidentCard, EntityAlertCard, EntityOnCallCard } from "@incident-io/backstage";
 ```
 
 Find `const overviewContent` in `EntityPage.tsx`, and add the following snippet
@@ -53,6 +70,12 @@ tag:
 <Grid item md={6}>
   <EntityIncidentCard />
 </Grid>
+<Grid item md={6}>
+  <EntityAlertCard />
+</Grid>
+<Grid item md={6}>
+  <EntityOnCallCard />
+</Grid>
 ```
 
 If you want to include the list of incidents in places like the page for a
@@ -96,3 +119,14 @@ If you don't have a custom field set up for one of these entities, then you
 can omit that field completely. If you try and include the `EntityIncidentCard`
 on the page for an entity which doesn't have the configuration, we'll show you
 an error that directs you to update your config.
+
+If you are using the on-call card, you must also provide the ID of the
+incident.io catalog type that maps to your Backstage components. You can find
+this in the URL when viewing the type 
+(e.g. `https://app.incident.io/~/catalog/01ABC...`):
+
+```yaml
+incident:
+  onCall:
+    catalogTypeId: "<id-of-backstage-component-catalog-type>"
+```

package/config.d.ts

@@ -18,11 +18,6 @@ export interface Config {
    * @visibility frontend
    */
   incident?: {
-    /**
-     * The API key that provides access to the incident.io API.
-     * @see https://app.incident.io/settings/api-keys
-     */
-    apiKey: string;
 
     /**
      * The base URL of the incident dashboard, only useful in development.
@@ -38,6 +33,17 @@ export interface Config {
     /*
      * @visibility frontend
      */
+    /*
+     * @visibility frontend
+     */
+    onCall?: {
+      /**
+       * The catalog type ID used to look up on-call information for entities.
+       * @visibility frontend
+       */
+      catalogTypeId?: string;
+    };
+
     fields: {
       /**
        * The custom field ID that associated API entities to incidents.

package/dist/alpha.d.ts

@@ -0,0 +1,5 @@
+import { FrontendPlugin } from '@backstage/frontend-plugin-api';
+
+declare const plugin: FrontendPlugin;
+
+export { plugin as default };

package/dist/alpha.esm.js

@@ -0,0 +1,91 @@
+import { jsx } from 'react/jsx-runtime';
+import { ApiBlueprint, createFrontendPlugin } from '@backstage/frontend-plugin-api';
+import { fetchApiRef, discoveryApiRef } from '@backstage/core-plugin-api';
+import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha';
+import { HomePageWidgetBlueprint } from '@backstage/plugin-home-react/alpha';
+import { IncidentApiRef, IncidentApi } from './api/client.esm.js';
+
+const incidentApi = ApiBlueprint.make({
+  params: (defineParams) => defineParams({
+    api: IncidentApiRef,
+    deps: {
+      discoveryApi: discoveryApiRef,
+      fetchApi: fetchApiRef
+    },
+    factory: ({ discoveryApi, fetchApi }) => {
+      return new IncidentApi({
+        discoveryApi,
+        fetchApi
+      });
+    }
+  })
+});
+const entityIncidentCard = EntityCardBlueprint.make({
+  name: "EntityIncidentCard",
+  params: {
+    loader: async () => import('./components/EntityIncidentCard/index.esm.js').then((m) => /* @__PURE__ */ jsx(m.EntityIncidentCard, {}))
+  }
+});
+const entityAlertCard = EntityCardBlueprint.make({
+  name: "EntityAlertCard",
+  params: {
+    loader: async () => import('./components/EntityAlertCard/index.esm.js').then((m) => /* @__PURE__ */ jsx(m.EntityAlertCard, {}))
+  }
+});
+const entityOnCallCard = EntityCardBlueprint.make({
+  name: "EntityOnCallCard",
+  params: {
+    loader: async () => import('./components/EntityOnCallCard/index.esm.js').then((m) => /* @__PURE__ */ jsx(m.EntityOnCallCard, {}))
+  }
+});
+const homePageIncidentCard = HomePageWidgetBlueprint.make({
+  name: "HomePageIncidentCard",
+  params: {
+    title: "Ongoing Incidents",
+    components: () => import('./components/HomePageIncidentCard/index.esm.js'),
+    settings: {
+      schema: {
+        type: "object",
+        properties: {
+          filterType: {
+            type: "string",
+            title: "Filter Type",
+            description: "Whether to filter on status category or status",
+            oneOf: [
+              { enum: ["status_category"], title: "Status Category" },
+              { enum: ["status"], title: "Status" }
+            ],
+            default: "status_category"
+          },
+          filter: {
+            type: "string",
+            title: "Filter",
+            description: "The filter to use. This is a string that will be passed to the API.",
+            default: "active"
+          }
+        }
+      }
+    }
+  }
+});
+const homePageAlertCard = HomePageWidgetBlueprint.make({
+  name: "HomePageAlertCard",
+  params: {
+    title: "Ongoing Alerts",
+    components: () => import('./components/HomePageAlertCard/index.esm.js')
+  }
+});
+const homePageOnCallCard = HomePageWidgetBlueprint.make({
+  name: "HomePageOnCallCard",
+  params: {
+    title: "On-call",
+    components: () => import('./components/HomePageOnCallCard/index.esm.js')
+  }
+});
+const plugin = createFrontendPlugin({
+  pluginId: "incident",
+  extensions: [incidentApi, entityIncidentCard, entityAlertCard, homePageIncidentCard, homePageAlertCard, homePageOnCallCard, entityOnCallCard]
+});
+
+export { plugin as default };
+//# sourceMappingURL=alpha.esm.js.map

package/dist/alpha.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alpha.esm.js","sources":["../src/alpha.tsx"],"sourcesContent":["import {\n  ApiBlueprint,\n  createFrontendPlugin,\n  FrontendPlugin,\n} from \"@backstage/frontend-plugin-api\";\nimport {\n  discoveryApiRef,\n  fetchApiRef,\n} from \"@backstage/core-plugin-api\";\nimport { EntityCardBlueprint } from \"@backstage/plugin-catalog-react/alpha\";\nimport { HomePageWidgetBlueprint } from \"@backstage/plugin-home-react/alpha\";\nimport { IncidentApi, IncidentApiRef } from \"./api/client\";\n\nconst incidentApi = ApiBlueprint.make({\n  params: defineParams =>\n    defineParams({\n      api: IncidentApiRef,\n      deps: {\n        discoveryApi: discoveryApiRef,\n        fetchApi: fetchApiRef,\n      },\n      factory: ({ discoveryApi, fetchApi }) =>{ \n        return new IncidentApi({ \n          discoveryApi: discoveryApi, \n          fetchApi: fetchApi \n        });\n      },\n    }),\n});\n\nconst entityIncidentCard = EntityCardBlueprint.make({\n  name: \"EntityIncidentCard\",\n  params: {\n    loader: async () => \n      import(\"./components/EntityIncidentCard\").then(m=><m.EntityIncidentCard />),\n  },\n});\n\nconst entityAlertCard = EntityCardBlueprint.make({\n  name: \"EntityAlertCard\",\n  params: {\n    loader: async () => \n      import(\"./components/EntityAlertCard\").then(m=><m.EntityAlertCard />),\n  }\n});\n\nconst entityOnCallCard = EntityCardBlueprint.make({\n  name: \"EntityOnCallCard\",\n  params: {\n    loader: async () => \n      import(\"./components/EntityOnCallCard\").then(m=><m.EntityOnCallCard />),\n  },\n});\n\nconst homePageIncidentCard = HomePageWidgetBlueprint.make({\n  name: \"HomePageIncidentCard\",\n  params: {\n    title: \"Ongoing Incidents\",    \n    components: () => import(\"./components/HomePageIncidentCard\"),\n    settings: {\n      schema: {\n        type: \"object\",\n        properties: {\n          filterType: {\n            type: \"string\",\n            title: \"Filter Type\",\n            description: \"Whether to filter on status category or status\",\n            oneOf: [\n              { enum: [\"status_category\"], title: \"Status Category\" },\n              { enum: [\"status\"], title: \"Status\" },\n            ],\n            default: \"status_category\",\n          },\n          filter: {\n            type: \"string\",\n            title: \"Filter\",\n            description:\n              \"The filter to use. This is a string that will be passed to the API.\",\n            default: \"active\",\n          },\n        },\n      },\n    },\n  },\n});\n\n\nconst homePageAlertCard = HomePageWidgetBlueprint.make({\n  name: \"HomePageAlertCard\",\n  params: {\n    title: \"Ongoing Alerts\",    \n    components: () => import(\"./components/HomePageAlertCard\"),\n  },\n});\n\n\n   \nconst homePageOnCallCard = HomePageWidgetBlueprint.make({\n  name: \"HomePageOnCallCard\",\n  params: {\n    title: \"On-call\",\n    components: () => import(\"./components/HomePageOnCallCard\"),\n  },\n});\n\nconst plugin: FrontendPlugin = createFrontendPlugin({\n    pluginId: \"incident\",\n    extensions: [incidentApi, entityIncidentCard, entityAlertCard, homePageIncidentCard, homePageAlertCard, homePageOnCallCard, entityOnCallCard],                                                                        \n  });\n\nexport default plugin;"],"names":[],"mappings":"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"}

package/dist/api/client.esm.js

@@ -0,0 +1,34 @@
+import { createApiRef } from '@backstage/core-plugin-api';
+
+const IncidentApiRef = createApiRef({
+  id: "plugin.incident.service"
+});
+const DEFAULT_PROXY_PATH = "/incident/api";
+class IncidentApi {
+  discoveryApi;
+  fetchApi;
+  proxyPath;
+  constructor(opts) {
+    this.discoveryApi = opts.discoveryApi;
+    this.fetchApi = opts.fetchApi;
+    this.proxyPath = opts.proxyPath ?? DEFAULT_PROXY_PATH;
+  }
+  async request({
+    path,
+    method = "GET",
+    body
+  }) {
+    const apiUrl = await this.discoveryApi.getBaseUrl("proxy") + this.proxyPath;
+    const resp = await this.fetchApi.fetch(`${apiUrl}${path}`, {
+      method,
+      body
+    });
+    if (!resp.ok) {
+      throw new Error(`${resp.status} ${resp.statusText}`);
+    }
+    return await resp.json();
+  }
+}
+
+export { IncidentApi, IncidentApiRef };
+//# sourceMappingURL=client.esm.js.map

package/dist/api/client.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.esm.js","sources":["../../src/api/client.ts"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport {\n  DiscoveryApi,\n  FetchApi,\n  createApiRef,\n} from \"@backstage/core-plugin-api\";\n\nexport const IncidentApiRef = createApiRef<Incident>({\n  id: \"plugin.incident.service\",\n});\n\ntype HTTPMethods = \"GET\" | \"PUT\" | \"POST\" | \"PATCH\" | \"DELETE\";\n\nexport interface Incident {\n  request<T>({\n    method,\n    path,\n    body,\n  }: {\n    method?: HTTPMethods;\n    path: string;\n    body?: string;\n  }): Promise<T>;\n}\n\nconst DEFAULT_PROXY_PATH = \"/incident/api\";\n\ntype Options = {\n  discoveryApi: DiscoveryApi;\n  fetchApi: FetchApi;\n  proxyPath?: string;\n};\n\nexport class IncidentApi implements Incident {\n  private readonly discoveryApi: DiscoveryApi;\n  private readonly fetchApi: FetchApi;\n  private readonly proxyPath: string;\n\n  constructor(opts: Options) {\n    this.discoveryApi = opts.discoveryApi;\n    this.fetchApi = opts.fetchApi;\n    this.proxyPath = opts.proxyPath ?? DEFAULT_PROXY_PATH;\n  }\n\n  async request<T = any>({\n    path,\n    method = \"GET\",\n    body,\n  }: {\n    path: string;\n    method?: HTTPMethods;\n    body?: string;\n  }): Promise<T> {\n    const apiUrl =\n      (await this.discoveryApi.getBaseUrl(\"proxy\")) + this.proxyPath;\n\n    const resp = await this.fetchApi.fetch(`${apiUrl}${path}`, {\n      method: method,\n      body: body,\n    });\n    if (!resp.ok) {\n      throw new Error(`${resp.status} ${resp.statusText}`);\n    }\n\n    return await resp.json();\n  }\n}\n"],"names":[],"mappings":";;AAqBO,MAAM,iBAAiB,YAAA,CAAuB;AAAA,EACnD,EAAA,EAAI;AACN,CAAC;AAgBD,MAAM,kBAAA,GAAqB,eAAA;AAQpB,MAAM,WAAA,CAAgC;AAAA,EAC1B,YAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EAEjB,YAAY,IAAA,EAAe;AACzB,IAAA,IAAA,CAAK,eAAe,IAAA,CAAK,YAAA;AACzB,IAAA,IAAA,CAAK,WAAW,IAAA,CAAK,QAAA;AACrB,IAAA,IAAA,CAAK,SAAA,GAAY,KAAK,SAAA,IAAa,kBAAA;AAAA,EACrC;AAAA,EAEA,MAAM,OAAA,CAAiB;AAAA,IACrB,IAAA;AAAA,IACA,MAAA,GAAS,KAAA;AAAA,IACT;AAAA,GACF,EAIe;AACb,IAAA,MAAM,SACH,MAAM,IAAA,CAAK,aAAa,UAAA,CAAW,OAAO,IAAK,IAAA,CAAK,SAAA;AAEvD,IAAA,MAAM,IAAA,GAAO,MAAM,IAAA,CAAK,QAAA,CAAS,MAAM,CAAA,EAAG,MAAM,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI;AAAA,MACzD,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AACD,IAAA,IAAI,CAAC,KAAK,EAAA,EAAI;AACZ,MAAA,MAAM,IAAI,MAAM,CAAA,EAAG,IAAA,CAAK,MAAM,CAAA,CAAA,EAAI,IAAA,CAAK,UAAU,CAAA,CAAE,CAAA;AAAA,IACrD;AAEA,IAAA,OAAO,MAAM,KAAK,IAAA,EAAK;AAAA,EACzB;AACF;;;;"}

package/dist/components/AlertListItem/index.esm.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { DateTime } from 'luxon';
+import { ListItem, ListItemText, Typography, Chip, ListItemSecondaryAction, Tooltip, IconButton } from '@material-ui/core';
+import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
+import { useStyles } from '../styles.esm.js';
+
+const AlertListItem = ({
+  baseUrl,
+  alert,
+  source,
+  priority
+}) => {
+  const classes = useStyles();
+  const sinceCreatedLabel = DateTime.fromISO(alert.created_at).toRelative({ base: DateTime.now() });
+  return /* @__PURE__ */ jsxs(ListItem, { dense: true, children: [
+    /* @__PURE__ */ jsx(
+      ListItemText,
+      {
+        primary: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            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 && /* @__PURE__ */ jsx(
+            Chip,
+            {
+              "data-testid": `chip-${priority}`,
+              label: priority,
+              size: "small",
+              variant: "outlined"
+            }
+          )
+        ] }),
+        primaryTypographyProps: {
+          variant: "body1",
+          className: classes.listItemPrimary
+        },
+        secondary: /* @__PURE__ */ jsxs(Typography, { noWrap: true, variant: "body2", color: "textSecondary", children: [
+          "Created ",
+          sinceCreatedLabel,
+          " from ",
+          source,
+          "."
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(ListItemSecondaryAction, { children: /* @__PURE__ */ jsx(Tooltip, { title: "View in incident.io", placement: "top", children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        href: `${baseUrl}/on-call/alerts/${alert.id}/details`,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        color: "primary",
+        children: /* @__PURE__ */ jsx(OpenInBrowserIcon, {})
+      }
+    ) }) })
+  ] }, alert.id);
+};
+
+export { AlertListItem };
+//# sourceMappingURL=index.esm.js.map

package/dist/components/AlertListItem/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../src/components/AlertListItem/index.tsx"],"sourcesContent":["import { DateTime } from \"luxon\";\nimport {\n  Chip,\n  IconButton,\n  ListItem,\n  ListItemSecondaryAction,\n  ListItemText,\n  Tooltip,\n  Typography,\n} from \"@material-ui/core\";\nimport OpenInBrowserIcon from \"@material-ui/icons/OpenInBrowser\";\nimport { components } from \"../../api/types\";\nimport { useStyles } from \"../styles\";\n\n// Single item in the list of on-going alerts.\nexport const AlertListItem = ({\n  baseUrl,\n  alert,\n  source,\n  priority\n}: {\n  baseUrl: string;\n  alert: components[\"schemas\"][\"AlertV2\"];\n  source: string;\n  priority?: string; \n}) => {\n  const classes = useStyles();\n\n  const sinceCreatedLabel = DateTime.fromISO(alert.created_at).toRelative({ base: DateTime.now() });\n\n  return (\n    <ListItem dense key={alert.id}>\n      <ListItemText\n        primary={\n          <>\n            <Chip\n              data-testid={`chip-${alert.status}`}\n              label={alert.status}\n              size=\"small\"\n              variant=\"outlined\"\n              className={\n                [\"firing\"].includes(alert.status)\n                  ? classes.error\n                  : classes.success\n              }\n            />\n            {alert.title}\n            {priority && (\n              <Chip\n                data-testid={`chip-${priority}`}\n                label={priority}\n                size=\"small\"\n                variant=\"outlined\"\n              />\n            )}\n          </>\n        }\n        primaryTypographyProps={{\n          variant: \"body1\",\n          className: classes.listItemPrimary,\n        }}\n        secondary={\n          <Typography noWrap variant=\"body2\" color=\"textSecondary\">\n            Created {sinceCreatedLabel} from {source}.\n          </Typography>\n        }\n      />\n      <ListItemSecondaryAction>\n        <Tooltip title=\"View in incident.io\" placement=\"top\">\n          <IconButton\n            href={`${baseUrl}/on-call/alerts/${alert.id}/details`}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            color=\"primary\"\n          >\n            <OpenInBrowserIcon />\n          </IconButton>\n        </Tooltip>\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAeO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,KAKM;AACJ,EAAA,MAAM,UAAU,SAAA,EAAU;AAE1B,EAAA,MAAM,iBAAA,GAAoB,QAAA,CAAS,OAAA,CAAQ,KAAA,CAAM,UAAU,CAAA,CAAE,UAAA,CAAW,EAAE,IAAA,EAAM,QAAA,CAAS,GAAA,EAAI,EAAG,CAAA;AAEhG,EAAA,uBACE,IAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAK,IAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,yBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,aAAA,EAAa,CAAA,KAAA,EAAQ,KAAA,CAAM,MAAM,CAAA,CAAA;AAAA,cACjC,OAAO,KAAA,CAAM,MAAA;AAAA,cACb,IAAA,EAAK,OAAA;AAAA,cACL,OAAA,EAAQ,UAAA;AAAA,cACR,SAAA,EACE,CAAC,QAAQ,CAAA,CAAE,QAAA,CAAS,MAAM,MAAM,CAAA,GAC5B,OAAA,CAAQ,KAAA,GACR,OAAA,CAAQ;AAAA;AAAA,WAEhB;AAAA,UACC,KAAA,CAAM,KAAA;AAAA,UACN,QAAA,oBACC,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,aAAA,EAAa,QAAQ,QAAQ,CAAA,CAAA;AAAA,cAC7B,KAAA,EAAO,QAAA;AAAA,cACP,IAAA,EAAK,OAAA;AAAA,cACL,OAAA,EAAQ;AAAA;AAAA;AACV,SAAA,EAEJ,CAAA;AAAA,QAEF,sBAAA,EAAwB;AAAA,UACtB,OAAA,EAAS,OAAA;AAAA,UACT,WAAW,OAAA,CAAQ;AAAA,SACrB;AAAA,QACA,SAAA,uBACG,UAAA,EAAA,EAAW,MAAA,EAAM,MAAC,OAAA,EAAQ,OAAA,EAAQ,OAAM,eAAA,EAAgB,QAAA,EAAA;AAAA,UAAA,UAAA;AAAA,UAC9C,iBAAA;AAAA,UAAkB,QAAA;AAAA,UAAO,MAAA;AAAA,UAAO;AAAA,SAAA,EAC3C;AAAA;AAAA,KAEJ;AAAA,wBACC,uBAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,WAAQ,KAAA,EAAM,qBAAA,EAAsB,WAAU,KAAA,EAC7C,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,CAAA,EAAG,OAAO,CAAA,gBAAA,EAAmB,MAAM,EAAE,CAAA,QAAA,CAAA;AAAA,QAC3C,MAAA,EAAO,QAAA;AAAA,QACP,GAAA,EAAI,qBAAA;AAAA,QACJ,KAAA,EAAM,SAAA;AAAA,QAEN,8BAAC,iBAAA,EAAA,EAAkB;AAAA;AAAA,OAEvB,CAAA,EACF;AAAA,GAAA,EAAA,EA/CmB,MAAM,EAgD3B,CAAA;AAEJ;;;;"}

package/dist/components/EntityAlertCard/index.esm.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Progress } from '@backstage/core-components';
+import { useApi, configApiRef } from '@backstage/core-plugin-api';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import { Card, CardHeader, IconButton, Divider, Tabs, Tab, CardContent, Typography, Box, List } 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 { useIncidentList, useIncidentAlertList, useAlertList, useAlertSourceList, useIdentity } from '../../hooks/useIncidentRequest.esm.js';
+import { getEntityFieldID } from '../utils.esm.js';
+import { AlertListItem } from '../AlertListItem/index.esm.js';
+
+const STATUS_TABS = [
+  { label: "Firing", value: "firing" },
+  { label: "Resolved", value: "resolved" },
+  { label: "All", value: void 0 }
+];
+const IncorrectConfigCard = () => /* @__PURE__ */ jsxs(Card, { children: [
+  /* @__PURE__ */ jsx(CardHeader, { title: "Alerts" }),
+  /* @__PURE__ */ jsx(Divider, {}),
+  /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: "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." }) })
+] });
+const EntityAlertCard = () => {
+  const [statusFilter, setStatusFilter] = useState("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}`;
+  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);
+  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();
+  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 /* @__PURE__ */ jsx(IncorrectConfigCard, {});
+  }
+  if (incidentsLoading || incidentAlertsLoading || alertsLoading) {
+    return /* @__PURE__ */ jsx(Progress, {});
+  }
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        title: "incident.io Alerts",
+        action: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            component: Link,
+            "aria-label": "Refresh",
+            disabled: false,
+            title: "Refresh",
+            onClick: () => setReload(!reload),
+            children: /* @__PURE__ */ jsx(CachedIcon, {})
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(
+      Tabs,
+      {
+        value: currentTabIndex,
+        onChange: (_, idx) => setStatusFilter(STATUS_TABS[idx].value),
+        indicatorColor: "primary",
+        textColor: "primary",
+        children: STATUS_TABS.map((tab) => /* @__PURE__ */ jsx(Tab, { label: tab.label }, tab.label))
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsxs(CardContent, { children: [
+      error && /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message }),
+      !error && alerts.length === 0 && /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: "No alerts." }),
+      !error && alerts.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Typography, { variant: "subtitle1", children: [
+          "There are ",
+          /* @__PURE__ */ jsx("strong", { children: alerts.length }),
+          " ",
+          statusFilter ?? "",
+          " alerts."
+        ] }),
+        /* @__PURE__ */ jsx(Box, { style: { maxHeight: 400, overflowY: "auto" }, children: /* @__PURE__ */ jsx(List, { dense: true, children: alerts.map((alert) => /* @__PURE__ */ jsx(
+          AlertListItem,
+          {
+            alert,
+            baseUrl,
+            source: sourceById[alert.alert_source_id]?.name ?? "-",
+            priority: alert.attributes.find((a) => a.attribute.name === "Priority")?.value?.label
+          },
+          alert.id
+        )) }) })
+      ] }),
+      baseUrl && /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: /* @__PURE__ */ jsx(Link, { target: "_blank", href: `${baseUrl}/on-call/alerts`, children: "View all alerts" }) })
+    ] })
+  ] });
+};
+
+export { EntityAlertCard };
+//# sourceMappingURL=index.esm.js.map

package/dist/components/EntityAlertCard/index.esm.js.map

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

package/dist/components/EntityIncidentCard/index.esm.js

@@ -0,0 +1,125 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Progress, HeaderIconLinkRow } from '@backstage/core-components';
+import { useApi, configApiRef } from '@backstage/core-plugin-api';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import { Card, CardHeader, IconButton, Divider, CardContent, Typography, 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 { useState } from 'react';
+import { useIdentity, useIncidentList } from '../../hooks/useIncidentRequest.esm.js';
+import { IncidentListItem } from '../IncidentListItem/index.esm.js';
+import { getEntityFieldID } from '../utils.esm.js';
+
+const IncorrectConfigCard = () => {
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx(CardHeader, { title: "incident.io" }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: "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." }) })
+  ] });
+};
+const EntityIncidentCard = ({
+  maxIncidents = 2
+}) => {
+  const config = useApi(configApiRef);
+  const { entity } = useEntity();
+  const {
+    value: identityResponse,
+    loading: identityResponseLoading,
+    error: identityResponseError
+  } = useIdentity();
+  const [reload, setReload] = useState(false);
+  const entityFieldID = getEntityFieldID(config, entity);
+  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]`, "active");
+  const {
+    value: incidentsResponse,
+    loading: incidentsLoading,
+    error: incidentsError
+  } = useIncidentList(queryLive, [reload]);
+  const incidents = incidentsResponse?.incidents;
+  if (!entityFieldID) {
+    return /* @__PURE__ */ jsx(IncorrectConfigCard, {});
+  }
+  if (incidentsLoading || identityResponseLoading || !identityResponse) {
+    return /* @__PURE__ */ jsx(Progress, {});
+  }
+  const baseUrl = identityResponse.identity.dashboard_url;
+  const createIncidentLink = {
+    label: "Declare incident",
+    disabled: false,
+    icon: /* @__PURE__ */ jsx(WhatshotIcon, {}),
+    href: `${baseUrl}/incidents/create`
+  };
+  const viewIncidentsLink = {
+    label: "View past incidents",
+    disabled: false,
+    icon: /* @__PURE__ */ jsx(HistoryIcon, {}),
+    href: `${baseUrl}/incidents?${query.toString()}`
+  };
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        title: "incident.io",
+        action: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            component: Link,
+            "aria-label": "Refresh",
+            disabled: false,
+            title: "Refresh",
+            onClick: () => setReload(!reload),
+            children: /* @__PURE__ */ jsx(CachedIcon, {})
+          }
+        ) }),
+        subheader: /* @__PURE__ */ jsx(HeaderIconLinkRow, { links: [createIncidentLink, viewIncidentsLink] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsxs(CardContent, { children: [
+      incidentsError && /* @__PURE__ */ jsx(Alert, { severity: "error", children: incidentsError.message }),
+      identityResponseError && /* @__PURE__ */ jsx(Alert, { severity: "error", children: identityResponseError.message }),
+      !incidentsLoading && !incidentsError && incidents && /* @__PURE__ */ jsxs(Fragment, { children: [
+        incidents && incidents.length > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "subtitle1", children: [
+          "There are ",
+          /* @__PURE__ */ jsx("strong", { children: incidents.length }),
+          " ongoing incidents involving ",
+          /* @__PURE__ */ jsx("strong", { children: entity.metadata.name }),
+          "."
+        ] }),
+        incidents && incidents.length === 0 && /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: "No ongoing incidents." }),
+        /* @__PURE__ */ jsx(List, { dense: true, children: incidents?.slice(0, maxIncidents)?.map((incident) => {
+          return /* @__PURE__ */ jsx(
+            IncidentListItem,
+            {
+              incident,
+              baseUrl
+            },
+            incident.id
+          );
+        }) }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "subtitle1", children: [
+          "Click to",
+          " ",
+          /* @__PURE__ */ jsx(
+            Link,
+            {
+              target: "_blank",
+              href: `${baseUrl}/incidents?${queryLive.toString()}`,
+              children: "see more."
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+};
+
+export { EntityIncidentCard };
+//# sourceMappingURL=index.esm.js.map

package/dist/components/EntityIncidentCard/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../src/components/EntityIncidentCard/index.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport {\n  HeaderIconLinkRow,\n  IconLinkVerticalProps,\n  Progress,\n} from \"@backstage/core-components\";\nimport { configApiRef, useApi } from \"@backstage/core-plugin-api\";\nimport { useEntity } from \"@backstage/plugin-catalog-react\";\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  Divider,\n  IconButton,\n  List,\n  Typography,\n} from \"@material-ui/core\";\nimport Link from \"@material-ui/core/Link\";\nimport CachedIcon from \"@material-ui/icons/Cached\";\nimport HistoryIcon from \"@material-ui/icons/History\";\nimport WhatshotIcon from \"@material-ui/icons/Whatshot\";\nimport { Alert } from \"@material-ui/lab\";\nimport { useState } from \"react\";\nimport { useIncidentList, useIdentity } from \"../../hooks/useIncidentRequest\";\nimport { IncidentListItem } from \"../IncidentListItem\";\nimport { getEntityFieldID } from \"../utils\";\n\nconst IncorrectConfigCard = () => {\n  return (\n    <Card>\n      <CardHeader title=\"incident.io\" />\n      <Divider />\n      <CardContent>\n        <Typography variant=\"subtitle1\">\n          No custom field configuration was found. In order to display\n          incidents, this entity must be mapped to an incident.io custom field\n          ID in Backstage's app-config.yaml.\n        </Typography>\n      </CardContent>\n    </Card>\n  );\n};\n\n// The card displayed on the entity page showing a handful of the most recent\n// incidents that are on-going for that component.\nexport const EntityIncidentCard = ({\n  maxIncidents = 2,\n}: {\n  maxIncidents?: number;\n}) => {\n  const config = useApi(configApiRef);\n  const { entity } = useEntity();\n  const {\n    value: identityResponse,\n    loading: identityResponseLoading,\n    error: identityResponseError,\n  } = useIdentity();\n\n  const [reload, setReload] = useState(false);\n\n  const entityFieldID = getEntityFieldID(config, entity);\n  const entityID = `${entity.metadata.namespace}/${entity.metadata.name}`;\n\n  // This query filters incidents for those that are associated with this\n  // entity.\n  const query = new URLSearchParams();\n  query.set(`custom_field[${entityFieldID}][one_of]`, entityID);\n\n  // This restricts the previous filter to focus only on live incidents.\n  const queryLive = new URLSearchParams(query);\n  queryLive.set(`status_category[one_of]`, \"active\");\n\n  const {\n    value: incidentsResponse,\n    loading: incidentsLoading,\n    error: incidentsError,\n  } = useIncidentList(queryLive, [reload]);\n\n  const incidents = incidentsResponse?.incidents;\n\n  if (!entityFieldID) {\n    return <IncorrectConfigCard />;\n  }\n\n  if (incidentsLoading || identityResponseLoading || !identityResponse) {\n    return <Progress />;\n  }\n\n  const baseUrl = identityResponse.identity.dashboard_url;\n\n  const createIncidentLink: IconLinkVerticalProps = {\n    label: \"Declare incident\",\n    disabled: false,\n    icon: <WhatshotIcon />,\n    href: `${baseUrl}/incidents/create`,\n  };\n\n  const viewIncidentsLink: IconLinkVerticalProps = {\n    label: \"View past incidents\",\n    disabled: false,\n    icon: <HistoryIcon />,\n    href: `${baseUrl}/incidents?${query.toString()}`,\n  };\n\n  return (\n    <Card>\n      <CardHeader\n        title=\"incident.io\"\n        action={\n          <>\n            <IconButton\n              component={Link}\n              aria-label=\"Refresh\"\n              disabled={false}\n              title=\"Refresh\"\n              onClick={() => setReload(!reload)}\n            >\n              <CachedIcon />\n            </IconButton>\n          </>\n        }\n        subheader={\n          <HeaderIconLinkRow links={[createIncidentLink, viewIncidentsLink]} />\n        }\n      />\n      <Divider />\n      <CardContent>\n        {incidentsError && (\n          <Alert severity=\"error\">{incidentsError.message}</Alert>\n        )}\n        {identityResponseError && (\n          <Alert severity=\"error\">{identityResponseError.message}</Alert>\n        )}\n        {!incidentsLoading && !incidentsError && incidents && (\n          <>\n            {incidents && incidents.length > 0 && (\n              <Typography variant=\"subtitle1\">\n                There are <strong>{incidents.length}</strong> ongoing incidents\n                involving <strong>{entity.metadata.name}</strong>.\n              </Typography>\n            )}\n            {incidents && incidents.length === 0 && (\n              <Typography variant=\"subtitle1\">No ongoing incidents.</Typography>\n            )}\n            <List dense>\n              {incidents?.slice(0, maxIncidents)?.map((incident) => {\n                return (\n                  <IncidentListItem\n                    key={incident.id}\n                    incident={incident}\n                    baseUrl={baseUrl}\n                  />\n                );\n              })}\n            </List>\n            <Typography variant=\"subtitle1\">\n              Click to{\" \"}\n              <Link\n                target=\"_blank\"\n                href={`${baseUrl}/incidents?${queryLive.toString()}`}\n              >\n                see more.\n              </Link>\n            </Typography>\n          </>\n        )}\n      </CardContent>\n    </Card>\n  );\n};\n\n"],"names":[],"mappings":"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"}