@pagerduty/backstage-plugin 0.15.10-next.0 → 0.16.0

package/dist/components/PagerDutyCardCommon/ServiceStandardsCard.esm.js

@@ -0,0 +1,134 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makeStyles, withStyles, LinearProgress, Typography } from '@material-ui/core';
+import InfoIcon from '@material-ui/icons/Info';
+import CheckCircle from '@material-ui/icons/CheckCircle';
+import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
+import { Card, Flex, TooltipTrigger, ButtonIcon, Tooltip } from '@backstage/ui';
+
+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, standards, compact }) {
+  const useStyles = makeStyles((theme) => ({
+    cardStyle: {
+      height: compact !== true ? "120px" : "80px",
+      padding: 0,
+      position: "relative",
+      backgroundColor: "rgba(0, 0, 0, 0.03)"
+    },
+    largeTextStyle: {
+      fontSize: compact !== true ? "50px" : "40px",
+      color: completed !== void 0 && total !== void 0 ? colorFromPercentage(theme, completed / total) : colorFromPercentage(theme, 0),
+      alignSelf: "center",
+      justifyContent: "center"
+    },
+    smallTextStyle: {
+      color: theme.palette.textSubtle,
+      fontSize: compact !== true ? "14px" : "12px",
+      fontWeight: "bold",
+      alignSelf: "center",
+      marginLeft: "-17px",
+      marginBottom: "-26px"
+    },
+    tooltipIcon: {
+      marginRight: "5px"
+    },
+    infoIcon: {
+      color: "gray",
+      "&:hover": {
+        backgroundColor: "transparent"
+      }
+    },
+    standardItem: {
+      display: "flex",
+      alignItems: "center"
+    },
+    linearProgressContainer: {
+      left: 0,
+      position: "absolute",
+      bottom: 0,
+      width: "100%",
+      padding: "0px"
+    },
+    textContainerStyle: {
+      position: "absolute",
+      top: compact ? "5px" : "20px",
+      width: "100%"
+    },
+    tooltipTriggerStyles: {
+      position: "relative",
+      zIndex: 1
+    }
+  }));
+  const BorderLinearProgress = withStyles((theme) => ({
+    root: {
+      height: 10,
+      borderRadius: 5,
+      margin: 5
+    },
+    colorPrimary: {
+      backgroundColor: theme.palette.grey[theme.palette.type === "light" ? 200 : 700]
+    },
+    bar: {
+      borderRadius: 5,
+      backgroundColor: completed !== void 0 && total !== void 0 ? colorFromPercentage(theme, completed / total) : colorFromPercentage(theme, 0)
+    }
+  }))(LinearProgress);
+  const {
+    cardStyle,
+    largeTextStyle,
+    smallTextStyle,
+    linearProgressContainer,
+    tooltipIcon,
+    textContainerStyle,
+    infoIcon,
+    standardItem,
+    tooltipTriggerStyles
+  } = useStyles();
+  if (standards === void 0 || completed === void 0 || total === void 0) {
+    return /* @__PURE__ */ jsx(Card, { className: cardStyle, children: /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsx(Typography, { className: smallTextStyle, children: "Unable to retrieve Scores" }) }) });
+  }
+  return /* @__PURE__ */ jsx(Card, { className: cardStyle, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+    /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+      /* @__PURE__ */ jsx(
+        ButtonIcon,
+        {
+          className: tooltipTriggerStyles,
+          icon: /* @__PURE__ */ jsx(InfoIcon, { className: infoIcon }),
+          variant: "tertiary"
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, { children: standards?.map((standard, key) => /* @__PURE__ */ jsx(Typography, { children: standard.pass ? /* @__PURE__ */ jsxs(Typography, { className: standardItem, children: [
+        /* @__PURE__ */ jsx(CheckCircle, { className: tooltipIcon }),
+        " ",
+        standard.name
+      ] }) : /* @__PURE__ */ jsxs(Typography, { className: standardItem, children: [
+        /* @__PURE__ */ jsx(RadioButtonUncheckedIcon, { className: tooltipIcon }),
+        " ",
+        standard.name
+      ] }) }, key)) })
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { justify: "center", className: textContainerStyle, children: [
+      /* @__PURE__ */ jsx(Typography, { className: largeTextStyle, children: completed }),
+      /* @__PURE__ */ jsxs(Typography, { className: smallTextStyle, children: [
+        "/",
+        total
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: linearProgressContainer, children: /* @__PURE__ */ jsx(
+      BorderLinearProgress,
+      {
+        variant: "determinate",
+        value: completed / total * 100
+      }
+    ) })
+  ] }) });
+}
+
+export { colorFromPercentage, ServiceStandardsCard as default };
+//# sourceMappingURL=ServiceStandardsCard.esm.js.map

