@backstage-community/plugin-cost-insights 0.23.0 → 0.24.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @backstage-community/plugin-cost-insights
 
+## 0.24.1
+
+### Patch Changes
+
+- efd0824: The cost breakdown tab for the cost insights page will have a horizontal scroll when adding multiple cost breakdowns
+- 9a6edd2: Updated dependency `@types/recharts` to `^2.0.0`.
+
+## 0.24.0
+
+### Minor Changes
+
+- 611f143: Backstage version bump to v1.46.1
+
+### Patch Changes
+
+- Updated dependencies [611f143]
+  - @backstage-community/plugin-cost-insights-common@0.11.0
+
 ## 0.23.0
 
 ### Minor Changes

package/dist/alpha.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import * as react from 'react';
 import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
-import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
 
 declare const _default: _backstage_frontend_plugin_api.OverridableFrontendPlugin<{
     root: _backstage_frontend_plugin_api.RouteRef<undefined>;
@@ -11,11 +10,11 @@ declare const _default: _backstage_frontend_plugin_api.OverridableFrontendPlugin
         name: undefined;
         config: {};
         configInput: {};
-        output: _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_core_plugin_api.AnyApiFactory, "core.api.factory", {}>;
+        output: _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_frontend_plugin_api.AnyApiFactory, "core.api.factory", {}>;
         inputs: {};
         params: <TApi, TImpl extends TApi, TDeps extends {
             [x: string]: unknown;
-        }>(params: _backstage_core_plugin_api.ApiFactory<TApi, TImpl, TDeps>) => _backstage_frontend_plugin_api.ExtensionBlueprintParams<_backstage_core_plugin_api.AnyApiFactory>;
+        }>(params: _backstage_frontend_plugin_api.ApiFactory<TApi, TImpl, TDeps>) => _backstage_frontend_plugin_api.ExtensionBlueprintParams<_backstage_frontend_plugin_api.AnyApiFactory>;
     }>;
     "nav-item:cost-insights": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
         kind: "nav-item";
@@ -24,13 +23,13 @@ declare const _default: _backstage_frontend_plugin_api.OverridableFrontendPlugin
         configInput: {};
         output: _backstage_frontend_plugin_api.ExtensionDataRef<{
             title: string;
-            icon: _backstage_core_plugin_api.IconComponent;
+            icon: _backstage_frontend_plugin_api.IconComponent;
             routeRef: _backstage_frontend_plugin_api.RouteRef<undefined>;
         }, "core.nav-item.target", {}>;
         inputs: {};
         params: {
             title: string;
-            icon: _backstage_core_plugin_api.IconComponent;
+            icon: _backstage_frontend_plugin_api.IconComponent;
             routeRef: _backstage_frontend_plugin_api.RouteRef<undefined>;
         };
     }>;

package/dist/components/CostOverviewCard/CostOverviewCard.esm.js

