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

package/dist/components/ProductInsights/ProductInsights.esm.js

@@ -0,0 +1,98 @@
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import Alert from '@material-ui/lab/Alert';
+import { costInsightsApiRef } from '../../api/CostInsightsApi.esm.js';
+import { ProductInsightsCardList } from '../ProductInsightsCard/ProductInsightsCardList.esm.js';
+import { intervalsOf, DEFAULT_DURATION } from '../../utils/duration.esm.js';
+import { DefaultLoadingAction, settledResponseOf, initialStatesOf } from '../../utils/loading.esm.js';
+import { totalAggregationSort } from '../../utils/sort.esm.js';
+import '../../hooks/useConfig.esm.js';
+import '../../hooks/useCurrency.esm.js';
+import '../../hooks/useFilters.esm.js';
+import '../../hooks/useGroups.esm.js';
+import { useLoading } from '../../hooks/useLoading.esm.js';
+import '../../hooks/useScroll.esm.js';
+import { useLastCompleteBillingDate } from '../../hooks/useLastCompleteBillingDate.esm.js';
+import { useApi } from '@backstage/core-plugin-api';
+
+const mapLoadingToProps = ({ dispatch }) => (isLoading) => dispatch({ [DefaultLoadingAction.CostInsightsProducts]: isLoading });
+const ProductInsights = ({
+  group,
+  project,
+  products,
+  onLoaded
+}) => {
+  const client = useApi(costInsightsApiRef);
+  const onceRef = useRef(false);
+  const [initialStates, setStates] = useState([]);
+  const [error, setError] = useState(null);
+  const lastCompleteBillingDate = useLastCompleteBillingDate();
+  const dispatchLoading = useLoading(mapLoadingToProps);
+  const dispatchLoadingProducts = useCallback(dispatchLoading, []);
+  const onSelectAsyncMemo = useCallback(
+    async function onSelectAsync(product, duration) {
+      return client.getProductInsights({
+        group,
+        project,
+        product: product.kind,
+        intervals: intervalsOf(duration, lastCompleteBillingDate)
+      });
+    },
+    [client, group, project, lastCompleteBillingDate]
+  );
+  useEffect(() => {
+    async function getAllProductInsights() {
+      try {
+        dispatchLoadingProducts(true);
+        const responses = await Promise.allSettled(
+          products.map(
+            (product) => client.getProductInsights({
+              group,
+              project,
+              product: product.kind,
+              intervals: intervalsOf(DEFAULT_DURATION, lastCompleteBillingDate)
+            })
+          )
+        ).then(settledResponseOf);
+        const updatedInitialStates = initialStatesOf(products, responses).sort(
+          totalAggregationSort
+        );
+        setStates(updatedInitialStates);
+      } catch (e) {
+        setError(e);
+      } finally {
+        dispatchLoadingProducts(false);
+      }
+    }
+    getAllProductInsights();
+  }, [
+    client,
+    group,
+    project,
+    products,
+    lastCompleteBillingDate,
+    dispatchLoadingProducts
+  ]);
+  useEffect(
+    function handleOnLoaded() {
+      if (onceRef.current) {
+        const initialProducts = initialStates.map((state) => state.product);
+        onLoaded(initialProducts);
+      } else {
+        onceRef.current = true;
+      }
+    },
+    [initialStates, onLoaded]
+  );
+  return /* @__PURE__ */ React.createElement(Box, { px: 3, py: 6 }, /* @__PURE__ */ React.createElement(Box, { mt: 0, mb: 5, textAlign: "center" }, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", gutterBottom: true }, "Your team's product usage")), error ? /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, error.message) : /* @__PURE__ */ React.createElement(
+    ProductInsightsCardList,
+    {
+      initialStates,
+      onSelectAsync: onSelectAsyncMemo
+    }
+  ));
+};
+
+export { ProductInsights };
+//# sourceMappingURL=ProductInsights.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductInsights.esm.js","sources":["../../../src/components/ProductInsights/ProductInsights.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, { useCallback, useEffect, useRef, useState } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\nimport { default as Alert } from '@material-ui/lab/Alert';\nimport { costInsightsApiRef } from '../../api';\nimport { ProductInsightsCardList } from '../ProductInsightsCard/ProductInsightsCardList';\nimport { Duration } from '../../types';\nimport {\n  Entity,\n  Maybe,\n  Product,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { intervalsOf, DEFAULT_DURATION } from '../../utils/duration';\nimport {\n  DefaultLoadingAction,\n  initialStatesOf,\n  settledResponseOf,\n  ProductState,\n} from '../../utils/loading';\nimport { totalAggregationSort } from '../../utils/sort';\nimport {\n  useLoading,\n  useLastCompleteBillingDate,\n  MapLoadingToProps,\n} from '../../hooks';\nimport { useApi } from '@backstage/core-plugin-api';\n\ntype LoadingProps = (isLoading: boolean) => void;\n\nconst mapLoadingToProps: MapLoadingToProps<LoadingProps> =\n  ({ dispatch }) =>\n  (isLoading: boolean) =>\n    dispatch({ [DefaultLoadingAction.CostInsightsProducts]: isLoading });\n\ntype ProductInsightsProps = {\n  group: string;\n  project: Maybe<string>;\n  products: Product[];\n  onLoaded: (entities: Product[]) => void;\n};\n\nexport const ProductInsights = ({\n  group,\n  project,\n  products,\n  onLoaded,\n}: ProductInsightsProps) => {\n  const client = useApi(costInsightsApiRef);\n  const onceRef = useRef(false);\n  const [initialStates, setStates] = useState<ProductState[]>([]);\n  const [error, setError] = useState<Maybe<Error>>(null);\n  const lastCompleteBillingDate = useLastCompleteBillingDate();\n  const dispatchLoading = useLoading(mapLoadingToProps);\n\n  /* eslint-disable react-hooks/exhaustive-deps */\n  // See @CostInsightsPage\n  const dispatchLoadingProducts = useCallback(dispatchLoading, []);\n  /* eslint-enable react-hooks/exhaustive-deps */\n\n  const onSelectAsyncMemo = useCallback(\n    async function onSelectAsync(\n      product: Product,\n      duration: Duration,\n    ): Promise<Entity> {\n      return client.getProductInsights({\n        group: group,\n        project: project,\n        product: product.kind,\n        intervals: intervalsOf(duration, lastCompleteBillingDate),\n      });\n    },\n    [client, group, project, lastCompleteBillingDate],\n  );\n\n  useEffect(() => {\n    async function getAllProductInsights() {\n      try {\n        dispatchLoadingProducts(true);\n        const responses = await Promise.allSettled(\n          products.map(product =>\n            client.getProductInsights({\n              group: group,\n              project: project,\n              product: product.kind,\n              intervals: intervalsOf(DEFAULT_DURATION, lastCompleteBillingDate),\n            }),\n          ),\n        ).then(settledResponseOf);\n\n        const updatedInitialStates = initialStatesOf(products, responses).sort(\n          totalAggregationSort,\n        );\n        setStates(updatedInitialStates);\n      } catch (e) {\n        setError(e);\n      } finally {\n        dispatchLoadingProducts(false);\n      }\n    }\n\n    getAllProductInsights();\n  }, [\n    client,\n    group,\n    project,\n    products,\n    lastCompleteBillingDate,\n    dispatchLoadingProducts,\n  ]);\n\n  useEffect(\n    function handleOnLoaded() {\n      if (onceRef.current) {\n        const initialProducts = initialStates.map(state => state.product);\n        onLoaded(initialProducts);\n      } else {\n        onceRef.current = true;\n      }\n    },\n    [initialStates, onLoaded],\n  );\n\n  return (\n    <Box px={3} py={6}>\n      <Box mt={0} mb={5} textAlign=\"center\">\n        <Typography variant=\"h4\" gutterBottom>\n          Your team's product usage\n        </Typography>\n      </Box>\n      {error ? (\n        <Alert severity=\"error\">{error.message}</Alert>\n      ) : (\n        <ProductInsightsCardList\n          initialStates={initialStates}\n          onSelectAsync={onSelectAsyncMemo}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ProductInsightsCard/ProductEntityDialog.esm.js

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import Dialog from '@material-ui/core/Dialog';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+import { useEntityDialogStyles } from '../../utils/styles.esm.js';
+import { ProductEntityTable } from './ProductEntityTable.esm.js';
+import { findAlways } from '../../utils/assert.esm.js';
+import { HeaderTabs } from '@backstage/core-components';
+
+const ProductEntityDialog = ({
+  open,
+  entity,
+  options = {},
+  onClose
+}) => {
+  const classes = useEntityDialogStyles();
+  const labels = Object.keys(entity.entities);
+  const [selectedLabel, setSelectedLabel] = useState(
+    findAlways(labels, (_) => true)
+  );
+  const tabs = labels.map((label, index) => ({
+    id: index.toString(),
+    label: `Breakdown by ${label}`
+  }));
+  return /* @__PURE__ */ React.createElement(Dialog, { open, onClose, scroll: "body", fullWidth: true, maxWidth: "lg" }, /* @__PURE__ */ React.createElement(IconButton, { className: classes.closeButton, onClick: onClose }, /* @__PURE__ */ React.createElement(CloseIcon, null)), /* @__PURE__ */ React.createElement(
+    HeaderTabs,
+    {
+      tabs,
+      onChange: (index) => setSelectedLabel(labels[index])
+    }
+  ), /* @__PURE__ */ React.createElement(
+    ProductEntityTable,
+    {
+      entityLabel: selectedLabel,
+      entity,
+      options
+    }
+  ));
+};
+
+export { ProductEntityDialog };
+//# sourceMappingURL=ProductEntityDialog.esm.js.map