package/dist/components/PagerDutyCardCommon/ServiceStandardsCard.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServiceStandardsCard.esm.js","sources":["../../../src/components/PagerDutyCardCommon/ServiceStandardsCard.tsx"],"sourcesContent":["import { BackstageTheme } from '@backstage/theme';\nimport {\n  LinearProgress,\n  Theme,\n  Typography,\n  makeStyles,\n  withStyles,\n} from '@material-ui/core';\nimport InfoIcon from '@material-ui/icons/Info';\nimport { PagerDutyServiceStandard } from '@pagerduty/backstage-plugin-common';\nimport CheckCircle from '@material-ui/icons/CheckCircle';\nimport RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';\nimport { ButtonIcon, Card, Flex, Tooltip, TooltipTrigger } from '@backstage/ui';\n\ntype Props = {\n  total: number | undefined;\n  completed: number | undefined;\n  standards: PagerDutyServiceStandard[] | undefined;\n  compact?: boolean;\n};\n\nexport function colorFromPercentage(theme: Theme, percentage: number) {\n  if (percentage < 0.5) {\n    return theme.palette.error.main;\n  } else if (percentage < 0.8) {\n    return theme.palette.warning.main;\n  }\n  return theme.palette.success.main;\n}\n\nfunction ServiceStandardsCard({ total, completed, standards, compact }: Props) {\n  const useStyles = makeStyles<BackstageTheme>(theme => ({\n    cardStyle: {\n      height: compact !== true ? '120px' : '80px',\n      padding: 0,\n      position: 'relative',\n      backgroundColor: 'rgba(0, 0, 0, 0.03)',\n    },\n    largeTextStyle: {\n      fontSize: compact !== true ? '50px' : '40px',\n      color:\n        completed !== undefined && total !== undefined\n          ? colorFromPercentage(theme, completed / total)\n          : colorFromPercentage(theme, 0),\n      alignSelf: 'center',\n      justifyContent: 'center',\n    },\n    smallTextStyle: {\n      color: theme.palette.textSubtle,\n      fontSize: compact !== true ? '14px' : '12px',\n      fontWeight: 'bold',\n      alignSelf: 'center',\n      marginLeft: '-17px',\n      marginBottom: '-26px',\n    },\n    tooltipIcon: {\n      marginRight: '5px',\n    },\n    infoIcon: {\n      color: 'gray',\n      '&:hover': {\n        backgroundColor: 'transparent',\n      },\n    },\n    standardItem: {\n      display: 'flex',\n      alignItems: 'center',\n    },\n    linearProgressContainer: {\n      left: 0,\n      position: 'absolute',\n      bottom: 0,\n      width: '100%',\n      padding: '0px',\n    },\n    textContainerStyle: {\n      position: 'absolute',\n      top: compact ? '5px' : '20px',\n      width: '100%',\n    },\n    tooltipTriggerStyles: {\n      position: 'relative',\n      zIndex: 1,\n    },\n  }));\n\n  const BorderLinearProgress = withStyles(theme => ({\n    root: {\n      height: 10,\n      borderRadius: 5,\n      margin: 5,\n    },\n    colorPrimary: {\n      backgroundColor:\n        theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],\n    },\n    bar: {\n      borderRadius: 5,\n      backgroundColor:\n        completed !== undefined && total !== undefined\n          ? colorFromPercentage(theme, completed / total)\n          : colorFromPercentage(theme, 0),\n    },\n  }))(LinearProgress);\n\n  const {\n    cardStyle,\n    largeTextStyle,\n    smallTextStyle,\n    linearProgressContainer,\n    tooltipIcon,\n    textContainerStyle,\n    infoIcon,\n    standardItem,\n    tooltipTriggerStyles,\n  } = useStyles();\n\n  if (\n    standards === undefined ||\n    completed === undefined ||\n    total === undefined\n  ) {\n    return (\n      <Card className={cardStyle}>\n        <Flex justify=\"center\">\n          <Typography className={smallTextStyle}>\n            Unable to retrieve Scores\n          </Typography>\n        </Flex>\n      </Card>\n    );\n  }\n\n  return (\n    <Card className={cardStyle}>\n      <Flex direction=\"column\">\n        <TooltipTrigger>\n          <ButtonIcon\n            className={tooltipTriggerStyles}\n            icon={<InfoIcon className={infoIcon} />}\n            variant=\"tertiary\"\n          />\n          <Tooltip>\n            {standards?.map((standard, key) => (\n              <Typography key={key}>\n                {standard.pass ? (\n                  <Typography className={standardItem}>\n                    <CheckCircle className={tooltipIcon} /> {standard.name}\n                  </Typography>\n                ) : (\n                  <Typography className={standardItem}>\n                    <RadioButtonUncheckedIcon className={tooltipIcon} />{' '}\n                    {standard.name}\n                  </Typography>\n                )}\n              </Typography>\n            ))}\n          </Tooltip>\n        </TooltipTrigger>\n        <Flex justify=\"center\" className={textContainerStyle}>\n          <Typography className={largeTextStyle}>{completed}</Typography>\n          <Typography className={smallTextStyle}>/{total}</Typography>\n        </Flex>\n        <div className={linearProgressContainer}>\n          <BorderLinearProgress\n            variant=\"determinate\"\n            value={(completed! / total!) * 100}\n          />\n        </div>\n      </Flex>\n    </Card>\n  );\n}\n\nexport default ServiceStandardsCard;\n"],"names":[],"mappings":"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"}

