npm - @red-hat-developer-hub/plugin-cost-management - Versions diffs - 2.2.2 → 2.4.0 - Mend

@red-hat-developer-hub/plugin-cost-management 2.2.2 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (63) hide show

package/dist/pages/openshift/components/Filters.esm.js CHANGED Viewed

@@ -1,4 +1,5 @@
-import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect, useCallback } from 'react';
 import Box from '@material-ui/core/Box';
 import Divider from '@material-ui/core/Divider';
 import { makeStyles } from '@material-ui/core/styles';
@@ -169,82 +170,38 @@ function Filters(props) {
     { label: "USD ($) - United States Dollar", value: "USD" },
     { label: "ZAR (ZAR) - South African Rand", value: "ZAR" }
   ];
-  return /* @__PURE__ */ React.createElement(Box, { className: baseClasses.root }, /* @__PURE__ */ React.createElement(Box, { className: `${baseClasses.filters} ${classes.filters}` }, /* @__PURE__ */ React.createElement("div", { className: classes.filterSection }, /* @__PURE__ */ React.createElement(Box, { p: 1, pt: 0 }, /* @__PURE__ */ React.createElement(
-    SelectComponent,
-    {
-      freeSolo: true,
-      selectOnFocus: true,
-      clearOnBlur: true,
-      handleHomeEndKeys: true,
-      filterSelectedOptions: true,
-      label: "Group by",
-      options: ["project", "cluster", "node", "tag"],
-      value: groupBy,
-      placeholder: "Group by",
-      onChange: (event) => onGroupByChange(event.target.value)
-    }
-  ), groupBy === "tag" && /* @__PURE__ */ React.createElement(Box, { p: 0, pt: 0 }, /* @__PURE__ */ React.createElement(
-    AutocompleteComponent,
-    {
-      label: "Choose key",
-      options: tags,
-      value: selectedTag,
-      placeholder: "Choose key",
-      loading: false,
-      onChange: (_event, value) => {
-        onSelectedTagChange(value ?? "");
-      }
-    }
-  )))), /* @__PURE__ */ React.createElement("div", { className: classes.filterSection }, /* @__PURE__ */ React.createElement(Box, { p: 1 }, /* @__PURE__ */ React.createElement(
-    SelectComponent,
-    {
-      freeSolo: true,
-      selectOnFocus: true,
-      clearOnBlur: true,
-      handleHomeEndKeys: true,
-      filterSelectedOptions: true,
-      label: "Overhead cost",
-      options: [
-        "Distribute through cost models",
-        "Don't distribute overhead costs"
-      ],
-      value: overheadDistribution === "distribute" ? "Distribute through cost models" : "Don't distribute overhead costs",
-      placeholder: "Overhead cost",
-      onChange: (event) => {
-        const value = event.target.value;
-        const mappedValue = value === "Distribute through cost models" ? "distribute" : "dont_distribute";
-        onOverheadDistributionChange(mappedValue);
-      }
-    }
-  ))), /* @__PURE__ */ React.createElement("div", { className: classes.filterSection }, /* @__PURE__ */ React.createElement(Box, { p: 1 }, /* @__PURE__ */ React.createElement(
-    SelectComponent,
-    {
-      freeSolo: true,
-      selectOnFocus: true,
-      clearOnBlur: true,
-      handleHomeEndKeys: true,
-      filterSelectedOptions: true,
-      label: "Time",
-      options: ["Month to date", "Previous month"],
-      value: timeRange === "month-to-date" ? "Month to date" : "Previous month",
-      placeholder: "Time",
-      onChange: (event) => {
-        const value = event.target.value;
-        const mappedValue = value === "Month to date" ? "month-to-date" : "previous-month";
-        onTimeRangeChange(mappedValue);
-      }
-    }
-  ))), /* @__PURE__ */ React.createElement(Box, { marginX: 2 }, /* @__PURE__ */ React.createElement(Divider, { className: classes.divider })), /* @__PURE__ */ React.createElement("div", { className: classes.filterSection }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      style: {
-        backgroundColor: filterTableBackgroundColor,
-        padding: 16,
-        borderRadius: 8
-      }
-    },
-    /* @__PURE__ */ React.createElement("div", { style: { fontWeight: "bold", marginBottom: "8px" } }, "Filter table by"),
-    /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(Box, { className: baseClasses.root, children: /* @__PURE__ */ jsxs(Box, { className: `${baseClasses.filters} ${classes.filters}`, children: [
+    /* @__PURE__ */ jsx("div", { className: classes.filterSection, children: /* @__PURE__ */ jsxs(Box, { p: 1, pt: 0, children: [
+      /* @__PURE__ */ jsx(
+        SelectComponent,
+        {
+          freeSolo: true,
+          selectOnFocus: true,
+          clearOnBlur: true,
+          handleHomeEndKeys: true,
+          filterSelectedOptions: true,
+          label: "Group by",
+          options: ["project", "cluster", "node", "tag"],
+          value: groupBy,
+          placeholder: "Group by",
+          onChange: (event) => onGroupByChange(event.target.value)
+        }
+      ),
+      groupBy === "tag" && /* @__PURE__ */ jsx(Box, { p: 0, pt: 0, children: /* @__PURE__ */ jsx(
+        AutocompleteComponent,
+        {
+          label: "Choose key",
+          options: tags,
+          value: selectedTag,
+          placeholder: "Choose key",
+          loading: false,
+          onChange: (_event, value) => {
+            onSelectedTagChange(value ?? "");
+          }
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: classes.filterSection, children: /* @__PURE__ */ jsx(Box, { p: 1, children: /* @__PURE__ */ jsx(
       SelectComponent,
       {
         freeSolo: true,
@@ -252,22 +209,21 @@ function Filters(props) {
         clearOnBlur: true,
         handleHomeEndKeys: true,
         filterSelectedOptions: true,
-        label: "",
-        options: ["project", "cluster", "node", "tag"],
-        value: filterBy,
-        placeholder: "",
+        label: "Overhead cost",
+        options: [
+          "Distribute through cost models",
+          "Don't distribute overhead costs"
+        ],
+        value: overheadDistribution === "distribute" ? "Distribute through cost models" : "Don't distribute overhead costs",
+        placeholder: "Overhead cost",
         onChange: (event) => {
-          const newFilterBy = event.target.value;
-          onFilterByChange(newFilterBy);
-          onFilterValueChange("");
-          if (newFilterBy !== "tag") {
-            onSelectedTagKeyChange("");
-            onSelectedTagValueChange("");
-          }
+          const value = event.target.value;
+          const mappedValue = value === "Distribute through cost models" ? "distribute" : "dont_distribute";
+          onOverheadDistributionChange(mappedValue);
         }
       }
-    ),
-    /* @__PURE__ */ React.createElement(
+    ) }) }),
+    /* @__PURE__ */ jsx("div", { className: classes.filterSection, children: /* @__PURE__ */ jsx(Box, { p: 1, children: /* @__PURE__ */ jsx(
       SelectComponent,
       {
         freeSolo: true,
@@ -275,85 +231,146 @@ function Filters(props) {
         clearOnBlur: true,
         handleHomeEndKeys: true,
         filterSelectedOptions: true,
-        label: "",
-        options: ["includes", "excludes", "exact"],
-        value: filterOperation,
-        placeholder: "",
+        label: "Time",
+        options: ["Month to date", "Previous month"],
+        value: timeRange === "month-to-date" ? "Month to date" : "Previous month",
+        placeholder: "Time",
         onChange: (event) => {
-          onFilterOperationChange(event.target.value);
+          const value = event.target.value;
+          const mappedValue = value === "Month to date" ? "month-to-date" : "previous-month";
+          onTimeRangeChange(mappedValue);
         }
       }
-    ),
-    filterBy === "tag" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-      AutocompleteComponent,
+    ) }) }),
+    /* @__PURE__ */ jsx(Box, { marginX: 2, children: /* @__PURE__ */ jsx(Divider, { className: classes.divider }) }),
+    /* @__PURE__ */ jsx("div", { className: classes.filterSection, children: /* @__PURE__ */ jsxs(
+      "div",
       {
-        label: "",
-        options: getFilterValueOptions,
-        value: selectedTagKey,
-        placeholder: "Select tag key",
-        loading: false,
-        onInputChange: handleInputChange,
-        onChange: (_event, value) => {
-          const tagKey = value ?? "";
-          onSelectedTagKeyChange(tagKey);
-          onSelectedTagValueChange("");
-          setSearchInput("");
-          setDebouncedSearch("");
-        }
-      }
-    ), selectedTagKey && /* @__PURE__ */ React.createElement(Box, { style: { marginTop: "-8px" } }, /* @__PURE__ */ React.createElement(
-      AutocompleteComponent,
-      {
-        label: "",
-        options: tagValuesData || [],
-        value: selectedTagValue,
-        placeholder: "Select tag value",
-        loading: isLoadingTagValues,
-        onChange: (_event, value) => {
-          onSelectedTagValueChange(value ?? "");
-        }
+        style: {
+          backgroundColor: filterTableBackgroundColor,
+          padding: 16,
+          borderRadius: 8
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { style: { fontWeight: "bold", marginBottom: "8px" }, children: "Filter table by" }),
+          /* @__PURE__ */ jsx(
+            SelectComponent,
+            {
+              freeSolo: true,
+              selectOnFocus: true,
+              clearOnBlur: true,
+              handleHomeEndKeys: true,
+              filterSelectedOptions: true,
+              label: "",
+              options: ["project", "cluster", "node", "tag"],
+              value: filterBy,
+              placeholder: "",
+              onChange: (event) => {
+                const newFilterBy = event.target.value;
+                onFilterByChange(newFilterBy);
+                onFilterValueChange("");
+                if (newFilterBy !== "tag") {
+                  onSelectedTagKeyChange("");
+                  onSelectedTagValueChange("");
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SelectComponent,
+            {
+              freeSolo: true,
+              selectOnFocus: true,
+              clearOnBlur: true,
+              handleHomeEndKeys: true,
+              filterSelectedOptions: true,
+              label: "",
+              options: ["includes", "excludes", "exact"],
+              value: filterOperation,
+              placeholder: "",
+              onChange: (event) => {
+                onFilterOperationChange(event.target.value);
+              }
+            }
+          ),
+          filterBy === "tag" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              AutocompleteComponent,
+              {
+                label: "",
+                options: getFilterValueOptions,
+                value: selectedTagKey,
+                placeholder: "Select tag key",
+                loading: false,
+                onInputChange: handleInputChange,
+                onChange: (_event, value) => {
+                  const tagKey = value ?? "";
+                  onSelectedTagKeyChange(tagKey);
+                  onSelectedTagValueChange("");
+                  setSearchInput("");
+                  setDebouncedSearch("");
+                }
+              }
+            ),
+            selectedTagKey && /* @__PURE__ */ jsx(Box, { style: { marginTop: "-8px" }, children: /* @__PURE__ */ jsx(
+              AutocompleteComponent,
+              {
+                label: "",
+                options: tagValuesData || [],
+                value: selectedTagValue,
+                placeholder: "Select tag value",
+                loading: isLoadingTagValues,
+                onChange: (_event, value) => {
+                  onSelectedTagValueChange(value ?? "");
+                }
+              }
+            ) })
+          ] }) : /* @__PURE__ */ jsx(
+            AutocompleteComponent,
+            {
+              label: "",
+              options: getFilterValueOptions,
+              value: filterValue,
+              placeholder: `Filter by ${filterBy || "project"}`,
+              loading: isLoadingOptions,
+              onInputChange: handleInputChange,
+              onChange: (_event, value) => {
+                onFilterValueChange(value ?? "");
+                setSearchInput("");
+                setDebouncedSearch("");
+              }
+            }
+          )
+        ]
       }
-    ))) : /* @__PURE__ */ React.createElement(
-      AutocompleteComponent,
+    ) }),
+    /* @__PURE__ */ jsx(Box, { marginX: 2, children: /* @__PURE__ */ jsx(Divider, { className: classes.divider }) }),
+    /* @__PURE__ */ jsx("div", { className: classes.filterSection, children: /* @__PURE__ */ jsx(Box, { p: 2, children: /* @__PURE__ */ jsx(
+      SelectComponent,
       {
-        label: "",
-        options: getFilterValueOptions,
-        value: filterValue,
-        placeholder: `Filter by ${filterBy || "project"}`,
-        loading: isLoadingOptions,
-        onInputChange: handleInputChange,
-        onChange: (_event, value) => {
-          onFilterValueChange(value ?? "");
-          setSearchInput("");
-          setDebouncedSearch("");
+        freeSolo: true,
+        selectOnFocus: true,
+        clearOnBlur: true,
+        handleHomeEndKeys: true,
+        filterSelectedOptions: true,
+        label: "Currency",
+        options: currencyOptions.map(
+          (value) => value.label
+        ),
+        value: currencyOptions.find(
+          (item) => item.value === currency
+        )?.label ?? "",
+        placeholder: "Select currency",
+        onChange: (event) => {
+          const selectedLabel = event.target.value;
+          const selectedCurrency = currencyOptions.find(
+            (item) => item.label === selectedLabel
+          )?.value ?? "";
+          onCurrencyChange(selectedCurrency);
         }
       }
-    )
-  )), /* @__PURE__ */ React.createElement(Box, { marginX: 2 }, /* @__PURE__ */ React.createElement(Divider, { className: classes.divider })), /* @__PURE__ */ React.createElement("div", { className: classes.filterSection }, /* @__PURE__ */ React.createElement(Box, { p: 2 }, /* @__PURE__ */ React.createElement(
-    SelectComponent,
-    {
-      freeSolo: true,
-      selectOnFocus: true,
-      clearOnBlur: true,
-      handleHomeEndKeys: true,
-      filterSelectedOptions: true,
-      label: "Currency",
-      options: currencyOptions.map(
-        (value) => value.label
-      ),
-      value: currencyOptions.find(
-        (item) => item.value === currency
-      )?.label ?? "",
-      placeholder: "Select currency",
-      onChange: (event) => {
-        const selectedLabel = event.target.value;
-        const selectedCurrency = currencyOptions.find(
-          (item) => item.label === selectedLabel
-        )?.value ?? "";
-        onCurrencyChange(selectedCurrency);
-      }
-    }
-  )))));
+    ) }) })
+  ] }) });
 }
 export { Filters };

package/dist/pages/openshift/components/Filters.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Filters.esm.js","sources":["../../../../src/pages/openshift/components/Filters.tsx"],"sourcesContent":["/\n Copyright Red Hat, Inc.\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\n\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Divider from '@material-ui/core/Divider';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useBaseFiltersStyles } from '../../../components/filtersStyles';\nimport { SelectComponent } from './SelectComponent';\nimport { AutocompleteComponent } from './AutocompleteComponent';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { costManagementSlimApiRef } from '../../../apis';\nimport useAsync from 'react-use/lib/useAsync';\nimport debounce from 'lodash/debounce';\nimport { useThemeBackgroundColor } from '../../../hooks/useThemeBackgroundColor';\n\nconst useFiltersStyles = makeStyles(\n theme => ({\n filters: {\n '& > ': {\n marginTop: theme.spacing(0),\n },\n },\n filterSection: {\n marginBottom: theme.spacing(0),\n },\n divider: {\n margin: theme.spacing(2, 0),\n },\n }),\n { name: 'OpenShiftFilters' },\n);\n\n/** @public /\nexport type FiltersProps = {\n groupBy: string;\n overheadDistribution: string;\n timeRange: string;\n currency: string;\n filterBy: string;\n filterOperation: string;\n filterValue: string;\n tags?: string[];\n selectedTag?: string;\n selectedTagKey?: string;\n selectedTagValue?: string;\n onGroupByChange: (value: string) => void;\n onOverheadDistributionChange: (value: string) => void;\n onTimeRangeChange: (value: string) => void;\n onCurrencyChange: (value: string) => void;\n onFilterByChange: (value: string) => void;\n onFilterOperationChange: (value: string) => void;\n onFilterValueChange: (value: string) => void;\n onSelectedTagChange: (value: string) => void;\n onSelectedTagKeyChange: (value: string) => void;\n onSelectedTagValueChange: (value: string) => void;\n};\n\nexport type CurrencyOption = {\n label: string;\n value: string;\n};\n\n/* @public /\nexport function Filters(props: FiltersProps) {\n const {\n groupBy,\n overheadDistribution,\n timeRange,\n currency,\n filterBy,\n filterOperation,\n filterValue,\n tags = [],\n selectedTag = '',\n selectedTagKey = '',\n selectedTagValue = '',\n onGroupByChange,\n onOverheadDistributionChange,\n onTimeRangeChange,\n onCurrencyChange,\n onFilterByChange,\n onFilterOperationChange,\n onFilterValueChange,\n onSelectedTagChange,\n onSelectedTagKeyChange,\n onSelectedTagValueChange,\n } = props;\n const baseClasses = useBaseFiltersStyles();\n const classes = useFiltersStyles();\n const api = useApi(costManagementSlimApiRef);\n\n const { filterTableBackgroundColor } = useThemeBackgroundColor();\n // State for search input and debounced search\n const [searchInput, setSearchInput] = useState<string>('');\n const [debouncedSearch, setDebouncedSearch] = useState<string>('');\n\n // Debounce function to update debouncedSearch after 500ms\n const debouncedSetSearch = useMemo(\n () =>\n debounce((value: string) => {\n setDebouncedSearch(value);\n }, 500),\n [],\n );\n\n // Update debounced search when searchInput changes\n useEffect(() => {\n debouncedSetSearch(searchInput);\n return () => {\n debouncedSetSearch.cancel();\n };\n }, [searchInput, debouncedSetSearch]);\n\n // Reset search when filterBy changes\n useEffect(() => {\n setSearchInput('');\n setDebouncedSearch('');\n }, [filterBy]);\n\n // Fetch resource options based on filterBy and debouncedSearch\n const { value: resourceOptions, loading: isLoadingOptions } =\n useAsync(async () => {\n // For tags, filter the tags array based on search input (for tag key selection)\n if (filterBy === 'tag') {\n if (!debouncedSearch.trim()) {\n return tags;\n }\n const searchLower = debouncedSearch.toLocaleLowerCase('en-US');\n return tags.filter(tag =>\n tag.toLocaleLowerCase('en-US').includes(searchLower),\n );\n }\n\n // Don't fetch if there's no search term\n if (!debouncedSearch.trim()) {\n return [];\n }\n\n try {\n let response;\n switch (filterBy) {\n case 'project':\n response = await api.searchOpenShiftProjects(debouncedSearch);\n break;\n case 'cluster':\n response = await api.searchOpenShiftClusters(debouncedSearch);\n break;\n case 'node':\n response = await api.searchOpenShiftNodes(debouncedSearch);\n break;\n default:\n return [];\n }\n const data = await response.json();\n // Extract the 'value' property from each object in the data array\n return (data.data \|\| []).map((item: { value: string }) => item.value);\n } catch {\n // Silently return empty array on error\n return [];\n }\n }, [filterBy, debouncedSearch, api, tags]);\n\n // Fetch tag values when a tag key is selected for filtering\n const { value: tagValuesData, loading: isLoadingTagValues } =\n useAsync(async () => {\n if (filterBy === 'tag' && selectedTagKey) {\n try {\n const timeScopeValue = timeRange === 'month-to-date' ? -1 : -2;\n const response = await api.getOpenShiftTagValues(\n selectedTagKey,\n timeScopeValue,\n );\n const data = await response.json();\n // Extract all unique values from all items in the data array\n const allValues = new Set<string>();\n for (const item of data.data \|\| []) {\n if (item.values) {\n for (const value of item.values) {\n allValues.add(value);\n }\n }\n }\n return Array.from(allValues).sort((a, b) =>\n a.localeCompare(b, 'en-US'),\n );\n } catch {\n return [];\n }\n }\n return [];\n }, [filterBy, selectedTagKey, timeRange, api]);\n\n // Generate filter value options based on API results\n // Always include the current filterValue if it's set, so it doesn't disappear\n const getFilterValueOptions = useMemo((): string[] => {\n const options = resourceOptions \|\| [];\n // If filterValue is set and not already in options, add it\n if (filterValue && !options.includes(filterValue)) {\n return [filterValue, ...options];\n }\n return options;\n }, [resourceOptions, filterValue]);\n\n // Handle input change in autocomplete\n const handleInputChange = useCallback(\n (_event: React.ChangeEvent<{}>, value: string, reason: string) => {\n // Only update search input when user is typing (not when clearing or resetting)\n if (reason === 'input') {\n setSearchInput(value);\n }\n },\n [],\n );\n\n const currencyOptions: CurrencyOption[] = [\n { label: 'AUD (A$) - Australian Dollar', value: 'AUD' },\n { label: 'BRL (R$) - Brazilian Real', value: 'BRL' },\n { label: 'CAD (CA$) - Canadian Dollar', value: 'CAD' },\n { label: 'CHF (CHF) - Swiss Franc', value: 'CHF' },\n { label: 'CNY (CN¥) - Chinese Yuan', value: 'CNY' },\n { label: 'CZK (Kč) - Czech Koruna', value: 'CZK' },\n { label: 'DKK (DKK) - Danish Krone', value: 'DKK' },\n { label: 'EUR (€) - Euro', value: 'EUR' },\n { label: 'GBP (£) - British Pound', value: 'GBP' },\n { label: 'HKD (HK$) - Hong Kong Dollar', value: 'HKD' },\n { label: 'INR (₹) - Indian Rupee', value: 'INR' },\n { label: 'JPY (¥) - Japanese Yen', value: 'JPY' },\n { label: 'NGN (₦) - Nigerian Naira', value: 'NGN' },\n { label: 'NOK (NOK) - Norwegian Krone', value: 'NOK' },\n { label: 'NZD (NZ$) - New Zealand Dollar', value: 'NZD' },\n { label: 'SEK (SEK) - Swedish Krona', value: 'SEK' },\n { label: 'SGD (SGD) - Singapore Dollar', value: 'SGD' },\n { label: 'USD ($) - United States Dollar', value: 'USD' },\n { label: 'ZAR (ZAR) - South African Rand', value: 'ZAR' },\n ];\n\n return (\n <Box className={baseClasses.root}>\n <Box className={`${baseClasses.filters} ${classes.filters}`}>\n {/ Group by /}\n <div className={classes.filterSection}>\n <Box p={1} pt={0}>\n <SelectComponent\n freeSolo\n selectOnFocus\n clearOnBlur\n handleHomeEndKeys\n filterSelectedOptions\n label=\"Group by\"\n options={['project', 'cluster', 'node', 'tag']}\n value={groupBy}\n placeholder=\"Group by\"\n onChange={(event): void =>\n onGroupByChange(event.target.value as string)\n }\n />\n {groupBy === 'tag' && (\n <Box p={0} pt={0}>\n <AutocompleteComponent\n label=\"Choose key\"\n options={tags}\n value={selectedTag}\n placeholder=\"Choose key\"\n loading={false}\n onChange={(_event, value): void => {\n onSelectedTagChange((value as string) ?? '');\n }}\n />\n </Box>\n )}\n </Box>\n </div>\n\n {/ Overhead cost /}\n <div className={classes.filterSection}>\n <Box p={1}>\n <SelectComponent\n freeSolo\n selectOnFocus\n clearOnBlur\n handleHomeEndKeys\n filterSelectedOptions\n label=\"Overhead cost\"\n options={[\n 'Distribute through cost models',\n \"Don't distribute overhead costs\",\n ]}\n value={\n overheadDistribution === 'distribute'\n ? 'Distribute through cost models'\n : \"Don't distribute overhead costs\"\n }\n placeholder=\"Overhead cost\"\n onChange={(event): void => {\n const value = event.target.value as string;\n const mappedValue =\n value === 'Distribute through cost models'\n ? 'distribute'\n : 'dont_distribute';\n onOverheadDistributionChange(mappedValue);\n }}\n />\n </Box>\n </div>\n\n {/ Time /}\n <div className={classes.filterSection}>\n <Box p={1}>\n <SelectComponent\n freeSolo\n selectOnFocus\n clearOnBlur\n handleHomeEndKeys\n filterSelectedOptions\n label=\"Time\"\n options={['Month to date', 'Previous month']}\n value={\n timeRange === 'month-to-date'\n ? 'Month to date'\n : 'Previous month'\n }\n placeholder=\"Time\"\n onChange={(event): void => {\n const value = event.target.value as string;\n const mappedValue =\n value === 'Month to date'\n ? 'month-to-date'\n : 'previous-month';\n onTimeRangeChange(mappedValue);\n }}\n />\n </Box>\n </div>\n\n <Box marginX={2}>\n <Divider className={classes.divider} />\n </Box>\n\n {/ Filter table by /}\n <div className={classes.filterSection}>\n <div\n style={{\n backgroundColor: filterTableBackgroundColor,\n padding: 16,\n borderRadius: 8,\n }}\n >\n <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>\n Filter table by\n </div>\n <SelectComponent\n freeSolo\n selectOnFocus\n clearOnBlur\n handleHomeEndKeys\n filterSelectedOptions\n label=\"\"\n options={['project', 'cluster', 'node', 'tag']}\n value={filterBy}\n placeholder=\"\"\n onChange={(event): void => {\n const newFilterBy = event.target.value as string;\n onFilterByChange(newFilterBy);\n onFilterValueChange('');\n // Clear tag-related selections when filterBy changes away from 'tag'\n if (newFilterBy !== 'tag') {\n onSelectedTagKeyChange('');\n onSelectedTagValueChange('');\n }\n }}\n />\n <SelectComponent\n freeSolo\n selectOnFocus\n clearOnBlur\n handleHomeEndKeys\n filterSelectedOptions\n label=\"\"\n options={['includes', 'excludes', 'exact']}\n value={filterOperation}\n placeholder=\"\"\n onChange={(event): void => {\n onFilterOperationChange(event.target.value as string);\n }}\n />\n\n {filterBy === 'tag' ? (\n <>\n <AutocompleteComponent\n label=\"\"\n options={getFilterValueOptions}\n value={selectedTagKey}\n placeholder=\"Select tag key\"\n loading={false}\n onInputChange={handleInputChange}\n onChange={(_event, value): void => {\n const tagKey = (value as string) ?? '';\n onSelectedTagKeyChange(tagKey);\n // Clear tag value when tag key changes\n onSelectedTagValueChange('');\n // Clear search input when a value is selected\n setSearchInput('');\n setDebouncedSearch('');\n }}\n />\n {selectedTagKey && (\n <Box style={{ marginTop: '-8px' }}>\n <AutocompleteComponent\n label=\"\"\n options={tagValuesData \|\| []}\n value={selectedTagValue}\n placeholder=\"Select tag value\"\n loading={isLoadingTagValues}\n onChange={(_event, value): void => {\n onSelectedTagValueChange((value as string) ?? '');\n }}\n />\n </Box>\n )}\n </>\n ) : (\n <AutocompleteComponent\n label=\"\"\n options={getFilterValueOptions}\n value={filterValue}\n placeholder={`Filter by ${filterBy \|\| 'project'}`}\n loading={isLoadingOptions}\n onInputChange={handleInputChange}\n onChange={(_event, value): void => {\n onFilterValueChange((value as string) ?? '');\n // Clear search input when a value is selected\n setSearchInput('');\n setDebouncedSearch('');\n }}\n />\n )}\n </div>\n </div>\n\n <Box marginX={2}>\n <Divider className={classes.divider} />\n </Box>\n\n {/ Currency */}\n <div className={classes.filterSection}>\n <Box p={2}>\n <SelectComponent\n freeSolo\n selectOnFocus\n clearOnBlur\n handleHomeEndKeys\n filterSelectedOptions\n label=\"Currency\"\n options={currencyOptions.map(\n (value: CurrencyOption) => value.label,\n )}\n value={\n currencyOptions.find(\n (item: CurrencyOption) => item.value === currency,\n )?.label ?? ''\n }\n placeholder=\"Select currency\"\n onChange={(event): void => {\n const selectedLabel = event.target.value as string;\n const selectedCurrency =\n currencyOptions.find(\n (item: CurrencyOption) => item.label === selectedLabel,\n )?.value ?? '';\n onCurrencyChange(selectedCurrency);\n }}\n />\n </Box>\n </div>\n </Box>\n </Box>\n );\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"Filters.esm.js","sources":["../../../../src/pages/openshift/components/Filters.tsx"],"sourcesContent":["/\n Copyright Red Hat, Inc.\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\n\nimport {\n default as React,\n useState,\n useEffect,\n useMemo,\n useCallback,\n} from 'react';\nimport Box from '@material-ui/core/Box';\nimport Divider from '@material-ui/core/Divider';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useBaseFiltersStyles } from '../../../components/filtersStyles';\nimport { SelectComponent } from './SelectComponent';\nimport { AutocompleteComponent } from './AutocompleteComponent';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { costManagementSlimApiRef } from '../../../apis';\nimport useAsync from 'react-use/lib/useAsync';\nimport debounce from 'lodash/debounce';\nimport { useThemeBackgroundColor } from '../../../hooks/useThemeBackgroundColor';\n\nconst useFiltersStyles = makeStyles(\n theme => ({\n filters: {\n '& > ': {\n marginTop: theme.spacing(0),\n },\n },\n filterSection: {\n marginBottom: theme.spacing(0),\n },\n divider: {\n margin: theme.spacing(2, 0),\n },\n }),\n { name: 'OpenShiftFilters' },\n);\n\n/** @public /\nexport type FiltersProps = {\n groupBy: string;\n overheadDistribution: string;\n timeRange: string;\n currency: string;\n filterBy: string;\n filterOperation: string;\n filterValue: string;\n tags?: string[];\n selectedTag?: string;\n selectedTagKey?: string;\n selectedTagValue?: string;\n onGroupByChange: (value: string) => void;\n onOverheadDistributionChange: (value: string) => void;\n onTimeRangeChange: (value: string) => void;\n onCurrencyChange: (value: string) => void;\n onFilterByChange: (value: string) => void;\n onFilterOperationChange: (value: string) => void;\n onFilterValueChange: (value: string) => void;\n onSelectedTagChange: (value: string) => void;\n onSelectedTagKeyChange: (value: string) => void;\n onSelectedTagValueChange: (value: string) => void;\n};\n\nexport type CurrencyOption = {\n label: string;\n value: string;\n};\n\n/* @public /\nexport function Filters(props: FiltersProps) {\n const {\n groupBy,\n overheadDistribution,\n timeRange,\n currency,\n filterBy,\n filterOperation,\n filterValue,\n tags = [],\n selectedTag = '',\n selectedTagKey = '',\n selectedTagValue = '',\n onGroupByChange,\n onOverheadDistributionChange,\n onTimeRangeChange,\n onCurrencyChange,\n onFilterByChange,\n onFilterOperationChange,\n onFilterValueChange,\n onSelectedTagChange,\n onSelectedTagKeyChange,\n onSelectedTagValueChange,\n } = props;\n const baseClasses = useBaseFiltersStyles();\n const classes = useFiltersStyles();\n const api = useApi(costManagementSlimApiRef);\n\n const { filterTableBackgroundColor } = useThemeBackgroundColor();\n // State for search input and debounced search\n const [searchInput, setSearchInput] = useState<string>('');\n const [debouncedSearch, setDebouncedSearch] = useState<string>('');\n\n // Debounce function to update debouncedSearch after 500ms\n const debouncedSetSearch = useMemo(\n () =>\n debounce((value: string) => {\n setDebouncedSearch(value);\n }, 500),\n [],\n );\n\n // Update debounced search when searchInput changes\n useEffect(() => {\n debouncedSetSearch(searchInput);\n return () => {\n debouncedSetSearch.cancel();\n };\n }, [searchInput, debouncedSetSearch]);\n\n // Reset search when filterBy changes\n useEffect(() => {\n setSearchInput('');\n setDebouncedSearch('');\n }, [filterBy]);\n\n // Fetch resource options based on filterBy and debouncedSearch\n const { value: resourceOptions, loading: isLoadingOptions } =\n useAsync(async () => {\n // For tags, filter the tags array based on search input (for tag key selection)\n if (filterBy === 'tag') {\n if (!debouncedSearch.trim()) {\n return tags;\n }\n const searchLower = debouncedSearch.toLocaleLowerCase('en-US');\n return tags.filter(tag =>\n tag.toLocaleLowerCase('en-US').includes(searchLower),\n );\n }\n\n // Don't fetch if there's no search term\n if (!debouncedSearch.trim()) {\n return [];\n }\n\n try {\n let response;\n switch (filterBy) {\n case 'project':\n response = await api.searchOpenShiftProjects(debouncedSearch);\n break;\n case 'cluster':\n response = await api.searchOpenShiftClusters(debouncedSearch);\n break;\n case 'node':\n response = await api.searchOpenShiftNodes(debouncedSearch);\n break;\n default:\n return [];\n }\n const data = await response.json();\n // Extract the 'value' property from each object in the data array\n return (data.data \|\| []).map((item: { value: string }) => item.value);\n } catch {\n // Silently return empty array on error\n return [];\n }\n }, [filterBy, debouncedSearch, api, tags]);\n\n // Fetch tag values when a tag key is selected for filtering\n const { value: tagValuesData, loading: isLoadingTagValues } =\n useAsync(async () => {\n if (filterBy === 'tag' && selectedTagKey) {\n try {\n const timeScopeValue = timeRange === 'month-to-date' ? -1 : -2;\n const response = await api.getOpenShiftTagValues(\n selectedTagKey,\n timeScopeValue,\n );\n const data = await response.json();\n // Extract all unique values from all items in the data array\n const allValues = new Set<string>();\n for (const item of data.data \|\| []) {\n if (item.values) {\n for (const value of item.values) {\n allValues.add(value);\n }\n }\n }\n return Array.from(allValues).sort((a, b) =>\n a.localeCompare(b, 'en-US'),\n );\n } catch {\n return [];\n }\n }\n return [];\n }, [filterBy, selectedTagKey, timeRange, api]);\n\n // Generate filter value options based on API results\n // Always include the current filterValue if it's set, so it doesn't disappear\n const getFilterValueOptions = useMemo((): string[] => {\n const options = resourceOptions \|\| [];\n // If filterValue is set and not already in options, add it\n if (filterValue && !options.includes(filterValue)) {\n return [filterValue, ...options];\n }\n return options;\n }, [resourceOptions, filterValue]);\n\n // Handle input change in autocomplete\n const handleInputChange = useCallback(\n (_event: React.ChangeEvent<{}>, value: string, reason: string) => {\n // Only update search input when user is typing (not when clearing or resetting)\n if (reason === 'input') {\n setSearchInput(value);\n }\n },\n [],\n );\n\n const currencyOptions: CurrencyOption[] = [\n { label: 'AUD (A$) - Australian Dollar', value: 'AUD' },\n { label: 'BRL (R$) - Brazilian Real', value: 'BRL' },\n { label: 'CAD (CA$) - Canadian Dollar', value: 'CAD' },\n { label: 'CHF (CHF) - Swiss Franc', value: 'CHF' },\n { label: 'CNY (CN¥) - Chinese Yuan', value: 'CNY' },\n { label: 'CZK (Kč) - Czech Koruna', value: 'CZK' },\n { label: 'DKK (DKK) - Danish Krone', value: 'DKK' },\n { label: 'EUR (€) - Euro', value: 'EUR' },\n { label: 'GBP (£) - British Pound', value: 'GBP' },\n { label: 'HKD (HK$) - Hong Kong Dollar', value: 'HKD' },\n { label: 'INR (₹) - Indian Rupee', value: 'INR' },\n { label: 'JPY (¥) - Japanese Yen', value: 'JPY' },\n { label: 'NGN (₦) - Nigerian Naira', value: 'NGN' },\n { label: 'NOK (NOK) - Norwegian Krone', value: 'NOK' },\n { label: 'NZD (NZ$) - New Zealand Dollar', value: 'NZD' },\n { label: 'SEK (SEK) - Swedish Krona', value: 'SEK' },\n { label: 'SGD (SGD) - Singapore Dollar', value: 'SGD' },\n { label: 'USD ($) - United States Dollar', value: 'USD' },\n { label: 'ZAR (ZAR) - South African Rand', value: 'ZAR' },\n ];\n\n return (\n <Box className={baseClasses.root}>\n <Box className={`${baseClasses.filters} ${classes.filters}`}>\n {/ Group by /}\n <div className={classes.filterSection}>\n <Box p={1} pt={0}>\n <SelectComponent\n freeSolo\n selectOnFocus\n clearOnBlur\n handleHomeEndKeys\n filterSelectedOptions\n label=\"Group by\"\n options={['project', 'cluster', 'node', 'tag']}\n value={groupBy}\n placeholder=\"Group by\"\n onChange={(event): void =>\n onGroupByChange(event.target.value as string)\n }\n />\n {groupBy === 'tag' && (\n <Box p={0} pt={0}>\n <AutocompleteComponent\n label=\"Choose key\"\n options={tags}\n value={selectedTag}\n placeholder=\"Choose key\"\n loading={false}\n onChange={(_event, value): void => {\n onSelectedTagChange((value as string) ?? '');\n }}\n />\n </Box>\n )}\n </Box>\n </div>\n\n {/ Overhead cost /}\n <div className={classes.filterSection}>\n <Box p={1}>\n <SelectComponent\n freeSolo\n selectOnFocus\n clearOnBlur\n handleHomeEndKeys\n filterSelectedOptions\n label=\"Overhead cost\"\n options={[\n 'Distribute through cost models',\n \"Don't distribute overhead costs\",\n ]}\n value={\n overheadDistribution === 'distribute'\n ? 'Distribute through cost models'\n : \"Don't distribute overhead costs\"\n }\n placeholder=\"Overhead cost\"\n onChange={(event): void => {\n const value = event.target.value as string;\n const mappedValue =\n value === 'Distribute through cost models'\n ? 'distribute'\n : 'dont_distribute';\n onOverheadDistributionChange(mappedValue);\n }}\n />\n </Box>\n </div>\n\n {/ Time /}\n <div className={classes.filterSection}>\n <Box p={1}>\n <SelectComponent\n freeSolo\n selectOnFocus\n clearOnBlur\n handleHomeEndKeys\n filterSelectedOptions\n label=\"Time\"\n options={['Month to date', 'Previous month']}\n value={\n timeRange === 'month-to-date'\n ? 'Month to date'\n : 'Previous month'\n }\n placeholder=\"Time\"\n onChange={(event): void => {\n const value = event.target.value as string;\n const mappedValue =\n value === 'Month to date'\n ? 'month-to-date'\n : 'previous-month';\n onTimeRangeChange(mappedValue);\n }}\n />\n </Box>\n </div>\n\n <Box marginX={2}>\n <Divider className={classes.divider} />\n </Box>\n\n {/ Filter table by /}\n <div className={classes.filterSection}>\n <div\n style={{\n backgroundColor: filterTableBackgroundColor,\n padding: 16,\n borderRadius: 8,\n }}\n >\n <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>\n Filter table by\n </div>\n <SelectComponent\n freeSolo\n selectOnFocus\n clearOnBlur\n handleHomeEndKeys\n filterSelectedOptions\n label=\"\"\n options={['project', 'cluster', 'node', 'tag']}\n value={filterBy}\n placeholder=\"\"\n onChange={(event): void => {\n const newFilterBy = event.target.value as string;\n onFilterByChange(newFilterBy);\n onFilterValueChange('');\n // Clear tag-related selections when filterBy changes away from 'tag'\n if (newFilterBy !== 'tag') {\n onSelectedTagKeyChange('');\n onSelectedTagValueChange('');\n }\n }}\n />\n <SelectComponent\n freeSolo\n selectOnFocus\n clearOnBlur\n handleHomeEndKeys\n filterSelectedOptions\n label=\"\"\n options={['includes', 'excludes', 'exact']}\n value={filterOperation}\n placeholder=\"\"\n onChange={(event): void => {\n onFilterOperationChange(event.target.value as string);\n }}\n />\n\n {filterBy === 'tag' ? (\n <>\n <AutocompleteComponent\n label=\"\"\n options={getFilterValueOptions}\n value={selectedTagKey}\n placeholder=\"Select tag key\"\n loading={false}\n onInputChange={handleInputChange}\n onChange={(_event, value): void => {\n const tagKey = (value as string) ?? '';\n onSelectedTagKeyChange(tagKey);\n // Clear tag value when tag key changes\n onSelectedTagValueChange('');\n // Clear search input when a value is selected\n setSearchInput('');\n setDebouncedSearch('');\n }}\n />\n {selectedTagKey && (\n <Box style={{ marginTop: '-8px' }}>\n <AutocompleteComponent\n label=\"\"\n options={tagValuesData \|\| []}\n value={selectedTagValue}\n placeholder=\"Select tag value\"\n loading={isLoadingTagValues}\n onChange={(_event, value): void => {\n onSelectedTagValueChange((value as string) ?? '');\n }}\n />\n </Box>\n )}\n </>\n ) : (\n <AutocompleteComponent\n label=\"\"\n options={getFilterValueOptions}\n value={filterValue}\n placeholder={`Filter by ${filterBy \|\| 'project'}`}\n loading={isLoadingOptions}\n onInputChange={handleInputChange}\n onChange={(_event, value): void => {\n onFilterValueChange((value as string) ?? '');\n // Clear search input when a value is selected\n setSearchInput('');\n setDebouncedSearch('');\n }}\n />\n )}\n </div>\n </div>\n\n <Box marginX={2}>\n <Divider className={classes.divider} />\n </Box>\n\n {/ Currency */}\n <div className={classes.filterSection}>\n <Box p={2}>\n <SelectComponent\n freeSolo\n selectOnFocus\n clearOnBlur\n handleHomeEndKeys\n filterSelectedOptions\n label=\"Currency\"\n options={currencyOptions.map(\n (value: CurrencyOption) => value.label,\n )}\n value={\n currencyOptions.find(\n (item: CurrencyOption) => item.value === currency,\n )?.label ?? ''\n }\n placeholder=\"Select currency\"\n onChange={(event): void => {\n const selectedLabel = event.target.value as string;\n const selectedCurrency =\n currencyOptions.find(\n (item: CurrencyOption) => item.label === selectedLabel,\n )?.value ?? '';\n onCurrencyChange(selectedCurrency);\n }}\n />\n </Box>\n </div>\n </Box>\n </Box>\n );\n}\n"],"names":[],"mappings":"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"}

