@pagerduty/backstage-plugin 0.9.4-next.1 → 0.9.4-next.11

package/dist/esm/{index-46807363.esm.js → index-90a6424d.esm.js}

@@ -3,9 +3,7 @@ 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 { 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 { DateTime, Duration } from 'luxon';
 import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
 import { Link, Progress, StatusWarning, StatusError, EmptyState, TabbedCard, CardTab, InfoCard } from '@backstage/core-components';
@@ -15,14 +13,19 @@ import { Alert } from '@material-ui/lab';
 import ForbiddenStateImage from '../assets/forbiddenstate.svg';
 import Avatar from '@material-ui/core/Avatar';
 import NotificationsIcon from '@material-ui/icons/Notifications';
-import MailOutline from '@material-ui/icons/MailOutline';
 import useAsync from 'react-use/lib/useAsync';
-import { parseEntityRef, DEFAULT_NAMESPACE } from '@backstage/catalog-model';
+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 { useTheme } from '@material-ui/core/styles';
-import LinearProgress from '@material-ui/core/LinearProgress';
+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 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';
 
 const PAGERDUTY_INTEGRATION_KEY = "pagerduty.com/integration-key";
 const PAGERDUTY_SERVICE_ID = "pagerduty.com/service-id";
@@ -82,6 +85,12 @@ class PagerDutyClient {
   async getServiceByEntity(entity) {
     return await this.getServiceByPagerDutyEntity(getPagerDutyEntity(entity));
   }
+  async getServiceById(serviceId) {
+    const url = `${await this.config.discoveryApi.getBaseUrl(
+      "pagerduty"
+    )}/services/${serviceId}`;
+    return await this.findByUrl(url);
+  }
   async getIncidentsByServiceId(serviceId) {
     const url = `${await this.config.discoveryApi.getBaseUrl(
       "pagerduty"
@@ -94,6 +103,12 @@ class PagerDutyClient {
     )}/services/${serviceId}/change-events`;
     return await this.findByUrl(url);
   }
+  async getServiceStandardsByServiceId(serviceId) {
+    const url = `${await this.config.discoveryApi.getBaseUrl(
+      "pagerduty"
+    )}/services/${serviceId}/standards`;
+    return await this.findByUrl(url);
+  }
   async getOnCallByPolicyId(policyId) {
     const params = `escalation_policy_ids[]=${policyId}`;
     const url = `${await this.config.discoveryApi.getBaseUrl(
@@ -194,7 +209,7 @@ const HomePagePagerDutyCard = pagerDutyPlugin.provide(
   createCardExtension({
     name: "HomePagePagerDutyCard",
     title: "PagerDuty Homepage Card",
-    components: () => import('./index-b2ba10a3.esm.js'),
+    components: () => import('./index-6bae2e1b.esm.js'),
     settings: {
       schema: {
         title: "PagerDuty",
@@ -218,7 +233,7 @@ const HomePagePagerDutyCard = pagerDutyPlugin.provide(
   })
 );
 
-const useStyles$7 = makeStyles((theme) => ({
+const useStyles$8 = makeStyles((theme) => ({
   denseListIcon: {
     marginRight: 0,
     display: "flex",
@@ -230,39 +245,81 @@ const useStyles$7 = makeStyles((theme) => ({
     fontWeight: "bold"
   },
   warning: {
-    borderColor: theme.palette.status.warning,
-    color: theme.palette.status.warning,
+    borderColor: theme.palette.warning.main,
+    color: "#fff",
+    backgroundColor: theme.palette.warning.main,
+    boxShadow: "0 4px 4px 0 rgba(0,0,0,0.2)",
+    textTransform: "uppercase",
     "& *": {
-      color: theme.palette.status.warning
+      color: "#fff"
     }
   },
   error: {
-    borderColor: theme.palette.status.error,
-    color: theme.palette.status.error,
+    borderColor: theme.palette.error.main,
+    color: "#fff",
+    backgroundColor: theme.palette.error.main,
+    boxShadow: "0 4px 4px 0 rgba(0,0,0,0.2)",
+    textTransform: "uppercase",
     "& *": {
-      color: theme.palette.status.error
+      color: "#fff"
     }
+  },
+  lowUrgency: {
+    borderColor: theme.palette.warning.main,
+    color: theme.palette.warning.main,
+    backgroundColor: "#fff",
+    boxShadow: "0 4px 4px 0 rgba(0,0,0,0.2)",
+    textTransform: "uppercase",
+    "& *": {
+      color: theme.palette.warning.main
+    }
+  },
+  highUrgency: {
+    borderColor: theme.palette.error.main,
+    color: theme.palette.error.main,
+    backgroundColor: "#fff",
+    boxShadow: "0 4px 4px 0 rgba(0,0,0,0.2)",
+    textTransform: "uppercase",
+    "& *": {
+      color: theme.palette.error.main
+    }
+  },
+  textContainer: {
+    display: "flex",
+    alignItems: "baseline"
+  },
+  smallIconStyle: {
+    color: theme.palette.text.primary,
+    marginRight: "-20px"
   }
 }));
 const IncidentListItem = ({ incident }) => {
   var _a, _b, _c;
-  const classes = useStyles$7();
+  const classes = useStyles$8();
   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(
+      primary: /* @__PURE__ */ React.createElement("div", { className: classes.textContainer }, /* @__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
         }
+      ), /* @__PURE__ */ React.createElement(
+        Chip,
+        {
+          "data-testid": `chip-${incident.urgency}`,
+          label: `${incident.urgency} urgency`,
+          size: "small",
+          variant: "outlined",
+          className: incident.urgency === "high" ? classes.highUrgency : classes.lowUrgency
+        }
       ), incident.title),
       primaryTypographyProps: {
         variant: "body1",
@@ -276,7 +333,7 @@ const IncidentListItem = ({ incident }) => {
       href: incident.html_url,
       target: "_blank",
       rel: "noopener noreferrer",
-      color: "primary"
+      className: classes.smallIconStyle
     },
     /* @__PURE__ */ React.createElement(OpenInBrowserIcon, null)
   ))));
@@ -342,7 +399,7 @@ const Incidents = ({ serviceId, refreshIncidents }) => {
   return /* @__PURE__ */ React.createElement(List, { dense: true }, incidents.map((incident, index) => /* @__PURE__ */ React.createElement(IncidentListItem, { key: incident.id + index, incident })));
 };
 
-const useStyles$6 = makeStyles({
+const useStyles$7 = makeStyles({
   denseListIcon: {
     marginRight: 0,
     display: "flex",
@@ -352,11 +409,11 @@ const useStyles$6 = makeStyles({
   }
 });
 const EscalationUsersEmptyState = () => {
-  const classes = useStyles$6();
+  const classes = useStyles$7();
   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: "No one is on-call. Update the escalation policy." }));
 };
 
-const useStyles$5 = makeStyles({
+const useStyles$6 = makeStyles({
   denseListIcon: {
     marginRight: 0,
     display: "flex",
@@ -366,11 +423,11 @@ const useStyles$5 = makeStyles({
   }
 });
 const EscalationUsersForbiddenState = () => {
-  const classes = useStyles$5();
+  const classes = useStyles$6();
   return /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement("div", { className: classes.denseListIcon }, /* @__PURE__ */ React.createElement(StatusError, null))), /* @__PURE__ */ React.createElement(ListItemText, { primary: "You don't permissions to list on-calls. Check your OAuth token permissions." }));
 };
 
-const useStyles$4 = makeStyles((theme) => ({
+const useStyles$5 = makeStyles((theme) => ({
   listItemPrimary: {
     fontWeight: "bold"
   },
@@ -401,11 +458,17 @@ const useStyles$4 = makeStyles((theme) => ({
   },
   smallIconStyle: {
     color: theme.palette.text.primary
+  },
+  avatarStyle: {
+    marginTop: "-20px"
   }
 }));
-const EscalationUser = ({ user }) => {
-  const classes = useStyles$4();
-  return /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Avatar, { alt: user.name, src: user.avatar_url })), /* @__PURE__ */ React.createElement(
+function navigateToEscalationPolicy(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(
     ListItemText,
     {
       primary: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { className: classes.listItemPrimary }, user.name), /* @__PURE__ */ React.createElement(
@@ -420,12 +483,13 @@ const EscalationUser = ({ user }) => {
         IconButton,
         {
           "aria-label": "open-service-in-browser",
+          onClick: () => navigateToEscalationPolicy(policyUrl),
           className: classes.buttonStyle
         },
-        /* @__PURE__ */ React.createElement("span", { className: classes.containerStyle }, /* @__PURE__ */ React.createElement(NotificationsIcon, { className: classes.iconStyle }), "Web Team")
+        /* @__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: "Send e-mail to user", placement: "top" }, /* @__PURE__ */ React.createElement(IconButton, { href: `mailto:${user.email}` }, /* @__PURE__ */ React.createElement(MailOutline, { className: classes.smallIconStyle }))), /* @__PURE__ */ React.createElement(Tooltip, { title: "View in PagerDuty", placement: "top" }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(Tooltip, { title: "Open user in PagerDuty", placement: "top" }, /* @__PURE__ */ React.createElement(
     IconButton,
     {
       href: user.html_url,
@@ -437,7 +501,7 @@ const EscalationUser = ({ user }) => {
   ))));
 };
 
-const EscalationPolicy = ({ policyId }) => {
+const EscalationPolicy = ({ policyId, policyUrl, policyName }) => {
   const api = useApi(pagerDutyApiRef);
   const {
     value: users,
@@ -458,7 +522,7 @@ const EscalationPolicy = ({ policyId }) => {
   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 })));
+  return /* @__PURE__ */ React.createElement(List, { dense: true, subheader: /* @__PURE__ */ React.createElement(ListSubheader, null, "ON CALL"), style: { marginLeft: "-15px" } }, users.map((user, index) => /* @__PURE__ */ React.createElement(EscalationUser, { key: index, user, policyUrl, policyName })));
 };
 
 const MissingTokenError = () => /* @__PURE__ */ React.createElement(
@@ -497,91 +561,7 @@ const ServiceNotFoundError = () => /* @__PURE__ */ React.createElement(
   }
 );
 
-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$3 = makeStyles({
+const useStyles$4 = makeStyles((theme) => ({
   denseListIcon: {
     marginRight: 0,
     display: "flex",
@@ -591,10 +571,17 @@ const useStyles$3 = makeStyles({
   },
   listItemPrimary: {
     fontWeight: "bold"
+  },
+  smallExternalLinkIconStyle: {
+    color: theme.palette.text.primary
+  },
+  smallIconStyle: {
+    color: theme.palette.text.primary,
+    marginRight: "-20px"
   }
-});
+}));
 const ChangeEventListItem = ({ changeEvent }) => {
-  const classes = useStyles$3();
+  const classes = useStyles$4();
   const duration = (/* @__PURE__ */ new Date()).getTime() - new Date(changeEvent.timestamp).getTime();
   const changedAt = DateTime.local().minus(Duration.fromMillis(duration)).toRelative({ locale: "en" });
   let externalLinkElem;
@@ -605,9 +592,9 @@ const ChangeEventListItem = ({ changeEvent }) => {
       {
         component: Link,
         to: changeEvent.links[0].href,
-        color: "primary"
+        className: classes.smallExternalLinkIconStyle
       },
-      /* @__PURE__ */ React.createElement(OpenInBrowserIcon, null)
+      /* @__PURE__ */ React.createElement(LinkIcon, null)
     ));
   }
   return /* @__PURE__ */ React.createElement(ListItem, { dense: true, key: changeEvent.id }, /* @__PURE__ */ React.createElement(
@@ -625,7 +612,7 @@ const ChangeEventListItem = ({ changeEvent }) => {
     {
       component: Link,
       to: changeEvent.html_url,
-      color: "primary"
+      className: classes.smallIconStyle
     },
     /* @__PURE__ */ React.createElement(OpenInBrowserIcon, null)
   ))));
@@ -708,7 +695,91 @@ function usePagerdutyEntity() {
   return getPagerDutyEntity(entity);
 }
 
-const useStyles$2 = makeStyles((theme) => ({
+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$3 = makeStyles((theme) => ({
   buttonStyle: {
     color: theme.palette.text.primary,
     "&:hover": {
@@ -727,8 +798,8 @@ const useStyles$2 = makeStyles((theme) => ({
     marginBottom: "-10px"
   }
 }));
-function TriggerIncidentButton() {
-  const { buttonStyle, containerStyle, iconStyle } = useStyles$2();
+function TriggerIncidentButton({ handleRefresh }) {
+  const { buttonStyle, containerStyle, iconStyle } = useStyles$3();
   const { integrationKey, name } = usePagerdutyEntity();
   const [dialogShown, setDialogShown] = useState(false);
   const showDialog = useCallback(() => {
@@ -746,19 +817,20 @@ function TriggerIncidentButton() {
       className: disabled ? "" : buttonStyle,
       disabled
     },
-    /* @__PURE__ */ React.createElement("div", { className: containerStyle }, /* @__PURE__ */ React.createElement(AddAlert, { className: iconStyle }), /* @__PURE__ */ React.createElement("p", null, "Create New Incident"))
+    /* @__PURE__ */ React.createElement("div", { className: containerStyle }, /* @__PURE__ */ React.createElement(AddAlert, { className: iconStyle }), /* @__PURE__ */ React.createElement("p", null, "Create new incident"))
   ), integrationKey && /* @__PURE__ */ React.createElement(
     TriggerDialog,
     {
       showDialog: dialogShown,
       handleDialog: hideDialog,
       integrationKey,
-      name
+      name,
+      onIncidentCreated: handleRefresh
     }
   ));
 }
 
-const useStyles$1 = makeStyles((theme) => ({
+const useStyles$2 = makeStyles((theme) => ({
   buttonStyle: {
     color: theme.palette.text.primary,
     "&:hover": {
@@ -778,7 +850,7 @@ const useStyles$1 = makeStyles((theme) => ({
   }
 }));
 function OpenServiceButton(props) {
-  const { buttonStyle, containerStyle, iconStyle } = useStyles$1();
+  const { buttonStyle, containerStyle, iconStyle } = useStyles$2();
   function navigateToService() {
     window.open(props.serviceUrl, "_blank");
   }
@@ -793,20 +865,253 @@ 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;
+  }
+  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 }) {
+  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 }) {
+  const useStyles = makeStyles((theme) => ({
+    cardStyle: {
+      height: "120px",
+      display: "grid",
+      gridTemplateRows: "1fr auto auto",
+      backgroundColor: "rgba(0, 0, 0, 0.03)"
+    },
+    containerStyle: {
+      display: "flex",
+      justifyContent: "center"
+    },
+    largeTextStyle: {
+      fontSize: "50px",
+      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",
+      fontWeight: "bold",
+      alignSelf: "center",
+      justifyContent: "center",
+      marginLeft: "-2px",
+      marginTop: "25px"
+    },
+    tooltipContainer: {
+      position: "absolute"
+    },
+    tooltipIcon: {
+      marginRight: "5px"
+    },
+    standardItem: {
+      display: "flex",
+      alignItems: "center"
+    }
+  }));
+  const BorderLinearProgress = withStyles((theme) => ({
+    root: {
+      height: 10,
+      borderRadius: 5,
+      margin: 5
+    },
+    colorPrimary: {
+      backgroundColor: theme.palette.grey[theme.palette.type === "light" ? 200 : 700]
+    },
+    bar: {
+      borderRadius: 5,
+      backgroundColor: completed !== void 0 && total !== void 0 ? colorFromPercentage(theme, completed / total) : colorFromPercentage(theme, 0)
+    }
+  }))(LinearProgress);
+  const { cardStyle, containerStyle, largeTextStyle, smallTextStyle, tooltipContainer, tooltipIcon, standardItem } = useStyles();
+  return /* @__PURE__ */ React.createElement(Card, { className: cardStyle }, completed !== void 0 && total !== void 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: tooltipContainer }, /* @__PURE__ */ React.createElement(IconButton, null, /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      interactive: true,
+      title: /* @__PURE__ */ React.createElement(React.Fragment, null, standards == null ? void 0 : standards.map((standard, _) => /* @__PURE__ */ React.createElement("p", null, standard.pass ? /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: standardItem
+        },
+        /* @__PURE__ */ React.createElement(CheckCircle, { className: tooltipIcon }),
+        " ",
+        standard.name
+      ) : /* @__PURE__ */ React.createElement("span", { className: standardItem }, /* @__PURE__ */ React.createElement(RadioButtonUncheckedIcon, { className: tooltipIcon }), " ", standard.name))))
+    },
+    /* @__PURE__ */ React.createElement(InfoIcon, null)
+  ))), /* @__PURE__ */ React.createElement("div", { className: containerStyle }, /* @__PURE__ */ React.createElement(Typography, { className: largeTextStyle }, completed), /* @__PURE__ */ React.createElement(Typography, { className: smallTextStyle }, "/", total)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    BorderLinearProgress,
+    {
+      variant: "determinate",
+      value: completed / total * 100
+    }
+  ))) : /* @__PURE__ */ React.createElement("div", { className: containerStyle }, /* @__PURE__ */ React.createElement(Typography, { className: largeTextStyle }, "Unable to retrieve Scores")));
+}
+
+function IncidentCounterCard({ count, label, color }) {
+  const textColor = color && validateColor(color) ? color : "black";
+  const useStyles = makeStyles(() => ({
+    cardStyle: {
+      marginRight: "10px",
+      height: "120px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "rgba(0, 0, 0, 0.03)"
+    },
+    largeTextStyle: {
+      color: textColor,
+      fontSize: "30px",
+      marginTop: "-10px"
+    },
+    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 }, /* @__PURE__ */ React.createElement(Typography, { className: largeTextStyle }, count), /* @__PURE__ */ React.createElement(Typography, { className: smallTextStyle }, label));
+}
+
+const useStyles$1 = makeStyles$1(
+  (theme) => createStyles({
+    overviewHeaderTextStyle: {
+      fontSize: "14px",
+      fontWeight: 500,
+      color: theme.palette.type === "light" ? "rgba(0, 0, 0, 0.54)" : "rgba(255, 255, 255, 0.7)"
+    },
+    headerStyle: {
+      marginRight: "1em"
+    },
+    overviewHeaderContainerStyle: {
+      display: "flex",
+      margin: "15px",
+      marginBottom: "20px"
+    },
+    overviewCardsContainerStyle: {
+      display: "flex",
+      margin: "15px",
+      marginTop: "-15px"
+    },
+    incidentMetricsContainerStyle: {
+      display: "flex",
+      height: "100%",
+      justifyContent: "center",
+      columnSpan: "all"
+    }
+  })
+);
 const BasicCard = ({ children }) => /* @__PURE__ */ React.createElement(InfoCard, { title: "PagerDuty" }, children);
 const PagerDutyCard$1 = (props) => {
+  var _a, _b, _c, _d, _e;
+  const classes = useStyles$1();
   const theme = useTheme();
-  const { readOnly, disableChangeEvents, integrationKey, name } = props;
+  const { readOnly, disableChangeEvents } = props;
   const api = useApi(pagerDutyApiRef);
   const [refreshIncidents, setRefreshIncidents] = useState(false);
   const [refreshChangeEvents, setRefreshChangeEvents] = useState(false);
-  const [dialogShown, setDialogShown] = useState(false);
-  const hideDialog = useCallback(() => {
-    setDialogShown(false);
-  }, [setDialogShown]);
+  const [refreshStatus, setRefreshStatus] = useState(false);
   const handleRefresh = useCallback(() => {
     setRefreshIncidents((x) => !x);
     setRefreshChangeEvents((x) => !x);
+    setRefreshStatus((x) => !x);
   }, []);
   const {
     value: service,
@@ -816,13 +1121,18 @@ const PagerDutyCard$1 = (props) => {
     const { service: foundService } = await api.getServiceByPagerDutyEntity(
       props
     );
-    return {
+    const { standards: serviceStandards } = await api.getServiceStandardsByServiceId(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
+      policyLink: foundService.escalation_policy.html_url,
+      policyName: foundService.escalation_policy.name,
+      status: foundService.status,
+      standards: serviceStandards
     };
+    return result;
   }, [props]);
   if (error) {
     let errorNode;
@@ -841,250 +1151,42 @@ const PagerDutyCard$1 = (props) => {
   if (loading) {
     return /* @__PURE__ */ React.createElement(BasicCard, null, /* @__PURE__ */ React.createElement(Progress, null));
   }
-  const createIncidentDisabled = !integrationKey;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Card, { "data-testid": "pagerduty-card" }, /* @__PURE__ */ React.createElement(
     CardHeader,
     {
-      style: { marginRight: "1em" },
+      className: classes.headerStyle,
       title: theme.palette.type === "dark" ? /* @__PURE__ */ React.createElement("img", { src: PDWhiteImage, alt: "PagerDuty", height: "35" }) : /* @__PURE__ */ React.createElement("img", { src: PDGreenImage, alt: "PagerDuty", height: "35" }),
-      action: !readOnly ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(TriggerIncidentButton, null), /* @__PURE__ */ React.createElement(OpenServiceButton, { serviceUrl: service.url })) : /* @__PURE__ */ React.createElement(OpenServiceButton, { serviceUrl: service.url })
+      action: !readOnly ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(TriggerIncidentButton, { handleRefresh }), /* @__PURE__ */ React.createElement(OpenServiceButton, { serviceUrl: service.url })) : /* @__PURE__ */ React.createElement(OpenServiceButton, { serviceUrl: service.url })
     }
-  ), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 12, style: { display: "flex", margin: "15px" } }, /* @__PURE__ */ React.createElement(Grid, { item: true, md: 3 }, /* @__PURE__ */ React.createElement(Typography, { style: { fontSize: "16px", fontWeight: "bold" } }, "STATUS")), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 6 }, /* @__PURE__ */ React.createElement(Typography, { style: { fontSize: "16px", fontWeight: "bold" } }, "INCIDENT HISTORY")), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 3 }, /* @__PURE__ */ React.createElement(
-    Typography,
+  ), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 12, className: classes.overviewHeaderContainerStyle }, /* @__PURE__ */ React.createElement(Grid, { item: true, md: 3 }, /* @__PURE__ */ React.createElement(Typography, { className: classes.overviewHeaderTextStyle }, "STATUS")), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 6 }, /* @__PURE__ */ React.createElement(Typography, { className: classes.overviewHeaderTextStyle }, "INSIGHTS")), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 3 }, /* @__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: 3 }, /* @__PURE__ */ React.createElement(StatusCard, { serviceId: service.id, refreshStatus })), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 6, className: classes.incidentMetricsContainerStyle }, /* @__PURE__ */ React.createElement(Grid, { md: 4 }, /* @__PURE__ */ React.createElement(
+    IncidentCounterCard,
     {
-      style: {
-        fontSize: "16px",
-        fontWeight: "bold",
-        marginLeft: "10px"
-      }
-    },
-    "SERVICE STANDARDS"
-  ))), /* @__PURE__ */ React.createElement(
-    Grid,
+      count: 29,
+      label: "interruptions",
+      color: theme.palette.textSubtle
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { md: 4 }, /* @__PURE__ */ React.createElement(
+    IncidentCounterCard,
     {
-      item: true,
-      md: 12,
-      style: { display: "flex", margin: "15px", marginTop: "-15px" }
-    },
-    /* @__PURE__ */ React.createElement(Grid, { item: true, md: 3 }, /* @__PURE__ */ React.createElement(
-      Card,
-      {
-        style: {
-          background: "darkRed",
-          marginRight: "20px",
-          height: "150px",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center"
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        Typography,
-        {
-          variant: "h3",
-          style: { color: "white", fontWeight: "bold" }
-        },
-        "ALARM"
-      ),
-      /* @__PURE__ */ React.createElement(
-        Typography,
-        {
-          style: {
-            alignSelf: "start",
-            position: "absolute",
-            verticalAlign: "bottom",
-            marginTop: "120px",
-            marginLeft: "10px",
-            color: "white"
-          }
-        },
-        "Last triggered 8 minutes ago"
-      )
-    )),
-    /* @__PURE__ */ React.createElement(
-      Grid,
-      {
-        item: true,
-        md: 6,
-        style: {
-          display: "flex",
-          height: "100%",
-          justifyContent: "center",
-          columnSpan: "all"
-        }
-      },
-      /* @__PURE__ */ React.createElement(Grid, { md: 4, style: { height: "100%" } }, /* @__PURE__ */ React.createElement(
-        Card,
-        {
-          style: {
-            marginRight: "10px",
-            height: "150px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }
-        },
-        /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            style: {
-              color: "red",
-              fontSize: "50px"
-            }
-          },
-          "1"
-        ),
-        /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            style: {
-              color: "red",
-              fontWeight: "bold",
-              fontSize: "10px"
-            }
-          },
-          "TRIGGERED"
-        )
-      )),
-      /* @__PURE__ */ React.createElement(Grid, { md: 4 }, /* @__PURE__ */ React.createElement(
-        Card,
-        {
-          style: {
-            marginRight: "10px",
-            height: "150px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }
-        },
-        /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            style: {
-              color: "orange",
-              fontSize: "50px"
-            }
-          },
-          "1"
-        ),
-        /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            style: {
-              color: "orange",
-              fontWeight: "bold",
-              fontSize: "10px"
-            }
-          },
-          "ACKNOWLEDGED"
-        )
-      )),
-      /* @__PURE__ */ React.createElement(Grid, { md: 4 }, /* @__PURE__ */ React.createElement(
-        Card,
-        {
-          style: {
-            marginRight: "10px",
-            height: "150px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }
-        },
-        /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            style: {
-              color: "green",
-              fontSize: "50px"
-            }
-          },
-          "43"
-        ),
-        /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            style: {
-              color: "green",
-              fontWeight: "bold",
-              fontSize: "10px"
-            }
-          },
-          "RESOLVED"
-        )
-      ))
-    ),
-    /* @__PURE__ */ React.createElement(Grid, { item: true, md: 3 }, /* @__PURE__ */ React.createElement(
-      Card,
-      {
-        style: {
-          height: "150px",
-          display: "grid",
-          gridTemplateRows: "1fr auto auto"
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          style: {
-            display: "flex",
-            justifyContent: "center",
-            marginTop: "30px"
-          }
-        },
-        /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            style: {
-              fontSize: "50px",
-              color: "black",
-              fontWeight: "bold",
-              alignSelf: "center",
-              justifyContent: "center"
-            }
-          },
-          "4"
-        ),
-        /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            variant: "body1",
-            style: {
-              color: "black",
-              alignSelf: "center",
-              justifyContent: "center",
-              marginLeft: "1px",
-              marginTop: "20px"
-            }
-          },
-          "/5"
-        )
-      ),
-      /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "row-reverse" } }, /* @__PURE__ */ React.createElement(
-        Typography,
-        {
-          style: {
-            justifyContent: "end",
-            color: "gray",
-            textDecoration: "underline",
-            marginRight: "5px"
-          }
-        },
-        "See service standards"
-      )),
-      /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-        LinearProgress,
-        {
-          variant: "determinate",
-          value: 80,
-          style: {
-            margin: "5px",
-            borderRadius: "10px",
-            height: "10px"
-          }
-        }
-      ))
-    ))
-  ), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(TabbedCard, null, /* @__PURE__ */ React.createElement(CardTab, { label: "Incidents" }, /* @__PURE__ */ React.createElement(
+      count: 29,
+      label: "high urgency",
+      color: theme.palette.warning.main
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { md: 4 }, /* @__PURE__ */ React.createElement(
+    IncidentCounterCard,
+    {
+      count: 32,
+      label: "incidents",
+      color: theme.palette.error.main
+    }
+  ))), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 3 }, /* @__PURE__ */ React.createElement(
+    ServiceStandardsCard,
+    {
+      total: (_b = (_a = service == null ? void 0 : service.standards) == null ? void 0 : _a.score) == null ? void 0 : _b.total,
+      completed: (_d = (_c = service == null ? void 0 : service.standards) == null ? void 0 : _c.score) == null ? void 0 : _d.passing,
+      standards: (_e = service == null ? void 0 : service.standards) == null ? void 0 : _e.standards
+    }
+  ))), /* @__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,
@@ -1096,17 +1198,14 @@ const PagerDutyCard$1 = (props) => {
       serviceId: service.id,
       refreshEvents: refreshChangeEvents
     }
-  )) : /* @__PURE__ */ React.createElement(React.Fragment, null)), /* @__PURE__ */ React.createElement(EscalationPolicy, { policyId: service.policyId }))), !createIncidentDisabled && /* @__PURE__ */ React.createElement(
-    TriggerDialog,
+  )) : /* @__PURE__ */ React.createElement(React.Fragment, null)), /* @__PURE__ */ React.createElement(
+    EscalationPolicy,
     {
-      "data-testid": "trigger-dialog",
-      showDialog: dialogShown,
-      handleDialog: hideDialog,
-      onIncidentCreated: handleRefresh,
-      name,
-      integrationKey
+      policyId: service.policyId,
+      policyUrl: service.policyLink,
+      policyName: service.policyName
     }
-  ));
+  ))));
 };
 
 const isPluginApplicableToEntity = (entity) => {
@@ -1164,7 +1263,7 @@ function TriggerButton(props) {
       className: disabled ? "" : buttonStyle,
       disabled
     },
-    integrationKey ? (_a = props.children) != null ? _a : "Create Incident" : "Missing integration key"
+    integrationKey ? (_a = props.children) != null ? _a : "Create new incident" : "Missing integration key"
   ), integrationKey && /* @__PURE__ */ React.createElement(
     TriggerDialog,
     {
@@ -1179,4 +1278,4 @@ function TriggerButton(props) {
 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-46807363.esm.js.map
+//# sourceMappingURL=index-90a6424d.esm.js.map