package/dist/components/PagerDutyCardCommon/StatusCard.esm.js

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { useApi } from '@backstage/core-plugin-api';
+import { pagerDutyApiRef } from '../../api/client.esm.js';
+import { useAsyncFn } from 'react-use';
+import Alert from '@material-ui/lab/Alert/Alert';
+import { Progress } from '@backstage/core-components';
+import { Card } from '@backstage/ui';
+import { Typography } from '@material-ui/core';
+
+function labelFromStatus(status) {
+  let label;
+  switch (status) {
+    case "active":
+      label = "OK";
+      break;
+    case "warning":
+      label = "ACTIVE";
+      break;
+    case "critical":
+      label = "ALARM";
+      break;
+    case "maintenance":
+      label = "MAINTENANCE";
+      break;
+    case "disabled":
+      label = "DISABLED";
+      break;
+    default:
+      label = "OK";
+      break;
+  }
+  return label;
+}
+function colorFromStatus(theme, status) {
+  let color;
+  switch (status) {
+    case "active":
+      color = theme.palette.success.main;
+      break;
+    case "warning":
+      color = theme.palette.warningBackground;
+      break;
+    case "critical":
+      color = theme.palette.error.main;
+      break;
+    case "maintenance":
+      color = "#ebdc00";
+      break;
+    case "disabled":
+      color = "#A9A9A9";
+      break;
+    default:
+      color = theme.palette.success.main;
+      break;
+  }
+  return color;
+}
+function StatusCard({ serviceId, refreshStatus, account, compact }) {
+  const api = useApi(pagerDutyApiRef);
+  const [{ value: status, loading, error }, getStatus] = useAsyncFn(
+    async () => {
+      const { service: foundService } = await api.getServiceById(
+        serviceId,
+        account
+      );
+      return foundService.status;
+    }
+  );
+  const useStyles = makeStyles((theme) => ({
+    cardStyle: {
+      height: compact !== true ? "120px" : "80px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: status !== void 0 ? colorFromStatus(theme, status) : colorFromStatus(theme, "active")
+    },
+    largeTextStyle: {
+      color: "white",
+      fontWeight: "bold",
+      fontSize: "20px",
+      wordWrap: "break-word"
+    }
+  }));
+  const { cardStyle, largeTextStyle } = useStyles();
+  useEffect(() => {
+    getStatus();
+  }, [refreshStatus, getStatus]);
+  if (error) {
+    if (error.message.includes("Forbidden")) {
+      return /* @__PURE__ */ jsx(Typography, { children: "forbidden" });
+    }
+    return /* @__PURE__ */ jsxs(Alert, { severity: "error", children: [
+      "Error encountered while fetching information. ",
+      error.message
+    ] });
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsx(Progress, {});
+  }
+  if (!status) {
+    return /* @__PURE__ */ jsx(Typography, { children: "not found" });
+  }
+  return /* @__PURE__ */ jsx(Card, { className: cardStyle, children: status !== void 0 ? /* @__PURE__ */ jsx(Typography, { className: largeTextStyle, children: labelFromStatus(status) }) : /* @__PURE__ */ jsx(Typography, { className: largeTextStyle, children: "Unable to get status" }) });
+}
+
+export { StatusCard as default };
+//# sourceMappingURL=StatusCard.esm.js.map

