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

package/dist/components/CostInsightsNavigation/CostInsightsNavigation.esm.js

@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from 'react';
+import Collapse from '@material-ui/core/Collapse';
+import MenuList from '@material-ui/core/MenuList';
+import MenuItem from '@material-ui/core/MenuItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Typography from '@material-ui/core/Typography';
+import Badge from '@material-ui/core/Badge';
+import { useNavigationStyles } from '../../utils/styles.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 { useScroll } from '../../hooks/useScroll.esm.js';
+import '../../hooks/useLastCompleteBillingDate.esm.js';
+import { findAlways } from '../../utils/assert.esm.js';
+import { DefaultNavigation, getDefaultNavigationItems } from '../../utils/navigation.esm.js';
+
+const NavigationMenuItem = ({ navigation, icon, title }) => {
+  const classes = useNavigationStyles();
+  const [, setScroll] = useScroll();
+  return /* @__PURE__ */ React.createElement(
+    MenuItem,
+    {
+      "data-testid": `menu-item-${navigation}`,
+      className: classes.menuItem,
+      onClick: () => setScroll(navigation)
+    },
+    /* @__PURE__ */ React.createElement(ListItemIcon, { className: classes.listItemIcon }, icon),
+    /* @__PURE__ */ React.createElement(
+      ListItemText,
+      {
+        primary: /* @__PURE__ */ React.createElement(Typography, { className: classes.title }, title)
+      }
+    )
+  );
+};
+const CostInsightsNavigation = React.memo(
+  ({ alerts, products }) => {
+    const classes = useNavigationStyles();
+    const { icons } = useConfig();
+    const [isOpen, setOpen] = useState(false);
+    const defaultNavigationItems = getDefaultNavigationItems(alerts);
+    const productNavigationItems = products?.map((product) => ({
+      title: product.name,
+      navigation: product.kind,
+      icon: findAlways(icons, (i) => i.kind === product.kind).component
+    })) ?? [];
+    useEffect(
+      function toggleProductMenuItems() {
+        if (products?.length) {
+          setOpen(true);
+        } else {
+          setOpen(false);
+        }
+      },
+      [products]
+    );
+    return /* @__PURE__ */ React.createElement(MenuList, { className: classes.menuList }, defaultNavigationItems.map((item) => /* @__PURE__ */ React.createElement(
+      NavigationMenuItem,
+      {
+        key: `navigation-menu-item-${item.navigation}`,
+        navigation: item.navigation,
+        title: item.title,
+        icon: item.navigation === DefaultNavigation.AlertInsightsHeader ? /* @__PURE__ */ React.createElement(Badge, { badgeContent: alerts, color: "secondary" }, React.cloneElement(item.icon, {
+          className: classes.navigationIcon
+        })) : React.cloneElement(item.icon, {
+          className: classes.navigationIcon
+        })
+      }
+    )), /* @__PURE__ */ React.createElement(Collapse, { in: isOpen, timeout: 850 }, productNavigationItems.map((item) => /* @__PURE__ */ React.createElement(
+      NavigationMenuItem,
+      {
+        key: `navigation-menu-item-${item.navigation}`,
+        navigation: item.navigation,
+        icon: React.cloneElement(item.icon, {
+          className: classes.navigationIcon
+        }),
+        title: item.title
+      }
+    ))));
+  }
+);
+
+export { CostInsightsNavigation };
+//# sourceMappingURL=CostInsightsNavigation.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CostInsightsNavigation.esm.js","sources":["../../../src/components/CostInsightsNavigation/CostInsightsNavigation.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 Collapse from '@material-ui/core/Collapse';\nimport MenuList from '@material-ui/core/MenuList';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Typography from '@material-ui/core/Typography';\nimport Badge from '@material-ui/core/Badge';\nimport { useNavigationStyles as useStyles } from '../../utils/styles';\nimport { useConfig, useScroll } from '../../hooks';\nimport { findAlways } from '../../utils/assert';\nimport {\n  DefaultNavigation,\n  NavigationItem,\n  getDefaultNavigationItems,\n} from '../../utils/navigation';\nimport {\n  Maybe,\n  Product,\n} from '@backstage-community/plugin-cost-insights-common';\n\ntype CostInsightsNavigationProps = {\n  alerts: number;\n  products: Maybe<Product[]>;\n};\n\nconst NavigationMenuItem = ({ navigation, icon, title }: NavigationItem) => {\n  const classes = useStyles();\n  const [, setScroll] = useScroll();\n  return (\n    <MenuItem\n      data-testid={`menu-item-${navigation}`}\n      className={classes.menuItem}\n      onClick={() => setScroll(navigation)}\n    >\n      <ListItemIcon className={classes.listItemIcon}>{icon}</ListItemIcon>\n      <ListItemText\n        primary={<Typography className={classes.title}>{title}</Typography>}\n      />\n    </MenuItem>\n  );\n};\n\nexport const CostInsightsNavigation = React.memo(\n  ({ alerts, products }: CostInsightsNavigationProps) => {\n    const classes = useStyles();\n    const { icons } = useConfig();\n    const [isOpen, setOpen] = useState(false);\n\n    const defaultNavigationItems = getDefaultNavigationItems(alerts);\n    const productNavigationItems: NavigationItem[] =\n      products?.map(product => ({\n        title: product.name,\n        navigation: product.kind,\n        icon: findAlways(icons, i => i.kind === product.kind).component,\n      })) ?? [];\n\n    useEffect(\n      function toggleProductMenuItems() {\n        if (products?.length) {\n          setOpen(true);\n        } else {\n          setOpen(false);\n        }\n      },\n      [products],\n    );\n\n    return (\n      <MenuList className={classes.menuList}>\n        {defaultNavigationItems.map(item => (\n          <NavigationMenuItem\n            key={`navigation-menu-item-${item.navigation}`}\n            navigation={item.navigation}\n            title={item.title}\n            icon={\n              item.navigation === DefaultNavigation.AlertInsightsHeader ? (\n                <Badge badgeContent={alerts} color=\"secondary\">\n                  {React.cloneElement(item.icon, {\n                    className: classes.navigationIcon,\n                  })}\n                </Badge>\n              ) : (\n                React.cloneElement(item.icon, {\n                  className: classes.navigationIcon,\n                })\n              )\n            }\n          />\n        ))}\n        <Collapse in={isOpen} timeout={850}>\n          {productNavigationItems.map((item: NavigationItem) => (\n            <NavigationMenuItem\n              key={`navigation-menu-item-${item.navigation}`}\n              navigation={item.navigation}\n              icon={React.cloneElement(item.icon, {\n                className: classes.navigationIcon,\n              })}\n              title={item.title}\n            />\n          ))}\n        </Collapse>\n      </MenuList>\n    );\n  },\n);\n"],"names":["useStyles"],"mappings":"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"}

package/dist/components/CostInsightsPage/CostInsightsPage.esm.js

