@pagerduty/backstage-plugin 0.9.4-next.3 → 0.9.4-next.5

package/dist/esm/{index-b664ea6c.esm.js → index-76653f8d.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';
@@ -17,12 +15,13 @@ 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 validateColor from 'validate-color';
 
 const PAGERDUTY_INTEGRATION_KEY = "pagerduty.com/integration-key";
 const PAGERDUTY_SERVICE_ID = "pagerduty.com/service-id";
@@ -94,6 +93,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 +199,7 @@ const HomePagePagerDutyCard = pagerDutyPlugin.provide(
   createCardExtension({
     name: "HomePagePagerDutyCard",
     title: "PagerDuty Homepage Card",
-    components: () => import('./index-9209930a.esm.js'),
+    components: () => import('./index-02ffa0de.esm.js'),
     settings: {
       schema: {
         title: "PagerDuty",
@@ -218,7 +223,7 @@ const HomePagePagerDutyCard = pagerDutyPlugin.provide(
   })
 );
 
-const useStyles$7 = makeStyles((theme) => ({
+const useStyles$8 = makeStyles((theme) => ({
   denseListIcon: {
     marginRight: 0,
     display: "flex",
@@ -230,37 +235,51 @@ 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 8px 16px 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,
+    marginTop: "2px",
+    borderColor: theme.palette.error.main,
+    color: "#fff",
+    backgroundColor: theme.palette.error.main,
+    boxShadow: "0 8px 16px 0 rgba(0,0,0,0.2)",
+    textTransform: "uppercase",
     "& *": {
-      color: theme.palette.status.error
+      color: "#fff"
     }
+  },
+  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
         }
       ), incident.title),
@@ -276,7 +295,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 +361,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 +371,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 +385,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 +420,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,9 +445,10 @@ 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(
@@ -437,7 +463,7 @@ const EscalationUser = ({ user }) => {
   ))));
 };
 
-const EscalationPolicy = ({ policyId }) => {
+const EscalationPolicy = ({ policyId, policyUrl, policyName }) => {
   const api = useApi(pagerDutyApiRef);
   const {
     value: users,
@@ -458,7 +484,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"), style: { marginLeft: "-15px" } }, 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 +523,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 +533,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 +554,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 +574,7 @@ const ChangeEventListItem = ({ changeEvent }) => {
     {
       component: Link,
       to: changeEvent.html_url,
-      color: "primary"
+      className: classes.smallIconStyle
     },
     /* @__PURE__ */ React.createElement(OpenInBrowserIcon, null)
   ))));
@@ -708,7 +657,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": {
@@ -728,7 +761,7 @@ const useStyles$2 = makeStyles((theme) => ({
   }
 }));
 function TriggerIncidentButton() {
-  const { buttonStyle, containerStyle, iconStyle } = useStyles$2();
+  const { buttonStyle, containerStyle, iconStyle } = useStyles$3();
   const { integrationKey, name } = usePagerdutyEntity();
   const [dialogShown, setDialogShown] = useState(false);
   const showDialog = useCallback(() => {
@@ -746,7 +779,7 @@ 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,
     {
@@ -758,7 +791,7 @@ function TriggerIncidentButton() {
   ));
 }
 
-const useStyles$1 = makeStyles((theme) => ({
+const useStyles$2 = makeStyles((theme) => ({
   buttonStyle: {
     color: theme.palette.text.primary,
     "&:hover": {
@@ -778,7 +811,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,8 +826,196 @@ 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({ 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();
+  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 }) {
+  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"
+    }
+  }));
+  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 } = 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: 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: "40px",
+      marginTop: "-20px"
+    },
+    smallTextStyle: {
+      color: textColor,
+      fontWeight: "bold",
+      fontSize: "10px",
+      marginTop: "-10px",
+      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;
+  const classes = useStyles$1();
   const theme = useTheme();
   const { readOnly, disableChangeEvents, integrationKey, name } = props;
   const api = useApi(pagerDutyApiRef);
@@ -816,13 +1037,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,
+      standardsScore: serviceStandards.score
     };
+    return result;
   }, [props]);
   if (error) {
     let errorNode;
@@ -845,249 +1071,38 @@ const PagerDutyCard$1 = (props) => {
   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 })
     }
-  ), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 12, style: { display: "flex", margin: "15px", marginBottom: "20px" } }, /* @__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, { status: service == null ? void 0 : service.status })), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 6, className: classes.incidentMetricsContainerStyle }, /* @__PURE__ */ React.createElement(Grid, { md: 4 }, /* @__PURE__ */ React.createElement(
+    IncidentCounterCard,
     {
-      style: {
-        fontSize: "14px",
-        fontWeight: "500",
-        color: "rgba(0, 0, 0, 0.54)"
-        // rgba(255, 255, 255, 0.7)
-      }
-    },
-    "STATUS"
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 6 }, /* @__PURE__ */ React.createElement(
-    Typography,
+      count: 29,
+      label: "interruptions",
+      color: theme.palette.textSubtle
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { md: 4 }, /* @__PURE__ */ React.createElement(
+    IncidentCounterCard,
     {
-      style: {
-        fontSize: "14px",
-        fontWeight: "500",
-        color: "rgba(0, 0, 0, 0.54)"
-        // rgba(255, 255, 255, 0.7)
-      }
-    },
-    "INCIDENT HISTORY"
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 3 }, /* @__PURE__ */ React.createElement(
-    Typography,
+      count: 29,
+      label: "high urgency",
+      color: theme.palette.warning.main
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { md: 4 }, /* @__PURE__ */ React.createElement(
+    IncidentCounterCard,
     {
-      style: {
-        fontSize: "14px",
-        fontWeight: "500",
-        color: "rgba(0, 0, 0, 0.54)"
-        // rgba(255, 255, 255, 0.7)
-      }
-    },
-    "SERVICE STANDARDS"
-  ))), /* @__PURE__ */ React.createElement(
-    Grid,
+      count: 32,
+      label: "incidents",
+      color: theme.palette.error.main
+    }
+  ))), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 3 }, /* @__PURE__ */ React.createElement(
+    ServiceStandardsCard,
     {
-      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: theme.palette.error.main,
-          marginRight: "10px",
-          height: "120px",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center"
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        Typography,
-        {
-          variant: "h3",
-          style: { color: "white", fontWeight: "bold" }
-        },
-        "ALARM"
-      )
-    )),
-    /* @__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: "120px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            backgroundColor: "rgba(0, 0, 0, 0.03)"
-          }
-        },
-        /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            style: {
-              color: theme.palette.error.main,
-              fontSize: "40px"
-            }
-          },
-          "1"
-        ),
-        /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            style: {
-              color: theme.palette.error.main,
-              fontWeight: "bold",
-              fontSize: "10px"
-            }
-          },
-          "TRIGGERED"
-        )
-      )),
-      /* @__PURE__ */ React.createElement(Grid, { md: 4 }, /* @__PURE__ */ React.createElement(
-        Card,
-        {
-          style: {
-            marginRight: "10px",
-            height: "120px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            backgroundColor: "rgba(0, 0, 0, 0.03)"
-          }
-        },
-        /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            style: {
-              color: theme.palette.warning.main,
-              fontSize: "40px"
-            }
-          },
-          "1"
-        ),
-        /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            style: {
-              color: theme.palette.warning.main,
-              fontWeight: "bold",
-              fontSize: "10px"
-            }
-          },
-          "ACKNOWLEDGED"
-        )
-      )),
-      /* @__PURE__ */ React.createElement(Grid, { md: 4 }, /* @__PURE__ */ React.createElement(
-        Card,
-        {
-          style: {
-            marginRight: "10px",
-            height: "120px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            backgroundColor: "rgba(0, 0, 0, 0.03)"
-          }
-        },
-        /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            style: {
-              color: theme.palette.success.main,
-              fontSize: "40px"
-            }
-          },
-          "43"
-        ),
-        /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            style: {
-              color: theme.palette.success.main,
-              fontWeight: "bold",
-              fontSize: "10px"
-            }
-          },
-          "RESOLVED"
-        )
-      ))
-    ),
-    /* @__PURE__ */ React.createElement(Grid, { item: true, md: 3 }, /* @__PURE__ */ React.createElement(
-      Card,
-      {
-        style: {
-          height: "120px",
-          display: "grid",
-          gridTemplateRows: "1fr auto auto",
-          backgroundColor: "rgba(0, 0, 0, 0.03)"
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          style: {
-            display: "flex",
-            justifyContent: "center"
-          }
-        },
-        /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            style: {
-              fontSize: "50px",
-              color: "rgba(0, 0, 0, 0.7)",
-              // rgba(255, 255, 255, 0.7)
-              fontWeight: "bold",
-              alignSelf: "center",
-              justifyContent: "center"
-            }
-          },
-          "4"
-        ),
-        /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            variant: "body1",
-            style: {
-              fontWeight: "500",
-              color: "rgba(0, 0, 0, 0.7)",
-              // rgba(255, 255, 255, 0.7)
-              alignSelf: "center",
-              justifyContent: "center",
-              marginLeft: "1px",
-              marginTop: "20px"
-            }
-          },
-          "/5"
-        )
-      ),
-      /* @__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(
+      total: (_a = service == null ? void 0 : service.standardsScore) == null ? void 0 : _a.total,
+      completed: (_b = service == null ? void 0 : service.standardsScore) == null ? void 0 : _b.passing
+    }
+  ))), /* @__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,
@@ -1099,7 +1114,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(
+  )) : /* @__PURE__ */ React.createElement(React.Fragment, null)), /* @__PURE__ */ React.createElement(
+    EscalationPolicy,
+    {
+      policyId: service.policyId,
+      policyUrl: service.policyLink,
+      policyName: service.policyName
+    }
+  ))), !createIncidentDisabled && /* @__PURE__ */ React.createElement(
     TriggerDialog,
     {
       "data-testid": "trigger-dialog",
@@ -1167,7 +1189,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,
     {
@@ -1182,4 +1204,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-b664ea6c.esm.js.map
+//# sourceMappingURL=index-76653f8d.esm.js.map