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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { makeStyles } from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';
 import Typography from '@material-ui/core/Typography';
@@ -33,35 +33,38 @@ function SelectComponent(props) {
     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,
+  return /* @__PURE__ */ jsxs(Box, { className: classes.root, pb: 1, pt: 1, children: [
+    /* @__PURE__ */ jsx(Typography, { className: classes.label, variant: "button", component: "label", children: label }),
+    /* @__PURE__ */ jsx(
+      FormControl,
       {
-        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");
+        className: classes.formControl,
+        variant: "outlined",
+        hiddenLabel: true,
+        style: { backgroundColor },
+        children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            displayEmpty: true,
+            value: value || "",
+            onChange,
+            multiple,
+            IconComponent: ExpandMoreIcon,
+            renderValue: (selected) => {
+              if (!selected || Array.isArray(selected) && selected.length === 0) {
+                return /* @__PURE__ */ jsx(Typography, { style: { color: "#999" }, children: placeholder || "Select an option" });
+              }
+              if (Array.isArray(selected)) {
+                return selected.join(", ");
+              }
+              return selected;
+            },
+            children: options.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option, children: option }, option))
           }
-          if (Array.isArray(selected)) {
-            return selected.join(", ");
-          }
-          return selected;
-        }
-      },
-      options.map((option) => /* @__PURE__ */ React.createElement(MenuItem, { key: option, value: option }, option))
+        )
+      }
     )
-  ));
+  ] });
 }
 
 export { SelectComponent };

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