@@ -0,0 +1,229 @@
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import Box from '@material-ui/core/Box';
+import Collapse from '@material-ui/core/Collapse';
+import Container from '@material-ui/core/Container';
+import Divider from '@material-ui/core/Divider';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import Alert from '@material-ui/lab/Alert';
+import { costInsightsApiRef } from '../../api/CostInsightsApi.esm.js';
+import { ActionItems } from '../ActionItems/ActionItems.esm.js';
+import 'classnames';
+import '@material-ui/core/Card';
+import '@material-ui/core/CardHeader';
+import { useConfig } from '../../hooks/useConfig.esm.js';
+import { useCurrency } from '../../hooks/useCurrency.esm.js';
+import { useFilters } from '../../hooks/useFilters.esm.js';
+import { useGroups } from '../../hooks/useGroups.esm.js';
+import { useLoading } from '../../hooks/useLoading.esm.js';
+import '../../hooks/useScroll.esm.js';
+import { useLastCompleteBillingDate } from '../../hooks/useLastCompleteBillingDate.esm.js';
+import { useSubtleTypographyStyles } from '../../utils/styles.esm.js';
+import { AlertInsights } from '../AlertInsights/AlertInsights.esm.js';
+import { CostInsightsLayout } from '../CostInsightsLayout/CostInsightsLayout.esm.js';
+import { CopyUrlToClipboard } from '../CopyUrlToClipboard/CopyUrlToClipboard.esm.js';
+import { CurrencySelect } from '../CurrencySelect/CurrencySelect.esm.js';
+import { WhyCostsMatter } from '../WhyCostsMatter/WhyCostsMatter.esm.js';
+import { CostInsightsHeaderNoGroups, CostInsightsHeader } from '../CostInsightsHeader/CostInsightsHeader.esm.js';
+import { CostInsightsNavigation } from '../CostInsightsNavigation/CostInsightsNavigation.esm.js';
+import { CostOverviewCard } from '../CostOverviewCard/CostOverviewCard.esm.js';
+import { ProductInsights } from '../ProductInsights/ProductInsights.esm.js';
+import { mapLoadingToProps } from './selector.esm.js';
+import { ProjectSelect } from '../ProjectSelect/ProjectSelect.esm.js';
+import { intervalsOf } from '../../utils/duration.esm.js';
+import { isAlertActive, isAlertSnoozed, isAlertAccepted, isAlertDismissed } from '../../utils/alerts.esm.js';
+import { Progress } from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
+
+const CostInsightsPage = () => {
+  const classes = useSubtleTypographyStyles();
+  const client = useApi(costInsightsApiRef);
+  const config = useConfig();
+  const groups = useGroups();
+  const lastCompleteBillingDate = useLastCompleteBillingDate();
+  const [alerts, setAlerts] = useState([]);
+  const [currency, setCurrency] = useCurrency();
+  const [projects, setProjects] = useState(null);
+  const [products, setProducts] = useState(null);
+  const [dailyCost, setDailyCost] = useState(null);
+  const [metricData, setMetricData] = useState(null);
+  const [error, setError] = useState(null);
+  const { pageFilters, setPageFilters } = useFilters((p) => p);
+  const active = useMemo(() => alerts.filter(isAlertActive), [alerts]);
+  const snoozed = useMemo(() => alerts.filter(isAlertSnoozed), [alerts]);
+  const accepted = useMemo(() => alerts.filter(isAlertAccepted), [alerts]);
+  const dismissed = useMemo(() => alerts.filter(isAlertDismissed), [alerts]);
+  const isProductsDisplayed = !!config.products?.length;
+  const isActionItemsDisplayed = !!active.length;
+  const isAlertInsightsDisplayed = !!alerts.length;
+  const {
+    loadingActions,
+    loadingGroups,
+    loadingBillingDate,
+    loadingInitial,
+    dispatchInitial,
+    dispatchInsights,
+    dispatchNone,
+    dispatchReset
+  } = useLoading(mapLoadingToProps);
+  const dispatchLoadingInitial = useCallback(dispatchInitial, []);
+  const dispatchLoadingInsights = useCallback(dispatchInsights, []);
+  const dispatchLoadingNone = useCallback(dispatchNone, []);
+  const dispatchLoadingReset = useCallback(dispatchReset, []);
+  const setProject = (project) => setPageFilters({
+    ...pageFilters,
+    project: project === "all" ? null : project
+  });
+  useEffect(() => {
+    async function getInsights() {
+      setError(null);
+      try {
+        if (pageFilters.group) {
+          dispatchLoadingInsights(true);
+          const intervals = intervalsOf(
+            pageFilters.duration,
+            lastCompleteBillingDate
+          );
+          const [
+            fetchedProjects,
+            fetchedAlerts,
+            fetchedMetricData,
+            fetchedDailyCost
+          ] = await Promise.all([
+            client.getGroupProjects(pageFilters.group),
+            client.getAlerts(pageFilters.group),
+            pageFilters.metric ? client.getDailyMetricData(pageFilters.metric, intervals) : null,
+            pageFilters.project ? client.getProjectDailyCost(pageFilters.project, intervals) : client.getGroupDailyCost(pageFilters.group, intervals)
+          ]);
+          setProjects(fetchedProjects);
+          setAlerts(fetchedAlerts);
+          setMetricData(fetchedMetricData);
+          setDailyCost(fetchedDailyCost);
+        } else {
+          dispatchLoadingNone(loadingActions);
+        }
+      } catch (e) {
+        setError(e);
+        dispatchLoadingNone(loadingActions);
+      } finally {
+        dispatchLoadingInitial(false);
+        dispatchLoadingInsights(false);
+      }
+    }
+    if (!(loadingGroups && loadingBillingDate)) {
+      getInsights();
+    }
+  }, [
+    client,
+    pageFilters,
+    loadingActions,
+    loadingGroups,
+    loadingBillingDate,
+    dispatchLoadingInsights,
+    dispatchLoadingInitial,
+    dispatchLoadingNone,
+    lastCompleteBillingDate
+  ]);
+  if (loadingInitial) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (error) {
+    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, error.message);
+  }
+  if (!pageFilters.group) {
+    return /* @__PURE__ */ React.createElement(CostInsightsLayout, { groups }, /* @__PURE__ */ React.createElement(Box, { textAlign: "right" }, /* @__PURE__ */ React.createElement(CopyUrlToClipboard, null)), /* @__PURE__ */ React.createElement(Container, { maxWidth: "lg" }, /* @__PURE__ */ React.createElement(CostInsightsHeaderNoGroups, null)), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(Container, { maxWidth: "lg" }, /* @__PURE__ */ React.createElement(WhyCostsMatter, null)));
+  }
+  if (!dailyCost) {
+    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, `Error: Could not fetch cost insights data for team ${pageFilters.group}`);
+  }
+  const onProjectSelect = (project) => {
+    setProject(project);
+    dispatchLoadingReset(loadingActions);
+  };
+  const CostOverviewBanner = () => /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      px: 3,
+      pt: 6,
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      minHeight: 40
+    },
+    /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h4" }, "Cost Overview"), /* @__PURE__ */ React.createElement(Typography, { classes }, "Billing data as of ", lastCompleteBillingDate)),
+    /* @__PURE__ */ React.createElement(Box, { display: "flex" }, /* @__PURE__ */ React.createElement(Box, { mr: 1 }, /* @__PURE__ */ React.createElement(
+      CurrencySelect,
+      {
+        currency,
+        currencies: config.currencies,
+        onSelect: setCurrency
+      }
+    )), /* @__PURE__ */ React.createElement(
+      ProjectSelect,
+      {
+        project: pageFilters.project,
+        projects: projects || [],
+        onSelect: onProjectSelect
+      }
+    ))
+  );
+  return /* @__PURE__ */ React.createElement(CostInsightsLayout, { groups }, /* @__PURE__ */ React.createElement(Grid, { container: true, wrap: "nowrap" }, (isProductsDisplayed || isActionItemsDisplayed) && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Box, { position: "sticky", top: 20 }, /* @__PURE__ */ React.createElement(
+    CostInsightsNavigation,
+    {
+      products,
+      alerts: active.length
+    }
+  ))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "flex-end",
+      mb: 2
+    },
+    /* @__PURE__ */ React.createElement(CopyUrlToClipboard, null)
+  ), /* @__PURE__ */ React.createElement(Container, { maxWidth: "lg", disableGutters: true }, /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "column" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(
+    CostInsightsHeader,
+    {
+      groupId: pageFilters.group,
+      groups,
+      hasCostData: !!dailyCost.aggregation.length,
+      alerts: active.length
+    }
+  )), /* @__PURE__ */ React.createElement(Collapse, { in: isActionItemsDisplayed, enter: false }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(Box, { px: 3, py: 6 }, /* @__PURE__ */ React.createElement(
+    ActionItems,
+    {
+      active,
+      snoozed,
+      accepted,
+      dismissed
+    }
+  ))), /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(CostOverviewBanner, null)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(Box, { px: 3, py: 6 }, !!dailyCost.aggregation.length && /* @__PURE__ */ React.createElement(
+    CostOverviewCard,
+    {
+      dailyCostData: dailyCost,
+      metricData
+    }
+  ), /* @__PURE__ */ React.createElement(WhyCostsMatter, null))), /* @__PURE__ */ React.createElement(Collapse, { in: isAlertInsightsDisplayed, enter: false }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(Box, { px: 6, py: 6, mx: -3, bgcolor: "alertBackground" }, /* @__PURE__ */ React.createElement(
+    AlertInsights,
+    {
+      group: pageFilters.group,
+      active,
+      snoozed,
+      accepted,
+      dismissed,
+      onChange: setAlerts
+    }
+  )))), !isAlertInsightsDisplayed && isProductsDisplayed && /* @__PURE__ */ React.createElement(Divider, null), isProductsDisplayed && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(Box, { px: 3, py: 6 }, /* @__PURE__ */ React.createElement(
+    ProductInsights,
+    {
+      group: pageFilters.group,
+      project: pageFilters.project,
+      products: config.products,
+      onLoaded: setProducts
+    }
+  ))))))));
+};
+
+export { CostInsightsPage };
+//# sourceMappingURL=CostInsightsPage.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CostInsightsPage.esm.js","sources":["../../../src/components/CostInsightsPage/CostInsightsPage.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, useMemo, useState } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Collapse from '@material-ui/core/Collapse';\nimport Container from '@material-ui/core/Container';\nimport Divider from '@material-ui/core/Divider';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport { default as MaterialAlert } from '@material-ui/lab/Alert';\nimport { costInsightsApiRef } from '../../api';\nimport { ActionItems } from '../ActionItems';\nimport { AlertInsights } from '../AlertInsights';\nimport { CostInsightsLayout } from '../CostInsightsLayout';\nimport { CopyUrlToClipboard } from '../CopyUrlToClipboard';\nimport { CurrencySelect } from '../CurrencySelect';\nimport { WhyCostsMatter } from '../WhyCostsMatter';\nimport {\n  CostInsightsHeader,\n  CostInsightsHeaderNoGroups,\n} from '../CostInsightsHeader';\nimport { CostInsightsNavigation } from '../CostInsightsNavigation';\nimport { CostOverviewCard } from '../CostOverviewCard';\nimport { ProductInsights } from '../ProductInsights';\n/* https://github.com/backstage/backstage/issues/2574 */\n// import { CostInsightsSupportButton } from '../CostInsightsSupportButton';\nimport {\n  useConfig,\n  useCurrency,\n  useFilters,\n  useGroups,\n  useLastCompleteBillingDate,\n  useLoading,\n} from '../../hooks';\nimport { Alert } from '../../types';\nimport {\n  Cost,\n  Maybe,\n  MetricData,\n  Product,\n  Project,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { mapLoadingToProps } from './selector';\nimport { ProjectSelect } from '../ProjectSelect';\nimport { intervalsOf } from '../../utils/duration';\nimport { useSubtleTypographyStyles } from '../../utils/styles';\nimport {\n  isAlertActive,\n  isAlertAccepted,\n  isAlertDismissed,\n  isAlertSnoozed,\n} from '../../utils/alerts';\n\nimport { Progress } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\n\nexport const CostInsightsPage = () => {\n  const classes = useSubtleTypographyStyles();\n  const client = useApi(costInsightsApiRef);\n  const config = useConfig();\n  const groups = useGroups();\n  const lastCompleteBillingDate = useLastCompleteBillingDate();\n  const [alerts, setAlerts] = useState<Alert[]>([]);\n  const [currency, setCurrency] = useCurrency();\n  const [projects, setProjects] = useState<Maybe<Project[]>>(null);\n  const [products, setProducts] = useState<Maybe<Product[]>>(null);\n  const [dailyCost, setDailyCost] = useState<Maybe<Cost>>(null);\n  const [metricData, setMetricData] = useState<Maybe<MetricData>>(null);\n  const [error, setError] = useState<Maybe<Error>>(null);\n\n  const { pageFilters, setPageFilters } = useFilters(p => p);\n\n  const active = useMemo(() => alerts.filter(isAlertActive), [alerts]);\n  const snoozed = useMemo(() => alerts.filter(isAlertSnoozed), [alerts]);\n  const accepted = useMemo(() => alerts.filter(isAlertAccepted), [alerts]);\n  const dismissed = useMemo(() => alerts.filter(isAlertDismissed), [alerts]);\n\n  const isProductsDisplayed = !!config.products?.length;\n  const isActionItemsDisplayed = !!active.length;\n  const isAlertInsightsDisplayed = !!alerts.length;\n\n  const {\n    loadingActions,\n    loadingGroups,\n    loadingBillingDate,\n    loadingInitial,\n    dispatchInitial,\n    dispatchInsights,\n    dispatchNone,\n    dispatchReset,\n  } = useLoading(mapLoadingToProps);\n\n  /* eslint-disable react-hooks/exhaustive-deps */\n  // The dispatchLoading functions are derived from loading state using mapLoadingToProps, to\n  // provide nicer props for the component. These are re-derived whenever loading state changes,\n  // which causes an infinite loop as product panels load and re-trigger the useEffect below.\n  // Since the functions don't change, we can memoize - but we trigger the same loop if we satisfy\n  // exhaustive-deps by including the function itself in dependencies.\n\n  const dispatchLoadingInitial = useCallback(dispatchInitial, []);\n  const dispatchLoadingInsights = useCallback(dispatchInsights, []);\n  const dispatchLoadingNone = useCallback(dispatchNone, []);\n  const dispatchLoadingReset = useCallback(dispatchReset, []);\n  /* eslint-enable react-hooks/exhaustive-deps */\n\n  const setProject = (project: Maybe<string>) =>\n    setPageFilters({\n      ...pageFilters,\n      project: project === 'all' ? null : project,\n    });\n\n  useEffect(() => {\n    async function getInsights() {\n      setError(null);\n      try {\n        if (pageFilters.group) {\n          dispatchLoadingInsights(true);\n          const intervals = intervalsOf(\n            pageFilters.duration,\n            lastCompleteBillingDate,\n          );\n          const [\n            fetchedProjects,\n            fetchedAlerts,\n            fetchedMetricData,\n            fetchedDailyCost,\n          ] = await Promise.all([\n            client.getGroupProjects(pageFilters.group),\n            client.getAlerts(pageFilters.group),\n            pageFilters.metric\n              ? client.getDailyMetricData(pageFilters.metric, intervals)\n              : null,\n            pageFilters.project\n              ? client.getProjectDailyCost(pageFilters.project, intervals)\n              : client.getGroupDailyCost(pageFilters.group, intervals),\n          ]);\n          setProjects(fetchedProjects);\n          setAlerts(fetchedAlerts);\n          setMetricData(fetchedMetricData);\n          setDailyCost(fetchedDailyCost);\n        } else {\n          dispatchLoadingNone(loadingActions);\n        }\n      } catch (e) {\n        setError(e);\n        dispatchLoadingNone(loadingActions);\n      } finally {\n        dispatchLoadingInitial(false);\n        dispatchLoadingInsights(false);\n      }\n    }\n\n    // Wait for metadata to finish loading\n    if (!(loadingGroups && loadingBillingDate)) {\n      getInsights();\n    }\n  }, [\n    client,\n    pageFilters,\n    loadingActions,\n    loadingGroups,\n    loadingBillingDate,\n    dispatchLoadingInsights,\n    dispatchLoadingInitial,\n    dispatchLoadingNone,\n    lastCompleteBillingDate,\n  ]);\n\n  if (loadingInitial) {\n    return <Progress />;\n  }\n\n  if (error) {\n    return <MaterialAlert severity=\"error\">{error.message}</MaterialAlert>;\n  }\n\n  // Loaded but no groups found for the user\n  if (!pageFilters.group) {\n    return (\n      <CostInsightsLayout groups={groups}>\n        <Box textAlign=\"right\">\n          <CopyUrlToClipboard />\n          {/* <CostInsightsSupportButton /> */}\n        </Box>\n        <Container maxWidth=\"lg\">\n          <CostInsightsHeaderNoGroups />\n        </Container>\n        <Divider />\n        <Container maxWidth=\"lg\">\n          <WhyCostsMatter />\n        </Container>\n      </CostInsightsLayout>\n    );\n  }\n\n  if (!dailyCost) {\n    return (\n      <MaterialAlert severity=\"error\">{`Error: Could not fetch cost insights data for team ${pageFilters.group}`}</MaterialAlert>\n    );\n  }\n\n  const onProjectSelect = (project: Maybe<string>) => {\n    setProject(project);\n    dispatchLoadingReset(loadingActions);\n  };\n\n  const CostOverviewBanner = () => (\n    <Box\n      px={3}\n      pt={6}\n      display=\"flex\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      minHeight={40}\n    >\n      <Box>\n        <Typography variant=\"h4\">Cost Overview</Typography>\n        <Typography classes={classes}>\n          Billing data as of {lastCompleteBillingDate}\n        </Typography>\n      </Box>\n      <Box display=\"flex\">\n        <Box mr={1}>\n          <CurrencySelect\n            currency={currency}\n            currencies={config.currencies}\n            onSelect={setCurrency}\n          />\n        </Box>\n        <ProjectSelect\n          project={pageFilters.project}\n          projects={projects || []}\n          onSelect={onProjectSelect}\n        />\n      </Box>\n    </Box>\n  );\n\n  return (\n    <CostInsightsLayout groups={groups}>\n      <Grid container wrap=\"nowrap\">\n        {(isProductsDisplayed || isActionItemsDisplayed) && (\n          <Grid item>\n            <Box position=\"sticky\" top={20}>\n              <CostInsightsNavigation\n                products={products}\n                alerts={active.length}\n              />\n            </Box>\n          </Grid>\n        )}\n        <Grid item xs>\n          <Box\n            display=\"flex\"\n            flexDirection=\"row\"\n            justifyContent=\"flex-end\"\n            mb={2}\n          >\n            <CopyUrlToClipboard />\n            {/* <CostInsightsSupportButton /> */}\n          </Box>\n          <Container maxWidth=\"lg\" disableGutters>\n            <Grid container direction=\"column\">\n              <Grid item xs>\n                <CostInsightsHeader\n                  groupId={pageFilters.group}\n                  groups={groups}\n                  hasCostData={!!dailyCost.aggregation.length}\n                  alerts={active.length}\n                />\n              </Grid>\n              <Collapse in={isActionItemsDisplayed} enter={false}>\n                <Grid item xs>\n                  <Box px={3} py={6}>\n                    <ActionItems\n                      active={active}\n                      snoozed={snoozed}\n                      accepted={accepted}\n                      dismissed={dismissed}\n                    />\n                  </Box>\n                </Grid>\n                <Divider />\n              </Collapse>\n              <Grid item xs>\n                <CostOverviewBanner />\n              </Grid>\n              <Grid item xs>\n                <Box px={3} py={6}>\n                  {!!dailyCost.aggregation.length && (\n                    <CostOverviewCard\n                      dailyCostData={dailyCost}\n                      metricData={metricData}\n                    />\n                  )}\n                  <WhyCostsMatter />\n                </Box>\n              </Grid>\n              <Collapse in={isAlertInsightsDisplayed} enter={false}>\n                <Grid item xs>\n                  <Box px={6} py={6} mx={-3} bgcolor=\"alertBackground\">\n                    <AlertInsights\n                      group={pageFilters.group}\n                      active={active}\n                      snoozed={snoozed}\n                      accepted={accepted}\n                      dismissed={dismissed}\n                      onChange={setAlerts}\n                    />\n                  </Box>\n                </Grid>\n              </Collapse>\n              {!isAlertInsightsDisplayed && isProductsDisplayed && <Divider />}\n              {isProductsDisplayed && (\n                <Grid item xs>\n                  <Box px={3} py={6}>\n                    <ProductInsights\n                      group={pageFilters.group}\n                      project={pageFilters.project}\n                      products={config.products}\n                      onLoaded={setProducts}\n                    />\n                  </Box>\n                </Grid>\n              )}\n            </Grid>\n          </Container>\n        </Grid>\n      </Grid>\n    </CostInsightsLayout>\n  );\n};\n"],"names":["MaterialAlert"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEO,MAAM,mBAAmB,MAAM;AACpC,EAAA,MAAM,UAAU,yBAA0B,EAAA,CAAA;AAC1C,EAAM,MAAA,MAAA,GAAS,OAAO,kBAAkB,CAAA,CAAA;AACxC,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,EAAA,MAAM,0BAA0B,0BAA2B,EAAA,CAAA;AAC3D,EAAA,MAAM,CAAC,MAAQ,EAAA,SAAS,CAAI,GAAA,QAAA,CAAkB,EAAE,CAAA,CAAA;AAChD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,WAAY,EAAA,CAAA;AAC5C,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAA2B,IAAI,CAAA,CAAA;AAC/D,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAA2B,IAAI,CAAA,CAAA;AAC/D,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAsB,IAAI,CAAA,CAAA;AAC5D,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAA4B,IAAI,CAAA,CAAA;AACpE,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAuB,IAAI,CAAA,CAAA;AAErD,EAAA,MAAM,EAAE,WAAa,EAAA,cAAA,EAAmB,GAAA,UAAA,CAAW,OAAK,CAAC,CAAA,CAAA;AAEzD,EAAM,MAAA,MAAA,GAAS,QAAQ,MAAM,MAAA,CAAO,OAAO,aAAa,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AACnE,EAAM,MAAA,OAAA,GAAU,QAAQ,MAAM,MAAA,CAAO,OAAO,cAAc,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AACrE,EAAM,MAAA,QAAA,GAAW,QAAQ,MAAM,MAAA,CAAO,OAAO,eAAe,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AACvE,EAAM,MAAA,SAAA,GAAY,QAAQ,MAAM,MAAA,CAAO,OAAO,gBAAgB,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEzE,EAAA,MAAM,mBAAsB,GAAA,CAAC,CAAC,MAAA,CAAO,QAAU,EAAA,MAAA,CAAA;AAC/C,EAAM,MAAA,sBAAA,GAAyB,CAAC,CAAC,MAAO,CAAA,MAAA,CAAA;AACxC,EAAM,MAAA,wBAAA,GAA2B,CAAC,CAAC,MAAO,CAAA,MAAA,CAAA;AAE1C,EAAM,MAAA;AAAA,IACJ,cAAA;AAAA,IACA,aAAA;AAAA,IACA,kBAAA;AAAA,IACA,cAAA;AAAA,IACA,eAAA;AAAA,IACA,gBAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,GACF,GAAI,WAAW,iBAAiB,CAAA,CAAA;AAShC,EAAA,MAAM,sBAAyB,GAAA,WAAA,CAAY,eAAiB,EAAA,EAAE,CAAA,CAAA;AAC9D,EAAA,MAAM,uBAA0B,GAAA,WAAA,CAAY,gBAAkB,EAAA,EAAE,CAAA,CAAA;AAChE,EAAA,MAAM,mBAAsB,GAAA,WAAA,CAAY,YAAc,EAAA,EAAE,CAAA,CAAA;AACxD,EAAA,MAAM,oBAAuB,GAAA,WAAA,CAAY,aAAe,EAAA,EAAE,CAAA,CAAA;AAG1D,EAAM,MAAA,UAAA,GAAa,CAAC,OAAA,KAClB,cAAe,CAAA;AAAA,IACb,GAAG,WAAA;AAAA,IACH,OAAA,EAAS,OAAY,KAAA,KAAA,GAAQ,IAAO,GAAA,OAAA;AAAA,GACrC,CAAA,CAAA;AAEH,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,eAAe,WAAc,GAAA;AAC3B,MAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AACb,MAAI,IAAA;AACF,QAAA,IAAI,YAAY,KAAO,EAAA;AACrB,UAAA,uBAAA,CAAwB,IAAI,CAAA,CAAA;AAC5B,UAAA,MAAM,SAAY,GAAA,WAAA;AAAA,YAChB,WAAY,CAAA,QAAA;AAAA,YACZ,uBAAA;AAAA,WACF,CAAA;AACA,UAAM,MAAA;AAAA,YACJ,eAAA;AAAA,YACA,aAAA;AAAA,YACA,iBAAA;AAAA,YACA,gBAAA;AAAA,WACF,GAAI,MAAM,OAAA,CAAQ,GAAI,CAAA;AAAA,YACpB,MAAA,CAAO,gBAAiB,CAAA,WAAA,CAAY,KAAK,CAAA;AAAA,YACzC,MAAA,CAAO,SAAU,CAAA,WAAA,CAAY,KAAK,CAAA;AAAA,YAClC,YAAY,MACR,GAAA,MAAA,CAAO,mBAAmB,WAAY,CAAA,MAAA,EAAQ,SAAS,CACvD,GAAA,IAAA;AAAA,YACJ,WAAY,CAAA,OAAA,GACR,MAAO,CAAA,mBAAA,CAAoB,WAAY,CAAA,OAAA,EAAS,SAAS,CAAA,GACzD,MAAO,CAAA,iBAAA,CAAkB,WAAY,CAAA,KAAA,EAAO,SAAS,CAAA;AAAA,WAC1D,CAAA,CAAA;AACD,UAAA,WAAA,CAAY,eAAe,CAAA,CAAA;AAC3B,UAAA,SAAA,CAAU,aAAa,CAAA,CAAA;AACvB,UAAA,aAAA,CAAc,iBAAiB,CAAA,CAAA;AAC/B,UAAA,YAAA,CAAa,gBAAgB,CAAA,CAAA;AAAA,SACxB,MAAA;AACL,UAAA,mBAAA,CAAoB,cAAc,CAAA,CAAA;AAAA,SACpC;AAAA,eACO,CAAG,EAAA;AACV,QAAA,QAAA,CAAS,CAAC,CAAA,CAAA;AACV,QAAA,mBAAA,CAAoB,cAAc,CAAA,CAAA;AAAA,OAClC,SAAA;AACA,QAAA,sBAAA,CAAuB,KAAK,CAAA,CAAA;AAC5B,QAAA,uBAAA,CAAwB,KAAK,CAAA,CAAA;AAAA,OAC/B;AAAA,KACF;AAGA,IAAI,IAAA,EAAE,iBAAiB,kBAAqB,CAAA,EAAA;AAC1C,MAAY,WAAA,EAAA,CAAA;AAAA,KACd;AAAA,GACC,EAAA;AAAA,IACD,MAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,kBAAA;AAAA,IACA,uBAAA;AAAA,IACA,sBAAA;AAAA,IACA,mBAAA;AAAA,IACA,uBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,IAAI,cAAgB,EAAA;AAClB,IAAA,2CAAQ,QAAS,EAAA,IAAA,CAAA,CAAA;AAAA,GACnB;AAEA,EAAA,IAAI,KAAO,EAAA;AACT,IAAA,uBAAQ,KAAA,CAAA,aAAA,CAAAA,KAAA,EAAA,EAAc,QAAS,EAAA,OAAA,EAAA,EAAS,MAAM,OAAQ,CAAA,CAAA;AAAA,GACxD;AAGA,EAAI,IAAA,CAAC,YAAY,KAAO,EAAA;AACtB,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA,EAAmB,MAClB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,SAAA,EAAU,OACb,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,kBAAmB,EAAA,IAAA,CAEtB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAU,EAAA,EAAA,QAAA,EAAS,IAClB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,0BAA2B,EAAA,IAAA,CAC9B,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,IAAA,CAAA,kBACR,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAU,QAAS,EAAA,IAAA,EAAA,kBACjB,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAe,CAClB,CACF,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,IAAI,CAAC,SAAW,EAAA;AACd,IAAA,2CACGA,KAAc,EAAA,EAAA,QAAA,EAAS,WAAS,CAAsD,mDAAA,EAAA,WAAA,CAAY,KAAK,CAAG,CAAA,CAAA,CAAA;AAAA,GAE/G;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,OAA2B,KAAA;AAClD,IAAA,UAAA,CAAW,OAAO,CAAA,CAAA;AAClB,IAAA,oBAAA,CAAqB,cAAc,CAAA,CAAA;AAAA,GACrC,CAAA;AAEA,EAAA,MAAM,qBAAqB,sBACzB,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA,CAAA;AAAA,MACJ,EAAI,EAAA,CAAA;AAAA,MACJ,OAAQ,EAAA,MAAA;AAAA,MACR,cAAe,EAAA,eAAA;AAAA,MACf,UAAW,EAAA,QAAA;AAAA,MACX,SAAW,EAAA,EAAA;AAAA,KAAA;AAAA,oBAEV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,IAAA,EAAA,EAAK,eAAa,CAAA,kBACrC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAkB,EAAA,EAAA,qBAAA,EACR,uBACtB,CACF,CAAA;AAAA,wCACC,GAAI,EAAA,EAAA,OAAA,EAAQ,0BACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,IAAI,CACP,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,YAAY,MAAO,CAAA,UAAA;AAAA,QACnB,QAAU,EAAA,WAAA;AAAA,OAAA;AAAA,KAEd,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,SAAS,WAAY,CAAA,OAAA;AAAA,QACrB,QAAA,EAAU,YAAY,EAAC;AAAA,QACvB,QAAU,EAAA,eAAA;AAAA,OAAA;AAAA,KAEd,CAAA;AAAA,GACF,CAAA;AAGF,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,sBAAmB,MAClB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAC,MAAK,QACjB,EAAA,EAAA,CAAA,mBAAA,IAAuB,2CACtB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IACR,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAI,QAAS,EAAA,QAAA,EAAS,KAAK,EAC1B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,sBAAA;AAAA,IAAA;AAAA,MACC,QAAA;AAAA,MACA,QAAQ,MAAO,CAAA,MAAA;AAAA,KAAA;AAAA,GAEnB,CACF,CAEF,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAE,IACX,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,aAAc,EAAA,KAAA;AAAA,MACd,cAAe,EAAA,UAAA;AAAA,MACf,EAAI,EAAA,CAAA;AAAA,KAAA;AAAA,wCAEH,kBAAmB,EAAA,IAAA,CAAA;AAAA,qBAGrB,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAU,UAAS,IAAK,EAAA,cAAA,EAAc,wBACpC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,WAAU,QACxB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAE,IACX,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,SAAS,WAAY,CAAA,KAAA;AAAA,MACrB,MAAA;AAAA,MACA,WAAa,EAAA,CAAC,CAAC,SAAA,CAAU,WAAY,CAAA,MAAA;AAAA,MACrC,QAAQ,MAAO,CAAA,MAAA;AAAA,KAAA;AAAA,GAEnB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,YAAS,EAAI,EAAA,sBAAA,EAAwB,OAAO,KAC3C,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAE,IACX,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAI,EAAI,EAAA,CAAA,EAAG,IAAI,CACd,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,MAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,KAAA;AAAA,GAEJ,CACF,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,aAAQ,CACX,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAE,EAAA,IAAA,EAAA,sCACV,kBAAmB,EAAA,IAAA,CACtB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAE,wBACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,IAAI,CACb,EAAA,EAAA,CAAC,CAAC,SAAA,CAAU,YAAY,MACvB,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,aAAe,EAAA,SAAA;AAAA,MACf,UAAA;AAAA,KAAA;AAAA,GACF,kBAED,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAe,CAClB,CACF,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,EAAA,EAAI,wBAA0B,EAAA,KAAA,EAAO,KAC7C,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAE,IACX,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,CAAG,EAAA,EAAA,EAAI,CAAG,EAAA,EAAA,EAAI,CAAI,CAAA,EAAA,OAAA,EAAQ,iBACjC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,OAAO,WAAY,CAAA,KAAA;AAAA,MACnB,MAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAU,EAAA,SAAA;AAAA,KAAA;AAAA,GAEd,CACF,CACF,CAAA,EACC,CAAC,wBAA4B,IAAA,mBAAA,oBAAwB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAQ,CAC7D,EAAA,mBAAA,wCACE,IAAK,EAAA,EAAA,IAAA,EAAI,MAAC,EAAE,EAAA,IAAA,EAAA,sCACV,GAAI,EAAA,EAAA,EAAA,EAAI,CAAG,EAAA,EAAA,EAAI,CACd,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,OAAO,WAAY,CAAA,KAAA;AAAA,MACnB,SAAS,WAAY,CAAA,OAAA;AAAA,MACrB,UAAU,MAAO,CAAA,QAAA;AAAA,MACjB,QAAU,EAAA,WAAA;AAAA,KAAA;AAAA,GAEd,CACF,CAEJ,CACF,CACF,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/CostInsightsPage/CostInsightsPageRoot.esm.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CostInsightsPage } from './CostInsightsPage.esm.js';
+import { FilterProvider } from '../../hooks/useFilters.esm.js';
+import { LoadingProvider } from '../../hooks/useLoading.esm.js';
+import { GroupsProvider } from '../../hooks/useGroups.esm.js';
+import { CurrencyProvider } from '../../hooks/useCurrency.esm.js';
+import { ScrollProvider } from '../../hooks/useScroll.esm.js';
+import { ConfigProvider } from '../../hooks/useConfig.esm.js';
+import { BillingDateProvider } from '../../hooks/useLastCompleteBillingDate.esm.js';
+import { CostInsightsThemeProvider } from './CostInsightsThemeProvider.esm.js';
+
+const CostInsightsPageRoot = () => /* @__PURE__ */ React.createElement(CostInsightsThemeProvider, null, /* @__PURE__ */ React.createElement(ConfigProvider, null, /* @__PURE__ */ React.createElement(LoadingProvider, null, /* @__PURE__ */ React.createElement(GroupsProvider, null, /* @__PURE__ */ React.createElement(BillingDateProvider, null, /* @__PURE__ */ React.createElement(FilterProvider, null, /* @__PURE__ */ React.createElement(ScrollProvider, null, /* @__PURE__ */ React.createElement(CurrencyProvider, null, /* @__PURE__ */ React.createElement(CostInsightsPage, null)))))))));
+
+export { CostInsightsPageRoot };
+//# sourceMappingURL=CostInsightsPageRoot.esm.js.map

