@pagerduty/backstage-plugin 0.9.4-next.4 → 0.9.4-next.7

package/dist/esm/{index-d288bb3d.esm.js → index-c61adcff.esm.js}

@@ -4,8 +4,6 @@ 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 Done from '@material-ui/icons/Done';
-import Warning from '@material-ui/icons/Warning';
 import { DateTime, Duration } from 'luxon';
 import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
 import { Link, Progress, StatusWarning, StatusError, EmptyState, TabbedCard, CardTab, InfoCard } from '@backstage/core-components';
@@ -15,13 +13,14 @@ 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 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 validateColor from 'validate-color';
 
 const PAGERDUTY_INTEGRATION_KEY = "pagerduty.com/integration-key";
 const PAGERDUTY_SERVICE_ID = "pagerduty.com/service-id";
@@ -93,6 +92,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(
@@ -193,7 +198,7 @@ const HomePagePagerDutyCard = pagerDutyPlugin.provide(
   createCardExtension({
     name: "HomePagePagerDutyCard",
     title: "PagerDuty Homepage Card",
-    components: () => import('./index-5db6e0a5.esm.js'),
+    components: () => import('./index-fa52682c.esm.js'),
     settings: {
       schema: {
         title: "PagerDuty",
@@ -229,18 +234,52 @@ const useStyles$8 = 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: "#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.status.error
+      color: theme.palette.error.main
     }
+  },
+  textContainer: {
+    display: "flex",
+    alignItems: "baseline"
+  },
+  smallIconStyle: {
+    color: theme.palette.text.primary,
+    marginRight: "-20px"
   }
 }));
 const IncidentListItem = ({ incident }) => {
@@ -252,16 +291,24 @@ const IncidentListItem = ({ incident }) => {
   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",
@@ -275,7 +322,7 @@ const IncidentListItem = ({ incident }) => {
       href: incident.html_url,
       target: "_blank",
       rel: "noopener noreferrer",
-      color: "primary"
+      className: classes.smallIconStyle
     },
     /* @__PURE__ */ React.createElement(OpenInBrowserIcon, null)
   ))));
@@ -400,11 +447,17 @@ const useStyles$5 = makeStyles((theme) => ({
   },
   smallIconStyle: {
     color: theme.palette.text.primary
+  },
+  avatarStyle: {
+    marginTop: "-20px"
   }
 }));
-const EscalationUser = ({ user }) => {
+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 })), /* @__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(
@@ -419,12 +472,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,
@@ -436,7 +490,7 @@ const EscalationUser = ({ user }) => {
   ))));
 };
 
-const EscalationPolicy = ({ policyId }) => {
+const EscalationPolicy = ({ policyId, policyUrl, policyName }) => {
   const api = useApi(pagerDutyApiRef);
   const {
     value: users,
@@ -457,7 +511,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(
@@ -496,7 +550,7 @@ const ServiceNotFoundError = () => /* @__PURE__ */ React.createElement(
   }
 );
 
-const useStyles$4 = makeStyles({
+const useStyles$4 = makeStyles((theme) => ({
   denseListIcon: {
     marginRight: 0,
     display: "flex",
@@ -506,8 +560,15 @@ const useStyles$4 = makeStyles({
   },
   listItemPrimary: {
     fontWeight: "bold"
+  },
+  smallExternalLinkIconStyle: {
+    color: theme.palette.text.primary
+  },
+  smallIconStyle: {
+    color: theme.palette.text.primary,
+    marginRight: "-20px"
   }
-});
+}));
 const ChangeEventListItem = ({ changeEvent }) => {
   const classes = useStyles$4();
   const duration = (/* @__PURE__ */ new Date()).getTime() - new Date(changeEvent.timestamp).getTime();
@@ -520,9 +581,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(
@@ -540,7 +601,7 @@ const ChangeEventListItem = ({ changeEvent }) => {
     {
       component: Link,
       to: changeEvent.html_url,
-      color: "primary"
+      className: classes.smallIconStyle
     },
     /* @__PURE__ */ React.createElement(OpenInBrowserIcon, null)
   ))));
@@ -726,7 +787,7 @@ const useStyles$3 = makeStyles((theme) => ({
     marginBottom: "-10px"
   }
 }));
-function TriggerIncidentButton() {
+function TriggerIncidentButton({ handleRefresh }) {
   const { buttonStyle, containerStyle, iconStyle } = useStyles$3();
   const { integrationKey, name } = usePagerdutyEntity();
   const [dialogShown, setDialogShown] = useState(false);
@@ -752,7 +813,8 @@ function TriggerIncidentButton() {
       showDialog: dialogShown,
       handleDialog: hideDialog,
       integrationKey,
-      name
+      name,
+      onIncidentCreated: handleRefresh
     }
   ));
 }
@@ -792,22 +854,53 @@ function OpenServiceButton(props) {
   ));
 }
 
