@electrolux-oss/plugin-infrawallet 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -4
- package/dist/api/functions.esm.js +1 -8
- package/dist/api/functions.esm.js.map +1 -1
- package/dist/components/ColumnsChartComponent/ColumnsChartComponent.esm.js +1 -16
- package/dist/components/ColumnsChartComponent/ColumnsChartComponent.esm.js.map +1 -1
- package/dist/components/CostReportsTableComponent/CostReportsTableComponent.esm.js +4 -19
- package/dist/components/CostReportsTableComponent/CostReportsTableComponent.esm.js.map +1 -1
- package/dist/components/CostReportsTableComponent/TrendBarComponent.esm.js +1 -6
- package/dist/components/CostReportsTableComponent/TrendBarComponent.esm.js.map +1 -1
- package/dist/components/ErrorsAlertComponent/ErrorsAlertComponent.esm.js +40 -0
- package/dist/components/ErrorsAlertComponent/ErrorsAlertComponent.esm.js.map +1 -0
- package/dist/components/InfraWalletIcon.esm.js +53 -1
- package/dist/components/InfraWalletIcon.esm.js.map +1 -1
- package/dist/components/PieChartComponent/PieChartComponent.esm.js +2 -14
- package/dist/components/PieChartComponent/PieChartComponent.esm.js.map +1 -1
- package/dist/components/ReportsComponent/ReportsComponent.esm.js +13 -36
- package/dist/components/ReportsComponent/ReportsComponent.esm.js.map +1 -1
- package/dist/components/TopbarComponent/TopbarComponent.esm.js +1 -15
- package/dist/components/TopbarComponent/TopbarComponent.esm.js.map +1 -1
- package/dist/plugin.esm.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -163,7 +163,7 @@ backend:
|
|
|
163
163
|
|
|
164
164
|
4. add InfraWallet to the sidebar (optional)
|
|
165
165
|
|
|
166
|
-
modify `packages/app/src/
|
|
166
|
+
modify `packages/app/src/components/Root/Root.tsx` and add the following code
|
|
167
167
|
|
|
168
168
|
```ts
|
|
169
169
|
...
|
|
@@ -198,9 +198,7 @@ import { createRouter } from '@electrolux-oss/plugin-infrawallet-backend';
|
|
|
198
198
|
import { Router } from 'express';
|
|
199
199
|
import { PluginEnvironment } from '../types';
|
|
200
200
|
|
|
201
|
-
export default async function createPlugin(
|
|
202
|
-
env: PluginEnvironment,
|
|
203
|
-
): Promise<Router> {
|
|
201
|
+
export default async function createPlugin(env: PluginEnvironment): Promise<Router> {
|
|
204
202
|
return await createRouter({
|
|
205
203
|
logger: env.logger,
|
|
206
204
|
config: env.config,
|
|
@@ -73,14 +73,7 @@ const aggregateCostReports = (reports, aggregatedBy) => {
|
|
|
73
73
|
};
|
|
74
74
|
const getAllReportTags = (reports) => {
|
|
75
75
|
const tags = /* @__PURE__ */ new Set();
|
|
76
|
-
const reservedKeys = [
|
|
77
|
-
"id",
|
|
78
|
-
"name",
|
|
79
|
-
"service",
|
|
80
|
-
"category",
|
|
81
|
-
"provider",
|
|
82
|
-
"reports"
|
|
83
|
-
];
|
|
76
|
+
const reservedKeys = ["id", "name", "service", "category", "provider", "reports"];
|
|
84
77
|
reports.forEach((report) => {
|
|
85
78
|
Object.keys(report).forEach((key) => {
|
|
86
79
|
if (reservedKeys.indexOf(key) === -1) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"functions.esm.js","sources":["../../src/api/functions.ts"],"sourcesContent":["import { format, parse, subMonths } from 'date-fns';\nimport { reduce } from 'lodash';\nimport moment from 'moment';\nimport { Report } from './types';\n\nexport const mergeCostReports = (
|
|
1
|
+
{"version":3,"file":"functions.esm.js","sources":["../../src/api/functions.ts"],"sourcesContent":["import { format, parse, subMonths } from 'date-fns';\nimport { reduce } from 'lodash';\nimport moment from 'moment';\nimport { Report } from './types';\n\nexport const mergeCostReports = (reports: Report[], threshold: number): Report[] => {\n const totalCosts: { id: string; total: number }[] = [];\n reports.forEach(report => {\n let total = 0;\n Object.values(report.reports).forEach(v => {\n total += v as number;\n });\n totalCosts.push({ id: report.id, total: total });\n });\n const sortedTotalCosts = totalCosts.sort((a, b) => b.total - a.total);\n const idsToBeKept = sortedTotalCosts.slice(0, threshold).map(v => v.id);\n\n const mergedReports = reduce(\n reports,\n (accumulator: { [key: string]: Report }, report) => {\n let keyName = 'others';\n if (idsToBeKept.includes(report.id)) {\n keyName = report.id;\n }\n if (!accumulator[keyName]) {\n accumulator[keyName] = {\n id: keyName,\n reports: {},\n };\n }\n\n Object.keys(report.reports).forEach(key => {\n if (accumulator[keyName].reports[key]) {\n accumulator[keyName].reports[key] += report.reports[key];\n } else {\n accumulator[keyName].reports[key] = report.reports[key];\n }\n });\n return accumulator;\n },\n {},\n );\n\n return Object.values(mergedReports);\n};\n\nexport const aggregateCostReports = (reports: Report[], aggregatedBy?: string): Report[] => {\n const aggregatedReports: { [key: string]: Report } = reduce(\n reports,\n (accumulator, report) => {\n let keyName: string = 'no value';\n if (aggregatedBy && aggregatedBy in report) {\n keyName = report[aggregatedBy] as string;\n } else if (aggregatedBy === 'none') {\n keyName = 'Total cloud costs';\n }\n\n if (!accumulator[keyName]) {\n accumulator[keyName] = {\n id: keyName,\n reports: {},\n } as {\n id: string;\n reports: { [key: string]: number };\n [key: string]: any;\n };\n\n if (aggregatedBy !== undefined) {\n accumulator[keyName][aggregatedBy] = keyName;\n }\n }\n\n Object.keys(report.reports).forEach(key => {\n if (accumulator[keyName].reports[key]) {\n accumulator[keyName].reports[key] += report.reports[key];\n } else {\n accumulator[keyName].reports[key] = report.reports[key];\n }\n });\n return accumulator;\n },\n {} as { [key: string]: Report },\n );\n return Object.values(aggregatedReports);\n};\n\nexport const getAllReportTags = (reports: Report[]): string[] => {\n const tags = new Set<string>();\n const reservedKeys = ['id', 'name', 'service', 'category', 'provider', 'reports'];\n reports.forEach(report => {\n Object.keys(report).forEach(key => {\n if (reservedKeys.indexOf(key) === -1) {\n tags.add(key);\n }\n });\n });\n return Array.from(tags);\n};\n\nexport const getPreviousMonth = (month: string): string => {\n const date = parse(month, 'yyyy-MM', new Date());\n const previousMonth = subMonths(date, 1);\n return format(previousMonth, 'yyyy-MM');\n};\n\nexport const getPeriodStrings = (granularity: string, startTime: Date, endTime: Date): string[] => {\n const result: string[] = [];\n const current = moment(startTime);\n\n while (current.isSameOrBefore(endTime) && current.isSameOrBefore(moment())) {\n if (granularity === 'monthly') {\n result.push(current.format('YYYY-MM'));\n current.add(1, 'months');\n } else {\n result.push(current.format('YYYY-MM-DD'));\n current.add(1, 'days');\n }\n }\n\n return result;\n};\n"],"names":[],"mappings":";;;;AAKa,MAAA,gBAAA,GAAmB,CAAC,OAAA,EAAmB,SAAgC,KAAA;AAClF,EAAA,MAAM,aAA8C,EAAC,CAAA;AACrD,EAAA,OAAA,CAAQ,QAAQ,CAAU,MAAA,KAAA;AACxB,IAAA,IAAI,KAAQ,GAAA,CAAA,CAAA;AACZ,IAAA,MAAA,CAAO,MAAO,CAAA,MAAA,CAAO,OAAO,CAAA,CAAE,QAAQ,CAAK,CAAA,KAAA;AACzC,MAAS,KAAA,IAAA,CAAA,CAAA;AAAA,KACV,CAAA,CAAA;AACD,IAAA,UAAA,CAAW,KAAK,EAAE,EAAA,EAAI,MAAO,CAAA,EAAA,EAAI,OAAc,CAAA,CAAA;AAAA,GAChD,CAAA,CAAA;AACD,EAAM,MAAA,gBAAA,GAAmB,WAAW,IAAK,CAAA,CAAC,GAAG,CAAM,KAAA,CAAA,CAAE,KAAQ,GAAA,CAAA,CAAE,KAAK,CAAA,CAAA;AACpE,EAAM,MAAA,WAAA,GAAc,iBAAiB,KAAM,CAAA,CAAA,EAAG,SAAS,CAAE,CAAA,GAAA,CAAI,CAAK,CAAA,KAAA,CAAA,CAAE,EAAE,CAAA,CAAA;AAEtE,EAAA,MAAM,aAAgB,GAAA,MAAA;AAAA,IACpB,OAAA;AAAA,IACA,CAAC,aAAwC,MAAW,KAAA;AAClD,MAAA,IAAI,OAAU,GAAA,QAAA,CAAA;AACd,MAAA,IAAI,WAAY,CAAA,QAAA,CAAS,MAAO,CAAA,EAAE,CAAG,EAAA;AACnC,QAAA,OAAA,GAAU,MAAO,CAAA,EAAA,CAAA;AAAA,OACnB;AACA,MAAI,IAAA,CAAC,WAAY,CAAA,OAAO,CAAG,EAAA;AACzB,QAAA,WAAA,CAAY,OAAO,CAAI,GAAA;AAAA,UACrB,EAAI,EAAA,OAAA;AAAA,UACJ,SAAS,EAAC;AAAA,SACZ,CAAA;AAAA,OACF;AAEA,MAAA,MAAA,CAAO,IAAK,CAAA,MAAA,CAAO,OAAO,CAAA,CAAE,QAAQ,CAAO,GAAA,KAAA;AACzC,QAAA,IAAI,WAAY,CAAA,OAAO,CAAE,CAAA,OAAA,CAAQ,GAAG,CAAG,EAAA;AACrC,UAAA,WAAA,CAAY,OAAO,CAAE,CAAA,OAAA,CAAQ,GAAG,CAAK,IAAA,MAAA,CAAO,QAAQ,GAAG,CAAA,CAAA;AAAA,SAClD,MAAA;AACL,UAAA,WAAA,CAAY,OAAO,CAAE,CAAA,OAAA,CAAQ,GAAG,CAAI,GAAA,MAAA,CAAO,QAAQ,GAAG,CAAA,CAAA;AAAA,SACxD;AAAA,OACD,CAAA,CAAA;AACD,MAAO,OAAA,WAAA,CAAA;AAAA,KACT;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAO,OAAA,MAAA,CAAO,OAAO,aAAa,CAAA,CAAA;AACpC,EAAA;AAEa,MAAA,oBAAA,GAAuB,CAAC,OAAA,EAAmB,YAAoC,KAAA;AAC1F,EAAA,MAAM,iBAA+C,GAAA,MAAA;AAAA,IACnD,OAAA;AAAA,IACA,CAAC,aAAa,MAAW,KAAA;AACvB,MAAA,IAAI,OAAkB,GAAA,UAAA,CAAA;AACtB,MAAI,IAAA,YAAA,IAAgB,gBAAgB,MAAQ,EAAA;AAC1C,QAAA,OAAA,GAAU,OAAO,YAAY,CAAA,CAAA;AAAA,OAC/B,MAAA,IAAW,iBAAiB,MAAQ,EAAA;AAClC,QAAU,OAAA,GAAA,mBAAA,CAAA;AAAA,OACZ;AAEA,MAAI,IAAA,CAAC,WAAY,CAAA,OAAO,CAAG,EAAA;AACzB,QAAA,WAAA,CAAY,OAAO,CAAI,GAAA;AAAA,UACrB,EAAI,EAAA,OAAA;AAAA,UACJ,SAAS,EAAC;AAAA,SACZ,CAAA;AAMA,QAAA,IAAI,iBAAiB,KAAW,CAAA,EAAA;AAC9B,UAAY,WAAA,CAAA,OAAO,CAAE,CAAA,YAAY,CAAI,GAAA,OAAA,CAAA;AAAA,SACvC;AAAA,OACF;AAEA,MAAA,MAAA,CAAO,IAAK,CAAA,MAAA,CAAO,OAAO,CAAA,CAAE,QAAQ,CAAO,GAAA,KAAA;AACzC,QAAA,IAAI,WAAY,CAAA,OAAO,CAAE,CAAA,OAAA,CAAQ,GAAG,CAAG,EAAA;AACrC,UAAA,WAAA,CAAY,OAAO,CAAE,CAAA,OAAA,CAAQ,GAAG,CAAK,IAAA,MAAA,CAAO,QAAQ,GAAG,CAAA,CAAA;AAAA,SAClD,MAAA;AACL,UAAA,WAAA,CAAY,OAAO,CAAE,CAAA,OAAA,CAAQ,GAAG,CAAI,GAAA,MAAA,CAAO,QAAQ,GAAG,CAAA,CAAA;AAAA,SACxD;AAAA,OACD,CAAA,CAAA;AACD,MAAO,OAAA,WAAA,CAAA;AAAA,KACT;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AACA,EAAO,OAAA,MAAA,CAAO,OAAO,iBAAiB,CAAA,CAAA;AACxC,EAAA;AAEa,MAAA,gBAAA,GAAmB,CAAC,OAAgC,KAAA;AAC/D,EAAM,MAAA,IAAA,uBAAW,GAAY,EAAA,CAAA;AAC7B,EAAA,MAAM,eAAe,CAAC,IAAA,EAAM,QAAQ,SAAW,EAAA,UAAA,EAAY,YAAY,SAAS,CAAA,CAAA;AAChF,EAAA,OAAA,CAAQ,QAAQ,CAAU,MAAA,KAAA;AACxB,IAAA,MAAA,CAAO,IAAK,CAAA,MAAM,CAAE,CAAA,OAAA,CAAQ,CAAO,GAAA,KAAA;AACjC,MAAA,IAAI,YAAa,CAAA,OAAA,CAAQ,GAAG,CAAA,KAAM,CAAI,CAAA,EAAA;AACpC,QAAA,IAAA,CAAK,IAAI,GAAG,CAAA,CAAA;AAAA,OACd;AAAA,KACD,CAAA,CAAA;AAAA,GACF,CAAA,CAAA;AACD,EAAO,OAAA,KAAA,CAAM,KAAK,IAAI,CAAA,CAAA;AACxB,EAAA;AAEa,MAAA,gBAAA,GAAmB,CAAC,KAA0B,KAAA;AACzD,EAAA,MAAM,OAAO,KAAM,CAAA,KAAA,EAAO,SAAW,kBAAA,IAAI,MAAM,CAAA,CAAA;AAC/C,EAAM,MAAA,aAAA,GAAgB,SAAU,CAAA,IAAA,EAAM,CAAC,CAAA,CAAA;AACvC,EAAO,OAAA,MAAA,CAAO,eAAe,SAAS,CAAA,CAAA;AACxC,EAAA;AAEO,MAAM,gBAAmB,GAAA,CAAC,WAAqB,EAAA,SAAA,EAAiB,OAA4B,KAAA;AACjG,EAAA,MAAM,SAAmB,EAAC,CAAA;AAC1B,EAAM,MAAA,OAAA,GAAU,OAAO,SAAS,CAAA,CAAA;AAEhC,EAAO,OAAA,OAAA,CAAQ,eAAe,OAAO,CAAA,IAAK,QAAQ,cAAe,CAAA,MAAA,EAAQ,CAAG,EAAA;AAC1E,IAAA,IAAI,gBAAgB,SAAW,EAAA;AAC7B,MAAA,MAAA,CAAO,IAAK,CAAA,OAAA,CAAQ,MAAO,CAAA,SAAS,CAAC,CAAA,CAAA;AACrC,MAAQ,OAAA,CAAA,GAAA,CAAI,GAAG,QAAQ,CAAA,CAAA;AAAA,KAClB,MAAA;AACL,MAAA,MAAA,CAAO,IAAK,CAAA,OAAA,CAAQ,MAAO,CAAA,YAAY,CAAC,CAAA,CAAA;AACxC,MAAQ,OAAA,CAAA,GAAA,CAAI,GAAG,MAAM,CAAA,CAAA;AAAA,KACvB;AAAA,GACF;AAEA,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}
|
|
@@ -183,22 +183,7 @@ const ColumnsChartComponent = ({
|
|
|
183
183
|
},
|
|
184
184
|
series
|
|
185
185
|
};
|
|
186
|
-
return /* @__PURE__ */ React.createElement(
|
|
187
|
-
Paper,
|
|
188
|
-
{
|
|
189
|
-
className: thumbnail ? classes.thumbnailPaper : classes.fixedHeightPaper
|
|
190
|
-
},
|
|
191
|
-
/* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "flex-end", spacing: 1 }, /* @__PURE__ */ React.createElement(Grid, { item: true }, "Monthly"), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Toggle, { onChange: (event) => granularitySetter(event.target.checked ? "daily" : "monthly") })), /* @__PURE__ */ React.createElement(Grid, { item: true }, "Daily")),
|
|
192
|
-
/* @__PURE__ */ React.createElement(
|
|
193
|
-
Chart,
|
|
194
|
-
{
|
|
195
|
-
options: state.options,
|
|
196
|
-
series: state.series,
|
|
197
|
-
type: "bar",
|
|
198
|
-
height: height ? height - 50 : 250
|
|
199
|
-
}
|
|
200
|
-
)
|
|
201
|
-
);
|
|
186
|
+
return /* @__PURE__ */ React.createElement(Paper, { className: thumbnail ? classes.thumbnailPaper : classes.fixedHeightPaper }, /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "flex-end", spacing: 1 }, /* @__PURE__ */ React.createElement(Grid, { item: true }, "Monthly"), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Toggle, { onChange: (event) => granularitySetter(event.target.checked ? "daily" : "monthly") })), /* @__PURE__ */ React.createElement(Grid, { item: true }, "Daily")), /* @__PURE__ */ React.createElement(Chart, { options: state.options, series: state.series, type: "bar", height: height ? height - 50 : 250 }));
|
|
202
187
|
};
|
|
203
188
|
|
|
204
189
|
export { ColumnsChartComponent };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnsChartComponent.esm.js","sources":["../../../src/components/ColumnsChartComponent/ColumnsChartComponent.tsx"],"sourcesContent":["import { Grid, Paper, Switch } from '@material-ui/core';\nimport { withStyles, makeStyles, useTheme } from '@material-ui/core/styles';\nimport humanFormat from 'human-format';\nimport React, { FC } from 'react';\nimport Chart from 'react-apexcharts';\nimport { ColumnsChartComponentProps } from '../types';\n\nconst Toggle = withStyles(
|
|
1
|
+
{"version":3,"file":"ColumnsChartComponent.esm.js","sources":["../../../src/components/ColumnsChartComponent/ColumnsChartComponent.tsx"],"sourcesContent":["import { Grid, Paper, Switch } from '@material-ui/core';\nimport { withStyles, makeStyles, useTheme } from '@material-ui/core/styles';\nimport humanFormat from 'human-format';\nimport React, { FC } from 'react';\nimport Chart from 'react-apexcharts';\nimport { ColumnsChartComponentProps } from '../types';\n\nconst Toggle = withStyles(theme => ({\n root: {\n width: 28,\n height: 16,\n padding: 0,\n display: 'flex',\n },\n switchBase: {\n padding: 2,\n color: theme.palette.grey[500],\n '&$checked': {\n transform: 'translateX(12px)',\n color: theme.palette.common.white,\n '& + $track': {\n opacity: 1,\n backgroundColor: theme.palette.primary.main,\n borderColor: theme.palette.primary.main,\n },\n },\n },\n thumb: {\n width: 12,\n height: 12,\n boxShadow: 'none',\n },\n track: {\n border: `1px solid ${theme.palette.grey[500]}`,\n borderRadius: 16 / 2,\n opacity: 1,\n backgroundColor: theme.palette.common.white,\n },\n checked: {},\n}))(Switch);\n\nexport const ColumnsChartComponent: FC<ColumnsChartComponentProps> = ({\n granularitySetter,\n categories,\n series,\n height,\n thumbnail,\n dataPointSelectionHandler,\n}) => {\n const defaultTheme = useTheme();\n const useStyles = makeStyles({\n fixedHeightPaper: {\n padding: '16px',\n display: 'flex',\n overflow: 'auto',\n flexDirection: 'column',\n height: height ? height : 300,\n },\n thumbnailPaper: {\n display: 'flex',\n overflow: 'auto',\n flexDirection: 'column',\n height: height ? height - 50 : 100,\n },\n });\n const classes = useStyles();\n const customScale = humanFormat.Scale.create(['', 'K', 'M', 'B'], 1000);\n\n const state = thumbnail\n ? {\n options: {\n chart: {\n animations: {\n enabled: false,\n },\n zoom: {\n enabled: false,\n },\n stacked: true,\n toolbar: {\n show: false,\n },\n sparkline: {\n enabled: true,\n },\n },\n xaxis: {\n categories: categories,\n },\n theme: {\n mode: defaultTheme.palette.type,\n },\n },\n series: series,\n }\n : {\n options: {\n chart: {\n animations: {\n enabled: false,\n },\n stacked: true,\n toolbar: {\n show: false,\n },\n events: {\n dataPointSelection: dataPointSelectionHandler,\n },\n },\n xaxis: {\n categories: categories,\n },\n yaxis: {\n decimalsInFloat: 2,\n },\n dataLabels: {\n enabled: false,\n },\n tooltip: {\n y: {\n formatter: (value: number) => {\n return `$${humanFormat(value, {\n scale: customScale,\n separator: '',\n })}`;\n },\n },\n },\n legend: {\n showForSingleSeries: true,\n },\n theme: {\n mode: defaultTheme.palette.type,\n },\n // there are only 5 colors by default, here we extend it to 50 different colors\n colors: [\n '#008FFB',\n '#00E396',\n '#FEB019',\n '#FF4560',\n '#775DD0',\n '#3F51B5',\n '#03A9F4',\n '#4CAF50',\n '#F9CE1D',\n '#FF9800',\n '#33B2DF',\n '#546E7A',\n '#D4526E',\n '#13D8AA',\n '#A5978B',\n '#4ECDC4',\n '#C7F464',\n '#81D4FA',\n '#546E7A',\n '#FD6A6A',\n '#2B908F',\n '#F9A3A4',\n '#90EE7E',\n '#FA4443',\n '#69D2E7',\n '#449DD1',\n '#F86624',\n '#EA3546',\n '#662E9B',\n '#C5D86D',\n '#D7263D',\n '#1B998B',\n '#2E294E',\n '#F46036',\n '#E2C044',\n '#662E9B',\n '#F86624',\n '#F9C80E',\n '#EA3546',\n '#43BCCD',\n '#5C4742',\n '#A5978B',\n '#8D5B4C',\n '#5A2A27',\n '#C4BBAF',\n '#A300D6',\n '#7D02EB',\n '#5653FE',\n '#2983FF',\n '#00B1F2',\n ],\n },\n series: series,\n };\n\n return (\n <Paper className={thumbnail ? classes.thumbnailPaper : classes.fixedHeightPaper}>\n <Grid container justifyContent=\"flex-end\" spacing={1}>\n <Grid item>Monthly</Grid>\n <Grid item>\n <Toggle onChange={event => granularitySetter(event.target.checked ? 'daily' : 'monthly')} />\n </Grid>\n <Grid item>Daily</Grid>\n </Grid>\n <Chart options={state.options} series={state.series} type=\"bar\" height={height ? height - 50 : 250} />\n </Paper>\n );\n};\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,MAAA,GAAS,WAAW,CAAU,KAAA,MAAA;AAAA,EAClC,IAAM,EAAA;AAAA,IACJ,KAAO,EAAA,EAAA;AAAA,IACP,MAAQ,EAAA,EAAA;AAAA,IACR,OAAS,EAAA,CAAA;AAAA,IACT,OAAS,EAAA,MAAA;AAAA,GACX;AAAA,EACA,UAAY,EAAA;AAAA,IACV,OAAS,EAAA,CAAA;AAAA,IACT,KAAO,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,CAAK,GAAG,CAAA;AAAA,IAC7B,WAAa,EAAA;AAAA,MACX,SAAW,EAAA,kBAAA;AAAA,MACX,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA,KAAA;AAAA,MAC5B,YAAc,EAAA;AAAA,QACZ,OAAS,EAAA,CAAA;AAAA,QACT,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA,IAAA;AAAA,QACvC,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA,IAAA;AAAA,OACrC;AAAA,KACF;AAAA,GACF;AAAA,EACA,KAAO,EAAA;AAAA,IACL,KAAO,EAAA,EAAA;AAAA,IACP,MAAQ,EAAA,EAAA;AAAA,IACR,SAAW,EAAA,MAAA;AAAA,GACb;AAAA,EACA,KAAO,EAAA;AAAA,IACL,QAAQ,CAAa,UAAA,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAAA,IAC5C,cAAc,EAAK,GAAA,CAAA;AAAA,IACnB,OAAS,EAAA,CAAA;AAAA,IACT,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA,KAAA;AAAA,GACxC;AAAA,EACA,SAAS,EAAC;AACZ,CAAA,CAAE,EAAE,MAAM,CAAA,CAAA;AAEH,MAAM,wBAAwD,CAAC;AAAA,EACpE,iBAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,yBAAA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,eAAe,QAAS,EAAA,CAAA;AAC9B,EAAA,MAAM,YAAY,UAAW,CAAA;AAAA,IAC3B,gBAAkB,EAAA;AAAA,MAChB,OAAS,EAAA,MAAA;AAAA,MACT,OAAS,EAAA,MAAA;AAAA,MACT,QAAU,EAAA,MAAA;AAAA,MACV,aAAe,EAAA,QAAA;AAAA,MACf,MAAA,EAAQ,SAAS,MAAS,GAAA,GAAA;AAAA,KAC5B;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,OAAS,EAAA,MAAA;AAAA,MACT,QAAU,EAAA,MAAA;AAAA,MACV,aAAe,EAAA,QAAA;AAAA,MACf,MAAA,EAAQ,MAAS,GAAA,MAAA,GAAS,EAAK,GAAA,GAAA;AAAA,KACjC;AAAA,GACD,CAAA,CAAA;AACD,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAM,MAAA,WAAA,GAAc,WAAY,CAAA,KAAA,CAAM,MAAO,CAAA,CAAC,IAAI,GAAK,EAAA,GAAA,EAAK,GAAG,CAAA,EAAG,GAAI,CAAA,CAAA;AAEtE,EAAA,MAAM,QAAQ,SACV,GAAA;AAAA,IACE,OAAS,EAAA;AAAA,MACP,KAAO,EAAA;AAAA,QACL,UAAY,EAAA;AAAA,UACV,OAAS,EAAA,KAAA;AAAA,SACX;AAAA,QACA,IAAM,EAAA;AAAA,UACJ,OAAS,EAAA,KAAA;AAAA,SACX;AAAA,QACA,OAAS,EAAA,IAAA;AAAA,QACT,OAAS,EAAA;AAAA,UACP,IAAM,EAAA,KAAA;AAAA,SACR;AAAA,QACA,SAAW,EAAA;AAAA,UACT,OAAS,EAAA,IAAA;AAAA,SACX;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,UAAA;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,IAAA,EAAM,aAAa,OAAQ,CAAA,IAAA;AAAA,OAC7B;AAAA,KACF;AAAA,IACA,MAAA;AAAA,GAEF,GAAA;AAAA,IACE,OAAS,EAAA;AAAA,MACP,KAAO,EAAA;AAAA,QACL,UAAY,EAAA;AAAA,UACV,OAAS,EAAA,KAAA;AAAA,SACX;AAAA,QACA,OAAS,EAAA,IAAA;AAAA,QACT,OAAS,EAAA;AAAA,UACP,IAAM,EAAA,KAAA;AAAA,SACR;AAAA,QACA,MAAQ,EAAA;AAAA,UACN,kBAAoB,EAAA,yBAAA;AAAA,SACtB;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,UAAA;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,eAAiB,EAAA,CAAA;AAAA,OACnB;AAAA,MACA,UAAY,EAAA;AAAA,QACV,OAAS,EAAA,KAAA;AAAA,OACX;AAAA,MACA,OAAS,EAAA;AAAA,QACP,CAAG,EAAA;AAAA,UACD,SAAA,EAAW,CAAC,KAAkB,KAAA;AAC5B,YAAO,OAAA,CAAA,CAAA,EAAI,YAAY,KAAO,EAAA;AAAA,cAC5B,KAAO,EAAA,WAAA;AAAA,cACP,SAAW,EAAA,EAAA;AAAA,aACZ,CAAC,CAAA,CAAA,CAAA;AAAA,WACJ;AAAA,SACF;AAAA,OACF;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,mBAAqB,EAAA,IAAA;AAAA,OACvB;AAAA,MACA,KAAO,EAAA;AAAA,QACL,IAAA,EAAM,aAAa,OAAQ,CAAA,IAAA;AAAA,OAC7B;AAAA;AAAA,MAEA,MAAQ,EAAA;AAAA,QACN,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,OACF;AAAA,KACF;AAAA,IACA,MAAA;AAAA,GACF,CAAA;AAEJ,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,SAAW,EAAA,SAAA,GAAY,OAAQ,CAAA,cAAA,GAAiB,OAAQ,CAAA,gBAAA,EAAA,kBAC5D,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,cAAe,EAAA,UAAA,EAAW,OAAS,EAAA,CAAA,EAAA,kBAChD,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAA,EAAC,SAAO,CAAA,kBACjB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAA,kBACP,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,QAAU,EAAA,CAAA,KAAA,KAAS,iBAAkB,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA,GAAU,OAAU,GAAA,SAAS,CAAG,EAAA,CAC5F,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,OAAK,CAClB,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,OAAS,EAAA,KAAA,CAAM,OAAS,EAAA,MAAA,EAAQ,KAAM,CAAA,MAAA,EAAQ,IAAK,EAAA,KAAA,EAAM,MAAQ,EAAA,MAAA,GAAS,MAAS,GAAA,EAAA,GAAK,KAAK,CACtG,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -28,11 +28,7 @@ const useStyles = makeStyles((theme) => ({
|
|
|
28
28
|
function CustomToolbar() {
|
|
29
29
|
return /* @__PURE__ */ React.createElement(GridToolbarContainer, null, /* @__PURE__ */ React.createElement(GridToolbarExport, { printOptions: { disableToolbarButton: true } }));
|
|
30
30
|
}
|
|
31
|
-
const CostReportsTableComponent = ({
|
|
32
|
-
reports,
|
|
33
|
-
aggregatedBy,
|
|
34
|
-
periods
|
|
35
|
-
}) => {
|
|
31
|
+
const CostReportsTableComponent = ({ reports, aggregatedBy, periods }) => {
|
|
36
32
|
const classes = useStyles();
|
|
37
33
|
const customScale = humanFormat.Scale.create(["", "K", "M", "B"], 1e3);
|
|
38
34
|
const columns = [
|
|
@@ -51,16 +47,7 @@ const CostReportsTableComponent = ({
|
|
|
51
47
|
chipLabel = splitValue[0].toLowerCase();
|
|
52
48
|
}
|
|
53
49
|
}
|
|
54
|
-
return /* @__PURE__ */ React.createElement(
|
|
55
|
-
Typography,
|
|
56
|
-
{
|
|
57
|
-
variant: "body2",
|
|
58
|
-
component: "div",
|
|
59
|
-
className: classes.container
|
|
60
|
-
},
|
|
61
|
-
formattedValue,
|
|
62
|
-
chipLabel && /* @__PURE__ */ React.createElement(Chip, { size: "small", label: chipLabel, className: classes.clip })
|
|
63
|
-
);
|
|
50
|
+
return /* @__PURE__ */ React.createElement(Typography, { variant: "body2", component: "div", className: classes.container }, formattedValue, chipLabel && /* @__PURE__ */ React.createElement(Chip, { size: "small", label: chipLabel, className: classes.clip }));
|
|
64
51
|
}
|
|
65
52
|
},
|
|
66
53
|
{
|
|
@@ -72,7 +59,7 @@ const CostReportsTableComponent = ({
|
|
|
72
59
|
return /* @__PURE__ */ React.createElement(
|
|
73
60
|
TrendBarComponent,
|
|
74
61
|
{
|
|
75
|
-
categories:
|
|
62
|
+
categories: periods,
|
|
76
63
|
series: [
|
|
77
64
|
{
|
|
78
65
|
name: params.row.id,
|
|
@@ -106,9 +93,7 @@ const CostReportsTableComponent = ({
|
|
|
106
93
|
});
|
|
107
94
|
if (periods.includes(previousPeriod) && row.reports[previousPeriod] > 0) {
|
|
108
95
|
const diff = row.reports[column.field] - row.reports[previousPeriod];
|
|
109
|
-
const percentage = Math.round(
|
|
110
|
-
diff / row.reports[previousPeriod] * 100
|
|
111
|
-
);
|
|
96
|
+
const percentage = Math.round(diff / row.reports[previousPeriod] * 100);
|
|
112
97
|
const mark = diff > 0 ? "+" : "";
|
|
113
98
|
if (percentage >= 1 || percentage <= -1) {
|
|
114
99
|
return `$${formattedValue} (${mark}${percentage}%)`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CostReportsTableComponent.esm.js","sources":["../../../src/components/CostReportsTableComponent/CostReportsTableComponent.tsx"],"sourcesContent":["import Chip from '@material-ui/core/Chip';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Box from '@mui/material/Box';\nimport { DataGrid, GridColDef, GridRenderCellParams, GridToolbarContainer, GridToolbarExport } from '@mui/x-data-grid';\nimport humanFormat from 'human-format';\nimport React, { FC } from 'react';\nimport { getPreviousMonth } from '../../api/functions';\nimport { CostReportsTableComponentProps } from '../types';\nimport { TrendBarComponent } from './TrendBarComponent';\n\nconst useStyles = makeStyles(theme => ({\n increase: {\n color: 'red',\n },\n decrease: {\n color: 'green',\n },\n container: {\n display: 'flex',\n alignItems: 'center',\n },\n clip: {\n backgroundColor: '#deebff',\n color: '#0052cc',\n marginLeft: theme.spacing(1),\n },\n}));\n\nfunction CustomToolbar() {\n return (\n <GridToolbarContainer>\n <GridToolbarExport printOptions={{ disableToolbarButton: true }} />\n </GridToolbarContainer>\n );\n}\n\nexport const CostReportsTableComponent: FC<CostReportsTableComponentProps> = ({\n reports,\n aggregatedBy,\n periods,\n}) => {\n const classes = useStyles();\n const customScale = humanFormat.Scale.create(['', 'K', 'M', 'B'], 1000);\n const columns: GridColDef[] = [\n {\n field: aggregatedBy,\n headerName: aggregatedBy.toLocaleUpperCase('en-US'),\n minWidth: 200,\n flex: 2,\n renderCell: (params: GridRenderCellParams): React.ReactNode => {\n let formattedValue = params.formattedValue;\n let chipLabel = null;\n\n if (aggregatedBy === 'service' || aggregatedBy === 'name') {\n if (\n params.formattedValue !== undefined &&\n params.formattedValue.indexOf('/') !== -1\n ) {\n const splitValue = params.formattedValue.split('/');\n formattedValue = splitValue[1];\n chipLabel = splitValue[0].toLowerCase();\n }\n }\n\n return (\n <Typography\n variant=\"body2\"\n component=\"div\"\n className={classes.container}\n >\n {formattedValue}\n {chipLabel && (\n <Chip size=\"small\" label={chipLabel} className={classes.clip} />\n )}\n </Typography>\n );\n },\n },\n {\n field: 'TREND',\n headerName: 'TREND',\n width: 100,\n disableExport: true,\n renderCell: (params: GridRenderCellParams): React.ReactNode => {\n return (\n <TrendBarComponent\n categories={Object.keys(params.row.reports)}\n series={[\n {\n name: params.row.id,\n data: periods.map(period =>\n params.row.reports[period] !== undefined\n ? params.row.reports[period]\n : null,\n ),\n },\n ]}\n />\n );\n },\n },\n ];\n\n periods.forEach(period => {\n columns.push({\n field: period,\n headerName: period,\n type: 'number',\n minWidth: 150,\n flex: 1,\n valueGetter: (_, row) => {\n return row.reports[period] ? row.reports[period] : null;\n },\n valueFormatter: (value, row, column) => {\n if (typeof value === 'number') {\n const previousPeriod = period.length === 7 ? getPreviousMonth(column.field) : '';\n const formattedValue = humanFormat(value, {\n scale: customScale,\n separator: '',\n decimals: 2,\n });\n if (\n periods.includes(previousPeriod) &&\n row.reports[previousPeriod] > 0\n ) {\n const diff =\n row.reports[column.field] - row.reports[previousPeriod];\n const percentage = Math.round(\n (diff / row.reports[previousPeriod]) * 100,\n );\n const mark = diff > 0 ? '+' : '';\n // only display percentage change if it is larger than 1% or less than -1%\n if (percentage >= 1 || percentage <= -1) {\n return `$${formattedValue} (${mark}${percentage}%)`;\n }\n }\n return `$${formattedValue}`;\n }\n return '-';\n },\n renderCell: (params: GridRenderCellParams): React.ReactNode => {\n let className = '';\n const percentageIndex = params.formattedValue.indexOf('(');\n const costStr =\n percentageIndex === -1\n ? params.formattedValue\n : params.formattedValue.substring(0, percentageIndex);\n let percentageStr =\n percentageIndex === -1\n ? ''\n : params.formattedValue.substring(percentageIndex);\n if (percentageStr.includes('-')) {\n className = classes.decrease;\n percentageStr = percentageStr.replace('-', '▼');\n } else if (percentageStr.includes('+')) {\n className = classes.increase;\n percentageStr = percentageStr.replace('+', '▲');\n }\n\n return (\n <Typography variant=\"body2\">\n {costStr}\n <Typography variant=\"inherit\" className={className}>\n {percentageStr}\n </Typography>\n </Typography>\n );\n },\n });\n });\n\n columns.push({\n field: 'TOTAL',\n headerName: 'TOTAL',\n type: 'number',\n minWidth: 150,\n flex: 1,\n valueGetter: (_, row) => {\n let total = 0;\n periods.forEach(period => {\n total += row.reports[period] ? row.reports[period] : 0;\n });\n return total;\n },\n valueFormatter: value => {\n if (typeof value === 'number') {\n return `$${humanFormat(value, {\n scale: customScale,\n separator: '',\n decimals: 2,\n })}`;\n }\n return '-';\n },\n renderCell: (params: GridRenderCellParams): React.ReactNode => {\n return <Typography variant=\"body2\">{params.formattedValue}</Typography>;\n },\n });\n\n return (\n <Box>\n <DataGrid\n rows={reports}\n rowHeight={35}\n columns={columns}\n initialState={{\n sorting: {\n sortModel: [{ field: 'TOTAL', sort: 'desc' }],\n },\n pagination: {\n paginationModel: {\n pageSize: 15,\n },\n },\n }}\n pageSizeOptions={[15]}\n slots={{ toolbar: CustomToolbar }}\n disableRowSelectionOnClick\n disableColumnMenu\n />\n </Box>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CostReportsTableComponent.esm.js","sources":["../../../src/components/CostReportsTableComponent/CostReportsTableComponent.tsx"],"sourcesContent":["import Chip from '@material-ui/core/Chip';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Box from '@mui/material/Box';\nimport { DataGrid, GridColDef, GridRenderCellParams, GridToolbarContainer, GridToolbarExport } from '@mui/x-data-grid';\nimport humanFormat from 'human-format';\nimport React, { FC } from 'react';\nimport { getPreviousMonth } from '../../api/functions';\nimport { CostReportsTableComponentProps } from '../types';\nimport { TrendBarComponent } from './TrendBarComponent';\n\nconst useStyles = makeStyles(theme => ({\n increase: {\n color: 'red',\n },\n decrease: {\n color: 'green',\n },\n container: {\n display: 'flex',\n alignItems: 'center',\n },\n clip: {\n backgroundColor: '#deebff',\n color: '#0052cc',\n marginLeft: theme.spacing(1),\n },\n}));\n\nfunction CustomToolbar() {\n return (\n <GridToolbarContainer>\n <GridToolbarExport printOptions={{ disableToolbarButton: true }} />\n </GridToolbarContainer>\n );\n}\n\nexport const CostReportsTableComponent: FC<CostReportsTableComponentProps> = ({ reports, aggregatedBy, periods }) => {\n const classes = useStyles();\n const customScale = humanFormat.Scale.create(['', 'K', 'M', 'B'], 1000);\n const columns: GridColDef[] = [\n {\n field: aggregatedBy,\n headerName: aggregatedBy.toLocaleUpperCase('en-US'),\n minWidth: 200,\n flex: 2,\n renderCell: (params: GridRenderCellParams): React.ReactNode => {\n let formattedValue = params.formattedValue;\n let chipLabel = null;\n\n if (aggregatedBy === 'service' || aggregatedBy === 'name') {\n if (params.formattedValue !== undefined && params.formattedValue.indexOf('/') !== -1) {\n const splitValue = params.formattedValue.split('/');\n formattedValue = splitValue[1];\n chipLabel = splitValue[0].toLowerCase();\n }\n }\n\n return (\n <Typography variant=\"body2\" component=\"div\" className={classes.container}>\n {formattedValue}\n {chipLabel && <Chip size=\"small\" label={chipLabel} className={classes.clip} />}\n </Typography>\n );\n },\n },\n {\n field: 'TREND',\n headerName: 'TREND',\n width: 100,\n disableExport: true,\n renderCell: (params: GridRenderCellParams): React.ReactNode => {\n return (\n <TrendBarComponent\n categories={periods}\n series={[\n {\n name: params.row.id,\n data: periods.map(period =>\n params.row.reports[period] !== undefined ? params.row.reports[period] : null,\n ),\n },\n ]}\n />\n );\n },\n },\n ];\n\n periods.forEach(period => {\n columns.push({\n field: period,\n headerName: period,\n type: 'number',\n minWidth: 150,\n flex: 1,\n valueGetter: (_, row) => {\n return row.reports[period] ? row.reports[period] : null;\n },\n valueFormatter: (value, row, column) => {\n if (typeof value === 'number') {\n const previousPeriod = period.length === 7 ? getPreviousMonth(column.field) : '';\n const formattedValue = humanFormat(value, {\n scale: customScale,\n separator: '',\n decimals: 2,\n });\n if (periods.includes(previousPeriod) && row.reports[previousPeriod] > 0) {\n const diff = row.reports[column.field] - row.reports[previousPeriod];\n const percentage = Math.round((diff / row.reports[previousPeriod]) * 100);\n const mark = diff > 0 ? '+' : '';\n // only display percentage change if it is larger than 1% or less than -1%\n if (percentage >= 1 || percentage <= -1) {\n return `$${formattedValue} (${mark}${percentage}%)`;\n }\n }\n return `$${formattedValue}`;\n }\n return '-';\n },\n renderCell: (params: GridRenderCellParams): React.ReactNode => {\n let className = '';\n const percentageIndex = params.formattedValue.indexOf('(');\n const costStr =\n percentageIndex === -1 ? params.formattedValue : params.formattedValue.substring(0, percentageIndex);\n let percentageStr = percentageIndex === -1 ? '' : params.formattedValue.substring(percentageIndex);\n if (percentageStr.includes('-')) {\n className = classes.decrease;\n percentageStr = percentageStr.replace('-', '▼');\n } else if (percentageStr.includes('+')) {\n className = classes.increase;\n percentageStr = percentageStr.replace('+', '▲');\n }\n\n return (\n <Typography variant=\"body2\">\n {costStr}\n <Typography variant=\"inherit\" className={className}>\n {percentageStr}\n </Typography>\n </Typography>\n );\n },\n });\n });\n\n columns.push({\n field: 'TOTAL',\n headerName: 'TOTAL',\n type: 'number',\n minWidth: 150,\n flex: 1,\n valueGetter: (_, row) => {\n let total = 0;\n periods.forEach(period => {\n total += row.reports[period] ? row.reports[period] : 0;\n });\n return total;\n },\n valueFormatter: value => {\n if (typeof value === 'number') {\n return `$${humanFormat(value, {\n scale: customScale,\n separator: '',\n decimals: 2,\n })}`;\n }\n return '-';\n },\n renderCell: (params: GridRenderCellParams): React.ReactNode => {\n return <Typography variant=\"body2\">{params.formattedValue}</Typography>;\n },\n });\n\n return (\n <Box>\n <DataGrid\n rows={reports}\n rowHeight={35}\n columns={columns}\n initialState={{\n sorting: {\n sortModel: [{ field: 'TOTAL', sort: 'desc' }],\n },\n pagination: {\n paginationModel: {\n pageSize: 15,\n },\n },\n }}\n pageSizeOptions={[15]}\n slots={{ toolbar: CustomToolbar }}\n disableRowSelectionOnClick\n disableColumnMenu\n />\n </Box>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -3,12 +3,7 @@ import { Box } from '@material-ui/core';
|
|
|
3
3
|
import { makeStyles } from '@material-ui/core/styles';
|
|
4
4
|
import Chart from 'react-apexcharts';
|
|
5
5
|
|
|
6
|
-
const TrendBarComponent = ({
|
|
7
|
-
categories,
|
|
8
|
-
series,
|
|
9
|
-
height,
|
|
10
|
-
width
|
|
11
|
-
}) => {
|
|
6
|
+
const TrendBarComponent = ({ categories, series, height, width }) => {
|
|
12
7
|
const useStyles = makeStyles({
|
|
13
8
|
fixedBox: {
|
|
14
9
|
display: "flex",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TrendBarComponent.esm.js","sources":["../../../src/components/CostReportsTableComponent/TrendBarComponent.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Box } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { TrendBarComponentProps } from '../types';\nimport Chart from 'react-apexcharts';\nimport { ApexOptions } from 'apexcharts';\n\nexport const TrendBarComponent: FC<TrendBarComponentProps> = ({
|
|
1
|
+
{"version":3,"file":"TrendBarComponent.esm.js","sources":["../../../src/components/CostReportsTableComponent/TrendBarComponent.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Box } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { TrendBarComponentProps } from '../types';\nimport Chart from 'react-apexcharts';\nimport { ApexOptions } from 'apexcharts';\n\nexport const TrendBarComponent: FC<TrendBarComponentProps> = ({ categories, series, height, width }) => {\n const useStyles = makeStyles({\n fixedBox: {\n display: 'flex',\n height: height ? height : 25,\n width: width ? width : 100,\n },\n });\n const classes = useStyles();\n\n const options: ApexOptions = {\n chart: {\n width: width ? width : 100,\n type: 'bar',\n animations: {\n enabled: false,\n },\n zoom: {\n enabled: false,\n },\n toolbar: {\n show: false,\n },\n sparkline: {\n enabled: true,\n },\n },\n tooltip: {\n enabled: false,\n },\n xaxis: {\n categories: categories,\n },\n };\n\n return (\n <Box className={classes.fixedBox}>\n <Chart options={options} series={series} type=\"bar\" height=\"100%\" />\n </Box>\n );\n};\n"],"names":[],"mappings":";;;;;AAOO,MAAM,oBAAgD,CAAC,EAAE,YAAY,MAAQ,EAAA,MAAA,EAAQ,OAAY,KAAA;AACtG,EAAA,MAAM,YAAY,UAAW,CAAA;AAAA,IAC3B,QAAU,EAAA;AAAA,MACR,OAAS,EAAA,MAAA;AAAA,MACT,MAAA,EAAQ,SAAS,MAAS,GAAA,EAAA;AAAA,MAC1B,KAAA,EAAO,QAAQ,KAAQ,GAAA,GAAA;AAAA,KACzB;AAAA,GACD,CAAA,CAAA;AACD,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAE1B,EAAA,MAAM,OAAuB,GAAA;AAAA,IAC3B,KAAO,EAAA;AAAA,MACL,KAAA,EAAO,QAAQ,KAAQ,GAAA,GAAA;AAAA,MACvB,IAAM,EAAA,KAAA;AAAA,MACN,UAAY,EAAA;AAAA,QACV,OAAS,EAAA,KAAA;AAAA,OACX;AAAA,MACA,IAAM,EAAA;AAAA,QACJ,OAAS,EAAA,KAAA;AAAA,OACX;AAAA,MACA,OAAS,EAAA;AAAA,QACP,IAAM,EAAA,KAAA;AAAA,OACR;AAAA,MACA,SAAW,EAAA;AAAA,QACT,OAAS,EAAA,IAAA;AAAA,OACX;AAAA,KACF;AAAA,IACA,OAAS,EAAA;AAAA,MACP,OAAS,EAAA,KAAA;AAAA,KACX;AAAA,IACA,KAAO,EAAA;AAAA,MACL,UAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,QACtB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAM,EAAA,EAAA,OAAA,EAAkB,MAAgB,EAAA,IAAA,EAAK,KAAM,EAAA,MAAA,EAAO,QAAO,CACpE,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import Collapse from '@material-ui/core/Collapse';
|
|
2
|
+
import IconButton from '@material-ui/core/IconButton';
|
|
3
|
+
import Paper from '@material-ui/core/Paper';
|
|
4
|
+
import Table from '@material-ui/core/Table';
|
|
5
|
+
import TableBody from '@material-ui/core/TableBody';
|
|
6
|
+
import TableCell from '@material-ui/core/TableCell';
|
|
7
|
+
import TableContainer from '@material-ui/core/TableContainer';
|
|
8
|
+
import TableHead from '@material-ui/core/TableHead';
|
|
9
|
+
import TableRow from '@material-ui/core/TableRow';
|
|
10
|
+
import CloseIcon from '@material-ui/icons/Close';
|
|
11
|
+
import Alert from '@material-ui/lab/Alert';
|
|
12
|
+
import React from 'react';
|
|
13
|
+
|
|
14
|
+
const ErrorsAlertComponent = ({ errors }) => {
|
|
15
|
+
const [open, setOpen] = React.useState(true);
|
|
16
|
+
return /* @__PURE__ */ React.createElement(Collapse, { in: open }, /* @__PURE__ */ React.createElement(
|
|
17
|
+
Alert,
|
|
18
|
+
{
|
|
19
|
+
severity: "warning",
|
|
20
|
+
style: { maxHeight: "300px", overflow: "auto" },
|
|
21
|
+
action: /* @__PURE__ */ React.createElement(
|
|
22
|
+
IconButton,
|
|
23
|
+
{
|
|
24
|
+
"aria-label": "close",
|
|
25
|
+
color: "inherit",
|
|
26
|
+
size: "small",
|
|
27
|
+
onClick: () => {
|
|
28
|
+
setOpen(false);
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
/* @__PURE__ */ React.createElement(CloseIcon, { fontSize: "inherit" })
|
|
32
|
+
)
|
|
33
|
+
},
|
|
34
|
+
/* @__PURE__ */ React.createElement("p", null, "InfraWallet failed to fetch cloud costs from some of the configured accounts. Here are the list of errors."),
|
|
35
|
+
/* @__PURE__ */ React.createElement(TableContainer, { component: Paper }, /* @__PURE__ */ React.createElement(Table, { "aria-label": "errors table" }, /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, /* @__PURE__ */ React.createElement(TableCell, { style: { minWidth: "150px" } }, "Account Name"), /* @__PURE__ */ React.createElement(TableCell, null, "Error Message"))), /* @__PURE__ */ React.createElement(TableBody, null, errors.map((row) => /* @__PURE__ */ React.createElement(TableRow, { key: row.name }, /* @__PURE__ */ React.createElement(TableCell, null, row.name), /* @__PURE__ */ React.createElement(TableCell, null, row.error))))))
|
|
36
|
+
));
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export { ErrorsAlertComponent };
|
|
40
|
+
//# sourceMappingURL=ErrorsAlertComponent.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ErrorsAlertComponent.esm.js","sources":["../../../src/components/ErrorsAlertComponent/ErrorsAlertComponent.tsx"],"sourcesContent":["import Collapse from '@material-ui/core/Collapse';\nimport IconButton from '@material-ui/core/IconButton';\nimport Paper from '@material-ui/core/Paper';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableContainer from '@material-ui/core/TableContainer';\nimport TableHead from '@material-ui/core/TableHead';\nimport TableRow from '@material-ui/core/TableRow';\nimport CloseIcon from '@material-ui/icons/Close';\nimport Alert from '@material-ui/lab/Alert';\nimport React, { FC } from 'react';\nimport { CloudProviderError } from '../../api/types';\n\nexport const ErrorsAlertComponent: FC<{ errors: CloudProviderError[] }> = ({ errors }) => {\n const [open, setOpen] = React.useState(true);\n\n return (\n <Collapse in={open}>\n <Alert\n severity=\"warning\"\n style={{ maxHeight: '300px', overflow: 'auto' }}\n action={\n <IconButton\n aria-label=\"close\"\n color=\"inherit\"\n size=\"small\"\n onClick={() => {\n setOpen(false);\n }}\n >\n <CloseIcon fontSize=\"inherit\" />\n </IconButton>\n }\n >\n <p>\n InfraWallet failed to fetch cloud costs from some of the configured accounts. Here are the list of errors.\n </p>\n <TableContainer component={Paper}>\n <Table aria-label=\"errors table\">\n <TableHead>\n <TableRow>\n <TableCell style={{ minWidth: '150px' }}>Account Name</TableCell>\n <TableCell>Error Message</TableCell>\n </TableRow>\n </TableHead>\n <TableBody>\n {errors.map(row => (\n <TableRow key={row.name}>\n <TableCell>{row.name}</TableCell>\n <TableCell>{row.error}</TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </TableContainer>\n </Alert>\n </Collapse>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAcO,MAAM,oBAA6D,GAAA,CAAC,EAAE,MAAA,EAAa,KAAA;AACxF,EAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAA,KAAA,CAAM,SAAS,IAAI,CAAA,CAAA;AAE3C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,EAAA,EAAI,IACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,QAAS,EAAA,SAAA;AAAA,MACT,KAAO,EAAA,EAAE,SAAW,EAAA,OAAA,EAAS,UAAU,MAAO,EAAA;AAAA,MAC9C,MACE,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,YAAW,EAAA,OAAA;AAAA,UACX,KAAM,EAAA,SAAA;AAAA,UACN,IAAK,EAAA,OAAA;AAAA,UACL,SAAS,MAAM;AACb,YAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,WACf;AAAA,SAAA;AAAA,wBAEA,KAAA,CAAA,aAAA,CAAC,SAAU,EAAA,EAAA,QAAA,EAAS,SAAU,EAAA,CAAA;AAAA,OAChC;AAAA,KAAA;AAAA,oBAGF,KAAA,CAAA,aAAA,CAAC,WAAE,4GAEH,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,kBAAe,SAAW,EAAA,KAAA,EAAA,sCACxB,KAAM,EAAA,EAAA,YAAA,EAAW,cAChB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,SACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,gCACE,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAU,KAAO,EAAA,EAAE,QAAU,EAAA,OAAA,MAAW,cAAY,CAAA,kBACpD,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,EAAU,eAAa,CAC1B,CACF,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,iBACE,MAAO,CAAA,GAAA,CAAI,yBACT,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,GAAK,EAAA,GAAA,CAAI,IACjB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,iBAAW,GAAI,CAAA,IAAK,CACrB,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAW,EAAA,IAAA,EAAA,GAAA,CAAI,KAAM,CACxB,CACD,CACH,CACF,CACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -2,7 +2,59 @@ import React from 'react';
|
|
|
2
2
|
import { SvgIcon } from '@material-ui/core';
|
|
3
3
|
|
|
4
4
|
const InfraWalletIcon = () => {
|
|
5
|
-
return /* @__PURE__ */ React.createElement(SvgIcon, { x: "0px", y: "0px", viewBox: "0 0 24 24" }, /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement(
|
|
5
|
+
return /* @__PURE__ */ React.createElement(SvgIcon, { x: "0px", y: "0px", viewBox: "0 0 24 24" }, /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement(
|
|
6
|
+
"path",
|
|
7
|
+
{
|
|
8
|
+
fill: "#E8EAED;",
|
|
9
|
+
d: "M10.37,4.55c0.02,0.01,0.04,0.03,0.06,0.04c0.37-0.52,0.86-0.88,1.42-1.04c0.3-0.08,0.61-0.1,0.93-0.07\n c-0.09-0.07-0.17-0.14-0.26-0.19c-0.41-0.28-0.83-0.42-1.22-0.42c-0.2,0-0.38,0.04-0.56,0.11C10.29,3.18,9.94,3.6,9.74,4.2\n C9.95,4.29,10.16,4.41,10.37,4.55z"
|
|
10
|
+
}
|
|
11
|
+
), /* @__PURE__ */ React.createElement(
|
|
12
|
+
"path",
|
|
13
|
+
{
|
|
14
|
+
fill: "#E8EAED;",
|
|
15
|
+
d: "M20.47,7c-0.4-0.28-0.78-0.39-1.1-0.32l-0.5,0.11L18.72,6.3c-0.42-1.45-1.24-2.73-2.18-3.41\n c-0.57-0.41-1.15-0.57-1.63-0.44c-0.44,0.12-0.8,0.48-1.05,1.03l-0.13,0.29C13.97,3.87,14.2,4,14.42,4.17\n c1.04,0.75,1.93,2.06,2.45,3.57c0.48,0.02,0.98,0.2,1.46,0.54c1.61,1.12,2.8,3.85,2.78,6.33c0,0.15-0.01,0.29-0.02,0.43\n c0.27,0.06,0.51,0.03,0.73-0.09c0.57-0.34,0.93-1.31,0.95-2.53C22.79,10.3,21.78,7.92,20.47,7z"
|
|
16
|
+
}
|
|
17
|
+
))), /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement(
|
|
18
|
+
"path",
|
|
19
|
+
{
|
|
20
|
+
fill: "#E8EAED;",
|
|
21
|
+
d: "M17.7,9.18c-0.4-0.28-0.78-0.39-1.1-0.32l-0.5,0.11l-0.14-0.49c-0.42-1.45-1.24-2.73-2.18-3.41\n c-0.57-0.41-1.15-0.57-1.63-0.44c-0.44,0.12-0.8,0.48-1.05,1.03l-0.13,0.29c0.23,0.11,0.46,0.24,0.69,0.41\n c1.04,0.75,1.93,2.06,2.45,3.57c0.48,0.02,0.98,0.2,1.46,0.54c1.61,1.12,2.8,3.85,2.78,6.33c0,0.15-0.01,0.29-0.02,0.43\n c0.27,0.06,0.51,0.03,0.73-0.09c0.57-0.34,0.93-1.31,0.95-2.53C20.02,12.47,19.01,10.1,17.7,9.18z"
|
|
22
|
+
}
|
|
23
|
+
), /* @__PURE__ */ React.createElement(
|
|
24
|
+
"path",
|
|
25
|
+
{
|
|
26
|
+
fill: "#E8EAED;",
|
|
27
|
+
d: "M7.61,6.73c0.02,0.01,0.04,0.03,0.06,0.04c0.37-0.52,0.86-0.88,1.42-1.04c0.3-0.08,0.61-0.1,0.93-0.07\n C9.93,5.59,9.84,5.53,9.75,5.47C9.34,5.19,8.92,5.05,8.54,5.05c-0.2,0-0.38,0.04-0.56,0.11c-0.45,0.19-0.8,0.62-1.01,1.22\n C7.18,6.47,7.4,6.59,7.61,6.73z"
|
|
28
|
+
}
|
|
29
|
+
)), /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement(
|
|
30
|
+
"path",
|
|
31
|
+
{
|
|
32
|
+
fill: "#E8EAED;",
|
|
33
|
+
d: "M4.84,8.9C4.86,8.92,4.88,8.93,4.9,8.94c0.37-0.52,0.86-0.88,1.42-1.04c0.3-0.08,0.61-0.1,0.93-0.07\n C7.16,7.77,7.08,7.71,6.99,7.65C6.58,7.37,6.16,7.23,5.77,7.23c-0.2,0-0.38,0.04-0.56,0.11c-0.45,0.19-0.8,0.62-1.01,1.22\n C4.42,8.65,4.63,8.76,4.84,8.9z"
|
|
34
|
+
}
|
|
35
|
+
), /* @__PURE__ */ React.createElement(
|
|
36
|
+
"path",
|
|
37
|
+
{
|
|
38
|
+
fill: "#E8EAED;",
|
|
39
|
+
d: "M14.94,11.36L14.94,11.36c-0.4-0.28-0.78-0.39-1.1-0.32l-0.5,0.11l-0.14-0.49\n c-0.42-1.45-1.24-2.73-2.18-3.41C10.44,6.83,9.86,6.67,9.38,6.8c-0.44,0.12-0.8,0.48-1.05,1.03L8.21,8.12\n C8.44,8.22,8.67,8.36,8.9,8.52c1.04,0.75,1.93,2.06,2.45,3.57c0.48,0.02,0.98,0.2,1.46,0.54c1.61,1.12,2.8,3.84,2.78,6.33\n c0,0.15-0.01,0.29-0.02,0.43c0.27,0.06,0.51,0.03,0.73-0.09c0.57-0.34,0.93-1.31,0.95-2.53C17.26,14.65,16.25,12.27,14.94,11.36z\n "
|
|
40
|
+
}
|
|
41
|
+
)), /* @__PURE__ */ React.createElement(
|
|
42
|
+
"path",
|
|
43
|
+
{
|
|
44
|
+
fill: "#E8EAED;",
|
|
45
|
+
d: "M11.92,19.4c-1.68-0.82-1.4-1.4-1.49-2.52v-0.16c0-0.95,0.67-1.37,1.49-0.93l2.32,1.24\n c-0.37-1.49-1.14-2.86-2.07-3.5l0,0c-0.4-0.28-0.78-0.39-1.1-0.32l-0.5,0.11l-0.14-0.49C10,11.37,9.19,10.1,8.25,9.42\n C7.67,9,7.09,8.85,6.61,8.98c-0.44,0.12-0.8,0.48-1.05,1.03l-0.31,0.71l-0.57-0.53c-0.15-0.14-0.3-0.26-0.46-0.36\n C3.81,9.55,3.39,9.4,3.01,9.4c-0.2,0-0.38,0.04-0.56,0.11c-0.57,0.24-0.98,0.86-1.14,1.74c-0.38,2.05,0.73,4.62,2.38,5.5\n l8.71,4.65c0.43,0.23,0.81,0.25,1.13,0.06c0.27-0.16,0.49-0.46,0.65-0.86L11.92,19.4z"
|
|
46
|
+
}
|
|
47
|
+
), /* @__PURE__ */ React.createElement(
|
|
48
|
+
"ellipse",
|
|
49
|
+
{
|
|
50
|
+
transform: "matrix(0.9086 -0.4176 0.4176 0.9086 -6.3391 6.8809)",
|
|
51
|
+
fill: "#E8EAED;",
|
|
52
|
+
cx: "12.55",
|
|
53
|
+
cy: "17.93",
|
|
54
|
+
rx: "0.63",
|
|
55
|
+
ry: "0.98"
|
|
56
|
+
}
|
|
57
|
+
))));
|
|
6
58
|
};
|
|
7
59
|
|
|
8
60
|
export { InfraWalletIcon };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfraWalletIcon.esm.js","sources":["../../src/components/InfraWalletIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { SvgIcon } from '@material-ui/core';\n\nexport const InfraWalletIcon = () => {\n return (\n <SvgIcon x=\"0px\" y=\"0px\" viewBox=\"0 0 24 24\">\n <g>\n <g>\n <g>\n <g>\n <path
|
|
1
|
+
{"version":3,"file":"InfraWalletIcon.esm.js","sources":["../../src/components/InfraWalletIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { SvgIcon } from '@material-ui/core';\n\nexport const InfraWalletIcon = () => {\n return (\n <SvgIcon x=\"0px\" y=\"0px\" viewBox=\"0 0 24 24\">\n <g>\n <g>\n <g>\n <g>\n <path\n fill=\"#E8EAED;\"\n d=\"M10.37,4.55c0.02,0.01,0.04,0.03,0.06,0.04c0.37-0.52,0.86-0.88,1.42-1.04c0.3-0.08,0.61-0.1,0.93-0.07\n c-0.09-0.07-0.17-0.14-0.26-0.19c-0.41-0.28-0.83-0.42-1.22-0.42c-0.2,0-0.38,0.04-0.56,0.11C10.29,3.18,9.94,3.6,9.74,4.2\n C9.95,4.29,10.16,4.41,10.37,4.55z\"\n />\n <path\n fill=\"#E8EAED;\"\n d=\"M20.47,7c-0.4-0.28-0.78-0.39-1.1-0.32l-0.5,0.11L18.72,6.3c-0.42-1.45-1.24-2.73-2.18-3.41\n c-0.57-0.41-1.15-0.57-1.63-0.44c-0.44,0.12-0.8,0.48-1.05,1.03l-0.13,0.29C13.97,3.87,14.2,4,14.42,4.17\n c1.04,0.75,1.93,2.06,2.45,3.57c0.48,0.02,0.98,0.2,1.46,0.54c1.61,1.12,2.8,3.85,2.78,6.33c0,0.15-0.01,0.29-0.02,0.43\n c0.27,0.06,0.51,0.03,0.73-0.09c0.57-0.34,0.93-1.31,0.95-2.53C22.79,10.3,21.78,7.92,20.47,7z\"\n />\n </g>\n </g>\n <g>\n <path\n fill=\"#E8EAED;\"\n d=\"M17.7,9.18c-0.4-0.28-0.78-0.39-1.1-0.32l-0.5,0.11l-0.14-0.49c-0.42-1.45-1.24-2.73-2.18-3.41\n c-0.57-0.41-1.15-0.57-1.63-0.44c-0.44,0.12-0.8,0.48-1.05,1.03l-0.13,0.29c0.23,0.11,0.46,0.24,0.69,0.41\n c1.04,0.75,1.93,2.06,2.45,3.57c0.48,0.02,0.98,0.2,1.46,0.54c1.61,1.12,2.8,3.85,2.78,6.33c0,0.15-0.01,0.29-0.02,0.43\n c0.27,0.06,0.51,0.03,0.73-0.09c0.57-0.34,0.93-1.31,0.95-2.53C20.02,12.47,19.01,10.1,17.7,9.18z\"\n />\n <path\n fill=\"#E8EAED;\"\n d=\"M7.61,6.73c0.02,0.01,0.04,0.03,0.06,0.04c0.37-0.52,0.86-0.88,1.42-1.04c0.3-0.08,0.61-0.1,0.93-0.07\n C9.93,5.59,9.84,5.53,9.75,5.47C9.34,5.19,8.92,5.05,8.54,5.05c-0.2,0-0.38,0.04-0.56,0.11c-0.45,0.19-0.8,0.62-1.01,1.22\n C7.18,6.47,7.4,6.59,7.61,6.73z\"\n />\n </g>\n <g>\n <path\n fill=\"#E8EAED;\"\n d=\"M4.84,8.9C4.86,8.92,4.88,8.93,4.9,8.94c0.37-0.52,0.86-0.88,1.42-1.04c0.3-0.08,0.61-0.1,0.93-0.07\n C7.16,7.77,7.08,7.71,6.99,7.65C6.58,7.37,6.16,7.23,5.77,7.23c-0.2,0-0.38,0.04-0.56,0.11c-0.45,0.19-0.8,0.62-1.01,1.22\n C4.42,8.65,4.63,8.76,4.84,8.9z\"\n />\n <path\n fill=\"#E8EAED;\"\n d=\"M14.94,11.36L14.94,11.36c-0.4-0.28-0.78-0.39-1.1-0.32l-0.5,0.11l-0.14-0.49\n c-0.42-1.45-1.24-2.73-2.18-3.41C10.44,6.83,9.86,6.67,9.38,6.8c-0.44,0.12-0.8,0.48-1.05,1.03L8.21,8.12\n C8.44,8.22,8.67,8.36,8.9,8.52c1.04,0.75,1.93,2.06,2.45,3.57c0.48,0.02,0.98,0.2,1.46,0.54c1.61,1.12,2.8,3.84,2.78,6.33\n c0,0.15-0.01,0.29-0.02,0.43c0.27,0.06,0.51,0.03,0.73-0.09c0.57-0.34,0.93-1.31,0.95-2.53C17.26,14.65,16.25,12.27,14.94,11.36z\n \"\n />\n </g>\n <path\n fill=\"#E8EAED;\"\n d=\"M11.92,19.4c-1.68-0.82-1.4-1.4-1.49-2.52v-0.16c0-0.95,0.67-1.37,1.49-0.93l2.32,1.24\n c-0.37-1.49-1.14-2.86-2.07-3.5l0,0c-0.4-0.28-0.78-0.39-1.1-0.32l-0.5,0.11l-0.14-0.49C10,11.37,9.19,10.1,8.25,9.42\n C7.67,9,7.09,8.85,6.61,8.98c-0.44,0.12-0.8,0.48-1.05,1.03l-0.31,0.71l-0.57-0.53c-0.15-0.14-0.3-0.26-0.46-0.36\n C3.81,9.55,3.39,9.4,3.01,9.4c-0.2,0-0.38,0.04-0.56,0.11c-0.57,0.24-0.98,0.86-1.14,1.74c-0.38,2.05,0.73,4.62,2.38,5.5\n l8.71,4.65c0.43,0.23,0.81,0.25,1.13,0.06c0.27-0.16,0.49-0.46,0.65-0.86L11.92,19.4z\"\n />\n\n <ellipse\n transform=\"matrix(0.9086 -0.4176 0.4176 0.9086 -6.3391 6.8809)\"\n fill=\"#E8EAED;\"\n cx=\"12.55\"\n cy=\"17.93\"\n rx=\"0.63\"\n ry=\"0.98\"\n />\n </g>\n </g>\n </SvgIcon>\n );\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,kBAAkB,MAAM;AACnC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,CAAE,EAAA,KAAA,EAAM,GAAE,KAAM,EAAA,OAAA,EAAQ,WAC/B,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,2BACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,sCACE,GACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,UAAA;AAAA,MACL,CAAE,EAAA,4SAAA;AAAA,KAAA;AAAA,GAIJ,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,UAAA;AAAA,MACL,CAAE,EAAA,qdAAA;AAAA,KAAA;AAAA,GAKN,CACF,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,GACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,UAAA;AAAA,MACL,CAAE,EAAA,gdAAA;AAAA,KAAA;AAAA,GAKJ,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,UAAA;AAAA,MACL,CAAE,EAAA,+RAAA;AAAA,KAAA;AAAA,GAIN,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,GACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,UAAA;AAAA,MACL,CAAE,EAAA,6RAAA;AAAA,KAAA;AAAA,GAIJ,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,UAAA;AAAA,MACL,CAAE,EAAA,kfAAA;AAAA,KAAA;AAAA,GAMN,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,UAAA;AAAA,MACL,CAAE,EAAA,yjBAAA;AAAA,KAAA;AAAA,GAOJ,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,qDAAA;AAAA,MACV,IAAK,EAAA,UAAA;AAAA,MACL,EAAG,EAAA,OAAA;AAAA,MACH,EAAG,EAAA,OAAA;AAAA,MACH,EAAG,EAAA,MAAA;AAAA,MACH,EAAG,EAAA,MAAA;AAAA,KAAA;AAAA,GAEP,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -4,11 +4,7 @@ import humanFormat from 'human-format';
|
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import Chart from 'react-apexcharts';
|
|
6
6
|
|
|
7
|
-
const PieChartComponent = ({
|
|
8
|
-
categories,
|
|
9
|
-
series,
|
|
10
|
-
height
|
|
11
|
-
}) => {
|
|
7
|
+
const PieChartComponent = ({ categories, series, height }) => {
|
|
12
8
|
const useStyles = makeStyles({
|
|
13
9
|
fixedHeightPaper: {
|
|
14
10
|
paddingTop: "10px",
|
|
@@ -119,15 +115,7 @@ const PieChartComponent = ({
|
|
|
119
115
|
},
|
|
120
116
|
series
|
|
121
117
|
};
|
|
122
|
-
return /* @__PURE__ */ React.createElement(Paper, { className: classes.fixedHeightPaper }, /* @__PURE__ */ React.createElement(
|
|
123
|
-
Chart,
|
|
124
|
-
{
|
|
125
|
-
options: state.options,
|
|
126
|
-
series: state.series,
|
|
127
|
-
type: "donut",
|
|
128
|
-
height: height ? height : 300
|
|
129
|
-
}
|
|
130
|
-
));
|
|
118
|
+
return /* @__PURE__ */ React.createElement(Paper, { className: classes.fixedHeightPaper }, /* @__PURE__ */ React.createElement(Chart, { options: state.options, series: state.series, type: "donut", height: height ? height : 300 }));
|
|
131
119
|
};
|
|
132
120
|
|
|
133
121
|
export { PieChartComponent };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PieChartComponent.esm.js","sources":["../../../src/components/PieChartComponent/PieChartComponent.tsx"],"sourcesContent":["import { Paper } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport humanFormat from 'human-format';\nimport React, { FC } from 'react';\nimport Chart from 'react-apexcharts';\nimport { PieChartComponentProps } from '../types';\n\nexport const PieChartComponent: FC<PieChartComponentProps> = ({
|
|
1
|
+
{"version":3,"file":"PieChartComponent.esm.js","sources":["../../../src/components/PieChartComponent/PieChartComponent.tsx"],"sourcesContent":["import { Paper } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport humanFormat from 'human-format';\nimport React, { FC } from 'react';\nimport Chart from 'react-apexcharts';\nimport { PieChartComponentProps } from '../types';\n\nexport const PieChartComponent: FC<PieChartComponentProps> = ({ categories, series, height }) => {\n const useStyles = makeStyles({\n fixedHeightPaper: {\n paddingTop: '10px',\n overflow: 'hidden',\n height: height ? height : 300,\n },\n });\n const classes = useStyles();\n const customScale = humanFormat.Scale.create(['', 'K', 'M', 'B'], 1000);\n\n const state = {\n options: {\n chart: {\n animations: {\n enabled: false,\n },\n },\n legend: {\n show: false,\n },\n labels: categories,\n dataLabels: {\n enabled: true,\n formatter: (value: number, { seriesIndex, w }: { seriesIndex: number; w: any }) => {\n return `${w.config.labels[seriesIndex]} (${value.toFixed(0)}%)`;\n },\n },\n tooltip: {\n y: {\n formatter: (value: number) => {\n return `$${humanFormat(value, {\n scale: customScale,\n separator: '',\n })}`;\n },\n },\n },\n plotOptions: {\n pie: {\n donut: {\n labels: {\n show: true,\n value: {\n formatter: (val: string) => {\n const floatVal = parseFloat(val);\n return `$${humanFormat(floatVal, {\n scale: customScale,\n separator: '',\n })}`;\n },\n },\n },\n },\n },\n },\n // there are only 5 colors by default, here we extend it to 50 different colors\n colors: [\n '#008FFB',\n '#00E396',\n '#FEB019',\n '#FF4560',\n '#775DD0',\n '#3F51B5',\n '#03A9F4',\n '#4CAF50',\n '#F9CE1D',\n '#FF9800',\n '#33B2DF',\n '#546E7A',\n '#D4526E',\n '#13D8AA',\n '#A5978B',\n '#4ECDC4',\n '#C7F464',\n '#81D4FA',\n '#546E7A',\n '#FD6A6A',\n '#2B908F',\n '#F9A3A4',\n '#90EE7E',\n '#FA4443',\n '#69D2E7',\n '#449DD1',\n '#F86624',\n '#EA3546',\n '#662E9B',\n '#C5D86D',\n '#D7263D',\n '#1B998B',\n '#2E294E',\n '#F46036',\n '#E2C044',\n '#662E9B',\n '#F86624',\n '#F9C80E',\n '#EA3546',\n '#43BCCD',\n '#5C4742',\n '#A5978B',\n '#8D5B4C',\n '#5A2A27',\n '#C4BBAF',\n '#A300D6',\n '#7D02EB',\n '#5653FE',\n '#2983FF',\n '#00B1F2',\n ],\n },\n series: series,\n };\n\n return (\n <Paper className={classes.fixedHeightPaper}>\n <Chart options={state.options} series={state.series} type=\"donut\" height={height ? height : 300} />\n </Paper>\n );\n};\n"],"names":[],"mappings":";;;;;;AAOO,MAAM,oBAAgD,CAAC,EAAE,UAAY,EAAA,MAAA,EAAQ,QAAa,KAAA;AAC/F,EAAA,MAAM,YAAY,UAAW,CAAA;AAAA,IAC3B,gBAAkB,EAAA;AAAA,MAChB,UAAY,EAAA,MAAA;AAAA,MACZ,QAAU,EAAA,QAAA;AAAA,MACV,MAAA,EAAQ,SAAS,MAAS,GAAA,GAAA;AAAA,KAC5B;AAAA,GACD,CAAA,CAAA;AACD,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAM,MAAA,WAAA,GAAc,WAAY,CAAA,KAAA,CAAM,MAAO,CAAA,CAAC,IAAI,GAAK,EAAA,GAAA,EAAK,GAAG,CAAA,EAAG,GAAI,CAAA,CAAA;AAEtE,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,OAAS,EAAA;AAAA,MACP,KAAO,EAAA;AAAA,QACL,UAAY,EAAA;AAAA,UACV,OAAS,EAAA,KAAA;AAAA,SACX;AAAA,OACF;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,IAAM,EAAA,KAAA;AAAA,OACR;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,UAAY,EAAA;AAAA,QACV,OAAS,EAAA,IAAA;AAAA,QACT,WAAW,CAAC,KAAA,EAAe,EAAE,WAAA,EAAa,GAAyC,KAAA;AACjF,UAAO,OAAA,CAAA,EAAG,CAAE,CAAA,MAAA,CAAO,MAAO,CAAA,WAAW,CAAC,CAAK,EAAA,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAC,CAAC,CAAA,EAAA,CAAA,CAAA;AAAA,SAC7D;AAAA,OACF;AAAA,MACA,OAAS,EAAA;AAAA,QACP,CAAG,EAAA;AAAA,UACD,SAAA,EAAW,CAAC,KAAkB,KAAA;AAC5B,YAAO,OAAA,CAAA,CAAA,EAAI,YAAY,KAAO,EAAA;AAAA,cAC5B,KAAO,EAAA,WAAA;AAAA,cACP,SAAW,EAAA,EAAA;AAAA,aACZ,CAAC,CAAA,CAAA,CAAA;AAAA,WACJ;AAAA,SACF;AAAA,OACF;AAAA,MACA,WAAa,EAAA;AAAA,QACX,GAAK,EAAA;AAAA,UACH,KAAO,EAAA;AAAA,YACL,MAAQ,EAAA;AAAA,cACN,IAAM,EAAA,IAAA;AAAA,cACN,KAAO,EAAA;AAAA,gBACL,SAAA,EAAW,CAAC,GAAgB,KAAA;AAC1B,kBAAM,MAAA,QAAA,GAAW,WAAW,GAAG,CAAA,CAAA;AAC/B,kBAAO,OAAA,CAAA,CAAA,EAAI,YAAY,QAAU,EAAA;AAAA,oBAC/B,KAAO,EAAA,WAAA;AAAA,oBACP,SAAW,EAAA,EAAA;AAAA,mBACZ,CAAC,CAAA,CAAA,CAAA;AAAA,iBACJ;AAAA,eACF;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA;AAAA,MAEA,MAAQ,EAAA;AAAA,QACN,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,OACF;AAAA,KACF;AAAA,IACA,MAAA;AAAA,GACF,CAAA;AAEA,EAAA,2CACG,KAAM,EAAA,EAAA,SAAA,EAAW,QAAQ,gBACxB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAM,OAAS,EAAA,KAAA,CAAM,SAAS,MAAQ,EAAA,KAAA,CAAM,QAAQ,IAAK,EAAA,OAAA,EAAQ,QAAQ,MAAS,GAAA,MAAA,GAAS,KAAK,CACnG,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -7,6 +7,7 @@ import { infraWalletApiRef } from '../../api/InfraWalletApi.esm.js';
|
|
|
7
7
|
import { getPeriodStrings, aggregateCostReports, mergeCostReports, getAllReportTags } from '../../api/functions.esm.js';
|
|
8
8
|
import { ColumnsChartComponent } from '../ColumnsChartComponent/ColumnsChartComponent.esm.js';
|
|
9
9
|
import { CostReportsTableComponent } from '../CostReportsTableComponent/CostReportsTableComponent.esm.js';
|
|
10
|
+
import { ErrorsAlertComponent } from '../ErrorsAlertComponent/ErrorsAlertComponent.esm.js';
|
|
10
11
|
import { PieChartComponent } from '../PieChartComponent/PieChartComponent.esm.js';
|
|
11
12
|
import { TopbarComponent } from '../TopbarComponent/TopbarComponent.esm.js';
|
|
12
13
|
|
|
@@ -32,6 +33,7 @@ const ReportsComponent = () => {
|
|
|
32
33
|
const MERGE_THRESHOLD = 8;
|
|
33
34
|
const [submittingState, setSubmittingState] = useState(false);
|
|
34
35
|
const [reports, setReports] = useState([]);
|
|
36
|
+
const [cloudProviderErrors, setCloudProviderErrors] = useState([]);
|
|
35
37
|
const [reportsAggregated, setReportsAggregated] = useState([]);
|
|
36
38
|
const [reportsAggregatedAndMerged, setReportsAggregatedAndMerged] = useState([]);
|
|
37
39
|
const [reportTags, setReportTags] = useState([]);
|
|
@@ -48,35 +50,21 @@ const ReportsComponent = () => {
|
|
|
48
50
|
const infraWalletApi = useApi(infraWalletApiRef);
|
|
49
51
|
const fetchCostReportsCallback = useCallback(async () => {
|
|
50
52
|
setSubmittingState(true);
|
|
51
|
-
await infraWalletApi.getCostReports(
|
|
52
|
-
filters,
|
|
53
|
-
groups,
|
|
54
|
-
granularity,
|
|
55
|
-
monthRangeState.startMonth,
|
|
56
|
-
monthRangeState.endMonth
|
|
57
|
-
).then((reportsResponse) => {
|
|
53
|
+
await infraWalletApi.getCostReports(filters, groups, granularity, monthRangeState.startMonth, monthRangeState.endMonth).then((reportsResponse) => {
|
|
58
54
|
if (reportsResponse.data && reportsResponse.data.length > 0) {
|
|
59
55
|
setReports(reportsResponse.data);
|
|
60
|
-
setPeriods(
|
|
61
|
-
getPeriodStrings(
|
|
62
|
-
granularity,
|
|
63
|
-
monthRangeState.startMonth,
|
|
64
|
-
monthRangeState.endMonth
|
|
65
|
-
)
|
|
66
|
-
);
|
|
56
|
+
setPeriods(getPeriodStrings(granularity, monthRangeState.startMonth, monthRangeState.endMonth));
|
|
67
57
|
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
58
|
+
if (reportsResponse.status === 207 && reportsResponse.errors) {
|
|
59
|
+
setCloudProviderErrors(reportsResponse.errors);
|
|
60
|
+
}
|
|
61
|
+
}).catch((e) => alertApi.post({ message: `${e.message}`, severity: "error" }));
|
|
71
62
|
setSubmittingState(false);
|
|
72
63
|
}, [filters, groups, monthRangeState, granularity, infraWalletApi, alertApi]);
|
|
73
64
|
useEffect(() => {
|
|
74
65
|
if (reports.length !== 0) {
|
|
75
66
|
const arrgegatedReports = aggregateCostReports(reports, aggregatedBy);
|
|
76
|
-
const aggregatedAndMergedReports = mergeCostReports(
|
|
77
|
-
arrgegatedReports,
|
|
78
|
-
MERGE_THRESHOLD
|
|
79
|
-
);
|
|
67
|
+
const aggregatedAndMergedReports = mergeCostReports(arrgegatedReports, MERGE_THRESHOLD);
|
|
80
68
|
const allTags = getAllReportTags(reports);
|
|
81
69
|
setReportsAggregated(arrgegatedReports);
|
|
82
70
|
setReportsAggregatedAndMerged(aggregatedAndMergedReports);
|
|
@@ -86,7 +74,7 @@ const ReportsComponent = () => {
|
|
|
86
74
|
useEffect(() => {
|
|
87
75
|
fetchCostReportsCallback();
|
|
88
76
|
}, [fetchCostReportsCallback]);
|
|
89
|
-
return /* @__PURE__ */ React.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React.createElement(Header, { title: "InfraWallet" }), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 3 }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
|
|
77
|
+
return /* @__PURE__ */ React.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React.createElement(Header, { title: "InfraWallet" }), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 3 }, cloudProviderErrors.length > 0 && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(ErrorsAlertComponent, { errors: cloudProviderErrors })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
|
|
90
78
|
TopbarComponent,
|
|
91
79
|
{
|
|
92
80
|
aggregatedBy,
|
|
@@ -98,12 +86,8 @@ const ReportsComponent = () => {
|
|
|
98
86
|
)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, submittingState ? /* @__PURE__ */ React.createElement(Progress, null) : null), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, md: 4, lg: 3 }, reportsAggregatedAndMerged.length > 0 && /* @__PURE__ */ React.createElement(
|
|
99
87
|
PieChartComponent,
|
|
100
88
|
{
|
|
101
|
-
categories: reportsAggregatedAndMerged.map(
|
|
102
|
-
|
|
103
|
-
),
|
|
104
|
-
series: reportsAggregatedAndMerged.map(
|
|
105
|
-
(item) => getTotalCost(item)
|
|
106
|
-
),
|
|
89
|
+
categories: reportsAggregatedAndMerged.map((item) => item.id),
|
|
90
|
+
series: reportsAggregatedAndMerged.map((item) => getTotalCost(item)),
|
|
107
91
|
height: 350
|
|
108
92
|
}
|
|
109
93
|
)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, md: 8, lg: 9 }, reportsAggregatedAndMerged.length > 0 && /* @__PURE__ */ React.createElement(
|
|
@@ -117,14 +101,7 @@ const ReportsComponent = () => {
|
|
|
117
101
|
})),
|
|
118
102
|
height: 350
|
|
119
103
|
}
|
|
120
|
-
)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, reportsAggregated.length > 0 && /* @__PURE__ */ React.createElement(
|
|
121
|
-
CostReportsTableComponent,
|
|
122
|
-
{
|
|
123
|
-
reports: reportsAggregated,
|
|
124
|
-
aggregatedBy,
|
|
125
|
-
periods
|
|
126
|
-
}
|
|
127
|
-
)))));
|
|
104
|
+
)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, reportsAggregated.length > 0 && /* @__PURE__ */ React.createElement(CostReportsTableComponent, { reports: reportsAggregated, aggregatedBy, periods })))));
|
|
128
105
|
};
|
|
129
106
|
|
|
130
107
|
export { ReportsComponent };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReportsComponent.esm.js","sources":["../../../src/components/ReportsComponent/ReportsComponent.tsx"],"sourcesContent":["import { Content, Header, Page, Progress } from '@backstage/core-components';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\nimport { Grid } from '@material-ui/core';\nimport { addMonths, endOfMonth, startOfMonth } from 'date-fns';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { infraWalletApiRef } from '../../api/InfraWalletApi';\nimport {\n aggregateCostReports,\n mergeCostReports,\n getAllReportTags,\n getPeriodStrings,\n} from '../../api/functions';\nimport { Report } from '../../api/types';\nimport { ColumnsChartComponent } from '../ColumnsChartComponent';\nimport { CostReportsTableComponent } from '../CostReportsTableComponent';\nimport { PieChartComponent } from '../PieChartComponent';\nimport { TopbarComponent } from '../TopbarComponent';\nimport { MonthRange } from '../types';\n\nconst getTotalCost = (report: Report): number => {\n let total = 0;\n Object.keys(report.reports).forEach((s: string) => {\n total += report.reports[s];\n });\n return total;\n};\n\nconst rearrangeData = (report: Report, periods: string[]): any[] => {\n const costs: any[] = [];\n periods.forEach((s: string) => {\n if (report.reports[s] !== undefined) {\n costs.push(report.reports[s]);\n } else {\n costs.push(null);\n }\n });\n return costs;\n};\n\nexport const ReportsComponent = () => {\n const MERGE_THRESHOLD = 8;\n const [submittingState, setSubmittingState] = useState<Boolean>(false);\n const [reports, setReports] = useState<Report[]>([]);\n const [reportsAggregated, setReportsAggregated] = useState<Report[]>([]);\n const [reportsAggregatedAndMerged, setReportsAggregatedAndMerged] = useState<\n Report[]\n >([]);\n const [reportTags, setReportTags] = useState<string[]>([]);\n const [granularity, setGranularity] = useState<string>('monthly');\n const [aggregatedBy, setAggregatedBy] = useState<string>('none');\n const [filters, _setFilters] = useState<string>('');\n const [groups, _setGroups] = useState<string>('');\n const [monthRangeState, setMonthRangeState] = React.useState<MonthRange>({\n startMonth: startOfMonth(addMonths(new Date(), -2)),\n endMonth: endOfMonth(new Date()),\n });\n const [periods, setPeriods] = useState<string[]>([]);\n\n const alertApi = useApi(alertApiRef);\n const infraWalletApi = useApi(infraWalletApiRef);\n\n const fetchCostReportsCallback = useCallback(async () => {\n setSubmittingState(true);\n await infraWalletApi\n .getCostReports(\n filters,\n groups,\n granularity,\n monthRangeState.startMonth,\n monthRangeState.endMonth,\n )\n .then(reportsResponse => {\n if (reportsResponse.data && reportsResponse.data.length > 0) {\n setReports(reportsResponse.data);\n setPeriods(\n getPeriodStrings(\n granularity,\n monthRangeState.startMonth,\n monthRangeState.endMonth,\n ),\n );\n }\n })\n .catch(e =>\n alertApi.post({ message: `${e.message}`, severity: 'error' }),\n );\n setSubmittingState(false);\n }, [filters, groups, monthRangeState, granularity, infraWalletApi, alertApi]);\n\n useEffect(() => {\n if (reports.length !== 0) {\n const arrgegatedReports = aggregateCostReports(reports, aggregatedBy);\n const aggregatedAndMergedReports = mergeCostReports(\n arrgegatedReports,\n MERGE_THRESHOLD,\n );\n const allTags = getAllReportTags(reports);\n setReportsAggregated(arrgegatedReports);\n setReportsAggregatedAndMerged(aggregatedAndMergedReports);\n setReportTags(allTags);\n }\n }, [reports, aggregatedBy, granularity, monthRangeState]);\n\n useEffect(() => {\n fetchCostReportsCallback();\n }, [fetchCostReportsCallback]);\n\n return (\n <Page themeId=\"tool\">\n <Header title=\"InfraWallet\" />\n <Content>\n <Grid container spacing={3}>\n <Grid item xs={12}>\n <TopbarComponent\n aggregatedBy={aggregatedBy}\n aggregatedBySetter={setAggregatedBy}\n tags={reportTags}\n monthRange={monthRangeState}\n monthRangeSetter={setMonthRangeState}\n />\n </Grid>\n <Grid item xs={12}>\n {submittingState ? <Progress /> : null}\n </Grid>\n <Grid item xs={12} md={4} lg={3}>\n {reportsAggregatedAndMerged.length > 0 && (\n <PieChartComponent\n categories={reportsAggregatedAndMerged.map(\n (item: any) => item.id,\n )}\n series={reportsAggregatedAndMerged.map((item: any) =>\n getTotalCost(item),\n )}\n height={350}\n />\n )}\n </Grid>\n <Grid item xs={12} md={8} lg={9}>\n {reportsAggregatedAndMerged.length > 0 && (\n <ColumnsChartComponent\n granularitySetter={setGranularity}\n categories={periods}\n series={reportsAggregatedAndMerged.map((item: any) => ({\n name: item.id,\n data: rearrangeData(item, periods),\n }))}\n height={350}\n />\n )}\n </Grid>\n <Grid item xs={12}>\n {reportsAggregated.length > 0 && (\n <CostReportsTableComponent\n reports={reportsAggregated}\n aggregatedBy={aggregatedBy}\n periods={periods}\n />\n )}\n </Grid>\n </Grid>\n </Content>\n </Page>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ReportsComponent.esm.js","sources":["../../../src/components/ReportsComponent/ReportsComponent.tsx"],"sourcesContent":["import { Content, Header, Page, Progress } from '@backstage/core-components';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\nimport { Grid } from '@material-ui/core';\nimport { addMonths, endOfMonth, startOfMonth } from 'date-fns';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { infraWalletApiRef } from '../../api/InfraWalletApi';\nimport { aggregateCostReports, getAllReportTags, getPeriodStrings, mergeCostReports } from '../../api/functions';\nimport { CloudProviderError, Report } from '../../api/types';\nimport { ColumnsChartComponent } from '../ColumnsChartComponent';\nimport { CostReportsTableComponent } from '../CostReportsTableComponent';\nimport { ErrorsAlertComponent } from '../ErrorsAlertComponent';\nimport { PieChartComponent } from '../PieChartComponent';\nimport { TopbarComponent } from '../TopbarComponent';\nimport { MonthRange } from '../types';\n\nconst getTotalCost = (report: Report): number => {\n let total = 0;\n Object.keys(report.reports).forEach((s: string) => {\n total += report.reports[s];\n });\n return total;\n};\n\nconst rearrangeData = (report: Report, periods: string[]): any[] => {\n const costs: any[] = [];\n periods.forEach((s: string) => {\n if (report.reports[s] !== undefined) {\n costs.push(report.reports[s]);\n } else {\n costs.push(null);\n }\n });\n return costs;\n};\n\nexport const ReportsComponent = () => {\n const MERGE_THRESHOLD = 8;\n const [submittingState, setSubmittingState] = useState<Boolean>(false);\n const [reports, setReports] = useState<Report[]>([]);\n const [cloudProviderErrors, setCloudProviderErrors] = useState<CloudProviderError[]>([]);\n const [reportsAggregated, setReportsAggregated] = useState<Report[]>([]);\n const [reportsAggregatedAndMerged, setReportsAggregatedAndMerged] = useState<Report[]>([]);\n const [reportTags, setReportTags] = useState<string[]>([]);\n const [granularity, setGranularity] = useState<string>('monthly');\n const [aggregatedBy, setAggregatedBy] = useState<string>('none');\n const [filters, _setFilters] = useState<string>('');\n const [groups, _setGroups] = useState<string>('');\n const [monthRangeState, setMonthRangeState] = React.useState<MonthRange>({\n startMonth: startOfMonth(addMonths(new Date(), -2)),\n endMonth: endOfMonth(new Date()),\n });\n const [periods, setPeriods] = useState<string[]>([]);\n\n const alertApi = useApi(alertApiRef);\n const infraWalletApi = useApi(infraWalletApiRef);\n\n const fetchCostReportsCallback = useCallback(async () => {\n setSubmittingState(true);\n await infraWalletApi\n .getCostReports(filters, groups, granularity, monthRangeState.startMonth, monthRangeState.endMonth)\n .then(reportsResponse => {\n if (reportsResponse.data && reportsResponse.data.length > 0) {\n setReports(reportsResponse.data);\n setPeriods(getPeriodStrings(granularity, monthRangeState.startMonth, monthRangeState.endMonth));\n }\n if (reportsResponse.status === 207 && reportsResponse.errors) {\n setCloudProviderErrors(reportsResponse.errors);\n }\n })\n .catch(e => alertApi.post({ message: `${e.message}`, severity: 'error' }));\n setSubmittingState(false);\n }, [filters, groups, monthRangeState, granularity, infraWalletApi, alertApi]);\n\n useEffect(() => {\n if (reports.length !== 0) {\n const arrgegatedReports = aggregateCostReports(reports, aggregatedBy);\n const aggregatedAndMergedReports = mergeCostReports(arrgegatedReports, MERGE_THRESHOLD);\n const allTags = getAllReportTags(reports);\n setReportsAggregated(arrgegatedReports);\n setReportsAggregatedAndMerged(aggregatedAndMergedReports);\n setReportTags(allTags);\n }\n }, [reports, aggregatedBy, granularity, monthRangeState]);\n\n useEffect(() => {\n fetchCostReportsCallback();\n }, [fetchCostReportsCallback]);\n\n return (\n <Page themeId=\"tool\">\n <Header title=\"InfraWallet\" />\n <Content>\n <Grid container spacing={3}>\n {cloudProviderErrors.length > 0 && (\n <Grid item xs={12}>\n <ErrorsAlertComponent errors={cloudProviderErrors} />\n </Grid>\n )}\n <Grid item xs={12}>\n <TopbarComponent\n aggregatedBy={aggregatedBy}\n aggregatedBySetter={setAggregatedBy}\n tags={reportTags}\n monthRange={monthRangeState}\n monthRangeSetter={setMonthRangeState}\n />\n </Grid>\n <Grid item xs={12}>\n {submittingState ? <Progress /> : null}\n </Grid>\n <Grid item xs={12} md={4} lg={3}>\n {reportsAggregatedAndMerged.length > 0 && (\n <PieChartComponent\n categories={reportsAggregatedAndMerged.map((item: any) => item.id)}\n series={reportsAggregatedAndMerged.map((item: any) => getTotalCost(item))}\n height={350}\n />\n )}\n </Grid>\n <Grid item xs={12} md={8} lg={9}>\n {reportsAggregatedAndMerged.length > 0 && (\n <ColumnsChartComponent\n granularitySetter={setGranularity}\n categories={periods}\n series={reportsAggregatedAndMerged.map((item: any) => ({\n name: item.id,\n data: rearrangeData(item, periods),\n }))}\n height={350}\n />\n )}\n </Grid>\n <Grid item xs={12}>\n {reportsAggregated.length > 0 && (\n <CostReportsTableComponent reports={reportsAggregated} aggregatedBy={aggregatedBy} periods={periods} />\n )}\n </Grid>\n </Grid>\n </Content>\n </Page>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -30,21 +30,7 @@ const TopbarComponent = ({
|
|
|
30
30
|
endMonth: endOfMonth(/* @__PURE__ */ new Date())
|
|
31
31
|
});
|
|
32
32
|
};
|
|
33
|
-
return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(FormControl, { className: classes.formControl }, /* @__PURE__ */ React.createElement(InputLabel, { shrink: true }, "Group by"), /* @__PURE__ */ React.createElement(
|
|
34
|
-
Select,
|
|
35
|
-
{
|
|
36
|
-
value: aggregatedBy,
|
|
37
|
-
onChange: (event) => aggregatedBySetter(event.target.value)
|
|
38
|
-
},
|
|
39
|
-
/* @__PURE__ */ React.createElement(MenuItem, { value: "none" }, /* @__PURE__ */ React.createElement("em", null, "None")),
|
|
40
|
-
/* @__PURE__ */ React.createElement(MenuItem, { value: "name" }, "Name"),
|
|
41
|
-
/* @__PURE__ */ React.createElement(MenuItem, { value: "provider" }, "Provider"),
|
|
42
|
-
/* @__PURE__ */ React.createElement(MenuItem, { value: "category" }, "Category"),
|
|
43
|
-
/* @__PURE__ */ React.createElement(MenuItem, { value: "service" }, "Cloud Service"),
|
|
44
|
-
/* @__PURE__ */ React.createElement(Divider, { light: true }),
|
|
45
|
-
/* @__PURE__ */ React.createElement(ListSubheader, { onClickCapture: (e) => e.stopPropagation() }, "Tags"),
|
|
46
|
-
tags.map((tag) => /* @__PURE__ */ React.createElement(MenuItem, { key: tag, value: tag }, `tag:${tag}`))
|
|
47
|
-
)), /* @__PURE__ */ React.createElement(FormControl, { className: classes.formControl }, /* @__PURE__ */ React.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns }, /* @__PURE__ */ React.createElement(
|
|
33
|
+
return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(FormControl, { className: classes.formControl }, /* @__PURE__ */ React.createElement(InputLabel, { shrink: true }, "Group by"), /* @__PURE__ */ React.createElement(Select, { value: aggregatedBy, onChange: (event) => aggregatedBySetter(event.target.value) }, /* @__PURE__ */ React.createElement(MenuItem, { value: "none" }, /* @__PURE__ */ React.createElement("em", null, "None")), /* @__PURE__ */ React.createElement(MenuItem, { value: "name" }, "Name"), /* @__PURE__ */ React.createElement(MenuItem, { value: "provider" }, "Provider"), /* @__PURE__ */ React.createElement(MenuItem, { value: "category" }, "Category"), /* @__PURE__ */ React.createElement(MenuItem, { value: "service" }, "Cloud Service"), /* @__PURE__ */ React.createElement(Divider, { light: true }), /* @__PURE__ */ React.createElement(ListSubheader, { onClickCapture: (e) => e.stopPropagation() }, "Tags"), tags.map((tag) => /* @__PURE__ */ React.createElement(MenuItem, { key: tag, value: tag }, `tag:${tag}`)))), /* @__PURE__ */ React.createElement(FormControl, { className: classes.formControl }, /* @__PURE__ */ React.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns }, /* @__PURE__ */ React.createElement(
|
|
48
34
|
DatePicker,
|
|
49
35
|
{
|
|
50
36
|
value: monthRange.startMonth,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TopbarComponent.esm.js","sources":["../../../src/components/TopbarComponent/TopbarComponent.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"TopbarComponent.esm.js","sources":["../../../src/components/TopbarComponent/TopbarComponent.tsx"],"sourcesContent":["import { Box, Button, FormControl, FormHelperText, Grid, MenuItem, Select } from '@material-ui/core';\nimport Divider from '@material-ui/core/Divider';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport ListSubheader from '@material-ui/core/ListSubheader';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { addMonths, endOfMonth, startOfMonth } from 'date-fns';\nimport React, { FC } from 'react';\nimport { TopbarComponentProps } from '../types';\n\nconst useStyles = makeStyles(theme => ({\n formControl: {\n marginLeft: theme.spacing(1),\n marginRight: theme.spacing(3),\n minWidth: 120,\n },\n}));\n\nexport const TopbarComponent: FC<TopbarComponentProps> = ({\n aggregatedBy,\n aggregatedBySetter,\n tags,\n monthRange,\n monthRangeSetter,\n}) => {\n const classes = useStyles();\n\n const setPreDefinedMonthRange = (lastXMonth: number) => {\n monthRangeSetter({\n startMonth: startOfMonth(addMonths(new Date(), lastXMonth * -1)),\n endMonth: endOfMonth(new Date()),\n });\n };\n\n return (\n <Box>\n <FormControl className={classes.formControl}>\n <InputLabel shrink>Group by</InputLabel>\n <Select value={aggregatedBy} onChange={event => aggregatedBySetter(event.target.value)}>\n <MenuItem value=\"none\">\n <em>None</em>\n </MenuItem>\n <MenuItem value=\"name\">Name</MenuItem>\n <MenuItem value=\"provider\">Provider</MenuItem>\n <MenuItem value=\"category\">Category</MenuItem>\n <MenuItem value=\"service\">Cloud Service</MenuItem>\n <Divider light />\n <ListSubheader onClickCapture={e => e.stopPropagation()}>Tags</ListSubheader>\n {tags.map(tag => (\n <MenuItem key={tag} value={tag}>\n {`tag:${tag}`}\n </MenuItem>\n ))}\n </Select>\n </FormControl>\n\n <FormControl className={classes.formControl}>\n <LocalizationProvider dateAdapter={AdapterDateFns}>\n <DatePicker\n value={monthRange.startMonth}\n label=\"From\"\n views={['year', 'month']}\n slotProps={{ textField: { variant: 'standard' } }}\n onAccept={value => {\n if (value) {\n monthRangeSetter({\n startMonth: startOfMonth(value),\n endMonth: endOfMonth(monthRange.endMonth),\n });\n }\n }}\n />\n </LocalizationProvider>\n </FormControl>\n\n <FormControl className={classes.formControl}>\n <LocalizationProvider dateAdapter={AdapterDateFns}>\n <DatePicker\n value={monthRange.endMonth}\n label=\"To\"\n views={['year', 'month']}\n slotProps={{ textField: { variant: 'standard' } }}\n onAccept={value => {\n if (value) {\n monthRangeSetter({\n startMonth: startOfMonth(monthRange.startMonth),\n endMonth: endOfMonth(value),\n });\n }\n }}\n />\n </LocalizationProvider>\n </FormControl>\n\n <FormControl className={classes.formControl}>\n <FormHelperText>Quick selections for month ranges</FormHelperText>\n <Grid container spacing={3}>\n <Grid item xs={12}>\n <Button color=\"primary\" onClick={() => setPreDefinedMonthRange(2)}>\n Last 3 Months\n </Button>\n <Button color=\"primary\" onClick={() => setPreDefinedMonthRange(5)}>\n Last 6 Months\n </Button>\n <Button color=\"primary\" onClick={() => setPreDefinedMonthRange(11)}>\n Last 12 Months\n </Button>\n </Grid>\n </Grid>\n </FormControl>\n </Box>\n );\n};\n"],"names":[],"mappings":"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"}
|
package/dist/plugin.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.ts"],"sourcesContent":["import {\n createApiFactory,\n createPlugin,\n createRoutableExtension,\n identityApiRef,\n configApiRef,\n} from '@backstage/core-plugin-api';\n\nimport { rootRouteRef } from './routes';\nimport { infraWalletApiRef } from './api/InfraWalletApi';\nimport { InfraWalletApiClient } from './api/InfraWalletApiClient';\n\nexport const infraWalletPlugin = createPlugin({\n id: 'infrawallet',\n routes: {\n root: rootRouteRef,\n },\n apis: [\n createApiFactory({\n api: infraWalletApiRef,\n deps: { identityApi: identityApiRef, configApi: configApiRef },\n factory: ({ identityApi, configApi })
|
|
1
|
+
{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.ts"],"sourcesContent":["import {\n createApiFactory,\n createPlugin,\n createRoutableExtension,\n identityApiRef,\n configApiRef,\n} from '@backstage/core-plugin-api';\n\nimport { rootRouteRef } from './routes';\nimport { infraWalletApiRef } from './api/InfraWalletApi';\nimport { InfraWalletApiClient } from './api/InfraWalletApiClient';\n\nexport const infraWalletPlugin = createPlugin({\n id: 'infrawallet',\n routes: {\n root: rootRouteRef,\n },\n apis: [\n createApiFactory({\n api: infraWalletApiRef,\n deps: { identityApi: identityApiRef, configApi: configApiRef },\n factory: ({ identityApi, configApi }) => new InfraWalletApiClient({ identityApi, configApi }),\n }),\n ],\n});\n\nexport const InfraWalletPage = infraWalletPlugin.provide(\n createRoutableExtension({\n name: 'InfraWalletPage',\n component: () => import('./routes').then(m => m.RootRoute),\n mountPoint: rootRouteRef,\n }),\n);\n"],"names":[],"mappings":";;;;;AAYO,MAAM,oBAAoB,YAAa,CAAA;AAAA,EAC5C,EAAI,EAAA,aAAA;AAAA,EACJ,MAAQ,EAAA;AAAA,IACN,IAAM,EAAA,YAAA;AAAA,GACR;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,gBAAiB,CAAA;AAAA,MACf,GAAK,EAAA,iBAAA;AAAA,MACL,IAAM,EAAA,EAAE,WAAa,EAAA,cAAA,EAAgB,WAAW,YAAa,EAAA;AAAA,MAC7D,OAAA,EAAS,CAAC,EAAE,WAAa,EAAA,SAAA,EAAgB,KAAA,IAAI,oBAAqB,CAAA,EAAE,WAAa,EAAA,SAAA,EAAW,CAAA;AAAA,KAC7F,CAAA;AAAA,GACH;AACF,CAAC,EAAA;AAEM,MAAM,kBAAkB,iBAAkB,CAAA,OAAA;AAAA,EAC/C,uBAAwB,CAAA;AAAA,IACtB,IAAM,EAAA,iBAAA;AAAA,IACN,SAAA,EAAW,MAAM,OAAO,iBAAU,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,SAAS,CAAA;AAAA,IACzD,UAAY,EAAA,YAAA;AAAA,GACb,CAAA;AACH;;;;"}
|