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

package/dist/pages/openshift/OpenShiftPage.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useRef, useMemo, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useMemo, useCallback } from 'react';
 import { ResponseErrorPanel, InfoCard, Table } from '@backstage/core-components';
 import Typography from '@material-ui/core/Typography';
 import { BasePage } from '../../components/BasePage.esm.js';
@@ -9,6 +10,7 @@ import { PageHeader } from './components/PageHeader.esm.js';
 import { TableToolbar } from './components/TableToolbar.esm.js';
 import { useApi } from '@backstage/core-plugin-api';
 import { costManagementSlimApiRef } from '../../apis.esm.js';
+import { usePatternFlyTheme } from '../../hooks/usePatternFlyTheme.esm.js';
 import useAsync from 'react-use/lib/useAsync';
 import { CURRENCY_SYMBOLS } from '../../constants/currencies.esm.js';
 import { DownloadIconButton } from './components/DownloadIconButton.esm.js';
@@ -108,6 +110,7 @@ function buildCostManagementQueryParams(config, options = {}) {
   return queryParams;
 }
 function OpenShiftPage() {
+  usePatternFlyTheme();
   const api = useApi(costManagementSlimApiRef);
   const [groupBy, setGroupBy] = useState("project");
   const [overheadDistribution, setOverheadDistribution] = useState("distribute");
@@ -391,7 +394,7 @@ function OpenShiftPage() {
     };
     const cols = [
       {
-        title: /* @__PURE__ */ React.createElement("div", { style: { marginLeft: 0, paddingLeft: 0 } }, /* @__PURE__ */ React.createElement(
+        title: /* @__PURE__ */ jsx("div", { style: { marginLeft: 0, paddingLeft: 0 }, children: /* @__PURE__ */ jsx(
           "input",
           {
             type: "checkbox",
@@ -411,7 +414,7 @@ function OpenShiftPage() {
               padding: 0
             }
           }
-        )),
+        ) }),
         field: "checkbox",
         sorting: false,
         width: "40px",
@@ -423,7 +426,7 @@ function OpenShiftPage() {
           paddingLeft: "4px",
           paddingRight: "4px"
         },
-        render: (data) => /* @__PURE__ */ React.createElement("div", { style: { paddingRight: "4px" } }, /* @__PURE__ */ React.createElement(
+        render: (data) => /* @__PURE__ */ jsx("div", { style: { paddingRight: "4px" }, children: /* @__PURE__ */ jsx(
           "input",
           {
             type: "checkbox",
@@ -437,47 +440,56 @@ function OpenShiftPage() {
               padding: 0
             }
           }
-        ))
+        ) })
       },
       {
-        title: /* @__PURE__ */ React.createElement(Typography, { variant: "body2", style: { fontWeight: "bold" } }, groupBy.charAt(0).toLocaleUpperCase("en-US") + groupBy.slice(1), " ", "name"),
+        title: /* @__PURE__ */ jsxs(Typography, { variant: "body2", style: { fontWeight: "bold" }, children: [
+          groupBy.charAt(0).toLocaleUpperCase("en-US") + groupBy.slice(1),
+          " ",
+          "name"
+        ] }),
         field: "projectName",
         cellStyle: { minWidth: 350 },
         headerStyle: { minWidth: 350 },
-        render: (data) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              gap: "8px"
+        render: (data) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: "8px"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "body2", children: data.projectName }),
+                groupBy === "project" && data.includesOverhead && /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "caption",
+                    style: {
+                      padding: "2px 6px",
+                      backgroundColor: "#F5F5F5",
+                      border: "1px solid #D2D2D2",
+                      borderRadius: "16px",
+                      color: "black",
+                      whiteSpace: "nowrap"
+                    },
+                    children: "Includes overhead"
+                  }
+                )
+              ]
             }
-          },
-          /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, data.projectName),
-          groupBy === "project" && data.includesOverhead && /* @__PURE__ */ React.createElement(
+          ),
+          groupBy === "cluster" && data.clusterId && /* @__PURE__ */ jsx(
             Typography,
             {
               variant: "caption",
-              style: {
-                padding: "2px 6px",
-                backgroundColor: "#F5F5F5",
-                border: "1px solid #D2D2D2",
-                borderRadius: "16px",
-                color: "black",
-                whiteSpace: "nowrap"
-              }
-            },
-            "Includes overhead"
+              style: { color: "#666", display: "block", marginTop: 10 },
+              children: data.clusterId
+            }
           )