package/dist/components/CostInsightsPage/CostInsightsPageRoot.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CostInsightsPageRoot.esm.js","sources":["../../../src/components/CostInsightsPage/CostInsightsPageRoot.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 { CostInsightsPage } from './CostInsightsPage';\nimport { FilterProvider } from '../../hooks/useFilters';\nimport { LoadingProvider } from '../../hooks/useLoading';\nimport { GroupsProvider } from '../../hooks/useGroups';\nimport { CurrencyProvider } from '../../hooks/useCurrency';\nimport { ScrollProvider } from '../../hooks/useScroll';\nimport { ConfigProvider } from '../../hooks/useConfig';\nimport { BillingDateProvider } from '../../hooks/useLastCompleteBillingDate';\nimport { CostInsightsThemeProvider } from './CostInsightsThemeProvider';\n\nexport const CostInsightsPageRoot = () => (\n  <CostInsightsThemeProvider>\n    <ConfigProvider>\n      <LoadingProvider>\n        <GroupsProvider>\n          <BillingDateProvider>\n            <FilterProvider>\n              <ScrollProvider>\n                <CurrencyProvider>\n                  <CostInsightsPage />\n                </CurrencyProvider>\n              </ScrollProvider>\n            </FilterProvider>\n          </BillingDateProvider>\n        </GroupsProvider>\n      </LoadingProvider>\n    </ConfigProvider>\n  </CostInsightsThemeProvider>\n);\n"],"names":[],"mappings":";;;;;;;;;;;AA2Ba,MAAA,oBAAA,GAAuB,sBAClC,KAAA,CAAA,aAAA,CAAC,yBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,eACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,mBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,gBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,gBAAiB,EAAA,IAAA,CACpB,CACF,CACF,CACF,CACF,CACF,CACF,CACF;;;;"}

