@electrolux-oss/plugin-infrawallet 0.1.7 → 0.1.8

package/README.md

@@ -15,6 +15,32 @@
 
 ## Getting started
 
+### Default Settings for Frontend
+
+Site admins can configure the default view for InfraWallet, including the default group by dimension, and the default
+query period. Add the following configurations to your `app-config.yaml` file if the default view needs to be changed.
+
+```yaml
+# note that infraWallet exists at the root level, it is not the same one for backend configurations
+infraWallet:
+  settings:
+    defaultGroupBy: none # none by default, or provider, category, service, tag:<tag_key>
+    defaultShowLastXMonths: 3 # 3 by default, or other numbers, we recommend it less than 12
+```
+
+### Default Settings for Frontend
+
+Site admins can configure the default view for InfraWallet, including the default group by dimension, and the default
+query period. Add the following configurations to your `app-config.yaml` file if the default view needs to be changed.
+
+```yaml
+# note that infraWallet exists at the root level, it is not the same one for backend configurations
+infraWallet:
+  settings:
+    defaultGroupBy: none # none by default, or provider, category, service, tag:<tag_key>
+    defaultShowLastXMonths: 3 # 3 by default, or other numbers, we recommend it less than 12
+```
+
 ### Define Cloud Accounts in app-config.yaml
 
 The configuration schema of InfraWallet is defined in the [plugins/infrawallet-backend/config.d.ts](plugins/infrawallet-backend/config.d.ts) file. Users need to configure their cloud accounts in the `app-config.yaml` in the root folder.

package/config.d.ts

@@ -0,0 +1,12 @@
+export interface Config {
+  infraWallet: {
+    /**
+     * @deepVisibility frontend
+     */
+    settings: {
+      defaultGroupBy?: string; // if not set, `none` will be used
+      defaultShowLastXMonths?: number; // if not set, 3 will be used
+      readOnly?: boolean; // false by default
+    };
+  };
+}

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

@@ -1 +1 @@
-{"version":3,"file":"InfraWalletApi.esm.js","sources":["../../src/api/InfraWalletApi.ts"],"sourcesContent":["import { createApiRef } from '@backstage/core-plugin-api';\nimport { CostReportsResponse } from './types';\nimport { Response } from 'node-fetch';\n\n/** @public */\nexport const infraWalletApiRef = createApiRef<InfraWalletApi>({\n  id: 'plugin.infrawallet',\n});\n\n/** @public */\nexport interface InfraWalletApi {\n  get(path: string): Promise<Response>;\n  getCostReports(\n    filters: string,\n    groups: string,\n    granularity: string,\n    startTime: Date,\n    endTime: Date,\n  ): Promise<CostReportsResponse>;\n}\n"],"names":[],"mappings":";;AAKO,MAAM,oBAAoB,YAA6B,CAAA;AAAA,EAC5D,EAAI,EAAA,oBAAA;AACN,CAAC;;;;"}
+{"version":3,"file":"InfraWalletApi.esm.js","sources":["../../src/api/InfraWalletApi.ts"],"sourcesContent":["import { createApiRef } from '@backstage/core-plugin-api';\nimport {\n  CostReportsResponse,\n  GetWalletResponse,\n  MetricConfigsResponse,\n  MetricSetting,\n  MetricsResponse,\n  MetricsSettingResponse,\n} from './types';\n\n/** @public */\nexport const infraWalletApiRef = createApiRef<InfraWalletApi>({\n  id: 'plugin.infrawallet',\n});\n\n/** @public */\nexport interface InfraWalletApi {\n  getCostReports(\n    filters: string,\n    groups: string,\n    granularity: string,\n    startTime: Date,\n    endTime: Date,\n  ): Promise<CostReportsResponse>;\n  getMetrics(walletName: string, granularity: string, startTime: Date, endTime: Date): Promise<MetricsResponse>;\n  getMetricConfigs(): Promise<MetricConfigsResponse>;\n  getWalletMetricsSetting(walletName: string): Promise<MetricsSettingResponse>;\n  updateWalletMetricSetting(\n    walletName: string,\n    metricSetting: MetricSetting,\n  ): Promise<{ updated: boolean; status: number }>;\n  deleteWalletMetricSetting(\n    walletName: string,\n    metricSetting: MetricSetting,\n  ): Promise<{ deleted: boolean; status: number }>;\n  getWalletByName(walletName: string): Promise<GetWalletResponse>;\n}\n"],"names":[],"mappings":";;AAWO,MAAM,oBAAoB,YAA6B,CAAA;AAAA,EAC5D,EAAI,EAAA,oBAAA;AACN,CAAC;;;;"}

package/dist/api/InfraWalletApiClient.esm.js

@@ -13,22 +13,55 @@ class InfraWalletApiClient {
     this.identityApi = options.identityApi;
     this.backendUrl = options.configApi.getString("backend.baseUrl");
   }