-        ), groupBy === "cluster" && data.clusterId && /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            variant: "caption",
-            style: { color: "#666", display: "block", marginTop: 10 }
-          },
-          data.clusterId
-        ))
+        ] })
       }
     ];
     if (showMonthOverMonthChange) {
@@ -485,68 +497,99 @@ function OpenShiftPage() {
         title: "Month over month change",
         field: "monthOverMonthChange",
         sorting: false,
-        render: (data) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            style: {
-              color: getChangeColor(data.monthOverMonthChange)
+        render: (data) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                color: getChangeColor(data.monthOverMonthChange)
+              },
+              children: [
+                Math.abs(data.monthOverMonthChange).toFixed(2),
+                "%",
+                data.monthOverMonthChange > 0 ? " \u25B2" : " \u25BC"
+              ]
             }
-          },
-          Math.abs(data.monthOverMonthChange).toFixed(2),
-          "%",
-          data.monthOverMonthChange > 0 ? " \u25B2" : " \u25BC"
-        ), /* @__PURE__ */ React.createElement("div", { style: { fontSize: "0.75rem", color: "#666" } }, formatCurrency(
-          data.monthOverMonthValue,
-          displayData?.currencyCode || ""
-        ), " ", "for ", getDateRangeText(timeRange)))
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.75rem", color: "#666" }, children: [
+            formatCurrency(
+              data.monthOverMonthValue,
+              displayData?.currencyCode || ""
+            ),
+            " ",
+            "for ",
+            getDateRangeText(timeRange)
+          ] })
+        ] })
       });
     }
     cols.push({
       title: "Cost",
       field: "cost",
-      render: (data) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, formatCurrency(data.cost, displayData?.currencyCode || "")), /* @__PURE__ */ React.createElement("div", { style: { fontSize: "0.75rem", color: "#666" } }, data.costPercentage.toFixed(2), "% of cost"))
+      render: (data) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { children: formatCurrency(data.cost, displayData?.currencyCode || "") }),
+        /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.75rem", color: "#666" }, children: [
+          data.costPercentage.toFixed(2),
+          "% of cost"
+        ] })
+      ] })
     });
     if (showInfrastructureCost) {
       cols.push({
         title: "Infrastructure cost",
         field: "infrastructureCost",
-        render: (data) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, formatCurrency(
-          data.infrastructureCost,
-          displayData?.currencyCode || ""
-        )), /* @__PURE__ */ React.createElement("div", { style: { fontSize: "0.75rem", color: "#666" } }, data.infrastructureCostPercentage.toFixed(2), "% of cost"))
+        render: (data) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { children: formatCurrency(
+            data.infrastructureCost,
+            displayData?.currencyCode || ""
+          ) }),
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.75rem", color: "#666" }, children: [
+            data.infrastructureCostPercentage.toFixed(2),
+            "% of cost"
+          ] })
+        ] })
       });
     }
     if (showSupplementaryCost) {
       cols.push({
         title: "Supplementary cost",
         field: "supplementaryCost",
-        render: (data) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, formatCurrency(
-          data.supplementaryCost,
-          displayData?.currencyCode || ""
-        )), /* @__PURE__ */ React.createElement("div", { style: { fontSize: "0.75rem", color: "#666" } }, data.supplementaryCostPercentage.toFixed(2), "% of cost"))
+        render: (data) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { children: formatCurrency(
+            data.supplementaryCost,
+            displayData?.currencyCode || ""
+          ) }),
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.75rem", color: "#666" }, children: [
+            data.supplementaryCostPercentage.toFixed(2),
+            "% of cost"
+          ] })
+        ] })
       });
     }
     cols.push({
       title: "Actions",
       field: "actions",
       sorting: false,
-      render: (data) => /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px" } }, /* @__PURE__ */ React.createElement(
-        DownloadIconButton,
-        {
-          label: "CSV",
-          variant: isDarkMode ? "white" : "black",
-          onClick: () => handleRowDownload(data.projectName, "csv"),
-          disabled: isDownloading
-        }
-      ), /* @__PURE__ */ React.createElement(
-        DownloadIconButton,
-        {
-          label: "JSON",
-          variant: isDarkMode ? "white" : "black",
-          onClick: () => handleRowDownload(data.projectName, "json"),
-          disabled: isDownloading
-        }
-      ))
+      render: (data) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+        /* @__PURE__ */ jsx(
+          DownloadIconButton,
+          {
+            label: "CSV",
+            variant: isDarkMode ? "white" : "black",
+            onClick: () => handleRowDownload(data.projectName, "csv"),
+            disabled: isDownloading
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DownloadIconButton,
+          {
+            label: "JSON",
+            variant: isDarkMode ? "white" : "black",
+            onClick: () => handleRowDownload(data.projectName, "json"),
+            disabled: isDownloading
+          }
+        )
+      ] })
     });
     return cols;
   }, [
@@ -581,145 +624,152 @@ function OpenShiftPage() {
     [columns]
   );
   if (error) {
-    return /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error });
+    return /* @__PURE__ */ jsx(ResponseErrorPanel, { error });
   }
