@pagerduty/backstage-plugin/dist/components/TriggerDialog/TriggerDialog.esm.js

A Backstage plugin that integrates towards PagerDuty

import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { Dialog, DialogTitle, DialogContent, Typography, TextField, DialogActions, Button, CircularProgress } from '@material-ui/core';
import useAsyncFn from 'react-use/lib/useAsyncFn';
import { pagerDutyApiRef } from '../../api/client.esm.js';
import { Alert } from '@material-ui/lab';
import { useApi, alertApiRef, identityApiRef } from '@backstage/core-plugin-api';
import { parseEntityRef, DEFAULT_NAMESPACE } from '@backstage/catalog-model';

const TriggerDialog = ({
  showDialog,
  handleDialog,
  onIncidentCreated,
  serviceName,
  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`
        });
        setDescription("");
        handleDialog();
        await new Promise((resolve) => setTimeout(resolve, 1e3));
        onIncidentCreated?.();
      })();
    }
  }, [value, alertApi, handleDialog, onIncidentCreated]);
  if (error) {
    alertApi.post({
      message: `Failed to trigger alarm. ${error.message}`,
      severity: "error"
    });
  }
  return /* @__PURE__ */ jsxs(Dialog, { maxWidth: "md", open: showDialog, onClose: handleDialog, fullWidth: true, children: [
    /* @__PURE__ */ jsxs(DialogTitle, { children: [
      "This action will trigger an incident for",
      " ",
      /* @__PURE__ */ jsxs("strong", { children: [
        '"',
        serviceName,
        '"'
      ] }),
      "."
    ] }),
    /* @__PURE__ */ jsxs(DialogContent, { children: [
      /* @__PURE__ */ jsx(Alert, { severity: "info", children: /* @__PURE__ */ jsx(Typography, { variant: "body1", align: "justify", children: `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__ */ jsx(
        Typography,
        {
          variant: "body1",
          style: { marginTop: "1em" },
          gutterBottom: true,
          align: "justify",
          children: "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__ */ jsx(
        TextField,
        {
          inputProps: { "data-testid": "trigger-input" },
          id: "description",
          multiline: true,
          fullWidth: true,
          minRows: 4,
          margin: "normal",
          label: "Problem description",
          variant: "outlined",
          onChange: descriptionChanged
        }
      )
    ] }),
    /* @__PURE__ */ jsxs(DialogActions, { children: [
      /* @__PURE__ */ jsx(
        Button,
        {
          "data-testid": "trigger-button",
          id: "trigger",
          color: "secondary",
          disabled: !description || loading,
          variant: "contained",
          onClick: () => handleTriggerAlarm(description),
          endIcon: loading && /* @__PURE__ */ jsx(CircularProgress, { size: 16 }),
          children: "Trigger Incident"
        }
      ),
      /* @__PURE__ */ jsx(Button, { id: "close", color: "primary", onClick: handleDialog, children: "Close" })
    ] })
  ] });
};

export { TriggerDialog };
//# sourceMappingURL=TriggerDialog.esm.js.map