package/dist/components/CostInsightsPage/CostInsightsThemeProvider.esm.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ThemeProvider, createTheme } from '@material-ui/core/styles';
+import { costInsightsDarkTheme, costInsightsLightTheme } from '../../utils/styles.esm.js';
+
+const CostInsightsThemeProvider = ({
+  children
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    ThemeProvider,
+    {
+      theme: (theme) => createTheme({
+        ...theme,
+        palette: {
+          ...theme.palette,
+          ...theme.palette.type === "dark" ? costInsightsDarkTheme.palette : costInsightsLightTheme.palette
+        }
+      })
+    },
+    children
+  );
+};
+
+export { CostInsightsThemeProvider };
+//# sourceMappingURL=CostInsightsThemeProvider.esm.js.map

package/dist/components/CostInsightsPage/CostInsightsThemeProvider.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CostInsightsThemeProvider.esm.js","sources":["../../../src/components/CostInsightsPage/CostInsightsThemeProvider.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 {\n  ThemeProvider,\n  createTheme as createMuiTheme,\n} from '@material-ui/core/styles';\nimport { Theme } from '@material-ui/core/styles';\nimport {\n  costInsightsDarkTheme,\n  costInsightsLightTheme,\n} from '../../utils/styles';\nimport { CostInsightsTheme } from '../../types';\n\nexport const CostInsightsThemeProvider = ({\n  children,\n}: PropsWithChildren<{}>) => {\n  return (\n    <ThemeProvider\n      theme={(theme: Theme) =>\n        createMuiTheme({\n          ...theme,\n          palette: {\n            ...theme.palette,\n            ...(theme.palette.type === 'dark'\n              ? costInsightsDarkTheme.palette\n              : costInsightsLightTheme.palette),\n          },\n        }) as CostInsightsTheme\n      }\n    >\n      {children}\n    </ThemeProvider>\n  );\n};\n"],"names":["createMuiTheme"],"mappings":";;;;AA4BO,MAAM,4BAA4B,CAAC;AAAA,EACxC,QAAA;AACF,CAA6B,KAAA;AAC3B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAC,KAAA,KACNA,WAAe,CAAA;AAAA,QACb,GAAG,KAAA;AAAA,QACH,OAAS,EAAA;AAAA,UACP,GAAG,KAAM,CAAA,OAAA;AAAA,UACT,GAAI,KAAM,CAAA,OAAA,CAAQ,SAAS,MACvB,GAAA,qBAAA,CAAsB,UACtB,sBAAuB,CAAA,OAAA;AAAA,SAC7B;AAAA,OACD,CAAA;AAAA,KAAA;AAAA,IAGF,QAAA;AAAA,GACH,CAAA;AAEJ;;;;"}