package/dist/components/PagerDutyCardCommon/StatusCard.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusCard.esm.js","sources":["../../../src/components/PagerDutyCardCommon/StatusCard.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { Theme, makeStyles } from '@material-ui/core/styles';\nimport { BackstageTheme } from '@backstage/theme';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { pagerDutyApiRef } from '../../api';\nimport { useAsyncFn } from 'react-use';\nimport Alert from '@material-ui/lab/Alert/Alert';\nimport { Progress } from '@backstage/core-components';\nimport { Card } from '@backstage/ui';\nimport { Typography } from '@material-ui/core';\n\ntype Props = {\n  serviceId: string;\n  refreshStatus: boolean;\n  account?: string;\n  compact?: boolean;\n};\n\nfunction labelFromStatus(status: string) {\n  let label;\n  switch (status) {\n    case 'active':\n      label = 'OK';\n      break;\n    case 'warning':\n      label = 'ACTIVE';\n      break;\n    case 'critical':\n      label = 'ALARM';\n      break;\n    case 'maintenance':\n      label = 'MAINTENANCE';\n      break;\n    case 'disabled':\n      label = 'DISABLED';\n      break;\n    default:\n      label = 'OK';\n      break;\n  }\n\n  return label;\n}\n\nfunction colorFromStatus(theme: Theme, status: string) {\n  let color;\n  switch (status) {\n    case 'active':\n      color = theme.palette.success.main;\n      break;\n    case 'warning':\n      color = theme.palette.warningBackground;\n      break;\n    case 'critical':\n      color = theme.palette.error.main;\n      break;\n    case 'maintenance':\n      color = '#ebdc00';\n      break;\n    case 'disabled':\n      color = '#A9A9A9';\n      break;\n    default:\n      color = theme.palette.success.main;\n      break;\n  }\n\n  return color;\n}\n\nfunction StatusCard({ serviceId, refreshStatus, account, compact }: Props) {\n  const api = useApi(pagerDutyApiRef);\n  const [{ value: status, loading, error }, getStatus] = useAsyncFn(\n    async () => {\n      const { service: foundService } = await api.getServiceById(\n        serviceId,\n        account,\n      );\n      return foundService.status;\n    },\n  );\n\n  const useStyles = makeStyles<BackstageTheme>(theme => ({\n    cardStyle: {\n      height: compact !== true ? '120px' : '80px',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor:\n        status !== undefined\n          ? colorFromStatus(theme, status)\n          : colorFromStatus(theme, 'active'),\n    },\n    largeTextStyle: {\n      color: 'white',\n      fontWeight: 'bold',\n      fontSize: '20px',\n      wordWrap: 'break-word',\n    },\n  }));\n\n  const { cardStyle, largeTextStyle } = useStyles();\n\n  useEffect(() => {\n    getStatus();\n  }, [refreshStatus, getStatus]);\n\n  if (error) {\n    if (error.message.includes('Forbidden')) {\n      return <Typography>forbidden</Typography>;\n    }\n\n    return (\n      <Alert severity=\"error\">\n        Error encountered while fetching information. {error.message}\n      </Alert>\n    );\n  }\n\n  if (loading) {\n    return <Progress />;\n  }\n\n  if (!status) {\n    return <Typography>not found</Typography>;\n  }\n\n  return (\n    <Card className={cardStyle}>\n      {status !== undefined ? (\n        <Typography className={largeTextStyle}>\n          {labelFromStatus(status)}\n        </Typography>\n      ) : (\n        <Typography className={largeTextStyle}>Unable to get status</Typography>\n      )}\n    </Card>\n  );\n}\n\nexport default StatusCard;\n"],"names":[],"mappings":"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"}

package/dist/components/PagerDutyCardCommon/TriggerIncidentButton.esm.js

@@ -0,0 +1,66 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { makeStyles, Typography } from '@material-ui/core';
+import { TriggerDialog } from '../TriggerDialog/TriggerDialog.esm.js';
+import AddAlert from '@material-ui/icons/AddAlert';
+import { ButtonIcon } from '@backstage/ui';
+
+function TriggerIncidentButton({
+  integrationKey,
+  entityName,
+  compact,
+  handleRefresh
+}) {
+  const useStyles = makeStyles(() => ({
+    containerStyle: {
+      fontSize: compact !== true ? "12px" : "10px",
+      width: compact !== true ? "80px" : "60px",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    },
+    textStyle: {
+      textAlign: "center",
+      fontSize: "12px",
+      minWidth: "30px"
+    }
+  }));
+  const { containerStyle, textStyle } = useStyles();
+  const [dialogShown, setDialogShown] = useState(false);
+  const showDialog = useCallback(() => {
+    setDialogShown(true);
+  }, [setDialogShown]);
+  const hideDialog = useCallback(() => {
+    setDialogShown(false);
+  }, [setDialogShown]);
+  const disabled = !integrationKey;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: containerStyle, children: [
+      /* @__PURE__ */ jsx(
+        ButtonIcon,
+        {
+          variant: "tertiary",
+          size: "medium",
+          "aria-label": "create-incident",
+          onClick: showDialog,
+          isDisabled: disabled,
+          icon: /* @__PURE__ */ jsx(AddAlert, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { className: textStyle, children: "Create new incident" })
+    ] }),
+    integrationKey && /* @__PURE__ */ jsx(
+      TriggerDialog,
+      {
+        showDialog: dialogShown,
+        handleDialog: hideDialog,
+        integrationKey,
+        serviceName: entityName,
+        onIncidentCreated: handleRefresh
+      }
+    )
+  ] });
+}
+
+export { TriggerIncidentButton };
+//# sourceMappingURL=TriggerIncidentButton.esm.js.map

