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

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

@@ -3,7 +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 { 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';
@@ -17,12 +17,11 @@ 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 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';
 
 const PAGERDUTY_INTEGRATION_KEY = "pagerduty.com/integration-key";
 const PAGERDUTY_SERVICE_ID = "pagerduty.com/service-id";
@@ -194,7 +193,7 @@ const HomePagePagerDutyCard = pagerDutyPlugin.provide(
   createCardExtension({
     name: "HomePagePagerDutyCard",
     title: "PagerDuty Homepage Card",
-    components: () => import('./index-9209930a.esm.js'),
+    components: () => import('./index-5db6e0a5.esm.js'),
     settings: {
       schema: {
         title: "PagerDuty",
@@ -218,7 +217,7 @@ const HomePagePagerDutyCard = pagerDutyPlugin.provide(
   })
 );
 
-const useStyles$7 = makeStyles((theme) => ({
+const useStyles$8 = makeStyles((theme) => ({
   denseListIcon: {
     marginRight: 0,
     display: "flex",
@@ -246,7 +245,7 @@ const useStyles$7 = makeStyles((theme) => ({
 }));
 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;
@@ -342,7 +341,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 +351,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 +365,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"
   },
@@ -404,7 +403,7 @@ const useStyles$4 = makeStyles((theme) => ({
   }
 }));
 const EscalationUser = ({ user }) => {
-  const classes = useStyles$4();
+  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(
     ListItemText,
     {
@@ -497,91 +496,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({
   denseListIcon: {
     marginRight: 0,
     display: "flex",
@@ -594,7 +509,7 @@ const useStyles$3 = makeStyles({
   }
 });
 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;
@@ -708,7 +623,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 +727,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 +745,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 +757,7 @@ function TriggerIncidentButton() {
   ));
 }
 
-const useStyles$1 = makeStyles((theme) => ({
+const useStyles$2 = makeStyles((theme) => ({
   buttonStyle: {
     color: theme.palette.text.primary,
     "&:hover": {
@@ -778,7 +777,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 +792,174 @@ function OpenServiceButton(props) {
   ));
 }
 
+const statusLabels = {
+  active: "OK",
+  warning: "ACTIVE",
+  critical: "ALARM",
+  maintenance: "MAINTENANCE",
+  disabled: "DISABLED"
+};
+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];
+}
+function StatusCard({ status }) {
+  const useStyles = makeStyles$1((theme) => ({
+    cardStyle: {
+      height: "120px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: colorFromStatus(theme, status),
+      marginRight: "10px"
+    },
+    largeTextStyle: {
+      color: "white",
+      fontWeight: "bold",
+      fontSize: "20px"
+    }
+  }));
+  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]));
+}
+
+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: colorFromPercentage(theme, completed / total),
+      fontWeight: "bold",
+      alignSelf: "center",
+      justifyContent: "center"
+    },
+    smallTextStyle: {
+      color: theme.palette.text.primary,
+      fontSize: "16px",
+      fontWeight: "bold",
+      alignSelf: "center",
+      justifyContent: "center",
+      marginLeft: "1px",
+      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: colorFromPercentage(theme, completed / total)
+    }
+  }))(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(
+    BorderLinearProgress,
+    {
+      variant: "determinate",
+      value: completed / total * 100
+    }
+  )));
+}
+
+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) => {
+  const classes = useStyles$1();
   const theme = useTheme();
   const { readOnly, disableChangeEvents, integrationKey, name } = props;
   const api = useApi(pagerDutyApiRef);
@@ -845,249 +1010,11 @@ 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,
-    {
-      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,
-    {
-      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,
-    {
-      style: {
-        fontSize: "14px",
-        fontWeight: "500",
-        color: "rgba(0, 0, 0, 0.54)"
-        // rgba(255, 255, 255, 0.7)
-      }
-    },
-    "SERVICE STANDARDS"
-  ))), /* @__PURE__ */ React.createElement(
-    Grid,
-    {
-      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(
+  ), /* @__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(
     Incidents,
     {
       serviceId: service.id,
@@ -1182,4 +1109,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-d288bb3d.esm.js.map