package/dist/pages/openshift/components/PageHeader.esm.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Typography from '@material-ui/core/Typography';
 import { CURRENCY_SYMBOLS } from '../../../constants/currencies.esm.js';
@@ -11,7 +11,7 @@ const formatCurrency = (value, currencyCode) => {
 };
 function PageHeader(props) {
   const { totalCost, month, endDate, currencyCode, customStyle = {} } = props;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
@@ -20,10 +20,15 @@ function PageHeader(props) {
         alignItems: "center",
         marginBottom: "24px",
         ...customStyle
-      }
-    },
-    /* @__PURE__ */ React.createElement(Typography, { variant: "h1", style: { fontWeight: "bold", margin: 0 } }, "OpenShift"),
-    /* @__PURE__ */ React.createElement("div", { style: { textAlign: "right" } }, /* @__PURE__ */ React.createElement(Typography, { variant: "h3", style: { fontWeight: "bold", margin: 0 } }, formatCurrency(totalCost, currencyCode)), /* @__PURE__ */ React.createElement(Typography, { variant: "body1", style: { color: "#666", marginTop: "4px" } }, `${month} 1-${endDate}`))
+      },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h1", style: { fontWeight: "bold", margin: 0 }, children: "OpenShift" }),
+        /* @__PURE__ */ jsxs("div", { style: { textAlign: "right" }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "h3", style: { fontWeight: "bold", margin: 0 }, children: formatCurrency(totalCost, currencyCode) }),
+          /* @__PURE__ */ jsx(Typography, { variant: "body1", style: { color: "#666", marginTop: "4px" }, children: `${month} 1-${endDate}` })
+        ] })
+      ]
+    }
   );
 }

