@pagerduty/backstage-plugin 0.9.3-next.0 → 0.9.4-next.0

package/dist/esm/{index-ecbd8285.esm.js → index-cad5ded3.esm.js}

@@ -8,18 +8,21 @@ 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, HeaderIconLinkRow, TabbedCard, CardTab, InfoCard } from '@backstage/core-components';
+import { Link, Progress, StatusWarning, StatusError, EmptyState, TabbedCard, CardTab, InfoCard } from '@backstage/core-components';
 import EmptyStateImage from '../assets/emptystate.svg';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 import { Alert } from '@material-ui/lab';
 import ForbiddenStateImage from '../assets/forbiddenstate.svg';
 import Avatar from '@material-ui/core/Avatar';
-import EmailIcon from '@material-ui/icons/Email';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import MailOutline from '@material-ui/icons/MailOutline';
 import useAsync from 'react-use/lib/useAsync';
-import AlarmAddIcon from '@material-ui/icons/AlarmAdd';
-import WebIcon from '@material-ui/icons/Web';
-import DateRangeIcon from '@material-ui/icons/DateRange';
 import { parseEntityRef, DEFAULT_NAMESPACE } from '@backstage/catalog-model';
+import PDGreenImage from '../assets/PD-Green.svg';
+import PDWhiteImage from '../assets/PD-White.svg';
+import AddAlert from '@material-ui/icons/AddAlert';
+import { useTheme } from '@material-ui/core/styles';
+import LinearProgress from '@material-ui/core/LinearProgress';
 
 const PAGERDUTY_INTEGRATION_KEY = "pagerduty.com/integration-key";
 const PAGERDUTY_SERVICE_ID = "pagerduty.com/service-id";
