Merge pull request #1940 from saifullah619/feat/multipleCurrencySupport

[UI]-Added the support for multiple currencies

ui/src/Reports.js

@@ -17,6 +17,7 @@ import Subtitle from './components/Subtitle';
 import Warnings from './components/Warnings';
 import AllocationService from './services/allocation';
 import { checkCustomWindow, cumulativeToTotals, rangeToCumulative, toVerboseTimeRange } from './util';
+import { currencyCodes } from './constants/currencyCodes'
 
 const windowOptions = [
   { name: 'Today', value: 'today' },
@@ -103,6 +104,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')
@@ -119,8 +121,7 @@ const ReportsPage = () => {
   const [fetch, setFetch] = useState(false)
   const [loading, setLoading] = useState(true)
   const [errors, setErrors] = useState([])
-  const [currency, setCurrency] = useState('USD')
-
+  
   // Initialize once, then fetch report each time setFetch(true) is called
   useEffect(() => {
     if (!init) {
@@ -139,6 +140,7 @@ const ReportsPage = () => {
     setWindow(searchParams.get('window') || '6d');
     setAggregateBy(searchParams.get('agg') || 'namespace');
     setAccumulate((searchParams.get('acc') === 'true') || false);
+    setCurrency(searchParams.get('currency') || 'USD');
   }, [routerLocation]);
 
   async function initialize() {
@@ -245,6 +247,13 @@ const ReportsPage = () => {
             title={title}
             cumulativeData={cumulativeData}
             currency={currency}
+            currencyOptions={currencyCodes}
+            setCurrency={(curr) => {
+              searchParams.set('currency', curr);
+              routerHistory.push({
+                search: `?${searchParams.toString()}`
+              });
+            }}
           />
         </div>
 

ui/src/components/Controls/Edit.js

@@ -22,6 +22,7 @@ function EditControl({
   windowOptions, window, setWindow,
   aggregationOptions, aggregateBy, setAggregateBy,
   accumulateOptions, accumulate, setAccumulate,
+  currencyOptions, currency, setCurrency,
 }) {
   const classes = useStyles();
   return (
@@ -52,6 +53,20 @@ function EditControl({
           {accumulateOptions.map((opt) => <MenuItem key={opt.value} value={opt.value}>{opt.name}</MenuItem>)}
         </Select>
       </FormControl>
+      <FormControl className={classes.formControl}>
+        <InputLabel id="currency-label">Currency</InputLabel>
+        <Select
+          id="currency"
+          value={currency}
+          onChange={e => setCurrency(e.target.value)}
+        >
+          {currencyOptions?.map((currency) => (
+            <MenuItem key={currency} value={currency}>
+              {currency}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
     </div>
   );
 }

ui/src/components/Controls/index.js

@@ -16,6 +16,8 @@ const Controls = ({
   title,
   cumulativeData,
   currency,
+  currencyOptions,
+  setCurrency,
 }) => {
 
   return (
@@ -31,6 +33,8 @@ const Controls = ({
         accumulate={accumulate}
         setAccumulate={setAccumulate}
         currency={currency}
+        currencyOptions={currencyOptions}
+        setCurrency={setCurrency}
       />
 
       <DownloadControl

ui/src/constants/currencyCodes.js

@@ -0,0 +1 @@
+export const currencyCodes = ["AED", "AFN", "ALL", "AMD", "ANG", "AOA", "ARS", "AUD", "AWG", "AZN", "BAM", "BBD", "BDT", "BGN", "BHD", "BIF", "BMD", "BND", "BOB", "BOV", "BRL", "BSD", "BTN", "BWP", "BYR", "BZD", "CAD", "CDF", "CHE", "CHF", "CHW", "CLF", "CLP", "CNY", "COP", "COU", "CRC", "CUC", "CUP", "CVE", "CZK", "DJF", "DKK", "DOP", "DZD", "EGP", "ERN", "ETB", "EUR", "FJD", "FKP", "GBP", "GEL", "GHS", "GIP", "GMD", "GNF", "GTQ", "GYD", "HKD", "HNL", "HRK", "HTG", "HUF", "IDR", "ILS", "INR", "IQD", "IRR", "ISK", "JMD", "JOD", "JPY", "KES", "KGS", "KHR", "KMF", "KPW", "KRW", "KWD", "KYD", "KZT", "LAK", "LBP", "LKR", "LRD", "LSL", "LTL", "LVL", "LYD", "MAD", "MDL", "MGA", "MKD", "MMK", "MNT", "MOP", "MRO", "MUR", "MVR", "MWK", "MXN", "MXV", "MYR", "MZN", "NAD", "NGN", "NIO", "NOK", "NPR", "NZD", "OMR", "PAB", "PEN", "PGK", "PHP", "PKR", "PLN", "PYG", "QAR", "RON", "RSD", "RUB", "RWF", "SAR", "SBD", "SCR", "SDG", "SEK", "SGD", "SHP", "SLL", "SOS", "SRD", "SSP", "STD", "SYP", "SZL", "THB", "TJS", "TMT", "TND", "TOP", "TRY", "TTD", "TWD", "TZS", "UAH", "UGX", "USD", "USN", "USS", "UYI", "UYU", "UZS", "VEF", "VND", "VUV", "WST", "XAF", "XAG", "XAU", "XBA", "XBB", "XBC", "XBD", "XCD", "XDR", "XFU", "XOF", "XPD", "XPF", "XPT", "XTS", "XXX", "YER", "ZAR", "ZMW"];