package/dist/components/ProductInsightsCard/ProductEntityDialog.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductEntityDialog.esm.js","sources":["../../../src/components/ProductInsightsCard/ProductEntityDialog.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 } from 'react';\nimport Dialog from '@material-ui/core/Dialog';\nimport IconButton from '@material-ui/core/IconButton';\nimport { default as CloseButton } from '@material-ui/icons/Close';\nimport { useEntityDialogStyles as useStyles } from '../../utils/styles';\nimport { Entity } from '@backstage-community/plugin-cost-insights-common';\nimport {\n  ProductEntityTable,\n  ProductEntityTableOptions,\n} from './ProductEntityTable';\nimport { findAlways } from '../../utils/assert';\nimport { HeaderTabs } from '@backstage/core-components';\n\ntype ProductEntityDialogProps = {\n  open: boolean;\n  entity: Entity;\n  options?: ProductEntityTableOptions;\n  onClose: () => void;\n};\n\nexport const ProductEntityDialog = ({\n  open,\n  entity,\n  options = {},\n  onClose,\n}: ProductEntityDialogProps) => {\n  const classes = useStyles();\n  const labels = Object.keys(entity.entities);\n  const [selectedLabel, setSelectedLabel] = useState(\n    findAlways(labels, _ => true),\n  );\n\n  const tabs = labels.map((label, index) => ({\n    id: index.toString(),\n    label: `Breakdown by ${label}`,\n  }));\n\n  return (\n    <Dialog open={open} onClose={onClose} scroll=\"body\" fullWidth maxWidth=\"lg\">\n      <IconButton className={classes.closeButton} onClick={onClose}>\n        <CloseButton />\n      </IconButton>\n      <HeaderTabs\n        tabs={tabs}\n        onChange={index => setSelectedLabel(labels[index])}\n      />\n      <ProductEntityTable\n        entityLabel={selectedLabel}\n        entity={entity}\n        options={options}\n      />\n    </Dialog>\n  );\n};\n"],"names":["useStyles","CloseButton"],"mappings":";;;;;;;;;AAoCO,MAAM,sBAAsB,CAAC;AAAA,EAClC,IAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAU,EAAC;AAAA,EACX,OAAA;AACF,CAAgC,KAAA;AAC9B,EAAA,MAAM,UAAUA,qBAAU,EAAA,CAAA;AAC1B,EAAA,MAAM,MAAS,GAAA,MAAA,CAAO,IAAK,CAAA,MAAA,CAAO,QAAQ,CAAA,CAAA;AAC1C,EAAM,MAAA,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAA,QAAA;AAAA,IACxC,UAAA,CAAW,MAAQ,EAAA,CAAA,CAAA,KAAK,IAAI,CAAA;AAAA,GAC9B,CAAA;AAEA,EAAA,MAAM,IAAO,GAAA,MAAA,CAAO,GAAI,CAAA,CAAC,OAAO,KAAW,MAAA;AAAA,IACzC,EAAA,EAAI,MAAM,QAAS,EAAA;AAAA,IACnB,KAAA,EAAO,gBAAgB,KAAK,CAAA,CAAA;AAAA,GAC5B,CAAA,CAAA,CAAA;AAEF,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,UAAO,IAAY,EAAA,OAAA,EAAkB,QAAO,MAAO,EAAA,SAAA,EAAS,MAAC,QAAS,EAAA,IAAA,EAAA,sCACpE,UAAW,EAAA,EAAA,SAAA,EAAW,QAAQ,WAAa,EAAA,OAAA,EAAS,2BAClD,KAAA,CAAA,aAAA,CAAAC,SAAA,EAAA,IAAY,CACf,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,QAAU,EAAA,CAAA,KAAA,KAAS,gBAAiB,CAAA,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA,KAAA;AAAA,GAEnD,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,WAAa,EAAA,aAAA;AAAA,MACb,MAAA;AAAA,MACA,OAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/ProductInsightsCard/ProductEntityTable.esm.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import classnames from 'classnames';
+import Typography from '@material-ui/core/Typography';
+import { formatChange } from '../../utils/formatters.esm.js';
+import { useEntityDialogStyles } from '../../utils/styles.esm.js';
+import '../../types/Alert.esm.js';
+import '../../utils/currency.esm.js';
+import 'luxon';
+import '../../utils/duration.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';
+import { CostGrowthIndicator } from '../CostGrowth/CostGrowthIndicator.esm.js';
+import { Table } from '@backstage/core-components';
+
+const createRenderer = (baseCurrency) => (col, classes) => {
+  return function render(rowData) {
+    const row = rowData;
+    const rowStyles = classnames(classes.row, {
+      [classes.rowTotal]: row.id === "total",
+      [classes.colFirst]: col === "label",
+      [classes.colLast]: col === "change"
+    });
+    switch (col) {
+      case "previous":
+      case "current":
+        return /* @__PURE__ */ React.createElement(Typography, { className: rowStyles }, baseCurrency.format(row[col]));
+      case "change":
+        return /* @__PURE__ */ React.createElement(
+          CostGrowthIndicator,
+          {
+            className: rowStyles,
+            change: row.change,
+            formatter: formatChange
+          }
+        );
+      default:
+        return /* @__PURE__ */ React.createElement(Typography, { className: rowStyles }, row.label);
+    }
+  };
+};
+function createSorter(field) {
+  return function rowSort(data1, data2) {
+    const a = data1;
+    const b = data2;
+    if (a.id === "total") return 1;
+    if (b.id === "total") return 1;
+    if (field === "label") return a.label.localeCompare(b.label);
+    if (field === "change") {
+      if (formatChange(a[field]) === "\u221E" || formatChange(b[field]) === "-\u221E")
+        return 1;
+      if (formatChange(a[field]) === "-\u221E" || formatChange(b[field]) === "\u221E")
+        return -1;
+      return a[field].ratio - b[field].ratio;
+    }
+    return b.previous + b.current - (a.previous + a.current);
+  };
+}
+const ProductEntityTable = ({
+  entityLabel,
+  entity,
+  options
+}) => {
+  const classes = useEntityDialogStyles();
+  const { baseCurrency } = useConfig();
+  const entities = entity.entities[entityLabel];
+  const data = Object.assign(
+    {
+      previousName: "Previous",
+      currentName: "Current"
+    },
+    options
+  );
+  const firstColClasses = classnames(classes.column, classes.colFirst);
+  const lastColClasses = classnames(classes.column, classes.colLast);
+  const columns = [
+    {
+      field: "label",
+      title: /* @__PURE__ */ React.createElement(Typography, { className: firstColClasses }, entityLabel),
+      render: createRenderer(baseCurrency)("label", classes),
+      customSort: createSorter("label"),
+      width: "33.33%"
+    },
+    {
+      field: "previous",
+      title: /* @__PURE__ */ React.createElement(Typography, { className: classes.column }, data.previousName),
+      align: "right",
+      render: createRenderer(baseCurrency)("previous", classes),
+      customSort: createSorter("previous")
+    },
+    {
+      field: "current",
+      title: /* @__PURE__ */ React.createElement(Typography, { className: classes.column }, data.currentName),
+      align: "right",
+      render: createRenderer(baseCurrency)("current", classes),
+      customSort: createSorter("current")
+    },
+    {
+      field: "change",
+      title: /* @__PURE__ */ React.createElement(Typography, { className: lastColClasses }, "Change"),
+      align: "right",
+      render: createRenderer(baseCurrency)("change", classes),
+      customSort: createSorter("change")
+    }
+  ];
+  const rowData = entities.map((e) => ({
+    id: e.id || "Unknown",
+    label: e.id || "Unknown",
+    previous: e.aggregation[0],
+    current: e.aggregation[1],
+    change: e.change
+  })).concat({
+    id: "total",
+    label: "Total",
+    previous: entity.aggregation[0],
+    current: entity.aggregation[1],
+    change: entity.change
+  }).sort(createSorter());
+  return /* @__PURE__ */ React.createElement(
+    Table,
+    {
+      columns,
+      data: rowData,
+      title: entity.id || "Unlabeled",
+      options: {
+        paging: false,
+        search: false,
+        hideFilterIcons: true
+      }
+    }
+  );
+};
+
+export { ProductEntityTable };
+//# sourceMappingURL=ProductEntityTable.esm.js.map

package/dist/components/ProductInsightsCard/ProductEntityTable.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductEntityTable.esm.js","sources":["../../../src/components/ProductInsightsCard/ProductEntityTable.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 classnames from 'classnames';\nimport Typography from '@material-ui/core/Typography';\nimport { formatChange } from '../../utils/formatters';\nimport { useEntityDialogStyles as useStyles } from '../../utils/styles';\nimport { CostGrowthIndicator } from '../CostGrowth';\nimport { BarChartOptions } from '../../types';\nimport {\n  ChangeStatistic,\n  Entity,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { Table, TableColumn } from '@backstage/core-components';\nimport { useConfig } from '../../hooks';\n\nexport type ProductEntityTableOptions = Partial<\n  Pick<BarChartOptions, 'previousName' | 'currentName'>\n>;\n\ntype RowData = {\n  id: string;\n  label: string;\n  previous: number;\n  current: number;\n  change: ChangeStatistic;\n};\n\nconst createRenderer =\n  (baseCurrency: Intl.NumberFormat) =>\n  (col: keyof RowData, classes: Record<string, string>) => {\n    return function render(rowData: {}): JSX.Element {\n      const row = rowData as RowData;\n      const rowStyles = classnames(classes.row, {\n        [classes.rowTotal]: row.id === 'total',\n        [classes.colFirst]: col === 'label',\n        [classes.colLast]: col === 'change',\n      });\n\n      switch (col) {\n        case 'previous':\n        case 'current':\n          return (\n            <Typography className={rowStyles}>\n              {baseCurrency.format(row[col])}\n            </Typography>\n          );\n        case 'change':\n          return (\n            <CostGrowthIndicator\n              className={rowStyles}\n              change={row.change}\n              formatter={formatChange}\n            />\n          );\n        default:\n          return <Typography className={rowStyles}>{row.label}</Typography>;\n      }\n    };\n  };\n\n// material-table does not support fixed rows. Override the sorting algorithm\n// to force Total row to bottom by default or when a user sort toggles a column.\nfunction createSorter(field?: keyof Omit<RowData, 'id'>) {\n  return function rowSort(data1: {}, data2: {}): number {\n    const a = data1 as RowData;\n    const b = data2 as RowData;\n    if (a.id === 'total') return 1;\n    if (b.id === 'total') return 1;\n    if (field === 'label') return a.label.localeCompare(b.label);\n    if (field === 'change') {\n      if (formatChange(a[field]) === '∞' || formatChange(b[field]) === '-∞')\n        return 1;\n      if (formatChange(a[field]) === '-∞' || formatChange(b[field]) === '∞')\n        return -1;\n      return a[field].ratio! - b[field].ratio!;\n    }\n\n    return b.previous + b.current - (a.previous + a.current);\n  };\n}\n\ntype ProductEntityTableProps = {\n  entityLabel: string;\n  entity: Entity;\n  options: ProductEntityTableOptions;\n};\n\nexport const ProductEntityTable = ({\n  entityLabel,\n  entity,\n  options,\n}: ProductEntityTableProps) => {\n  const classes = useStyles();\n  const { baseCurrency } = useConfig();\n  const entities = entity.entities[entityLabel];\n\n  const data = Object.assign(\n    {\n      previousName: 'Previous',\n      currentName: 'Current',\n    },\n    options,\n  );\n\n  const firstColClasses = classnames(classes.column, classes.colFirst);\n  const lastColClasses = classnames(classes.column, classes.colLast);\n\n  const columns: TableColumn[] = [\n    {\n      field: 'label',\n      title: <Typography className={firstColClasses}>{entityLabel}</Typography>,\n      render: createRenderer(baseCurrency)('label', classes),\n      customSort: createSorter('label'),\n      width: '33.33%',\n    },\n    {\n      field: 'previous',\n      title: (\n        <Typography className={classes.column}>{data.previousName}</Typography>\n      ),\n      align: 'right',\n      render: createRenderer(baseCurrency)('previous', classes),\n      customSort: createSorter('previous'),\n    },\n    {\n      field: 'current',\n      title: (\n        <Typography className={classes.column}>{data.currentName}</Typography>\n      ),\n      align: 'right',\n      render: createRenderer(baseCurrency)('current', classes),\n      customSort: createSorter('current'),\n    },\n    {\n      field: 'change',\n      title: <Typography className={lastColClasses}>Change</Typography>,\n      align: 'right',\n      render: createRenderer(baseCurrency)('change', classes),\n      customSort: createSorter('change'),\n    },\n  ];\n\n  const rowData: RowData[] = entities\n    .map(e => ({\n      id: e.id || 'Unknown',\n      label: e.id || 'Unknown',\n      previous: e.aggregation[0],\n      current: e.aggregation[1],\n      change: e.change,\n    }))\n    .concat({\n      id: 'total',\n      label: 'Total',\n      previous: entity.aggregation[0],\n      current: entity.aggregation[1],\n      change: entity.change,\n    })\n    .sort(createSorter());\n\n  return (\n    <Table\n      columns={columns}\n      data={rowData}\n      title={entity.id || 'Unlabeled'}\n      options={{\n        paging: false,\n        search: false,\n        hideFilterIcons: true,\n      }}\n    />\n  );\n};\n"],"names":["useStyles"],"mappings":"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"}

package/dist/components/ProductInsightsCard/ProductInsightsCard.esm.js

@@ -0,0 +1,83 @@
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import pluralize from 'pluralize';
+import Typography from '@material-ui/core/Typography';
+import Alert from '@material-ui/lab/Alert';
+import { PeriodSelect } from '../PeriodSelect/PeriodSelect.esm.js';
+import { ProductInsightsChart } from './ProductInsightsChart.esm.js';
+import { useProductInsightsCardStyles } from '../../utils/styles.esm.js';
+import { DefaultLoadingAction } from '../../utils/loading.esm.js';
+import '../../hooks/useConfig.esm.js';
+import '../../hooks/useCurrency.esm.js';
+import '../../hooks/useFilters.esm.js';
+import '../../hooks/useGroups.esm.js';
+import { useLoading } from '../../hooks/useLoading.esm.js';
+import '../../hooks/useScroll.esm.js';
+import { useLastCompleteBillingDate } from '../../hooks/useLastCompleteBillingDate.esm.js';
+import { findAnyKey } from '../../utils/assert.esm.js';
+import { ScrollAnchor } from '../../utils/scroll.esm.js';
+import { InfoCard } from '@backstage/core-components';
+
+const mapLoadingToProps = ({ dispatch }) => (isLoading) => dispatch({ [DefaultLoadingAction.CostInsightsProducts]: isLoading });
+const ProductInsightsCard = ({
+  initialState,
+  product,
+  onSelectAsync
+}) => {
+  const classes = useProductInsightsCardStyles();
+  const mountedRef = useRef(false);
+  const [error, setError] = useState(null);
+  const dispatchLoading = useLoading(mapLoadingToProps);
+  const lastCompleteBillingDate = useLastCompleteBillingDate();
+  const [entity, setEntity] = useState(initialState.entity);
+  const [duration, setDuration] = useState(initialState.duration);
+  const dispatchLoadingProduct = useCallback(dispatchLoading, []);
+  useEffect(() => {
+    async function handleOnSelectAsync() {
+      dispatchLoadingProduct(true);
+      try {
+        const e = await onSelectAsync(product, duration);
+        setEntity(e);
+      } catch (e) {
+        setEntity(null);
+        setError(e);
+      } finally {
+        dispatchLoadingProduct(false);
+      }
+    }
+    if (mountedRef.current) {
+      handleOnSelectAsync();
+    } else {
+      mountedRef.current = true;
+    }
+  }, [product, duration, onSelectAsync, dispatchLoadingProduct]);
+  const entityKey = findAnyKey(entity?.entities);
+  const entities = entityKey ? entity.entities[entityKey] : [];
+  const subheader = entityKey && entities.length ? `${pluralize(entityKey, entities.length, true)}, sorted by cost` : null;
+  const headerProps = {
+    classes,
+    action: /* @__PURE__ */ React.createElement(PeriodSelect, { duration, onSelect: setDuration })
+  };
+  if (error || !entity) {
+    return /* @__PURE__ */ React.createElement(InfoCard, { title: product.name, headerProps }, /* @__PURE__ */ React.createElement(ScrollAnchor, { id: product.kind }), /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, error ? error.message : `Error: Could not fetch product insights for ${product.name}`));
+  }
+  return /* @__PURE__ */ React.createElement(
+    InfoCard,
+    {
+      title: product.name,
+      subheader,
+      headerProps
+    },
+    /* @__PURE__ */ React.createElement(ScrollAnchor, { id: product.kind }),
+    entities.length ? /* @__PURE__ */ React.createElement(
+      ProductInsightsChart,
+      {
+        entity,
+        duration,
+        billingDate: lastCompleteBillingDate
+      }
+    ) : /* @__PURE__ */ React.createElement(Typography, null, "There are no ", product.name, " costs within this time frame for your team's projects.")
+  );
+};
+
+export { ProductInsightsCard };
+//# sourceMappingURL=ProductInsightsCard.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductInsightsCard.esm.js","sources":["../../../src/components/ProductInsightsCard/ProductInsightsCard.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, {\n  PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport pluralize from 'pluralize';\nimport Typography from '@material-ui/core/Typography';\nimport { default as Alert } from '@material-ui/lab/Alert';\nimport { PeriodSelect } from '../PeriodSelect';\nimport { ProductInsightsChart } from './ProductInsightsChart';\nimport { useProductInsightsCardStyles as useStyles } from '../../utils/styles';\nimport { DefaultLoadingAction } from '../../utils/loading';\nimport { Duration } from '../../types';\nimport {\n  Entity,\n  Maybe,\n  Product,\n} from '@backstage-community/plugin-cost-insights-common';\nimport {\n  MapLoadingToProps,\n  useLastCompleteBillingDate,\n  useLoading,\n} from '../../hooks';\nimport { findAnyKey } from '../../utils/assert';\nimport { ScrollAnchor } from '../../utils/scroll';\nimport { InfoCard } from '@backstage/core-components';\n\ntype LoadingProps = (isLoading: boolean) => void;\n\nexport type ProductInsightsCardProps = {\n  product: Product;\n  initialState: {\n    entity: Maybe<Entity>;\n    duration: Duration;\n  };\n  onSelectAsync: (product: Product, duration: Duration) => Promise<Entity>;\n};\n\nconst mapLoadingToProps: MapLoadingToProps<LoadingProps> =\n  ({ dispatch }) =>\n  (isLoading: boolean) =>\n    dispatch({ [DefaultLoadingAction.CostInsightsProducts]: isLoading });\n\nexport const ProductInsightsCard = ({\n  initialState,\n  product,\n  onSelectAsync,\n}: PropsWithChildren<ProductInsightsCardProps>) => {\n  const classes = useStyles();\n  const mountedRef = useRef(false);\n  const [error, setError] = useState<Maybe<Error>>(null);\n  const dispatchLoading = useLoading(mapLoadingToProps);\n  const lastCompleteBillingDate = useLastCompleteBillingDate();\n  const [entity, setEntity] = useState<Maybe<Entity>>(initialState.entity);\n  const [duration, setDuration] = useState<Duration>(initialState.duration);\n\n  /* eslint-disable react-hooks/exhaustive-deps */\n  const dispatchLoadingProduct = useCallback(dispatchLoading, []);\n  /* eslint-enable react-hooks/exhaustive-deps */\n\n  useEffect(() => {\n    async function handleOnSelectAsync() {\n      dispatchLoadingProduct(true);\n      try {\n        const e = await onSelectAsync(product, duration);\n        setEntity(e);\n      } catch (e) {\n        setEntity(null);\n        setError(e);\n      } finally {\n        dispatchLoadingProduct(false);\n      }\n    }\n\n    if (mountedRef.current) {\n      handleOnSelectAsync();\n    } else {\n      mountedRef.current = true;\n    }\n  }, [product, duration, onSelectAsync, dispatchLoadingProduct]);\n\n  // Only a single entities Record for the root product entity is supported\n  const entityKey = findAnyKey(entity?.entities);\n  const entities = entityKey ? entity!.entities[entityKey] : [];\n\n  const subheader =\n    entityKey && entities.length\n      ? `${pluralize(entityKey, entities.length, true)}, sorted by cost`\n      : null;\n  const headerProps = {\n    classes: classes,\n    action: <PeriodSelect duration={duration} onSelect={setDuration} />,\n  };\n\n  if (error || !entity) {\n    return (\n      <InfoCard title={product.name} headerProps={headerProps}>\n        <ScrollAnchor id={product.kind} />\n        <Alert severity=\"error\">\n          {error\n            ? error.message\n            : `Error: Could not fetch product insights for ${product.name}`}\n        </Alert>\n      </InfoCard>\n    );\n  }\n\n  return (\n    <InfoCard\n      title={product.name}\n      subheader={subheader}\n      headerProps={headerProps}\n    >\n      <ScrollAnchor id={product.kind} />\n      {entities.length ? (\n        <ProductInsightsChart\n          entity={entity}\n          duration={duration}\n          billingDate={lastCompleteBillingDate}\n        />\n      ) : (\n        <Typography>\n          There are no {product.name} costs within this time frame for your\n          team's projects.\n        </Typography>\n      )}\n    </InfoCard>\n  );\n};\n"],"names":["useStyles"],"mappings":"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"}

package/dist/components/ProductInsightsCard/ProductInsightsCardList.esm.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Box from '@material-ui/core/Box';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Collapse from '@material-ui/core/Collapse';
+import { ProductInsightsCard } from './ProductInsightsCard.esm.js';
+
+const ProductInsightsCardList = ({
+  initialStates,
+  onSelectAsync
+}) => {
+  if (!initialStates.length) {
+    return /* @__PURE__ */ React.createElement(Box, { display: "flex", justifyContent: "space-around", alignItems: "center" }, /* @__PURE__ */ React.createElement(CircularProgress, null));
+  }
+  return /* @__PURE__ */ React.createElement(Collapse, { in: true, timeout: 1e3 }, initialStates.map(({ product, entity, duration }) => /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      key: product.kind,
+      mb: 6,
+      position: "relative",
+      "data-testid": `product-list-item-${product.kind}`
+    },
+    /* @__PURE__ */ React.createElement(
+      ProductInsightsCard,
+      {
+        product,
+        onSelectAsync,
+        initialState: { entity, duration }
+      }
+    )
+  )));
+};
+
+export { ProductInsightsCardList };
+//# sourceMappingURL=ProductInsightsCardList.esm.js.map

