@backstage-community/plugin-cost-insights 0.12.24 → 0.12.26

package/dist/components/AlertInsights/AlertInsights.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertInsights.esm.js","sources":["../../../src/components/AlertInsights/AlertInsights.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport React, { useEffect, useState } from 'react';\nimport pluralize from 'pluralize';\nimport Box from '@material-ui/core/Box';\nimport Grid from '@material-ui/core/Grid';\nimport Snackbar from '@material-ui/core/Snackbar';\nimport { default as MuiAlert } from '@material-ui/lab/Alert';\nimport { AlertDialog } from './AlertDialog';\nimport { AlertStatusSummary } from './AlertStatusSummary';\nimport { AlertStatusSummaryButton } from './AlertStatusSummaryButton';\nimport { AlertInsightsHeader } from './AlertInsightsHeader';\nimport { AlertInsightsSection } from './AlertInsightsSection';\nimport {\n  useScroll,\n  useLoading,\n  ScrollType,\n  MapLoadingToProps,\n} from '../../hooks';\nimport { DefaultLoadingAction } from '../../utils/loading';\nimport { Alert, AlertOptions, AlertStatus } from '../../types';\nimport { Maybe } from '@backstage-community/plugin-cost-insights-common';\nimport {\n  isStatusSnoozed,\n  isStatusAccepted,\n  isStatusDismissed,\n  sumOfAllAlerts,\n} from '../../utils/alerts';\nimport { ScrollAnchor } from '../../utils/scroll';\n\ntype MapLoadingtoAlerts = (isLoading: boolean) => void;\n\nconst mapLoadingToAlerts: MapLoadingToProps<MapLoadingtoAlerts> =\n  ({ dispatch }) =>\n  (isLoading: boolean) =>\n    dispatch({ [DefaultLoadingAction.CostInsightsAlerts]: isLoading });\n\ntype AlertInsightsProps = {\n  group: string;\n  active: Alert[];\n  snoozed: Alert[];\n  accepted: Alert[];\n  dismissed: Alert[];\n  onChange: (alerts: Alert[]) => void;\n};\n\nexport const AlertInsights = ({\n  group,\n  active,\n  snoozed,\n  accepted,\n  dismissed,\n  onChange,\n}: AlertInsightsProps) => {\n  const [scroll] = useScroll();\n  const [alert, setAlert] = useState<Maybe<Alert>>(null);\n  const dispatchLoadingAlerts = useLoading(mapLoadingToAlerts);\n  const [status, setStatus] = useState<Maybe<AlertStatus>>(null);\n  // Allow users to pass null values for data.\n  const [data, setData] = useState<Maybe<any>>(undefined);\n  const [error, setError] = useState<Maybe<Error>>(null);\n  const [isDialogOpen, setDialogOpen] = useState(false);\n  const [isSummaryOpen, setSummaryOpen] = useState(false);\n  const [isSnackbarOpen, setSnackbarOpen] = useState(false);\n\n  useEffect(() => {\n    async function callAlertHook(\n      options: AlertOptions,\n      callback: (options: AlertOptions) => Promise<Alert[]>,\n    ) {\n      setAlert(null);\n      setStatus(null);\n      setData(undefined);\n      setDialogOpen(false);\n      dispatchLoadingAlerts(true);\n      try {\n        const alerts: Alert[] = await callback(options);\n        onChange(alerts);\n      } catch (e) {\n        setError(e);\n      } finally {\n        dispatchLoadingAlerts(false);\n      }\n    }\n\n    const options: AlertOptions = { data, group };\n    const onSnoozed = alert?.onSnoozed?.bind(alert);\n    const onAccepted = alert?.onAccepted?.bind(alert);\n    const onDismissed = alert?.onDismissed?.bind(alert);\n\n    if (data !== undefined) {\n      if (isStatusSnoozed(status) && onSnoozed) {\n        callAlertHook(options, onSnoozed);\n      } else if (isStatusAccepted(status) && onAccepted) {\n        callAlertHook(options, onAccepted);\n      } else if (isStatusDismissed(status) && onDismissed) {\n        callAlertHook(options, onDismissed);\n      }\n    }\n  }, [group, data, alert, status, onChange, dispatchLoadingAlerts]);\n\n  useEffect(() => {\n    if (scroll === ScrollType.AlertSummary) {\n      setSummaryOpen(true);\n    }\n  }, [scroll]);\n\n  useEffect(() => {\n    setDialogOpen(!!status);\n  }, [status]);\n\n  useEffect(() => {\n    setSnackbarOpen(!!error);\n  }, [error]);\n\n  function onSnooze(alertToSnooze: Alert) {\n    setAlert(alertToSnooze);\n    setStatus(AlertStatus.Snoozed);\n  }\n\n  function onAccept(alertToAccept: Alert) {\n    setAlert(alertToAccept);\n    setStatus(AlertStatus.Accepted);\n  }\n\n  function onDismiss(alertToDismiss: Alert) {\n    setAlert(alertToDismiss);\n    setStatus(AlertStatus.Dismissed);\n  }\n\n  function onSnackbarClose() {\n    setError(null);\n  }\n\n  function onDialogClose() {\n    setAlert(null);\n    setStatus(null);\n  }\n\n  function onDialogFormSubmit(formData: any) {\n    setData(formData);\n  }\n\n  function onSummaryButtonClick() {\n    setSummaryOpen(prevOpen => !prevOpen);\n  }\n\n  const total = [accepted, snoozed, dismissed].reduce(sumOfAllAlerts, 0);\n\n  const isAlertStatusSummaryDisplayed = !!total;\n  const isAlertInsightSectionDisplayed = !!active.length;\n\n  return (\n    <Grid container direction=\"column\" spacing={2}>\n      <Grid item>\n        <AlertInsightsHeader\n          title=\"Your team's action items\"\n          subtitle={\n            isAlertInsightSectionDisplayed\n              ? 'This section outlines suggested action items your team can address to improve cloud costs.'\n              : \"All of your team's action items are hidden. Maybe it's time to give them another look?\"\n          }\n        />\n      </Grid>\n      {isAlertInsightSectionDisplayed && (\n        <Grid item container direction=\"column\" spacing={4}>\n          {active.map((activeAlert, index) => (\n            <Grid item key={`alert-insights-section-${index}`}>\n              <AlertInsightsSection\n                alert={activeAlert}\n                number={index + 1}\n                onSnooze={onSnooze}\n                onAccept={onAccept}\n                onDismiss={onDismiss}\n              />\n            </Grid>\n          ))}\n        </Grid>\n      )}\n      {isAlertStatusSummaryDisplayed && (\n        <Grid item>\n          <Box position=\"relative\" display=\"flex\" justifyContent=\"flex-end\">\n            <ScrollAnchor id={ScrollType.AlertSummary} />\n            <AlertStatusSummaryButton onClick={onSummaryButtonClick}>\n              {pluralize('Hidden Action Item', total)}\n            </AlertStatusSummaryButton>\n          </Box>\n          <AlertStatusSummary\n            open={isSummaryOpen}\n            snoozed={snoozed}\n            accepted={accepted}\n            dismissed={dismissed}\n          />\n        </Grid>\n      )}\n      <AlertDialog\n        group={group}\n        open={isDialogOpen}\n        alert={alert}\n        status={status}\n        onClose={onDialogClose}\n        onSubmit={onDialogFormSubmit}\n      />\n      <Snackbar\n        open={isSnackbarOpen}\n        autoHideDuration={6_000}\n        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}\n        onClose={onSnackbarClose}\n      >\n        <MuiAlert onClose={onSnackbarClose} severity=\"error\">\n          {error?.message}\n        </MuiAlert>\n      </Snackbar>\n    </Grid>\n  );\n};\n"],"names":["options","MuiAlert"],"mappings":"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"}

package/dist/components/AlertInsights/AlertInsightsHeader.esm.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import { useCostInsightsStyles } from '../../utils/styles.esm.js';
+import { ScrollAnchor } from '../../utils/scroll.esm.js';
+import { DefaultNavigation } from '../../utils/navigation.esm.js';
+
+const AlertInsightsHeader = ({
+  title,
+  subtitle
+}) => {
+  const classes = useCostInsightsStyles();
+  return /* @__PURE__ */ React.createElement(Box, { mb: 6, position: "relative" }, /* @__PURE__ */ React.createElement(ScrollAnchor, { id: DefaultNavigation.AlertInsightsHeader }), /* @__PURE__ */ React.createElement(Typography, { variant: "h4", align: "center" }, title, " ", /* @__PURE__ */ React.createElement(Typography, { component: "span", role: "img", "aria-label": "direct-hit" }, "\u{1F3AF}")), /* @__PURE__ */ React.createElement(Typography, { className: classes.h6Subtle, align: "center", gutterBottom: true }, subtitle));
+};
+
+export { AlertInsightsHeader };
+//# sourceMappingURL=AlertInsightsHeader.esm.js.map

package/dist/components/AlertInsights/AlertInsightsHeader.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertInsightsHeader.esm.js","sources":["../../../src/components/AlertInsights/AlertInsightsHeader.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport React from 'react';\nimport Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\nimport { useCostInsightsStyles as useStyles } from '../../utils/styles';\nimport { ScrollAnchor } from '../../utils/scroll';\nimport { DefaultNavigation } from '../../utils/navigation';\n\ntype AlertInsightsHeaderProps = {\n  title: string;\n  subtitle: string;\n};\n\nexport const AlertInsightsHeader = ({\n  title,\n  subtitle,\n}: AlertInsightsHeaderProps) => {\n  const classes = useStyles();\n\n  return (\n    <Box mb={6} position=\"relative\">\n      <ScrollAnchor id={DefaultNavigation.AlertInsightsHeader} />\n      <Typography variant=\"h4\" align=\"center\">\n        {title}{' '}\n        <Typography component=\"span\" role=\"img\" aria-label=\"direct-hit\">\n          🎯\n        </Typography>\n      </Typography>\n      <Typography className={classes.h6Subtle} align=\"center\" gutterBottom>\n        {subtitle}\n      </Typography>\n    </Box>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;AA4BO,MAAM,sBAAsB,CAAC;AAAA,EAClC,KAAA;AAAA,EACA,QAAA;AACF,CAAgC,KAAA;AAC9B,EAAA,MAAM,UAAUA,qBAAU,EAAA,CAAA;AAE1B,EAAA,2CACG,GAAI,EAAA,EAAA,EAAA,EAAI,GAAG,QAAS,EAAA,UAAA,EAAA,sCAClB,YAAa,EAAA,EAAA,EAAA,EAAI,iBAAkB,CAAA,mBAAA,EAAqB,mBACxD,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAQ,IAAK,EAAA,KAAA,EAAM,YAC5B,KAAO,EAAA,GAAA,kBACP,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,WAAU,MAAO,EAAA,IAAA,EAAK,OAAM,YAAW,EAAA,YAAA,EAAA,EAAa,WAEhE,CACF,CAAA,sCACC,UAAW,EAAA,EAAA,SAAA,EAAW,QAAQ,QAAU,EAAA,KAAA,EAAM,UAAS,YAAY,EAAA,IAAA,EAAA,EACjE,QACH,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/AlertInsights/AlertInsightsSection.esm.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import SnoozeIcon from '@material-ui/icons/AccessTime';
+import AcceptIcon from '@material-ui/icons/Check';
+import DismissIcon from '@material-ui/icons/Delete';
+import { AlertInsightsSectionHeader } from './AlertInsightsSectionHeader.esm.js';
+import { isSnoozeEnabled, isAcceptEnabled, isDismissEnabled } from '../../utils/alerts.esm.js';
+
+const AlertInsightsSection = ({
+  alert,
+  number,
+  onSnooze,
+  onAccept,
+  onDismiss
+}) => {
+  const isSnoozeButtonDisplayed = isSnoozeEnabled(alert);
+  const isAcceptButtonDisplayed = isAcceptEnabled(alert);
+  const isDismissButtonDisplayed = isDismissEnabled(alert);
+  const isButtonGroupDisplayed = isSnoozeButtonDisplayed || isAcceptButtonDisplayed || isDismissButtonDisplayed;
+  return /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column", mb: 6 }, /* @__PURE__ */ React.createElement(AlertInsightsSectionHeader, { alert, number }), isButtonGroupDisplayed && /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center", mb: 4 }, isAcceptButtonDisplayed && /* @__PURE__ */ React.createElement(Box, { mr: 1 }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      color: "primary",
+      variant: "contained",
+      "aria-label": "accept",
+      onClick: () => onAccept(alert),
+      startIcon: /* @__PURE__ */ React.createElement(AcceptIcon, null)
+    },
+    "Accept"
+  )), isSnoozeButtonDisplayed && /* @__PURE__ */ React.createElement(Box, { mr: 1 }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      color: "default",
+      variant: "outlined",
+      "aria-label": "snooze",
+      disableElevation: true,
+      onClick: () => onSnooze(alert),
+      startIcon: /* @__PURE__ */ React.createElement(SnoozeIcon, null)
+    },
+    "Snooze"
+  )), isDismissButtonDisplayed && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      color: "secondary",
+      variant: "outlined",
+      "aria-label": "dismiss",
+      disableElevation: true,
+      onClick: () => onDismiss(alert),
+      startIcon: /* @__PURE__ */ React.createElement(DismissIcon, null)
+    },
+    "Dismiss"
+  )), alert.element);
+};
+
+export { AlertInsightsSection };
+//# sourceMappingURL=AlertInsightsSection.esm.js.map

