Adding default_currency variable in UI

README.md

@@ -62,3 +62,7 @@ For some use cases such as the case of [OpenCost deployed behind an ingress cont
 ```sh
 $ docker run -p 9091:9090 -e BASE_URL_OVERRIDE=anything -d opencost-ui:latest
 ```
+
+## Overriding the Default Currency
+
+The UI by default assumes all metrics are in the "USD" currency. if you wish to set the default currency to something else, edit [DEFAULT_CURRENCY](src\constants\defaults.js)

src/components/Controls/Edit.js

@@ -4,7 +4,8 @@ import InputLabel from '@material-ui/core/InputLabel'
 import MenuItem from '@material-ui/core/MenuItem'
 import Select from '@material-ui/core/Select'
 
-import React from 'react';
+// import React from 'react';
+import React, { useState, useEffect } from 'react';
 
 import SelectWindow from '../SelectWindow';
 
@@ -25,6 +26,11 @@ function EditControl({
   currencyOptions, currency, setCurrency,
 }) {
   const classes = useStyles();
+  // Handle multiple aggregations
+  const handleAggregationChange = (event) => {
+    const value = event.target.value;
+    setAggregateBy(value);
+  };
   return (
     <div className={classes.wrapper}>
       <SelectWindow

src/components/Controls/index.js

@@ -18,6 +18,8 @@ const Controls = ({
   currency,
   currencyOptions,
   setCurrency,
+  conversionRate,
+  setConversionRate,
 }) => {
 
   return (
@@ -35,6 +37,8 @@ const Controls = ({
         currency={currency}
         currencyOptions={currencyOptions}
         setCurrency={setCurrency}
+        conversionRate={conversionRate}
+        setConversionRate={setConversionRate}
       />
 
       <DownloadControl

src/components/cloudCost/cloudCost.js

@@ -16,12 +16,13 @@ import {
 import { toCurrency } from "../../util";
 import CloudCostChart from "./cloudCostChart";
 import { CloudCostRow } from "./cloudCostRow";
+import { DEFAULT_CURRENCY } from "../../constants/defaults";
 
 const CloudCost = ({
   cumulativeData = [],
   totalData: totalsRow = {},
   graphData = [],
-  currency = "USD",
+  currency = DEFAULT_CURRENCY,
   drilldown,
   sampleData = false,
 }) => {

src/components/externalCosts/externalCostsTable.js

@@ -15,10 +15,11 @@ import { useLocation, useHistory } from "react-router";
 import { toCurrency } from "../../util";
 import { ExternalCostRow } from "./externalCostRow";
 import { aggToKeyMapExternalCosts } from "./tokens";
+import { DEFAULT_CURRENCY } from "../../constants/defaults";
 
 const ExternalCostsTable = ({
   tableData,
-  currency = "USD",
+  currency = DEFAULT_CURRENCY,
   aggregateBy = "usageUnit",
   drilldown,
 }) => {

src/constants/defaults.js

@@ -0,0 +1,2 @@
+export const DEFAULT_CURRENCY = "USD";
+export const DEFAULT_CONVERSION_RATE = 1.0;

src/pages/Allocations.js

@@ -14,7 +14,7 @@ import {
   toArray,
   trim,
 } from "lodash";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useMemo } from "react";
 import ReactDOM from "react-dom";
 import { useLocation, useHistory } from "react-router";
 
@@ -25,14 +25,17 @@ import Page from "../components/Page";
 import Footer from "../components/Footer";
 import Subtitle from "../components/Subtitle";
 import Warnings from "../components/Warnings";
+import { getCurrencyConversionRate } from "../services/currency";
 import AllocationService from "../services/allocation";
+import { currencyCodes } from "../constants/currencyCodes";
 import {
   checkCustomWindow,
   cumulativeToTotals,
   rangeToCumulative,
   toVerboseTimeRange,
+  applyConversionRate,
 } from "../util";
-import { currencyCodes } from "../constants/currencyCodes";
+import { DEFAULT_CURRENCY, DEFAULT_CONVERSION_RATE } from "../constants/defaults";
 
 const windowOptions = [
   { name: "Today", value: "today" },
@@ -87,34 +90,62 @@ function generateTitle({ window, aggregateBy, accumulate }) {
     }
   }
 
-  let aggregationName = get(
-    find(aggregationOptions, { value: aggregateBy }),
-    "name",
-    ""
-  ).toLowerCase();
-  if (aggregationName === "") {
-    console.warn(`unknown aggregation: ${aggregateBy}`);
+  let aggregationName = "";
+  if (Array.isArray(aggregateBy) && aggregateBy.length > 0) {
+    // If aggregateBy is an array, get names for all selected values
+    const selectedAggregationNames = aggregateBy.map(val =>
+      get(find(aggregationOptions, { value: val }), "name", val).toLowerCase()
+    );
+
+    if (selectedAggregationNames.length === 1) {
+      aggregationName = selectedAggregationNames[0];
+    } else if (selectedAggregationNames.length === 2) {
+      aggregationName = selectedAggregationNames.join(" and "); // "namespace and cluster"
+    } else {
+      // For three or more, use commas with "and" before the last item
+      const last = selectedAggregationNames.pop();
+      aggregationName = `${selectedAggregationNames.join(", ")} and ${last}`; // "namespace, cluster, and node"
+    }
+
+  } else {
+    // Fallback for single string (if it ever occurs or for initial default)
+    aggregationName = get(
+      find(aggregationOptions, { value: aggregateBy }),
+      "name",
+      ""
+    ).toLowerCase();
+    if (aggregationName === "") {
+      console.warn(`unknown aggregation: ${aggregateBy}`);
+    } 
   }
 
   let str = `${windowName} by ${aggregationName}`;
 
   if (!accumulate) {
     str = `${str} daily`;
   }
-
   return str;
 }
 
 const ReportsPage = () => {
   const classes = useStyles();
 
-  // Allocation data state
-  const [allocationData, setAllocationData] = useState([]);
+  // Raw data state which will set allocationData when changed
+  const [rawData, setRawData] = useState([])
   const [cumulativeData, setCumulativeData] = useState({});
   const [totalData, setTotalData] = useState({});
+
+
+  const [baseCurrency, setBaseCurrency] = useState(DEFAULT_CURRENCY);
+  const [targetCurrency, setTargetCurrency] = useState(DEFAULT_CURRENCY);
+  const [conversionRate, setConversionRate] = useState(DEFAULT_CONVERSION_RATE);
+
+  const allocationData = useMemo(() => {
+    return applyConversionRate(rawData, conversionRate);
+  }, [rawData, conversionRate]);
 
   // When allocation data changes, create a cumulative version of it
-  useEffect(() => {
+  useEffect(() =>  {
     const cumulative = rangeToCumulative(allocationData, aggregateBy);
     setCumulativeData(toArray(cumulative));
     setTotalData(cumulativeToTotals(cumulative));
@@ -125,8 +156,7 @@ const ReportsPage = () => {
   const [window, setWindow] = useState(windowOptions[0].value);
   const [aggregateBy, setAggregateBy] = useState(aggregationOptions[0].value);
   const [accumulate, setAccumulate] = useState(accumulateOptions[0].value);
-  const [currency, setCurrency] = useState("USD");
-
+
   // Report state, including current report and saved options
   const [title, setTitle] = useState("Last 7 days by namespace daily");
 
@@ -161,8 +191,25 @@ const ReportsPage = () => {
     setWindow(searchParams.get("window") || "7d");
     setAggregateBy(searchParams.get("agg") || "namespace");
     setAccumulate(searchParams.get("acc") === "true" || false);
-    setCurrency(searchParams.get("currency") || "USD");
+    setTargetCurrency(searchParams.get("currency") || DEFAULT_CURRENCY);
   }, [routerLocation]);
+
+  // NEW: Effect to fetch conversion rate whenever targetCurrency changes
+  useEffect(() => {
+    const fetchRate = async () => {
+      if (targetCurrency === baseCurrency || !targetCurrency) {
+        setConversionRate(1);
+        return;
+      }
+      const rate = await getCurrencyConversionRate(baseCurrency, targetCurrency);
+      console.log(rate)
+      if (rate) {
+        setConversionRate(rate);
+        setBaseCurrency(targetCurrency); // Update base to new currency after successful conversion
+      }
+    };
+    fetchRate();
+  }, [targetCurrency]);
 
   async function initialize() {
     setInit(true);
@@ -184,7 +231,7 @@ const ReportsPage = () => {
           // update cluster aggregations to use clusterName/clusterId names
           allocationRange[i] = sortBy(allocationRange[i], (a) => a.totalCost);
         }
-        setAllocationData(allocationRange);
+        setRawData(allocationRange);
       } else {
         if (resp.message && resp.message.indexOf("boundary error") >= 0) {
           let match = resp.message.match(/(ETL is \d+\.\d+% complete)/);
@@ -199,7 +246,7 @@ const ReportsPage = () => {
             },
           ]);
         }
-        setAllocationData([]);
+        setRawData([]);
       }
     } catch (err) {
       if (err.message.indexOf("404") === 0) {
@@ -223,7 +270,7 @@ const ReportsPage = () => {
           },
         ]);
       }
-      setAllocationData([]);
+      setRawData([]);
     }
 
     setLoading(false);
@@ -278,7 +325,7 @@ const ReportsPage = () => {
               }}
               title={title}
               cumulativeData={cumulativeData}
-              currency={currency}
+              currency={targetCurrency}
               currencyOptions={currencyCodes}
               setCurrency={(curr) => {
                 searchParams.set("currency", curr);
@@ -301,7 +348,7 @@ const ReportsPage = () => {
               allocationData={allocationData}
               cumulativeData={cumulativeData}
               totalData={totalData}
-              currency={currency}
+              currency={targetCurrency}
             />
           )}
         </Paper>

src/pages/CloudCosts.js

@@ -24,6 +24,7 @@ import {
 } from "../components/cloudCost/tokens";
 
 import { currencyCodes } from "../constants/currencyCodes";
+import { DEFAULT_CURRENCY } from "../constants/defaults";
 import CloudCost from "../components/cloudCost/cloudCost";
 import { CloudCostDetails } from "../components/cloudCost/cloudCostDetails";
 
@@ -53,7 +54,7 @@ const CloudCosts = () => {
     costMetricOptions[0].value
   );
   const [filters, setFilters] = React.useState([]);
-  const [currency, setCurrency] = React.useState("USD");
+  const [currency, setCurrency] = React.useState(DEFAULT_CURRENCY);
   const [selectedProviderId, setSelectedProviderId] = React.useState("");
   const [selectedItemName, setselectedItemName] = React.useState("");
   const sampleData = aggregateBy.includes("item");
@@ -187,7 +188,7 @@ const CloudCosts = () => {
     setWindow(searchParams.get("window") || "7d");
     setAggregateBy(searchParams.get("agg") || "provider");
     setCostMetric(searchParams.get("costMetric") || "AmortizedNetCost");
-    setCurrency(searchParams.get("currency") || "USD");
+    setCurrency(searchParams.get("currency") || DEFAULT_CURRENCY);
   }, [routerLocation]);
 
   // Initialize once, then fetch report each time setFetch(true) is called

src/pages/ExternalCosts.js

@@ -17,6 +17,7 @@ import {
   aggregationOptions,
   costTypeOptions,
 } from "../components/externalCosts/tokens";
+import { DEFAULT_CURRENCY } from "../constants/defaults";
 import ExternalCostsControls from "../components/externalCosts/externalCostsControls";
 import ExternalCostsChart from "../components/externalCosts/externalCostsChart";
 import ExternalCostsTable from "../components/externalCosts/externalCostsTable";
@@ -43,7 +44,7 @@ const ExternalCosts = () => {
     aggregationOptions[0].value
   );
   const [filters, setFilters] = React.useState([]);
-  const [currency, setCurrency] = React.useState("USD");
+  const [currency, setCurrency] = React.useState(DEFAULT_CURRENCY);
 
   // page and settings state
   const [init, setInit] = React.useState(false);
@@ -213,7 +214,7 @@ const ExternalCosts = () => {
   React.useEffect(() => {
     setWindow(searchParams.get("window") || "7d");
     setAggregateBy(searchParams.get("agg") || "domain");
-    setCurrency(searchParams.get("currency") || "USD");
+    setCurrency(searchParams.get("currency") || DEFAULT_CURRENCY);
     setCostType(searchParams.get("costType") || "blended");
     setSortBy(searchParams.get("sortBy") || "cost");
     setSortDirection(searchParams.get("sortDirection") || "desc");