package/dist/components/CostInsightsPage/index.esm.js

@@ -0,0 +1,2 @@
+export { CostInsightsPageRoot as CostInsightsPage } from './CostInsightsPageRoot.esm.js';
+//# sourceMappingURL=index.esm.js.map

package/dist/components/CostInsightsPage/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/CostInsightsPage/selector.esm.js

@@ -0,0 +1,15 @@
+import { DefaultLoadingAction, getResetState, getResetStateWithoutInitial } from '../../utils/loading.esm.js';
+
+const mapLoadingToProps = ({ state, actions, dispatch }) => ({
+  loadingActions: actions,
+  loadingGroups: state[DefaultLoadingAction.UserGroups],
+  loadingBillingDate: state[DefaultLoadingAction.LastCompleteBillingDate],
+  loadingInitial: state[DefaultLoadingAction.CostInsightsInitial],
+  dispatchInitial: (isLoading) => dispatch({ [DefaultLoadingAction.CostInsightsInitial]: isLoading }),
+  dispatchInsights: (isLoading) => dispatch({ [DefaultLoadingAction.CostInsightsPage]: isLoading }),
+  dispatchNone: (loadingActions) => dispatch(getResetState(loadingActions)),
+  dispatchReset: (loadingActions) => dispatch(getResetStateWithoutInitial(loadingActions))
+});
+
+export { mapLoadingToProps };
+//# sourceMappingURL=selector.esm.js.map

