@pagerduty/backstage-plugin 0.12.0-next.8 → 0.12.0

package/dist/esm/{index-ac92409f.esm.js → index-b56f9c4b.esm.js}

@@ -1,9 +1,9 @@
-import { createApiRef, createRouteRef, createPlugin, createApiFactory, discoveryApiRef, configApiRef, fetchApiRef, createRoutableExtension, createComponentExtension, useApi, alertApiRef, identityApiRef } from '@backstage/core-plugin-api';
+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, withStyles, LinearProgress, CardHeader, Divider, CardContent } from '@material-ui/core';
+import { makeStyles, ListItem, ListItemText, Chip, Typography, ListItemSecondaryAction, Tooltip, IconButton, Grid, List, ListItemIcon, createStyles, ListSubheader, Button, Card, withStyles, LinearProgress, Dialog, DialogTitle, DialogContent, TextField, DialogActions, CircularProgress, CardHeader, Divider, CardContent, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core';
 import { DateTime, Duration } from 'luxon';
 import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
 import { Link, Progress, StatusWarning, StatusError, EmptyState, TabbedCard, CardTab, InfoCard } from '@backstage/core-components';
@@ -17,15 +17,16 @@ import useAsync from 'react-use/lib/useAsync';
 import LinkIcon from '@material-ui/icons/Link';
 import PDGreenImage from '../assets/PD-Green.svg';
 import PDWhiteImage from '../assets/PD-White.svg';
-import { parseEntityRef, DEFAULT_NAMESPACE } from '@backstage/catalog-model';
-import AddAlert from '@material-ui/icons/AddAlert';
-import { makeStyles as makeStyles$1, createStyles, useTheme } from '@material-ui/core/styles';
-import { useAsyncFn as useAsyncFn$1 } from 'react-use';
-import Alert$1 from '@material-ui/lab/Alert/Alert';
+import validateColor from 'validate-color';
 import InfoIcon from '@material-ui/icons/Info';
 import CheckCircle from '@material-ui/icons/CheckCircle';
 import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
-import validateColor from 'validate-color';
+import { makeStyles as makeStyles$1, createStyles as createStyles$1, useTheme } from '@material-ui/core/styles';
+import { useAsyncFn as useAsyncFn$1 } from 'react-use';
+import Alert$1 from '@material-ui/lab/Alert/Alert';
+import { parseEntityRef, DEFAULT_NAMESPACE } from '@backstage/catalog-model';
+import AddAlert from '@material-ui/icons/AddAlert';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
 const PAGERDUTY_INTEGRATION_KEY = "pagerduty.com/integration-key";
 const PAGERDUTY_SERVICE_ID = "pagerduty.com/service-id";
@@ -184,7 +185,7 @@ class PagerDutyClient {
   }
 }
 