@@ -1 +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,eAAA,GAAkB,UAAA;AAAA,EACtB;AAAA,IACE,IAAA,EAAM,EAAE,UAAA,EAAY,CAAA,EAAG,eAAe,CAAA,EAAE;AAAA,IACxC,KAAA,EAAO,EAAE,aAAA,EAAe,MAAA,EAAQ,YAAY,MAAA,EAAO;AAAA,IACnD,WAAA,EAAa;AAAA,MACX,KAAA,EAAO,MAAA;AAAA,MACP,SAAA,EAAW,CAAA;AAAA,MACX,eAAA,EAAiB;AAAA;AACnB,GACF;AAAA,EACA;AAAA,IACE,IAAA,EAAM;AAAA;AAEV,CAAA;AAiBO,SAAS,gBAAgB,KAAA,EAAoB;AAClD,EAAA,MAAM,UAAU,eAAA,EAAgB;AAChC,EAAA,MAAM,EAAE,eAAA,EAAgB,GAAI,uBAAA,EAAwB;AACpD,EAAA,MAAM;AAAA,IACJ,KAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,2CACG,GAAA,EAAA,EAAI,SAAA,EAAW,QAAQ,IAAA,EAAM,EAAA,EAAI,GAAG,EAAA,EAAI,CAAA,EAAA,sCACtC,UAAA,EAAA,EAAW,SAAA,EAAW,QAAQ,KAAA,EAAO,OAAA,EAAQ,UAAS,SAAA,EAAU,OAAA,EAAA,EAC9D,KACH,CAAA,kBACA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAA,CAAQ,WAAA;AAAA,MACnB,OAAA,EAAQ,UAAA;AAAA,MACR,WAAA,EAAW,IAAA;AAAA,MACX,KAAA,EAAO,EAAE,eAAA;AAAgB,KAAA;AAAA,oBAEzB,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,IAAA;AAAA,QACZ,OAAO,KAAA,IAAS,EAAA;AAAA,QAChB,QAAA;AAAA,QACA,QAAA;AAAA,QACA,aAAA,EAAe,cAAA;AAAA,QACf,WAAA,EAAa,CAAC,QAAA,KAA8B;AAC1C,UAAA,IACE,CAAC,YACA,KAAA,CAAM,OAAA,CAAQ,QAAQ,CAAA,IAAK,QAAA,CAAS,WAAW,CAAA,EAChD;AACA,YAAA,uBACE,KAAA,CAAA,aAAA,CAAC,cAAW,KAAA,EAAO,EAAE,OAAO,MAAA,EAAO,EAAA,EAChC,eAAe,kBAClB,CAAA;AAAA,UAEJ;AACA,UAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,QAAQ,CAAA,EAAG;AAC3B,YAAA,OAAO,QAAA,CAAS,KAAK,IAAI,CAAA;AAAA,UAC3B;AACA,UAAA,OAAO,QAAA;AAAA,QACT;AAAA,OAAA;AAAA,MAEC,OAAA,CAAQ,GAAA,CAAI,CAAA,MAAA,qBACX,KAAA,CAAA,aAAA,CAAC,QAAA,EAAA,EAAS,KAAK,MAAA,EAAQ,KAAA,EAAO,MAAA,EAAA,EAC3B,MACH,CACD;AAAA;AACH,GAEJ,CAAA;AAEJ;;;;"}
+{"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 { default as 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,eAAA,GAAkB,UAAA;AAAA,EACtB;AAAA,IACE,IAAA,EAAM,EAAE,UAAA,EAAY,CAAA,EAAG,eAAe,CAAA,EAAE;AAAA,IACxC,KAAA,EAAO,EAAE,aAAA,EAAe,MAAA,EAAQ,YAAY,MAAA,EAAO;AAAA,IACnD,WAAA,EAAa;AAAA,MACX,KAAA,EAAO,MAAA;AAAA,MACP,SAAA,EAAW,CAAA;AAAA,MACX,eAAA,EAAiB;AAAA;AACnB,GACF;AAAA,EACA;AAAA,IACE,IAAA,EAAM;AAAA;AAEV,CAAA;AAiBO,SAAS,gBAAgB,KAAA,EAAoB;AAClD,EAAA,MAAM,UAAU,eAAA,EAAgB;AAChC,EAAA,MAAM,EAAE,eAAA,EAAgB,GAAI,uBAAA,EAAwB;AACpD,EAAA,MAAM;AAAA,IACJ,KAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,uBACE,IAAA,CAAC,OAAI,SAAA,EAAW,OAAA,CAAQ,MAAM,EAAA,EAAI,CAAA,EAAG,IAAI,CAAA,EACvC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,WAAW,OAAA,CAAQ,KAAA,EAAO,SAAQ,QAAA,EAAS,SAAA,EAAU,SAC9D,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,WAAA;AAAA,QACnB,OAAA,EAAQ,UAAA;AAAA,QACR,WAAA,EAAW,IAAA;AAAA,QACX,KAAA,EAAO,EAAE,eAAA,EAAgB;AAAA,QAEzB,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,YAAA,EAAY,IAAA;AAAA,YACZ,OAAO,KAAA,IAAS,EAAA;AAAA,YAChB,QAAA;AAAA,YACA,QAAA;AAAA,YACA,aAAA,EAAe,cAAA;AAAA,YACf,WAAA,EAAa,CAAC,QAAA,KAA8B;AAC1C,cAAA,IACE,CAAC,YACA,KAAA,CAAM,OAAA,CAAQ,QAAQ,CAAA,IAAK,QAAA,CAAS,WAAW,CAAA,EAChD;AACA,gBAAA,uBACE,GAAA,CAAC,cAAW,KAAA,EAAO,EAAE,OAAO,MAAA,EAAO,EAChC,yBAAe,kBAAA,EAClB,CAAA;AAAA,cAEJ;AACA,cAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,QAAQ,CAAA,EAAG;AAC3B,gBAAA,OAAO,QAAA,CAAS,KAAK,IAAI,CAAA;AAAA,cAC3B;AACA,cAAA,OAAO,QAAA;AAAA,YACT,CAAA;AAAA,YAEC,QAAA,EAAA,OAAA,CAAQ,IAAI,CAAA,MAAA,qBACX,GAAA,CAAC,YAAsB,KAAA,EAAO,MAAA,EAC3B,QAAA,EAAA,MAAA,EAAA,EADY,MAEf,CACD;AAAA;AAAA;AACH;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { 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';
@@ -65,183 +66,206 @@ function TableToolbar(props) {
     };
     return titleMap[groupByValue] || "Projects";
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "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,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            checked: showPlatformSum,
-            onChange: (e) => setShowPlatformSum(e.target.checked),
-            className: classes.switchOff
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "16px",
+              marginBottom: 48
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Typography, { variant: "h2", style: { fontWeight: "bold" }, children: [
+                getTableTitle(groupBy),
+                " (",
+                projectsCount,
+                ")"
+              ] }),
+              groupBy === "project" && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Switch,
+                      {
+                        checked: showPlatformSum,
+                        onChange: (e) => setShowPlatformSum(e.target.checked),
+                        className: classes.switchOff
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { color: "#6A6E73" }, children: "Sum platform costs" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                DownloadIconButton,
+                {
+                  label: "CSV",
+                  variant: "gray",
+                  onClick: onDownloadCsv,
+                  disabled: isDownloading
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                DownloadIconButton,
+                {
+                  label: "JSON",
+                  variant: "gray",
+                  onClick: onDownloadJson,
+                  disabled: isDownloading
+                }
+              )
+            ]
           }
         ),