package/dist/components/CostInsightsPage/selector.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector.esm.js","sources":["../../../src/components/CostInsightsPage/selector.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 { MapLoadingToProps } from '../../hooks';\nimport {\n  getResetState,\n  DefaultLoadingAction,\n  getResetStateWithoutInitial,\n} from '../../utils/loading';\n\ntype CostInsightsPageLoadingProps = {\n  loadingActions: Array<string>;\n  loadingGroups: boolean;\n  loadingBillingDate: boolean;\n  loadingInitial: boolean;\n  dispatchInitial: (isLoading: boolean) => void;\n  dispatchInsights: (isLoading: boolean) => void;\n  dispatchNone: (loadingActions: string[]) => void;\n  dispatchReset: (loadingActions: string[]) => void;\n};\n\nexport const mapLoadingToProps: MapLoadingToProps<\n  CostInsightsPageLoadingProps\n> = ({ state, actions, dispatch }) => ({\n  loadingActions: actions,\n  loadingGroups: state[DefaultLoadingAction.UserGroups],\n  loadingBillingDate: state[DefaultLoadingAction.LastCompleteBillingDate],\n  loadingInitial: state[DefaultLoadingAction.CostInsightsInitial],\n  dispatchInitial: (isLoading: boolean) =>\n    dispatch({ [DefaultLoadingAction.CostInsightsInitial]: isLoading }),\n  dispatchInsights: (isLoading: boolean) =>\n    dispatch({ [DefaultLoadingAction.CostInsightsPage]: isLoading }),\n  dispatchNone: (loadingActions: string[]) =>\n    dispatch(getResetState(loadingActions)),\n  dispatchReset: (loadingActions: string[]) =>\n    dispatch(getResetStateWithoutInitial(loadingActions)),\n});\n"],"names":[],"mappings":";;AAiCO,MAAM,oBAET,CAAC,EAAE,KAAO,EAAA,OAAA,EAAS,UAAgB,MAAA;AAAA,EACrC,cAAgB,EAAA,OAAA;AAAA,EAChB,aAAA,EAAe,KAAM,CAAA,oBAAA,CAAqB,UAAU,CAAA;AAAA,EACpD,kBAAA,EAAoB,KAAM,CAAA,oBAAA,CAAqB,uBAAuB,CAAA;AAAA,EACtE,cAAA,EAAgB,KAAM,CAAA,oBAAA,CAAqB,mBAAmB,CAAA;AAAA,EAC9D,eAAA,EAAiB,CAAC,SAAA,KAChB,QAAS,CAAA,EAAE,CAAC,oBAAqB,CAAA,mBAAmB,GAAG,SAAA,EAAW,CAAA;AAAA,EACpE,gBAAA,EAAkB,CAAC,SAAA,KACjB,QAAS,CAAA,EAAE,CAAC,oBAAqB,CAAA,gBAAgB,GAAG,SAAA,EAAW,CAAA;AAAA,EACjE,cAAc,CAAC,cAAA,KACb,QAAS,CAAA,aAAA,CAAc,cAAc,CAAC,CAAA;AAAA,EACxC,eAAe,CAAC,cAAA,KACd,QAAS,CAAA,2BAAA,CAA4B,cAAc,CAAC,CAAA;AACxD,CAAA;;;;"}

