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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @backstage-community/plugin-cost-insights
 
+## 0.12.26
+
+### Patch Changes
+
+- 22de2f8: Backstage version bump to v1.29.2
+- Updated dependencies [22de2f8]
+  - @backstage-community/plugin-cost-insights-common@0.1.4
+
+## 0.12.25
+
+### Patch Changes
+
+- aff1a3c: Fix broken links in README.md
+
 ## 0.12.24
 
 ### Patch Changes

package/README.md

@@ -24,7 +24,7 @@ yarn --cwd packages/app add @backstage-community/plugin-cost-insights
 
 1. Configure `app-config.yaml`. See [Configuration](#configuration).
 
-2. Create a CostInsights client. Clients must implement the [CostInsightsApi](https://github.com/backstage/backstage/blob/master/plugins/cost-insights/src/api/CostInsightsApi.ts) interface. Create your own or [use a template](https://github.com/backstage/backstage/blob/master/plugins/cost-insights/src/example/templates/CostInsightsClient.ts) to get started.
+2. Create a CostInsights client. Clients must implement the [CostInsightsApi](https://github.com/backstage/community-plugins/blob/main/workspaces/cost-insights/plugins/cost-insights/src/api/CostInsightsApi.ts) interface. Create your own or [use a template](https://github.com/backstage/community-plugins/blob/main/workspaces/cost-insights/plugins/cost-insights/src/example/templates/CostInsightsClient.ts) to get started.
 
 Tip: You can also use the `ExampleCostInsightsClient` from `@backstage-community/plugin-cost-insights` to see how the plugin looks with some mock data.
 
@@ -35,7 +35,7 @@ import { CostInsightsApi } from '@backstage-community/plugin-cost-insights';
 export class CostInsightsClient implements CostInsightsApi { ... }
 ```
 
-**Note:** We've briefly explored using the AWS Cost Explorer API to implement a Cost Insights client. Learn more about our findings [here](https://github.com/backstage/backstage/blob/master/plugins/cost-insights/contrib/aws-cost-explorer-api.md).
+**Note:** We've briefly explored using the AWS Cost Explorer API to implement a Cost Insights client. Learn more about our findings [here](https://github.com/backstage/community-plugins/blob/main/workspaces/cost-insights/plugins/cost-insights/contrib/aws-cost-explorer-api.md).
 
 3. Import the client and the Cost Insights plugin API to your Backstage instance.
 
@@ -134,7 +134,7 @@ costInsights:
 
 For showing cost breakdowns you can define a map of cloud products. They must be defined as keys on the `products` field. A user-friendly name is **required**.
 
-You can optionally supply a product `icon` to display in Cost Insights navigation. See the [type file](https://github.com/backstage/backstage/blob/master/plugins/cost-insights/src/types/Icon.ts) for supported types and Material UI icon [mappings](https://github.com/backstage/backstage/blob/master/plugins/cost-insights/src/utils/navigation.tsx).
+You can optionally supply a product `icon` to display in Cost Insights navigation. See the [type file](https://github.com/backstage/community-plugins/blob/main/workspaces/cost-insights/plugins/cost-insights/src/types/Icon.ts) for supported types and Material UI icon [mappings](https://github.com/backstage/community-plugins/blob/main/workspaces/cost-insights/plugins/cost-insights/src/utils/navigation.tsx).
 
 **Note:** Product keys should be unique and on `camelCase` form. Backstage does not support underscores in configuration keys.
 
@@ -237,8 +237,8 @@ costInsights:
 
 ## Alerts
 
-The CostInsightsApi `getAlerts` method may return any type of alert or recommendation (called collectively "Action Items" in Cost Insights) that implements the [Alert type](https://github.com/backstage/backstage/blob/master/plugins/cost-insights/src/types/Alert.ts). This allows you to deliver any alerts or recommendations specific to your infrastructure or company migrations.
+The CostInsightsApi `getAlerts` method may return any type of alert or recommendation (called collectively "Action Items" in Cost Insights) that implements the [Alert type](https://github.com/backstage/community-plugins/blob/main/workspaces/cost-insights/plugins/cost-insights/src/types/Alert.ts). This allows you to deliver any alerts or recommendations specific to your infrastructure or company migrations.
 
-To learn more about using Cost Insights' ready-to-use alerts, see the alerts [README](https://github.com/backstage/backstage/blob/master/plugins/cost-insights/src/alerts/README.md).
+To learn more about using Cost Insights' ready-to-use alerts, see the alerts [README](https://github.com/backstage/community-plugins/blob/main/workspaces/cost-insights/plugins/cost-insights/src/alerts/README.md).
 
-Example implementations of custom alerts, forms and components can be found in the [examples](https://github.com/backstage/backstage/tree/master/plugins/cost-insights/src/example) directory.
+Example implementations of custom alerts, forms and components can be found in the [examples](https://github.com/backstage/community-plugins/tree/main/workspaces/cost-insights/plugins/cost-insights/src/example) directory.

package/dist/alerts/ProjectGrowthAlert.esm.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ProjectGrowthAlertCard } from '../components/ProjectGrowthAlertCard/ProjectGrowthAlertCard.esm.js';
+
+class ProjectGrowthAlert {
+  data;
+  constructor(data) {
+    this.data = data;
+  }
+  get url() {
+    return "/cost-insights/investigating-growth";
+  }
+  get title() {
+    return `Investigate cost growth in project ${this.data.project}`;
+  }
+  get subtitle() {
+    return "Cost growth outpacing business growth is unsustainable long-term.";
+  }
+  get element() {
+    return /* @__PURE__ */ React.createElement(ProjectGrowthAlertCard, { alert: this.data });
+  }
+}
+
+export { ProjectGrowthAlert };
+//# sourceMappingURL=ProjectGrowthAlert.esm.js.map

package/dist/alerts/ProjectGrowthAlert.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectGrowthAlert.esm.js","sources":["../../src/alerts/ProjectGrowthAlert.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 { ProjectGrowthAlertCard } from '../components/ProjectGrowthAlertCard';\nimport { Alert, ProjectGrowthData } from '../types';\n\n/**\n * The alert below is an example of an Alert implementation; the CostInsightsApi permits returning\n * any implementation of the Alert type, so adopters can create their own. The CostInsightsApi\n * fetches alert data from the backend, then creates Alert classes with the data.\n *\n * @public\n */\nexport class ProjectGrowthAlert implements Alert {\n  data: ProjectGrowthData;\n\n  constructor(data: ProjectGrowthData) {\n    this.data = data;\n  }\n\n  get url() {\n    return '/cost-insights/investigating-growth';\n  }\n\n  get title() {\n    return `Investigate cost growth in project ${this.data.project}`;\n  }\n\n  get subtitle() {\n    return 'Cost growth outpacing business growth is unsustainable long-term.';\n  }\n\n  get element() {\n    return <ProjectGrowthAlertCard alert={this.data} />;\n  }\n}\n"],"names":[],"mappings":";;;AA2BO,MAAM,kBAAoC,CAAA;AAAA,EAC/C,IAAA,CAAA;AAAA,EAEA,YAAY,IAAyB,EAAA;AACnC,IAAA,IAAA,CAAK,IAAO,GAAA,IAAA,CAAA;AAAA,GACd;AAAA,EAEA,IAAI,GAAM,GAAA;AACR,IAAO,OAAA,qCAAA,CAAA;AAAA,GACT;AAAA,EAEA,IAAI,KAAQ,GAAA;AACV,IAAO,OAAA,CAAA,mCAAA,EAAsC,IAAK,CAAA,IAAA,CAAK,OAAO,CAAA,CAAA,CAAA;AAAA,GAChE;AAAA,EAEA,IAAI,QAAW,GAAA;AACb,IAAO,OAAA,mEAAA,CAAA;AAAA,GACT;AAAA,EAEA,IAAI,OAAU,GAAA;AACZ,IAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA,EAAuB,KAAO,EAAA,IAAA,CAAK,IAAM,EAAA,CAAA,CAAA;AAAA,GACnD;AACF;;;;"}

package/dist/alerts/UnlabeledDataflowAlert.esm.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { UnlabeledDataflowAlertCard } from '../components/UnlabeledDataflowAlertCard/UnlabeledDataflowAlertCard.esm.js';
+
+class UnlabeledDataflowAlert {
+  data;
+  status;
+  constructor(data) {
+    this.data = data;
+  }
+  get url() {
+    return "/cost-insights/labeling-jobs";
+  }
+  get title() {
+    return "Add labels to workflows";
+  }
+  get subtitle() {
+    return "Labels show in billing data, enabling cost insights for each workflow.";
+  }
+  get element() {
+    return /* @__PURE__ */ React.createElement(UnlabeledDataflowAlertCard, { alert: this.data });
+  }
+}
+
+export { UnlabeledDataflowAlert };
+//# sourceMappingURL=UnlabeledDataflowAlert.esm.js.map

package/dist/alerts/UnlabeledDataflowAlert.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnlabeledDataflowAlert.esm.js","sources":["../../src/alerts/UnlabeledDataflowAlert.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 { UnlabeledDataflowAlertCard } from '../components/UnlabeledDataflowAlertCard';\nimport { Alert, AlertStatus, UnlabeledDataflowData } from '../types';\n\n/**\n * The alert below is an example of an Alert implementation; the CostInsightsApi permits returning\n * any implementation of the Alert type, so adopters can create their own. The CostInsightsApi\n * fetches alert data from the backend, then creates Alert classes with the data.\n *\n * @public\n */\nexport class UnlabeledDataflowAlert implements Alert {\n  data: UnlabeledDataflowData;\n  status?: AlertStatus;\n\n  constructor(data: UnlabeledDataflowData) {\n    this.data = data;\n  }\n\n  get url() {\n    return '/cost-insights/labeling-jobs';\n  }\n\n  get title() {\n    return 'Add labels to workflows';\n  }\n\n  get subtitle() {\n    return 'Labels show in billing data, enabling cost insights for each workflow.';\n  }\n\n  get element() {\n    return <UnlabeledDataflowAlertCard alert={this.data} />;\n  }\n}\n"],"names":[],"mappings":";;;AA2BO,MAAM,sBAAwC,CAAA;AAAA,EACnD,IAAA,CAAA;AAAA,EACA,MAAA,CAAA;AAAA,EAEA,YAAY,IAA6B,EAAA;AACvC,IAAA,IAAA,CAAK,IAAO,GAAA,IAAA,CAAA;AAAA,GACd;AAAA,EAEA,IAAI,GAAM,GAAA;AACR,IAAO,OAAA,8BAAA,CAAA;AAAA,GACT;AAAA,EAEA,IAAI,KAAQ,GAAA;AACV,IAAO,OAAA,yBAAA,CAAA;AAAA,GACT;AAAA,EAEA,IAAI,QAAW,GAAA;AACb,IAAO,OAAA,wEAAA,CAAA;AAAA,GACT;AAAA,EAEA,IAAI,OAAU,GAAA;AACZ,IAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA,EAA2B,KAAO,EAAA,IAAA,CAAK,IAAM,EAAA,CAAA,CAAA;AAAA,GACvD;AACF;;;;"}

package/dist/api/CostInsightsApi.esm.js

@@ -0,0 +1,8 @@
+import { createApiRef } from '@backstage/core-plugin-api';
+
+const costInsightsApiRef = createApiRef({
+  id: "plugin.costinsights.service"
+});
+
+export { costInsightsApiRef };
+//# sourceMappingURL=CostInsightsApi.esm.js.map

package/dist/api/CostInsightsApi.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CostInsightsApi.esm.js","sources":["../../src/api/CostInsightsApi.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 {\n  Cost,\n  Entity,\n  Group,\n  Project,\n  Maybe,\n  MetricData,\n} from '@backstage-community/plugin-cost-insights-common';\n\nimport { Alert } from '../types';\nimport { createApiRef } from '@backstage/core-plugin-api';\n\n/** @public */\nexport type ProductInsightsOptions = {\n  /**\n   * The product from the cost-insights configuration in app-config.yaml\n   */\n  product: string;\n\n  /**\n   * The group id from getUserGroups or query parameters\n   */\n  group: string;\n\n  /**\n   * An ISO 8601 repeating interval string, such as R2/P3M/2020-09-01\n   */\n  intervals: string;\n\n  /**\n   * (optional) The project id from getGroupProjects or query parameters\n   */\n  project: Maybe<string>;\n};\n\n/** @public */\nexport type CostInsightsApi = {\n  /**\n   * Get the most current date for which billing data is complete, in YYYY-MM-DD format. This helps\n   * define the intervals used in other API methods to avoid showing incomplete cost. The costs for\n   * today, for example, will not be complete. This ideally comes from the cloud provider.\n   */\n  getLastCompleteBillingDate(): Promise<string>;\n\n  /**\n   * Get a list of groups the given user belongs to. These may be LDAP groups or similar\n   * organizational groups. Cost Insights is designed to show costs based on group membership;\n   * if a user has multiple groups, they are able to switch between groups to see costs for each.\n   *\n   * This method should be removed once the Backstage identity plugin provides the same concept.\n   *\n   * @param userId - The login id for the current user\n   */\n  getUserGroups(userId: string): Promise<Group[]>;\n\n  /**\n   * Get a list of cloud billing entities that belong to this group (projects in GCP, AWS has a\n   * similar concept in billing accounts). These act as filters for the displayed costs, users can\n   * choose whether they see all costs for a group, or those from a particular owned project.\n   *\n   * @param group - The group id from getUserGroups or query parameters\n   */\n  getGroupProjects(group: string): Promise<Project[]>;\n\n  /**\n   * Get daily cost aggregations for a given catalog entity and interval time frame.\n   *\n   * The return type includes an array of daily cost aggregations as well as statistics about the\n   * change in cost over the intervals. Calculating these statistics requires us to bucket costs\n   * into two or more time periods, hence a repeating interval format rather than just a start and\n   * end date.\n   *\n   * The rate of change in this comparison allows teams to reason about their cost growth (or\n   * reduction) and compare it to metrics important to the business.\n   *\n   * Note: implementing this is only required when using the `EntityCostInsightsContent` extension.\n   *\n   * @param catalogEntityRef - A reference to the catalog entity, as described in\n   *   https://backstage.io/docs/features/software-catalog/references\n   * @param intervals - An ISO 8601 repeating interval string, such as R2/P30D/2020-09-01\n   *   https://en.wikipedia.org/wiki/ISO_8601#Repeating_intervals\n   */\n  getCatalogEntityDailyCost?(\n    catalogEntityRef: string,\n    intervals: string,\n  ): Promise<Cost>;\n\n  /**\n   * Get daily cost aggregations for a given group and interval time frame.\n   *\n   * The return type includes an array of daily cost aggregations as well as statistics about the\n   * change in cost over the intervals. Calculating these statistics requires us to bucket costs\n   * into two or more time periods, hence a repeating interval format rather than just a start and\n   * end date.\n   *\n   * The rate of change in this comparison allows teams to reason about their cost growth (or\n   * reduction) and compare it to metrics important to the business.\n   *\n   * @param group - The group id from getUserGroups or query parameters\n   * @param intervals - An ISO 8601 repeating interval string, such as R2/P30D/2020-09-01\n   *   https://en.wikipedia.org/wiki/ISO_8601#Repeating_intervals\n   */\n  getGroupDailyCost(group: string, intervals: string): Promise<Cost>;\n\n  /**\n   * Get daily cost aggregations for a given billing entity (project in GCP, AWS has a similar\n   * concept in billing accounts) and interval time frame.\n   *\n   * The return type includes an array of daily cost aggregations as well as statistics about the\n   * change in cost over the intervals. Calculating these statistics requires us to bucket costs\n   * into two or more time periods, hence a repeating interval format rather than just a start and\n   * end date.\n   *\n   * The rate of change in this comparison allows teams to reason about the project's cost growth\n   * (or reduction) and compare it to metrics important to the business.\n   *\n   * @param project - The project id from getGroupProjects or query parameters\n   * @param intervals - An ISO 8601 repeating interval string, such as R2/P30D/2020-09-01\n   *   https://en.wikipedia.org/wiki/ISO_8601#Repeating_intervals\n   */\n  getProjectDailyCost(project: string, intervals: string): Promise<Cost>;\n\n  /**\n   * Get aggregations for a particular metric and interval time frame. Teams\n   * can see metrics important to their business in comparison to the growth\n   * (or reduction) of a project or group's daily costs.\n   *\n   * @param metric - A metric from the cost-insights configuration in app-config.yaml.\n   * @param intervals - An ISO 8601 repeating interval string, such as R2/P30D/2020-09-01\n   *   https://en.wikipedia.org/wiki/ISO_8601#Repeating_intervals\n   */\n  getDailyMetricData(metric: string, intervals: string): Promise<MetricData>;\n\n  /**\n   * Get cost aggregations for a particular cloud product and interval time frame. This includes\n   * total cost for the product, as well as a breakdown of particular entities that incurred cost\n   * in this product. The type of entity depends on the product - it may be deployed services,\n   * storage buckets, managed database instances, etc.\n   *\n   * If project is supplied, this should only return product costs for the given billing entity\n   * (project in GCP).\n   *\n   * The time period is supplied as a Duration rather than intervals, since this is always expected\n   * to return data for two bucketed time period (e.g. month vs month, or quarter vs quarter).\n   *\n   * @param options - Options to use when fetching insights for a particular cloud product and\n   *                interval time frame.\n   */\n  getProductInsights(options: ProductInsightsOptions): Promise<Entity>;\n\n  /**\n   * Get current cost alerts for a given group. These show up as Action Items for the group on the\n   * Cost Insights page. Alerts may include cost-saving recommendations, such as infrastructure\n   * migrations, or cost-related warnings, such as an unexpected billing anomaly.\n   */\n  getAlerts(group: string): Promise<Alert[]>;\n};\n\n/** @public */\nexport const costInsightsApiRef = createApiRef<CostInsightsApi>({\n  id: 'plugin.costinsights.service',\n});\n"],"names":[],"mappings":";;AA+KO,MAAM,qBAAqB,YAA8B,CAAA;AAAA,EAC9D,EAAI,EAAA,6BAAA;AACN,CAAC;;;;"}

package/dist/components/ActionItems/ActionItemCard.esm.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import classnames from 'classnames';
+import Card from '@material-ui/core/Card';
+import CardHeader from '@material-ui/core/CardHeader';
+import '../../hooks/useConfig.esm.js';
+import '../../hooks/useCurrency.esm.js';
+import '../../hooks/useFilters.esm.js';
+import '../../hooks/useGroups.esm.js';
+import '../../hooks/useLoading.esm.js';
+import { useScroll } from '../../hooks/useScroll.esm.js';
+import '../../hooks/useLastCompleteBillingDate.esm.js';
+import { useActionItemCardStyles } from '../../utils/styles.esm.js';
+
+const ActionItemCard = ({
+  alert,
+  avatar,
+  number,
+  disableScroll = false
+}) => {
+  const classes = useActionItemCardStyles();
+  const rootClasses = classnames(classes.root, {
+    [classes.activeRoot]: !disableScroll
+  });
+  const [, setScroll] = useScroll();
+  const onActionItemClick = () => {
+    if (!disableScroll && number) {
+      setScroll(`alert-${number}`);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Card, { className: classes.card, raised: false, onClick: onActionItemClick }, /* @__PURE__ */ React.createElement(
+    CardHeader,
+    {
+      classes: {
+        root: rootClasses,
+        action: classes.action,
+        title: classes.title
+      },
+      title: alert.title,
+      subheader: alert.subtitle,
+      avatar
+    }
+  ));
+};
+
+export { ActionItemCard };
+//# sourceMappingURL=ActionItemCard.esm.js.map

package/dist/components/ActionItems/ActionItemCard.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionItemCard.esm.js","sources":["../../../src/components/ActionItems/ActionItemCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { MouseEventHandler } from 'react';\nimport classnames from 'classnames';\nimport Card from '@material-ui/core/Card';\nimport CardHeader from '@material-ui/core/CardHeader';\nimport { useScroll } from '../../hooks';\nimport { Alert } from '../../types';\nimport { useActionItemCardStyles as useStyles } from '../../utils/styles';\n\ntype ActionItemCardProps = {\n  alert: Alert;\n  number?: number;\n  avatar?: JSX.Element;\n  disableScroll?: boolean;\n};\n\nexport const ActionItemCard = ({\n  alert,\n  avatar,\n  number,\n  disableScroll = false,\n}: ActionItemCardProps) => {\n  const classes = useStyles();\n  const rootClasses = classnames(classes.root, {\n    [classes.activeRoot]: !disableScroll,\n  });\n  const [, setScroll] = useScroll();\n\n  const onActionItemClick: MouseEventHandler = () => {\n    if (!disableScroll && number) {\n      setScroll(`alert-${number}`);\n    }\n  };\n\n  return (\n    <Card className={classes.card} raised={false} onClick={onActionItemClick}>\n      <CardHeader\n        classes={{\n          root: rootClasses,\n          action: classes.action,\n          title: classes.title,\n        }}\n        title={alert.title}\n        subheader={alert.subtitle}\n        avatar={avatar}\n      />\n    </Card>\n  );\n};\n"],"names":["useStyles"],"mappings":";;;;;;;;;;;;;AA8BO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,KAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,aAAgB,GAAA,KAAA;AAClB,CAA2B,KAAA;AACzB,EAAA,MAAM,UAAUA,uBAAU,EAAA,CAAA;AAC1B,EAAM,MAAA,WAAA,GAAc,UAAW,CAAA,OAAA,CAAQ,IAAM,EAAA;AAAA,IAC3C,CAAC,OAAA,CAAQ,UAAU,GAAG,CAAC,aAAA;AAAA,GACxB,CAAA,CAAA;AACD,EAAA,MAAM,GAAG,SAAS,CAAA,GAAI,SAAU,EAAA,CAAA;AAEhC,EAAA,MAAM,oBAAuC,MAAM;AACjD,IAAI,IAAA,CAAC,iBAAiB,MAAQ,EAAA;AAC5B,MAAU,SAAA,CAAA,CAAA,MAAA,EAAS,MAAM,CAAE,CAAA,CAAA,CAAA;AAAA,KAC7B;AAAA,GACF,CAAA;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,SAAW,EAAA,OAAA,CAAQ,MAAM,MAAQ,EAAA,KAAA,EAAO,SAAS,iBACrD,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA;AAAA,QACP,IAAM,EAAA,WAAA;AAAA,QACN,QAAQ,OAAQ,CAAA,MAAA;AAAA,QAChB,OAAO,OAAQ,CAAA,KAAA;AAAA,OACjB;AAAA,MACA,OAAO,KAAM,CAAA,KAAA;AAAA,MACb,WAAW,KAAM,CAAA,QAAA;AAAA,MACjB,MAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/ActionItems/ActionItems.esm.js

@@ -0,0 +1,90 @@
+import React, { Fragment } from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import Tooltip from '@material-ui/core/Tooltip';
+import IconButton from '@material-ui/core/IconButton';
+import Badge from '@material-ui/core/Badge';
+import Box from '@material-ui/core/Box';
+import Paper from '@material-ui/core/Paper';
+import Divider from '@material-ui/core/Divider';
+import SnoozeIcon from '@material-ui/icons/AccessTime';
+import AcceptIcon from '@material-ui/icons/Check';
+import DismissIcon from '@material-ui/icons/Delete';
+import { ActionItemCard } from './ActionItemCard.esm.js';
+import { AlertStatus } from '../../types/Alert.esm.js';
+import '../../hooks/useConfig.esm.js';
+import '../../hooks/useCurrency.esm.js';
+import '../../hooks/useFilters.esm.js';
+import '../../hooks/useGroups.esm.js';
+import '../../hooks/useLoading.esm.js';
+import { useScroll, ScrollType } from '../../hooks/useScroll.esm.js';
+import '../../hooks/useLastCompleteBillingDate.esm.js';
+import { useActionItemCardStyles } from '../../utils/styles.esm.js';
+
+const AlertStatusButton = ({
+  title,
+  amount,
+  icon,
+  onClick,
+  ...buttonProps
+}) => /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(
+  IconButton,
+  {
+    onClick,
+    role: "button",
+    "aria-hidden": false,
+    ...buttonProps
+  },
+  /* @__PURE__ */ React.createElement(Badge, { badgeContent: amount }, icon)
+));
+const ActionItems = ({
+  active,
+  snoozed,
+  accepted,
+  dismissed
+}) => {
+  const classes = useActionItemCardStyles();
+  const [, setScroll] = useScroll();
+  const isSnoozedButtonDisplayed = !!snoozed.length;
+  const isAcceptedButtonDisplayed = !!accepted.length;
+  const isDismissedButtonDisplayed = !!dismissed.length;
+  const isStatusButtonGroupDisplayed = !!active.length;
+  const onStatusButtonClick = () => setScroll(ScrollType.AlertSummary);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Paper, null, active.map((alert, index) => /* @__PURE__ */ React.createElement(Fragment, { key: `alert-${index}` }, /* @__PURE__ */ React.createElement(
+    ActionItemCard,
+    {
+      alert,
+      number: index + 1,
+      avatar: /* @__PURE__ */ React.createElement(Avatar, { className: classes.avatar }, index + 1)
+    }
+  ), index < active.length - 1 && /* @__PURE__ */ React.createElement(Divider, null)))), isStatusButtonGroupDisplayed && /* @__PURE__ */ React.createElement(Box, { display: "flex", justifyContent: "flex-end", mt: 2 }, isAcceptedButtonDisplayed && /* @__PURE__ */ React.createElement(
+    AlertStatusButton,
+    {
+      title: "Accepted",
+      "aria-label": AlertStatus.Accepted,
+      icon: /* @__PURE__ */ React.createElement(AcceptIcon, null),
+      amount: accepted.length,
+      onClick: onStatusButtonClick
+    }
+  ), isSnoozedButtonDisplayed && /* @__PURE__ */ React.createElement(
+    AlertStatusButton,
+    {
+      title: "Snoozed",
+      "aria-label": AlertStatus.Snoozed,
+      amount: snoozed.length,
+      icon: /* @__PURE__ */ React.createElement(SnoozeIcon, null),
+      onClick: onStatusButtonClick
+    }
+  ), isDismissedButtonDisplayed && /* @__PURE__ */ React.createElement(
+    AlertStatusButton,
+    {
+      title: "Dismissed",
+      "aria-label": AlertStatus.Dismissed,
+      icon: /* @__PURE__ */ React.createElement(DismissIcon, null),
+      amount: dismissed.length,
+      onClick: onStatusButtonClick
+    }
+  )));
+};
+
+export { ActionItems };
+//# sourceMappingURL=ActionItems.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionItems.esm.js","sources":["../../../src/components/ActionItems/ActionItems.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { Fragment, MouseEventHandler } from 'react';\nimport Avatar from '@material-ui/core/Avatar';\nimport { IconButtonProps } from '@material-ui/core/IconButton';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport IconButton from '@material-ui/core/IconButton';\nimport Badge from '@material-ui/core/Badge';\nimport Box from '@material-ui/core/Box';\nimport Paper from '@material-ui/core/Paper';\nimport Divider from '@material-ui/core/Divider';\nimport { default as SnoozeIcon } from '@material-ui/icons/AccessTime';\nimport { default as AcceptIcon } from '@material-ui/icons/Check';\nimport { default as DismissIcon } from '@material-ui/icons/Delete';\nimport { ActionItemCard } from './ActionItemCard';\nimport { Alert, AlertStatus } from '../../types';\nimport { useScroll, ScrollType } from '../../hooks';\nimport { useActionItemCardStyles as useStyles } from '../../utils/styles';\n\ntype AlertStatusButtonProps = {\n  title: string;\n  amount: number;\n  icon: JSX.Element;\n  onClick: MouseEventHandler;\n} & IconButtonProps;\n\nconst AlertStatusButton = ({\n  title,\n  amount,\n  icon,\n  onClick,\n  ...buttonProps\n}: AlertStatusButtonProps) => (\n  <Tooltip title={title}>\n    <IconButton\n      onClick={onClick}\n      role=\"button\"\n      aria-hidden={false}\n      {...buttonProps}\n    >\n      <Badge badgeContent={amount}>{icon}</Badge>\n    </IconButton>\n  </Tooltip>\n);\n\ntype ActionItemsProps = {\n  active: Alert[];\n  snoozed: Alert[];\n  accepted: Alert[];\n  dismissed: Alert[];\n};\n\nexport const ActionItems = ({\n  active,\n  snoozed,\n  accepted,\n  dismissed,\n}: ActionItemsProps) => {\n  const classes = useStyles();\n  const [, setScroll] = useScroll();\n\n  const isSnoozedButtonDisplayed = !!snoozed.length;\n  const isAcceptedButtonDisplayed = !!accepted.length;\n  const isDismissedButtonDisplayed = !!dismissed.length;\n  const isStatusButtonGroupDisplayed = !!active.length;\n\n  const onStatusButtonClick: MouseEventHandler = () =>\n    setScroll(ScrollType.AlertSummary);\n\n  return (\n    <>\n      <Paper>\n        {active.map((alert, index) => (\n          <Fragment key={`alert-${index}`}>\n            <ActionItemCard\n              alert={alert}\n              number={index + 1}\n              avatar={<Avatar className={classes.avatar}>{index + 1}</Avatar>}\n            />\n            {index < active.length - 1 && <Divider />}\n          </Fragment>\n        ))}\n      </Paper>\n      {isStatusButtonGroupDisplayed && (\n        <Box display=\"flex\" justifyContent=\"flex-end\" mt={2}>\n          {isAcceptedButtonDisplayed && (\n            <AlertStatusButton\n              title=\"Accepted\"\n              aria-label={AlertStatus.Accepted}\n              icon={<AcceptIcon />}\n              amount={accepted.length}\n              onClick={onStatusButtonClick}\n            />\n          )}\n          {isSnoozedButtonDisplayed && (\n            <AlertStatusButton\n              title=\"Snoozed\"\n              aria-label={AlertStatus.Snoozed}\n              amount={snoozed.length}\n              icon={<SnoozeIcon />}\n              onClick={onStatusButtonClick}\n            />\n          )}\n          {isDismissedButtonDisplayed && (\n            <AlertStatusButton\n              title=\"Dismissed\"\n              aria-label={AlertStatus.Dismissed}\n              icon={<DismissIcon />}\n              amount={dismissed.length}\n              onClick={onStatusButtonClick}\n            />\n          )}\n        </Box>\n      )}\n    </>\n  );\n};\n"],"names":["useStyles"],"mappings":"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"}

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

@@ -0,0 +1,123 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { capitalize } from '@material-ui/core/utils';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Divider from '@material-ui/core/Divider';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import IconButton from '@material-ui/core/IconButton';
+import DialogContent from '@material-ui/core/DialogContent';
+import Typography from '@material-ui/core/Typography';
+import CloseIcon from '@material-ui/icons/Close';
+import { useAlertDialogStyles } from '../../utils/styles.esm.js';
+import { choose, formOf } from '../../utils/alerts.esm.js';
+
+const DEFAULT_FORM_ID = "alert-form";
+const AlertDialog = ({
+  open,
+  group,
+  alert,
+  status,
+  onClose,
+  onSubmit
+}) => {
+  const classes = useAlertDialogStyles();
+  const [isSubmitDisabled, setSubmitDisabled] = useState(true);
+  const formRef = useRef(null);
+  useEffect(() => {
+    setSubmitDisabled(open);
+  }, [open]);
+  function disableSubmit(isDisabled) {
+    setSubmitDisabled(isDisabled);
+  }
+  function onDialogClose() {
+    onClose();
+    setSubmitDisabled(true);
+  }
+  const [action, actioned] = choose(
+    status,
+    [
+      ["snooze", "snoozed"],
+      ["accept", "accepted"],
+      ["dismiss", "dismissed"]
+    ],
+    ["", ""]
+  );
+  const TransitionProps = {
+    mountOnEnter: true,
+    unmountOnExit: true,
+    onEntered() {
+      if (formRef.current) {
+        formRef.current.id = DEFAULT_FORM_ID;
+      }
+    }
+  };
+  const Form = formOf(alert, status);
+  return /* @__PURE__ */ React.createElement(
+    Dialog,
+    {
+      open,
+      onClose: onDialogClose,
+      scroll: "body",
+      maxWidth: "lg",
+      TransitionProps
+    },
+    /* @__PURE__ */ React.createElement(Box, { display: "flex", justifyContent: "flex-end" }, /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        className: classes.icon,
+        disableRipple: true,
+        "aria-label": "Close",
+        onClick: onDialogClose
+      },
+      /* @__PURE__ */ React.createElement(CloseIcon, null)
+    )),
+    /* @__PURE__ */ React.createElement(DialogContent, { className: classes.content }, /* @__PURE__ */ React.createElement(Box, { mb: 1.5 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, /* @__PURE__ */ React.createElement("b", null, capitalize(action), " this action item?")), /* @__PURE__ */ React.createElement(Typography, { variant: "h6", color: "textSecondary" }, /* @__PURE__ */ React.createElement("b", null, "This action item will be ", actioned, " for all of ", group, "."))), /* @__PURE__ */ React.createElement(
+      Box,
+      {
+        display: "flex",
+        flexDirection: "column",
+        bgcolor: "alertBackground",
+        p: 2,
+        mb: 1.5,
+        borderRadius: 4
+      },
+      /* @__PURE__ */ React.createElement(Typography, null, /* @__PURE__ */ React.createElement("b", null, alert?.title)),
+      /* @__PURE__ */ React.createElement(Typography, { color: "textSecondary" }, alert?.subtitle)
+    ), Form && /* @__PURE__ */ React.createElement(
+      Form,
+      {
+        ref: formRef,
+        alert,
+        onSubmit,
+        disableSubmit
+      }
+    )),
+    /* @__PURE__ */ React.createElement(Divider, null),
+    /* @__PURE__ */ React.createElement(DialogActions, { className: classes.actions, disableSpacing: true }, Form ? /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "submit",
+        color: "primary",
+        variant: "contained",
+        "aria-label": action,
+        form: DEFAULT_FORM_ID,
+        disabled: isSubmitDisabled
+      },
+      capitalize(action)
+    ) : /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        color: "primary",
+        variant: "contained",
+        "aria-label": action,
+        onClick: () => onSubmit(null)
+      },
+      capitalize(action)
+    ))
+  );
+};
+
+export { AlertDialog };
+//# sourceMappingURL=AlertDialog.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.esm.js","sources":["../../../src/components/AlertInsights/AlertDialog.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, useRef, useState } from 'react';\nimport { capitalize } from '@material-ui/core/utils';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport Divider from '@material-ui/core/Divider';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport IconButton from '@material-ui/core/IconButton';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport Typography from '@material-ui/core/Typography';\nimport { default as CloseIcon } from '@material-ui/icons/Close';\nimport { useAlertDialogStyles as useStyles } from '../../utils/styles';\nimport { Alert, AlertStatus } from '../../types';\nimport { Maybe } from '@backstage-community/plugin-cost-insights-common';\nimport { choose, formOf } from '../../utils/alerts';\n\nconst DEFAULT_FORM_ID = 'alert-form';\n\ntype AlertDialogProps = {\n  open: boolean;\n  group: string;\n  alert: Maybe<Alert>;\n  status: Maybe<AlertStatus>;\n  onClose: () => void;\n  onSubmit: (data: any) => void;\n};\n\nexport const AlertDialog = ({\n  open,\n  group,\n  alert,\n  status,\n  onClose,\n  onSubmit,\n}: AlertDialogProps) => {\n  const classes = useStyles();\n  const [isSubmitDisabled, setSubmitDisabled] = useState(true);\n  const formRef = useRef<Maybe<HTMLFormElement>>(null);\n\n  useEffect(() => {\n    setSubmitDisabled(open);\n  }, [open]);\n\n  function disableSubmit(isDisabled: boolean) {\n    setSubmitDisabled(isDisabled);\n  }\n\n  function onDialogClose() {\n    onClose();\n    setSubmitDisabled(true);\n  }\n\n  const [action, actioned] = choose(\n    status,\n    [\n      ['snooze', 'snoozed'],\n      ['accept', 'accepted'],\n      ['dismiss', 'dismissed'],\n    ],\n    ['', ''],\n  );\n\n  const TransitionProps = {\n    mountOnEnter: true,\n    unmountOnExit: true,\n    onEntered() {\n      if (formRef.current) {\n        formRef.current.id = DEFAULT_FORM_ID;\n      }\n    },\n  };\n\n  const Form = formOf(alert, status);\n\n  return (\n    <Dialog\n      open={open}\n      onClose={onDialogClose}\n      scroll=\"body\"\n      maxWidth=\"lg\"\n      TransitionProps={TransitionProps}\n    >\n      <Box display=\"flex\" justifyContent=\"flex-end\">\n        <IconButton\n          className={classes.icon}\n          disableRipple\n          aria-label=\"Close\"\n          onClick={onDialogClose}\n        >\n          <CloseIcon />\n        </IconButton>\n      </Box>\n      <DialogContent className={classes.content}>\n        <Box mb={1.5}>\n          <Typography variant=\"h5\">\n            <b>{capitalize(action)} this action item?</b>\n          </Typography>\n          <Typography variant=\"h6\" color=\"textSecondary\">\n            <b>\n              This action item will be {actioned} for all of {group}.\n            </b>\n          </Typography>\n        </Box>\n        <Box\n          display=\"flex\"\n          flexDirection=\"column\"\n          bgcolor=\"alertBackground\"\n          p={2}\n          mb={1.5}\n          borderRadius={4}\n        >\n          <Typography>\n            <b>{alert?.title}</b>\n          </Typography>\n          <Typography color=\"textSecondary\">{alert?.subtitle}</Typography>\n        </Box>\n        {Form && (\n          <Form\n            ref={formRef}\n            alert={alert}\n            onSubmit={onSubmit}\n            disableSubmit={disableSubmit}\n          />\n        )}\n      </DialogContent>\n      <Divider />\n      <DialogActions className={classes.actions} disableSpacing>\n        {Form ? (\n          <Button\n            type=\"submit\"\n            color=\"primary\"\n            variant=\"contained\"\n            aria-label={action}\n            form={DEFAULT_FORM_ID}\n            disabled={isSubmitDisabled}\n          >\n            {capitalize(action)}\n          </Button>\n        ) : (\n          <Button\n            type=\"button\"\n            color=\"primary\"\n            variant=\"contained\"\n            aria-label={action}\n            onClick={() => onSubmit(null)}\n          >\n            {capitalize(action)}\n          </Button>\n        )}\n      </DialogActions>\n    </Dialog>\n  );\n};\n"],"names":["useStyles"],"mappings":"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"}

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

@@ -0,0 +1,157 @@
+import React, { useState, useEffect } from 'react';
+import pluralize from 'pluralize';
+import Box from '@material-ui/core/Box';
+import Grid from '@material-ui/core/Grid';
+import Snackbar from '@material-ui/core/Snackbar';
+import Alert from '@material-ui/lab/Alert';
+import { AlertDialog } from './AlertDialog.esm.js';
+import { AlertStatusSummary } from './AlertStatusSummary.esm.js';
+import { AlertStatusSummaryButton } from './AlertStatusSummaryButton.esm.js';
+import { AlertInsightsHeader } from './AlertInsightsHeader.esm.js';
+import { AlertInsightsSection } from './AlertInsightsSection.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 { useScroll, ScrollType } from '../../hooks/useScroll.esm.js';
+import '../../hooks/useLastCompleteBillingDate.esm.js';
+import { DefaultLoadingAction } from '../../utils/loading.esm.js';
+import { AlertStatus } from '../../types/Alert.esm.js';
+import { isStatusSnoozed, isStatusAccepted, isStatusDismissed, sumOfAllAlerts } from '../../utils/alerts.esm.js';
+import { ScrollAnchor } from '../../utils/scroll.esm.js';
+
+const mapLoadingToAlerts = ({ dispatch }) => (isLoading) => dispatch({ [DefaultLoadingAction.CostInsightsAlerts]: isLoading });
+const AlertInsights = ({
+  group,
+  active,
+  snoozed,
+  accepted,
+  dismissed,
+  onChange
+}) => {
+  const [scroll] = useScroll();
+  const [alert, setAlert] = useState(null);
+  const dispatchLoadingAlerts = useLoading(mapLoadingToAlerts);
+  const [status, setStatus] = useState(null);
+  const [data, setData] = useState(void 0);
+  const [error, setError] = useState(null);
+  const [isDialogOpen, setDialogOpen] = useState(false);
+  const [isSummaryOpen, setSummaryOpen] = useState(false);
+  const [isSnackbarOpen, setSnackbarOpen] = useState(false);
+  useEffect(() => {
+    async function callAlertHook(options2, callback) {
+      setAlert(null);
+      setStatus(null);
+      setData(void 0);
+      setDialogOpen(false);
+      dispatchLoadingAlerts(true);
+      try {
+        const alerts = await callback(options2);
+        onChange(alerts);
+      } catch (e) {
+        setError(e);
+      } finally {
+        dispatchLoadingAlerts(false);
+      }
+    }
+    const options = { data, group };
+    const onSnoozed = alert?.onSnoozed?.bind(alert);
+    const onAccepted = alert?.onAccepted?.bind(alert);
+    const onDismissed = alert?.onDismissed?.bind(alert);
+    if (data !== void 0) {
+      if (isStatusSnoozed(status) && onSnoozed) {
+        callAlertHook(options, onSnoozed);
+      } else if (isStatusAccepted(status) && onAccepted) {
+        callAlertHook(options, onAccepted);
+      } else if (isStatusDismissed(status) && onDismissed) {
+        callAlertHook(options, onDismissed);
+      }
+    }
+  }, [group, data, alert, status, onChange, dispatchLoadingAlerts]);
+  useEffect(() => {
+    if (scroll === ScrollType.AlertSummary) {
+      setSummaryOpen(true);
+    }
+  }, [scroll]);
+  useEffect(() => {
+    setDialogOpen(!!status);
+  }, [status]);
+  useEffect(() => {
+    setSnackbarOpen(!!error);
+  }, [error]);
+  function onSnooze(alertToSnooze) {
+    setAlert(alertToSnooze);
+    setStatus(AlertStatus.Snoozed);
+  }
+  function onAccept(alertToAccept) {
+    setAlert(alertToAccept);
+    setStatus(AlertStatus.Accepted);
+  }
+  function onDismiss(alertToDismiss) {
+    setAlert(alertToDismiss);
+    setStatus(AlertStatus.Dismissed);
+  }
+  function onSnackbarClose() {
+    setError(null);
+  }
+  function onDialogClose() {
+    setAlert(null);
+    setStatus(null);
+  }
+  function onDialogFormSubmit(formData) {
+    setData(formData);
+  }
+  function onSummaryButtonClick() {
+    setSummaryOpen((prevOpen) => !prevOpen);
+  }
+  const total = [accepted, snoozed, dismissed].reduce(sumOfAllAlerts, 0);
+  const isAlertStatusSummaryDisplayed = !!total;
+  const isAlertInsightSectionDisplayed = !!active.length;
+  return /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "column", spacing: 2 }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+    AlertInsightsHeader,
+    {
+      title: "Your team's action items",
+      subtitle: isAlertInsightSectionDisplayed ? "This section outlines suggested action items your team can address to improve cloud costs." : "All of your team's action items are hidden. Maybe it's time to give them another look?"
+    }
+  )), isAlertInsightSectionDisplayed && /* @__PURE__ */ React.createElement(Grid, { item: true, container: true, direction: "column", spacing: 4 }, active.map((activeAlert, index) => /* @__PURE__ */ React.createElement(Grid, { item: true, key: `alert-insights-section-${index}` }, /* @__PURE__ */ React.createElement(
+    AlertInsightsSection,
+    {
+      alert: activeAlert,
+      number: index + 1,
+      onSnooze,
+      onAccept,
+      onDismiss
+    }
+  )))), isAlertStatusSummaryDisplayed && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Box, { position: "relative", display: "flex", justifyContent: "flex-end" }, /* @__PURE__ */ React.createElement(ScrollAnchor, { id: ScrollType.AlertSummary }), /* @__PURE__ */ React.createElement(AlertStatusSummaryButton, { onClick: onSummaryButtonClick }, pluralize("Hidden Action Item", total))), /* @__PURE__ */ React.createElement(
+    AlertStatusSummary,
+    {
+      open: isSummaryOpen,
+      snoozed,
+      accepted,
+      dismissed
+    }
+  )), /* @__PURE__ */ React.createElement(
+    AlertDialog,
+    {
+      group,
+      open: isDialogOpen,
+      alert,
+      status,
+      onClose: onDialogClose,
+      onSubmit: onDialogFormSubmit
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Snackbar,
+    {
+      open: isSnackbarOpen,
+      autoHideDuration: 6e3,
+      anchorOrigin: { vertical: "top", horizontal: "center" },
+      onClose: onSnackbarClose
+    },
+    /* @__PURE__ */ React.createElement(Alert, { onClose: onSnackbarClose, severity: "error" }, error?.message)
+  ));
+};
+
+export { AlertInsights };
+//# sourceMappingURL=AlertInsights.esm.js.map