package/dist/components/PagerDutyCardCommon/TriggerIncidentButton.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TriggerIncidentButton.esm.js","sources":["../../../src/components/PagerDutyCardCommon/TriggerIncidentButton.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n// eslint-disable-next-line @backstage/no-undeclared-imports\nimport { useCallback, useState } from 'react';\nimport { makeStyles, Typography } from '@material-ui/core';\nimport { BackstageTheme } from '@backstage/theme';\n\nimport { TriggerDialog } from '../TriggerDialog';\nimport AddAlert from '@material-ui/icons/AddAlert';\nimport { ButtonIcon } from '@backstage/ui';\n\n/** @public */\nexport type TriggerIncidentButtonProps = {\n  integrationKey: string | undefined;\n  entityName: string;\n  compact?: boolean;\n  handleRefresh: () => void;\n};\n\n/** @public */\nexport function TriggerIncidentButton({\n  integrationKey,\n  entityName,\n  compact,\n  handleRefresh,\n}: TriggerIncidentButtonProps) {\n  const useStyles = makeStyles<BackstageTheme>(() => ({\n    containerStyle: {\n      fontSize: compact !== true ? '12px' : '10px',\n      width: compact !== true ? '80px' : '60px',\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n    },\n    textStyle: {\n      textAlign: 'center',\n      fontSize: '12px',\n      minWidth: '30px',\n    },\n  }));\n\n  const { containerStyle, textStyle } = useStyles();\n  const [dialogShown, setDialogShown] = useState<boolean>(false);\n\n  const showDialog = useCallback(() => {\n    setDialogShown(true);\n  }, [setDialogShown]);\n  const hideDialog = useCallback(() => {\n    setDialogShown(false);\n  }, [setDialogShown]);\n\n  const disabled = !integrationKey;\n\n  return (\n    <>\n      <div className={containerStyle}>\n        <ButtonIcon\n          variant=\"tertiary\"\n          size=\"medium\"\n          aria-label=\"create-incident\"\n          onClick={showDialog}\n          isDisabled={disabled}\n          icon={<AddAlert />}\n        />\n\n        <Typography className={textStyle}>Create new incident</Typography>\n      </div>\n      {integrationKey && (\n        <TriggerDialog\n          showDialog={dialogShown}\n          handleDialog={hideDialog}\n          integrationKey={integrationKey}\n          serviceName={entityName}\n          onIncidentCreated={handleRefresh}\n        />\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAkCO,SAAS,qBAAA,CAAsB;AAAA,EACpC,cAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAA+B;AAC7B,EAAA,MAAM,SAAA,GAAY,WAA2B,OAAO;AAAA,IAClD,cAAA,EAAgB;AAAA,MACd,QAAA,EAAU,OAAA,KAAY,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MACtC,KAAA,EAAO,OAAA,KAAY,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MACnC,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe,QAAA;AAAA,MACf,UAAA,EAAY;AAAA,KACd;AAAA,IACA,SAAA,EAAW;AAAA,MACT,SAAA,EAAW,QAAA;AAAA,MACX,QAAA,EAAU,MAAA;AAAA,MACV,QAAA,EAAU;AAAA;AACZ,GACF,CAAE,CAAA;AAEF,EAAA,MAAM,EAAE,cAAA,EAAgB,SAAA,EAAU,GAAI,SAAA,EAAU;AAChD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAkB,KAAK,CAAA;AAE7D,EAAA,MAAM,UAAA,GAAa,YAAY,MAAM;AACnC,IAAA,cAAA,CAAe,IAAI,CAAA;AAAA,EACrB,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AACnB,EAAA,MAAM,UAAA,GAAa,YAAY,MAAM;AACnC,IAAA,cAAA,CAAe,KAAK,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,EAAA,MAAM,WAAW,CAAC,cAAA;AAElB,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAW,cAAA,EACd,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,UAAA;AAAA,UACR,IAAA,EAAK,QAAA;AAAA,UACL,YAAA,EAAW,iBAAA;AAAA,UACX,OAAA,EAAS,UAAA;AAAA,UACT,UAAA,EAAY,QAAA;AAAA,UACZ,IAAA,sBAAO,QAAA,EAAA,EAAS;AAAA;AAAA,OAClB;AAAA,sBAEA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,SAAA,EAAW,QAAA,EAAA,qBAAA,EAAmB;AAAA,KAAA,EACvD,CAAA;AAAA,IACC,cAAA,oBACC,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAY,WAAA;AAAA,QACZ,YAAA,EAAc,UAAA;AAAA,QACd,cAAA;AAAA,QACA,WAAA,EAAa,UAAA;AAAA,QACb,iBAAA,EAAmB;AAAA;AAAA;AACrB,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/components/PagerDutyPage/MappingTable.esm.js