package/dist/pages/openshift/components/PageHeader.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageHeader.esm.js","sources":["../../../../src/pages/openshift/components/PageHeader.tsx"],"sourcesContent":["/\n Copyright Red Hat, Inc.\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\n\nimport React from 'react';\nimport Typography from '@material-ui/core/Typography';\nimport { CURRENCY_SYMBOLS } from '../../../constants/currencies';\n\nconst formatCurrency = (value: number, currencyCode: string): string => {\n const symbol = CURRENCY_SYMBOLS[currencyCode] \|\| currencyCode;\n return `${symbol}${value.toLocaleString('en-US', {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n })}`;\n};\n\ntype PageHeaderProps = {\n totalCost: number;\n month: string;\n endDate: string;\n currencyCode: string;\n customStyle?: React.CSSProperties;\n};\n\n/* @public */\nexport function PageHeader(props: PageHeaderProps) {\n const { totalCost, month, endDate, currencyCode, customStyle = {} } = props;\n return (\n <div\n style={{\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n marginBottom: '24px',\n ...customStyle,\n }}\n >\n <Typography variant=\"h1\" style={{ fontWeight: 'bold', margin: 0 }}>\n OpenShift\n </Typography>\n <div style={{ textAlign: 'right' }}>\n <Typography variant=\"h3\" style={{ fontWeight: 'bold', margin: 0 }}>\n {formatCurrency(totalCost, currencyCode)}\n </Typography>\n <Typography variant=\"body1\" style={{ color: '#666', marginTop: '4px' }}>\n {`${month} 1-${endDate}`}\n </Typography>\n </div>\n </div>\n );\n}\n"],"names":[],"mappings":";;;;AAoBA,MAAM,cAAA,GAAiB,CAAC,KAAA,EAAe,YAAA,KAAiC;AACtE,EAAA,MAAM,MAAA,GAAS,gBAAA,CAAiB,YAAY,CAAA,IAAK,YAAA;AACjD,EAAA,OAAO,CAAA,EAAG,MAAM,CAAA,EAAG,KAAA,CAAM,eAAe,OAAA,EAAS;AAAA,IAC/C,qBAAA,EAAuB,CAAA;AAAA,IACvB,qBAAA,EAAuB;AAAA,GACxB,CAAC,CAAA,CAAA;AACJ,CAAA;AAWO,SAAS,WAAW,KAAA,EAAwB;AACjD,EAAA,MAAM,EAAE,WAAW,KAAA,EAAO,OAAA,EAAS,cAAc,WAAA,GAAc,IAAG,GAAI,KAAA;AACtE,EAAA,uBACE,~~KAAA,CAAA,aAAA~~;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,MAAA;AAAA,QACT,cAAA,EAAgB,eAAA;AAAA,QAChB,UAAA,EAAY,QAAA;AAAA,QACZ,YAAA,EAAc,MAAA;AAAA,QACd,GAAG;AAAA~~;AACL~~,~~KAAA~~;AAAA,~~oBAEA~~,~~KAAA~~,~~CAAA~~,~~aAAA~~,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,IAAA,EAAK,KAAA,EAAO,EAAE,~~UAAA~~,~~EAAY,~~MAAA,EAAQ,MAAA,EAAQ,CAAA,EAAE,EAAA,~~EAAG~~,~~WAEnE~~,CAAA;AAAA,~~wCACC~~,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,SAAA,EAAW,SAAQ,~~EAAA,kBAC~~/B,~~KAAA~~,~~CAAA~~,~~aAAA~~,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,~~MAAK~~,KAAA,EAAO,EAAE,~~YAAY~~,MAAA,EAAQ,MAAA,EAAQ,~~GAAE~~,~~EAAA~~,EAC7D,cAAA,CAAe,SAAA,EAAW,YAAY,~~CACzC,~~CAAA,~~kBACA~~,~~KAAA,~~CAAA,~~aAAA~~,CAAC,~~cAAW~~,OAAA,EAAQ,OAAA,EAAQ,OAAO,EAAE,KAAA,EAAO,MAAA,EAAQ,SAAA,EAAW,OAAM,EAAA,~~EAClE,~~CAAA,EAAG,KAAK,CAAA,GAAA,EAAM,OAAO,EACxB,~~CACF~~;AAAA,GACF;AAEJ;;;;"}
1	+ {"version":3,"file":"PageHeader.esm.js","sources":["../../../../src/pages/openshift/components/PageHeader.tsx"],"sourcesContent":["/\n Copyright Red Hat, Inc.\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\n\nimport { default as React } from 'react';\nimport Typography from '@material-ui/core/Typography';\nimport { CURRENCY_SYMBOLS } from '../../../constants/currencies';\n\nconst formatCurrency = (value: number, currencyCode: string): string => {\n const symbol = CURRENCY_SYMBOLS[currencyCode] \|\| currencyCode;\n return `${symbol}${value.toLocaleString('en-US', {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n })}`;\n};\n\ntype PageHeaderProps = {\n totalCost: number;\n month: string;\n endDate: string;\n currencyCode: string;\n customStyle?: React.CSSProperties;\n};\n\n/* @public */\nexport function PageHeader(props: PageHeaderProps) {\n const { totalCost, month, endDate, currencyCode, customStyle = {} } = props;\n return (\n <div\n style={{\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n marginBottom: '24px',\n ...customStyle,\n }}\n >\n <Typography variant=\"h1\" style={{ fontWeight: 'bold', margin: 0 }}>\n OpenShift\n </Typography>\n <div style={{ textAlign: 'right' }}>\n <Typography variant=\"h3\" style={{ fontWeight: 'bold', margin: 0 }}>\n {formatCurrency(totalCost, currencyCode)}\n </Typography>\n <Typography variant=\"body1\" style={{ color: '#666', marginTop: '4px' }}>\n {`${month} 1-${endDate}`}\n </Typography>\n </div>\n </div>\n );\n}\n"],"names":[],"mappings":";;;;AAoBA,MAAM,cAAA,GAAiB,CAAC,KAAA,EAAe,YAAA,KAAiC;AACtE,EAAA,MAAM,MAAA,GAAS,gBAAA,CAAiB,YAAY,CAAA,IAAK,YAAA;AACjD,EAAA,OAAO,CAAA,EAAG,MAAM,CAAA,EAAG,KAAA,CAAM,eAAe,OAAA,EAAS;AAAA,IAC/C,qBAAA,EAAuB,CAAA;AAAA,IACvB,qBAAA,EAAuB;AAAA,GACxB,CAAC,CAAA,CAAA;AACJ,CAAA;AAWO,SAAS,WAAW,KAAA,EAAwB;AACjD,EAAA,MAAM,EAAE,WAAW,KAAA,EAAO,OAAA,EAAS,cAAc,WAAA,GAAc,IAAG,GAAI,KAAA;AACtE,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,MAAA;AAAA,QACT,cAAA,EAAgB,eAAA;AAAA,QAChB,UAAA,EAAY,QAAA;AAAA,QACZ,YAAA,EAAc,MAAA;AAAA,QACd,GAAG;AAAA,OACL;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,IAAA,EAAK,KAAA,EAAO,EAAE,YAAY,MAAA,EAAQ,MAAA,EAAQ,CAAA,EAAE,EAAG,QAAA,EAAA,WAAA,EAEnE,CAAA;AAAA,6BACC,KAAA,EAAA,EAAI,KAAA,EAAO,EAAE,SAAA,EAAW,SAAQ,EAC/B,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,IAAA,EAAK,KAAA,EAAO,EAAE,UAAA,EAAY,MAAA,EAAQ,MAAA,EAAQ,CAAA,EAAE,EAC7D,QAAA,EAAA,cAAA,CAAe,SAAA,EAAW,YAAY,CAAA,EACzC,CAAA;AAAA,0BACA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ,OAAO,EAAE,KAAA,EAAO,MAAA,EAAQ,SAAA,EAAW,OAAM,EAClE,QAAA,EAAA,CAAA,EAAG,KAAK,CAAA,GAAA,EAAM,OAAO,CAAA,CAAA,EACxB;AAAA,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}