package/dist/components/CostInsightsTabs/CostInsightsTabs.esm.js

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import Tab from '@material-ui/core/Tab';
+import Tabs from '@material-ui/core/Tabs';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { mapFiltersToProps, mapLoadingToProps } from './selector.esm.js';
+import '../../hooks/useConfig.esm.js';
+import '../../hooks/useCurrency.esm.js';
+import { useFilters } from '../../hooks/useFilters.esm.js';
+import '../../hooks/useGroups.esm.js';
+import { useLoading } from '../../hooks/useLoading.esm.js';
+import '../../hooks/useScroll.esm.js';
+import '../../hooks/useLastCompleteBillingDate.esm.js';
+import { useCostInsightsTabsStyles } from '../../utils/styles.esm.js';
+
+const CostInsightsTabs = ({ groups }) => {
+  const classes = useCostInsightsTabsStyles();
+  const [index] = useState(0);
+  const [groupMenuEl, setGroupMenuEl] = useState(null);
+  const { group, setGroup } = useFilters(mapFiltersToProps);
+  const { loadingActions, dispatchReset } = useLoading(mapLoadingToProps);
+  const openGroupMenu = (e) => setGroupMenuEl(e.currentTarget);
+  const closeGroupMenu = () => setGroupMenuEl(null);
+  const updateGroupFilterAndCloseMenu = (g) => () => {
+    dispatchReset(loadingActions);
+    closeGroupMenu();
+    setGroup(g);
+  };
+  const renderTabLabel = () => /* @__PURE__ */ React.createElement("div", { className: classes.tabLabel }, /* @__PURE__ */ React.createElement(Typography, { className: classes.tabLabelText, variant: "overline" }, `${groups.length} teams`), /* @__PURE__ */ React.createElement(ExpandMoreIcon, { fontSize: "small" }));
+  const hasAtLeastTwoGroups = groups.length >= 2;
+  if (!hasAtLeastTwoGroups) return null;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Tabs,
+    {
+      className: `cost-insights-tabs ${classes.tabs}`,
+      "data-testid": "cost-insights-tabs",
+      classes: { indicator: classes.indicator },
+      value: index
+    },
+    /* @__PURE__ */ React.createElement(
+      Tab,
+      {
+        className: classes.tab,
+        "data-testid": "cost-insights-groups-tab",
+        key: "cost-insights-groups-tab",
+        label: renderTabLabel(),
+        onClick: openGroupMenu,
+        component: "button"
+      }
+    )
+  ), /* @__PURE__ */ React.createElement(
+    Menu,
+    {
+      id: "group-menu",
+      "data-testid": "group-menu",
+      className: classes.menu,
+      getContentAnchorEl: null,
+      anchorEl: groupMenuEl,
+      keepMounted: true,
+      open: Boolean(groupMenuEl),
+      onClose: closeGroupMenu,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      }
+    },
+    groups.map((g) => /* @__PURE__ */ React.createElement(
+      MenuItem,
+      {
+        className: classes.menuItem,
+        classes: { selected: classes.menuItemSelected },
+        selected: g.id === group,
+        key: g.id,
+        "data-testid": g.id,
+        onClick: updateGroupFilterAndCloseMenu(g)
+      },
+      g.name ?? g.id
+    ))
+  ));
+};
+
+export { CostInsightsTabs };
+//# sourceMappingURL=CostInsightsTabs.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CostInsightsTabs.esm.js","sources":["../../../src/components/CostInsightsTabs/CostInsightsTabs.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 Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Tab from '@material-ui/core/Tab';\nimport Tabs from '@material-ui/core/Tabs';\nimport Typography from '@material-ui/core/Typography';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport { mapLoadingToProps, mapFiltersToProps } from './selector';\nimport { Group } from '@backstage-community/plugin-cost-insights-common';\nimport { useFilters, useLoading } from '../../hooks';\nimport { useCostInsightsTabsStyles as useStyles } from '../../utils/styles';\n\nexport type CostInsightsTabsProps = {\n  groups: Group[];\n};\n\nexport const CostInsightsTabs = ({ groups }: CostInsightsTabsProps) => {\n  const classes = useStyles();\n  const [index] = useState(0); // index is fixed for now until other tabs are added\n  const [groupMenuEl, setGroupMenuEl] = useState<Element | null>(null);\n  const { group, setGroup } = useFilters(mapFiltersToProps);\n  const { loadingActions, dispatchReset } = useLoading(mapLoadingToProps);\n\n  const openGroupMenu = (e: any) => setGroupMenuEl(e.currentTarget as Element);\n\n  const closeGroupMenu = () => setGroupMenuEl(null);\n\n  const updateGroupFilterAndCloseMenu = (g: Group) => () => {\n    dispatchReset(loadingActions);\n    closeGroupMenu();\n    setGroup(g);\n  };\n\n  const renderTabLabel = () => (\n    <div className={classes.tabLabel}>\n      <Typography className={classes.tabLabelText} variant=\"overline\">\n        {`${groups.length} teams`}\n      </Typography>\n      <ExpandMoreIcon fontSize=\"small\" />\n    </div>\n  );\n\n  const hasAtLeastTwoGroups = groups.length >= 2;\n\n  if (!hasAtLeastTwoGroups) return null;\n\n  return (\n    <>\n      <Tabs\n        className={`cost-insights-tabs ${classes.tabs}`}\n        data-testid=\"cost-insights-tabs\"\n        classes={{ indicator: classes.indicator }}\n        value={index}\n      >\n        <Tab\n          className={classes.tab}\n          data-testid=\"cost-insights-groups-tab\"\n          key=\"cost-insights-groups-tab\"\n          label={renderTabLabel()}\n          onClick={openGroupMenu}\n          component=\"button\"\n        />\n      </Tabs>\n      <Menu\n        id=\"group-menu\"\n        data-testid=\"group-menu\"\n        className={classes.menu}\n        getContentAnchorEl={null}\n        anchorEl={groupMenuEl}\n        keepMounted\n        open={Boolean(groupMenuEl)}\n        onClose={closeGroupMenu}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n      >\n        {groups.map((g: Group) => (\n          <MenuItem\n            className={classes.menuItem}\n            classes={{ selected: classes.menuItemSelected }}\n            selected={g.id === group}\n            key={g.id}\n            data-testid={g.id}\n            onClick={updateGroupFilterAndCloseMenu(g)}\n          >\n            {g.name ?? g.id}\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  );\n};\n"],"names":["useStyles"],"mappings":"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"}