@@ -0,0 +1,282 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo } from 'react';
+import { useMaterialReactTable, MRT_EditActionButtons, MaterialReactTable } from 'material-react-table';
+import { Typography, Box, DialogTitle, DialogContent, DialogActions } from '@material-ui/core';
+import { Flex, TooltipTrigger, ButtonIcon, Tooltip } from '@backstage/ui';
+import { QueryClient, QueryClientProvider, useMutation } from '@tanstack/react-query';
+import { Edit, OpenInBrowser } from '@mui/icons-material';
+import { useApi } from '@backstage/core-plugin-api';
+import { pagerDutyApiRef } from '../../api/client.esm.js';
+
+function getColorFromStatus(status) {
+  switch (status) {
+    case "InSync":
+      return "green";
+    case "OutOfSync":
+      return "red";
+    case "NotMapped":
+      return "orange";
+    default:
+      return "gray";
+  }
+}
+function makeReadable(status) {
+  switch (status) {
+    case "InSync":
+      return "In Sync";
+    case "OutOfSync":
+      return "Out of Sync";
+    case "NotMapped":
+      return "Not Mapped";
+    default:
+      return "Refresh to Update";
+  }
+}
+const MappingTable = ({
+  mappings,
+  catalogEntities
+}) => {
+  const DenseTable = () => {
+    const [validationErrors, setValidationErrors] = useState({});
+    const [entityOptions, setEntityOptions] = useState(
+      []
+    );
+    const pagerDutyApi = useApi(pagerDutyApiRef);
+    useEffect(() => {
+      getEntityOptions();
+    }, []);
+    const columns = useMemo(
+      () => [
+        {
+          id: "serviceId",
+          accessorKey: "serviceId",
+          header: "Service ID",
+          visibleInShowHideMenu: false,
+          enableEditing: false,
+          Edit: () => null,
+          Cell: ({ cell }) => /* @__PURE__ */ jsx(Typography, { variant: "body1", style: { fontWeight: 600 }, children: cell.getValue() })
+        },
+        {
+          id: "integrationKey",
+          accessorKey: "integrationKey",
+          header: "Integration Key",
+          visibleInShowHideMenu: false,
+          enableEditing: false,
+          Edit: () => null
+        },
+        {
+          id: "serviceName",
+          accessorKey: "serviceName",
+          header: "PagerDuty Service",
+          enableEditing: false
+        },
+        {
+          id: "account",
+          accessorKey: "account",
+          header: "Account",
+          enableEditing: false,
+          Edit: () => null
+        },
+        {
+          id: "team",
+          accessorKey: "team",
+          header: "Team",
+          enableEditing: false
+        },
+        {
+          id: "escalationPolicy",
+          accessorKey: "escalationPolicy",
+          header: "Escalation Policy",
+          enableEditing: false
+        },
+        {
+          id: "entityRef",
+          accessorKey: "entityRef",
+          header: "Mapping",
+          visibleInShowHideMenu: false,
+          editVariant: "select",
+          editSelectOptions: entityOptions,
+          muiEditTextFieldProps: {
+            select: true,
+            error: !!validationErrors?.state,
+            helperText: validationErrors?.state,
+            multiline: true,
+            type: "range"
+          }
+        },
+        {
+          id: "entityName",
+          accessorKey: "entityName",
+          header: "Mapped Entity Name",
+          enableEditing: false,
+          Edit: () => null
+        },
+        {
+          id: "status",
+          accessorKey: "status",
+          header: "Status",
+          enableEditing: false,
+          Edit: () => null,
+          Cell: ({ cell }) => /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "span",
+              bgcolor: getColorFromStatus(cell.getValue()),
+              borderRadius: "0.25rem",
+              color: "white",
+              p: "0.25rem",
+              children: makeReadable(cell.getValue())
+            }
+          )
+        },
+        {
+          id: "serviceUrl",
+          accessorKey: "serviceUrl",
+          header: "Service URL",
+          visibleInShowHideMenu: false,
+          enableEditing: false,
+          Edit: () => null
+        }
+      ],
+      [validationErrors, entityOptions]
+    );
+    function useUpdateMapping() {
+      return useMutation({
+        mutationFn: async (mapping) => {
+          return await pagerDutyApi.storeServiceMapping(
+            mapping.serviceId,
+            mapping.integrationKey ?? "",
+            mapping.entityRef,
+            mapping.account ?? ""
+          );
+        }
+      });
+    }
+    const { mutateAsync: updateMapping, isPending: isUpdatingMapping } = useUpdateMapping();
+    const handleSaveMapping = async ({ values, table }) => {
+      setValidationErrors({});
+      values.entityName = catalogEntities.find(
+        (entity) => `${entity.type}:${entity.namespace}/${entity.name}`.toLowerCase() === values.entityRef
+      )?.name ?? "";
+      values.status = "RefreshToUpdate";
+      await updateMapping(values);
+      const existingMapping = mappings.find(
+        (item) => item.serviceId === values.serviceId
+      );
+      if (existingMapping) {
+        existingMapping.entityRef = values.entityRef;
+        existingMapping.entityName = values.entityName;
+      }
+      table.setEditingRow(null);
+    };
+    const openInBrowser = (url) => {
+      window.open(url, "_blank", "noreferrer");
+    };
+    const dataTable = useMaterialReactTable({
+      columns,
+      data: mappings,
+      editDisplayMode: "modal",
+      enableEditing: true,
+      positionActionsColumn: "last",
+      enableStickyHeader: true,
+      enableFilters: true,
+      getRowId: (row) => row.serviceId,
+      muiToolbarAlertBannerProps: mappings === void 0 ? {
+        color: "error",
+        children: "Error loading data"
+      } : void 0,
+      muiTableContainerProps: {
+        sx: {
+          minHeight: "500px"
+        }
+      },
+      onEditingRowCancel: () => setValidationErrors({}),
+      onEditingRowSave: handleSaveMapping,
+      renderEditRowDialogContent: ({ table, row, internalEditComponents }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: "Update Entity Mapping" }),
+        /* @__PURE__ */ jsx(
+          DialogContent,
+          {
+            style: { display: "flex", flexDirection: "column", gap: "1rem" },
+            children: internalEditComponents
+          }
+        ),
+        /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(MRT_EditActionButtons, { variant: "text", table, row }) })
+      ] }),
+      renderRowActions: ({ row, table }) => /* @__PURE__ */ jsxs(Flex, { children: [
+        /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+          /* @__PURE__ */ jsx(
+            ButtonIcon,
+            {
+              "aria-label": "Edit",
+              variant: "tertiary",
+              onClick: () => {
+                getEntityOptions();
+                table.setEditingRow(row);
+              },
+              icon: /* @__PURE__ */ jsx(Edit, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { children: "Edit" })
+        ] }),
+        /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+          /* @__PURE__ */ jsx(
+            ButtonIcon,
+            {
+              "aria-label": "Open in PagerDuty",
+              variant: "tertiary",
+              onClick: () => openInBrowser(row.getValue("serviceUrl")),
+              icon: /* @__PURE__ */ jsx(OpenInBrowser, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { children: " Open in PagerDuty" })
+        ] })
+      ] }),
+      state: {
+        isLoading: mappings.length === 0 || catalogEntities.length === 0,
+        isSaving: isUpdatingMapping,
+        showAlertBanner: mappings === void 0 || catalogEntities === void 0,
+        showProgressBars: mappings.length === 0 || catalogEntities.length === 0
+      },
+      initialState: {
+        columnVisibility: {
+          serviceId: false,
+          entityRef: false,
+          serviceUrl: false,
+          integrationKey: false
+        }
+      }
+    });
+    function getEntityOptions() {
+      const options = [];
+      options.push({ value: "", label: "None" });
+      catalogEntities.forEach((entity) => {
+        const foundServiceAnnotation = entity.annotations["pagerduty.com/service-id"];
+        const foundIntegrationKeyAnnotation = entity.annotations["pagerduty.com/integration-key"];
+        let foundServiceMapping;
+        if (foundServiceAnnotation || foundIntegrationKeyAnnotation) {
+          foundServiceMapping = mappings.find(
+            (item) => item.serviceId === foundServiceAnnotation || item.integrationKey === foundIntegrationKeyAnnotation
+          );
+        }
+        const entityRef = `${entity.type}:${entity.namespace}/${entity.name}`.toLowerCase();
+        const foundEntityMapping = mappings.find(
+          (item) => item.entityRef === entityRef
+        );
+        if (!foundEntityMapping && (!foundServiceAnnotation || !foundIntegrationKeyAnnotation) || (foundServiceAnnotation || foundIntegrationKeyAnnotation) && foundServiceMapping && !foundEntityMapping) {
+          options.push({
+            value: entityRef,
+            label: entity.name
+          });
+        }
+      });
+      setEntityOptions(options);
+    }
+    return /* @__PURE__ */ jsx(MaterialReactTable, { table: dataTable });
+  };
+  const queryClient = new QueryClient();
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(DenseTable, {}) });
+};
+
+export { MappingTable };
+//# sourceMappingURL=MappingTable.esm.js.map