@@ -191,7 +194,7 @@ const HomePagePagerDutyCard = pagerDutyPlugin.provide(
   createCardExtension({
     name: "HomePagePagerDutyCard",
     title: "PagerDuty Homepage Card",
-    components: () => import('./index-4efddecc.esm.js'),
+    components: () => import('./index-46dbc440.esm.js'),
     settings: {
       schema: {
         title: "PagerDuty",
@@ -215,7 +218,7 @@ const HomePagePagerDutyCard = pagerDutyPlugin.provide(
   })
 );
 
-const useStyles$5 = makeStyles((theme) => ({
+const useStyles$7 = makeStyles((theme) => ({
   denseListIcon: {
     marginRight: 0,
     display: "flex",
@@ -243,7 +246,7 @@ const useStyles$5 = makeStyles((theme) => ({
 }));
 const IncidentListItem = ({ incident }) => {
   var _a, _b, _c;
-  const classes = useStyles$5();
+  const classes = useStyles$7();
   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;
@@ -339,7 +342,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$4 = makeStyles({
+const useStyles$6 = makeStyles({
   denseListIcon: {
     marginRight: 0,
     display: "flex",
@@ -349,11 +352,11 @@ const useStyles$4 = makeStyles({
   }
 });
 const EscalationUsersEmptyState = () => {
-  const classes = useStyles$4();
+  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(StatusWarning, null))), /* @__PURE__ */ React.createElement(ListItemText, { primary: "No one is on-call. Update the escalation policy." }));
 };
 
-const useStyles$3 = makeStyles({
+const useStyles$5 = makeStyles({
   denseListIcon: {
     marginRight: 0,
     display: "flex",
@@ -363,30 +366,72 @@ const useStyles$3 = makeStyles({
   }
 });
 const EscalationUsersForbiddenState = () => {
-  const classes = useStyles$3();
+  const classes = useStyles$5();
   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$2 = makeStyles({
+const useStyles$4 = makeStyles((theme) => ({
   listItemPrimary: {
     fontWeight: "bold"
+  },
+  listItemSecondary: {
+    fontWeight: "normal",
+    textDecoration: "underline",
+    marginTop: "-5px"
+  },
+  buttonStyle: {
+    marginLeft: "-11px",
+    marginTop: "-10px",
+    fontSize: "15px",
+    color: theme.palette.text.primary,
+    "&:hover": {
+      backgroundColor: "transparent",
+      textDecoration: "underline"
+    }
+  },
+  containerStyle: {
+    display: "flex",
+    alignItems: "center",
+    fontWeight: "bold"
+  },
+  iconStyle: {
+    fontSize: "25px",
+    marginLeft: "-4px",
+    color: theme.palette.text.primary
+  },
+  smallIconStyle: {
+    color: theme.palette.text.primary
   }
-});
+}));
 const EscalationUser = ({ user }) => {
-  const classes = useStyles$2();
-  return /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Avatar, { alt: "User", src: user.avatar_url })), /* @__PURE__ */ React.createElement(
+  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(
     ListItemText,
     {
-      primary: /* @__PURE__ */ React.createElement(Typography, { className: classes.listItemPrimary }, user.name),
-      secondary: user.email
+      primary: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { className: classes.listItemPrimary }, user.name), /* @__PURE__ */ React.createElement(
+        Typography,
+        {
+          className: classes.listItemSecondary,
+          color: "textSecondary"
+        },
+        user.email
+      )),
+      secondary: /* @__PURE__ */ React.createElement(
+        IconButton,
+        {
+          "aria-label": "open-service-in-browser",
+          className: classes.buttonStyle
+        },
+        /* @__PURE__ */ React.createElement("span", { className: classes.containerStyle }, /* @__PURE__ */ React.createElement(NotificationsIcon, { className: classes.iconStyle }), "Web Team")
+      )
     }
-  ), /* @__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(EmailIcon, { color: "primary" }))), /* @__PURE__ */ React.createElement(Tooltip, { title: "View in PagerDuty", placement: "top" }, /* @__PURE__ */ React.createElement(
+  ), /* @__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(
     IconButton,
     {
       href: user.html_url,
       target: "_blank",
       rel: "noopener noreferrer",
-      color: "primary"
+      className: classes.smallIconStyle
     },
     /* @__PURE__ */ React.createElement(OpenInBrowserIcon, null)
   ))));
@@ -536,7 +581,7 @@ const TriggerDialog = ({
   ), /* @__PURE__ */ React.createElement(Button, { id: "close", color: "primary", onClick: handleDialog }, "Close")));
 };
 
-const useStyles$1 = makeStyles({
+const useStyles$3 = makeStyles({
   denseListIcon: {
     marginRight: 0,
     display: "flex",
@@ -549,7 +594,7 @@ const useStyles$1 = makeStyles({
   }
 });
 const ChangeEventListItem = ({ changeEvent }) => {
-  const classes = useStyles$1();
+  const classes = useStyles$3();
   const duration = (/* @__PURE__ */ new Date()).getTime() - new Date(changeEvent.timestamp).getTime();
   const changedAt = DateTime.local().minus(Duration.fromMillis(duration)).toRelative({ locale: "en" });
   let externalLinkElem;
@@ -658,16 +703,104 @@ const ForbiddenError = () => /* @__PURE__ */ React.createElement(
   }
 );
 
+function usePagerdutyEntity() {
+  const { entity } = useEntity();
+  return getPagerDutyEntity(entity);
+}
+
+const useStyles$2 = makeStyles((theme) => ({
+  buttonStyle: {
+    color: theme.palette.text.primary,
+    "&:hover": {
+      backgroundColor: "transparent",
+      textDecoration: "underline"
+    }
+  },
+  containerStyle: {
+    flex: "flex !important",
+    fontSize: "14px",
+    width: "80px",
+    lineHeight: "14px"
+  },
+  iconStyle: {
+    fontSize: "35px",
+    marginBottom: "-10px"
+  }
+}));
+function TriggerIncidentButton() {
+  const { buttonStyle, containerStyle, iconStyle } = useStyles$2();
+  const { integrationKey, name } = usePagerdutyEntity();
+  const [dialogShown, setDialogShown] = useState(false);
+  const showDialog = useCallback(() => {
+    setDialogShown(true);
+  }, [setDialogShown]);
+  const hideDialog = useCallback(() => {
+    setDialogShown(false);
+  }, [setDialogShown]);
+  const disabled = !integrationKey;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      "aria-label": "create-incident",
+      onClick: showDialog,
+      className: disabled ? "" : buttonStyle,
+      disabled
+    },
+    /* @__PURE__ */ React.createElement("div", { className: containerStyle }, /* @__PURE__ */ React.createElement(AddAlert, { className: iconStyle }), /* @__PURE__ */ React.createElement("p", null, "Create New Incident"))
+  ), integrationKey && /* @__PURE__ */ React.createElement(
+    TriggerDialog,
+    {
+      showDialog: dialogShown,
+      handleDialog: hideDialog,
+      integrationKey,
+      name
+    }
+  ));
+}
+
+const useStyles$1 = makeStyles((theme) => ({
+  buttonStyle: {
+    color: theme.palette.text.primary,
+    "&:hover": {
+      backgroundColor: "transparent",
+      textDecoration: "underline"
+    }
+  },
+  containerStyle: {
+    flex: "flex",
+    fontSize: "14px",
+    width: "85px",
+    lineHeight: "14px"
+  },
+  iconStyle: {
+    fontSize: "35px",
+    marginBottom: "-10px"
+  }
+}));
+function OpenServiceButton(props) {
+  const { buttonStyle, containerStyle, iconStyle } = useStyles$1();
+  function navigateToService() {
+    window.open(props.serviceUrl, "_blank");
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      "aria-label": "open-service-in-browser",
+      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"))
+  ));
+}
+
 const BasicCard = ({ children }) => /* @__PURE__ */ React.createElement(InfoCard, { title: "PagerDuty" }, children);
 const PagerDutyCard$1 = (props) => {
+  const theme = useTheme();
   const { readOnly, disableChangeEvents, integrationKey, name } = props;
   const api = useApi(pagerDutyApiRef);
   const [refreshIncidents, setRefreshIncidents] = useState(false);
   const [refreshChangeEvents, setRefreshChangeEvents] = useState(false);
   const [dialogShown, setDialogShown] = useState(false);
-  const showDialog = useCallback(() => {
-    setDialogShown(true);
-  }, [setDialogShown]);
   const hideDialog = useCallback(() => {
     setDialogShown(false);
   }, [setDialogShown]);
@@ -708,36 +841,250 @@ const PagerDutyCard$1 = (props) => {
   if (loading) {
     return /* @__PURE__ */ React.createElement(BasicCard, null, /* @__PURE__ */ React.createElement(Progress, null));
   }
-  const serviceLink = {
-    label: "Service Directory",
-    href: service.url,
-    icon: /* @__PURE__ */ React.createElement(WebIcon, null)
-  };
   const createIncidentDisabled = !integrationKey;
-  const triggerLink = {
-    label: "Create Incident",
-    onClick: showDialog,
-    icon: /* @__PURE__ */ React.createElement(AlarmAddIcon, null),
-    color: "secondary",
-    disabled: createIncidentDisabled,
-    title: createIncidentDisabled ? "Must provide an integration-key to create incidents" : ""
-  };
-  const escalationPolicyLink = {
-    label: "Escalation Policy",
-    href: service.policyLink,
-    icon: /* @__PURE__ */ React.createElement(DateRangeIcon, null)
-  };
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Card, { "data-testid": "pagerduty-card" }, /* @__PURE__ */ React.createElement(
     CardHeader,
     {
-      title: "PagerDuty",
-      subheader: /* @__PURE__ */ React.createElement(
-        HeaderIconLinkRow,
-        {
-          links: !readOnly ? [serviceLink, triggerLink, escalationPolicyLink] : [serviceLink, escalationPolicyLink]
+      style: { marginRight: "1em" },
+      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" } }, /* @__PURE__ */ React.createElement(Grid, { item: true, md: 3 }, /* @__PURE__ */ React.createElement(Typography, { style: { fontSize: "16px", fontWeight: "bold" } }, "STATUS")), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 6 }, /* @__PURE__ */ React.createElement(Typography, { style: { fontSize: "16px", fontWeight: "bold" } }, "INCIDENT HISTORY")), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 3 }, /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      style: {
+        fontSize: "16px",
+        fontWeight: "bold",
+        marginLeft: "10px"
+      }
+    },
+    "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: "darkRed",
+          marginRight: "20px",
+          height: "150px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
         }
+      },
+      /* @__PURE__ */ React.createElement(
+        Typography,
+        {
+          variant: "h3",
+          style: { color: "white", fontWeight: "bold" }
+        },
+        "ALARM"
+      ),
+      /* @__PURE__ */ React.createElement(
+        Typography,
+        {
+          style: {
+            alignSelf: "start",
+            position: "absolute",
+            verticalAlign: "bottom",
+            marginTop: "120px",
+            marginLeft: "10px",
+            color: "white"
+          }
+        },
+        "Last triggered 8 minutes ago"
       )
-    }
+    )),
+    /* @__PURE__ */ React.createElement(
+      Grid,
+      {
+        item: true,
+        md: 6,
+        style: {
+          display: "flex",
+          height: "100%",
+          justifyContent: "center",
+          columnSpan: "all"
+        }
+      },
+      /* @__PURE__ */ React.createElement(Grid, { md: 4, style: { height: "100%" } }, /* @__PURE__ */ React.createElement(
+        Card,
+        {
+          style: {
+            marginRight: "10px",
+            height: "150px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          Typography,
+          {
+            style: {
+              color: "red",
+              fontSize: "50px"
+            }
+          },
+          "1"
+        ),
+        /* @__PURE__ */ React.createElement(
+          Typography,
+          {
+            style: {
+              color: "red",
+              fontWeight: "bold",
+              fontSize: "10px"
+            }
+          },
+          "TRIGGERED"
+        )
+      )),
+      /* @__PURE__ */ React.createElement(Grid, { md: 4 }, /* @__PURE__ */ React.createElement(
+        Card,
+        {
+          style: {
+            marginRight: "10px",
+            height: "150px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          Typography,
+          {
+            style: {
+              color: "orange",
+              fontSize: "50px"
+            }
+          },
+          "1"
+        ),
+        /* @__PURE__ */ React.createElement(
+          Typography,
+          {
+            style: {
+              color: "orange",
+              fontWeight: "bold",
+              fontSize: "10px"
+            }
+          },
+          "ACKNOWLEDGED"
+        )
+      )),
+      /* @__PURE__ */ React.createElement(Grid, { md: 4 }, /* @__PURE__ */ React.createElement(
+        Card,
+        {
+          style: {
+            marginRight: "10px",
+            height: "150px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          Typography,
+          {
+            style: {
+              color: "green",
+              fontSize: "50px"
+            }
+          },
+          "43"
+        ),
+        /* @__PURE__ */ React.createElement(
+          Typography,
+          {
+            style: {
+              color: "green",
+              fontWeight: "bold",
+              fontSize: "10px"
+            }
+          },
+          "RESOLVED"
+        )
+      ))
+    ),
+    /* @__PURE__ */ React.createElement(Grid, { item: true, md: 3 }, /* @__PURE__ */ React.createElement(
+      Card,
+      {
+        style: {
+          marginRight: "20px",
+          height: "150px",
+          display: "grid",
+          gridTemplateRows: "1fr auto auto"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "inline-block",
+            justifyContent: "space-around",
+            marginTop: "30px"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          Typography,
+          {
+            style: {
+              fontSize: "50px",
+              color: "black",
+              fontWeight: "bold",
+              alignSelf: "center",
+              justifyContent: "center"
+            }
+          },
+          "4"
+        ),
+        /* @__PURE__ */ React.createElement(
+          Typography,
+          {
+            variant: "body1",
+            style: {
+              color: "black",
+              alignSelf: "center",
+              justifyContent: "center",
+              marginLeft: "1px",
+              marginTop: "20px"
+            }
+          },
+          "/5"
+        )
+      ),
+      /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "row-reverse" } }, /* @__PURE__ */ React.createElement(
+        Typography,
+        {
+          style: {
+            justifyContent: "end",
+            color: "gray",
+            textDecoration: "underline",
+            marginRight: "5px"
+          }
+        },
+        "See service standards"
+      )),
+      /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+        LinearProgress,
+        {
+          variant: "determinate",
+          value: 80,
+          style: {
+            margin: "5px",
+            borderRadius: "10px",
+            height: "10px"
+          }
+        }
+      ))
+    ))
   ), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(TabbedCard, null, /* @__PURE__ */ React.createElement(CardTab, { label: "Incidents" }, /* @__PURE__ */ React.createElement(
     Incidents,
     {
@@ -789,11 +1136,6 @@ 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,
@@ -838,4 +1180,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-ecbd8285.esm.js.map
+//# sourceMappingURL=index-cad5ded3.esm.js.map