-const rootRouteRef = createRouteRef({
+createRouteRef({
   id: "pagerduty"
 });
 const pagerDutyPlugin = createPlugin({
@@ -201,28 +202,31 @@ const pagerDutyPlugin = createPlugin({
     })
   ]
 });
-const PagerDutyPage = pagerDutyPlugin.provide(
-  createRoutableExtension({
-    name: "PagerDutyPage",
-    component: () => import('./index-1d1c7c36.esm.js').then((m) => m.AdvancedConfiguration),
-    mountPoint: rootRouteRef
-  })
-);
 const EntityPagerDutyCard$1 = pagerDutyPlugin.provide(
   createComponentExtension({
     name: "EntityPagerDutyCard",
     component: {
-      lazy: () => Promise.resolve().then(function () { return index; }).then(
+      lazy: () => Promise.resolve().then(function () { return index$1; }).then(
         (m) => m.EntityPagerDutyCard
       )
     }
   })
 );
+const EntityPagerDutySmallCard$1 = pagerDutyPlugin.provide(
+  createComponentExtension({
+    name: "EntityPagerDutySmallCard",
+    component: {
+      lazy: () => Promise.resolve().then(function () { return index; }).then(
+        (m) => m.EntityPagerDutySmallCard
+      )
+    }
+  })
+);
 const HomePagePagerDutyCard = pagerDutyPlugin.provide(
   createCardExtension({
     name: "HomePagePagerDutyCard",
     title: "PagerDuty Homepage Card",
-    components: () => import('./index-c6abad2a.esm.js'),
+    components: () => import('./index-b1b65bd2.esm.js'),
     settings: {
       schema: {
         title: "PagerDuty",
@@ -459,6 +463,17 @@ const useStyles$5 = makeStyles((theme) => ({
       textDecoration: "underline"
     }
   },
+  userTextButtonStyle: {
+    marginLeft: "-11px",
+    marginTop: "-10px",
+    marginBottom: "-10px",
+    fontSize: "15px",
+    color: theme.palette.text.primary,
+    "&:hover": {
+      backgroundColor: "transparent",
+      textDecoration: "underline"
+    }
+  },
   containerStyle: {
     display: "flex",
     alignItems: "center",
@@ -476,15 +491,30 @@ const useStyles$5 = makeStyles((theme) => ({
     marginTop: "-20px"
   }
 }));
-function navigateToEscalationPolicy(url) {
+function navigateToUrl(url) {
   window.open(url, "_blank");
 }
 const EscalationUser = ({ user, policyUrl, policyName }) => {
   const classes = useStyles$5();
-  return /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Avatar, { alt: user.name, src: user.avatar_url, className: classes.avatarStyle })), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(
+    Avatar,
+    {
+      alt: user.name,
+      src: user.avatar_url,
+      className: classes.avatarStyle
+    }
+  )), /* @__PURE__ */ React.createElement(
     ListItemText,
     {
-      primary: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { className: classes.listItemPrimary }, user.name), /* @__PURE__ */ React.createElement(
+      primary: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, { title: "Open user in PagerDuty", placement: "top" }, /* @__PURE__ */ React.createElement(
+        IconButton,
+        {
+          "aria-label": "open-user-in-browser",
+          onClick: () => navigateToUrl(user.html_url),
+          className: classes.userTextButtonStyle
+        },
+        /* @__PURE__ */ React.createElement("span", { className: classes.containerStyle }, user.name)
+      )), /* @__PURE__ */ React.createElement(
         Typography,
         {
           className: classes.listItemSecondary,
@@ -495,31 +525,30 @@ const EscalationUser = ({ user, policyUrl, policyName }) => {
       secondary: /* @__PURE__ */ React.createElement(
         IconButton,
         {
-          "aria-label": "open-service-in-browser",
-          onClick: () => navigateToEscalationPolicy(policyUrl),
+          "aria-label": "open-escalation-policy-in-browser",
+          onClick: () => navigateToUrl(policyUrl),
           className: classes.buttonStyle
         },
         /* @__PURE__ */ React.createElement("span", { className: classes.containerStyle }, /* @__PURE__ */ React.createElement(NotificationsIcon, { className: classes.iconStyle }), policyName)
       )
     }
-  ), /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(Tooltip, { title: "Open user in PagerDuty", placement: "top" }, /* @__PURE__ */ React.createElement(
-    IconButton,
-    {
-      href: user.html_url,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className: classes.smallIconStyle
-    },
-    /* @__PURE__ */ React.createElement(OpenInBrowserIcon, null)
-  ))));
+  ));
 };
 
+const useStyles$4 = makeStyles(
+  () => createStyles({
+    listStyle: {
+      marginLeft: "-15px"
+    }
+  })
+);
 const EscalationPolicy = ({
   policyId,
   policyUrl,
   policyName
 }) => {
   const api = useApi(pagerDutyApiRef);
+  const classes = useStyles$4();
   const {
     value: users,
     loading,
@@ -543,8 +572,7 @@ const EscalationPolicy = ({
     List,
     {
       dense: true,
-      subheader: /* @__PURE__ */ React.createElement(ListSubheader, null, "ON CALL"),
-      style: { marginLeft: "-15px" }
+      className: classes.listStyle
     },
     users.map((user, index) => /* @__PURE__ */ React.createElement(
       EscalationUser,
@@ -594,7 +622,7 @@ const ServiceNotFoundError = () => /* @__PURE__ */ React.createElement(
   }
 );
 
-const useStyles$4 = makeStyles((theme) => ({
+const useStyles$3 = makeStyles((theme) => ({
   denseListIcon: {
     marginRight: 0,
     display: "flex",
@@ -618,7 +646,7 @@ const useStyles$4 = makeStyles((theme) => ({
   }
 }));
 const ChangeEventListItem = ({ changeEvent }) => {
-  const classes = useStyles$4();
+  const classes = useStyles$3();
   const duration = (/* @__PURE__ */ new Date()).getTime() - new Date(changeEvent.timestamp).getTime();
   const changedAt = DateTime.local().minus(Duration.fromMillis(duration)).toRelative({ locale: "en" });
   let externalLinkElem;
@@ -727,166 +755,59 @@ const ForbiddenError = () => /* @__PURE__ */ React.createElement(
   }
 );
 
-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`
-        });
-        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, '"', serviceName, '"'), "."), /* @__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,
-      minRows: 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 })
+function IncidentCounterCard({ count, label, color, compact }) {
+  const textColor = color && validateColor(color) ? color : "black";
+  const useStyles = makeStyles(() => ({
+    cardStyle: {
+      marginRight: "10px",
+      height: compact !== true ? "120px" : "80px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "rgba(0, 0, 0, 0.03)"
     },
-    "Trigger Incident"
-  ), /* @__PURE__ */ React.createElement(Button, { id: "close", color: "primary", onClick: handleDialog }, "Close")));
-};
-
-const useStyles$3 = makeStyles((theme) => ({
-  buttonStyle: {
-    color: theme.palette.text.primary,
-    "&:hover": {
-      backgroundColor: "transparent",
-      textDecoration: "underline"
-    }
-  },
-  containerStyle: {
-    fontSize: "12px",
-    width: "80px",
-    marginRight: "-10px"
-  },
-  iconStyle: {
-    fontSize: "30px",
-    marginBottom: "-10px"
-  },
-  textStyle: {
-    marginBottom: "-10px"
-  }
-}));
-function TriggerIncidentButton({ integrationKey, entityName, handleRefresh }) {
-  const { buttonStyle, containerStyle, iconStyle, textStyle } = useStyles$3();
-  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(
-    IconButton,
-    {
-      "aria-label": "create-incident",
-      onClick: showDialog,
-      className: disabled ? "" : buttonStyle,
-      disabled
+    largeTextStyle: {
+      color: textColor,
+      fontSize: "30px",
+      marginTop: "-10px"
     },
-    /* @__PURE__ */ React.createElement("div", { className: containerStyle }, /* @__PURE__ */ React.createElement(AddAlert, { className: iconStyle }), /* @__PURE__ */ React.createElement("p", { className: textStyle }, "Create new incident"))
-  ), integrationKey && /* @__PURE__ */ React.createElement(
-    TriggerDialog,
-    {
-      showDialog: dialogShown,
-      handleDialog: hideDialog,
-      integrationKey,
-      serviceName: entityName,
-      onIncidentCreated: handleRefresh
+    smallTextStyle: {
+      color: textColor,
+      fontWeight: "bold",
+      fontSize: "10px",
+      marginTop: "-5px",
+      textTransform: "uppercase",
+      flexWrap: "wrap"
     }
-  ));
+  }));
+  const { cardStyle, largeTextStyle, smallTextStyle } = useStyles();
+  return /* @__PURE__ */ React.createElement(Card, { className: cardStyle }, count !== void 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { className: largeTextStyle }, count), /* @__PURE__ */ React.createElement(Typography, { className: smallTextStyle }, label)) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { className: largeTextStyle }, "-"), /* @__PURE__ */ React.createElement(Typography, { className: smallTextStyle }, label)));
 }
 
-const useStyles$2 = makeStyles((theme) => ({
-  buttonStyle: {
-    color: theme.palette.text.primary,
-    "&:hover": {
-      backgroundColor: "transparent",
-      textDecoration: "underline"
+function OpenServiceButton({ serviceUrl, compact }) {
+  const useStyles = makeStyles((theme) => ({
+    buttonStyle: {
+      color: theme.palette.text.primary,
+      "&:hover": {
+        backgroundColor: "transparent",
+        textDecoration: "underline"
+      }
+    },
+    containerStyle: {
+      fontSize: compact !== true ? "12px" : "10px",
+      width: compact !== true ? "85px" : "70px"
+    },
+    iconStyle: {
+      fontSize: "30px",
+      marginBottom: "-10px"
+    },
+    textStyle: {
+      marginBottom: "-10px"
     }
-  },
-  containerStyle: {
-    fontSize: "12px",
-    width: "85px"
-  },
-  iconStyle: {
-    fontSize: "30px",
-    marginBottom: "-10px"
-  },
-  textStyle: {
-    marginBottom: "-10px"
-  }
-}));
-function OpenServiceButton(props) {
-  const { buttonStyle, containerStyle, iconStyle, textStyle } = useStyles$2();
+  }));
+  const { buttonStyle, containerStyle, iconStyle, textStyle } = useStyles();
   function navigateToService() {
-    window.open(props.serviceUrl, "_blank");
+    window.open(serviceUrl, "_blank");
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     IconButton,
@@ -899,109 +820,18 @@ function OpenServiceButton(props) {
   ));
 }
 
-function labelFromStatus(status) {
-  let label;
-  switch (status) {
-    case "active":
-      label = "OK";
-      break;
-    case "warning":
-      label = "ACTIVE";
-      break;
-    case "critical":
-      label = "ALARM";
-      break;
-    case "maintenance":
-      label = "MAINTENANCE";
-      break;
-    case "disabled":
-      label = "DISABLED";
-      break;
-    default:
-      label = "OK";
-      break;
+function colorFromPercentage(theme, percentage) {
+  if (percentage < 0.5) {
+    return theme.palette.error.main;
+  } else if (percentage < 0.8) {
+    return theme.palette.warning.main;
   }
-  return label;
+  return theme.palette.success.main;
 }
-function colorFromStatus(theme, status) {
-  let color;
-  switch (status) {
-    case "active":
-      color = theme.palette.success.main;
-      break;
-    case "warning":
-      color = theme.palette.warningBackground;
-      break;
-    case "critical":
-      color = theme.palette.error.main;
-      break;
-    case "maintenance":
-      color = "#ebdc00";
-      break;
-    case "disabled":
-      color = "#A9A9A9";
-      break;
-    default:
-      color = theme.palette.success.main;
-      break;
-  }
-  return color;
-}
-function StatusCard({ serviceId, refreshStatus }) {
-  const api = useApi(pagerDutyApiRef);
-  const [{ value: status, loading, error }, getStatus] = useAsyncFn$1(
-    async () => {
-      const { service: foundService } = await api.getServiceById(serviceId);
-      return foundService.status;
-    }
-  );
-  const useStyles = makeStyles$1((theme) => ({
-    cardStyle: {
-      height: "120px",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      backgroundColor: status !== void 0 ? colorFromStatus(theme, status) : colorFromStatus(theme, "active"),
-      marginRight: "10px"
-    },
-    largeTextStyle: {
-      color: "white",
-      fontWeight: "bold",
-      fontSize: "20px",
-      wordWrap: "break-word"
-    }
-  }));
-  const { cardStyle, largeTextStyle } = useStyles();
-  useEffect(() => {
-    getStatus();
-  }, [refreshStatus, getStatus]);
-  if (error) {
-    if (error.message.includes("Forbidden")) {
-      return /* @__PURE__ */ React.createElement("p", null, "forbidden");
-    }
-    return /* @__PURE__ */ React.createElement(Alert$1, { severity: "error" }, "Error encountered while fetching information. ", error.message);
-  }
-  if (loading) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
-  }
-  if (!status) {
-    return /* @__PURE__ */ React.createElement("p", null, "not found");
-  }
-  return /* @__PURE__ */ React.createElement(Card, { className: cardStyle }, status !== void 0 ? /* @__PURE__ */ React.createElement(Typography, { className: largeTextStyle }, labelFromStatus(status)) : /* @__PURE__ */ React.createElement(Typography, { className: largeTextStyle }, "Unable to get status"));
-}
-
-function colorFromPercentage(theme, percentage) {
-  if (percentage < 0.5) {
-    return theme.palette.error.main;
-  } else if (percentage < 0.8) {
-    return theme.palette.warning.main;
-  }
-  return theme.palette.success.main;
-}
-function ServiceStandardsCard({ total, completed, standards }) {
+function ServiceStandardsCard({ total, completed, standards, compact }) {
   const useStyles = makeStyles((theme) => ({
     cardStyle: {
-      height: "120px",
+      height: compact !== true ? "120px" : "80px",
       display: "grid",
       gridTemplateRows: "1fr auto auto",
       backgroundColor: "rgba(0, 0, 0, 0.03)"
@@ -1009,22 +839,22 @@ function ServiceStandardsCard({ total, completed, standards }) {
     containerStyle: {
       display: "flex",
       justifyContent: "center",
-      marginTop: "-100px"
+      marginTop: compact !== true ? "-100px" : "-50px"
     },
     largeTextStyle: {
-      fontSize: "50px",
+      fontSize: compact !== true ? "50px" : "40px",
       color: completed !== void 0 && total !== void 0 ? colorFromPercentage(theme, completed / total) : colorFromPercentage(theme, 0),
       alignSelf: "center",
       justifyContent: "center"
     },
     smallTextStyle: {
       color: theme.palette.textSubtle,
-      fontSize: "14px",
+      fontSize: compact !== true ? "14px" : "12px",
       fontWeight: "bold",
       alignSelf: "center",
       justifyContent: "center",
       marginLeft: "-2px",
-      marginTop: "25px"
+      marginTop: compact !== true ? "25px" : "20px"
     },
     tooltipContainer: {},
     tooltipIcon: {
@@ -1077,42 +907,246 @@ function ServiceStandardsCard({ total, completed, standards }) {
   ))) : /* @__PURE__ */ React.createElement("div", { className: containerStyle }, /* @__PURE__ */ React.createElement(Typography, { className: smallTextStyle }, "Unable to retrieve Scores")));
 }
 
-function IncidentCounterCard({ count, label, color }) {
-  const textColor = color && validateColor(color) ? color : "black";
-  const useStyles = makeStyles(() => ({
+function labelFromStatus(status) {
+  let label;
+  switch (status) {
+    case "active":
+      label = "OK";
+      break;
+    case "warning":
+      label = "ACTIVE";
+      break;
+    case "critical":
+      label = "ALARM";
+      break;
+    case "maintenance":
+      label = "MAINTENANCE";
+      break;
+    case "disabled":
+      label = "DISABLED";
+      break;
+    default:
+      label = "OK";
+      break;
+  }
+  return label;
+}
+function colorFromStatus(theme, status) {
+  let color;
+  switch (status) {
+    case "active":
+      color = theme.palette.success.main;
+      break;
+    case "warning":
+      color = theme.palette.warningBackground;
+      break;
+    case "critical":
+      color = theme.palette.error.main;
+      break;
+    case "maintenance":
+      color = "#ebdc00";
+      break;
+    case "disabled":
+      color = "#A9A9A9";
+      break;
+    default:
+      color = theme.palette.success.main;
+      break;
+  }
+  return color;
+}
+function StatusCard({ serviceId, refreshStatus, compact }) {
+  const api = useApi(pagerDutyApiRef);
+  const [{ value: status, loading, error }, getStatus] = useAsyncFn$1(
+    async () => {
+      const { service: foundService } = await api.getServiceById(serviceId);
+      return foundService.status;
+    }
+  );
+  const useStyles = makeStyles$1((theme) => ({
     cardStyle: {
-      marginRight: "10px",
-      height: "120px",
+      height: compact !== true ? "120px" : "80px",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      backgroundColor: "rgba(0, 0, 0, 0.03)"
+      backgroundColor: status !== void 0 ? colorFromStatus(theme, status) : colorFromStatus(theme, "active"),
+      marginRight: "10px"
     },
     largeTextStyle: {
-      color: textColor,
+      color: "white",
+      fontWeight: "bold",
+      fontSize: "20px",
+      wordWrap: "break-word"
+    }
+  }));
+  const { cardStyle, largeTextStyle } = useStyles();
+  useEffect(() => {
+    getStatus();
+  }, [refreshStatus, getStatus]);
+  if (error) {
+    if (error.message.includes("Forbidden")) {
+      return /* @__PURE__ */ React.createElement("p", null, "forbidden");
+    }
+    return /* @__PURE__ */ React.createElement(Alert$1, { severity: "error" }, "Error encountered while fetching information. ", error.message);
+  }
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (!status) {
+    return /* @__PURE__ */ React.createElement("p", null, "not found");
+  }
+  return /* @__PURE__ */ React.createElement(Card, { className: cardStyle }, status !== void 0 ? /* @__PURE__ */ React.createElement(Typography, { className: largeTextStyle }, labelFromStatus(status)) : /* @__PURE__ */ React.createElement(Typography, { className: largeTextStyle }, "Unable to get status"));
+}
+
+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`
+        });
+        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, '"', serviceName, '"'), "."), /* @__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,
+      minRows: 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")));
+};
+
+function TriggerIncidentButton({ integrationKey, entityName, compact, handleRefresh }) {
+  const useStyles = makeStyles((theme) => ({
+    buttonStyle: {
+      color: theme.palette.text.primary,
+      "&:hover": {
+        backgroundColor: "transparent",
+        textDecoration: "underline"
+      }
+    },
+    containerStyle: {
+      fontSize: compact !== true ? "12px" : "10px",
+      width: compact !== true ? "80px" : "60px",
+      marginRight: "-10px"
+    },
+    iconStyle: {
       fontSize: "30px",
-      marginTop: "-10px"
+      marginBottom: "-10px"
     },
-    smallTextStyle: {
-      color: textColor,
-      fontWeight: "bold",
-      fontSize: "10px",
-      marginTop: "-5px",
-      textTransform: "uppercase",
-      flexWrap: "wrap"
+    textStyle: {
+      marginBottom: "-10px"
     }
   }));
-  const { cardStyle, largeTextStyle, smallTextStyle } = useStyles();
-  return /* @__PURE__ */ React.createElement(Card, { className: cardStyle }, count !== void 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { className: largeTextStyle }, count), /* @__PURE__ */ React.createElement(Typography, { className: smallTextStyle }, label)) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { className: largeTextStyle }, "-"), /* @__PURE__ */ React.createElement(Typography, { className: smallTextStyle }, label)));
+  const { buttonStyle, containerStyle, iconStyle, textStyle } = useStyles();
+  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(
+    IconButton,
+    {
+      "aria-label": "create-incident",
+      onClick: showDialog,
+      className: disabled ? "" : buttonStyle,
+      disabled
+    },
+    /* @__PURE__ */ React.createElement("div", { className: containerStyle }, /* @__PURE__ */ React.createElement(AddAlert, { className: iconStyle }), /* @__PURE__ */ React.createElement("p", { className: textStyle }, "Create new incident"))
+  ), integrationKey && /* @__PURE__ */ React.createElement(
+    TriggerDialog,
+    {
+      showDialog: dialogShown,
+      handleDialog: hideDialog,
+      integrationKey,
+      serviceName: entityName,
+      onIncidentCreated: handleRefresh
+    }
+  ));
 }
 
-const useStyles$1 = makeStyles$1(
-  (theme) => createStyles({
+const useStyles$2 = makeStyles$1(
+  (theme) => createStyles$1({
     overviewHeaderTextStyle: {
       fontSize: "14px",
       fontWeight: 500,
       color: theme.palette.type === "light" ? "rgba(0, 0, 0, 0.54)" : "rgba(255, 255, 255, 0.7)"
     },
+    oncallHeaderTextStyle: {
+      fontSize: "14px",
+      fontWeight: 500,
+      marginTop: "10px",
+      color: theme.palette.type === "light" ? "rgba(0, 0, 0, 0.54)" : "rgba(255, 255, 255, 0.7)"
+    },
     headerStyle: {
       marginBottom: "0px",
       fontSize: "0px"
@@ -1143,10 +1177,10 @@ const useStyles$1 = makeStyles$1(
     }
   })
 );
-const BasicCard = ({ children }) => /* @__PURE__ */ React.createElement(InfoCard, { title: "PagerDuty" }, children);
+const BasicCard$1 = ({ children }) => /* @__PURE__ */ React.createElement(InfoCard, { title: "PagerDuty" }, children);
 const PagerDutyCard$1 = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const classes = useStyles$1();
+  const classes = useStyles$2();
   const theme = useTheme();
   const { readOnly, disableChangeEvents, disableOnCall } = props;
   const api = useApi(pagerDutyApiRef);
@@ -1197,10 +1231,10 @@ const PagerDutyCard$1 = (props) => {
       default:
         errorNode = /* @__PURE__ */ React.createElement(ForbiddenError, null);
     }
-    return /* @__PURE__ */ React.createElement(BasicCard, null, errorNode);
+    return /* @__PURE__ */ React.createElement(BasicCard$1, null, errorNode);
   }
   if (loading) {
-    return /* @__PURE__ */ React.createElement(BasicCard, null, /* @__PURE__ */ React.createElement(Progress, null));
+    return /* @__PURE__ */ React.createElement(BasicCard$1, null, /* @__PURE__ */ React.createElement(Progress, null));
   }
   return /* @__PURE__ */ React.createElement(Card, { "data-testid": "pagerduty-card" }, /* @__PURE__ */ React.createElement(
     CardHeader,
@@ -1258,7 +1292,7 @@ const PagerDutyCard$1 = (props) => {
       serviceId: service.id,
       refreshEvents: refreshChangeEvents
     }
-  )) : /* @__PURE__ */ React.createElement(React.Fragment, null)), disableOnCall !== true ? /* @__PURE__ */ React.createElement(
+  )) : /* @__PURE__ */ React.createElement(React.Fragment, null)), disableOnCall !== true ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { className: classes.oncallHeaderTextStyle }, "ON CALL"), /* @__PURE__ */ React.createElement(
     EscalationPolicy,
     {
       "data-testid": "oncall-card",
@@ -1266,10 +1300,10 @@ const PagerDutyCard$1 = (props) => {
       policyUrl: service.policyLink,
       policyName: service.policyName
     }
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null)));
+  )) : /* @__PURE__ */ React.createElement(React.Fragment, null)));
 };
 
