@pagerduty/backstage-plugin 0.9.4-next.8 → 0.10.0

package/dist/esm/{index-1c9fcfab.esm.js → index-0fec9996.esm.js}

@@ -20,6 +20,11 @@ import PDWhiteImage from '../assets/PD-White.svg';
 import { parseEntityRef, DEFAULT_NAMESPACE } from '@backstage/catalog-model';
 import AddAlert from '@material-ui/icons/AddAlert';
 import { makeStyles as makeStyles$1, createStyles, useTheme } from '@material-ui/core/styles';
+import { useAsyncFn as useAsyncFn$1 } from 'react-use';
+import Alert$1 from '@material-ui/lab/Alert/Alert';
+import 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";
@@ -80,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"
@@ -98,6 +109,12 @@ class PagerDutyClient {
     )}/services/${serviceId}/standards`;
     return await this.findByUrl(url);
   }
+  async getServiceMetricsByServiceId(serviceId) {
+    const url = `${await this.config.discoveryApi.getBaseUrl(
+      "pagerduty"
+    )}/services/${serviceId}/metrics`;
+    return await this.findByUrl(url);
+  }
   async getOnCallByPolicyId(policyId) {
     const params = `escalation_policy_ids[]=${policyId}`;
     const url = `${await this.config.discoveryApi.getBaseUrl(
@@ -198,7 +215,7 @@ const HomePagePagerDutyCard = pagerDutyPlugin.provide(
   createCardExtension({
     name: "HomePagePagerDutyCard",
     title: "PagerDuty Homepage Card",
-    components: () => import('./index-18f6f061.esm.js'),
+    components: () => import('./index-291e1428.esm.js'),
     settings: {
       schema: {
         title: "PagerDuty",
@@ -350,7 +367,7 @@ const IncidentsEmptyState = () => {
 };
 
 const IncidentForbiddenState = () => {
-  return /* @__PURE__ */ React.createElement(Grid, { container: true, justify: "center", direction: "column", alignItems: "center" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Feature not available with your account or token.")), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "center", direction: "column", alignItems: "center" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Feature not available with your account or token.")), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
     "img",
     {
       src: ForbiddenStateImage,
@@ -490,7 +507,11 @@ const EscalationUser = ({ user, policyUrl, policyName }) => {
   ))));
 };
 
-const EscalationPolicy = ({ policyId, policyUrl, policyName }) => {
+const EscalationPolicy = ({
+  policyId,
+  policyUrl,
+  policyName
+}) => {
   const api = useApi(pagerDutyApiRef);
   const {
     value: users,
@@ -511,7 +532,23 @@ const EscalationPolicy = ({ policyId, policyUrl, policyName }) => {
   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, policyUrl, policyName })));
+  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(
@@ -608,7 +645,7 @@ const ChangeEventListItem = ({ changeEvent }) => {
 };
 
 const ChangeEventEmptyState = () => {
-  return /* @__PURE__ */ React.createElement(Grid, { container: true, justify: "center", direction: "column", alignItems: "center" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "No change events to display yet.")), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "center", direction: "column", alignItems: "center" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "No change events to display yet.")), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
     "img",
     {
       src: EmptyStateImage,
@@ -619,7 +656,7 @@ const ChangeEventEmptyState = () => {
 };
 
 const ChangeEventForbiddenState = () => {
-  return /* @__PURE__ */ React.createElement(Grid, { container: true, justify: "center", direction: "column", alignItems: "center" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Feature not available with your account or token.")), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "center", direction: "column", alignItems: "center" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Feature not available with your account or token.")), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
     "img",
     {
       src: ForbiddenStateImage,
@@ -679,16 +716,11 @@ const ForbiddenError = () => /* @__PURE__ */ React.createElement(
   }
 );
 
-function usePagerdutyEntity() {
-  const { entity } = useEntity();
-  return getPagerDutyEntity(entity);
-}
-
 const TriggerDialog = ({
   showDialog,
   handleDialog,
   onIncidentCreated,
-  name,
+  serviceName,
   integrationKey
 }) => {
   const alertApi = useApi(alertApiRef);
@@ -731,7 +763,7 @@ const TriggerDialog = ({
       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(
+  return /* @__PURE__ */ React.createElement(Dialog, { maxWidth: "md", open: showDialog, onClose: handleDialog, fullWidth: true }, /* @__PURE__ */ React.createElement(DialogTitle, null, "This action will trigger an incident for ", /* @__PURE__ */ React.createElement("strong", null, '"', serviceName, '"'), "."), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(Alert, { severity: "info" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", align: "justify" }, `If the issue you are seeing does not need urgent attention, please get in touch with the responsible team using their preferred communications channel. You can find information about the owner of this entity in the "About" card. If the issue is urgent, please don't hesitate to trigger the alert.`)), /* @__PURE__ */ React.createElement(
     Typography,
     {
       variant: "body1",
@@ -747,7 +779,7 @@ const TriggerDialog = ({
       id: "description",
       multiline: true,
       fullWidth: true,
-      rows: "4",
+      minRows: 4,
       margin: "normal",
       label: "Problem description",
       variant: "outlined",
@@ -777,19 +809,20 @@ const useStyles$3 = makeStyles((theme) => ({
     }
   },
   containerStyle: {
-    flex: "flex !important",
-    fontSize: "14px",
+    fontSize: "12px",
     width: "80px",
-    lineHeight: "14px"
+    marginRight: "-10px"
   },
   iconStyle: {
-    fontSize: "35px",
+    fontSize: "30px",
+    marginBottom: "-10px"
+  },
+  textStyle: {
     marginBottom: "-10px"
   }
 }));
-function TriggerIncidentButton({ handleRefresh }) {
-  const { buttonStyle, containerStyle, iconStyle } = useStyles$3();
-  const { integrationKey, name } = usePagerdutyEntity();
+function TriggerIncidentButton({ integrationKey, entityName, handleRefresh }) {
+  const { buttonStyle, containerStyle, iconStyle, textStyle } = useStyles$3();
   const [dialogShown, setDialogShown] = useState(false);
   const showDialog = useCallback(() => {
     setDialogShown(true);
@@ -806,14 +839,14 @@ function TriggerIncidentButton({ handleRefresh }) {
       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", { className: textStyle }, "Create new incident"))
   ), integrationKey && /* @__PURE__ */ React.createElement(
     TriggerDialog,
     {
       showDialog: dialogShown,
       handleDialog: hideDialog,
       integrationKey,
-      name,
+      serviceName: entityName,
       onIncidentCreated: handleRefresh
     }
   ));
@@ -828,18 +861,19 @@ const useStyles$2 = makeStyles((theme) => ({
     }
   },
   containerStyle: {
-    flex: "flex",
-    fontSize: "14px",
-    width: "85px",
-    lineHeight: "14px"
+    fontSize: "12px",
+    width: "85px"
   },
   iconStyle: {
-    fontSize: "35px",
+    fontSize: "30px",
+    marginBottom: "-10px"
+  },
+  textStyle: {
     marginBottom: "-10px"
   }
 }));
 function OpenServiceButton(props) {
-  const { buttonStyle, containerStyle, iconStyle } = useStyles$2();
+  const { buttonStyle, containerStyle, iconStyle, textStyle } = useStyles$2();
   function navigateToService() {
     window.open(props.serviceUrl, "_blank");
   }
@@ -850,7 +884,7 @@ function OpenServiceButton(props) {
       onClick: navigateToService,
       className: buttonStyle
     },
-    /* @__PURE__ */ React.createElement("div", { className: containerStyle }, /* @__PURE__ */ React.createElement(OpenInBrowserIcon, { className: iconStyle }), /* @__PURE__ */ React.createElement("p", null, "Open service in PagerDuty"))
+    /* @__PURE__ */ React.createElement("div", { className: containerStyle }, /* @__PURE__ */ React.createElement(OpenInBrowserIcon, { className: iconStyle }), /* @__PURE__ */ React.createElement("p", { className: textStyle }, "Open service in PagerDuty"))
   ));
 }
 
@@ -902,7 +936,14 @@ function colorFromStatus(theme, status) {
   }
   return color;
 }
-function StatusCard({ status }) {
+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",
@@ -920,6 +961,21 @@ function StatusCard({ status }) {
     }
   }));
   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"));
 }
 
@@ -931,7 +987,7 @@ function colorFromPercentage(theme, percentage) {
   }
   return theme.palette.success.main;
 }
-function ServiceStandardsCard({ total, completed }) {
+function ServiceStandardsCard({ total, completed, standards }) {
   const useStyles = makeStyles((theme) => ({
     cardStyle: {
       height: "120px",
@@ -941,7 +997,8 @@ function ServiceStandardsCard({ total, completed }) {
     },
     containerStyle: {
       display: "flex",
-      justifyContent: "center"
+      justifyContent: "center",
+      marginTop: "-100px"
     },
     largeTextStyle: {
       fontSize: "50px",
@@ -957,6 +1014,14 @@ function ServiceStandardsCard({ total, completed }) {
       justifyContent: "center",
       marginLeft: "-2px",
       marginTop: "25px"
+    },
+    tooltipContainer: {},
+    tooltipIcon: {
+      marginRight: "5px"
+    },
+    standardItem: {
+      display: "flex",
+      alignItems: "center"
     }
   }));
   const BorderLinearProgress = withStyles((theme) => ({
@@ -973,14 +1038,32 @@ function ServiceStandardsCard({ total, completed }) {
       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(
+  const {
+    cardStyle,
+    containerStyle,
+    largeTextStyle,
+    smallTextStyle,
+    tooltipContainer,
+    tooltipIcon,
+    standardItem
+  } = useStyles();
+  if (standards === void 0 || completed === void 0 || total === void 0) {
+    return /* @__PURE__ */ React.createElement(Card, { className: cardStyle }, /* @__PURE__ */ React.createElement("div", { className: containerStyle }, /* @__PURE__ */ React.createElement(Typography, { className: smallTextStyle }, "Unable to retrieve Scores")));
+  }
+  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, key) => /* @__PURE__ */ React.createElement("p", { key }, 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")));
+  ))) : /* @__PURE__ */ React.createElement("div", { className: containerStyle }, /* @__PURE__ */ React.createElement(Typography, { className: smallTextStyle }, "Unable to retrieve Scores")));
 }
 
 function IncidentCounterCard({ count, label, color }) {
@@ -1009,7 +1092,7 @@ function IncidentCounterCard({ count, label, color }) {
     }
   }));
   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));
+  return /* @__PURE__ */ React.createElement(Card, { className: cardStyle }, count !== void 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { className: largeTextStyle }, count), /* @__PURE__ */ React.createElement(Typography, { className: smallTextStyle }, label)) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { className: largeTextStyle }, "-"), /* @__PURE__ */ React.createElement(Typography, { className: smallTextStyle }, label)));
 }
 
 const useStyles$1 = makeStyles$1(
@@ -1020,13 +1103,22 @@ const useStyles$1 = makeStyles$1(
       color: theme.palette.type === "light" ? "rgba(0, 0, 0, 0.54)" : "rgba(255, 255, 255, 0.7)"
     },
     headerStyle: {
-      marginRight: "1em"
+      marginBottom: "0px",
+      fontSize: "0px"
     },
     overviewHeaderContainerStyle: {
       display: "flex",
       margin: "15px",
       marginBottom: "20px"
     },
+    headerWithSubheaderContainerStyle: {
+      display: "flex",
+      alignItems: "center"
+    },
+    subheaderTextStyle: {
+      fontSize: "10px",
+      marginLeft: "5px"
+    },
     overviewCardsContainerStyle: {
       display: "flex",
       margin: "15px",
@@ -1042,16 +1134,18 @@ const useStyles$1 = makeStyles$1(
 );
 const BasicCard = ({ children }) => /* @__PURE__ */ React.createElement(InfoCard, { title: "PagerDuty" }, children);
 const PagerDutyCard$1 = (props) => {
-  var _a, _b;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const classes = useStyles$1();
   const theme = useTheme();
   const { readOnly, disableChangeEvents } = props;
   const api = useApi(pagerDutyApiRef);
   const [refreshIncidents, setRefreshIncidents] = useState(false);
   const [refreshChangeEvents, setRefreshChangeEvents] = useState(false);
+  const [refreshStatus, setRefreshStatus] = useState(false);
   const handleRefresh = useCallback(() => {
     setRefreshIncidents((x) => !x);
     setRefreshChangeEvents((x) => !x);
+    setRefreshStatus((x) => !x);
   }, []);
   const {
     value: service,
@@ -1061,7 +1155,12 @@ const PagerDutyCard$1 = (props) => {
     const { service: foundService } = await api.getServiceByPagerDutyEntity(
       props
     );
-    const { standards: serviceStandards } = await api.getServiceStandardsByServiceId(foundService.id);
+    const serviceStandards = await api.getServiceStandardsByServiceId(
+      foundService.id
+    );
+    const serviceMetrics = await api.getServiceMetricsByServiceId(
+      foundService.id
+    );
     const result = {
       id: foundService.id,
       name: foundService.name,
@@ -1070,7 +1169,8 @@ const PagerDutyCard$1 = (props) => {
       policyLink: foundService.escalation_policy.html_url,
       policyName: foundService.escalation_policy.name,
       status: foundService.status,
-      standardsScore: serviceStandards.score
+      standards: serviceStandards !== void 0 ? serviceStandards.standards : void 0,
+      metrics: serviceMetrics !== void 0 ? serviceMetrics.metrics : void 0
     };
     return result;
   }, [props]);
@@ -1091,39 +1191,47 @@ const PagerDutyCard$1 = (props) => {
   if (loading) {
     return /* @__PURE__ */ React.createElement(BasicCard, null, /* @__PURE__ */ React.createElement(Progress, null));
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Card, { "data-testid": "pagerduty-card" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Card, { "data-testid": "pagerduty-card" }, /* @__PURE__ */ React.createElement(
     CardHeader,
     {
       className: classes.headerStyle,
       title: theme.palette.type === "dark" ? /* @__PURE__ */ React.createElement("img", { src: PDWhiteImage, alt: "PagerDuty", height: "35" }) : /* @__PURE__ */ React.createElement("img", { src: PDGreenImage, alt: "PagerDuty", height: "35" }),
-      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 })
+      action: !readOnly ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+        TriggerIncidentButton,
+        {
+          integrationKey: props.integrationKey,
+          entityName: props.name,
+          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(
+  ), /* @__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("span", { className: classes.headerWithSubheaderContainerStyle }, /* @__PURE__ */ React.createElement(Typography, { className: classes.overviewHeaderTextStyle }, "INSIGHTS"), /* @__PURE__ */ React.createElement(Typography, { className: classes.subheaderTextStyle }, "(last 30 days)"))), /* @__PURE__ */ React.createElement(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, { item: true, md: 4 }, /* @__PURE__ */ React.createElement(
     IncidentCounterCard,
     {
-      count: 29,
+      count: (service == null ? void 0 : service.metrics) !== void 0 && service.metrics.length > 0 ? service == null ? void 0 : service.metrics[0].total_interruptions : void 0,
       label: "interruptions",
       color: theme.palette.textSubtle
     }
-  )), /* @__PURE__ */ React.createElement(Grid, { md: 4 }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 4 }, /* @__PURE__ */ React.createElement(
     IncidentCounterCard,
     {
-      count: 29,
+      count: (service == null ? void 0 : service.metrics) !== void 0 && service.metrics.length > 0 ? service == null ? void 0 : service.metrics[0].total_high_urgency_incidents : void 0,
       label: "high urgency",
       color: theme.palette.warning.main
     }
-  )), /* @__PURE__ */ React.createElement(Grid, { md: 4 }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 4 }, /* @__PURE__ */ React.createElement(
     IncidentCounterCard,
     {
-      count: 32,
+      count: (service == null ? void 0 : service.metrics) !== void 0 && ((_a = service == null ? void 0 : service.metrics) == null ? void 0 : _a.length) > 0 ? service == null ? void 0 : service.metrics[0].total_incident_count : void 0,
       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
+      total: (service == null ? void 0 : service.standards) !== void 0 && ((_b = service == null ? void 0 : service.standards) == null ? void 0 : _b.score) !== void 0 ? (_d = (_c = service == null ? void 0 : service.standards) == null ? void 0 : _c.score) == null ? void 0 : _d.total : void 0,
+      completed: (service == null ? void 0 : service.standards) !== void 0 && ((_e = service == null ? void 0 : service.standards) == null ? void 0 : _e.score) !== void 0 ? (_g = (_f = service == null ? void 0 : service.standards) == null ? void 0 : _f.score) == null ? void 0 : _g.passing : void 0,
+      standards: (service == null ? void 0 : service.standards) !== void 0 ? (_h = service == null ? void 0 : service.standards) == null ? void 0 : _h.standards : void 0
     }
   ))), /* @__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,
@@ -1144,7 +1252,7 @@ const PagerDutyCard$1 = (props) => {
       policyUrl: service.policyLink,
       policyName: service.policyName
     }
-  ))));
+  )));
 };
 
 const isPluginApplicableToEntity = (entity) => {
@@ -1173,6 +1281,11 @@ var index = /*#__PURE__*/Object.freeze({
   EntityPagerDutyCard: EntityPagerDutyCard
 });
 
+function usePagerdutyEntity() {
+  const { entity } = useEntity();
+  return getPagerDutyEntity(entity);
+}
+
 const useStyles = makeStyles((theme) => ({
   buttonStyle: {
     backgroundColor: theme.palette.error.main,
@@ -1209,7 +1322,7 @@ function TriggerButton(props) {
       showDialog: dialogShown,
       handleDialog: hideDialog,
       integrationKey,
-      name
+      serviceName: name
     }
   ));
 }
@@ -1217,4 +1330,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-1c9fcfab.esm.js.map
+//# sourceMappingURL=index-0fec9996.esm.js.map