-const statusLabels = {
-  active: "OK",
-  warning: "ACTIVE",
-  critical: "ALARM",
-  maintenance: "MAINTENANCE",
-  disabled: "DISABLED"
-};
+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) {
-  const statusColors = {
-    active: theme.palette.success.main,
-    warning: theme.palette.warning.main,
-    critical: theme.palette.error.main,
-    maintenance: "#ebdc00",
-    disabled: "#A9A9A9"
-  };
-  return statusColors[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) => ({
@@ -816,56 +909,18 @@ function StatusCard({ status }) {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      backgroundColor: colorFromStatus(theme, status),
+      backgroundColor: status !== void 0 ? colorFromStatus(theme, status) : colorFromStatus(theme, "active"),
       marginRight: "10px"
     },
     largeTextStyle: {
       color: "white",
       fontWeight: "bold",
-      fontSize: "20px"
+      fontSize: "20px",
+      wordWrap: "break-word"
     }
   }));
   const { cardStyle, largeTextStyle } = useStyles();
-  return /* @__PURE__ */ React.createElement(Card, { className: cardStyle }, /* @__PURE__ */ React.createElement(Typography, { className: largeTextStyle }, statusLabels[status]));
-}
-
-const cardLabels = {
-  triggered: "TRIGGERED",
-  acknowledged: "ACKNOWLEDGED",
-  resolved: "RESOLVED"
-};
-function colorFromLabel(theme, label) {
-  const cardColors = {
-    triggered: theme.palette.error.main,
-    acknowledged: theme.palette.warning.main,
-    resolved: theme.palette.success.main
-  };
-  return cardColors[label];
-}
-function IncidentCounterCard({ count, label }) {
-  const useStyles = makeStyles((theme) => ({
-    cardStyle: {
-      marginRight: "10px",
-      height: "120px",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      backgroundColor: "rgba(0, 0, 0, 0.03)"
-    },
-    largeTextStyle: {
-      color: colorFromLabel(theme, label),
-      fontSize: "40px",
-      marginTop: "-20px"
-    },
-    smallTextStyle: {
-      color: colorFromLabel(theme, label),
-      fontWeight: "bold",
-      fontSize: "10px",
-      marginTop: "-10px"
-    }
-  }));
-  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 }, cardLabels[label]));
+  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) {
@@ -890,18 +945,17 @@ function ServiceStandardsCard({ total, completed }) {
     },
     largeTextStyle: {
       fontSize: "50px",
-      color: colorFromPercentage(theme, completed / total),
-      fontWeight: "bold",
+      color: completed !== void 0 && total !== void 0 ? colorFromPercentage(theme, completed / total) : colorFromPercentage(theme, 0),
       alignSelf: "center",
       justifyContent: "center"
     },
     smallTextStyle: {
-      color: theme.palette.text.primary,
-      fontSize: "16px",
+      color: theme.palette.textSubtle,
+      fontSize: "14px",
       fontWeight: "bold",
       alignSelf: "center",
       justifyContent: "center",
-      marginLeft: "1px",
+      marginLeft: "-2px",
       marginTop: "25px"
     }
   }));
@@ -916,17 +970,46 @@ function ServiceStandardsCard({ total, completed }) {
     },
     bar: {
       borderRadius: 5,
-      backgroundColor: colorFromPercentage(theme, completed / total)
+      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 }, /* @__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(
+  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: "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(
@@ -959,6 +1042,7 @@ const useStyles$1 = makeStyles$1(
 );
 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;
@@ -981,13 +1065,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;
@@ -1012,9 +1101,36 @@ const PagerDutyCard$1 = (props) => {
     {
       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, 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,
+    {
+      count: 29,
+      label: "interruptions",
+      color: theme.palette.textSubtle
     }
-  ), /* @__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 }, "INCIDENT HISTORY")), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 3 }, /* @__PURE__ */ React.createElement(Typography, { className: classes.overviewHeaderTextStyle }, "SERVICE 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: "active" })), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 6, className: classes.incidentMetricsContainerStyle }, /* @__PURE__ */ React.createElement(Grid, { md: 4 }, /* @__PURE__ */ React.createElement(IncidentCounterCard, { count: 1, label: "triggered" })), /* @__PURE__ */ React.createElement(Grid, { md: 4 }, /* @__PURE__ */ React.createElement(IncidentCounterCard, { count: 1, label: "acknowledged" })), /* @__PURE__ */ React.createElement(Grid, { md: 4 }, /* @__PURE__ */ React.createElement(IncidentCounterCard, { count: 43, label: "resolved" }))), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 3 }, /* @__PURE__ */ React.createElement(ServiceStandardsCard, { total: 9, completed: 8 }))), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(TabbedCard, null, /* @__PURE__ */ React.createElement(CardTab, { label: "Incidents" }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(Grid, { md: 4 }, /* @__PURE__ */ React.createElement(
+    IncidentCounterCard,
+    {
+      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: (_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,
@@ -1026,7 +1142,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",
@@ -1094,7 +1217,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,
     {
@@ -1109,4 +1232,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-d288bb3d.esm.js.map
+//# sourceMappingURL=index-c61adcff.esm.js.map