package/dist/components/AlertInsights/AlertInsightsSection.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertInsightsSection.esm.js","sources":["../../../src/components/AlertInsights/AlertInsightsSection.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 */\nimport React from 'react';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport { default as SnoozeIcon } from '@material-ui/icons/AccessTime';\nimport { default as AcceptIcon } from '@material-ui/icons/Check';\nimport { default as DismissIcon } from '@material-ui/icons/Delete';\nimport { AlertInsightsSectionHeader } from './AlertInsightsSectionHeader';\nimport { Alert } from '../../types';\nimport {\n  isSnoozeEnabled,\n  isAcceptEnabled,\n  isDismissEnabled,\n} from '../../utils/alerts';\n\ntype AlertInsightsSectionProps = {\n  alert: Alert;\n  number: number;\n  onSnooze: (alert: Alert) => void;\n  onAccept: (alert: Alert) => void;\n  onDismiss: (alert: Alert) => void;\n};\n\nexport const AlertInsightsSection = ({\n  alert,\n  number,\n  onSnooze,\n  onAccept,\n  onDismiss,\n}: AlertInsightsSectionProps) => {\n  const isSnoozeButtonDisplayed = isSnoozeEnabled(alert);\n  const isAcceptButtonDisplayed = isAcceptEnabled(alert);\n  const isDismissButtonDisplayed = isDismissEnabled(alert);\n  const isButtonGroupDisplayed =\n    isSnoozeButtonDisplayed ||\n    isAcceptButtonDisplayed ||\n    isDismissButtonDisplayed;\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" mb={6}>\n      <AlertInsightsSectionHeader alert={alert} number={number} />\n      {isButtonGroupDisplayed && (\n        <Box display=\"flex\" alignItems=\"center\" mb={4}>\n          {isAcceptButtonDisplayed && (\n            <Box mr={1}>\n              <Button\n                color=\"primary\"\n                variant=\"contained\"\n                aria-label=\"accept\"\n                onClick={() => onAccept(alert)}\n                startIcon={<AcceptIcon />}\n              >\n                Accept\n              </Button>\n            </Box>\n          )}\n          {isSnoozeButtonDisplayed && (\n            <Box mr={1}>\n              <Button\n                color=\"default\"\n                variant=\"outlined\"\n                aria-label=\"snooze\"\n                disableElevation\n                onClick={() => onSnooze(alert)}\n                startIcon={<SnoozeIcon />}\n              >\n                Snooze\n              </Button>\n            </Box>\n          )}\n          {isDismissButtonDisplayed && (\n            <Button\n              color=\"secondary\"\n              variant=\"outlined\"\n              aria-label=\"dismiss\"\n              disableElevation\n              onClick={() => onDismiss(alert)}\n              startIcon={<DismissIcon />}\n            >\n              Dismiss\n            </Button>\n          )}\n        </Box>\n      )}\n      {alert.element}\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAqCO,MAAM,uBAAuB,CAAC;AAAA,EACnC,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AACF,CAAiC,KAAA;AAC/B,EAAM,MAAA,uBAAA,GAA0B,gBAAgB,KAAK,CAAA,CAAA;AACrD,EAAM,MAAA,uBAAA,GAA0B,gBAAgB,KAAK,CAAA,CAAA;AACrD,EAAM,MAAA,wBAAA,GAA2B,iBAAiB,KAAK,CAAA,CAAA;AACvD,EAAM,MAAA,sBAAA,GACJ,2BACA,uBACA,IAAA,wBAAA,CAAA;AAEF,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,aAAA,EAAc,QAAS,EAAA,EAAA,EAAI,CAC7C,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,0BAA2B,EAAA,EAAA,KAAA,EAAc,MAAgB,EAAA,CAAA,EACzD,0CACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,OAAQ,EAAA,MAAA,EAAO,UAAW,EAAA,QAAA,EAAS,EAAI,EAAA,CAAA,EAAA,EACzC,uBACC,oBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,CACP,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,SAAA;AAAA,MACN,OAAQ,EAAA,WAAA;AAAA,MACR,YAAW,EAAA,QAAA;AAAA,MACX,OAAA,EAAS,MAAM,QAAA,CAAS,KAAK,CAAA;AAAA,MAC7B,SAAA,sCAAY,UAAW,EAAA,IAAA,CAAA;AAAA,KAAA;AAAA,IACxB,QAAA;AAAA,GAGH,CAED,EAAA,uBAAA,oBACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,IAAI,CACP,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,SAAA;AAAA,MACN,OAAQ,EAAA,UAAA;AAAA,MACR,YAAW,EAAA,QAAA;AAAA,MACX,gBAAgB,EAAA,IAAA;AAAA,MAChB,OAAA,EAAS,MAAM,QAAA,CAAS,KAAK,CAAA;AAAA,MAC7B,SAAA,sCAAY,UAAW,EAAA,IAAA,CAAA;AAAA,KAAA;AAAA,IACxB,QAAA;AAAA,GAGH,GAED,wBACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,WAAA;AAAA,MACN,OAAQ,EAAA,UAAA;AAAA,MACR,YAAW,EAAA,SAAA;AAAA,MACX,gBAAgB,EAAA,IAAA;AAAA,MAChB,OAAA,EAAS,MAAM,SAAA,CAAU,KAAK,CAAA;AAAA,MAC9B,SAAA,sCAAY,WAAY,EAAA,IAAA,CAAA;AAAA,KAAA;AAAA,IACzB,SAAA;AAAA,GAIL,CAED,EAAA,KAAA,CAAM,OACT,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/AlertInsights/AlertInsightsSectionHeader.esm.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { useAlertInsightsSectionStyles } from '../../utils/styles.esm.js';
+import { ScrollAnchor } from '../../utils/scroll.esm.js';
+
+const AlertInsightsSectionHeader = ({
+  alert,
+  number
+}) => {
+  const classes = useAlertInsightsSectionStyles();
+  const isViewInstructionsButtonDisplayed = !!alert.url;
+  return /* @__PURE__ */ React.createElement(Box, { position: "relative", mb: 3, textAlign: "left" }, /* @__PURE__ */ React.createElement(ScrollAnchor, { id: `alert-${number}` }), /* @__PURE__ */ React.createElement(
+    Grid,
+    {
+      container: true,
+      spacing: 2,
+      justifyContent: "space-between",
+      alignItems: "center"
+    },
+    /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center" }, /* @__PURE__ */ React.createElement(Box, { mr: 2 }, /* @__PURE__ */ React.createElement(Avatar, { className: classes.button }, number)), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, alert.title), /* @__PURE__ */ React.createElement(Typography, { gutterBottom: true }, alert.subtitle)))),
+    isViewInstructionsButtonDisplayed && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Button, { variant: "text", color: "primary", href: alert.url }, alert.buttonText || "View Instructions"))
+  ));
+};
+
+export { AlertInsightsSectionHeader };
+//# sourceMappingURL=AlertInsightsSectionHeader.esm.js.map