-  async get(path) {
+  async request(path, method, payload) {
     const url = `${this.backendUrl}/${path}`;
     const { token: idToken } = await this.identityApi.getCredentials();
-    const response = await fetch(url, {
-      headers: idToken ? { Authorization: `Bearer ${idToken}` } : {}
-    });
+    const headers = idToken ? { Authorization: `Bearer ${idToken}` } : {};
+    if (method !== void 0 && method !== "GET") {
+      headers["Content-Type"] = "application/json";
+    }
+    const request = {
+      headers,
+      method: method != null ? method : "GET"
+    };
+    if (payload) {
+      request.body = JSON.stringify(payload);
+    }
+    const response = await fetch(url, request);
     if (!response.ok) {
-      const payload = await response.text();
-      const message = `Request failed with ${response.status} ${response.statusText}, ${payload}`;
+      const res = await response.text();
+      const message = `Request failed with ${response.status} ${response.statusText}, ${res}`;
       throw new Error(message);
     }
     return await response.json();
   }
   async getCostReports(filters, groups, granularity, startTime, endTime) {
     const url = `api/infrawallet/reports?&filters=${filters}&groups=${groups}&granularity=${granularity}&startTime=${startTime.getTime()}&endTime=${endTime.getTime()}`;
-    return await this.get(url);
+    return await this.request(url);
+  }
+  async getWalletByName(walletName) {
+    const url = `api/infrawallet/${walletName}`;
+    return await this.request(url);
+  }
+  async getMetrics(walletName, granularity, startTime, endTime) {
+    const url = `api/infrawallet/${walletName}/metrics?&granularity=${granularity}&startTime=${startTime.getTime()}&endTime=${endTime.getTime()}`;
+    return await this.request(url);
+  }
+  async getMetricConfigs() {
+    const url = "api/infrawallet/metric/metric_configs";
+    return await this.request(url);
+  }
+  async getWalletMetricsSetting(walletName) {
+    const url = `api/infrawallet/${walletName}/metrics_setting`;
+    return await this.request(url);
+  }
+  async updateWalletMetricSetting(walletName, metricSetting) {
+    const url = `api/infrawallet/${walletName}/metrics_setting`;
+    return await this.request(url, "PUT", metricSetting);
+  }
+  async deleteWalletMetricSetting(walletName, metricSetting) {
+    const url = `api/infrawallet/${walletName}/metrics_setting`;
+    return await this.request(url, "DELETE", metricSetting);
   }
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"InfraWalletApiClient.esm.js","sources":["../../src/api/InfraWalletApiClient.ts"],"sourcesContent":["import { ConfigApi, IdentityApi } from '@backstage/core-plugin-api';\nimport fetch from 'node-fetch';\nimport { InfraWalletApi } from './InfraWalletApi';\nimport { CostReportsResponse } from './types';\n\n/** @public */\nexport class InfraWalletApiClient implements InfraWalletApi {\n  private readonly identityApi: IdentityApi;\n  private readonly backendUrl: string;\n\n  constructor(options: { identityApi: IdentityApi; configApi: ConfigApi }) {\n    this.identityApi = options.identityApi;\n    this.backendUrl = options.configApi.getString('backend.baseUrl');\n  }\n\n  async get(path: string): Promise<any> {\n    const url = `${this.backendUrl}/${path}`;\n    const { token: idToken } = await this.identityApi.getCredentials();\n    const response = await fetch(url, {\n      headers: idToken ? { Authorization: `Bearer ${idToken}` } : {},\n    });\n\n    if (!response.ok) {\n      const payload = await response.text();\n      const message = `Request failed with ${response.status} ${response.statusText}, ${payload}`;\n      throw new Error(message);\n    }\n\n    return await response.json();\n  }\n\n  async getCostReports(\n    filters: string,\n    groups: string,\n    granularity: string,\n    startTime: Date,\n    endTime: Date,\n  ): Promise<CostReportsResponse> {\n    const url = `api/infrawallet/reports?&filters=${filters}&groups=${groups}&granularity=${granularity}&startTime=${startTime.getTime()}&endTime=${endTime.getTime()}`;\n    return await this.get(url);\n  }\n}\n"],"names":[],"mappings":";;;;;;;;AAMO,MAAM,oBAA+C,CAAA;AAAA,EAI1D,YAAY,OAA6D,EAAA;AAHzE,IAAiB,aAAA,CAAA,IAAA,EAAA,aAAA,CAAA,CAAA;AACjB,IAAiB,aAAA,CAAA,IAAA,EAAA,YAAA,CAAA,CAAA;AAGf,IAAA,IAAA,CAAK,cAAc,OAAQ,CAAA,WAAA,CAAA;AAC3B,IAAA,IAAA,CAAK,UAAa,GAAA,OAAA,CAAQ,SAAU,CAAA,SAAA,CAAU,iBAAiB,CAAA,CAAA;AAAA,GACjE;AAAA,EAEA,MAAM,IAAI,IAA4B,EAAA;AACpC,IAAA,MAAM,GAAM,GAAA,CAAA,EAAG,IAAK,CAAA,UAAU,IAAI,IAAI,CAAA,CAAA,CAAA;AACtC,IAAA,MAAM,EAAE,KAAO,EAAA,OAAA,KAAY,MAAM,IAAA,CAAK,YAAY,cAAe,EAAA,CAAA;AACjE,IAAM,MAAA,QAAA,GAAW,MAAM,KAAA,CAAM,GAAK,EAAA;AAAA,MAChC,OAAA,EAAS,UAAU,EAAE,aAAA,EAAe,UAAU,OAAO,CAAA,CAAA,KAAO,EAAC;AAAA,KAC9D,CAAA,CAAA;AAED,IAAI,IAAA,CAAC,SAAS,EAAI,EAAA;AAChB,MAAM,MAAA,OAAA,GAAU,MAAM,QAAA,CAAS,IAAK,EAAA,CAAA;AACpC,MAAM,MAAA,OAAA,GAAU,uBAAuB,QAAS,CAAA,MAAM,IAAI,QAAS,CAAA,UAAU,KAAK,OAAO,CAAA,CAAA,CAAA;AACzF,MAAM,MAAA,IAAI,MAAM,OAAO,CAAA,CAAA;AAAA,KACzB;AAEA,IAAO,OAAA,MAAM,SAAS,IAAK,EAAA,CAAA;AAAA,GAC7B;AAAA,EAEA,MAAM,cACJ,CAAA,OAAA,EACA,MACA,EAAA,WAAA,EACA,WACA,OAC8B,EAAA;AAC9B,IAAA,MAAM,GAAM,GAAA,CAAA,iCAAA,EAAoC,OAAO,CAAA,QAAA,EAAW,MAAM,CAAgB,aAAA,EAAA,WAAW,CAAc,WAAA,EAAA,SAAA,CAAU,OAAQ,EAAC,CAAY,SAAA,EAAA,OAAA,CAAQ,SAAS,CAAA,CAAA,CAAA;AACjK,IAAO,OAAA,MAAM,IAAK,CAAA,GAAA,CAAI,GAAG,CAAA,CAAA;AAAA,GAC3B;AACF;;;;"}
+{"version":3,"file":"InfraWalletApiClient.esm.js","sources":["../../src/api/InfraWalletApiClient.ts"],"sourcesContent":["import { ConfigApi, IdentityApi } from '@backstage/core-plugin-api';\nimport fetch from 'node-fetch';\nimport { InfraWalletApi } from './InfraWalletApi';\nimport {\n  CostReportsResponse,\n  GetWalletResponse,\n  MetricConfigsResponse,\n  MetricSetting,\n  MetricsResponse,\n  MetricsSettingResponse,\n} from './types';\n\n/** @public */\nexport class InfraWalletApiClient implements InfraWalletApi {\n  private readonly identityApi: IdentityApi;\n  private readonly backendUrl: string;\n\n  constructor(options: { identityApi: IdentityApi; configApi: ConfigApi }) {\n    this.identityApi = options.identityApi;\n    this.backendUrl = options.configApi.getString('backend.baseUrl');\n  }\n\n  async request(path: string, method?: string, payload?: Record<string, string | undefined>) {\n    const url = `${this.backendUrl}/${path}`;\n    const { token: idToken } = await this.identityApi.getCredentials();\n    const headers: Record<string, string> = idToken ? { Authorization: `Bearer ${idToken}` } : {};\n\n    if (method !== undefined && method !== 'GET') {\n      headers['Content-Type'] = 'application/json';\n    }\n\n    const request: any = {\n      headers: headers,\n      method: method ?? 'GET',\n    };\n\n    if (payload) {\n      request.body = JSON.stringify(payload);\n    }\n\n    const response = await fetch(url, request);\n\n    if (!response.ok) {\n      const res = await response.text();\n      const message = `Request failed with ${response.status} ${response.statusText}, ${res}`;\n      throw new Error(message);\n    }\n\n    return await response.json();\n  }\n\n  async getCostReports(\n    filters: string,\n    groups: string,\n    granularity: string,\n    startTime: Date,\n    endTime: Date,\n  ): Promise<CostReportsResponse> {\n    const url = `api/infrawallet/reports?&filters=${filters}&groups=${groups}&granularity=${granularity}&startTime=${startTime.getTime()}&endTime=${endTime.getTime()}`;\n    return await this.request(url);\n  }\n\n  async getWalletByName(walletName: string): Promise<GetWalletResponse> {\n    const url = `api/infrawallet/${walletName}`;\n    return await this.request(url);\n  }\n\n  async getMetrics(walletName: string, granularity: string, startTime: Date, endTime: Date): Promise<MetricsResponse> {\n    const url = `api/infrawallet/${walletName}/metrics?&granularity=${granularity}&startTime=${startTime.getTime()}&endTime=${endTime.getTime()}`;\n    return await this.request(url);\n  }\n\n  async getMetricConfigs(): Promise<MetricConfigsResponse> {\n    const url = 'api/infrawallet/metric/metric_configs';\n    return await this.request(url);\n  }\n\n  async getWalletMetricsSetting(walletName: string): Promise<MetricsSettingResponse> {\n    const url = `api/infrawallet/${walletName}/metrics_setting`;\n    return await this.request(url);\n  }\n  async updateWalletMetricSetting(\n    walletName: string,\n    metricSetting: MetricSetting,\n  ): Promise<{ updated: boolean; status: number }> {\n    const url = `api/infrawallet/${walletName}/metrics_setting`;\n    return await this.request(url, 'PUT', metricSetting);\n  }\n\n  async deleteWalletMetricSetting(\n    walletName: string,\n    metricSetting: MetricSetting,\n  ): Promise<{ deleted: boolean; status: number }> {\n    const url = `api/infrawallet/${walletName}/metrics_setting`;\n    return await this.request(url, 'DELETE', metricSetting);\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/api/functions.esm.js

@@ -59,7 +59,7 @@ const aggregateCostReports = (reports, aggregatedBy) => {
       if (aggregatedBy && aggregatedBy in report) {
         keyName = report[aggregatedBy];
       } else if (aggregatedBy === "none") {
-        keyName = "Total cloud costs";
+        keyName = "Total";
       }
       if (!accumulator[keyName]) {
         accumulator[keyName] = {

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

@@ -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, Filters } 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 filterCostReports = (reports: Report[], filters: Filters): Report[] => {\n  const filteredReports = reports.filter(report => {\n    let match = true;\n    Object.keys(filters).forEach(key => {\n      if (filters[key].length > 0 && !filters[key].includes(report[key] as string)) {\n        match = false;\n      }\n    });\n    return match;\n  });\n\n  return filteredReports;\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 getReportKeyAndValues = (reports: Report[]): { [key: string]: string[] } => {\n  const excludedKeys = ['id', 'reports'];\n  const keyValueSets: { [key: string]: Set<string> } = {};\n  reports.forEach(report => {\n    Object.keys(report).forEach(key => {\n      if (!excludedKeys.includes(key)) {\n        if (keyValueSets[key] === undefined) {\n          keyValueSets[key] = new Set<string>();\n        } else {\n          keyValueSets[key].add(report[key] as string);\n        }\n      }\n    });\n  });\n\n  const keyValues: { [key: string]: string[] } = {};\n  Object.keys(keyValueSets).forEach((key: string) => {\n    keyValues[key] = Array.from(keyValueSets[key]);\n  });\n  return keyValues;\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":"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"}
+{"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, Filters } 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 filterCostReports = (reports: Report[], filters: Filters): Report[] => {\n  const filteredReports = reports.filter(report => {\n    let match = true;\n    Object.keys(filters).forEach(key => {\n      if (filters[key].length > 0 && !filters[key].includes(report[key] as string)) {\n        match = false;\n      }\n    });\n    return match;\n  });\n\n  return filteredReports;\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';\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 getReportKeyAndValues = (reports: Report[]): { [key: string]: string[] } => {\n  const excludedKeys = ['id', 'reports'];\n  const keyValueSets: { [key: string]: Set<string> } = {};\n  reports.forEach(report => {\n    Object.keys(report).forEach(key => {\n      if (!excludedKeys.includes(key)) {\n        if (keyValueSets[key] === undefined) {\n          keyValueSets[key] = new Set<string>();\n        } else {\n          keyValueSets[key].add(report[key] as string);\n        }\n      }\n    });\n  });\n\n  const keyValues: { [key: string]: string[] } = {};\n  Object.keys(keyValueSets).forEach((key: string) => {\n    keyValues[key] = Array.from(keyValueSets[key]);\n  });\n  return keyValues;\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":"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"}

package/dist/components/ColumnsChartComponent/ColumnsChartComponent.esm.js

@@ -1,46 +1,15 @@
-import { Switch, Paper, Grid } from '@material-ui/core';
-import { withStyles, useTheme, makeStyles } from '@material-ui/core/styles';
+import { Paper, Grid, Switch } from '@material-ui/core';
+import { useTheme, makeStyles } from '@material-ui/core/styles';
 import humanFormat from 'human-format';
-import React from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import Chart from 'react-apexcharts';
+import { colorList } from '../constants.esm.js';
 
-const Toggle = withStyles((theme) => ({
-  root: {
-    width: 28,
-    height: 16,
-    padding: 0,
-    display: "flex"
-  },
-  switchBase: {
-    padding: 2,
-    color: theme.palette.grey[500],
-    "&$checked": {
-      transform: "translateX(12px)",
-      color: theme.palette.common.white,
-      "& + $track": {
-        opacity: 1,
-        backgroundColor: theme.palette.primary.main,
-        borderColor: theme.palette.primary.main
-      }
-    }
-  },
-  thumb: {
-    width: 12,
-    height: 12,
-    boxShadow: "none"
-  },
-  track: {
-    border: `1px solid ${theme.palette.grey[500]}`,
-    borderRadius: 16 / 2,
-    opacity: 1,
-    backgroundColor: theme.palette.common.white
-  },
-  checked: {}
-}))(Switch);
 const ColumnsChartComponent = ({
   granularitySetter,
   categories,
   series,
+  metrics,
   height,
   thumbnail,
   dataPointSelectionHandler
@@ -50,18 +19,22 @@ const ColumnsChartComponent = ({
     fixedHeightPaper: {
       padding: "16px",
       display: "flex",
-      overflow: "auto",
       flexDirection: "column",
       height: height ? height : 300
     },
     thumbnailPaper: {
       display: "flex",
-      overflow: "auto",
+      overflow: "hidden",
       flexDirection: "column",
       height: height ? height - 70 : 80
     }
   });
   const classes = useStyles();
+  const [showMetrics, setShowMetrics] = useState(true);
+  const [seriesArray, setSeriesArray] = useState([]);
+  const [yaxisArray, setYaxisArray] = useState([]);
+  const [strokeWidthArray, setStrokeWidthArray] = useState([]);
+  const [strokeDashArray, setStrokeDashArray] = useState([]);
   const customScale = humanFormat.Scale.create(["", "K", "M", "B"], 1e3);
   const state = thumbnail ? {
     options: {
@@ -105,20 +78,31 @@ const ColumnsChartComponent = ({
       xaxis: {
         categories
       },
-      yaxis: {
-        decimalsInFloat: 2
+      stroke: {
+        width: strokeWidthArray,
+        dashArray: strokeDashArray,
+        curve: "smooth"
       },
+      yaxis: yaxisArray,
       dataLabels: {
         enabled: false
       },
       tooltip: {
         y: {
-          formatter: (value) => {
-            return `$${humanFormat(value, {
+          formatter: (value, { seriesIndex }) => {
+            if (!value) {
+              return "";
+            }
+            const prefix = seriesIndex <= series.length - 1 ? "$" : "";
+            return `${prefix}${humanFormat(value, {
               scale: customScale,
               separator: ""
             })}`;
           }
+        },
+        fixed: {
+          enabled: true,
+          position: "topRight"
         }
       },
       legend: {
@@ -128,62 +112,68 @@ const ColumnsChartComponent = ({
         mode: defaultTheme.palette.type
       },
       // there are only 5 colors by default, here we extend it to 50 different colors
-      colors: [
-        "#008FFB",
-        "#00E396",
-        "#FEB019",
-        "#FF4560",
-        "#775DD0",
-        "#3F51B5",
-        "#03A9F4",
-        "#4CAF50",
-        "#F9CE1D",
-        "#FF9800",
-        "#33B2DF",
-        "#546E7A",
-        "#D4526E",
-        "#13D8AA",
-        "#A5978B",
-        "#4ECDC4",
-        "#C7F464",
-        "#81D4FA",
-        "#546E7A",
-        "#FD6A6A",
-        "#2B908F",
-        "#F9A3A4",
-        "#90EE7E",
-        "#FA4443",
-        "#69D2E7",
-        "#449DD1",
-        "#F86624",
-        "#EA3546",
-        "#662E9B",
-        "#C5D86D",
-        "#D7263D",
-        "#1B998B",
-        "#2E294E",
-        "#F46036",
-        "#E2C044",
-        "#662E9B",
-        "#F86624",
-        "#F9C80E",
-        "#EA3546",
-        "#43BCCD",
-        "#5C4742",
-        "#A5978B",
-        "#8D5B4C",
-        "#5A2A27",
-        "#C4BBAF",
-        "#A300D6",
-        "#7D02EB",
-        "#5653FE",
-        "#2983FF",
-        "#00B1F2"
-      ]
+      colors: colorList
     },
-    series
+    series: seriesArray
   };
-  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 - 70 : 230 }));
+  const initChartCallback = useCallback(async () => {
+    const strokeWidth = Array(series.length).fill(0);
+    const seriesResult = series.map((s) => s);
+    const scale = humanFormat.Scale.create(["", "K", "M", "B"], 1e3);
+    const yaxisResult = [
+      {
+        seriesName: series.map((s) => s.name),
+        decimalsInFloat: 2,
+        title: {
+          text: "Costs in USD"
+        },
+        labels: {
+          formatter: (value) => {
+            if (typeof value !== "number" || isNaN(value)) {
+              return "";
+            }
+            return `$${humanFormat(value, {
+              scale,
+              separator: ""
+            })}`;
+          }
+        }
+      }
+    ];
+    if (metrics && showMetrics) {
+      metrics.forEach((metric) => {
+        strokeWidth.push(3);
+        seriesResult.push(metric);
+        yaxisResult.push({
+          seriesName: [metric.name],
+          decimalsInFloat: 2,
+          opposite: true,
+          title: {
+            text: metric.name
+          },
+          labels: {
+            formatter: (value) => {
+              if (typeof value !== "number" || isNaN(value)) {
+                return "";
+              }
+              return humanFormat(value, {
+                scale,
+                separator: ""
+              });
+            }
+          }
+        });
+      });
+    }
+    setSeriesArray(seriesResult);
+    setYaxisArray(yaxisResult);
+    setStrokeWidthArray(strokeWidth);
+    setStrokeDashArray(Array(seriesResult.length).fill(0));
+  }, [metrics, series, showMetrics]);
+  useEffect(() => {
+    initChartCallback();
+  }, [initChartCallback]);
+  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(Switch, { size: "small", onChange: (event) => granularitySetter(event.target.checked ? "daily" : "monthly") })), /* @__PURE__ */ React.createElement(Grid, { item: true }, "Daily"), /* @__PURE__ */ React.createElement(Grid, { item: true }, " | "), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Switch, { size: "small", checked: showMetrics, onChange: (_) => setShowMetrics((ori) => !ori) })), /* @__PURE__ */ React.createElement(Grid, { item: true }, "Show Metrics")), seriesArray && /* @__PURE__ */ React.createElement(Chart, { options: state.options, series: state.series, type: "line", height: height ? height - 70 : 230 }));
 };
 
 export { ColumnsChartComponent };

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

@@ -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(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 - 70 : 80,\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 - 70 : 230} />\n    </Paper>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColumnsChartComponent.esm.js","sources":["../../../src/components/ColumnsChartComponent/ColumnsChartComponent.tsx"],"sourcesContent":["import { Grid, Paper, Switch } from '@material-ui/core';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport humanFormat from 'human-format';\nimport React, { FC, useCallback, useEffect, useState } from 'react';\nimport Chart from 'react-apexcharts';\nimport { colorList } from '../constants';\nimport { ColumnsChartComponentProps } from '../types';\n\ntype CurveType =\n  | 'smooth'\n  | 'straight'\n  | 'stepline'\n  | 'linestep'\n  | 'monotoneCubic'\n  | ('smooth' | 'straight' | 'stepline' | 'linestep' | 'monotoneCubic')[]\n  | undefined;\n\nexport const ColumnsChartComponent: FC<ColumnsChartComponentProps> = ({\n  granularitySetter,\n  categories,\n  series,\n  metrics,\n  height,\n  thumbnail,\n  dataPointSelectionHandler,\n}) => {\n  const defaultTheme = useTheme();\n  const useStyles = makeStyles({\n    fixedHeightPaper: {\n      padding: '16px',\n      display: 'flex',\n      flexDirection: 'column',\n      height: height ? height : 300,\n    },\n    thumbnailPaper: {\n      display: 'flex',\n      overflow: 'hidden',\n      flexDirection: 'column',\n      height: height ? height - 70 : 80,\n    },\n  });\n  const classes = useStyles();\n  const [showMetrics, setShowMetrics] = useState<boolean>(true);\n  const [seriesArray, setSeriesArray] = useState<any[]>([]);\n  const [yaxisArray, setYaxisArray] = useState<any[]>([]);\n  const [strokeWidthArray, setStrokeWidthArray] = useState<number[]>([]);\n  const [strokeDashArray, setStrokeDashArray] = useState<number[]>([]);\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          stroke: {\n            width: strokeWidthArray,\n            dashArray: strokeDashArray,\n            curve: 'smooth' as CurveType,\n          },\n          yaxis: yaxisArray,\n          dataLabels: {\n            enabled: false,\n          },\n          tooltip: {\n            y: {\n              formatter: (value: number, { seriesIndex }: { seriesIndex: number }) => {\n                if (!value) {\n                  return '';\n                }\n                const prefix = seriesIndex <= series.length - 1 ? '$' : '';\n                return `${prefix}${humanFormat(value, {\n                  scale: customScale,\n                  separator: '',\n                })}`;\n              },\n            },\n            fixed: {\n              enabled: true,\n              position: 'topRight',\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: colorList,\n        },\n        series: seriesArray,\n      };\n\n  const initChartCallback = useCallback(async () => {\n    const strokeWidth = Array<number>(series.length).fill(0);\n    const seriesResult = series.map(s => s);\n    // init a scale here as well, it seems that adding the predefined customScale as a dependency is buggy\n    const scale = humanFormat.Scale.create(['', 'K', 'M', 'B'], 1000);\n    const yaxisResult: any[] = [\n      {\n        seriesName: series.map(s => s.name),\n        decimalsInFloat: 2,\n        title: {\n          text: 'Costs in USD',\n        },\n        labels: {\n          formatter: (value: number) => {\n            if (typeof value !== 'number' || isNaN(value)) {\n              return '';\n            }\n            return `$${humanFormat(value, {\n              scale: scale,\n              separator: '',\n            })}`;\n          },\n        },\n      },\n    ];\n\n    if (metrics && showMetrics) {\n      metrics.forEach(metric => {\n        strokeWidth.push(3);\n        seriesResult.push(metric);\n        yaxisResult.push({\n          seriesName: [metric.name],\n          decimalsInFloat: 2,\n          opposite: true,\n          title: {\n            text: metric.name,\n          },\n          labels: {\n            formatter: (value: number) => {\n              if (typeof value !== 'number' || isNaN(value)) {\n                return '';\n              }\n              return humanFormat(value, {\n                scale: scale,\n                separator: '',\n              });\n            },\n          },\n        });\n      });\n    }\n\n    setSeriesArray(seriesResult);\n    setYaxisArray(yaxisResult);\n    setStrokeWidthArray(strokeWidth);\n    setStrokeDashArray(Array<number>(seriesResult.length).fill(0));\n  }, [metrics, series, showMetrics]);\n\n  useEffect(() => {\n    initChartCallback();\n  }, [initChartCallback]);\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          <Switch size=\"small\" onChange={event => granularitySetter(event.target.checked ? 'daily' : 'monthly')} />\n        </Grid>\n        <Grid item>Daily</Grid>\n        <Grid item> | </Grid>\n        <Grid item>\n          <Switch size=\"small\" checked={showMetrics} onChange={_ => setShowMetrics((ori: boolean) => !ori)} />\n        </Grid>\n        <Grid item>Show Metrics</Grid>\n      </Grid>\n      {seriesArray && (\n        <Chart options={state.options} series={state.series} type=\"line\" height={height ? height - 70 : 230} />\n      )}\n    </Paper>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAiBO,MAAM,wBAAwD,CAAC;AAAA,EACpE,iBAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;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,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,QAAA;AAAA,MACV,aAAe,EAAA,QAAA;AAAA,MACf,MAAA,EAAQ,MAAS,GAAA,MAAA,GAAS,EAAK,GAAA,EAAA;AAAA,KACjC;AAAA,GACD,CAAA,CAAA;AACD,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAkB,IAAI,CAAA,CAAA;AAC5D,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,QAAA,CAAgB,EAAE,CAAA,CAAA;AACxD,EAAA,MAAM,CAAC,UAAY,EAAA,aAAa,CAAI,GAAA,QAAA,CAAgB,EAAE,CAAA,CAAA;AACtD,EAAA,MAAM,CAAC,gBAAkB,EAAA,mBAAmB,CAAI,GAAA,QAAA,CAAmB,EAAE,CAAA,CAAA;AACrE,EAAA,MAAM,CAAC,eAAiB,EAAA,kBAAkB,CAAI,GAAA,QAAA,CAAmB,EAAE,CAAA,CAAA;AACnE,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,MAAQ,EAAA;AAAA,QACN,KAAO,EAAA,gBAAA;AAAA,QACP,SAAW,EAAA,eAAA;AAAA,QACX,KAAO,EAAA,QAAA;AAAA,OACT;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MACP,UAAY,EAAA;AAAA,QACV,OAAS,EAAA,KAAA;AAAA,OACX;AAAA,MACA,OAAS,EAAA;AAAA,QACP,CAAG,EAAA;AAAA,UACD,SAAW,EAAA,CAAC,KAAe,EAAA,EAAE,aAA2C,KAAA;AACtE,YAAA,IAAI,CAAC,KAAO,EAAA;AACV,cAAO,OAAA,EAAA,CAAA;AAAA,aACT;AACA,YAAA,MAAM,MAAS,GAAA,WAAA,IAAe,MAAO,CAAA,MAAA,GAAS,IAAI,GAAM,GAAA,EAAA,CAAA;AACxD,YAAA,OAAO,CAAG,EAAA,MAAM,CAAG,EAAA,WAAA,CAAY,KAAO,EAAA;AAAA,cACpC,KAAO,EAAA,WAAA;AAAA,cACP,SAAW,EAAA,EAAA;AAAA,aACZ,CAAC,CAAA,CAAA,CAAA;AAAA,WACJ;AAAA,SACF;AAAA,QACA,KAAO,EAAA;AAAA,UACL,OAAS,EAAA,IAAA;AAAA,UACT,QAAU,EAAA,UAAA;AAAA,SACZ;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,SAAA;AAAA,KACV;AAAA,IACA,MAAQ,EAAA,WAAA;AAAA,GACV,CAAA;AAEJ,EAAM,MAAA,iBAAA,GAAoB,YAAY,YAAY;AAChD,IAAA,MAAM,cAAc,KAAc,CAAA,MAAA,CAAO,MAAM,CAAA,CAAE,KAAK,CAAC,CAAA,CAAA;AACvD,IAAA,MAAM,YAAe,GAAA,MAAA,CAAO,GAAI,CAAA,CAAA,CAAA,KAAK,CAAC,CAAA,CAAA;AAEtC,IAAM,MAAA,KAAA,GAAQ,WAAY,CAAA,KAAA,CAAM,MAAO,CAAA,CAAC,IAAI,GAAK,EAAA,GAAA,EAAK,GAAG,CAAA,EAAG,GAAI,CAAA,CAAA;AAChE,IAAA,MAAM,WAAqB,GAAA;AAAA,MACzB;AAAA,QACE,UAAY,EAAA,MAAA,CAAO,GAAI,CAAA,CAAA,CAAA,KAAK,EAAE,IAAI,CAAA;AAAA,QAClC,eAAiB,EAAA,CAAA;AAAA,QACjB,KAAO,EAAA;AAAA,UACL,IAAM,EAAA,cAAA;AAAA,SACR;AAAA,QACA,MAAQ,EAAA;AAAA,UACN,SAAA,EAAW,CAAC,KAAkB,KAAA;AAC5B,YAAA,IAAI,OAAO,KAAA,KAAU,QAAY,IAAA,KAAA,CAAM,KAAK,CAAG,EAAA;AAC7C,cAAO,OAAA,EAAA,CAAA;AAAA,aACT;AACA,YAAO,OAAA,CAAA,CAAA,EAAI,YAAY,KAAO,EAAA;AAAA,cAC5B,KAAA;AAAA,cACA,SAAW,EAAA,EAAA;AAAA,aACZ,CAAC,CAAA,CAAA,CAAA;AAAA,WACJ;AAAA,SACF;AAAA,OACF;AAAA,KACF,CAAA;AAEA,IAAA,IAAI,WAAW,WAAa,EAAA;AAC1B,MAAA,OAAA,CAAQ,QAAQ,CAAU,MAAA,KAAA;AACxB,QAAA,WAAA,CAAY,KAAK,CAAC,CAAA,CAAA;AAClB,QAAA,YAAA,CAAa,KAAK,MAAM,CAAA,CAAA;AACxB,QAAA,WAAA,CAAY,IAAK,CAAA;AAAA,UACf,UAAA,EAAY,CAAC,MAAA,CAAO,IAAI,CAAA;AAAA,UACxB,eAAiB,EAAA,CAAA;AAAA,UACjB,QAAU,EAAA,IAAA;AAAA,UACV,KAAO,EAAA;AAAA,YACL,MAAM,MAAO,CAAA,IAAA;AAAA,WACf;AAAA,UACA,MAAQ,EAAA;AAAA,YACN,SAAA,EAAW,CAAC,KAAkB,KAAA;AAC5B,cAAA,IAAI,OAAO,KAAA,KAAU,QAAY,IAAA,KAAA,CAAM,KAAK,CAAG,EAAA;AAC7C,gBAAO,OAAA,EAAA,CAAA;AAAA,eACT;AACA,cAAA,OAAO,YAAY,KAAO,EAAA;AAAA,gBACxB,KAAA;AAAA,gBACA,SAAW,EAAA,EAAA;AAAA,eACZ,CAAA,CAAA;AAAA,aACH;AAAA,WACF;AAAA,SACD,CAAA,CAAA;AAAA,OACF,CAAA,CAAA;AAAA,KACH;AAEA,IAAA,cAAA,CAAe,YAAY,CAAA,CAAA;AAC3B,IAAA,aAAA,CAAc,WAAW,CAAA,CAAA;AACzB,IAAA,mBAAA,CAAoB,WAAW,CAAA,CAAA;AAC/B,IAAA,kBAAA,CAAmB,MAAc,YAAa,CAAA,MAAM,CAAE,CAAA,IAAA,CAAK,CAAC,CAAC,CAAA,CAAA;AAAA,GAC5D,EAAA,CAAC,OAAS,EAAA,MAAA,EAAQ,WAAW,CAAC,CAAA,CAAA;AAEjC,EAAA,SAAA,CAAU,MAAM;AACd,IAAkB,iBAAA,EAAA,CAAA;AAAA,GACpB,EAAG,CAAC,iBAAiB,CAAC,CAAA,CAAA;AAEtB,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAM,SAAW,EAAA,SAAA,GAAY,QAAQ,cAAiB,GAAA,OAAA,CAAQ,oCAC5D,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,WAAS,IAAC,EAAA,cAAA,EAAe,YAAW,OAAS,EAAA,CAAA,EAAA,sCAChD,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,SAAO,CAClB,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAA,sCACP,MAAO,EAAA,EAAA,IAAA,EAAK,SAAQ,QAAU,EAAA,CAAA,KAAA,KAAS,kBAAkB,KAAM,CAAA,MAAA,CAAO,UAAU,OAAU,GAAA,SAAS,GAAG,CACzG,CAAA,sCACC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,OAAK,CAChB,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAA,EAAC,KAAG,CACd,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAA,sCACP,MAAO,EAAA,EAAA,IAAA,EAAK,SAAQ,OAAS,EAAA,WAAA,EAAa,UAAU,CAAK,CAAA,KAAA,cAAA,CAAe,CAAC,GAAiB,KAAA,CAAC,GAAG,CAAA,EAAG,CACpG,CAAA,sCACC,IAAK,EAAA,EAAA,IAAA,EAAI,QAAC,cAAY,CACzB,GACC,WACC,oBAAA,KAAA,CAAA,aAAA,CAAC,SAAM,OAAS,EAAA,KAAA,CAAM,SAAS,MAAQ,EAAA,KAAA,CAAM,QAAQ,IAAK,EAAA,MAAA,EAAO,QAAQ,MAAS,GAAA,MAAA,GAAS,EAAK,GAAA,GAAA,EAAK,CAEzG,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/MetricConfigurationComponent/MetricConfigurationComponent.esm.js

@@ -0,0 +1,256 @@
+import { useApi, configApiRef, alertApiRef } from '@backstage/core-plugin-api';
+import AddIcon from '@material-ui/icons/Add';
+import CloseIcon from '@material-ui/icons/Close';
+import DeleteIcon from '@material-ui/icons/DeleteOutlined';
+import EditIcon from '@material-ui/icons/Edit';
+import SaveIcon from '@material-ui/icons/Save';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import React, { useState, useCallback, useEffect } from 'react';
+import { v4 } from 'uuid';
+import { infraWalletApiRef } from '../../api/InfraWalletApi.esm.js';
+import { DataGrid, GridToolbarContainer, GridRowEditStopReasons, GridRowModes, GridActionsCellItem } from '@mui/x-data-grid';
+
+const MetricConfigurationComponent = ({ wallet }) => {
+  var _a;
+  const configApi = useApi(configApiRef);
+  const alertApi = useApi(alertApiRef);
+  const infraWalletApi = useApi(infraWalletApiRef);
+  const [rows, setRows] = useState([]);
+  const [metricConfigs, setMetricConfigs] = useState();
+  const [rowModesModel, setRowModesModel] = useState({});
+  const readOnly = (_a = configApi.getOptionalBoolean("infraWallet.settings.readOnly")) != null ? _a : false;
+  function EditToolbar() {
+    const handleClick = () => {
+      const id = v4();
+      setRows((oldRows) => [
+        ...oldRows,
+        {
+          id,
+          wallet_id: wallet ? wallet.id : "",
+          metric_provider: "",
+          config_name: "",
+          metric_name: "",
+          description: "",
+          query: "",
+          isNew: true
+        }
+      ]);
+      setRowModesModel((oldModel) => ({
+        ...oldModel,
+        [id]: { mode: GridRowModes.Edit, fieldToFocus: "name" }
+      }));
+    };
+    return /* @__PURE__ */ React.createElement(GridToolbarContainer, null, /* @__PURE__ */ React.createElement(Button, { color: "primary", startIcon: /* @__PURE__ */ React.createElement(AddIcon, null), onClick: handleClick }, "Add metric"));
+  }
+  const handleRowEditStop = (params, event) => {
+    if (params.reason === GridRowEditStopReasons.rowFocusOut) {
+      event.defaultMuiPrevented = true;
+    }
+  };
+  const handleEditClick = (id) => () => {
+    setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } });
+  };
+  const handleSaveClick = (id) => () => {
+    setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } });
+  };
+  const handleDeleteClick = (row) => () => {
+    if (wallet) {
+      const { isNew, ...metricSetting } = row;
+      infraWalletApi.deleteWalletMetricSetting(wallet.name, metricSetting).then((response) => {
+        if (response.status === 200) {
+          setRows(rows.filter((r) => r.id !== row.id));
+        } else {
+          alertApi.post({ message: "Failed to update the metric setting", severity: "error" });
+        }
+      }).catch((e) => alertApi.post({ message: `${e.message}`, severity: "error" }));
+    }
+  };
+  const handleCancelClick = (id) => () => {
+    setRowModesModel({
+      ...rowModesModel,
+      [id]: { mode: GridRowModes.View, ignoreModifications: true }
+    });
+    const editedRow = rows.find((row) => row.id === id);
+    if (editedRow.isNew) {
+      setRows(rows.filter((row) => row.id !== id));
+    }
+  };
+  const processRowUpdate = (newRow) => {
+    const updatedRow = { ...newRow, isNew: false };
+    if (wallet) {
+      const { isNew, ...metricSetting } = updatedRow;
+      infraWalletApi.updateWalletMetricSetting(wallet.name, metricSetting).then((response) => {
+        if (response.status === 200) {
+          setRows(rows.map((row) => row.id === newRow.id ? updatedRow : row));
+        } else {
+          alertApi.post({ message: "Failed to update the metric setting", severity: "error" });
+        }
+      }).catch((e) => alertApi.post({ message: `${e.message}`, severity: "error" }));
+    }
+    return updatedRow;
+  };
+  const handleRowModesModelChange = (newRowModesModel) => {
+    setRowModesModel(newRowModesModel);
+  };
+  const columns = [
+    {
+      field: "metric_provider",
+      headerName: "Provider",
+      width: 220,
+      editable: !readOnly,
+      type: "singleSelect",
+      valueOptions: () => {
+        const options = [];
+        const optionsSet = /* @__PURE__ */ new Set();
+        if (metricConfigs) {
+          metricConfigs.forEach((c) => {
+            optionsSet.add(c.metric_provider);
+          });
+        }
+        optionsSet.forEach((o) => options.push({ value: o, label: o }));
+        return options;
+      }
+    },
+    {
+      field: "config_name",
+      headerName: "ConfigName",
+      width: 180,
+      editable: !readOnly,
+      type: "singleSelect",
+      valueOptions: (params) => {
+        const options = [];
+        if (params.row.metric_provider !== "" && metricConfigs) {
+          metricConfigs.forEach((c) => {
+            if (params.row.metric_provider === c.metric_provider) {
+              options.push({ value: c.config_name, label: c.config_name });
+            }
+          });
+        }
+        return options;
+      }
+    },
+    {
+      field: "metric_name",
+      headerName: "MetricName",
+      width: 220,
+      editable: !readOnly
+    },
+    {
+      field: "description",
+      headerName: "Description",
+      width: 220,
+      editable: !readOnly
+    },
+    {
+      field: "query",
+      headerName: "Query",
+      flex: 1,
+      editable: !readOnly
+    }
+  ];
+  if (!readOnly) {
+    columns.push({
+      field: "actions",
+      type: "actions",
+      headerName: "Actions",
+      width: 100,
+      cellClassName: "actions",
+      getActions: ({ id, row }) => {
+        var _a2;
+        const isInEditMode = ((_a2 = rowModesModel[id]) == null ? void 0 : _a2.mode) === GridRowModes.Edit;
+        if (isInEditMode) {
+          return [
+            /* @__PURE__ */ React.createElement(
+              GridActionsCellItem,
+              {
+                icon: /* @__PURE__ */ React.createElement(SaveIcon, null),
+                label: "Save",
+                sx: {
+                  color: "primary.main"
+                },
+                onClick: handleSaveClick(id)
+              }
+            ),
+            /* @__PURE__ */ React.createElement(
+              GridActionsCellItem,
+              {
+                icon: /* @__PURE__ */ React.createElement(CloseIcon, null),
+                label: "Cancel",
+                className: "textPrimary",
+                onClick: handleCancelClick(id),
+                color: "inherit"
+              }
+            )
+          ];
+        }
+        return [
+          /* @__PURE__ */ React.createElement(
+            GridActionsCellItem,
+            {
+              icon: /* @__PURE__ */ React.createElement(EditIcon, null),
+              label: "Edit",
+              className: "textPrimary",
+              onClick: handleEditClick(id),
+              color: "inherit"
+            }
+          ),
+          /* @__PURE__ */ React.createElement(GridActionsCellItem, { icon: /* @__PURE__ */ React.createElement(DeleteIcon, null), label: "Delete", onClick: handleDeleteClick(row), color: "inherit" })
+        ];
+      }
+    });
+  }
+  const getWalletMetricSettings = useCallback(async () => {
+    if (wallet) {
+      await infraWalletApi.getWalletMetricsSetting(wallet.name).then((metricsResponse) => {
+        if (metricsResponse.data && metricsResponse.status === 200) {
+          setRows(metricsResponse.data);
+        }
+      }).catch((e) => alertApi.post({ message: `${e.message}`, severity: "error" }));
+    }
+  }, [wallet, infraWalletApi, alertApi]);
+  const getMetricConfig = useCallback(async () => {
+    await infraWalletApi.getMetricConfigs().then((response) => {
+      if (response.data && response.status === 200) {
+        setMetricConfigs(response.data);
+      }
+    }).catch((e) => alertApi.post({ message: `${e.message}`, severity: "error" }));
+  }, [alertApi, infraWalletApi]);
+  useEffect(() => {
+    getWalletMetricSettings();
+    getMetricConfig();
+  }, [getWalletMetricSettings, getMetricConfig]);
+  return /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      sx: {
+        height: 500,
+        width: "100%",
+        "& .actions": {
+          color: "text.secondary"
+        },
+        "& .textPrimary": {
+          color: "text.primary"
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      DataGrid,
+      {
+        rows,
+        columns,
+        editMode: "row",
+        rowModesModel,
+        onRowModesModelChange: handleRowModesModelChange,
+        onRowEditStop: handleRowEditStop,
+        processRowUpdate,
+        slots: {
+          toolbar: readOnly ? null : EditToolbar
+        }
+      }
+    )
+  );
+};
+
+export { MetricConfigurationComponent };
+//# sourceMappingURL=MetricConfigurationComponent.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetricConfigurationComponent.esm.js","sources":["../../../src/components/MetricConfigurationComponent/MetricConfigurationComponent.tsx"],"sourcesContent":["import { alertApiRef, configApiRef, useApi } from '@backstage/core-plugin-api';\nimport AddIcon from '@material-ui/icons/Add';\nimport CancelIcon from '@material-ui/icons/Close';\nimport DeleteIcon from '@material-ui/icons/DeleteOutlined';\nimport EditIcon from '@material-ui/icons/Edit';\nimport SaveIcon from '@material-ui/icons/Save';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport React, { FC, useCallback, useEffect, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { infraWalletApiRef } from '../../api/InfraWalletApi';\nimport { MetricConfig, MetricSetting, Wallet } from '../../api/types';\n\nimport {\n  DataGrid,\n  GridActionsCellItem,\n  GridColDef,\n  GridEventListener,\n  GridRowEditStopReasons,\n  GridRowId,\n  GridRowModel,\n  GridRowModes,\n  GridRowModesModel,\n  GridRowsProp,\n  GridSlots,\n  GridToolbarContainer,\n  ValueOptions,\n} from '@mui/x-data-grid';\n\nexport const MetricConfigurationComponent: FC<{ wallet?: Wallet }> = ({ wallet }) => {\n  const configApi = useApi(configApiRef);\n  const alertApi = useApi(alertApiRef);\n  const infraWalletApi = useApi(infraWalletApiRef);\n  const [rows, setRows] = useState<GridRowsProp>([]);\n  const [metricConfigs, setMetricConfigs] = useState<MetricConfig[]>();\n  const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({});\n\n  const readOnly = configApi.getOptionalBoolean('infraWallet.settings.readOnly') ?? false;\n\n  function EditToolbar() {\n    const handleClick = () => {\n      const id = uuidv4();\n      setRows(oldRows => [\n        ...oldRows,\n        {\n          id,\n          wallet_id: wallet ? wallet.id : '',\n          metric_provider: '',\n          config_name: '',\n          metric_name: '',\n          description: '',\n          query: '',\n          isNew: true,\n        },\n      ]);\n      setRowModesModel(oldModel => ({\n        ...oldModel,\n        [id]: { mode: GridRowModes.Edit, fieldToFocus: 'name' },\n      }));\n    };\n\n    return (\n      <GridToolbarContainer>\n        <Button color=\"primary\" startIcon={<AddIcon />} onClick={handleClick}>\n          Add metric\n        </Button>\n      </GridToolbarContainer>\n    );\n  }\n\n  const handleRowEditStop: GridEventListener<'rowEditStop'> = (params, event) => {\n    if (params.reason === GridRowEditStopReasons.rowFocusOut) {\n      event.defaultMuiPrevented = true;\n    }\n  };\n\n  const handleEditClick = (id: GridRowId) => () => {\n    setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } });\n  };\n\n  const handleSaveClick = (id: GridRowId) => () => {\n    setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } });\n  };\n\n  const handleDeleteClick = (row: GridRowModel) => () => {\n    if (wallet) {\n      const { isNew, ...metricSetting } = row;\n      infraWalletApi\n        .deleteWalletMetricSetting(wallet.name, metricSetting as MetricSetting)\n        .then(response => {\n          if (response.status === 200) {\n            setRows(rows.filter(r => r.id !== row.id));\n          } else {\n            alertApi.post({ message: 'Failed to update the metric setting', severity: 'error' });\n          }\n        })\n        .catch(e => alertApi.post({ message: `${e.message}`, severity: 'error' }));\n    }\n  };\n\n  const handleCancelClick = (id: GridRowId) => () => {\n    setRowModesModel({\n      ...rowModesModel,\n      [id]: { mode: GridRowModes.View, ignoreModifications: true },\n    });\n\n    const editedRow = rows.find(row => row.id === id);\n    if (editedRow!.isNew) {\n      setRows(rows.filter(row => row.id !== id));\n    }\n  };\n\n  const processRowUpdate = (newRow: GridRowModel) => {\n    const updatedRow = { ...newRow, isNew: false };\n    if (wallet) {\n      const { isNew, ...metricSetting } = updatedRow;\n\n      infraWalletApi\n        .updateWalletMetricSetting(wallet.name, metricSetting as MetricSetting)\n        .then(response => {\n          if (response.status === 200) {\n            setRows(rows.map(row => (row.id === newRow.id ? updatedRow : row)));\n          } else {\n            alertApi.post({ message: 'Failed to update the metric setting', severity: 'error' });\n          }\n        })\n        .catch(e => alertApi.post({ message: `${e.message}`, severity: 'error' }));\n    }\n\n    return updatedRow;\n  };\n\n  const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => {\n    setRowModesModel(newRowModesModel);\n  };\n\n  const columns: GridColDef[] = [\n    {\n      field: 'metric_provider',\n      headerName: 'Provider',\n      width: 220,\n      editable: !readOnly,\n      type: 'singleSelect',\n      valueOptions: () => {\n        const options: ValueOptions[] = [];\n        const optionsSet = new Set<string>();\n\n        if (metricConfigs) {\n          metricConfigs.forEach(c => {\n            optionsSet.add(c.metric_provider);\n          });\n        }\n        optionsSet.forEach(o => options.push({ value: o, label: o }));\n        return options;\n      },\n    },\n    {\n      field: 'config_name',\n      headerName: 'ConfigName',\n      width: 180,\n      editable: !readOnly,\n      type: 'singleSelect',\n      valueOptions: params => {\n        const options: ValueOptions[] = [];\n        if (params.row.metric_provider !== '' && metricConfigs) {\n          metricConfigs.forEach(c => {\n            if (params.row.metric_provider === c.metric_provider) {\n              options.push({ value: c.config_name, label: c.config_name });\n            }\n          });\n        }\n        return options;\n      },\n    },\n    {\n      field: 'metric_name',\n      headerName: 'MetricName',\n      width: 220,\n      editable: !readOnly,\n    },\n    {\n      field: 'description',\n      headerName: 'Description',\n      width: 220,\n      editable: !readOnly,\n    },\n    {\n      field: 'query',\n      headerName: 'Query',\n      flex: 1,\n      editable: !readOnly,\n    },\n  ];\n\n  if (!readOnly) {\n    columns.push({\n      field: 'actions',\n      type: 'actions',\n      headerName: 'Actions',\n      width: 100,\n      cellClassName: 'actions',\n      getActions: ({ id, row }) => {\n        const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit;\n\n        if (isInEditMode) {\n          return [\n            <GridActionsCellItem\n              icon={<SaveIcon />}\n              label=\"Save\"\n              sx={{\n                color: 'primary.main',\n              }}\n              onClick={handleSaveClick(id)}\n            />,\n            <GridActionsCellItem\n              icon={<CancelIcon />}\n              label=\"Cancel\"\n              className=\"textPrimary\"\n              onClick={handleCancelClick(id)}\n              color=\"inherit\"\n            />,\n          ];\n        }\n\n        return [\n          <GridActionsCellItem\n            icon={<EditIcon />}\n            label=\"Edit\"\n            className=\"textPrimary\"\n            onClick={handleEditClick(id)}\n            color=\"inherit\"\n          />,\n          <GridActionsCellItem icon={<DeleteIcon />} label=\"Delete\" onClick={handleDeleteClick(row)} color=\"inherit\" />,\n        ];\n      },\n    });\n  }\n\n  const getWalletMetricSettings = useCallback(async () => {\n    if (wallet) {\n      await infraWalletApi\n        .getWalletMetricsSetting(wallet.name)\n        .then(metricsResponse => {\n          if (metricsResponse.data && metricsResponse.status === 200) {\n            setRows(metricsResponse.data);\n          }\n        })\n        .catch(e => alertApi.post({ message: `${e.message}`, severity: 'error' }));\n    }\n  }, [wallet, infraWalletApi, alertApi]);\n\n  const getMetricConfig = useCallback(async () => {\n    await infraWalletApi\n      .getMetricConfigs()\n      .then(response => {\n        if (response.data && response.status === 200) {\n          setMetricConfigs(response.data);\n        }\n      })\n      .catch(e => alertApi.post({ message: `${e.message}`, severity: 'error' }));\n  }, [alertApi, infraWalletApi]);\n\n  useEffect(() => {\n    getWalletMetricSettings();\n    getMetricConfig();\n  }, [getWalletMetricSettings, getMetricConfig]);\n\n  return (\n    <Box\n      sx={{\n        height: 500,\n        width: '100%',\n        '& .actions': {\n          color: 'text.secondary',\n        },\n        '& .textPrimary': {\n          color: 'text.primary',\n        },\n      }}\n    >\n      <DataGrid\n        rows={rows}\n        columns={columns}\n        editMode=\"row\"\n        rowModesModel={rowModesModel}\n        onRowModesModelChange={handleRowModesModelChange}\n        onRowEditStop={handleRowEditStop}\n        processRowUpdate={processRowUpdate}\n        slots={{\n          toolbar: readOnly ? null : (EditToolbar as GridSlots['toolbar']),\n        }}\n      />\n    </Box>\n  );\n};\n"],"names":["uuidv4","_a","CancelIcon"],"mappings":";;;;;;;;;;;;;AA6BO,MAAM,4BAAwD,GAAA,CAAC,EAAE,MAAA,EAAa,KAAA;AA7BrF,EAAA,IAAA,EAAA,CAAA;AA8BE,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA,CAAA;AACrC,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA,CAAA;AACnC,EAAM,MAAA,cAAA,GAAiB,OAAO,iBAAiB,CAAA,CAAA;AAC/C,EAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAA,QAAA,CAAuB,EAAE,CAAA,CAAA;AACjD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,QAAyB,EAAA,CAAA;AACnE,EAAA,MAAM,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAA,QAAA,CAA4B,EAAE,CAAA,CAAA;AAExE,EAAA,MAAM,QAAW,GAAA,CAAA,EAAA,GAAA,SAAA,CAAU,kBAAmB,CAAA,+BAA+B,MAA5D,IAAiE,GAAA,EAAA,GAAA,KAAA,CAAA;AAElF,EAAA,SAAS,WAAc,GAAA;AACrB,IAAA,MAAM,cAAc,MAAM;AACxB,MAAA,MAAM,KAAKA,EAAO,EAAA,CAAA;AAClB,MAAA,OAAA,CAAQ,CAAW,OAAA,KAAA;AAAA,QACjB,GAAG,OAAA;AAAA,QACH;AAAA,UACE,EAAA;AAAA,UACA,SAAA,EAAW,MAAS,GAAA,MAAA,CAAO,EAAK,GAAA,EAAA;AAAA,UAChC,eAAiB,EAAA,EAAA;AAAA,UACjB,WAAa,EAAA,EAAA;AAAA,UACb,WAAa,EAAA,EAAA;AAAA,UACb,WAAa,EAAA,EAAA;AAAA,UACb,KAAO,EAAA,EAAA;AAAA,UACP,KAAO,EAAA,IAAA;AAAA,SACT;AAAA,OACD,CAAA,CAAA;AACD,MAAA,gBAAA,CAAiB,CAAa,QAAA,MAAA;AAAA,QAC5B,GAAG,QAAA;AAAA,QACH,CAAC,EAAE,GAAG,EAAE,MAAM,YAAa,CAAA,IAAA,EAAM,cAAc,MAAO,EAAA;AAAA,OACtD,CAAA,CAAA,CAAA;AAAA,KACJ,CAAA;AAEA,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,KAAM,EAAA,SAAA,EAAU,SAAW,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,IAAA,CAAA,EAAI,OAAS,EAAA,WAAA,EAAA,EAAa,YAEtE,CACF,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAM,MAAA,iBAAA,GAAsD,CAAC,MAAA,EAAQ,KAAU,KAAA;AAC7E,IAAI,IAAA,MAAA,CAAO,MAAW,KAAA,sBAAA,CAAuB,WAAa,EAAA;AACxD,MAAA,KAAA,CAAM,mBAAsB,GAAA,IAAA,CAAA;AAAA,KAC9B;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,EAAA,KAAkB,MAAM;AAC/C,IAAiB,gBAAA,CAAA,EAAE,GAAG,aAAA,EAAe,CAAC,EAAE,GAAG,EAAE,IAAM,EAAA,YAAA,CAAa,IAAK,EAAA,EAAG,CAAA,CAAA;AAAA,GAC1E,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,EAAA,KAAkB,MAAM;AAC/C,IAAiB,gBAAA,CAAA,EAAE,GAAG,aAAA,EAAe,CAAC,EAAE,GAAG,EAAE,IAAM,EAAA,YAAA,CAAa,IAAK,EAAA,EAAG,CAAA,CAAA;AAAA,GAC1E,CAAA;AAEA,EAAM,MAAA,iBAAA,GAAoB,CAAC,GAAA,KAAsB,MAAM;AACrD,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,MAAM,EAAE,KAAA,EAAO,GAAG,aAAA,EAAkB,GAAA,GAAA,CAAA;AACpC,MAAA,cAAA,CACG,0BAA0B,MAAO,CAAA,IAAA,EAAM,aAA8B,CAAA,CACrE,KAAK,CAAY,QAAA,KAAA;AAChB,QAAI,IAAA,QAAA,CAAS,WAAW,GAAK,EAAA;AAC3B,UAAA,OAAA,CAAQ,KAAK,MAAO,CAAA,CAAA,CAAA,KAAK,EAAE,EAAO,KAAA,GAAA,CAAI,EAAE,CAAC,CAAA,CAAA;AAAA,SACpC,MAAA;AACL,UAAA,QAAA,CAAS,KAAK,EAAE,OAAA,EAAS,qCAAuC,EAAA,QAAA,EAAU,SAAS,CAAA,CAAA;AAAA,SACrF;AAAA,OACD,CAAA,CACA,KAAM,CAAA,CAAA,CAAA,KAAK,SAAS,IAAK,CAAA,EAAE,OAAS,EAAA,CAAA,EAAG,EAAE,OAAO,CAAA,CAAA,EAAI,QAAU,EAAA,OAAA,EAAS,CAAC,CAAA,CAAA;AAAA,KAC7E;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,iBAAA,GAAoB,CAAC,EAAA,KAAkB,MAAM;AACjD,IAAiB,gBAAA,CAAA;AAAA,MACf,GAAG,aAAA;AAAA,MACH,CAAC,EAAE,GAAG,EAAE,MAAM,YAAa,CAAA,IAAA,EAAM,qBAAqB,IAAK,EAAA;AAAA,KAC5D,CAAA,CAAA;AAED,IAAA,MAAM,YAAY,IAAK,CAAA,IAAA,CAAK,CAAO,GAAA,KAAA,GAAA,CAAI,OAAO,EAAE,CAAA,CAAA;AAChD,IAAA,IAAI,UAAW,KAAO,EAAA;AACpB,MAAA,OAAA,CAAQ,KAAK,MAAO,CAAA,CAAA,GAAA,KAAO,GAAI,CAAA,EAAA,KAAO,EAAE,CAAC,CAAA,CAAA;AAAA,KAC3C;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,MAAyB,KAAA;AACjD,IAAA,MAAM,UAAa,GAAA,EAAE,GAAG,MAAA,EAAQ,OAAO,KAAM,EAAA,CAAA;AAC7C,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,MAAM,EAAE,KAAA,EAAO,GAAG,aAAA,EAAkB,GAAA,UAAA,CAAA;AAEpC,MAAA,cAAA,CACG,0BAA0B,MAAO,CAAA,IAAA,EAAM,aAA8B,CAAA,CACrE,KAAK,CAAY,QAAA,KAAA;AAChB,QAAI,IAAA,QAAA,CAAS,WAAW,GAAK,EAAA;AAC3B,UAAQ,OAAA,CAAA,IAAA,CAAK,IAAI,CAAQ,GAAA,KAAA,GAAA,CAAI,OAAO,MAAO,CAAA,EAAA,GAAK,UAAa,GAAA,GAAI,CAAC,CAAA,CAAA;AAAA,SAC7D,MAAA;AACL,UAAA,QAAA,CAAS,KAAK,EAAE,OAAA,EAAS,qCAAuC,EAAA,QAAA,EAAU,SAAS,CAAA,CAAA;AAAA,SACrF;AAAA,OACD,CAAA,CACA,KAAM,CAAA,CAAA,CAAA,KAAK,SAAS,IAAK,CAAA,EAAE,OAAS,EAAA,CAAA,EAAG,EAAE,OAAO,CAAA,CAAA,EAAI,QAAU,EAAA,OAAA,EAAS,CAAC,CAAA,CAAA;AAAA,KAC7E;AAEA,IAAO,OAAA,UAAA,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,yBAAA,GAA4B,CAAC,gBAAwC,KAAA;AACzE,IAAA,gBAAA,CAAiB,gBAAgB,CAAA,CAAA;AAAA,GACnC,CAAA;AAEA,EAAA,MAAM,OAAwB,GAAA;AAAA,IAC5B;AAAA,MACE,KAAO,EAAA,iBAAA;AAAA,MACP,UAAY,EAAA,UAAA;AAAA,MACZ,KAAO,EAAA,GAAA;AAAA,MACP,UAAU,CAAC,QAAA;AAAA,MACX,IAAM,EAAA,cAAA;AAAA,MACN,cAAc,MAAM;AAClB,QAAA,MAAM,UAA0B,EAAC,CAAA;AACjC,QAAM,MAAA,UAAA,uBAAiB,GAAY,EAAA,CAAA;AAEnC,QAAA,IAAI,aAAe,EAAA;AACjB,UAAA,aAAA,CAAc,QAAQ,CAAK,CAAA,KAAA;AACzB,YAAW,UAAA,CAAA,GAAA,CAAI,EAAE,eAAe,CAAA,CAAA;AAAA,WACjC,CAAA,CAAA;AAAA,SACH;AACA,QAAW,UAAA,CAAA,OAAA,CAAQ,CAAK,CAAA,KAAA,OAAA,CAAQ,IAAK,CAAA,EAAE,OAAO,CAAG,EAAA,KAAA,EAAO,CAAE,EAAC,CAAC,CAAA,CAAA;AAC5D,QAAO,OAAA,OAAA,CAAA;AAAA,OACT;AAAA,KACF;AAAA,IACA;AAAA,MACE,KAAO,EAAA,aAAA;AAAA,MACP,UAAY,EAAA,YAAA;AAAA,MACZ,KAAO,EAAA,GAAA;AAAA,MACP,UAAU,CAAC,QAAA;AAAA,MACX,IAAM,EAAA,cAAA;AAAA,MACN,cAAc,CAAU,MAAA,KAAA;AACtB,QAAA,MAAM,UAA0B,EAAC,CAAA;AACjC,QAAA,IAAI,MAAO,CAAA,GAAA,CAAI,eAAoB,KAAA,EAAA,IAAM,aAAe,EAAA;AACtD,UAAA,aAAA,CAAc,QAAQ,CAAK,CAAA,KAAA;AACzB,YAAA,IAAI,MAAO,CAAA,GAAA,CAAI,eAAoB,KAAA,CAAA,CAAE,eAAiB,EAAA;AACpD,cAAQ,OAAA,CAAA,IAAA,CAAK,EAAE,KAAO,EAAA,CAAA,CAAE,aAAa,KAAO,EAAA,CAAA,CAAE,aAAa,CAAA,CAAA;AAAA,aAC7D;AAAA,WACD,CAAA,CAAA;AAAA,SACH;AACA,QAAO,OAAA,OAAA,CAAA;AAAA,OACT;AAAA,KACF;AAAA,IACA;AAAA,MACE,KAAO,EAAA,aAAA;AAAA,MACP,UAAY,EAAA,YAAA;AAAA,MACZ,KAAO,EAAA,GAAA;AAAA,MACP,UAAU,CAAC,QAAA;AAAA,KACb;AAAA,IACA;AAAA,MACE,KAAO,EAAA,aAAA;AAAA,MACP,UAAY,EAAA,aAAA;AAAA,MACZ,KAAO,EAAA,GAAA;AAAA,MACP,UAAU,CAAC,QAAA;AAAA,KACb;AAAA,IACA;AAAA,MACE,KAAO,EAAA,OAAA;AAAA,MACP,UAAY,EAAA,OAAA;AAAA,MACZ,IAAM,EAAA,CAAA;AAAA,MACN,UAAU,CAAC,QAAA;AAAA,KACb;AAAA,GACF,CAAA;AAEA,EAAA,IAAI,CAAC,QAAU,EAAA;AACb,IAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,MACX,KAAO,EAAA,SAAA;AAAA,MACP,IAAM,EAAA,SAAA;AAAA,MACN,UAAY,EAAA,SAAA;AAAA,MACZ,KAAO,EAAA,GAAA;AAAA,MACP,aAAe,EAAA,SAAA;AAAA,MACf,UAAY,EAAA,CAAC,EAAE,EAAA,EAAI,KAAU,KAAA;AAzMnC,QAAAC,IAAAA,GAAAA,CAAAA;AA0MQ,QAAM,MAAA,YAAA,GAAA,CAAA,CAAeA,MAAA,aAAc,CAAA,EAAE,MAAhB,IAAAA,GAAAA,KAAAA,CAAAA,GAAAA,GAAAA,CAAmB,UAAS,YAAa,CAAA,IAAA,CAAA;AAE9D,QAAA,IAAI,YAAc,EAAA;AAChB,UAAO,OAAA;AAAA,4BACL,KAAA,CAAA,aAAA;AAAA,cAAC,mBAAA;AAAA,cAAA;AAAA,gBACC,IAAA,sCAAO,QAAS,EAAA,IAAA,CAAA;AAAA,gBAChB,KAAM,EAAA,MAAA;AAAA,gBACN,EAAI,EAAA;AAAA,kBACF,KAAO,EAAA,cAAA;AAAA,iBACT;AAAA,gBACA,OAAA,EAAS,gBAAgB,EAAE,CAAA;AAAA,eAAA;AAAA,aAC7B;AAAA,4BACA,KAAA,CAAA,aAAA;AAAA,cAAC,mBAAA;AAAA,cAAA;AAAA,gBACC,IAAA,sCAAOC,SAAW,EAAA,IAAA,CAAA;AAAA,gBAClB,KAAM,EAAA,QAAA;AAAA,gBACN,SAAU,EAAA,aAAA;AAAA,gBACV,OAAA,EAAS,kBAAkB,EAAE,CAAA;AAAA,gBAC7B,KAAM,EAAA,SAAA;AAAA,eAAA;AAAA,aACR;AAAA,WACF,CAAA;AAAA,SACF;AAEA,QAAO,OAAA;AAAA,0BACL,KAAA,CAAA,aAAA;AAAA,YAAC,mBAAA;AAAA,YAAA;AAAA,cACC,IAAA,sCAAO,QAAS,EAAA,IAAA,CAAA;AAAA,cAChB,KAAM,EAAA,MAAA;AAAA,cACN,SAAU,EAAA,aAAA;AAAA,cACV,OAAA,EAAS,gBAAgB,EAAE,CAAA;AAAA,cAC3B,KAAM,EAAA,SAAA;AAAA,aAAA;AAAA,WACR;AAAA,0BACC,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,EAAoB,IAAM,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,IAAA,CAAA,EAAI,KAAM,EAAA,QAAA,EAAS,OAAS,EAAA,iBAAA,CAAkB,GAAG,CAAA,EAAG,OAAM,SAAU,EAAA,CAAA;AAAA,SAC7G,CAAA;AAAA,OACF;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAEA,EAAM,MAAA,uBAAA,GAA0B,YAAY,YAAY;AACtD,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,MAAM,eACH,uBAAwB,CAAA,MAAA,CAAO,IAAI,CAAA,CACnC,KAAK,CAAmB,eAAA,KAAA;AACvB,QAAA,IAAI,eAAgB,CAAA,IAAA,IAAQ,eAAgB,CAAA,MAAA,KAAW,GAAK,EAAA;AAC1D,UAAA,OAAA,CAAQ,gBAAgB,IAAI,CAAA,CAAA;AAAA,SAC9B;AAAA,OACD,CAAA,CACA,KAAM,CAAA,CAAA,CAAA,KAAK,SAAS,IAAK,CAAA,EAAE,OAAS,EAAA,CAAA,EAAG,EAAE,OAAO,CAAA,CAAA,EAAI,QAAU,EAAA,OAAA,EAAS,CAAC,CAAA,CAAA;AAAA,KAC7E;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,cAAA,EAAgB,QAAQ,CAAC,CAAA,CAAA;AAErC,EAAM,MAAA,eAAA,GAAkB,YAAY,YAAY;AAC9C,IAAA,MAAM,cACH,CAAA,gBAAA,EACA,CAAA,IAAA,CAAK,CAAY,QAAA,KAAA;AAChB,MAAA,IAAI,QAAS,CAAA,IAAA,IAAQ,QAAS,CAAA,MAAA,KAAW,GAAK,EAAA;AAC5C,QAAA,gBAAA,CAAiB,SAAS,IAAI,CAAA,CAAA;AAAA,OAChC;AAAA,KACD,CAAA,CACA,KAAM,CAAA,CAAA,CAAA,KAAK,SAAS,IAAK,CAAA,EAAE,OAAS,EAAA,CAAA,EAAG,EAAE,OAAO,CAAA,CAAA,EAAI,QAAU,EAAA,OAAA,EAAS,CAAC,CAAA,CAAA;AAAA,GAC1E,EAAA,CAAC,QAAU,EAAA,cAAc,CAAC,CAAA,CAAA;AAE7B,EAAA,SAAA,CAAU,MAAM;AACd,IAAwB,uBAAA,EAAA,CAAA;AACxB,IAAgB,eAAA,EAAA,CAAA;AAAA,GACf,EAAA,CAAC,uBAAyB,EAAA,eAAe,CAAC,CAAA,CAAA;AAE7C,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,MAAQ,EAAA,GAAA;AAAA,QACR,KAAO,EAAA,MAAA;AAAA,QACP,YAAc,EAAA;AAAA,UACZ,KAAO,EAAA,gBAAA;AAAA,SACT;AAAA,QACA,gBAAkB,EAAA;AAAA,UAChB,KAAO,EAAA,cAAA;AAAA,SACT;AAAA,OACF;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,OAAA;AAAA,QACA,QAAS,EAAA,KAAA;AAAA,QACT,aAAA;AAAA,QACA,qBAAuB,EAAA,yBAAA;AAAA,QACvB,aAAe,EAAA,iBAAA;AAAA,QACf,gBAAA;AAAA,QACA,KAAO,EAAA;AAAA,UACL,OAAA,EAAS,WAAW,IAAQ,GAAA,WAAA;AAAA,SAC9B;AAAA,OAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEJ;;;;"}

package/dist/components/PieChartComponent/PieChartComponent.esm.js

@@ -3,12 +3,12 @@ import { makeStyles } from '@material-ui/core/styles';
 import humanFormat from 'human-format';
 import React from 'react';
 import Chart from 'react-apexcharts';
+import { colorList } from '../constants.esm.js';
 
 const PieChartComponent = ({ categories, series, height }) => {
   const useStyles = makeStyles({
     fixedHeightPaper: {
       paddingTop: "10px",
-      overflow: "hidden",
       height: height ? height : 300
     }
   });
@@ -60,58 +60,7 @@ const PieChartComponent = ({ categories, series, height }) => {
         }
       },
       // there are only 5 colors by default, here we extend it to 50 different colors
-      colors: [
-        "#008FFB",
-        "#00E396",
-        "#FEB019",
-        "#FF4560",
-        "#775DD0",
-        "#3F51B5",
-        "#03A9F4",
-        "#4CAF50",
-        "#F9CE1D",
-        "#FF9800",
-        "#33B2DF",
-        "#546E7A",
-        "#D4526E",
-        "#13D8AA",
-        "#A5978B",
-        "#4ECDC4",
-        "#C7F464",
-        "#81D4FA",
-        "#546E7A",
-        "#FD6A6A",
-        "#2B908F",
-        "#F9A3A4",
-        "#90EE7E",
-        "#FA4443",
-        "#69D2E7",
-        "#449DD1",
-        "#F86624",
-        "#EA3546",
-        "#662E9B",
-        "#C5D86D",
-        "#D7263D",
-        "#1B998B",
-        "#2E294E",
-        "#F46036",
-        "#E2C044",
-        "#662E9B",
-        "#F86624",
-        "#F9C80E",
-        "#EA3546",
-        "#43BCCD",
-        "#5C4742",
-        "#A5978B",
-        "#8D5B4C",
-        "#5A2A27",
-        "#C4BBAF",
-        "#A300D6",
-        "#7D02EB",
-        "#5653FE",
-        "#2983FF",
-        "#00B1F2"
-      ]
+      colors: colorList
     },
     series
   };

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

@@ -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> = ({ 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":"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"}
+{"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 { colorList } from '../constants';\nimport { PieChartComponentProps } from '../types';\n\nexport const PieChartComponent: FC<PieChartComponentProps> = ({ categories, series, height }) => {\n  const useStyles = makeStyles({\n    fixedHeightPaper: {\n      paddingTop: '10px',\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: colorList,\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":";;;;;;;AAQO,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,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,SAAA;AAAA,KACV;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;;;;"}

package/dist/components/ReportsComponent/ReportsComponent.esm.js

@@ -1,5 +1,5 @@
 import { Page, Header, Content, Progress } from '@backstage/core-components';
-import { useApi, alertApiRef } from '@backstage/core-plugin-api';
+import { useApi, configApiRef, alertApiRef } from '@backstage/core-plugin-api';
 import { Grid, Chip } from '@material-ui/core';
 import Accordion from '@material-ui/core/Accordion';
 import AccordionDetails from '@material-ui/core/AccordionDetails';
@@ -8,6 +8,7 @@ import Typography from '@material-ui/core/Typography';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { startOfMonth, addMonths, endOfMonth } from 'date-fns';
 import React, { useState, useCallback, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
 import { infraWalletApiRef } from '../../api/InfraWalletApi.esm.js';
 import { getPeriodStrings, filterCostReports, aggregateCostReports, mergeCostReports, getAllReportTags } from '../../api/functions.esm.js';
 import { ColumnsChartComponent } from '../ColumnsChartComponent/ColumnsChartComponent.esm.js';
@@ -45,19 +46,25 @@ const checkIfFiltersActivated = (filters) => {
   return activated;
 };
 const ReportsComponent = () => {
+  var _a, _b;
+  const configApi = useApi(configApiRef);
+  const params = useParams();
+  const defaultGroupBy = (_a = configApi.getOptionalString("infraWallet.settings.defaultGroupBy")) != null ? _a : "none";
+  const defaultShowLastXMonths = (_b = configApi.getOptionalNumber("infraWallet.settings.defaultShowLastXMonths")) != null ? _b : 3;
   const MERGE_THRESHOLD = 8;
   const [submittingState, setSubmittingState] = useState(false);
   const [reports, setReports] = useState([]);
+  const [metrics, setMetrics] = useState([]);
   const [filters, setFilters] = useState({});
   const [cloudProviderErrors, setCloudProviderErrors] = useState([]);
   const [reportsAggregated, setReportsAggregated] = useState([]);
   const [reportsAggregatedAndMerged, setReportsAggregatedAndMerged] = useState([]);
   const [reportTags, setReportTags] = useState([]);
   const [granularity, setGranularity] = useState("monthly");
-  const [aggregatedBy, setAggregatedBy] = useState("none");
+  const [aggregatedBy, setAggregatedBy] = useState(defaultGroupBy);
   const [groups, _setGroups] = useState("");
   const [monthRangeState, setMonthRangeState] = React.useState({
-    startMonth: startOfMonth(addMonths(/* @__PURE__ */ new Date(), -2)),
+    startMonth: startOfMonth(addMonths(/* @__PURE__ */ new Date(), defaultShowLastXMonths * -1 + 1)),
     endMonth: endOfMonth(/* @__PURE__ */ new Date())
   });
   const [periods, setPeriods] = useState([]);
@@ -76,6 +83,17 @@ const ReportsComponent = () => {
     }).catch((e) => alertApi.post({ message: `${e.message}`, severity: "error" }));
     setSubmittingState(false);
   }, [groups, monthRangeState, granularity, infraWalletApi, alertApi]);
+  const fetchMetricsCallback = useCallback(async () => {
+    var _a2;
+    await infraWalletApi.getMetrics((_a2 = params.name) != null ? _a2 : "default", granularity, monthRangeState.startMonth, monthRangeState.endMonth).then((metricsResponse) => {
+      if (metricsResponse.data && metricsResponse.data.length > 0) {
+        setMetrics(metricsResponse.data);
+      }
+      if (metricsResponse.status === 207 && metricsResponse.errors) {
+        setCloudProviderErrors(metricsResponse.errors);
+      }
+    }).catch((e) => alertApi.post({ message: `${e.message}`, severity: "error" }));
+  }, [params.name, monthRangeState, granularity, infraWalletApi, alertApi]);
   useEffect(() => {
     if (reports.length !== 0) {
       const filteredReports = filterCostReports(reports, filters);
@@ -89,7 +107,8 @@ const ReportsComponent = () => {
   }, [filters, reports, aggregatedBy, granularity, monthRangeState]);
   useEffect(() => {
     fetchCostReportsCallback();
-  }, [fetchCostReportsCallback]);
+    fetchMetricsCallback();
+  }, [fetchCostReportsCallback, fetchMetricsCallback]);
   return /* @__PURE__ */ React.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React.createElement(Header, { title: "InfraWallet" }), /* @__PURE__ */ React.createElement(Content, null, submittingState ? /* @__PURE__ */ React.createElement(Progress, null) : 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(
     TopbarComponent,
     {
@@ -113,6 +132,12 @@ const ReportsComponent = () => {
       categories: periods,
       series: reportsAggregatedAndMerged.map((item) => ({
         name: item.id,
+        type: "column",
+        data: rearrangeData(item, periods)
+      })),
+      metrics: metrics.map((item) => ({
+        name: item.id,
+        type: "line",
         data: rearrangeData(item, periods)
       })),
       height: 350

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

@@ -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 { Chip, Grid } from '@material-ui/core';\nimport Accordion from '@material-ui/core/Accordion';\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\nimport Typography from '@material-ui/core/Typography';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport { addMonths, endOfMonth, startOfMonth } from 'date-fns';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { infraWalletApiRef } from '../../api/InfraWalletApi';\nimport {\n  aggregateCostReports,\n  filterCostReports,\n  getAllReportTags,\n  getPeriodStrings,\n  mergeCostReports,\n} from '../../api/functions';\nimport { CloudProviderError, Filters, Report } from '../../api/types';\nimport { ColumnsChartComponent } from '../ColumnsChartComponent';\nimport { CostReportsTableComponent } from '../CostReportsTableComponent';\nimport { ErrorsAlertComponent } from '../ErrorsAlertComponent';\nimport { FiltersComponent } from '../FiltersComponent';\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\nconst checkIfFiltersActivated = (filters: Filters): boolean => {\n  let activated = false;\n  Object.keys(filters).forEach((key: string) => {\n    if (filters[key].length > 0) {\n      activated = true;\n    }\n  });\n  return activated;\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 [filters, setFilters] = useState<Filters>({});\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 [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('', 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  }, [groups, monthRangeState, granularity, infraWalletApi, alertApi]);\n\n  useEffect(() => {\n    if (reports.length !== 0) {\n      const filteredReports = filterCostReports(reports, filters);\n      const arrgegatedReports = aggregateCostReports(filteredReports, aggregatedBy);\n      const aggregatedAndMergedReports = mergeCostReports(arrgegatedReports, MERGE_THRESHOLD);\n      const allTags = getAllReportTags(reports);\n      setReportsAggregated(arrgegatedReports);\n      setReportsAggregatedAndMerged(aggregatedAndMergedReports);\n      setReportTags(allTags);\n    }\n  }, [filters, 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        {submittingState ? <Progress /> : null}\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            <Accordion>\n              <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls=\"filters-content\" id=\"filters-header\">\n                <Typography>\n                  Filters {checkIfFiltersActivated(filters) && <Chip size=\"small\" label=\"active\" color=\"primary\" />}\n                </Typography>\n              </AccordionSummary>\n              <AccordionDetails>\n                <FiltersComponent reports={reports} filters={filters} filtersSetter={setFilters} />\n              </AccordionDetails>\n            </Accordion>\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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"}
+{"version":3,"file":"ReportsComponent.esm.js","sources":["../../../src/components/ReportsComponent/ReportsComponent.tsx"],"sourcesContent":["import { Content, Header, Page, Progress } from '@backstage/core-components';\nimport { alertApiRef, configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { Chip, Grid } from '@material-ui/core';\nimport Accordion from '@material-ui/core/Accordion';\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\nimport Typography from '@material-ui/core/Typography';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport { addMonths, endOfMonth, startOfMonth } from 'date-fns';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { infraWalletApiRef } from '../../api/InfraWalletApi';\nimport {\n  aggregateCostReports,\n  filterCostReports,\n  getAllReportTags,\n  getPeriodStrings,\n  mergeCostReports,\n} from '../../api/functions';\nimport { CloudProviderError, Filters, Metric, Report } from '../../api/types';\nimport { ColumnsChartComponent } from '../ColumnsChartComponent';\nimport { CostReportsTableComponent } from '../CostReportsTableComponent';\nimport { ErrorsAlertComponent } from '../ErrorsAlertComponent';\nimport { FiltersComponent } from '../FiltersComponent';\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\nconst checkIfFiltersActivated = (filters: Filters): boolean => {\n  let activated = false;\n  Object.keys(filters).forEach((key: string) => {\n    if (filters[key].length > 0) {\n      activated = true;\n    }\n  });\n  return activated;\n};\n\nexport const ReportsComponent = () => {\n  const configApi = useApi(configApiRef);\n  const params = useParams();\n\n  const defaultGroupBy = configApi.getOptionalString('infraWallet.settings.defaultGroupBy') ?? 'none';\n  const defaultShowLastXMonths = configApi.getOptionalNumber('infraWallet.settings.defaultShowLastXMonths') ?? 3;\n\n  const MERGE_THRESHOLD = 8;\n  const [submittingState, setSubmittingState] = useState<Boolean>(false);\n  const [reports, setReports] = useState<Report[]>([]);\n  const [metrics, setMetrics] = useState<Metric[]>([]);\n  const [filters, setFilters] = useState<Filters>({});\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>(defaultGroupBy);\n  const [groups, _setGroups] = useState<string>('');\n  const [monthRangeState, setMonthRangeState] = React.useState<MonthRange>({\n    startMonth: startOfMonth(addMonths(new Date(), defaultShowLastXMonths * -1 + 1)),\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('', 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  }, [groups, monthRangeState, granularity, infraWalletApi, alertApi]);\n\n  const fetchMetricsCallback = useCallback(async () => {\n    await infraWalletApi\n      .getMetrics(params.name ?? 'default', granularity, monthRangeState.startMonth, monthRangeState.endMonth)\n      .then(metricsResponse => {\n        if (metricsResponse.data && metricsResponse.data.length > 0) {\n          setMetrics(metricsResponse.data);\n        }\n        if (metricsResponse.status === 207 && metricsResponse.errors) {\n          setCloudProviderErrors(metricsResponse.errors);\n        }\n      })\n      .catch(e => alertApi.post({ message: `${e.message}`, severity: 'error' }));\n  }, [params.name, monthRangeState, granularity, infraWalletApi, alertApi]);\n\n  useEffect(() => {\n    if (reports.length !== 0) {\n      const filteredReports = filterCostReports(reports, filters);\n      const arrgegatedReports = aggregateCostReports(filteredReports, aggregatedBy);\n      const aggregatedAndMergedReports = mergeCostReports(arrgegatedReports, MERGE_THRESHOLD);\n      const allTags = getAllReportTags(reports);\n      setReportsAggregated(arrgegatedReports);\n      setReportsAggregatedAndMerged(aggregatedAndMergedReports);\n      setReportTags(allTags);\n    }\n  }, [filters, reports, aggregatedBy, granularity, monthRangeState]);\n\n  useEffect(() => {\n    fetchCostReportsCallback();\n    fetchMetricsCallback();\n  }, [fetchCostReportsCallback, fetchMetricsCallback]);\n\n  return (\n    <Page themeId=\"tool\">\n      <Header title=\"InfraWallet\" />\n      <Content>\n        {submittingState ? <Progress /> : null}\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            <Accordion>\n              <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls=\"filters-content\" id=\"filters-header\">\n                <Typography>\n                  Filters {checkIfFiltersActivated(filters) && <Chip size=\"small\" label=\"active\" color=\"primary\" />}\n                </Typography>\n              </AccordionSummary>\n              <AccordionDetails>\n                <FiltersComponent reports={reports} filters={filters} filtersSetter={setFilters} />\n              </AccordionDetails>\n            </Accordion>\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                  type: 'column',\n                  data: rearrangeData(item, periods),\n                }))}\n                metrics={metrics.map((item: any) => ({\n                  name: item.id,\n                  type: 'line',\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":["_a"],"mappings":"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"}

package/dist/components/SettingsComponent/SettingsComponent.esm.js

@@ -0,0 +1,30 @@
+import { Page, Header, Content } from '@backstage/core-components';
+import React, { useState, useCallback, useEffect } from 'react';
+import { useApi, alertApiRef } from '@backstage/core-plugin-api';
+import { infraWalletApiRef } from '../../api/InfraWalletApi.esm.js';
+import { Grid } from '@material-ui/core';
+import Alert from '@material-ui/lab/Alert';
+import { useParams } from 'react-router-dom';
+import { MetricConfigurationComponent } from '../MetricConfigurationComponent/MetricConfigurationComponent.esm.js';
+
+const SettingsComponent = () => {
+  const params = useParams();
+  const alertApi = useApi(alertApiRef);
+  const infraWalletApi = useApi(infraWalletApiRef);
+  const [wallet, setWallet] = useState();
+  const getWalletInfo = useCallback(async () => {
+    var _a;
+    await infraWalletApi.getWalletByName((_a = params.name) != null ? _a : "default").then((getWalletResponse) => {
+      if (getWalletResponse.data && getWalletResponse.status === 200) {
+        setWallet(getWalletResponse.data);
+      }
+    }).catch((e) => alertApi.post({ message: `${e.message}`, severity: "error" }));
+  }, [params.name, infraWalletApi, alertApi]);
+  useEffect(() => {
+    getWalletInfo();
+  }, [getWalletInfo]);
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React.createElement(Header, { title: "Wallet Settings Page (Alpha)" }), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 3 }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Alert, { severity: "info" }, "For now, this page only supports configuring business metrics for the default wallet.")), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(MetricConfigurationComponent, { wallet })))));
+};
+
+export { SettingsComponent };
+//# sourceMappingURL=SettingsComponent.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsComponent.esm.js","sources":["../../../src/components/SettingsComponent/SettingsComponent.tsx"],"sourcesContent":["import { Content, Header, Page } from '@backstage/core-components';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\nimport { infraWalletApiRef } from '../../api/InfraWalletApi';\nimport { Grid } from '@material-ui/core';\nimport Alert from '@material-ui/lab/Alert';\nimport { useParams } from 'react-router-dom';\nimport { MetricConfigurationComponent } from '../MetricConfigurationComponent';\nimport { Wallet } from '../../api/types';\n\nexport const SettingsComponent = () => {\n  const params = useParams();\n  const alertApi = useApi(alertApiRef);\n  const infraWalletApi = useApi(infraWalletApiRef);\n  const [wallet, setWallet] = useState<Wallet>();\n\n  const getWalletInfo = useCallback(async () => {\n    await infraWalletApi\n      .getWalletByName(params.name ?? 'default')\n      .then(getWalletResponse => {\n        if (getWalletResponse.data && getWalletResponse.status === 200) {\n          setWallet(getWalletResponse.data);\n        }\n      })\n      .catch(e => alertApi.post({ message: `${e.message}`, severity: 'error' }));\n  }, [params.name, infraWalletApi, alertApi]);\n\n  useEffect(() => {\n    getWalletInfo();\n  }, [getWalletInfo]);\n\n  return (\n    <Page themeId=\"tool\">\n      <Header title=\"Wallet Settings Page (Alpha)\" />\n      <Content>\n        <Grid container spacing={3}>\n          <Grid item xs={12}>\n            <Alert severity=\"info\">\n              For now, this page only supports configuring business metrics for the default wallet.\n            </Alert>\n          </Grid>\n          <Grid item xs={12}>\n            <MetricConfigurationComponent wallet={wallet} />\n          </Grid>\n        </Grid>\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,oBAAoB,MAAM;AACrC,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA,CAAA;AACnC,EAAM,MAAA,cAAA,GAAiB,OAAO,iBAAiB,CAAA,CAAA;AAC/C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,QAAiB,EAAA,CAAA;AAE7C,EAAM,MAAA,aAAA,GAAgB,YAAY,YAAY;AAhBhD,IAAA,IAAA,EAAA,CAAA;AAiBI,IAAM,MAAA,cAAA,CACH,iBAAgB,EAAO,GAAA,MAAA,CAAA,IAAA,KAAP,YAAe,SAAS,CAAA,CACxC,KAAK,CAAqB,iBAAA,KAAA;AACzB,MAAA,IAAI,iBAAkB,CAAA,IAAA,IAAQ,iBAAkB,CAAA,MAAA,KAAW,GAAK,EAAA;AAC9D,QAAA,SAAA,CAAU,kBAAkB,IAAI,CAAA,CAAA;AAAA,OAClC;AAAA,KACD,CAAA,CACA,KAAM,CAAA,CAAA,CAAA,KAAK,SAAS,IAAK,CAAA,EAAE,OAAS,EAAA,CAAA,EAAG,EAAE,OAAO,CAAA,CAAA,EAAI,QAAU,EAAA,OAAA,EAAS,CAAC,CAAA,CAAA;AAAA,KAC1E,CAAC,MAAA,CAAO,IAAM,EAAA,cAAA,EAAgB,QAAQ,CAAC,CAAA,CAAA;AAE1C,EAAA,SAAA,CAAU,MAAM;AACd,IAAc,aAAA,EAAA,CAAA;AAAA,GAChB,EAAG,CAAC,aAAa,CAAC,CAAA,CAAA;AAElB,EAAA,2CACG,IAAK,EAAA,EAAA,OAAA,EAAQ,0BACX,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,OAAM,8BAA+B,EAAA,CAAA,sCAC5C,OACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAC,SAAS,CACvB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAA,sCACZ,KAAM,EAAA,EAAA,QAAA,EAAS,UAAO,uFAEvB,CACF,mBACC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IAAC,EAAA,EAAA,EAAI,sBACZ,KAAA,CAAA,aAAA,CAAA,4BAAA,EAAA,EAA6B,QAAgB,CAChD,CACF,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/constants.esm.js

@@ -0,0 +1,55 @@
+const colorList = [
+  "#008FFB",
+  "#00E396",
+  "#FEB019",
+  "#FF4560",
+  "#775DD0",
+  "#3F51B5",
+  "#03A9F4",
+  "#4CAF50",
+  "#F9CE1D",
+  "#FF9800",
+  "#33B2DF",
+  "#546E7A",
+  "#D4526E",
+  "#13D8AA",
+  "#A5978B",
+  "#4ECDC4",
+  "#C7F464",
+  "#81D4FA",
+  "#546E7A",
+  "#FD6A6A",
+  "#2B908F",
+  "#F9A3A4",
+  "#90EE7E",
+  "#FA4443",
+  "#69D2E7",
+  "#449DD1",
+  "#F86624",
+  "#EA3546",
+  "#662E9B",
+  "#C5D86D",
+  "#D7263D",
+  "#1B998B",
+  "#2E294E",
+  "#F46036",
+  "#E2C044",
+  "#662E9B",
+  "#F86624",
+  "#F9C80E",
+  "#EA3546",
+  "#43BCCD",
+  "#5C4742",
+  "#A5978B",
+  "#8D5B4C",
+  "#5A2A27",
+  "#C4BBAF",
+  "#A300D6",
+  "#7D02EB",
+  "#5653FE",
+  "#2983FF",
+  "#00B1F2"
+];
+
+export { colorList };
+//# sourceMappingURL=constants.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.esm.js","sources":["../../src/components/constants.tsx"],"sourcesContent":["// colors used by the charts\nexport const colorList = [\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"],"names":[],"mappings":"AACO,MAAM,SAAY,GAAA;AAAA,EACvB,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AACF;;;;"}

package/dist/index.d.ts

@@ -4,7 +4,9 @@ import react__default from 'react';
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
 
 declare const infraWalletPlugin: _backstage_core_plugin_api.BackstagePlugin<{
-    root: _backstage_core_plugin_api.RouteRef<undefined>;
+    root: _backstage_core_plugin_api.RouteRef<{
+        name: string;
+    }>;
 }, {}, {}>;
 declare const InfraWalletPage: () => react.JSX.Element;
 

package/dist/routes.esm.js

@@ -2,11 +2,13 @@ import { createRouteRef } from '@backstage/core-plugin-api';
 import React from 'react';
 import { Routes, Route } from 'react-router-dom';
 import { ReportsComponent } from './components/ReportsComponent/ReportsComponent.esm.js';
+import { SettingsComponent } from './components/SettingsComponent/SettingsComponent.esm.js';
 
 const rootRouteRef = createRouteRef({
-  id: "infrawallet"
+  id: "infrawallet",
+  params: ["name"]
 });
-const RootRoute = () => /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, { path: "/", element: /* @__PURE__ */ React.createElement(ReportsComponent, null) }));
+const RootRoute = () => /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, { path: "/", element: /* @__PURE__ */ React.createElement(ReportsComponent, null) }), /* @__PURE__ */ React.createElement(Route, { path: "/:name", element: /* @__PURE__ */ React.createElement(ReportsComponent, null) }), /* @__PURE__ */ React.createElement(Route, { path: "/:name/settings", element: /* @__PURE__ */ React.createElement(SettingsComponent, null) }));
 
 export { RootRoute, rootRouteRef };
 //# sourceMappingURL=routes.esm.js.map

package/dist/routes.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"routes.esm.js","sources":["../src/routes.tsx"],"sourcesContent":["import { createRouteRef } from '@backstage/core-plugin-api';\nimport React from 'react';\nimport { Route, Routes } from 'react-router-dom';\nimport { ReportsComponent } from './components/ReportsComponent';\n\nexport const rootRouteRef = createRouteRef({\n  id: 'infrawallet',\n});\n\nexport const RootRoute = () => (\n  <Routes>\n    <Route path=\"/\" element={<ReportsComponent />} />\n  </Routes>\n);\n"],"names":[],"mappings":";;;;;AAKO,MAAM,eAAe,cAAe,CAAA;AAAA,EACzC,EAAI,EAAA,aAAA;AACN,CAAC,EAAA;AAEM,MAAM,SAAY,GAAA,sBACtB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,IAAK,EAAA,GAAA,EAAI,OAAS,kBAAA,KAAA,CAAA,aAAA,CAAC,gBAAiB,EAAA,IAAA,CAAA,EAAI,CACjD;;;;"}
+{"version":3,"file":"routes.esm.js","sources":["../src/routes.tsx"],"sourcesContent":["import { createRouteRef } from '@backstage/core-plugin-api';\nimport React from 'react';\nimport { Route, Routes } from 'react-router-dom';\nimport { ReportsComponent } from './components/ReportsComponent';\nimport { SettingsComponent } from './components/SettingsComponent';\n\nexport const rootRouteRef = createRouteRef({\n  id: 'infrawallet',\n  params: ['name'],\n});\n\nexport const RootRoute = () => (\n  <Routes>\n    <Route path=\"/\" element={<ReportsComponent />} />\n    <Route path=\"/:name\" element={<ReportsComponent />} />\n    <Route path=\"/:name/settings\" element={<SettingsComponent />} />\n  </Routes>\n);\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,eAAe,cAAe,CAAA;AAAA,EACzC,EAAI,EAAA,aAAA;AAAA,EACJ,MAAA,EAAQ,CAAC,MAAM,CAAA;AACjB,CAAC,EAAA;AAEM,MAAM,SAAY,GAAA,sBACtB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,IAAK,EAAA,GAAA,EAAI,OAAS,kBAAA,KAAA,CAAA,aAAA,CAAC,gBAAiB,EAAA,IAAA,CAAA,EAAI,mBAC9C,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,IAAK,EAAA,QAAA,EAAS,OAAS,kBAAA,KAAA,CAAA,aAAA,CAAC,gBAAiB,EAAA,IAAA,CAAA,EAAI,CACpD,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAM,EAAA,EAAA,IAAA,EAAK,iBAAkB,EAAA,OAAA,kBAAU,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA,IAAkB,GAAI,CAChE;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electrolux-oss/plugin-infrawallet",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "backstage": {
     "role": "frontend-plugin"
   },
@@ -20,7 +20,8 @@
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "config.d.ts"
   ],
   "scripts": {
     "build": "backstage-cli package build",
@@ -39,13 +40,13 @@
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.61",
-    "@mui/material": "^5.12.2",
+    "@mui/material": "^5.16.6",
     "@mui/x-data-grid": "7.3.1",
     "@mui/x-date-pickers": "^6.20.0",
     "@stitches/react": "1.2.8",
     "@types/react": "^18",
     "@viniarruda/react-month-range-picker": "2.0.4",
-    "apexcharts": "3.42.0",
+    "apexcharts": "3.51.0",
     "better-react-mathjax": "^2.0.2",
     "d3-shape": "3.2.0",
     "date-fns": "2.30.0",
@@ -55,7 +56,8 @@
     "mui-modal-provider": "2.2.0",
     "node-fetch": "^2.6.7",
     "react-apexcharts": "1.4.1",
-    "react-date-range": "1.4.0"
+    "react-date-range": "1.4.0",
+    "uuid": "10.0.0"
   },
   "devDependencies": {
     "@backstage/cli": "^0.26.5",
@@ -68,6 +70,7 @@
     "@types/lodash": "^4.14.151",
     "@types/node-fetch": "^2.6.4",
     "@types/react-date-range": "1.4.5",
+    "@types/uuid": "10.0.0",
     "msw": "^1.0.0"
   },
   "peerDependencies": {
@@ -75,5 +78,6 @@
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-router-dom": "^6.13.0"
   },
+  "configSchema": "config.d.ts",
   "module": "./dist/index.esm.js"
 }