package/dist/components/CostInsightsTabs/selector.esm.js

@@ -0,0 +1,17 @@
+import { getResetStateWithoutInitial } from '../../utils/loading.esm.js';
+
+const mapFiltersToProps = ({ pageFilters, setPageFilters }) => ({
+  ...pageFilters,
+  setGroup: (group) => setPageFilters({
+    ...pageFilters,
+    group: group.id,
+    project: null
+  })
+});
+const mapLoadingToProps = ({ actions, dispatch }) => ({
+  loadingActions: actions,
+  dispatchReset: (loadingActions) => dispatch(getResetStateWithoutInitial(loadingActions))
+});
+
+export { mapFiltersToProps, mapLoadingToProps };
+//# sourceMappingURL=selector.esm.js.map

package/dist/components/CostInsightsTabs/selector.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector.esm.js","sources":["../../../src/components/CostInsightsTabs/selector.ts"],"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 { MapFiltersToProps } from '../../hooks/useFilters';\nimport { MapLoadingToProps } from '../../hooks/useLoading';\nimport { PageFilters } from '../../types';\nimport { Group } from '@backstage-community/plugin-cost-insights-common';\nimport { getResetStateWithoutInitial } from '../../utils/loading';\n\ntype CostInsightsTabsFilterProps = PageFilters & {\n  setGroup: (group: Group) => void;\n};\n\ntype CostInsightsTabsLoadingProps = {\n  loadingActions: Array<string>;\n  dispatchReset: (loadingActions: string[]) => void;\n};\n\nexport const mapFiltersToProps: MapFiltersToProps<\n  CostInsightsTabsFilterProps\n> = ({ pageFilters, setPageFilters }) => ({\n  ...pageFilters,\n  setGroup: (group: Group) =>\n    setPageFilters({\n      ...pageFilters,\n      group: group.id,\n      project: null,\n    }),\n});\n\nexport const mapLoadingToProps: MapLoadingToProps<\n  CostInsightsTabsLoadingProps\n> = ({ actions, dispatch }) => ({\n  loadingActions: actions,\n  dispatchReset: (loadingActions: string[]) =>\n    dispatch(getResetStateWithoutInitial(loadingActions)),\n});\n"],"names":[],"mappings":";;AA+BO,MAAM,iBAET,GAAA,CAAC,EAAE,WAAA,EAAa,gBAAsB,MAAA;AAAA,EACxC,GAAG,WAAA;AAAA,EACH,QAAA,EAAU,CAAC,KAAA,KACT,cAAe,CAAA;AAAA,IACb,GAAG,WAAA;AAAA,IACH,OAAO,KAAM,CAAA,EAAA;AAAA,IACb,OAAS,EAAA,IAAA;AAAA,GACV,CAAA;AACL,CAAA,EAAA;AAEO,MAAM,iBAET,GAAA,CAAC,EAAE,OAAA,EAAS,UAAgB,MAAA;AAAA,EAC9B,cAAgB,EAAA,OAAA;AAAA,EAChB,eAAe,CAAC,cAAA,KACd,QAAS,CAAA,2BAAA,CAA4B,cAAc,CAAC,CAAA;AACxD,CAAA;;;;"}