-        /* @__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,
+        /* @__PURE__ */ jsx(
+          IconButton,
           {
-            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()
+            "aria-label": "menu",
+            style: { color: "#6A6E73", padding: "8px" },
+            onClick: handleMenuOpen,
+            children: /* @__PURE__ */ jsx(ViewWeekIcon, {})
           }
-        ), /* @__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,
+        ),
+        /* @__PURE__ */ jsxs(
+          Menu,
           {
-            className: classes.menuItemLabel,
-            control: /* @__PURE__ */ React.createElement(
-              Checkbox,
-              {
-                checked: showSupplementaryCost,
-                onChange: (e) => {
-                  e.stopPropagation();
-                  setShowSupplementaryCost(e.target.checked);
-                },
-                onClick: (e) => e.stopPropagation()
+            anchorEl,
+            open: Boolean(anchorEl),
+            onClose: handleMenuClose,
+            anchorOrigin: {
+              vertical: "bottom",
+              horizontal: "right"
+            },
+            transformOrigin: {
+              vertical: "top",
+              horizontal: "right"
+            },
+            PaperProps: {
+              style: {
+                minWidth: "300px",
+                padding: "8px 0"
               }
-            ),
-            label: "Supplementary cost",
-            onClick: (e) => e.stopPropagation()
+            },
+            children: [
+              /* @__PURE__ */ jsx(Box, { px: 2, py: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", style: { fontWeight: "bold" }, children: "Add or remove columns" }) }),
+              /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  className: classes.menuItem,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setShowMonthOverMonthChange(!showMonthOverMonthChange);
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    FormControlLabel,
+                    {
+                      className: classes.menuItemLabel,
+                      control: /* @__PURE__ */ jsx(
+                        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__ */ jsx(
+                MenuItem,
+                {
+                  className: classes.menuItem,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setShowInfrastructureCost(!showInfrastructureCost);
+                  },
+                  children: /* @__PURE__ */ jsxs(Box, { children: [
+                    /* @__PURE__ */ jsx(
+                      FormControlLabel,
+                      {
+                        className: classes.menuItemLabel,
+                        control: /* @__PURE__ */ jsx(
+                          Checkbox,
+                          {
+                            checked: showInfrastructureCost,
+                            onChange: (e) => {
+                              e.stopPropagation();
+                              setShowInfrastructureCost(e.target.checked);
+                            },
+                            onClick: (e) => e.stopPropagation()
+                          }
+                        ),
+                        label: "Infrastructure cost",
+                        onClick: (e) => e.stopPropagation()
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Typography, { className: classes.menuItemDescription, children: "The cost based on raw usage data from the underlying infrastructure." })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  className: classes.menuItem,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setShowSupplementaryCost(!showSupplementaryCost);
+                  },
+                  children: /* @__PURE__ */ jsxs(Box, { children: [
+                    /* @__PURE__ */ jsx(
+                      FormControlLabel,
+                      {
+                        className: classes.menuItemLabel,
+                        control: /* @__PURE__ */ jsx(
+                          Checkbox,
+                          {
+                            checked: showSupplementaryCost,
+                            onChange: (e) => {
+                              e.stopPropagation();
+                              setShowSupplementaryCost(e.target.checked);
+                            },
+                            onClick: (e) => e.stopPropagation()
+                          }
+                        ),
+                        label: "Supplementary cost",
+                        onClick: (e) => e.stopPropagation()
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(Typography, { className: classes.menuItemDescription, children: [
+                      "All costs not directly attributed to the infrastructure.",
+                      /* @__PURE__ */ jsx("br", {}),
+                      "These costs are determined by applying a price list within a cost model to OpenShift cluster metrics."
+                    ] })
+                  ] })
+                }
+              )
+            ]
           }
-        ), /* @__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."))
-      )
-    )
+        )
+      ]
+    }
   );
 }
 

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

@@ -1 +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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"}
+{"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 { default as 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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"}