@@ -60,6 +60,8 @@ const CostOverviewCard = ({
         indicatorColor: "primary",
         onChange: (_, index) => setTabIndex(index),
         value: safeTabIndex,
+        variant: "scrollable",
+        scrollButtons: "auto",
         children: tabs.map((tab, index) => /* @__PURE__ */ jsx(
           Tab,
           {

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

@@ -1 +1 @@
-{"version":3,"file":"CostOverviewCard.esm.js","sources":["../../../src/components/CostOverviewCard/CostOverviewCard.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 { useEffect, useState } from 'react';\nimport Box from '@material-ui/core/Box';\nimport { capitalize } from '@material-ui/core/utils';\nimport Card from '@material-ui/core/Card';\nimport CardContent from '@material-ui/core/CardContent';\nimport Divider from '@material-ui/core/Divider';\nimport Tab from '@material-ui/core/Tab';\nimport Tabs from '@material-ui/core/Tabs';\nimport { useTheme } from '@material-ui/core/styles';\nimport { CostOverviewChart } from './CostOverviewChart';\nimport { CostOverviewBreakdownChart } from './CostOverviewBreakdownChart';\nimport { CostOverviewHeader } from './CostOverviewHeader';\nimport { MetricSelect } from '../MetricSelect';\nimport { PeriodSelect } from '../PeriodSelect';\nimport { useConfig, useFilters } from '../../hooks';\nimport { mapFiltersToProps } from './selector';\nimport { DefaultNavigation } from '../../utils/navigation';\nimport { findAlways } from '../../utils/assert';\nimport { CostInsightsTheme } from '../../types';\nimport {\n  Cost,\n  Maybe,\n  MetricData,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { useOverviewTabsStyles } from '../../utils/styles';\nimport { ScrollAnchor } from '../../utils/scroll';\n\nexport type CostOverviewCardProps = {\n  dailyCostData: Cost;\n  metricData: Maybe<MetricData>;\n};\n\nexport const CostOverviewCard = ({\n  dailyCostData,\n  metricData,\n}: CostOverviewCardProps) => {\n  const theme = useTheme<CostInsightsTheme>();\n  const styles = useOverviewTabsStyles(theme);\n  const config = useConfig();\n  const [tabIndex, setTabIndex] = useState(0);\n  const { setDuration, setProject, setMetric, ...filters } =\n    useFilters(mapFiltersToProps);\n\n  // Reset tabIndex if breakdowns available change\n  useEffect(() => {\n    // Intentionally off-by-one to account for the overview tab\n    const lastIndex = Object.keys(dailyCostData.groupedCosts ?? {}).length;\n    if (tabIndex > lastIndex) {\n      setTabIndex(0);\n    }\n  }, [dailyCostData, tabIndex, setTabIndex]);\n\n  const metric = filters.metric\n    ? findAlways(config.metrics, m => m.kind === filters.metric)\n    : null;\n\n  const breakdownTabs = Object.keys(dailyCostData.groupedCosts ?? {}).map(\n    key => ({\n      id: key,\n      label: `Breakdown by ${key}`,\n      title: `Cloud Cost By ${capitalize(key)}`,\n    }),\n  );\n  const tabs = [\n    { id: 'overview', label: 'Total cost', title: 'Cloud Cost' },\n  ].concat(breakdownTabs);\n  // tabIndex can temporarily be invalid while the useEffect above processes\n  const safeTabIndex = tabIndex > tabs.length - 1 ? 0 : tabIndex;\n\n  const OverviewTabs = () => {\n    return (\n      <>\n        <Tabs\n          indicatorColor=\"primary\"\n          onChange={(_, index) => setTabIndex(index)}\n          value={safeTabIndex}\n        >\n          {tabs.map((tab, index) => (\n            <Tab\n              className={styles.default}\n              label={tab.label}\n              key={tab.id}\n              value={index}\n              classes={{ selected: styles.selected }}\n            />\n          ))}\n        </Tabs>\n      </>\n    );\n  };\n\n  // Metrics can only be selected on the total cost graph\n  const showMetricSelect =\n    metricData && config.metrics.length && safeTabIndex === 0;\n\n  return (\n    <Card style={{ position: 'relative', overflow: 'visible' }}>\n      <ScrollAnchor id={DefaultNavigation.CostOverviewCard} />\n      <CardContent>\n        {dailyCostData.groupedCosts && <OverviewTabs />}\n        <CostOverviewHeader title={tabs[safeTabIndex].title}>\n          <PeriodSelect duration={filters.duration} onSelect={setDuration} />\n        </CostOverviewHeader>\n        <Divider />\n        <Box ml={2} my={1} display=\"flex\" flexDirection=\"column\">\n          {safeTabIndex === 0 ? (\n            <CostOverviewChart\n              dailyCostData={dailyCostData}\n              metric={metric}\n              metricData={metricData}\n            />\n          ) : (\n            <CostOverviewBreakdownChart\n              costBreakdown={dailyCostData.groupedCosts![tabs[safeTabIndex].id]}\n            />\n          )}\n        </Box>\n        <Box display=\"flex\" justifyContent=\"flex-end\" alignItems=\"center\">\n          {showMetricSelect && (\n            <MetricSelect\n              metric={filters.metric}\n              metrics={config.metrics}\n              onSelect={setMetric}\n            />\n          )}\n        </Box>\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CostOverviewCard.esm.js","sources":["../../../src/components/CostOverviewCard/CostOverviewCard.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 { useEffect, useState } from 'react';\nimport Box from '@material-ui/core/Box';\nimport { capitalize } from '@material-ui/core/utils';\nimport Card from '@material-ui/core/Card';\nimport CardContent from '@material-ui/core/CardContent';\nimport Divider from '@material-ui/core/Divider';\nimport Tab from '@material-ui/core/Tab';\nimport Tabs from '@material-ui/core/Tabs';\nimport { useTheme } from '@material-ui/core/styles';\nimport { CostOverviewChart } from './CostOverviewChart';\nimport { CostOverviewBreakdownChart } from './CostOverviewBreakdownChart';\nimport { CostOverviewHeader } from './CostOverviewHeader';\nimport { MetricSelect } from '../MetricSelect';\nimport { PeriodSelect } from '../PeriodSelect';\nimport { useConfig, useFilters } from '../../hooks';\nimport { mapFiltersToProps } from './selector';\nimport { DefaultNavigation } from '../../utils/navigation';\nimport { findAlways } from '../../utils/assert';\nimport { CostInsightsTheme } from '../../types';\nimport {\n  Cost,\n  Maybe,\n  MetricData,\n} from '@backstage-community/plugin-cost-insights-common';\nimport { useOverviewTabsStyles } from '../../utils/styles';\nimport { ScrollAnchor } from '../../utils/scroll';\n\nexport type CostOverviewCardProps = {\n  dailyCostData: Cost;\n  metricData: Maybe<MetricData>;\n};\n\nexport const CostOverviewCard = ({\n  dailyCostData,\n  metricData,\n}: CostOverviewCardProps) => {\n  const theme = useTheme<CostInsightsTheme>();\n  const styles = useOverviewTabsStyles(theme);\n  const config = useConfig();\n  const [tabIndex, setTabIndex] = useState(0);\n  const { setDuration, setProject, setMetric, ...filters } =\n    useFilters(mapFiltersToProps);\n\n  // Reset tabIndex if breakdowns available change\n  useEffect(() => {\n    // Intentionally off-by-one to account for the overview tab\n    const lastIndex = Object.keys(dailyCostData.groupedCosts ?? {}).length;\n    if (tabIndex > lastIndex) {\n      setTabIndex(0);\n    }\n  }, [dailyCostData, tabIndex, setTabIndex]);\n\n  const metric = filters.metric\n    ? findAlways(config.metrics, m => m.kind === filters.metric)\n    : null;\n\n  const breakdownTabs = Object.keys(dailyCostData.groupedCosts ?? {}).map(\n    key => ({\n      id: key,\n      label: `Breakdown by ${key}`,\n      title: `Cloud Cost By ${capitalize(key)}`,\n    }),\n  );\n  const tabs = [\n    { id: 'overview', label: 'Total cost', title: 'Cloud Cost' },\n  ].concat(breakdownTabs);\n  // tabIndex can temporarily be invalid while the useEffect above processes\n  const safeTabIndex = tabIndex > tabs.length - 1 ? 0 : tabIndex;\n\n  const OverviewTabs = () => {\n    return (\n      <>\n        <Tabs\n          indicatorColor=\"primary\"\n          onChange={(_, index) => setTabIndex(index)}\n          value={safeTabIndex}\n          variant=\"scrollable\"\n          scrollButtons=\"auto\"\n        >\n          {tabs.map((tab, index) => (\n            <Tab\n              className={styles.default}\n              label={tab.label}\n              key={tab.id}\n              value={index}\n              classes={{ selected: styles.selected }}\n            />\n          ))}\n        </Tabs>\n      </>\n    );\n  };\n\n  // Metrics can only be selected on the total cost graph\n  const showMetricSelect =\n    metricData && config.metrics.length && safeTabIndex === 0;\n\n  return (\n    <Card style={{ position: 'relative', overflow: 'visible' }}>\n      <ScrollAnchor id={DefaultNavigation.CostOverviewCard} />\n      <CardContent>\n        {dailyCostData.groupedCosts && <OverviewTabs />}\n        <CostOverviewHeader title={tabs[safeTabIndex].title}>\n          <PeriodSelect duration={filters.duration} onSelect={setDuration} />\n        </CostOverviewHeader>\n        <Divider />\n        <Box ml={2} my={1} display=\"flex\" flexDirection=\"column\">\n          {safeTabIndex === 0 ? (\n            <CostOverviewChart\n              dailyCostData={dailyCostData}\n              metric={metric}\n              metricData={metricData}\n            />\n          ) : (\n            <CostOverviewBreakdownChart\n              costBreakdown={dailyCostData.groupedCosts![tabs[safeTabIndex].id]}\n            />\n          )}\n        </Box>\n        <Box display=\"flex\" justifyContent=\"flex-end\" alignItems=\"center\">\n          {showMetricSelect && (\n            <MetricSelect\n              metric={filters.metric}\n              metrics={config.metrics}\n              onSelect={setMetric}\n            />\n          )}\n        </Box>\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
+import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
 import * as common from '@backstage-community/plugin-cost-insights-common';
 import { Maybe as Maybe$1, ChangeStatistic as ChangeStatistic$1, Group as Group$1, Project as Project$1, Cost as Cost$1, MetricData as MetricData$1, Entity as Entity$1, Metric as Metric$1, Product as Product$1 } from '@backstage-community/plugin-cost-insights-common';
 import { ForwardRefExoticComponent, RefAttributes, ReactNode, PropsWithChildren, Dispatch, SetStateAction } from 'react';
@@ -495,7 +496,7 @@ type CostInsightsApi = {
     getAlerts(group: string): Promise<Alert[]>;
 };
 /** @public */
-declare const costInsightsApiRef: _backstage_core_plugin_api.ApiRef<CostInsightsApi>;
+declare const costInsightsApiRef: _backstage_frontend_plugin_api.ApiRef<CostInsightsApi>;
 
 /** @public */
 declare class ExampleCostInsightsClient implements CostInsightsApi {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage-community/plugin-cost-insights",
-  "version": "0.23.0",
+  "version": "0.24.1",
   "description": "A Backstage plugin that helps you keep track of your cloud spend",
   "backstage": {
     "role": "frontend-plugin",
@@ -67,21 +67,21 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage-community/plugin-cost-insights-common": "^0.10.0",
+    "@backstage-community/plugin-cost-insights-common": "^0.11.0",
     "@backstage/catalog-model": "^1.7.6",
     "@backstage/config": "^1.3.6",
-    "@backstage/core-compat-api": "^0.5.4",
-    "@backstage/core-components": "^0.18.3",
-    "@backstage/core-plugin-api": "^1.12.0",
-    "@backstage/frontend-plugin-api": "^0.13.1",
-    "@backstage/plugin-catalog-react": "^1.21.3",
-    "@backstage/theme": "^0.7.0",
+    "@backstage/core-compat-api": "^0.5.5",
+    "@backstage/core-components": "^0.18.4",
+    "@backstage/core-plugin-api": "^1.12.1",
+    "@backstage/frontend-plugin-api": "^0.13.2",
+    "@backstage/plugin-catalog-react": "^1.21.4",
+    "@backstage/theme": "^0.7.1",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
     "@material-ui/styles": "^4.9.6",
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "@types/recharts": "^1.8.14",
+    "@types/recharts": "^2.0.0",
     "classnames": "^2.2.6",
     "history": "^5.0.0",
     "luxon": "^3.0.0",
@@ -93,10 +93,10 @@
     "yup": "^1.0.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.34.5",
-    "@backstage/core-app-api": "^1.19.2",
-    "@backstage/dev-utils": "^1.1.17",
-    "@backstage/test-utils": "^1.7.13",
+    "@backstage/cli": "^0.35.1",
+    "@backstage/core-app-api": "^1.19.3",
+    "@backstage/dev-utils": "^1.1.18",
+    "@backstage/test-utils": "^1.7.14",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^15.0.0",
@@ -104,7 +104,7 @@
     "@types/lodash": "^4.14.151",
     "@types/pluralize": "^0.0.33",
     "@types/react-dom": "^18.2.19",
-    "@types/recharts": "^1.8.14",
+    "@types/recharts": "^2.0.0",
     "@types/regression": "^2.0.0",
     "@types/yup": "^0.32.0",
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0",