package/dist/components/AlertInsights/AlertInsightsSectionHeader.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertInsightsSectionHeader.esm.js","sources":["../../../src/components/AlertInsights/AlertInsightsSectionHeader.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport React from 'react';\nimport Avatar from '@material-ui/core/Avatar';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport { useAlertInsightsSectionStyles as useStyles } from '../../utils/styles';\nimport { ScrollAnchor } from '../../utils/scroll';\nimport { Alert } from '../../types';\n\ntype AlertInsightsSectionHeaderProps = {\n  alert: Alert;\n  number: number;\n};\n\nexport const AlertInsightsSectionHeader = ({\n  alert,\n  number,\n}: AlertInsightsSectionHeaderProps) => {\n  const classes = useStyles();\n\n  const isViewInstructionsButtonDisplayed = !!alert.url;\n\n  return (\n    <Box position=\"relative\" mb={3} textAlign=\"left\">\n      <ScrollAnchor id={`alert-${number}`} />\n      <Grid\n        container\n        spacing={2}\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n      >\n        <Grid item>\n          <Box display=\"flex\" alignItems=\"center\">\n            <Box mr={2}>\n              <Avatar className={classes.button}>{number}</Avatar>\n            </Box>\n            <Box>\n              <Typography variant=\"h5\">{alert.title}</Typography>\n              <Typography gutterBottom>{alert.subtitle}</Typography>\n            </Box>\n          </Box>\n        </Grid>\n        {isViewInstructionsButtonDisplayed && (\n          <Grid item>\n            <Button variant=\"text\" color=\"primary\" href={alert.url}>\n              {alert.buttonText || 'View Instructions'}\n            </Button>\n          </Grid>\n        )}\n      </Grid>\n    </Box>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;AA+BO,MAAM,6BAA6B,CAAC;AAAA,EACzC,KAAA;AAAA,EACA,MAAA;AACF,CAAuC,KAAA;AACrC,EAAA,MAAM,UAAUA,6BAAU,EAAA,CAAA;AAE1B,EAAM,MAAA,iCAAA,GAAoC,CAAC,CAAC,KAAM,CAAA,GAAA,CAAA;AAElD,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,QAAS,EAAA,UAAA,EAAW,IAAI,CAAG,EAAA,SAAA,EAAU,MACxC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,YAAa,EAAA,EAAA,EAAA,EAAI,CAAS,MAAA,EAAA,MAAM,IAAI,CACrC,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAS,EAAA,IAAA;AAAA,MACT,OAAS,EAAA,CAAA;AAAA,MACT,cAAe,EAAA,eAAA;AAAA,MACf,UAAW,EAAA,QAAA;AAAA,KAAA;AAAA,wCAEV,IAAK,EAAA,EAAA,IAAA,EAAI,IACR,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAI,OAAQ,EAAA,MAAA,EAAO,UAAW,EAAA,QAAA,EAAA,sCAC5B,GAAI,EAAA,EAAA,EAAA,EAAI,qBACN,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,WAAW,OAAQ,CAAA,MAAA,EAAA,EAAS,MAAO,CAC7C,mBACC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,sCACE,UAAW,EAAA,EAAA,OAAA,EAAQ,QAAM,KAAM,CAAA,KAAM,CACtC,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,YAAY,EAAA,IAAA,EAAA,EAAE,MAAM,QAAS,CAC3C,CACF,CACF,CAAA;AAAA,IACC,qDACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAA,sCACP,MAAO,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,KAAA,EAAM,WAAU,IAAM,EAAA,KAAA,CAAM,OAChD,KAAM,CAAA,UAAA,IAAc,mBACvB,CACF,CAAA;AAAA,GAGN,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/AlertInsights/AlertStatusSummary.esm.js

@@ -0,0 +1,93 @@
+import React, { Fragment } from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import Box from '@material-ui/core/Box';
+import Collapse from '@material-ui/core/Collapse';
+import Divider from '@material-ui/core/Divider';
+import Tooltip from '@material-ui/core/Tooltip';
+import AcceptIcon from '@material-ui/icons/Check';
+import DismissIcon from '@material-ui/icons/Delete';
+import SnoozeIcon from '@material-ui/icons/AccessTime';
+import '@material-ui/core/IconButton';
+import '@material-ui/core/Badge';
+import '@material-ui/core/Paper';
+import { ActionItemCard } from '../ActionItems/ActionItemCard.esm.js';
+import { AlertStatus } from '../../types/Alert.esm.js';
+import '../../hooks/useConfig.esm.js';
+import '../../hooks/useCurrency.esm.js';
+import '../../hooks/useFilters.esm.js';
+import '../../hooks/useGroups.esm.js';
+import '../../hooks/useLoading.esm.js';
+import '../../hooks/useScroll.esm.js';
+import '../../hooks/useLastCompleteBillingDate.esm.js';
+import { useActionItemCardStyles } from '../../utils/styles.esm.js';
+
+const AlertGroup = ({ alerts, status, title, icon }) => {
+  const classes = useActionItemCardStyles();
+  return /* @__PURE__ */ React.createElement(Box, { p: 1 }, alerts.map((alert, index) => /* @__PURE__ */ React.createElement(Fragment, { key: `alert-${status}-${index}` }, /* @__PURE__ */ React.createElement(
+    ActionItemCard,
+    {
+      disableScroll: true,
+      alert,
+      avatar: /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(Avatar, { className: classes.avatar }, icon))
+    }
+  ), index < alerts.length - 1 && /* @__PURE__ */ React.createElement(Divider, null))));
+};
+const AlertStatusSummary = ({
+  open,
+  snoozed,
+  accepted,
+  dismissed
+}) => {
+  const isSnoozedListDisplayed = !!snoozed.length;
+  const isAcceptedListDisplayed = !!accepted.length;
+  const isDismissedListDisplayed = !!dismissed.length;
+  return /* @__PURE__ */ React.createElement(Collapse, { in: open }, isAcceptedListDisplayed && /* @__PURE__ */ React.createElement(
+    AlertGroup,
+    {
+      title: "Accepted",
+      alerts: accepted,
+      status: AlertStatus.Accepted,
+      icon: /* @__PURE__ */ React.createElement(
+        AcceptIcon,
+        {
+          role: "img",
+          "aria-hidden": false,
+          "aria-label": AlertStatus.Accepted
+        }
+      )
+    }
+  ), isSnoozedListDisplayed && /* @__PURE__ */ React.createElement(
+    AlertGroup,
+    {
+      title: "Snoozed",
+      alerts: snoozed,
+      status: AlertStatus.Snoozed,
+      icon: /* @__PURE__ */ React.createElement(
+        SnoozeIcon,
+        {
+          role: "img",
+          "aria-hidden": false,
+          "aria-label": AlertStatus.Snoozed
+        }
+      )
+    }
+  ), isDismissedListDisplayed && /* @__PURE__ */ React.createElement(
+    AlertGroup,
+    {
+      title: "Dismissed",
+      alerts: dismissed,
+      status: AlertStatus.Dismissed,
+      icon: /* @__PURE__ */ React.createElement(
+        DismissIcon,
+        {
+          role: "img",
+          "aria-hidden": false,
+          "aria-label": AlertStatus.Dismissed
+        }
+      )
+    }
+  ));
+};
+
+export { AlertStatusSummary };
+//# sourceMappingURL=AlertStatusSummary.esm.js.map

package/dist/components/AlertInsights/AlertStatusSummary.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertStatusSummary.esm.js","sources":["../../../src/components/AlertInsights/AlertStatusSummary.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport React, { Fragment } from 'react';\nimport Avatar from '@material-ui/core/Avatar';\nimport Box from '@material-ui/core/Box';\nimport Collapse from '@material-ui/core/Collapse';\nimport Divider from '@material-ui/core/Divider';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { default as AcceptIcon } from '@material-ui/icons/Check';\nimport { default as DismissIcon } from '@material-ui/icons/Delete';\nimport { default as SnoozeIcon } from '@material-ui/icons/AccessTime';\nimport { ActionItemCard } from '../ActionItems';\nimport { Alert, AlertStatus } from '../../types';\nimport { useActionItemCardStyles as useStyles } from '../../utils/styles';\n\ntype AlertGroupProps = {\n  alerts: Alert[];\n  status: AlertStatus;\n  title: string;\n  icon: JSX.Element;\n};\n\nconst AlertGroup = ({ alerts, status, title, icon }: AlertGroupProps) => {\n  const classes = useStyles();\n  return (\n    <Box p={1}>\n      {alerts.map((alert, index) => (\n        <Fragment key={`alert-${status}-${index}`}>\n          <ActionItemCard\n            disableScroll\n            alert={alert}\n            avatar={\n              <Tooltip title={title}>\n                <Avatar className={classes.avatar}>{icon}</Avatar>\n              </Tooltip>\n            }\n          />\n          {index < alerts.length - 1 && <Divider />}\n        </Fragment>\n      ))}\n    </Box>\n  );\n};\n\ntype AlertStatusSummaryProps = {\n  open: boolean;\n  snoozed: Alert[];\n  accepted: Alert[];\n  dismissed: Alert[];\n};\n\nexport const AlertStatusSummary = ({\n  open,\n  snoozed,\n  accepted,\n  dismissed,\n}: AlertStatusSummaryProps) => {\n  const isSnoozedListDisplayed = !!snoozed.length;\n  const isAcceptedListDisplayed = !!accepted.length;\n  const isDismissedListDisplayed = !!dismissed.length;\n\n  return (\n    <Collapse in={open}>\n      {isAcceptedListDisplayed && (\n        <AlertGroup\n          title=\"Accepted\"\n          alerts={accepted}\n          status={AlertStatus.Accepted}\n          icon={\n            <AcceptIcon\n              role=\"img\"\n              aria-hidden={false}\n              aria-label={AlertStatus.Accepted}\n            />\n          }\n        />\n      )}\n      {isSnoozedListDisplayed && (\n        <AlertGroup\n          title=\"Snoozed\"\n          alerts={snoozed}\n          status={AlertStatus.Snoozed}\n          icon={\n            <SnoozeIcon\n              role=\"img\"\n              aria-hidden={false}\n              aria-label={AlertStatus.Snoozed}\n            />\n          }\n        />\n      )}\n      {isDismissedListDisplayed && (\n        <AlertGroup\n          title=\"Dismissed\"\n          alerts={dismissed}\n          status={AlertStatus.Dismissed}\n          icon={\n            <DismissIcon\n              role=\"img\"\n              aria-hidden={false}\n              aria-label={AlertStatus.Dismissed}\n            />\n          }\n        />\n      )}\n    </Collapse>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAM,aAAa,CAAC,EAAE,QAAQ,MAAQ,EAAA,KAAA,EAAO,MAA4B,KAAA;AACvE,EAAA,MAAM,UAAUA,uBAAU,EAAA,CAAA;AAC1B,EAAA,2CACG,GAAI,EAAA,EAAA,CAAA,EAAG,CACL,EAAA,EAAA,MAAA,CAAO,IAAI,CAAC,KAAA,EAAO,KAClB,qBAAA,KAAA,CAAA,aAAA,CAAC,YAAS,GAAK,EAAA,CAAA,MAAA,EAAS,MAAM,CAAA,CAAA,EAAI,KAAK,CACrC,CAAA,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,aAAa,EAAA,IAAA;AAAA,MACb,KAAA;AAAA,MACA,MAAA,kBACG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,KACP,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAO,SAAW,EAAA,OAAA,CAAQ,MAAS,EAAA,EAAA,IAAK,CAC3C,CAAA;AAAA,KAAA;AAAA,GAEJ,EACC,QAAQ,MAAO,CAAA,MAAA,GAAS,qBAAM,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAQ,CACzC,CACD,CACH,CAAA,CAAA;AAEJ,CAAA,CAAA;AASO,MAAM,qBAAqB,CAAC;AAAA,EACjC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AACF,CAA+B,KAAA;AAC7B,EAAM,MAAA,sBAAA,GAAyB,CAAC,CAAC,OAAQ,CAAA,MAAA,CAAA;AACzC,EAAM,MAAA,uBAAA,GAA0B,CAAC,CAAC,QAAS,CAAA,MAAA,CAAA;AAC3C,EAAM,MAAA,wBAAA,GAA2B,CAAC,CAAC,SAAU,CAAA,MAAA,CAAA;AAE7C,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,EAAI,EAAA,IAAA,EAAA,EACX,uBACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,UAAA;AAAA,MACN,MAAQ,EAAA,QAAA;AAAA,MACR,QAAQ,WAAY,CAAA,QAAA;AAAA,MACpB,IACE,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,KAAA;AAAA,UACL,aAAa,EAAA,KAAA;AAAA,UACb,cAAY,WAAY,CAAA,QAAA;AAAA,SAAA;AAAA,OAC1B;AAAA,KAAA;AAAA,KAIL,sBACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,SAAA;AAAA,MACN,MAAQ,EAAA,OAAA;AAAA,MACR,QAAQ,WAAY,CAAA,OAAA;AAAA,MACpB,IACE,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,KAAA;AAAA,UACL,aAAa,EAAA,KAAA;AAAA,UACb,cAAY,WAAY,CAAA,OAAA;AAAA,SAAA;AAAA,OAC1B;AAAA,KAAA;AAAA,KAIL,wBACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,WAAA;AAAA,MACN,MAAQ,EAAA,SAAA;AAAA,MACR,QAAQ,WAAY,CAAA,SAAA;AAAA,MACpB,IACE,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,KAAA;AAAA,UACL,aAAa,EAAA,KAAA;AAAA,UACb,cAAY,WAAY,CAAA,SAAA;AAAA,SAAA;AAAA,OAC1B;AAAA,KAAA;AAAA,GAIR,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/AlertInsights/AlertStatusSummaryButton.esm.js

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import Button from '@material-ui/core/Button';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { useAlertStatusSummaryButtonStyles } from '../../utils/styles.esm.js';
+
+const AlertStatusSummaryButton = ({
+  children,
+  onClick
+}) => {
+  const classes = useAlertStatusSummaryButtonStyles();
+  const [clicked, setClicked] = useState(false);
+  const iconClassName = classnames(classes.icon, {
+    [classes.clicked]: clicked
+  });
+  const handleOnClick = (e) => {
+    setClicked((prevClicked) => !prevClicked);
+    onClick(e);
+  };
+  return /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "text",
+      color: "primary",
+      disableElevation: true,
+      "aria-label": "expand",
+      endIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { className: iconClassName }),
+      onClick: handleOnClick
+    },
+    children
+  );
+};
+
+export { AlertStatusSummaryButton };
+//# sourceMappingURL=AlertStatusSummaryButton.esm.js.map

package/dist/components/AlertInsights/AlertStatusSummaryButton.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertStatusSummaryButton.esm.js","sources":["../../../src/components/AlertInsights/AlertStatusSummaryButton.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport React, { useState, MouseEventHandler, PropsWithChildren } from 'react';\nimport classnames from 'classnames';\nimport Button from '@material-ui/core/Button';\nimport { default as ExpandMoreIcon } from '@material-ui/icons/ExpandMore';\nimport { useAlertStatusSummaryButtonStyles as useStyles } from '../../utils/styles';\n\ntype AlertStatusSummaryButtonProps = {\n  onClick: MouseEventHandler;\n};\n\nexport const AlertStatusSummaryButton = ({\n  children,\n  onClick,\n}: PropsWithChildren<AlertStatusSummaryButtonProps>) => {\n  const classes = useStyles();\n  const [clicked, setClicked] = useState(false);\n  const iconClassName = classnames(classes.icon, {\n    [classes.clicked]: clicked,\n  });\n\n  const handleOnClick: MouseEventHandler = e => {\n    setClicked(prevClicked => !prevClicked);\n    onClick(e);\n  };\n\n  return (\n    <Button\n      variant=\"text\"\n      color=\"primary\"\n      disableElevation\n      aria-label=\"expand\"\n      endIcon={<ExpandMoreIcon className={iconClassName} />}\n      onClick={handleOnClick}\n    >\n      {children}\n    </Button>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;AA0BO,MAAM,2BAA2B,CAAC;AAAA,EACvC,QAAA;AAAA,EACA,OAAA;AACF,CAAwD,KAAA;AACtD,EAAA,MAAM,UAAUA,iCAAU,EAAA,CAAA;AAC1B,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC5C,EAAM,MAAA,aAAA,GAAgB,UAAW,CAAA,OAAA,CAAQ,IAAM,EAAA;AAAA,IAC7C,CAAC,OAAQ,CAAA,OAAO,GAAG,OAAA;AAAA,GACpB,CAAA,CAAA;AAED,EAAA,MAAM,gBAAmC,CAAK,CAAA,KAAA;AAC5C,IAAW,UAAA,CAAA,CAAA,WAAA,KAAe,CAAC,WAAW,CAAA,CAAA;AACtC,IAAA,OAAA,CAAQ,CAAC,CAAA,CAAA;AAAA,GACX,CAAA;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,KAAM,EAAA,SAAA;AAAA,MACN,gBAAgB,EAAA,IAAA;AAAA,MAChB,YAAW,EAAA,QAAA;AAAA,MACX,OAAS,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,SAAA,EAAW,aAAe,EAAA,CAAA;AAAA,MACnD,OAAS,EAAA,aAAA;AAAA,KAAA;AAAA,IAER,QAAA;AAAA,GACH,CAAA;AAEJ;;;;"}

package/dist/components/AlertInstructionsLayout/AlertInstructionsLayout.esm.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Container from '@material-ui/core/Container';
+import { makeStyles } from '@material-ui/core/styles';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import { CostInsightsThemeProvider } from '../CostInsightsPage/CostInsightsThemeProvider.esm.js';
+import { ConfigProvider } from '../../hooks/useConfig.esm.js';
+import { CurrencyProvider } from '../../hooks/useCurrency.esm.js';
+import '../../hooks/useFilters.esm.js';
+import '../../hooks/useGroups.esm.js';
+import '../../hooks/useLoading.esm.js';
+import '../../hooks/useScroll.esm.js';
+import '../../hooks/useLastCompleteBillingDate.esm.js';
+import { Page, Header } from '@backstage/core-components';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    gridArea: "pageContent",
+    padding: theme.spacing(4)
+  }
+}));
+const AlertInstructionsLayout = ({
+  title,
+  children
+}) => {
+  const classes = useStyles();
+  return /* @__PURE__ */ React.createElement(CostInsightsThemeProvider, null, /* @__PURE__ */ React.createElement(ConfigProvider, null, /* @__PURE__ */ React.createElement(CurrencyProvider, null, /* @__PURE__ */ React.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      title: "Cost Insights",
+      pageTitleOverride: title,
+      type: "Tool"
+    }
+  ), /* @__PURE__ */ React.createElement(Container, { maxWidth: "md", disableGutters: true, className: classes.root }, /* @__PURE__ */ React.createElement(Box, { mb: 3 }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "outlined",
+      startIcon: /* @__PURE__ */ React.createElement(ChevronLeftIcon, null),
+      href: "/cost-insights"
+    },
+    "Back to Cost Insights"
+  )), children)))));
+};
+
+export { AlertInstructionsLayout };
+//# sourceMappingURL=AlertInstructionsLayout.esm.js.map

