@red-hat-developer-hub/plugin-cost-management 2.0.3-rc.4

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import { CURRENCY_SYMBOLS } from '../../../constants/currencies.esm.js';
+
+const formatCurrency = (value, currencyCode) => {
+  const symbol = CURRENCY_SYMBOLS[currencyCode] || currencyCode;
+  return `${symbol}${value.toLocaleString("en-US", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })}`;
+};
+function PageHeader(props) {
+  const { totalCost, month, endDate, currencyCode, customStyle = {} } = props;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        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}`))
+  );
+}
+
+export { PageHeader };
+//# sourceMappingURL=PageHeader.esm.js.map

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

@@ -0,0 +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,YAAiC,KAAA;AACtE,EAAM,MAAA,MAAA,GAAS,gBAAiB,CAAA,YAAY,CAAK,IAAA,YAAA;AACjD,EAAA,OAAO,CAAG,EAAA,MAAM,CAAG,EAAA,KAAA,CAAM,eAAe,OAAS,EAAA;AAAA,IAC/C,qBAAuB,EAAA,CAAA;AAAA,IACvB,qBAAuB,EAAA;AAAA,GACxB,CAAC,CAAA,CAAA;AACJ,CAAA;AAWO,SAAS,WAAW,KAAwB,EAAA;AACjD,EAAM,MAAA,EAAE,WAAW,KAAO,EAAA,OAAA,EAAS,cAAc,WAAc,GAAA,IAAO,GAAA,KAAA;AACtE,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,OAAS,EAAA,MAAA;AAAA,QACT,cAAgB,EAAA,eAAA;AAAA,QAChB,UAAY,EAAA,QAAA;AAAA,QACZ,YAAc,EAAA,MAAA;AAAA,QACd,GAAG;AAAA;AACL,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,IAAK,EAAA,KAAA,EAAO,EAAE,UAAA,EAAY,MAAQ,EAAA,MAAA,EAAQ,CAAE,EAAA,EAAA,EAAG,WAEnE,CAAA;AAAA,wCACC,KAAI,EAAA,EAAA,KAAA,EAAO,EAAE,SAAA,EAAW,SACvB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,MAAK,KAAO,EAAA,EAAE,YAAY,MAAQ,EAAA,MAAA,EAAQ,GAC3D,EAAA,EAAA,cAAA,CAAe,SAAW,EAAA,YAAY,CACzC,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,OAAQ,EAAA,OAAA,EAAQ,OAAO,EAAE,KAAA,EAAO,MAAQ,EAAA,SAAA,EAAW,OAC5D,EAAA,EAAA,CAAA,EAAG,KAAK,CAAM,GAAA,EAAA,OAAO,EACxB,CACF;AAAA,GACF;AAEJ;;;;"}

package/dist/pages/openshift/components/SelectComponent.esm.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { useThemeBackgroundColor } from '../../../hooks/useThemeBackgroundColor.esm.js';
+
+const useSelectStyles = makeStyles(
+  {
+    root: { paddingTop: 0, paddingBottom: 0 },
+    label: { textTransform: "none", fontWeight: "bold" },
+    formControl: {
+      width: "100%",
+      marginTop: 5,
+      backgroundColor: "transparent"
+    }
+  },
+  {
+    name: "Select"
+  }
+);
+function SelectComponent(props) {
+  const classes = useSelectStyles();
+  const { backgroundColor } = useThemeBackgroundColor();
+  const {
+    label,
+    options,
+    value,
+    onChange,
+    multiple = false,
+    placeholder
+  } = props;
+  return /* @__PURE__ */ React.createElement(Box, { className: classes.root, pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { className: classes.label, variant: "button", component: "label" }, label), /* @__PURE__ */ React.createElement(
+    FormControl,
+    {
+      className: classes.formControl,
+      variant: "outlined",
+      hiddenLabel: true,
+      style: { backgroundColor }
+    },
+    /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        displayEmpty: true,
+        value: value || "",
+        onChange,
+        multiple,
+        IconComponent: ExpandMoreIcon,
+        renderValue: (selected) => {
+          if (!selected || Array.isArray(selected) && selected.length === 0) {
+            return /* @__PURE__ */ React.createElement(Typography, { style: { color: "#999" } }, placeholder || "Select an option");
+          }
+          if (Array.isArray(selected)) {
+            return selected.join(", ");
+          }
+          return selected;
+        }
+      },
+      options.map((option) => /* @__PURE__ */ React.createElement(MenuItem, { key: option, value: option }, option))
+    )
+  ));
+}
+
+export { SelectComponent };
+//# sourceMappingURL=SelectComponent.esm.js.map

package/dist/pages/openshift/components/SelectComponent.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectComponent.esm.js","sources":["../../../../src/pages/openshift/components/SelectComponent.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 { makeStyles } from '@material-ui/core/styles';\nimport Box from '@material-ui/core/Box';\nimport Typography from '@material-ui/core/Typography';\nimport FormControl from '@material-ui/core/FormControl';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport { useThemeBackgroundColor } from '../../../hooks/useThemeBackgroundColor';\n\nconst useSelectStyles = makeStyles(\n  {\n    root: { paddingTop: 0, paddingBottom: 0 },\n    label: { textTransform: 'none', fontWeight: 'bold' },\n    formControl: {\n      width: '100%',\n      marginTop: 5,\n      backgroundColor: 'transparent',\n    },\n  },\n  {\n    name: 'Select',\n  },\n);\n\ntype SelectProps = {\n  label: string;\n  options: string[];\n  value?: string;\n  onChange?: (event: React.ChangeEvent<{ value: unknown }>) => void;\n  multiple?: boolean;\n  freeSolo?: boolean;\n  selectOnFocus?: boolean;\n  clearOnBlur?: boolean;\n  handleHomeEndKeys?: boolean;\n  filterSelectedOptions?: boolean;\n  placeholder?: string;\n};\n\n/** @public */\nexport function SelectComponent(props: SelectProps) {\n  const classes = useSelectStyles();\n  const { backgroundColor } = useThemeBackgroundColor();\n  const {\n    label,\n    options,\n    value,\n    onChange,\n    multiple = false,\n    placeholder,\n  } = props;\n\n  return (\n    <Box className={classes.root} pb={1} pt={1}>\n      <Typography className={classes.label} variant=\"button\" component=\"label\">\n        {label}\n      </Typography>\n      <FormControl\n        className={classes.formControl}\n        variant=\"outlined\"\n        hiddenLabel\n        style={{ backgroundColor }}\n      >\n        <Select\n          displayEmpty\n          value={value || ''}\n          onChange={onChange}\n          multiple={multiple}\n          IconComponent={ExpandMoreIcon}\n          renderValue={(selected): React.ReactNode => {\n            if (\n              !selected ||\n              (Array.isArray(selected) && selected.length === 0)\n            ) {\n              return (\n                <Typography style={{ color: '#999' }}>\n                  {placeholder || 'Select an option'}\n                </Typography>\n              );\n            }\n            if (Array.isArray(selected)) {\n              return selected.join(', ');\n            }\n            return selected as React.ReactNode;\n          }}\n        >\n          {options.map(option => (\n            <MenuItem key={option} value={option}>\n              {option}\n            </MenuItem>\n          ))}\n        </Select>\n      </FormControl>\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AA0BA,MAAM,eAAkB,GAAA,UAAA;AAAA,EACtB;AAAA,IACE,IAAM,EAAA,EAAE,UAAY,EAAA,CAAA,EAAG,eAAe,CAAE,EAAA;AAAA,IACxC,KAAO,EAAA,EAAE,aAAe,EAAA,MAAA,EAAQ,YAAY,MAAO,EAAA;AAAA,IACnD,WAAa,EAAA;AAAA,MACX,KAAO,EAAA,MAAA;AAAA,MACP,SAAW,EAAA,CAAA;AAAA,MACX,eAAiB,EAAA;AAAA;AACnB,GACF;AAAA,EACA;AAAA,IACE,IAAM,EAAA;AAAA;AAEV,CAAA;AAiBO,SAAS,gBAAgB,KAAoB,EAAA;AAClD,EAAA,MAAM,UAAU,eAAgB,EAAA;AAChC,EAAM,MAAA,EAAE,eAAgB,EAAA,GAAI,uBAAwB,EAAA;AACpD,EAAM,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,2CACG,GAAI,EAAA,EAAA,SAAA,EAAW,QAAQ,IAAM,EAAA,EAAA,EAAI,GAAG,EAAI,EAAA,CAAA,EAAA,sCACtC,UAAW,EAAA,EAAA,SAAA,EAAW,QAAQ,KAAO,EAAA,OAAA,EAAQ,UAAS,SAAU,EAAA,OAAA,EAAA,EAC9D,KACH,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,WAAA;AAAA,MACnB,OAAQ,EAAA,UAAA;AAAA,MACR,WAAW,EAAA,IAAA;AAAA,MACX,KAAA,EAAO,EAAE,eAAgB;AAAA,KAAA;AAAA,oBAEzB,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,IAAA;AAAA,QACZ,OAAO,KAAS,IAAA,EAAA;AAAA,QAChB,QAAA;AAAA,QACA,QAAA;AAAA,QACA,aAAe,EAAA,cAAA;AAAA,QACf,WAAA,EAAa,CAAC,QAA8B,KAAA;AAC1C,UACE,IAAA,CAAC,YACA,KAAM,CAAA,OAAA,CAAQ,QAAQ,CAAK,IAAA,QAAA,CAAS,WAAW,CAChD,EAAA;AACA,YACE,uBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,KAAO,EAAA,EAAE,OAAO,MAAO,EAAA,EAAA,EAChC,eAAe,kBAClB,CAAA;AAAA;AAGJ,UAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,QAAQ,CAAG,EAAA;AAC3B,YAAO,OAAA,QAAA,CAAS,KAAK,IAAI,CAAA;AAAA;AAE3B,UAAO,OAAA,QAAA;AAAA;AACT,OAAA;AAAA,MAEC,OAAA,CAAQ,GAAI,CAAA,CAAA,MAAA,qBACV,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,KAAK,MAAQ,EAAA,KAAA,EAAO,MAC3B,EAAA,EAAA,MACH,CACD;AAAA;AACH,GAEJ,CAAA;AAEJ;;;;"}

package/dist/pages/openshift/components/TableToolbar.esm.js

@@ -0,0 +1,249 @@
+import React, { useState } from 'react';
+import { Switch, IconButton, Menu, Box, MenuItem, FormControlLabel, Checkbox } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import ViewWeekIcon from '@material-ui/icons/ViewWeek';
+import { DownloadIconButton } from './DownloadIconButton.esm.js';
+
+const useStyles = makeStyles({
+  switchOff: {
+    "& .MuiSwitch-thumb": {
+      backgroundColor: "#6A6E73"
+    },
+    "& .MuiSwitch-track": {
+      backgroundColor: "#6A6E73"
+    }
+  },
+  menuItem: {
+    padding: "12px 16px",
+    "&:hover": {
+      backgroundColor: "transparent"
+    }
+  },
+  menuItemLabel: {
+    marginLeft: 0,
+    marginRight: 0,
+    width: "100%"
+  },
+  menuItemDescription: {
+    fontSize: "0.75rem",
+    color: "#6A6E73",
+    marginTop: "4px",
+    marginLeft: "32px"
+  }
+});
+function TableToolbar(props) {
+  const {
+    showPlatformSum,
+    setShowPlatformSum,
+    projectsCount,
+    groupBy,
+    showMonthOverMonthChange,
+    setShowMonthOverMonthChange,
+    showInfrastructureCost,
+    setShowInfrastructureCost,
+    showSupplementaryCost,
+    setShowSupplementaryCost,
+    onDownloadCsv,
+    onDownloadJson,
+    isDownloading
+  } = props;
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const handleMenuOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+  const getTableTitle = (groupByValue) => {
+    const titleMap = {
+      project: "Projects",
+      cluster: "Clusters",
+      node: "Nodes",
+      tag: "Tags"
+    };
+    return titleMap[groupByValue] || "Projects";
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "16px",
+          marginBottom: 48
+        }
+      },
+      /* @__PURE__ */ React.createElement(Typography, { variant: "h2", style: { fontWeight: "bold" } }, getTableTitle(groupBy), " (", projectsCount, ")"),
+      groupBy === "project" && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          Switch,
+          {
+            checked: showPlatformSum,
+            onChange: (e) => setShowPlatformSum(e.target.checked),
+            className: classes.switchOff
+          }
+        ),
+        /* @__PURE__ */ React.createElement(Typography, { variant: "body2", style: { color: "#6A6E73" } }, "Sum platform costs")
+      ),
+      /* @__PURE__ */ React.createElement(
+        DownloadIconButton,
+        {
+          label: "CSV",
+          variant: "gray",
+          onClick: onDownloadCsv,
+          disabled: isDownloading
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        DownloadIconButton,
+        {
+          label: "JSON",
+          variant: "gray",
+          onClick: onDownloadJson,
+          disabled: isDownloading
+        }
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        "aria-label": "menu",
+        style: { color: "#6A6E73", padding: "8px" },
+        onClick: handleMenuOpen
+      },
+      /* @__PURE__ */ React.createElement(ViewWeekIcon, null)
+    ),
+    /* @__PURE__ */ React.createElement(
+      Menu,
+      {
+        anchorEl,
+        open: Boolean(anchorEl),
+        onClose: handleMenuClose,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        },
+        PaperProps: {
+          style: {
+            minWidth: "300px",
+            padding: "8px 0"
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement(Box, { px: 2, py: 1 }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", style: { fontWeight: "bold" } }, "Add or remove columns")),
+      /* @__PURE__ */ React.createElement(
+        MenuItem,
+        {
+          className: classes.menuItem,
+          onClick: (e) => {
+            e.stopPropagation();
+            setShowMonthOverMonthChange(!showMonthOverMonthChange);
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          FormControlLabel,
+          {
+            className: classes.menuItemLabel,
+            control: /* @__PURE__ */ React.createElement(
+              Checkbox,
+              {
+                checked: showMonthOverMonthChange,
+                onChange: (e) => {
+                  e.stopPropagation();
+                  setShowMonthOverMonthChange(e.target.checked);
+                },
+                onClick: (e) => e.stopPropagation()
+              }
+            ),
+            label: "Month over month change",
+            onClick: (e) => e.stopPropagation()
+          }
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        MenuItem,
+        {
+          className: classes.menuItem,
+          onClick: (e) => {
+            e.stopPropagation();
+            setShowInfrastructureCost(!showInfrastructureCost);
+          }
+        },
+        /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
+          FormControlLabel,
+          {
+            className: classes.menuItemLabel,
+            control: /* @__PURE__ */ React.createElement(
+              Checkbox,
+              {
+                checked: showInfrastructureCost,
+                onChange: (e) => {
+                  e.stopPropagation();
+                  setShowInfrastructureCost(e.target.checked);
+                },
+                onClick: (e) => e.stopPropagation()
+              }
+            ),
+            label: "Infrastructure cost",
+            onClick: (e) => e.stopPropagation()
+          }
+        ), /* @__PURE__ */ React.createElement(Typography, { className: classes.menuItemDescription }, "The cost based on raw usage data from the underlying infrastructure."))
+      ),
+      /* @__PURE__ */ React.createElement(
+        MenuItem,
+        {
+          className: classes.menuItem,
+          onClick: (e) => {
+            e.stopPropagation();
+            setShowSupplementaryCost(!showSupplementaryCost);
+          }
+        },
+        /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
+          FormControlLabel,
+          {
+            className: classes.menuItemLabel,
+            control: /* @__PURE__ */ React.createElement(
+              Checkbox,
+              {
+                checked: showSupplementaryCost,
+                onChange: (e) => {
+                  e.stopPropagation();
+                  setShowSupplementaryCost(e.target.checked);
+                },
+                onClick: (e) => e.stopPropagation()
+              }
+            ),
+            label: "Supplementary cost",
+            onClick: (e) => e.stopPropagation()
+          }
+        ), /* @__PURE__ */ React.createElement(Typography, { className: classes.menuItemDescription }, "All costs not directly attributed to the infrastructure.", /* @__PURE__ */ React.createElement("br", null), "These costs are determined by applying a price list within a cost model to OpenShift cluster metrics."))
+      )
+    )
+  );
+}
+
+export { TableToolbar };
+//# sourceMappingURL=TableToolbar.esm.js.map

package/dist/pages/openshift/components/TableToolbar.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableToolbar.esm.js","sources":["../../../../src/pages/openshift/components/TableToolbar.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 } from 'react';\nimport {\n  Switch,\n  IconButton,\n  Menu,\n  MenuItem,\n  Checkbox,\n  FormControlLabel,\n  Box,\n} from '@material-ui/core';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ViewWeekIcon from '@material-ui/icons/ViewWeek';\nimport { DownloadIconButton } from './DownloadIconButton';\n\nconst useStyles = makeStyles({\n  switchOff: {\n    '& .MuiSwitch-thumb': {\n      backgroundColor: '#6A6E73',\n    },\n    '& .MuiSwitch-track': {\n      backgroundColor: '#6A6E73',\n    },\n  },\n  menuItem: {\n    padding: '12px 16px',\n    '&:hover': {\n      backgroundColor: 'transparent',\n    },\n  },\n  menuItemLabel: {\n    marginLeft: 0,\n    marginRight: 0,\n    width: '100%',\n  },\n  menuItemDescription: {\n    fontSize: '0.75rem',\n    color: '#6A6E73',\n    marginTop: '4px',\n    marginLeft: '32px',\n  },\n});\n\ntype TableToolbarProps = {\n  showPlatformSum: boolean;\n  setShowPlatformSum: (showPlatformSum: boolean) => void;\n  projectsCount: number;\n  groupBy: string;\n  showMonthOverMonthChange: boolean;\n  setShowMonthOverMonthChange: (show: boolean) => void;\n  showInfrastructureCost: boolean;\n  setShowInfrastructureCost: (show: boolean) => void;\n  showSupplementaryCost: boolean;\n  setShowSupplementaryCost: (show: boolean) => void;\n  onDownloadCsv?: () => void;\n  onDownloadJson?: () => void;\n  isDownloading?: boolean;\n};\n\n/** @public */\nexport function TableToolbar(props: TableToolbarProps) {\n  const {\n    showPlatformSum,\n    setShowPlatformSum,\n    projectsCount,\n    groupBy,\n    showMonthOverMonthChange,\n    setShowMonthOverMonthChange,\n    showInfrastructureCost,\n    setShowInfrastructureCost,\n    showSupplementaryCost,\n    setShowSupplementaryCost,\n    onDownloadCsv,\n    onDownloadJson,\n    isDownloading,\n  } = props;\n  const classes = useStyles();\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleMenuClose = () => {\n    setAnchorEl(null);\n  };\n\n  const getTableTitle = (groupByValue: string): string => {\n    const titleMap: Record<string, string> = {\n      project: 'Projects',\n      cluster: 'Clusters',\n      node: 'Nodes',\n      tag: 'Tags',\n    };\n    return titleMap[groupByValue] || 'Projects';\n  };\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n      }}\n    >\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          gap: '16px',\n          marginBottom: 48,\n        }}\n      >\n        <Typography variant=\"h2\" style={{ fontWeight: 'bold' }}>\n          {getTableTitle(groupBy)} ({projectsCount})\n        </Typography>\n\n        {groupBy === 'project' && (\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: '8px',\n            }}\n          >\n            <Switch\n              checked={showPlatformSum}\n              onChange={e => setShowPlatformSum(e.target.checked)}\n              className={classes.switchOff}\n            />\n            <Typography variant=\"body2\" style={{ color: '#6A6E73' }}>\n              Sum platform costs\n            </Typography>\n          </div>\n        )}\n\n        <DownloadIconButton\n          label=\"CSV\"\n          variant=\"gray\"\n          onClick={onDownloadCsv}\n          disabled={isDownloading}\n        />\n        <DownloadIconButton\n          label=\"JSON\"\n          variant=\"gray\"\n          onClick={onDownloadJson}\n          disabled={isDownloading}\n        />\n      </div>\n      <IconButton\n        aria-label=\"menu\"\n        style={{ color: '#6A6E73', padding: '8px' }}\n        onClick={handleMenuOpen}\n      >\n        <ViewWeekIcon />\n      </IconButton>\n      <Menu\n        anchorEl={anchorEl}\n        open={Boolean(anchorEl)}\n        onClose={handleMenuClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'right',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n        PaperProps={{\n          style: {\n            minWidth: '300px',\n            padding: '8px 0',\n          },\n        }}\n      >\n        <Box px={2} py={1}>\n          <Typography variant=\"subtitle2\" style={{ fontWeight: 'bold' }}>\n            Add or remove columns\n          </Typography>\n        </Box>\n        <MenuItem\n          className={classes.menuItem}\n          onClick={e => {\n            e.stopPropagation();\n            setShowMonthOverMonthChange(!showMonthOverMonthChange);\n          }}\n        >\n          <FormControlLabel\n            className={classes.menuItemLabel}\n            control={\n              <Checkbox\n                checked={showMonthOverMonthChange}\n                onChange={e => {\n                  e.stopPropagation();\n                  setShowMonthOverMonthChange(e.target.checked);\n                }}\n                onClick={e => e.stopPropagation()}\n              />\n            }\n            label=\"Month over month change\"\n            onClick={e => e.stopPropagation()}\n          />\n        </MenuItem>\n        <MenuItem\n          className={classes.menuItem}\n          onClick={e => {\n            e.stopPropagation();\n            setShowInfrastructureCost(!showInfrastructureCost);\n          }}\n        >\n          <Box>\n            <FormControlLabel\n              className={classes.menuItemLabel}\n              control={\n                <Checkbox\n                  checked={showInfrastructureCost}\n                  onChange={e => {\n                    e.stopPropagation();\n                    setShowInfrastructureCost(e.target.checked);\n                  }}\n                  onClick={e => e.stopPropagation()}\n                />\n              }\n              label=\"Infrastructure cost\"\n              onClick={e => e.stopPropagation()}\n            />\n            <Typography className={classes.menuItemDescription}>\n              The cost based on raw usage data from the underlying\n              infrastructure.\n            </Typography>\n          </Box>\n        </MenuItem>\n        <MenuItem\n          className={classes.menuItem}\n          onClick={e => {\n            e.stopPropagation();\n            setShowSupplementaryCost(!showSupplementaryCost);\n          }}\n        >\n          <Box>\n            <FormControlLabel\n              className={classes.menuItemLabel}\n              control={\n                <Checkbox\n                  checked={showSupplementaryCost}\n                  onChange={e => {\n                    e.stopPropagation();\n                    setShowSupplementaryCost(e.target.checked);\n                  }}\n                  onClick={e => e.stopPropagation()}\n                />\n              }\n              label=\"Supplementary cost\"\n              onClick={e => e.stopPropagation()}\n            />\n            <Typography className={classes.menuItemDescription}>\n              All costs not directly attributed to the infrastructure.\n              <br />\n              These costs are determined by applying a price list within a cost\n              model to OpenShift cluster metrics.\n            </Typography>\n          </Box>\n        </MenuItem>\n      </Menu>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}