package/dist/components/ProductInsightsCard/ProductInsightsCardList.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductInsightsCardList.esm.js","sources":["../../../src/components/ProductInsightsCard/ProductInsightsCardList.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 CircularProgress from '@material-ui/core/CircularProgress';\nimport Collapse from '@material-ui/core/Collapse';\nimport { ProductInsightsCard } from './ProductInsightsCard';\nimport { Duration } from '../../types';\nimport {\n  Entity,\n  Product,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { ProductState } from '../../utils/loading';\n\ntype ProductInsightsCardListProps = {\n  initialStates: ProductState[];\n  onSelectAsync: (product: Product, duration: Duration) => Promise<Entity>;\n};\n\nexport const ProductInsightsCardList = ({\n  initialStates,\n  onSelectAsync,\n}: ProductInsightsCardListProps) => {\n  if (!initialStates.length) {\n    return (\n      <Box display=\"flex\" justifyContent=\"space-around\" alignItems=\"center\">\n        <CircularProgress />\n      </Box>\n    );\n  }\n\n  return (\n    <Collapse in timeout={1000}>\n      {initialStates.map(({ product, entity, duration }) => (\n        <Box\n          key={product.kind}\n          mb={6}\n          position=\"relative\"\n          data-testid={`product-list-item-${product.kind}`}\n        >\n          <ProductInsightsCard\n            product={product}\n            onSelectAsync={onSelectAsync}\n            initialState={{ entity: entity, duration: duration }}\n          />\n        </Box>\n      ))}\n    </Collapse>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAiCO,MAAM,0BAA0B,CAAC;AAAA,EACtC,aAAA;AAAA,EACA,aAAA;AACF,CAAoC,KAAA;AAClC,EAAI,IAAA,CAAC,cAAc,MAAQ,EAAA;AACzB,IACE,uBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,cAAA,EAAe,gBAAe,UAAW,EAAA,QAAA,EAAA,kBAC1D,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,IAAiB,CACpB,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,EAAE,EAAA,IAAA,EAAC,OAAS,EAAA,GAAA,EAAA,EACnB,aAAc,CAAA,GAAA,CAAI,CAAC,EAAE,OAAS,EAAA,MAAA,EAAQ,UACrC,qBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,KAAK,OAAQ,CAAA,IAAA;AAAA,MACb,EAAI,EAAA,CAAA;AAAA,MACJ,QAAS,EAAA,UAAA;AAAA,MACT,aAAA,EAAa,CAAqB,kBAAA,EAAA,OAAA,CAAQ,IAAI,CAAA,CAAA;AAAA,KAAA;AAAA,oBAE9C,KAAA,CAAA,aAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,OAAA;AAAA,QACA,aAAA;AAAA,QACA,YAAA,EAAc,EAAE,MAAA,EAAgB,QAAmB,EAAA;AAAA,OAAA;AAAA,KACrD;AAAA,GAEH,CACH,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/ProductInsightsCard/ProductInsightsChart.esm.js

@@ -0,0 +1,148 @@
+import React, { useMemo, useState } from 'react';
+import pluralize from 'pluralize';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import FullScreenIcon from '@material-ui/icons/Fullscreen';
+import { LegendItem } from '../LegendItem/LegendItem.esm.js';
+import { ProductEntityDialog } from './ProductEntityDialog.esm.js';
+import { CostGrowth } from '../CostGrowth/CostGrowth.esm.js';
+import { CostGrowthIndicator } from '../CostGrowth/CostGrowthIndicator.esm.js';
+import { BarChart } from '../BarChart/BarChart.esm.js';
+import { BarChartLegend } from '../BarChart/BarChartLegend.esm.js';
+import { BarChartTooltip } from '../BarChart/BarChartTooltip.esm.js';
+import { BarChartTooltipItem } from '../BarChart/BarChartTooltipItem.esm.js';
+import { assertAlways, findAnyKey, isUndefined, findAlways, notEmpty } from '../../utils/assert.esm.js';
+import { formatPeriod, formatChange } from '../../utils/formatters.esm.js';
+import { resourceOf, isLabeled, isUnlabeled, isInvalid, tooltipItemOf, titleOf } from '../../utils/graphs.esm.js';
+import { useProductInsightsChartStyles, useBarChartLayoutStyles } from '../../utils/styles.esm.js';
+import { choose } from '../../utils/change.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 ProductInsightsChart = ({
+  billingDate,
+  entity,
+  duration
+}) => {
+  const classes = useProductInsightsChartStyles();
+  const layoutClasses = useBarChartLayoutStyles();
+  const { baseCurrency } = useConfig();
+  const entities = useMemo(() => {
+    const entityLabel = assertAlways(findAnyKey(entity.entities));
+    return entity.entities[entityLabel] ?? [];
+  }, [entity]);
+  const [activeLabel, setActive] = useState();
+  const [selectLabel, setSelected] = useState();
+  const isSelected = useMemo(() => !isUndefined(selectLabel), [selectLabel]);
+  const isClickable = useMemo(() => {
+    const breakdowns = Object.keys(
+      entities.find((e) => e.id === activeLabel)?.entities ?? {}
+    );
+    return breakdowns.length > 0;
+  }, [entities, activeLabel]);
+  const costStart = entity.aggregation[0];
+  const costEnd = entity.aggregation[1];
+  const resources = entities.map(resourceOf);
+  const options = {
+    previousName: formatPeriod(duration, billingDate, false),
+    currentName: formatPeriod(duration, billingDate, true)
+  };
+  const onMouseMove = (data) => {
+    if (isLabeled(data)) {
+      setActive(data.activeLabel);
+    } else if (isUnlabeled(data)) {
+      setActive(null);
+    } else {
+      setActive(void 0);
+    }
+  };
+  const onClick = (data) => {
+    if (isLabeled(data)) {
+      setSelected(data.activeLabel);
+    } else if (isUnlabeled(data)) {
+      setSelected(null);
+    } else {
+      setSelected(void 0);
+    }
+  };
+  const renderProductInsightsTooltip = ({
+    label,
+    payload = []
+  }) => {
+    if (isInvalid({ label, payload })) return null;
+    const id = label === "" ? null : label;
+    const title = titleOf(label);
+    const items = payload.map(tooltipItemOf(baseCurrency)).filter(notEmpty);
+    const activeEntity = findAlways(entities, (e) => e.id === id);
+    const breakdowns = Object.keys(activeEntity.entities);
+    if (breakdowns.length) {
+      const subtitle = breakdowns.map((b) => pluralize(b, activeEntity.entities[b].length, true)).join(", ");
+      return /* @__PURE__ */ React.createElement(
+        BarChartTooltip,
+        {
+          title,
+          subtitle,
+          topRight: !!activeEntity.change.ratio && /* @__PURE__ */ React.createElement(
+            CostGrowthIndicator,
+            {
+              formatter: formatChange,
+              change: activeEntity.change,
+              className: classes.indicator
+            }
+          ),
+          actions: /* @__PURE__ */ React.createElement(Box, { className: classes.actions }, /* @__PURE__ */ React.createElement(FullScreenIcon, null), /* @__PURE__ */ React.createElement(Typography, null, "Click for breakdown"))
+        },
+        items.map((item, index) => /* @__PURE__ */ React.createElement(BarChartTooltipItem, { key: `${item.label}-${index}`, item }))
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      BarChartTooltip,
+      {
+        title,
+        topRight: !!activeEntity.change.ratio && /* @__PURE__ */ React.createElement(
+          CostGrowthIndicator,
+          {
+            formatter: formatChange,
+            change: activeEntity.change,
+            className: classes.indicator
+          }
+        ),
+        content: id ? null : "This product has costs that are not labeled and therefore can't be attributed to a specific entity."
+      },
+      items.map((item, index) => /* @__PURE__ */ React.createElement(BarChartTooltipItem, { key: `${item.label}-${index}`, item }))
+    );
+  };
+  const barChartProps = isClickable ? { onClick } : {};
+  return /* @__PURE__ */ React.createElement(Box, { className: layoutClasses.wrapper }, /* @__PURE__ */ React.createElement(BarChartLegend, { costStart, costEnd, options }, /* @__PURE__ */ React.createElement(
+    LegendItem,
+    {
+      title: choose(["Cost Savings", "Cost Excess"], entity.change)
+    },
+    /* @__PURE__ */ React.createElement(CostGrowth, { change: entity.change, duration })
+  )), /* @__PURE__ */ React.createElement(
+    BarChart,
+    {
+      resources,
+      tooltip: renderProductInsightsTooltip,
+      onMouseMove,
+      options,
+      ...barChartProps
+    }
+  ), isSelected && entities.length && /* @__PURE__ */ React.createElement(
+    ProductEntityDialog,
+    {
+      open: isSelected,
+      onClose: () => setSelected(void 0),
+      entity: findAlways(entities, (e) => e.id === selectLabel),
+      options
+    }
+  ));
+};
+
+export { ProductInsightsChart };
+//# sourceMappingURL=ProductInsightsChart.esm.js.map