-  return /* @__PURE__ */ React.createElement(BasePage, { pageTitle: "", withContentPadding: true }, /* @__PURE__ */ React.createElement(
-    PageHeader,
-    {
-      totalCost: displayData.totalCost,
-      month: displayData.month,
-      endDate: displayData.endDate,
-      currencyCode: displayData.currencyCode,
-      customStyle: { marginTop: "-24px" }
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Divider,
-    {
-      style: {
-        marginBottom: 24,
-        marginLeft: "-24px",
-        marginRight: "-24px",
-        width: "calc(100% + 48px)"
+  return /* @__PURE__ */ jsxs(BasePage, { pageTitle: "", withContentPadding: true, children: [
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        totalCost: displayData.totalCost,
+        month: displayData.month,
+        endDate: displayData.endDate,
+        currencyCode: displayData.currencyCode,
+        customStyle: { marginTop: "-24px" }
       }
-    }
-  ), /* @__PURE__ */ React.createElement(PageLayout, null, /* @__PURE__ */ React.createElement(PageLayout.Filters, null, /* @__PURE__ */ React.createElement(
-    Filters,
-    {
-      groupBy,
-      overheadDistribution,
-      timeRange,
-      currency,
-      filterBy,
-      filterOperation,
-      filterValue,
-      tags,
-      onGroupByChange: (value) => {
-        setGroupBy(value);
-        setCurrentPage(0);
-        if (value !== "tag") {
-          setSelectedTag("");
-        }
-        if (value !== "project") {
-          setShowPlatformSum(false);
-        }
-        setFilterBy(value);
-        setFilterValue("");
-        setSelectedTagKey("");
-        setSelectedTagValue("");
-      },
-      selectedTag,
-      onSelectedTagChange: (value) => {
-        setSelectedTag(value);
-        setCurrentPage(0);
-      },
-      onOverheadDistributionChange: (value) => {
-        setOverheadDistribution(value);
-        setCurrentPage(0);
-      },
-      onTimeRangeChange: (value) => {
-        setTimeRange(value);
-        setCurrentPage(0);
-      },
-      onCurrencyChange: (value) => {
-        setCurrency(value);
-        setCurrentPage(0);
-      },
-      onFilterByChange: (value) => {
-        setFilterBy(value);
-        setCurrentPage(0);
-        if (value !== "tag") {
-          setSelectedTagKey("");
-          setSelectedTagValue("");
+    ),
+    /* @__PURE__ */ jsx(
+      Divider,
+      {
+        style: {
+          marginBottom: 24,
+          marginLeft: "-24px",
+          marginRight: "-24px",
+          width: "calc(100% + 48px)"
         }
-      },
-      onFilterOperationChange: (value) => {
-        setFilterOperation(value);
-        setCurrentPage(0);
-      },
-      onFilterValueChange: (value) => {
-        setFilterValue(value);
-        setCurrentPage(0);
-      },
-      selectedTagKey,
-      selectedTagValue,
-      onSelectedTagKeyChange: (value) => {
-        setSelectedTagKey(value);
-        setSelectedTagValue("");
-        setCurrentPage(0);
-      },
-      onSelectedTagValueChange: (value) => {
-        setSelectedTagValue(value);
-        setCurrentPage(0);
       }
-    }
-  )), /* @__PURE__ */ React.createElement(PageLayout.Table, null, /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React.createElement(InfoCard, null, /* @__PURE__ */ React.createElement(
-    Table,
-    {
-      data: displayData?.projects || [],
-      isLoading: loading,
-      components: {
-        Toolbar: () => /* @__PURE__ */ React.createElement(
-          TableToolbar,
-          {
-            showPlatformSum,
-            setShowPlatformSum,
-            projectsCount: displayData?.projects?.length || 0,
-            groupBy,
-            showMonthOverMonthChange,
-            setShowMonthOverMonthChange,
-            showInfrastructureCost,
-            setShowInfrastructureCost,
-            showSupplementaryCost,
-            setShowSupplementaryCost,
-            onDownloadCsv: () => handleHeaderDownload("csv"),
-            onDownloadJson: () => handleHeaderDownload("json"),
-            isDownloading
+    ),
+    /* @__PURE__ */ jsxs(PageLayout, { children: [
+      /* @__PURE__ */ jsx(PageLayout.Filters, { children: /* @__PURE__ */ jsx(
+        Filters,
+        {
+          groupBy,
+          overheadDistribution,
+          timeRange,
+          currency,
+          filterBy,
+          filterOperation,
+          filterValue,
+          tags,
+          onGroupByChange: (value) => {
+            setGroupBy(value);
+            setCurrentPage(0);
+            if (value !== "tag") {
+              setSelectedTag("");
+            }
+            if (value !== "project") {
+              setShowPlatformSum(false);
+            }
+            setFilterBy(value);
+            setFilterValue("");
+            setSelectedTagKey("");
+            setSelectedTagValue("");
+          },
+          selectedTag,
+          onSelectedTagChange: (value) => {
+            setSelectedTag(value);
+            setCurrentPage(0);
+          },
+          onOverheadDistributionChange: (value) => {
+            setOverheadDistribution(value);
+            setCurrentPage(0);
+          },
+          onTimeRangeChange: (value) => {
+            setTimeRange(value);
+            setCurrentPage(0);
+          },
+          onCurrencyChange: (value) => {
+            setCurrency(value);
+            setCurrentPage(0);
+          },
+          onFilterByChange: (value) => {
+            setFilterBy(value);
+            setCurrentPage(0);
+            if (value !== "tag") {
+              setSelectedTagKey("");
+              setSelectedTagValue("");
+            }
+          },
+          onFilterOperationChange: (value) => {
+            setFilterOperation(value);
+            setCurrentPage(0);
+          },
+          onFilterValueChange: (value) => {
+            setFilterValue(value);
+            setCurrentPage(0);
+          },
+          selectedTagKey,
+          selectedTagValue,
+          onSelectedTagKeyChange: (value) => {
+            setSelectedTagKey(value);
+            setSelectedTagValue("");
+            setCurrentPage(0);
+          },
+          onSelectedTagValueChange: (value) => {
+            setSelectedTagValue(value);
+            setCurrentPage(0);
           }
-        )
-      },
-      columns,
-      options: {
-        paging: true,
-        pageSize,
-        pageSizeOptions: [5, 10, 25, 50],
-        search: false,
-        sorting: true,
-        padding: "dense",
-        thirdSortClick: false
-      },
-      totalCount,
-      page: currentPage,
-      onPageChange: handlePageChange,
-      onRowsPerPageChange: handleRowsPerPageChange,
-      onOrderChange: handleOrderChange,
-      style: { outline: "none" },
-      localization: {
-        pagination: {
-          labelRowsPerPage: "rows"
         }
-      }
-    }
-  ))))));
+      ) }),
+      /* @__PURE__ */ jsx(PageLayout.Table, { children: /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx(InfoCard, { children: /* @__PURE__ */ jsx(
+        Table,
+        {
+          data: displayData?.projects || [],
+          isLoading: loading,
+          components: {
+            Toolbar: () => /* @__PURE__ */ jsx(
+              TableToolbar,
+              {
+                showPlatformSum,
+                setShowPlatformSum,
+                projectsCount: displayData?.projects?.length || 0,
+                groupBy,
+                showMonthOverMonthChange,
+                setShowMonthOverMonthChange,
+                showInfrastructureCost,
+                setShowInfrastructureCost,
+                showSupplementaryCost,
+                setShowSupplementaryCost,
+                onDownloadCsv: () => handleHeaderDownload("csv"),
+                onDownloadJson: () => handleHeaderDownload("json"),
+                isDownloading
+              }
+            )
+          },
+          columns,
+          options: {
+            paging: true,
+            pageSize,
+            pageSizeOptions: [5, 10, 25, 50],
+            search: false,
+            sorting: true,
+            padding: "dense",
+            thirdSortClick: false
+          },
+          totalCount,
+          page: currentPage,
+          onPageChange: handlePageChange,
+          onRowsPerPageChange: handleRowsPerPageChange,
+          onOrderChange: handleOrderChange,
+          style: { outline: "none" },
+          localization: {
+            pagination: {
+              labelRowsPerPage: "rows"
+            }
+          }
+        }
+      ) }) }) })
+    ] })
+  ] });
 }
 OpenShiftPage.displayName = "OpenShiftPage";