@pagerduty/backstage-plugin 0.7.0

package/dist/esm/index-7a206e9e.esm.js

@@ -0,0 +1,777 @@
+import { createApiRef, createRouteRef, createPlugin, createApiFactory, discoveryApiRef, configApiRef, fetchApiRef, createComponentExtension, useApi, alertApiRef, identityApiRef } from '@backstage/core-plugin-api';
+import { NotFoundError } from '@backstage/errors';
+import { createCardExtension } from '@backstage/plugin-home-react';
+import React, { useEffect, useState, useCallback } from 'react';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import { makeStyles, ListItem, ListItemText, Chip, Typography, ListItemSecondaryAction, Tooltip, IconButton, Grid, List, ListItemIcon, ListSubheader, Button, Dialog, DialogTitle, DialogContent, TextField, DialogActions, CircularProgress, Card, CardHeader, Divider, CardContent } from '@material-ui/core';
+import Done from '@material-ui/icons/Done';
+import Warning from '@material-ui/icons/Warning';
+import { DateTime, Duration } from 'luxon';
+import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
+import { Link, Progress, StatusWarning, EmptyState, HeaderIconLinkRow, TabbedCard, CardTab, InfoCard } from '@backstage/core-components';
+import EmptyStateImage from '../assets/emptystate.svg';
+import useAsyncFn from 'react-use/lib/useAsyncFn';
+import { Alert } from '@material-ui/lab';
+import Avatar from '@material-ui/core/Avatar';
+import EmailIcon from '@material-ui/icons/Email';
+import useAsync from 'react-use/lib/useAsync';
+import AlarmAddIcon from '@material-ui/icons/AlarmAdd';
+import WebIcon from '@material-ui/icons/Web';
+import DateRangeIcon from '@material-ui/icons/DateRange';
+import { parseEntityRef, DEFAULT_NAMESPACE } from '@backstage/catalog-model';
+
+const PAGERDUTY_INTEGRATION_KEY = "pagerduty.com/integration-key";
+const PAGERDUTY_SERVICE_ID = "pagerduty.com/service-id";
+
+function getPagerDutyEntity(entity) {
+  const {
+    [PAGERDUTY_INTEGRATION_KEY]: integrationKey,
+    [PAGERDUTY_SERVICE_ID]: serviceId
+  } = entity.metadata.annotations || {};
+  const name = entity.metadata.name;
+  return { integrationKey, serviceId, name };
+}
+
+class UnauthorizedError extends Error {
+}
+const pagerDutyApiRef = createApiRef({
+  id: "plugin.pagerduty.api"
+});
+const commonGetServiceParams = "time_zone=UTC&include[]=integrations&include[]=escalation_policies";
+class PagerDutyClient {
+  constructor(config) {
+    this.config = config;
+  }
+  static fromConfig(configApi, dependencies) {
+    var _a;
+    const { discoveryApi, fetchApi } = dependencies;
+    const eventsBaseUrl = (_a = configApi.getOptionalString("pagerDuty.eventsBaseUrl")) != null ? _a : "https://events.pagerduty.com/v2";
+    return new PagerDutyClient({
+      eventsBaseUrl,
+      discoveryApi,
+      fetchApi
+    });
+  }
+  async getServiceByPagerDutyEntity(pagerDutyEntity) {
+    const { integrationKey, serviceId } = pagerDutyEntity;
+    let response;
+    let url;
+    if (integrationKey) {
+      url = `${await this.config.discoveryApi.getBaseUrl(
+        "proxy"
+      )}/pagerduty/services?${commonGetServiceParams}&query=${integrationKey}`;
+      const { services } = await this.findByUrl(url);
+      const service = services[0];
+      if (!service)
+        throw new NotFoundError();
+      response = { service };
+    } else if (serviceId) {
+      url = `${await this.config.discoveryApi.getBaseUrl(
+        "proxy"
+      )}/pagerduty/services/${serviceId}?${commonGetServiceParams}`;
+      response = await this.findByUrl(url);
+    } else {
+      throw new NotFoundError();
+    }
+    return response;
+  }
+  async getServiceByEntity(entity) {
+    return await this.getServiceByPagerDutyEntity(getPagerDutyEntity(entity));
+  }
+  async getIncidentsByServiceId(serviceId) {
+    const params = `time_zone=UTC&sort_by=created_at&statuses[]=triggered&statuses[]=acknowledged&service_ids[]=${serviceId}`;
+    const url = `${await this.config.discoveryApi.getBaseUrl(
+      "proxy"
+    )}/pagerduty/incidents?${params}`;
+    return await this.findByUrl(url);
+  }
+  async getChangeEventsByServiceId(serviceId) {
+    const params = `limit=5&time_zone=UTC&sort_by=timestamp`;
+    const url = `${await this.config.discoveryApi.getBaseUrl(
+      "proxy"
+    )}/pagerduty/services/${serviceId}/change_events?${params}`;
+    return await this.findByUrl(url);
+  }
+  async getOnCallByPolicyId(policyId) {
+    const params = `time_zone=UTC&include[]=users&escalation_policy_ids[]=${policyId}`;
+    const url = `${await this.config.discoveryApi.getBaseUrl(
+      "proxy"
+    )}/pagerduty/oncalls?${params}`;
+    return await this.findByUrl(url);
+  }
+  triggerAlarm(request) {
+    var _a;
+    const { integrationKey, source, description, userName } = request;
+    const body = JSON.stringify({
+      event_action: "trigger",
+      routing_key: integrationKey,
+      client: "Backstage",
+      client_url: source,
+      payload: {
+        summary: description,
+        source,
+        severity: "error",
+        class: "manual trigger",
+        custom_details: {
+          user: userName
+        }
+      }
+    });
+    const options = {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json; charset=UTF-8",
+        Accept: "application/json, text/plain, */*"
+      },
+      body
+    };
+    const url = (_a = this.config.eventsBaseUrl) != null ? _a : "https://events.pagerduty.com/v2";
+    return this.request(`${url}/enqueue`, options);
+  }
+  async findByUrl(url) {
+    const options = {
+      method: "GET",
+      headers: {
+        Accept: "application/vnd.pagerduty+json;version=2",
+        "Content-Type": "application/json"
+      }
+    };
+    const response = await this.request(url, options);
+    return response.json();
+  }
+  async request(url, options) {
+    const response = await this.config.fetchApi.fetch(url, options);
+    if (response.status === 401) {
+      throw new UnauthorizedError();
+    }
+    if (response.status === 404) {
+      throw new NotFoundError();
+    }
+    if (!response.ok) {
+      const payload = await response.json();
+      const errors = payload.errors.map((error) => error).join(" ");
+      const message = `Request failed with ${response.status}, ${errors}`;
+      throw new Error(message);
+    }
+    return response;
+  }
+}
+
+createRouteRef({
+  id: "pagerduty"
+});
+const pagerDutyPlugin = createPlugin({
+  id: "pagerduty",
+  apis: [
+    createApiFactory({
+      api: pagerDutyApiRef,
+      deps: {
+        discoveryApi: discoveryApiRef,
+        configApi: configApiRef,
+        fetchApi: fetchApiRef
+      },
+      factory: ({ configApi, discoveryApi, fetchApi }) => PagerDutyClient.fromConfig(configApi, { discoveryApi, fetchApi })
+    })
+  ]
+});
+const EntityPagerDutyCard$1 = pagerDutyPlugin.provide(
+  createComponentExtension({
+    name: "EntityPagerDutyCard",
+    component: {
+      lazy: () => Promise.resolve().then(function () { return index; }).then(
+        (m) => m.EntityPagerDutyCard
+      )
+    }
+  })
+);
+const HomePagePagerDutyCard = pagerDutyPlugin.provide(
+  createCardExtension({
+    name: "HomePagePagerDutyCard",
+    title: "PagerDuty Homepage Card",
+    components: () => import('./index-308a2487.esm.js'),
+    settings: {
+      schema: {
+        title: "PagerDuty",
+        type: "object",
+        properties: {
+          integrationKey: {
+            title: "PagerDuty integration key",
+            type: "string"
+          },
+          serviceId: {
+            title: "PagerDuty service id",
+            type: "string"
+          },
+          name: {
+            title: "PagerDuty service name",
+            type: "string"
+          }
+        }
+      }
+    }
+  })
+);
+
+const useStyles$4 = makeStyles((theme) => ({
+  denseListIcon: {
+    marginRight: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  listItemPrimary: {
+    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 = ({ incident }) => {
+  var _a, _b, _c;
+  const classes = useStyles$4();
+  const duration = (/* @__PURE__ */ new Date()).getTime() - new Date(incident.created_at).getTime();
+  const createdAt = DateTime.local().minus(Duration.fromMillis(duration)).toRelative({ locale: "en" });
+  const user = (_a = incident.assignments[0]) == null ? void 0 : _a.assignee;
+  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.status}`,
+          label: incident.status,
+          size: "small",
+          variant: "outlined",
+          icon: incident.status === "acknowledged" ? /* @__PURE__ */ React.createElement(Done, null) : /* @__PURE__ */ React.createElement(Warning, null),
+          className: incident.status === "triggered" ? classes.error : classes.warning
+        }
+      ), incident.title),
+      primaryTypographyProps: {
+        variant: "body1",
+        className: classes.listItemPrimary
+      },
+      secondary: /* @__PURE__ */ React.createElement(Typography, { noWrap: true, variant: "body2", color: "textSecondary" }, "Created ", createdAt, " and assigned to", " ", /* @__PURE__ */ React.createElement(Link, { to: (_b = user == null ? void 0 : user.html_url) != null ? _b : "#" }, (_c = user == null ? void 0 : user.summary) != null ? _c : "nobody"))
+    }
+  ), /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(Tooltip, { title: "View in PagerDuty", placement: "top" }, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      href: incident.html_url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      color: "primary"
+    },
+    /* @__PURE__ */ React.createElement(OpenInBrowserIcon, null)
+  ))));
+};
+
+const IncidentsEmptyState = () => {
+  return /* @__PURE__ */ React.createElement(
+    Grid,
+    {
+      container: true,
+      justifyContent: "center",
+      direction: "column",
+      alignItems: "center"
+    },
+    /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Nice! No incidents found!")),
+    /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: EmptyStateImage,
+        alt: "EmptyState",
+        "data-testid": "emptyStateImg"
+      }
+    ))
+  );
+};
+
+const Incidents = ({ serviceId, refreshIncidents }) => {
+  const api = useApi(pagerDutyApiRef);
+  const [{ value: incidents, loading, error }, getIncidents] = useAsyncFn(
+    async () => {
+      const { incidents: foundIncidents } = await api.getIncidentsByServiceId(
+        serviceId
+      );
+      return foundIncidents;
+    }
+  );
+  useEffect(() => {
+    getIncidents();
+  }, [refreshIncidents, getIncidents]);
+  if (error) {
+    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, "Error encountered while fetching information. ", error.message);
+  }
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (!(incidents == null ? void 0 : incidents.length)) {
+    return /* @__PURE__ */ React.createElement(IncidentsEmptyState, null);
+  }
+  return /* @__PURE__ */ React.createElement(List, { dense: true }, incidents.map((incident, index) => /* @__PURE__ */ React.createElement(IncidentListItem, { key: incident.id + index, incident })));
+};
+
+const useStyles$3 = makeStyles({
+  denseListIcon: {
+    marginRight: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+const EscalationUsersEmptyState = () => {
+  const classes = useStyles$3();
+  return /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement("div", { className: classes.denseListIcon }, /* @__PURE__ */ React.createElement(StatusWarning, null))), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Empty escalation policy" }));
+};
+
+const useStyles$2 = makeStyles({
+  listItemPrimary: {
+    fontWeight: "bold"
+  }
+});
+const EscalationUser = ({ user }) => {
+  const classes = useStyles$2();
+  return /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Avatar, { alt: "User" })), /* @__PURE__ */ React.createElement(
+    ListItemText,
+    {
+      primary: /* @__PURE__ */ React.createElement(Typography, { className: classes.listItemPrimary }, user.name),
+      secondary: user.email
+    }
+  ), /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(Tooltip, { title: "Send e-mail to user", placement: "top" }, /* @__PURE__ */ React.createElement(IconButton, { href: `mailto:${user.email}` }, /* @__PURE__ */ React.createElement(EmailIcon, { color: "primary" }))), /* @__PURE__ */ React.createElement(Tooltip, { title: "View in PagerDuty", placement: "top" }, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      href: user.html_url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      color: "primary"
+    },
+    /* @__PURE__ */ React.createElement(OpenInBrowserIcon, null)
+  ))));
+};
+
+const EscalationPolicy = ({ policyId }) => {
+  const api = useApi(pagerDutyApiRef);
+  const {
+    value: users,
+    loading,
+    error
+  } = useAsync(async () => {
+    const { oncalls } = await api.getOnCallByPolicyId(policyId);
+    const usersItem = oncalls.sort((a, b) => a.escalation_level - b.escalation_level).map((oncall) => oncall.user);
+    return usersItem;
+  });
+  if (error) {
+    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, "Error encountered while fetching information. ", error.message);
+  }
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (!(users == null ? void 0 : users.length)) {
+    return /* @__PURE__ */ React.createElement(EscalationUsersEmptyState, null);
+  }
+  return /* @__PURE__ */ React.createElement(List, { dense: true, subheader: /* @__PURE__ */ React.createElement(ListSubheader, null, "ON CALL") }, users.map((user, index) => /* @__PURE__ */ React.createElement(EscalationUser, { key: index, user })));
+};
+
+const MissingTokenError = () => /* @__PURE__ */ React.createElement(
+  EmptyState,
+  {
+    missing: "info",
+    title: "Missing or invalid PagerDuty Token",
+    description: "The request to fetch data needs a valid token. See README for more details.",
+    action: /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        color: "primary",
+        variant: "contained",
+        href: "https://github.com/backstage/backstage/blob/master/plugins/pagerduty/README.md"
+      },
+      "Read More"
+    )
+  }
+);
+
+const ServiceNotFoundError = () => /* @__PURE__ */ React.createElement(
+  EmptyState,
+  {
+    missing: "data",
+    title: "PagerDuty Service Not Found",
+    description: "A service could not be found within PagerDuty based on the provided service id. Please verify your configuration.",
+    action: /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        color: "primary",
+        variant: "contained",
+        href: "https://github.com/backstage/backstage/blob/master/plugins/pagerduty/README.md"
+      },
+      "Read More"
+    )
+  }
+);
+
+const TriggerDialog = ({
+  showDialog,
+  handleDialog,
+  onIncidentCreated,
+  name,
+  integrationKey
+}) => {
+  const alertApi = useApi(alertApiRef);
+  const identityApi = useApi(identityApiRef);
+  const api = useApi(pagerDutyApiRef);
+  const [description, setDescription] = useState("");
+  const [{ value, loading, error }, handleTriggerAlarm] = useAsyncFn(
+    async (descriptions) => {
+      const { userEntityRef } = await identityApi.getBackstageIdentity();
+      const { name: userName } = parseEntityRef(userEntityRef, {
+        defaultKind: "User",
+        defaultNamespace: DEFAULT_NAMESPACE
+      });
+      return await api.triggerAlarm({
+        integrationKey,
+        source: window.location.toString(),
+        description: descriptions,
+        userName
+      });
+    }
+  );
+  const descriptionChanged = (event) => {
+    setDescription(event.target.value);
+  };
+  useEffect(() => {
+    if (value) {
+      (async () => {
+        alertApi.post({
+          message: `Alarm successfully triggered`
+        });
+        handleDialog();
+        await new Promise((resolve) => setTimeout(resolve, 1e3));
+        onIncidentCreated == null ? void 0 : onIncidentCreated();
+      })();
+    }
+  }, [value, alertApi, handleDialog, onIncidentCreated]);
+  if (error) {
+    alertApi.post({
+      message: `Failed to trigger alarm. ${error.message}`,
+      severity: "error"
+    });
+  }
+  return /* @__PURE__ */ React.createElement(Dialog, { maxWidth: "md", open: showDialog, onClose: handleDialog, fullWidth: true }, /* @__PURE__ */ React.createElement(DialogTitle, null, "This action will trigger an incident for ", /* @__PURE__ */ React.createElement("strong", null, '"', name, '"'), "."), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(Alert, { severity: "info" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", align: "justify" }, `If the issue you are seeing does not need urgent attention, please get in touch with the responsible team using their preferred communications channel. You can find information about the owner of this entity in the "About" card. If the issue is urgent, please don't hesitate to trigger the alert.`)), /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      variant: "body1",
+      style: { marginTop: "1em" },
+      gutterBottom: true,
+      align: "justify"
+    },
+    "Please describe the problem you want to report. Be as descriptive as possible. Your signed in user and a reference to the current page will automatically be amended to the alarm so that the receiver can reach out to you if necessary."
+  ), /* @__PURE__ */ React.createElement(
+    TextField,
+    {
+      inputProps: { "data-testid": "trigger-input" },
+      id: "description",
+      multiline: true,
+      fullWidth: true,
+      rows: "4",
+      margin: "normal",
+      label: "Problem description",
+      variant: "outlined",
+      onChange: descriptionChanged
+    }
+  )), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      "data-testid": "trigger-button",
+      id: "trigger",
+      color: "secondary",
+      disabled: !description || loading,
+      variant: "contained",
+      onClick: () => handleTriggerAlarm(description),
+      endIcon: loading && /* @__PURE__ */ React.createElement(CircularProgress, { size: 16 })
+    },
+    "Trigger Incident"
+  ), /* @__PURE__ */ React.createElement(Button, { id: "close", color: "primary", onClick: handleDialog }, "Close")));
+};
+
+const useStyles$1 = makeStyles({
+  denseListIcon: {
+    marginRight: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  listItemPrimary: {
+    fontWeight: "bold"
+  }
+});
+const ChangeEventListItem = ({ changeEvent }) => {
+  const classes = useStyles$1();
+  const duration = (/* @__PURE__ */ new Date()).getTime() - new Date(changeEvent.timestamp).getTime();
+  const changedAt = DateTime.local().minus(Duration.fromMillis(duration)).toRelative({ locale: "en" });
+  let externalLinkElem;
+  if (changeEvent.links.length > 0) {
+    const text = changeEvent.links[0].text;
+    externalLinkElem = /* @__PURE__ */ React.createElement(Tooltip, { title: text, placement: "top" }, /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        component: Link,
+        to: changeEvent.links[0].href,
+        color: "primary"
+      },
+      /* @__PURE__ */ React.createElement(OpenInBrowserIcon, null)
+    ));
+  }
+  return /* @__PURE__ */ React.createElement(ListItem, { dense: true, key: changeEvent.id }, /* @__PURE__ */ React.createElement(
+    ListItemText,
+    {
+      primary: /* @__PURE__ */ React.createElement(React.Fragment, null, changeEvent.summary),
+      primaryTypographyProps: {
+        variant: "body1",
+        className: classes.listItemPrimary
+      },
+      secondary: /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "Triggered from ", changeEvent.source, " ", changedAt, ".")
+    }
+  ), /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, externalLinkElem, changeEvent.html_url === void 0 ? null : /* @__PURE__ */ React.createElement(Tooltip, { title: "View in PagerDuty", placement: "top" }, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      component: Link,
+      to: changeEvent.html_url,
+      color: "primary"
+    },
+    /* @__PURE__ */ React.createElement(OpenInBrowserIcon, null)
+  ))));
+};
+
+const ChangeEventEmptyState = () => {
+  return /* @__PURE__ */ React.createElement(Grid, { container: true, justify: "center", direction: "column", alignItems: "center" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "No change events to display yet.")), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
+    "img",
+    {
+      src: EmptyStateImage,
+      alt: "EmptyState",
+      "data-testid": "emptyStateImg"
+    }
+  )));
+};
+
+const ChangeEvents = ({ serviceId, refreshEvents }) => {
+  const api = useApi(pagerDutyApiRef);
+  const [{ value: changeEvents, loading, error }, getChangeEvents] = useAsyncFn(
+    async () => {
+      const { change_events } = await api.getChangeEventsByServiceId(serviceId);
+      return change_events;
+    }
+  );
+  useEffect(() => {
+    getChangeEvents();
+  }, [refreshEvents, getChangeEvents]);
+  if (error) {
+    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, "Error encountered while fetching information. ", error.message);
+  }
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (!(changeEvents == null ? void 0 : changeEvents.length)) {
+    return /* @__PURE__ */ React.createElement(ChangeEventEmptyState, null);
+  }
+  return /* @__PURE__ */ React.createElement(List, { dense: true }, changeEvents.map((changeEvent, index) => /* @__PURE__ */ React.createElement(
+    ChangeEventListItem,
+    {
+      key: changeEvent.id + index,
+      changeEvent
+    }
+  )));
+};
+
+const BasicCard = ({ children }) => /* @__PURE__ */ React.createElement(InfoCard, { title: "PagerDuty" }, children);
+const PagerDutyCard$1 = (props) => {
+  const { readOnly, disableChangeEvents, integrationKey, name } = props;
+  const api = useApi(pagerDutyApiRef);
+  const [refreshIncidents, setRefreshIncidents] = useState(false);
+  const [refreshChangeEvents, setRefreshChangeEvents] = useState(false);
+  const [dialogShown, setDialogShown] = useState(false);
+  const showDialog = useCallback(() => {
+    setDialogShown(true);
+  }, [setDialogShown]);
+  const hideDialog = useCallback(() => {
+    setDialogShown(false);
+  }, [setDialogShown]);
+  const handleRefresh = useCallback(() => {
+    setRefreshIncidents((x) => !x);
+    setRefreshChangeEvents((x) => !x);
+  }, []);
+  const {
+    value: service,
+    loading,
+    error
+  } = useAsync(async () => {
+    const { service: foundService } = await api.getServiceByPagerDutyEntity(
+      props
+    );
+    return {
+      id: foundService.id,
+      name: foundService.name,
+      url: foundService.html_url,
+      policyId: foundService.escalation_policy.id,
+      policyLink: foundService.escalation_policy.html_url
+    };
+  });
+  if (error) {
+    let errorNode;
+    switch (error.constructor) {
+      case UnauthorizedError:
+        errorNode = /* @__PURE__ */ React.createElement(MissingTokenError, null);
+        break;
+      case NotFoundError:
+        errorNode = /* @__PURE__ */ React.createElement(ServiceNotFoundError, null);
+        break;
+      default:
+        errorNode = /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, "Error encountered while fetching information. ", error.message);
+    }
+    return /* @__PURE__ */ React.createElement(BasicCard, null, errorNode);
+  }
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(BasicCard, null, /* @__PURE__ */ React.createElement(Progress, null));
+  }
+  const serviceLink = {
+    label: "Service Directory",
+    href: service.url,
+    icon: /* @__PURE__ */ React.createElement(WebIcon, null)
+  };
+  const createIncidentDisabled = !integrationKey;
+  const triggerLink = {
+    label: "Create Incident",
+    onClick: showDialog,
+    icon: /* @__PURE__ */ React.createElement(AlarmAddIcon, null),
+    color: "secondary",
+    disabled: createIncidentDisabled,
+    title: createIncidentDisabled ? "Must provide an integration-key to create incidents" : ""
+  };
+  const escalationPolicyLink = {
+    label: "Escalation Policy",
+    href: service.policyLink,
+    icon: /* @__PURE__ */ React.createElement(DateRangeIcon, null)
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Card, { "data-testid": "pagerduty-card" }, /* @__PURE__ */ React.createElement(
+    CardHeader,
+    {
+      title: "PagerDuty",
+      subheader: /* @__PURE__ */ React.createElement(
+        HeaderIconLinkRow,
+        {
+          links: !readOnly ? [serviceLink, triggerLink, escalationPolicyLink] : [serviceLink, escalationPolicyLink]
+        }
+      )
+    }
+  ), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(TabbedCard, null, /* @__PURE__ */ React.createElement(CardTab, { label: "Incidents" }, /* @__PURE__ */ React.createElement(
+    Incidents,
+    {
+      serviceId: service.id,
+      refreshIncidents
+    }
+  )), disableChangeEvents !== true ? /* @__PURE__ */ React.createElement(CardTab, { label: "Change Events" }, /* @__PURE__ */ React.createElement(
+    ChangeEvents,
+    {
+      serviceId: service.id,
+      refreshEvents: refreshChangeEvents
+    }
+  )) : /* @__PURE__ */ React.createElement(React.Fragment, null)), /* @__PURE__ */ React.createElement(EscalationPolicy, { policyId: service.policyId }))), !createIncidentDisabled && /* @__PURE__ */ React.createElement(
+    TriggerDialog,
+    {
+      "data-testid": "trigger-dialog",
+      showDialog: dialogShown,
+      handleDialog: hideDialog,
+      onIncidentCreated: handleRefresh,
+      name,
+      integrationKey
+    }
+  ));
+};
+
+const isPluginApplicableToEntity = (entity) => {
+  var _a, _b;
+  return Boolean(
+    ((_a = entity.metadata.annotations) == null ? void 0 : _a[PAGERDUTY_INTEGRATION_KEY]) || ((_b = entity.metadata.annotations) == null ? void 0 : _b[PAGERDUTY_SERVICE_ID])
+  );
+};
+const EntityPagerDutyCard = (props) => {
+  const { readOnly, disableChangeEvents } = props;
+  const { entity } = useEntity();
+  const pagerDutyEntity = getPagerDutyEntity(entity);
+  return /* @__PURE__ */ React.createElement(
+    PagerDutyCard$1,
+    {
+      ...pagerDutyEntity,
+      readOnly,
+      disableChangeEvents
+    }
+  );
+};
+
+var index = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  isPluginApplicableToEntity: isPluginApplicableToEntity,
+  EntityPagerDutyCard: EntityPagerDutyCard
+});
+
+function usePagerdutyEntity() {
+  const { entity } = useEntity();
+  return getPagerDutyEntity(entity);
+}
+
+const useStyles = makeStyles((theme) => ({
+  buttonStyle: {
+    backgroundColor: theme.palette.error.main,
+    color: theme.palette.error.contrastText,
+    "&:hover": {
+      backgroundColor: theme.palette.error.dark
+    }
+  }
+}));
+function TriggerButton(props) {
+  var _a;
+  const { buttonStyle } = useStyles();
+  const { integrationKey, name } = usePagerdutyEntity();
+  const [dialogShown, setDialogShown] = useState(false);
+  const showDialog = useCallback(() => {
+    setDialogShown(true);
+  }, [setDialogShown]);
+  const hideDialog = useCallback(() => {
+    setDialogShown(false);
+  }, [setDialogShown]);
+  const disabled = !integrationKey;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      onClick: showDialog,
+      variant: "contained",
+      className: disabled ? "" : buttonStyle,
+      disabled
+    },
+    integrationKey ? (_a = props.children) != null ? _a : "Create Incident" : "Missing integration key"
+  ), integrationKey && /* @__PURE__ */ React.createElement(
+    TriggerDialog,
+    {
+      showDialog: dialogShown,
+      handleDialog: hideDialog,
+      integrationKey,
+      name
+    }
+  ));
+}
+
+const PagerDutyCard = EntityPagerDutyCard;
+
+export { EntityPagerDutyCard$1 as E, HomePagePagerDutyCard as H, PagerDutyCard$1 as P, TriggerButton as T, UnauthorizedError as U, PagerDutyClient as a, pagerDutyApiRef as b, PagerDutyCard as c, isPluginApplicableToEntity as i, pagerDutyPlugin as p };
+//# sourceMappingURL=index-7a206e9e.esm.js.map