-const isPluginApplicableToEntity = (entity) => {
+const isPluginApplicableToEntity$1 = (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])
@@ -1290,10 +1324,223 @@ const EntityPagerDutyCard = (props) => {
   );
 };
 
+var index$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  isPluginApplicableToEntity: isPluginApplicableToEntity$1,
+  EntityPagerDutyCard: EntityPagerDutyCard
+});
+
+const useStyles$1 = makeStyles$1(
+  (theme) => createStyles$1({
+    overviewHeaderTextStyle: {
+      fontSize: "14px",
+      fontWeight: 500,
+      color: theme.palette.type === "light" ? "rgba(0, 0, 0, 0.54)" : "rgba(255, 255, 255, 0.7)"
+    },
+    headerStyle: {
+      marginBottom: "0px",
+      fontSize: "0px"
+    },
+    overviewHeaderContainerStyle: {
+      display: "flex",
+      margin: "0px",
+      padding: "15px",
+      marginBottom: "5px"
+    },
+    headerWithSubheaderContainerStyle: {
+      display: "flex",
+      alignItems: "center"
+    },
+    subheaderTextStyle: {
+      fontSize: "10px",
+      marginLeft: "5px"
+    },
+    overviewCardsContainerStyle: {
+      display: "flex",
+      margin: "15px",
+      marginTop: "-15px"
+    },
+    onCallAccordionDetails: {
+      display: "flex",
+      width: "100%",
+      marginTop: "-25px",
+      marginBottom: "-15px"
+    },
+    incidentMetricsContainerStyle: {
+      display: "flex",
+      height: "100%",
+      justifyContent: "center",
+      columnSpan: "all",
+      margin: "15px",
+      marginTop: "-15px"
+    }
+  })
+);
+const BasicCard = ({ children }) => /* @__PURE__ */ React.createElement(InfoCard, { title: "PagerDuty" }, children);
+const PagerDutySmallCard = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const classes = useStyles$1();
+  const theme = useTheme();
+  const { readOnly, disableInsights, disableOnCall } = props;
+  const api = useApi(pagerDutyApiRef);
+  const [refreshStatus, setRefreshStatus] = useState(false);
+  const handleRefresh = useCallback(() => {
+    setRefreshStatus((x) => !x);
+  }, []);
+  const {
+    value: service,
+    loading,
+    error
+  } = useAsync(async () => {
+    const { service: foundService } = await api.getServiceByPagerDutyEntity(
+      props
+    );
+    const serviceStandards = await api.getServiceStandardsByServiceId(
+      foundService.id
+    );
+    const serviceMetrics = await api.getServiceMetricsByServiceId(
+      foundService.id
+    );
+    const result = {
+      id: foundService.id,
+      name: foundService.name,
+      url: foundService.html_url,
+      policyId: foundService.escalation_policy.id,
+      policyLink: foundService.escalation_policy.html_url,
+      policyName: foundService.escalation_policy.name,
+      status: foundService.status,
+      standards: serviceStandards !== void 0 ? serviceStandards.standards : void 0,
+      metrics: serviceMetrics !== void 0 ? serviceMetrics.metrics : void 0
+    };
+    return result;
+  }, [props]);
+  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(ForbiddenError, null);
+    }
+    return /* @__PURE__ */ React.createElement(BasicCard, null, errorNode);
+  }
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(BasicCard, null, /* @__PURE__ */ React.createElement(Progress, null));
+  }
+  return /* @__PURE__ */ React.createElement(Card, { "data-testid": "pagerduty-card" }, /* @__PURE__ */ React.createElement(
+    CardHeader,
+    {
+      className: classes.headerStyle,
+      title: theme.palette.type === "dark" ? /* @__PURE__ */ React.createElement("img", { src: PDWhiteImage, alt: "PagerDuty", height: "25" }) : /* @__PURE__ */ React.createElement("img", { src: PDGreenImage, alt: "PagerDuty", height: "25" }),
+      action: !readOnly && props.integrationKey ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+        TriggerIncidentButton,
+        {
+          compact: true,
+          "data-testid": "trigger-incident-button",
+          integrationKey: props.integrationKey,
+          entityName: props.name,
+          handleRefresh
+        }
+      ), /* @__PURE__ */ React.createElement(OpenServiceButton, { compact: true, serviceUrl: service.url })) : /* @__PURE__ */ React.createElement(OpenServiceButton, { compact: true, serviceUrl: service.url })
+    }
+  ), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 12, className: classes.overviewHeaderContainerStyle }, /* @__PURE__ */ React.createElement(Grid, { item: true, md: 6 }, /* @__PURE__ */ React.createElement(Typography, { className: classes.overviewHeaderTextStyle }, "STATUS")), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 6 }, /* @__PURE__ */ React.createElement(Typography, { className: classes.overviewHeaderTextStyle }, "STANDARDS"))), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 12, className: classes.overviewCardsContainerStyle }, /* @__PURE__ */ React.createElement(Grid, { item: true, md: 6 }, /* @__PURE__ */ React.createElement(StatusCard, { compact: true, serviceId: service.id, refreshStatus })), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 6 }, /* @__PURE__ */ React.createElement(
+    ServiceStandardsCard,
+    {
+      compact: true,
+      total: ((_a = service == null ? void 0 : service.standards) == null ? void 0 : _a.score) !== void 0 ? (_c = (_b = service == null ? void 0 : service.standards) == null ? void 0 : _b.score) == null ? void 0 : _c.total : void 0,
+      completed: ((_d = service == null ? void 0 : service.standards) == null ? void 0 : _d.score) !== void 0 ? (_f = (_e = service == null ? void 0 : service.standards) == null ? void 0 : _e.score) == null ? void 0 : _f.passing : void 0,
+      standards: (service == null ? void 0 : service.standards) !== void 0 ? (_g = service == null ? void 0 : service.standards) == null ? void 0 : _g.standards : void 0
+    }
+  ))), disableInsights !== true ? /* @__PURE__ */ React.createElement(Accordion, null, /* @__PURE__ */ React.createElement(
+    AccordionSummary,
+    {
+      expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null),
+      "aria-controls": "panel1a-content",
+      id: "panel1a-header"
+    },
+    /* @__PURE__ */ React.createElement("span", { className: classes.headerWithSubheaderContainerStyle }, /* @__PURE__ */ React.createElement(Typography, { className: classes.overviewHeaderTextStyle }, "INSIGHTS"), /* @__PURE__ */ React.createElement(Typography, { className: classes.subheaderTextStyle }, "(last 30 days)"))
+  ), /* @__PURE__ */ React.createElement(AccordionDetails, null, /* @__PURE__ */ React.createElement(
+    Grid,
+    {
+      item: true,
+      md: 12,
+      className: classes.incidentMetricsContainerStyle
+    },
+    /* @__PURE__ */ React.createElement(Grid, { item: true, md: 4 }, /* @__PURE__ */ React.createElement(
+      IncidentCounterCard,
+      {
+        compact: true,
+        count: (service == null ? void 0 : service.metrics) !== void 0 && service.metrics.length > 0 ? service == null ? void 0 : service.metrics[0].total_interruptions : void 0,
+        label: "interruptions",
+        color: theme.palette.textSubtle
+      }
+    )),
+    /* @__PURE__ */ React.createElement(Grid, { item: true, md: 4 }, /* @__PURE__ */ React.createElement(
+      IncidentCounterCard,
+      {
+        compact: true,
+        count: (service == null ? void 0 : service.metrics) !== void 0 && service.metrics.length > 0 ? service == null ? void 0 : service.metrics[0].total_high_urgency_incidents : void 0,
+        label: "high urgency",
+        color: theme.palette.warning.main
+      }
+    )),
+    /* @__PURE__ */ React.createElement(Grid, { item: true, md: 4 }, /* @__PURE__ */ React.createElement(
+      IncidentCounterCard,
+      {
+        compact: true,
+        count: (service == null ? void 0 : service.metrics) !== void 0 && ((_h = service == null ? void 0 : service.metrics) == null ? void 0 : _h.length) > 0 ? service == null ? void 0 : service.metrics[0].total_incident_count : void 0,
+        label: "incidents",
+        color: theme.palette.error.main
+      }
+    ))
+  ))) : /* @__PURE__ */ React.createElement(React.Fragment, null), disableOnCall !== true ? /* @__PURE__ */ React.createElement(Accordion, null, /* @__PURE__ */ React.createElement(
+    AccordionSummary,
+    {
+      expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null),
+      "aria-controls": "panel1a-content",
+      id: "panel1a-header"
+    },
+    /* @__PURE__ */ React.createElement(Typography, { className: classes.overviewHeaderTextStyle }, "ON CALL")
+  ), /* @__PURE__ */ React.createElement(AccordionDetails, { className: classes.onCallAccordionDetails }, /* @__PURE__ */ React.createElement(
+    EscalationPolicy,
+    {
+      "data-testid": "oncall-card",
+      policyId: service.policyId,
+      policyUrl: service.policyLink,
+      policyName: service.policyName
+    }
+  ))) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+};
+
+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 EntityPagerDutySmallCard = (props) => {
+  const { readOnly, disableInsights, disableOnCall } = props;
+  const { entity } = useEntity();
+  const pagerDutyEntity = getPagerDutyEntity(entity);
+  return /* @__PURE__ */ React.createElement(
+    PagerDutySmallCard,
+    {
+      ...pagerDutyEntity,
+      readOnly,
+      disableInsights,
+      disableOnCall
+    }
+  );
+};
+
 var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
   isPluginApplicableToEntity: isPluginApplicableToEntity,
-  EntityPagerDutyCard: EntityPagerDutyCard
+  EntityPagerDutySmallCard: EntityPagerDutySmallCard
 });
 
 function usePagerdutyEntity() {
@@ -1344,5 +1591,5 @@ function TriggerButton(props) {
 
 const PagerDutyCard = EntityPagerDutyCard;
 
-export { EntityPagerDutyCard$1 as E, HomePagePagerDutyCard as H, PagerDutyCard$1 as P, TriggerButton as T, UnauthorizedError as U, PagerDutyPage as a, PagerDutyClient as b, pagerDutyApiRef as c, PagerDutyCard as d, isPluginApplicableToEntity as i, pagerDutyPlugin as p };
-//# sourceMappingURL=index-ac92409f.esm.js.map
+export { EntityPagerDutyCard$1 as E, HomePagePagerDutyCard as H, PagerDutyCard$1 as P, TriggerButton as T, UnauthorizedError as U, EntityPagerDutySmallCard$1 as a, isPluginApplicableToEntity as b, PagerDutyClient as c, pagerDutyApiRef as d, PagerDutyCard as e, isPluginApplicableToEntity$1 as i, pagerDutyPlugin as p };
+//# sourceMappingURL=index-b56f9c4b.esm.js.map