package/dist/components/AlertInstructionsLayout/AlertInstructionsLayout.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertInstructionsLayout.esm.js","sources":["../../../src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport React, { PropsWithChildren } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport Container from '@material-ui/core/Container';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\nimport { CostInsightsThemeProvider } from '../CostInsightsPage/CostInsightsThemeProvider';\nimport { ConfigProvider, CurrencyProvider } from '../../hooks';\nimport { Header, Page } from '@backstage/core-components';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    gridArea: 'pageContent',\n    padding: theme.spacing(4),\n  },\n}));\n\ntype AlertInstructionsLayoutProps = {\n  title: string;\n};\n\nexport const AlertInstructionsLayout = ({\n  title,\n  children,\n}: PropsWithChildren<AlertInstructionsLayoutProps>) => {\n  const classes = useStyles();\n  return (\n    <CostInsightsThemeProvider>\n      <ConfigProvider>\n        <CurrencyProvider>\n          <Page themeId=\"tool\">\n            <Header\n              title=\"Cost Insights\"\n              pageTitleOverride={title}\n              type=\"Tool\"\n            />\n            <Container maxWidth=\"md\" disableGutters className={classes.root}>\n              <Box mb={3}>\n                <Button\n                  variant=\"outlined\"\n                  startIcon={<ChevronLeftIcon />}\n                  href=\"/cost-insights\"\n                >\n                  Back to Cost Insights\n                </Button>\n              </Box>\n              {children}\n            </Container>\n          </Page>\n        </CurrencyProvider>\n      </ConfigProvider>\n    </CostInsightsThemeProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA0BA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,IAAM,EAAA;AAAA,IACJ,QAAU,EAAA,aAAA;AAAA,IACV,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,GAC1B;AACF,CAAE,CAAA,CAAA,CAAA;AAMK,MAAM,0BAA0B,CAAC;AAAA,EACtC,KAAA;AAAA,EACA,QAAA;AACF,CAAuD,KAAA;AACrD,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,iDACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,sCACE,gBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,eAAA;AAAA,MACN,iBAAmB,EAAA,KAAA;AAAA,MACnB,IAAK,EAAA,MAAA;AAAA,KAAA;AAAA,GAEP,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAU,EAAA,EAAA,QAAA,EAAS,IAAK,EAAA,cAAA,EAAc,IAAC,EAAA,SAAA,EAAW,OAAQ,CAAA,IAAA,EAAA,kBACxD,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,IAAI,CACP,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,UAAA;AAAA,MACR,SAAA,sCAAY,eAAgB,EAAA,IAAA,CAAA;AAAA,MAC5B,IAAK,EAAA,gBAAA;AAAA,KAAA;AAAA,IACN,uBAAA;AAAA,GAGH,CACC,EAAA,QACH,CACF,CACF,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/BarChart/BarChart.esm.js

@@ -0,0 +1,167 @@
+import React, { useState, useCallback } from 'react';
+import { ResponsiveContainer, BarChart as BarChart$1, Tooltip, CartesianGrid, XAxis, YAxis, Bar } from 'recharts';
+import Box from '@material-ui/core/Box';
+import { useTheme } from '@material-ui/core/styles';
+import { BarChartTick } from './BarChartTick.esm.js';
+import { BarChartStepper } from './BarChartStepper.esm.js';
+import { BarChartTooltip } from './BarChartTooltip.esm.js';
+import { BarChartTooltipItem } from './BarChartTooltipItem.esm.js';
+import { currencyFormatter } from '../../utils/formatters.esm.js';
+import { DataKey } from '../../types/Alert.esm.js';
+import { notEmpty } from '../../utils/assert.esm.js';
+import { useBarChartStyles } from '../../utils/styles.esm.js';
+import { resourceSort } from '../../utils/sort.esm.js';
+import { isInvalid, tooltipItemOf, titleOf } from '../../utils/graphs.esm.js';
+import { useConfig } from '../../hooks/useConfig.esm.js';
+import '../../hooks/useCurrency.esm.js';
+import '../../hooks/useFilters.esm.js';
+import '../../hooks/useGroups.esm.js';
+import '../../hooks/useLoading.esm.js';
+import '../../hooks/useScroll.esm.js';
+import '../../hooks/useLastCompleteBillingDate.esm.js';
+
+const defaultTooltip = (baseCurrency) => {
+  const tooltip = ({ label, payload = [] }) => {
+    if (isInvalid({ label, payload })) return null;
+    const title = titleOf(label);
+    const items = payload.map(tooltipItemOf(baseCurrency)).filter(notEmpty);
+    return /* @__PURE__ */ React.createElement(BarChartTooltip, { title }, items.map((item, index) => /* @__PURE__ */ React.createElement(BarChartTooltipItem, { key: `${item.label}-${index}`, item })));
+  };
+  return tooltip;
+};
+const BarChart = (props) => {
+  const { baseCurrency } = useConfig();
+  const {
+    resources,
+    responsive = true,
+    displayAmount = 6,
+    options = {},
+    tooltip = defaultTooltip(baseCurrency),
+    onClick,
+    onMouseMove
+  } = props;
+  const theme = useTheme();
+  const styles = useBarChartStyles(theme);
+  const [activeChart, setActiveChart] = useState(false);
+  const [stepWindow, setStepWindow] = useState(() => [0, displayAmount]);
+  const data = Object.assign(
+    {
+      previousFill: theme.palette.lightBlue,
+      currentFill: theme.palette.darkBlue,
+      previousName: "Previous",
+      currentName: "Current"
+    },
+    options
+  );
+  const [stepStart, stepEnd] = stepWindow;
+  const steps = Math.ceil(resources.length / displayAmount);
+  const disableStepper = resources.length <= displayAmount;
+  const sortedResources = resources.sort(resourceSort).slice(stepStart, stepEnd);
+  const globalResourcesMax = resources.reduce(
+    (max, r) => Math.max(max, r.current, r.previous),
+    0
+  );
+  const onStepChange = useCallback(
+    (activeStep) => {
+      const start = activeStep * displayAmount;
+      const end = start + displayAmount;
+      if (end > resources.length) {
+        setStepWindow([start, resources.length]);
+      } else {
+        setStepWindow([start, end]);
+      }
+    },
+    [setStepWindow, resources, displayAmount]
+  );
+  return /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      position: "relative",
+      onMouseLeave: () => setActiveChart(false),
+      onMouseEnter: () => setActiveChart(true),
+      "data-testid": "bar-chart-wrapper"
+    },
+    /* @__PURE__ */ React.createElement(
+      ResponsiveContainer,
+      {
+        height: styles.container.height,
+        width: responsive ? "100%" : styles.container.width
+      },
+      /* @__PURE__ */ React.createElement(
+        BarChart$1,
+        {
+          style: { cursor: onClick ? "pointer" : null },
+          onClick,
+          onMouseMove,
+          data: sortedResources,
+          margin: styles.barChart.margin,
+          barSize: 45,
+          "data-testid": "bar-chart"
+        },
+        tooltip && /* @__PURE__ */ React.createElement(
+          Tooltip,
+          {
+            filterNull: true,
+            cursor: styles.cursor,
+            animationDuration: 100,
+            content: tooltip
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          CartesianGrid,
+          {
+            vertical: false,
+            stroke: styles.cartesianGrid.stroke
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          XAxis,
+          {
+            dataKey: DataKey.Name,
+            tickLine: false,
+            interval: 0,
+            height: styles.xAxis.height,
+            tick: BarChartTick
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          YAxis,
+          {
+            tickFormatter: currencyFormatter(baseCurrency).format,
+            domain: [() => 0, globalResourcesMax],
+            tick: styles.axis
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          Bar,
+          {
+            dataKey: DataKey.Previous,
+            name: data.previousName,
+            fill: data.previousFill,
+            isAnimationActive: false
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          Bar,
+          {
+            dataKey: DataKey.Current,
+            name: data.currentName,
+            fill: data.currentFill,
+            isAnimationActive: false
+          }
+        )
+      )
+    ),
+    !disableStepper && /* @__PURE__ */ React.createElement(
+      BarChartStepper,
+      {
+        steps,
+        disableScroll: !activeChart,
+        onChange: onStepChange
+      }
+    )
+  );
+};
+
+export { BarChart };
+//# sourceMappingURL=BarChart.esm.js.map

package/dist/components/BarChart/BarChart.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.esm.js","sources":["../../../src/components/BarChart/BarChart.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport React, { useState, useCallback } from 'react';\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  Tooltip as RechartsTooltip,\n  ResponsiveContainer,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport Box from '@material-ui/core/Box';\nimport { useTheme } from '@material-ui/core/styles';\nimport { BarChartTick } from './BarChartTick';\nimport { BarChartStepper } from './BarChartStepper';\nimport { BarChartTooltip } from './BarChartTooltip';\nimport { BarChartTooltipItem } from './BarChartTooltipItem';\nimport { currencyFormatter } from '../../utils/formatters';\nimport {\n  ResourceData,\n  DataKey,\n  CostInsightsTheme,\n  BarChartOptions,\n} from '../../types';\nimport { notEmpty } from '../../utils/assert';\nimport { useBarChartStyles } from '../../utils/styles';\nimport { resourceSort } from '../../utils/sort';\nimport { isInvalid, titleOf, tooltipItemOf } from '../../utils/graphs';\nimport { TooltipRenderer } from '../../types';\nimport { useConfig } from '../../hooks';\n\nconst defaultTooltip = (baseCurrency: Intl.NumberFormat) => {\n  const tooltip: TooltipRenderer = ({ label, payload = [] }) => {\n    if (isInvalid({ label, payload })) return null;\n\n    const title = titleOf(label);\n    const items = payload.map(tooltipItemOf(baseCurrency)).filter(notEmpty);\n    return (\n      <BarChartTooltip title={title}>\n        {items.map((item, index) => (\n          <BarChartTooltipItem key={`${item.label}-${index}`} item={item} />\n        ))}\n      </BarChartTooltip>\n    );\n  };\n  return tooltip;\n};\n\n/** @public */\nexport type BarChartProps = {\n  resources: ResourceData[];\n  responsive?: boolean;\n  displayAmount?: number;\n  options?: Partial<BarChartOptions>;\n  tooltip?: TooltipRenderer;\n  onClick?: (...args: any[]) => void;\n  onMouseMove?: (...args: any[]) => void;\n};\n\n/** @public */\nexport const BarChart = (props: BarChartProps) => {\n  const { baseCurrency } = useConfig();\n\n  const {\n    resources,\n    responsive = true,\n    displayAmount = 6,\n    options = {},\n    tooltip = defaultTooltip(baseCurrency),\n    onClick,\n    onMouseMove,\n  } = props;\n\n  const theme = useTheme<CostInsightsTheme>();\n  const styles = useBarChartStyles(theme);\n  const [activeChart, setActiveChart] = useState(false);\n  const [stepWindow, setStepWindow] = useState(() => [0, displayAmount]);\n\n  const data = Object.assign(\n    {\n      previousFill: theme.palette.lightBlue,\n      currentFill: theme.palette.darkBlue,\n      previousName: 'Previous',\n      currentName: 'Current',\n    },\n    options,\n  );\n\n  const [stepStart, stepEnd] = stepWindow;\n  const steps = Math.ceil(resources.length / displayAmount);\n  const disableStepper = resources.length <= displayAmount;\n\n  const sortedResources = resources\n    .sort(resourceSort)\n    .slice(stepStart, stepEnd);\n\n  // Pin the domain to the largest value in the series.\n  // Intentionally redundant - This could simply be derived from the first element in the already sorted list,\n  // but that may not be the case in the future when custom sorting is implemented.\n  const globalResourcesMax = resources.reduce(\n    (max, r: ResourceData) => Math.max(max, r.current, r.previous),\n    0,\n  );\n\n  const onStepChange = useCallback(\n    (activeStep: number) => {\n      const start = activeStep * displayAmount;\n      const end = start + displayAmount;\n      if (end > resources.length) {\n        setStepWindow([start, resources.length]);\n      } else {\n        setStepWindow([start, end]);\n      }\n    },\n    [setStepWindow, resources, displayAmount],\n  );\n\n  return (\n    <Box\n      position=\"relative\"\n      onMouseLeave={() => setActiveChart(false)}\n      onMouseEnter={() => setActiveChart(true)}\n      data-testid=\"bar-chart-wrapper\"\n    >\n      {/* Setting fixed values for height and width generates a console warning in testing but enables ResponsiveContainer to render its children. */}\n      <ResponsiveContainer\n        height={styles.container.height}\n        width={responsive ? '100%' : styles.container.width}\n      >\n        <RechartsBarChart\n          style={{ cursor: onClick ? 'pointer' : null }}\n          onClick={onClick}\n          onMouseMove={onMouseMove}\n          data={sortedResources}\n          margin={styles.barChart.margin}\n          barSize={45}\n          data-testid=\"bar-chart\"\n        >\n          {tooltip && (\n            <RechartsTooltip\n              filterNull\n              cursor={styles.cursor}\n              animationDuration={100}\n              content={tooltip}\n            />\n          )}\n          <CartesianGrid\n            vertical={false}\n            stroke={styles.cartesianGrid.stroke}\n          />\n          <XAxis\n            dataKey={DataKey.Name}\n            tickLine={false}\n            interval={0}\n            height={styles.xAxis.height}\n            tick={BarChartTick}\n          />\n          <YAxis\n            tickFormatter={currencyFormatter(baseCurrency).format}\n            domain={[() => 0, globalResourcesMax]}\n            tick={styles.axis}\n          />\n          <Bar\n            dataKey={DataKey.Previous}\n            name={data.previousName}\n            fill={data.previousFill}\n            isAnimationActive={false}\n          />\n          <Bar\n            dataKey={DataKey.Current}\n            name={data.currentName}\n            fill={data.currentFill}\n            isAnimationActive={false}\n          />\n        </RechartsBarChart>\n      </ResponsiveContainer>\n      {!disableStepper && (\n        <BarChartStepper\n          steps={steps}\n          disableScroll={!activeChart}\n          onChange={onStepChange}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":["RechartsBarChart","RechartsTooltip"],"mappings":"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"}

package/dist/components/BarChart/BarChartLabel.esm.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import { useBarChartLabelStyles } from '../../utils/styles.esm.js';
+
+const BarChartLabel = ({
+  x,
+  y,
+  height,
+  width,
+  details,
+  children
+}) => {
+  const classes = useBarChartLabelStyles();
+  const translateX = width * -0.5;
+  return /* @__PURE__ */ React.createElement(
+    "foreignObject",
+    {
+      className: classes.foreignObject,
+      style: { transform: `translateX(${translateX}px)` },
+      x,
+      y,
+      height,
+      width
+    },
+    /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center" }, /* @__PURE__ */ React.createElement(Typography, { className: classes.label, gutterBottom: true }, children), details)
+  );
+};
+
+export { BarChartLabel };
+//# sourceMappingURL=BarChartLabel.esm.js.map

package/dist/components/BarChart/BarChartLabel.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChartLabel.esm.js","sources":["../../../src/components/BarChart/BarChartLabel.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport React, { PropsWithChildren } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\nimport { useBarChartLabelStyles } from '../../utils/styles';\n\ntype BarChartLabelProps = {\n  x: number;\n  y: number;\n  height: number;\n  width: number;\n  details?: JSX.Element;\n};\n\nexport const BarChartLabel = ({\n  x,\n  y,\n  height,\n  width,\n  details,\n  children,\n}: PropsWithChildren<BarChartLabelProps>) => {\n  const classes = useBarChartLabelStyles();\n  const translateX = width * -0.5;\n\n  return (\n    <foreignObject\n      className={classes.foreignObject}\n      style={{ transform: `translateX(${translateX}px)` }}\n      x={x}\n      y={y}\n      height={height}\n      width={width}\n    >\n      <Box display=\"flex\" flexDirection=\"column\" justifyContent=\"center\">\n        <Typography className={classes.label} gutterBottom>\n          {children}\n        </Typography>\n        {details}\n      </Box>\n    </foreignObject>\n  );\n};\n"],"names":[],"mappings":";;;;;AA6BO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,CAAA;AAAA,EACA,CAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AACF,CAA6C,KAAA;AAC3C,EAAA,MAAM,UAAU,sBAAuB,EAAA,CAAA;AACvC,EAAA,MAAM,aAAa,KAAQ,GAAA,CAAA,GAAA,CAAA;AAE3B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,aAAA;AAAA,MACnB,KAAO,EAAA,EAAE,SAAW,EAAA,CAAA,WAAA,EAAc,UAAU,CAAM,GAAA,CAAA,EAAA;AAAA,MAClD,CAAA;AAAA,MACA,CAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,KAAA;AAAA,wCAEC,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,aAAA,EAAc,UAAS,cAAe,EAAA,QAAA,EAAA,kBACvD,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,WAAW,OAAQ,CAAA,KAAA,EAAO,cAAY,IAC/C,EAAA,EAAA,QACH,GACC,OACH,CAAA;AAAA,GACF,CAAA;AAEJ;;;;"}