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

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

@@ -0,0 +1,727 @@
+import React, { 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';
+import { PageLayout } from '../../components/PageLayout.esm.js';
+import { Filters } from './components/Filters.esm.js';
+import { useTheme, Divider } from '@material-ui/core';
+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 useAsync from 'react-use/lib/useAsync';
+import { CURRENCY_SYMBOLS } from '../../constants/currencies.esm.js';
+import { DownloadIconButton } from './components/DownloadIconButton.esm.js';
+
+const formatCurrency = (value, currencyCode) => {
+  const symbol = CURRENCY_SYMBOLS[currencyCode] || currencyCode;
+  return `${symbol}${value.toLocaleString("en-US", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })}`;
+};
+function getDateRangeText(timeRange) {
+  const now = /* @__PURE__ */ new Date();
+  const currentMonth = now.getMonth();
+  const currentYear = now.getFullYear();
+  const currentDay = now.getDate();
+  if (timeRange === "month-to-date") {
+    const monthName2 = now.toLocaleString("en-US", { month: "long" });
+    return `${monthName2} 1-${currentDay}`;
+  }
+  const prevMonth = currentMonth === 0 ? 11 : currentMonth - 1;
+  const prevYear = currentMonth === 0 ? currentYear - 1 : currentYear;
+  const prevMonthDate = new Date(prevYear, prevMonth + 1, 0);
+  const lastDay = prevMonthDate.getDate();
+  const monthName = prevMonthDate.toLocaleString("en-US", { month: "long" });
+  return `${monthName} 1-${lastDay}`;
+}
+function buildCostManagementQueryParams(config, options = {}) {
+  const {
+    groupBy,
+    selectedTag,
+    overheadDistribution,
+    timeRange,
+    currency,
+    showPlatformSum,
+    filterBy,
+    filterValue,
+    filterOperation,
+    selectedTagKey,
+    selectedTagValue,
+    sortField,
+    sortDirection
+  } = config;
+  const { limit, offset, specificItemName } = options;
+  const groupByParam = groupBy === "tag" ? `group_by[tag:${selectedTag}]` : `group_by[${groupBy}]`;
+  const deltaParam = groupBy === "project" && overheadDistribution === "distribute" ? "distributed_cost" : "cost";
+  const timeScopeValue = timeRange === "month-to-date" ? -1 : -2;
+  const queryParams = {
+    currency,
+    delta: deltaParam,
+    "filter[resolution]": "monthly",
+    "filter[time_scope_units]": "month",
+    "filter[time_scope_value]": timeScopeValue
+  };
+  if (limit !== void 0) {
+    queryParams["filter[limit]"] = limit;
+  }
+  if (offset !== void 0) {
+    queryParams["filter[offset]"] = offset;
+  }
+  if (showPlatformSum) {
+    queryParams.category = "Platform";
+  }
+  queryParams[groupByParam] = "*";
+  if (specificItemName) {
+    queryParams[`filter[${groupBy}]`] = specificItemName;
+  } else if (filterBy === "tag" && selectedTagKey && selectedTagValue) {
+    if (filterOperation === "exact") {
+      queryParams[`filter[exact:tag:${selectedTagKey}]`] = selectedTagValue;
+    } else if (filterOperation === "excludes") {
+      queryParams[`exclude[tag:${selectedTagKey}]`] = selectedTagValue;
+    } else {
+      queryParams[`filter[tag:${selectedTagKey}]`] = selectedTagValue;
+    }
+  } else if (filterValue) {
+    if (filterOperation === "exact") {
+      queryParams[`filter[exact:${filterBy}]`] = filterValue;
+    } else if (filterOperation === "excludes") {
+      queryParams[`exclude[${filterBy}]`] = filterValue;
+    } else {
+      queryParams[`filter[${filterBy}]`] = filterValue;
+    }
+  }
+  let apiSortField;
+  if (sortField) {
+    if (sortField === "cost") {
+      apiSortField = deltaParam;
+    } else if (sortField === "projectName") {
+      apiSortField = groupBy;
+    } else {
+      apiSortField = deltaParam;
+    }
+    queryParams[`order_by[${apiSortField}]`] = sortDirection;
+  } else {
+    queryParams[`order_by[${deltaParam}]`] = "desc";
+  }
+  return queryParams;
+}
+function OpenShiftPage() {
+  const api = useApi(costManagementSlimApiRef);
+  const [groupBy, setGroupBy] = useState("project");
+  const [overheadDistribution, setOverheadDistribution] = useState("distribute");
+  const [timeRange, setTimeRange] = useState("month-to-date");
+  const [currency, setCurrency] = useState("USD");
+  const [filterBy, setFilterBy] = useState("project");
+  const [filterOperation, setFilterOperation] = useState("includes");
+  const [filterValue, setFilterValue] = useState("");
+  const [showPlatformSum, setShowPlatformSum] = useState(false);
+  const [selectedRows, setSelectedRows] = useState(/* @__PURE__ */ new Set());
+  const [currentPage, setCurrentPage] = useState(0);
+  const [pageSize, setPageSize] = useState(5);
+  const [sortField, setSortField] = useState(null);
+  const [sortDirection, setSortDirection] = useState("desc");
+  const [tags, setTags] = useState([]);
+  const [selectedTag, setSelectedTag] = useState("");
+  const [selectedTagKey, setSelectedTagKey] = useState("");
+  const [selectedTagValue, setSelectedTagValue] = useState("");
+  const [showMonthOverMonthChange, setShowMonthOverMonthChange] = useState(true);
+  const [showInfrastructureCost, setShowInfrastructureCost] = useState(false);
+  const [showSupplementaryCost, setShowSupplementaryCost] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === "dark";
+  const displayDataRef = useRef(null);
+  useAsync(async () => {
+    try {
+      const timeScopeValue = timeRange === "month-to-date" ? -1 : -2;
+      const response = await api.getOpenShiftTags(timeScopeValue);
+      const tagsData = await response.json();
+      setTags(tagsData.data || []);
+    } catch {
+      setTags([]);
+    }
+  }, [api, timeRange]);
+  const queryParamsConfig = useMemo(
+    () => ({
+      groupBy,
+      selectedTag,
+      overheadDistribution,
+      timeRange,
+      currency,
+      showPlatformSum,
+      filterBy,
+      filterValue,
+      filterOperation,
+      selectedTagKey,
+      selectedTagValue,
+      sortField,
+      sortDirection
+    }),
+    [
+      groupBy,
+      selectedTag,
+      overheadDistribution,
+      timeRange,
+      currency,
+      showPlatformSum,
+      filterBy,
+      filterValue,
+      filterOperation,
+      selectedTagKey,
+      selectedTagValue,
+      sortField,
+      sortDirection
+    ]
+  );
+  const {
+    value: costData,
+    loading,
+    error
+  } = useAsync(async () => {
+    if (groupBy === "tag" && !selectedTag) {
+      return null;
+    }
+    const offset = currentPage * pageSize;
+    const queryParams = buildCostManagementQueryParams(queryParamsConfig, {
+      limit: pageSize,
+      offset
+    });
+    const response = await api.getCostManagementReport({
+      query: queryParams
+    });
+    return response.json();
+  }, [
+    currency,
+    overheadDistribution,
+    timeRange,
+    groupBy,
+    filterBy,
+    filterValue,
+    filterOperation,
+    showPlatformSum,
+    api,
+    currentPage,
+    pageSize,
+    sortField,
+    sortDirection,
+    selectedTag,
+    selectedTagKey,
+    selectedTagValue
+  ]);
+  const displayData = useMemo(() => {
+    if (!costData) {
+      const today = /* @__PURE__ */ new Date();
+      const month2 = timeRange === "previous-month" ? new Date(
+        today.getFullYear(),
+        today.getMonth() - 1,
+        1
+      ).toLocaleString("en-US", { month: "long" }) : today.toLocaleString("en-US", { month: "long" });
+      const endDate2 = timeRange === "previous-month" ? new Date(today.getFullYear(), today.getMonth(), 0).getDate().toString() : today.getDate().toString();
+      return {
+        totalCost: 0,
+        month: month2,
+        endDate: endDate2,
+        currencyCode: currency,
+        projects: []
+      };
+    }
+    const arrayKey = `${groupBy}s`;
+    const groupedArray = costData.data?.[0]?.[arrayKey];
+    const projects = groupedArray?.map((item, index) => {
+      const value = item.values?.[0] || {};
+      let itemName;
+      let clusterId;
+      if (groupBy === "cluster") {
+        const valueItem = item.values?.[0];
+        const clustersArray = valueItem?.clusters;
+        itemName = clustersArray && clustersArray.length > 0 ? clustersArray[0] : item.cluster || "Unknown";
+        clusterId = item.cluster || void 0;
+      } else {
+        const nameField = groupBy;
+        itemName = item[nameField] || "Unknown";
+      }
+      const costField = groupBy === "project" && overheadDistribution === "distribute" ? "distributed" : "total";
+      const costValue = value?.cost?.[costField]?.value || 0;
+      const deltaPercent = value?.delta_percent || 0;
+      const deltaValue = value?.delta_value || 0;
+      const infrastructureValue = value?.infrastructure?.total?.value || 0;
+      const supplementaryValue = value?.supplementary?.total?.value || 0;
+      return {
+        id: `${index}`,
+        projectName: itemName,
+        clusterId,
+        cost: costValue,
+        costPercentage: 0,
+        monthOverMonthChange: deltaPercent,
+        monthOverMonthValue: Math.abs(deltaValue),
+        includesOverhead: value?.cost?.network_unattributed_distributed?.value !== 0 || value?.cost?.worker_unallocated_distributed?.value !== 0 || value?.cost?.platform_distributed?.value !== 0 || value?.cost?.storage_unattributed_distributed?.value !== 0,
+        previousPeriodCost: costValue + Math.abs(deltaValue),
+        infrastructureCost: infrastructureValue,
+        infrastructureCostPercentage: 0,
+        supplementaryCost: supplementaryValue,
+        supplementaryCostPercentage: 0
+      };
+    }) || [];
+    const totalCost = costData.meta?.total?.cost?.total?.value || 0;
+    const totalInfrastructureCost = costData.meta?.total?.infrastructure?.total?.value || 0;
+    const totalSupplementaryCost = costData.meta?.total?.supplementary?.total?.value || 0;
+    const currencyCode = costData.meta?.currency || currency;
+    const projectsWithPercentage = projects.map((p) => ({
+      ...p,
+      costPercentage: totalCost > 0 ? p.cost / totalCost * 100 : 0,
+      infrastructureCostPercentage: totalInfrastructureCost > 0 ? p.infrastructureCost / totalInfrastructureCost * 100 : 0,
+      supplementaryCostPercentage: totalSupplementaryCost > 0 ? p.supplementaryCost / totalSupplementaryCost * 100 : 0
+    }));
+    let month;
+    let endDate;
+    if (timeRange === "previous-month") {
+      const today = /* @__PURE__ */ new Date();
+      const previousMonth = new Date(
+        today.getFullYear(),
+        today.getMonth() - 1,
+        1
+      );
+      month = previousMonth.toLocaleString("en-US", { month: "long" });
+      const lastDayOfPreviousMonth = new Date(
+        today.getFullYear(),
+        today.getMonth(),
+        0
+      ).getDate();
+      endDate = lastDayOfPreviousMonth.toString();
+    } else {
+      const today = /* @__PURE__ */ new Date();
+      month = today.toLocaleString("en-US", { month: "long" });
+      endDate = today.getDate().toString();
+    }
+    return {
+      totalCost,
+      month,
+      endDate,
+      currencyCode,
+      projects: projectsWithPercentage
+    };
+  }, [costData, currency, groupBy, overheadDistribution, timeRange]);
+  displayDataRef.current = displayData;
+  const buildDownloadQueryParams = useCallback(
+    (specificItemName) => {
+      return buildCostManagementQueryParams(queryParamsConfig, {
+        specificItemName
+      });
+    },
+    [queryParamsConfig]
+  );
+  const handleHeaderDownload = useCallback(
+    async (format) => {
+      if (isDownloading) return;
+      setIsDownloading(true);
+      try {
+        const queryParams = buildDownloadQueryParams();
+        await api.downloadCostManagementReport({
+          query: queryParams,
+          format
+        });
+      } catch (err) {
+        console.error(`Failed to download ${format}:`, err);
+      } finally {
+        setIsDownloading(false);
+      }
+    },
+    [api, buildDownloadQueryParams, isDownloading]
+  );
+  const handleRowDownload = useCallback(
+    async (itemName, format) => {
+      if (isDownloading) return;
+      setIsDownloading(true);
+      try {
+        const queryParams = buildDownloadQueryParams(itemName);
+        await api.downloadCostManagementReport({
+          query: queryParams,
+          format
+        });
+      } catch (err) {
+        console.error(`Failed to download ${format} for ${itemName}:`, err);
+      } finally {
+        setIsDownloading(false);
+      }
+    },
+    [api, buildDownloadQueryParams, isDownloading]
+  );
+  const handleRowSelect = useCallback(
+    (rowId, isSelected) => {
+      const newSelectedRows = new Set(selectedRows);
+      if (isSelected) {
+        newSelectedRows.add(rowId);
+      } else {
+        newSelectedRows.delete(rowId);
+      }
+      setSelectedRows(newSelectedRows);
+    },
+    [selectedRows]
+  );
+  const handleSelectAll = useCallback(
+    (isSelected) => {
+      if (isSelected && displayData) {
+        setSelectedRows(
+          new Set(displayData.projects.map((project) => project.id))
+        );
+      } else {
+        setSelectedRows(/* @__PURE__ */ new Set());
+      }
+    },
+    [displayData]
+  );
+  const handlePageChange = useCallback((page, newPageSize) => {
+    setCurrentPage(page);
+    setPageSize(newPageSize);
+  }, []);
+  const handleRowsPerPageChange = useCallback((newPageSize) => {
+    setPageSize(newPageSize);
+    setCurrentPage(0);
+  }, []);
+  const totalCount = costData?.meta?.count || 0;
+  const isAllSelected = displayData !== null && selectedRows.size === displayData.projects.length && displayData.projects.length > 0;
+  const isIndeterminate = displayData !== null && selectedRows.size > 0 && selectedRows.size < displayData.projects.length;
+  const columns = useMemo(() => {
+    const getChangeColor = (change) => {
+      if (change < 0) return "#d32f2f";
+      if (isDarkMode) return "#4BB543";
+      return "#2e7d32";
+    };
+    const cols = [
+      {
+        title: /* @__PURE__ */ React.createElement("div", { style: { marginLeft: 0, paddingLeft: 0 } }, /* @__PURE__ */ React.createElement(
+          "input",
+          {
+            type: "checkbox",
+            checked: isAllSelected,
+            ref: (input) => {
+              if (input) input.indeterminate = isIndeterminate;
+            },
+            onChange: (e) => {
+              e.stopPropagation();
+              handleSelectAll(e.target.checked);
+            },
+            style: {
+              width: "18px",
+              height: "18px",
+              cursor: "pointer",
+              margin: 0,
+              padding: 0
+            }
+          }
+        )),
+        field: "checkbox",
+        sorting: false,
+        width: "40px",
+        cellStyle: {
+          paddingLeft: "4px",
+          paddingRight: "4px"
+        },
+        headerStyle: {
+          paddingLeft: "4px",
+          paddingRight: "4px"
+        },
+        render: (data) => /* @__PURE__ */ React.createElement("div", { style: { paddingRight: "4px" } }, /* @__PURE__ */ React.createElement(
+          "input",
+          {
+            type: "checkbox",
+            checked: selectedRows.has(data.id),
+            onChange: (e) => handleRowSelect(data.id, e.target.checked),
+            style: {
+              width: "18px",
+              height: "18px",
+              cursor: "pointer",
+              margin: 0,
+              padding: 0
+            }
+          }
+        ))
+      },
+      {
+        title: /* @__PURE__ */ React.createElement(Typography, { variant: "body2", style: { fontWeight: "bold" } }, 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"
+            }
+          },
+          /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, data.projectName),
+          groupBy === "project" && data.includesOverhead && /* @__PURE__ */ React.createElement(
+            Typography,
+            {
+              variant: "caption",
+              style: {
+                padding: "2px 6px",
+                backgroundColor: "#F5F5F5",
+                border: "1px solid #D2D2D2",
+                borderRadius: "16px",
+                color: "black",
+                whiteSpace: "nowrap"
+              }
+            },
+            "Includes overhead"
+          )
+        ), groupBy === "cluster" && data.clusterId && /* @__PURE__ */ React.createElement(
+          Typography,
+          {
+            variant: "caption",
+            style: { color: "#666", display: "block", marginTop: 10 }
+          },
+          data.clusterId
+        ))
+      }
+    ];
+    if (showMonthOverMonthChange) {
+      cols.push({
+        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)
+            }
+          },
+          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)))
+      });
+    }
+    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"))
+    });
+    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"))
+      });
+    }
+    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"))
+      });
+    }
+    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
+        }
+      ))
+    });
+    return cols;
+  }, [
+    handleRowSelect,
+    handleRowDownload,
+    isAllSelected,
+    isIndeterminate,
+    isDownloading,
+    selectedRows,
+    handleSelectAll,
+    displayData?.currencyCode,
+    groupBy,
+    showMonthOverMonthChange,
+    showInfrastructureCost,
+    showSupplementaryCost,
+    timeRange,
+    isDarkMode
+  ]);
+  const handleOrderChange = useCallback(
+    (orderBy, orderDirection) => {
+      if (orderBy === -1) {
+        return;
+      }
+      const column = columns[orderBy];
+      if (column?.field && column.field !== "actions" && column.sorting !== false) {
+        const newField = column.field;
+        setSortField(newField);
+        setSortDirection(orderDirection);
+        setCurrentPage(0);
+      }
+    },
+    [columns]
+  );
+  if (error) {
+    return /* @__PURE__ */ React.createElement(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)"
+      }
+    }
+  ), /* @__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("");
+        }
+      },
+      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
+          }
+        )
+      },
+      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";
+
+export { OpenShiftPage };
+//# sourceMappingURL=OpenShiftPage.esm.js.map