Merge pull request #43 from electrolux-oss/gcp-cost-query-and-cost-ta…

…ble-export

#41 update the query for total cost based on GCP doc + #37 improve datagrid export

package.json

@@ -1,6 +1,6 @@
 {
   "name": "root",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "private": true,
   "engines": {
     "node": "18 || 20"

plugins/infrawallet-backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electrolux-oss/plugin-infrawallet-backend",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "backstage": {
     "role": "backend-plugin"
   },

plugins/infrawallet-backend/src/service/GCPClient.ts

@@ -52,7 +52,7 @@ export class GCPClient extends InfraWalletClient {
           project.name AS project,
           service.description AS service,
           FORMAT_TIMESTAMP('${periodFormat}', usage_start_time) AS period,
-          SUM(cost) AS total_cost
+          (SUM(CAST(cost AS NUMERIC)) + SUM(IFNULL((SELECT SUM(CAST(c.amount AS NUMERIC)) FROM UNNEST(credits) AS c), 0))) AS total_cost
         FROM
           \`${projectId}.${datasetId}.${tableId}\`
         WHERE
@@ -111,7 +111,7 @@ export class GCPClient extends InfraWalletClient {
           };
         }
 
-        acc[keyName].reports[period] = row.total_cost;
+        acc[keyName].reports[period] = parseFloat(row.total_cost);
 
         return acc;
       },

plugins/infrawallet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electrolux-oss/plugin-infrawallet",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "backstage": {
     "role": "frontend-plugin"
   },

plugins/infrawallet/src/components/CostReportsTableComponent/CostReportsTableComponent.tsx

@@ -38,6 +38,30 @@ function CustomToolbar() {
 export const CostReportsTableComponent: FC<CostReportsTableComponentProps> = ({ reports, aggregatedBy, periods }) => {
   const classes = useStyles();
   const customScale = humanFormat.Scale.create(['', 'K', 'M', 'B'], 1000);
+
+  const formatCostValue = (params: GridRenderCellParams, period: string): string => {
+    const value = params.value;
+    if (typeof value === 'number') {
+      const previousPeriod = period.length === 7 ? getPreviousMonth(params.field) : '';
+      const formattedValue = humanFormat(value, {
+        scale: customScale,
+        separator: '',
+        decimals: 2,
+      });
+      if (periods.includes(previousPeriod) && params.row.reports[previousPeriod] > 0) {
+        const diff = params.row.reports[params.field] - params.row.reports[previousPeriod];
+        const percentage = Math.round((diff / params.row.reports[previousPeriod]) * 100);
+        const mark = diff > 0 ? '+' : '';
+        // only display percentage change if it is larger than 1% or less than -1%
+        if (percentage >= 1 || percentage <= -1) {
+          return `$${formattedValue} (${mark}${percentage}%)`;
+        }
+      }
+      return `$${formattedValue}`;
+    }
+    return '-';
+  };
+
   const columns: GridColDef[] = [
     {
       field: aggregatedBy,
@@ -97,33 +121,12 @@ export const CostReportsTableComponent: FC<CostReportsTableComponentProps> = ({
       valueGetter: (_, row) => {
         return row.reports[period] ? row.reports[period] : null;
       },
-      valueFormatter: (value, row, column) => {
-        if (typeof value === 'number') {
-          const previousPeriod = period.length === 7 ? getPreviousMonth(column.field) : '';
-          const formattedValue = humanFormat(value, {
-            scale: customScale,
-            separator: '',
-            decimals: 2,
-          });
-          if (periods.includes(previousPeriod) && row.reports[previousPeriod] > 0) {
-            const diff = row.reports[column.field] - row.reports[previousPeriod];
-            const percentage = Math.round((diff / row.reports[previousPeriod]) * 100);
-            const mark = diff > 0 ? '+' : '';
-            // only display percentage change if it is larger than 1% or less than -1%
-            if (percentage >= 1 || percentage <= -1) {
-              return `$${formattedValue} (${mark}${percentage}%)`;
-            }
-          }
-          return `$${formattedValue}`;
-        }
-        return '-';
-      },
       renderCell: (params: GridRenderCellParams): React.ReactNode => {
+        const formattedValue = formatCostValue(params, period);
         let className = '';
-        const percentageIndex = params.formattedValue.indexOf('(');
-        const costStr =
-          percentageIndex === -1 ? params.formattedValue : params.formattedValue.substring(0, percentageIndex);
-        let percentageStr = percentageIndex === -1 ? '' : params.formattedValue.substring(percentageIndex);
+        const percentageIndex = formattedValue.indexOf('(');
+        const costStr = percentageIndex === -1 ? formattedValue : formattedValue.substring(0, percentageIndex);
+        let percentageStr = percentageIndex === -1 ? '' : formattedValue.substring(percentageIndex);
         if (percentageStr.includes('-')) {
           className = classes.decrease;
           percentageStr = percentageStr.replace('-', '▼');
@@ -157,18 +160,16 @@ export const CostReportsTableComponent: FC<CostReportsTableComponentProps> = ({
       });
       return total;
     },
-    valueFormatter: value => {
-      if (typeof value === 'number') {
-        return `$${humanFormat(value, {
+    renderCell: (params: GridRenderCellParams): React.ReactNode => {
+      let formattedValue = '-';
+      if (typeof params.value === 'number') {
+        formattedValue = `$${humanFormat(params.value, {
           scale: customScale,
           separator: '',
           decimals: 2,
         })}`;
       }
-      return '-';
-    },
-    renderCell: (params: GridRenderCellParams): React.ReactNode => {
-      return <Typography variant="body2">{params.formattedValue}</Typography>;
+      return <Typography variant="body2">{formattedValue}</Typography>;
     },
   });