@openshift-migration-advisor/shared-components 0.25.0 → 0.27.0-3f8ae10b086b

package/README.md

@@ -7,6 +7,7 @@ Includes:
 - PatternFly form field wrappers (`react-hook-form`)
 - Guest OS support-tier helpers and badges
 - Report chart primitives (`MigrationDonutChart`)
+- Chart export (`ChartExportProvider`, `ChartExportSurface`, PDF / PNG / HTML)
 - Operating Systems distribution card
 - Infrastructure summary, vCenter cluster details, and host/VM power-state cards
 
@@ -25,17 +26,41 @@ npm install @openshift-migration-advisor/shared-components
 ```tsx
 import {
   buildInfrastructureSummary,
+  ChartExportProvider,
   HostPowerStates,
   InfrastructureSummary,
   MigrationDonutChart,
   OSDistribution,
+  ReportExportMenu,
   SupportTierBadge,
   TextInputFormGroup,
+  useChartExport,
   VCenterClusterDetails,
   VmPowerStates,
 } from "@openshift-migration-advisor/shared-components";
+
+<ChartExportProvider>
+  <Dashboard />
+</ChartExportProvider>
+```
+
+`ChartExportProvider` lazy-loads capture, ZIP, PDF, and HTML. Wrap the chart visual (not the Card chrome) in `ChartExportSurface`. All formats snapshot those same nodes, encode one chart at a time, and drop the canvas. There is no second print tree and no `isExportMode` render:
+
+```tsx
+import { ChartExportSurface } from "@openshift-migration-advisor/shared-components";
+
+<Card>
+  <CardTitle>CPU and memory</CardTitle>
+  <CardBody>
+    <ChartExportSurface id="cpu-memory" title="CPU and memory">
+      <MigrationDonutChart {...chartProps} />
+    </ChartExportSurface>
+  </CardBody>
+</Card>
 ```
 
+`ReportExportMenu` accepts a fully custom `options` list. `standardReportExportOptions()` builds the PDF / HTML / PNG entries; omit a handler to hide that format.
+
 Components are SDK-agnostic: pass already-shaped props (for example `OSDistributionEntry` maps). Map `agent-sdk` / `planner-sdk` models at the app boundary.
 
 ## Development

package/dist/report/ChartDownloadButton.d.ts

@@ -0,0 +1,11 @@
+import type { FC, ReactNode } from "react";
+export declare const ChartDownloadButton: FC<{
+    chartId: string;
+    title?: string;
+}>;
+export declare const ChartHeaderActions: FC<{
+    chartId: string;
+    title?: string;
+    children?: ReactNode;
+}>;
+//# sourceMappingURL=ChartDownloadButton.d.ts.map

package/dist/report/ChartDownloadButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartDownloadButton.d.ts","sourceRoot":"","sources":["../../src/report/ChartDownloadButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3C,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAoBA,CAAC;AAIF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAmBA,CAAC"}

package/dist/report/ChartDownloadButton.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Flex, FlexItem } from "@patternfly/react-core";
+import { DownloadIcon } from "@patternfly/react-icons";
+import { chartExportHideProps } from "./chartExport.js";
+import { useChartExport } from "./chartExportContext.js";
+export const ChartDownloadButton = ({ chartId, title }) => {
+    const exportApi = useChartExport();
+    if (!exportApi) {
+        return null;
+    }
+    const label = title ? `Download ${title} as PNG` : "Download chart as PNG";
+    return (_jsx(Button, { variant: "plain", icon: _jsx(DownloadIcon, {}), "aria-label": label, isLoading: exportApi.downloadingChartId === chartId, isDisabled: exportApi.isBusy, onClick: () => {
+            void exportApi.downloadChart(chartId);
+        } }));
+};
+ChartDownloadButton.displayName = "ChartDownloadButton";
+export const ChartHeaderActions = ({ chartId, title, children }) => {
+    const exportApi = useChartExport();
+    if (!exportApi && !children) {
+        return null;
+    }
+    return (_jsx(FlexItem, { ...chartExportHideProps, children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsSm" }, children: [children, exportApi ? (_jsx(ChartDownloadButton, { chartId: chartId, title: title })) : null] }) }));
+};
+ChartHeaderActions.displayName = "ChartHeaderActions";

package/dist/report/ChartExportProvider.d.ts

@@ -0,0 +1,23 @@
+import { type FC, type ReactNode } from "react";
+import { type ChartCaptureSource, type ChartExportFile, type PdfTextPage } from "./chartExport.js";
+export type CaptureChartElement = (element: HTMLElement) => Promise<HTMLCanvasElement>;
+export type ZipChartFiles = (files: ChartExportFile[]) => Promise<Blob>;
+export type EncodeChartPng = (canvas: HTMLCanvasElement) => Promise<Blob>;
+export type BuildChartDocument = (charts: ChartCaptureSource[], documentTitle: string) => Promise<Blob>;
+export type BuildPdfDocument = (charts: ChartCaptureSource[], documentTitle: string, extraPages?: PdfTextPage[]) => Promise<Blob>;
+export type { ChartExportApi, ChartExportFormat, } from "./chartExportContext.js";
+export { useChartExport, useRegisterChart } from "./chartExportContext.js";
+export interface ChartExportProviderProps {
+    children: ReactNode;
+    capture?: CaptureChartElement;
+    zipFiles?: ZipChartFiles;
+    encodePng?: EncodeChartPng;
+    buildPdf?: BuildPdfDocument;
+    buildHtml?: BuildChartDocument;
+    downloadFile?: (blob: Blob, filename: string) => void;
+    getZipFilename?: () => string;
+    getPdfFilename?: () => string;
+    getHtmlFilename?: () => string;
+}
+export declare const ChartExportProvider: FC<ChartExportProviderProps>;
+//# sourceMappingURL=ChartExportProvider.d.ts.map

package/dist/report/ChartExportProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartExportProvider.d.ts","sourceRoot":"","sources":["../../src/report/ChartExportProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,eAAe,EAGpB,KAAK,WAAW,EAMjB,MAAM,kBAAkB,CAAC;AAU1B,MAAM,MAAM,mBAAmB,GAAG,CAChC,OAAO,EAAE,WAAW,KACjB,OAAO,CAAC,iBAAiB,CAAC,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AACxE,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAAG,CAC/B,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,KAClB,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,MAAM,MAAM,gBAAgB,GAAG,CAC7B,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,EACrB,UAAU,CAAC,EAAE,WAAW,EAAE,KACvB,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,YAAY,EACV,cAAc,EACd,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3E,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,cAAc,CAAC,EAAE,MAAM,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,MAAM,CAAC;CAChC;AAsED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAiQ5D,CAAC"}

package/dist/report/ChartExportProvider.js

@@ -0,0 +1,222 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState, } from "react";
+import { canvasToBlob, downloadBlob, releaseCanvas, restoreChartExportViews, sortRegisteredChartsByDocumentOrder, toBulkChartCaptureSources, } from "./chartExport.js";
+import { ChartExportApiContext, ChartExportRegistryContext, } from "./chartExportContext.js";
+import { getChartExportFilename } from "./chartExportFilenames.js";
+export { useChartExport, useRegisterChart } from "./chartExportContext.js";
+const EXPORT_LOADING_LABELS = {
+    pdf: "Generating PDF...",
+    png: "Generating PNG...",
+    html: "Generating HTML...",
+};
+const defaultZipFilename = () => getChartExportFilename("zip");
+const defaultPdfFilename = () => getChartExportFilename("pdf");
+const defaultHtmlFilename = () => getChartExportFilename("html");
+async function resolveCapture(override) {
+    if (override) {
+        return override;
+    }
+    const { captureChartElement } = await import("./captureChartElement.js");
+    return captureChartElement;
+}
+async function resolvePrepareElement(overrideCapture) {
+    if (overrideCapture) {
+        return undefined;
+    }
+    const { revealHiddenChartAncestors } = await import("./captureChartElement.js");
+    return revealHiddenChartAncestors;
+}
+async function resolveZip(override) {
+    if (override) {
+        return override;
+    }
+    const { zipChartPngs } = await import("./zipChartPngs.js");
+    return zipChartPngs;
+}
+async function resolvePdf(override) {
+    if (override) {
+        return override;
+    }
+    const { buildPdfFromCharts } = await import("./pdfExport.js");
+    return buildPdfFromCharts;
+}
+async function resolveHtml(override) {
+    if (override) {
+        return override;
+    }
+    const { buildHtmlFromCharts } = await import("./htmlExport.js");
+    return buildHtmlFromCharts;
+}
+function toCaptureSources(charts, capture, prepareElement) {
+    return toBulkChartCaptureSources(charts, capture, prepareElement);
+}
+export const ChartExportProvider = ({ children, capture, zipFiles, encodePng = canvasToBlob, buildPdf, buildHtml, downloadFile = downloadBlob, getZipFilename = defaultZipFilename, getPdfFilename = defaultPdfFilename, getHtmlFilename = defaultHtmlFilename, }) => {
+    const chartsRef = useRef(new Map());
+    const isBusyRef = useRef(false);
+    const [downloadingChartId, setDownloadingChartId] = useState(null);
+    const [exportingFormat, setExportingFormat] = useState(null);
+    const [exportError, setExportError] = useState(null);
+    const registry = useMemo(() => ({
+        register(chart) {
+            const existing = chartsRef.current.get(chart.id);
+            if (existing &&
+                existing.element !== chart.element &&
+                existing.element.isConnected) {
+                console.warn(`Duplicate chart export id "${chart.id}". The previous chart will not be exported.`);
+            }
+            chartsRef.current.set(chart.id, chart);
+            return () => {
+                const current = chartsRef.current.get(chart.id);
+                if (current?.element === chart.element) {
+                    chartsRef.current.delete(chart.id);
+                }
+            };
+        },
+    }), []);
+    const listCharts = useCallback(() => {
+        return sortRegisteredChartsByDocumentOrder(Array.from(chartsRef.current.values()).filter((chart) => chart.element.isConnected));
+    }, []);
+    const runCapture = useCallback(async (work, chartId, format) => {
+        if (isBusyRef.current) {
+            return;
+        }
+        isBusyRef.current = true;
+        setExportError(null);
+        if (chartId) {
+            setDownloadingChartId(chartId);
+        }
+        else {
+            setExportingFormat(format);
+        }
+        try {
+            await work();
+        }
+        catch (error) {
+            console.error(`Error exporting ${format}:`, error);
+            setExportError(`Failed to export ${format.toUpperCase()}. Please try again.`);
+        }
+        finally {
+            isBusyRef.current = false;
+            setDownloadingChartId(null);
+            setExportingFormat(null);
+        }
+    }, []);
+    const downloadChart = useCallback(async (id) => {
+        await runCapture(async () => {
+            const chart = chartsRef.current.get(id);
+            if (!chart?.element.isConnected) {
+                throw new Error("The chart is not ready to export yet.");
+            }
+            const captureFn = await resolveCapture(capture);
+            const canvas = await captureFn(chart.element);
+            try {
+                downloadFile(await encodePng(canvas), chart.filename);
+            }
+            finally {
+                releaseCanvas(canvas);
+            }
+        }, id, "png");
+    }, [capture, downloadFile, encodePng, runCapture]);
+    const downloadAll = useCallback(async () => {
+        await runCapture(async () => {
+            const charts = listCharts();
+            if (charts.length === 0) {
+                throw new Error("The report is not ready to export yet.");
+            }
+            const captureFn = await resolveCapture(capture);
+            const prepareElement = await resolvePrepareElement(capture);
+            const zipFn = await resolveZip(zipFiles);
+            const files = [];
+            const sources = toBulkChartCaptureSources(charts, captureFn, prepareElement);
+            try {
+                for (const [index, source] of sources.entries()) {
+                    const canvas = await source.capture();
+                    try {
+                        files.push({
+                            filename: `${String(index + 1).padStart(2, "0")}-${source.filename}`,
+                            blob: await encodePng(canvas),
+                        });
+                    }
+                    finally {
+                        releaseCanvas(canvas);
+                    }
+                }
+            }
+            finally {
+                await restoreChartExportViews(charts);
+            }
+            downloadFile(await zipFn(files), getZipFilename());
+        }, null, "png");
+    }, [
+        capture,
+        downloadFile,
+        encodePng,
+        getZipFilename,
+        listCharts,
+        runCapture,
+        zipFiles,
+    ]);
+    const downloadPdf = useCallback(async (documentTitle, extraPages) => {
+        await runCapture(async () => {
+            const charts = listCharts();
+            if (charts.length === 0 && (extraPages?.length ?? 0) === 0) {
+                throw new Error("The report is not ready to export yet.");
+            }
+            const captureFn = await resolveCapture(capture);
+            const prepareElement = await resolvePrepareElement(capture);
+            const build = await resolvePdf(buildPdf);
+            try {
+                downloadFile(await build(toCaptureSources(charts, captureFn, prepareElement), documentTitle, extraPages), getPdfFilename());
+            }
+            finally {
+                await restoreChartExportViews(charts);
+            }
+        }, null, "pdf");
+    }, [buildPdf, capture, downloadFile, getPdfFilename, listCharts, runCapture]);
+    const downloadHtml = useCallback(async (documentTitle) => {
+        await runCapture(async () => {
+            const charts = listCharts();
+            if (charts.length === 0) {
+                throw new Error("The report is not ready to export yet.");
+            }
+            const captureFn = await resolveCapture(capture);
+            const prepareElement = await resolvePrepareElement(capture);
+            const build = await resolveHtml(buildHtml);
+            try {
+                downloadFile(await build(toCaptureSources(charts, captureFn, prepareElement), documentTitle), getHtmlFilename());
+            }
+            finally {
+                await restoreChartExportViews(charts);
+            }
+        }, null, "html");
+    }, [buildHtml, capture, downloadFile, getHtmlFilename, listCharts, runCapture]);
+    const clearExportError = useCallback(() => {
+        setExportError(null);
+    }, []);
+    const api = useMemo(() => ({
+        downloadChart,
+        downloadAll,
+        downloadPdf,
+        downloadHtml,
+        downloadingChartId,
+        exportingFormat,
+        exportLoadingLabel: exportingFormat
+            ? EXPORT_LOADING_LABELS[exportingFormat]
+            : null,
+        isExportingAll: exportingFormat !== null,
+        isBusy: downloadingChartId !== null || exportingFormat !== null,
+        exportError,
+        clearExportError,
+    }), [
+        clearExportError,
+        downloadAll,
+        downloadChart,
+        downloadHtml,
+        downloadPdf,
+        downloadingChartId,
+        exportError,
+        exportingFormat,
+    ]);
+    return (_jsx(ChartExportRegistryContext.Provider, { value: registry, children: _jsx(ChartExportApiContext.Provider, { value: api, children: children }) }));
+};
+ChartExportProvider.displayName = "ChartExportProvider";

package/dist/report/ChartExportSurface.d.ts

@@ -0,0 +1,12 @@
+import { type FC, type ReactNode } from "react";
+import { type ChartExportView } from "./chartExport.js";
+export declare const ChartExportSurface: FC<{
+    id: string;
+    title: string;
+    filename?: string;
+    exportViews?: ChartExportView[];
+    activeExportViewId?: string;
+    onExportViewChange?: (viewId: string) => void;
+    children: ReactNode;
+}>;
+//# sourceMappingURL=ChartExportSurface.d.ts.map

package/dist/report/ChartExportSurface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartExportSurface.d.ts","sourceRoot":"","sources":["../../src/report/ChartExportSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AACrE,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,kBAAkB,CAAC;AAG1B,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,SAAS,CAAC;CACrB,CAyCA,CAAC"}

package/dist/report/ChartExportSurface.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef } from "react";
+import { chartExportRootStyle, waitForChartExportPaint, } from "./chartExport.js";
+import { useRegisterChart } from "./chartExportContext.js";
+export const ChartExportSurface = ({ id, title, filename, exportViews, activeExportViewId, onExportViewChange, children, }) => {
+    const activeViewRef = useRef(activeExportViewId);
+    activeViewRef.current = activeExportViewId;
+    const onExportViewChangeRef = useRef(onExportViewChange);
+    onExportViewChangeRef.current = onExportViewChange;
+    const setExportView = useCallback(async (viewId) => {
+        const change = onExportViewChangeRef.current;
+        if (change && activeViewRef.current !== viewId) {
+            change(viewId);
+            await new Promise((resolve) => {
+                window.setTimeout(resolve, 0);
+            });
+        }
+        await waitForChartExportPaint();
+    }, []);
+    const ref = useRegisterChart({
+        id,
+        title,
+        filename,
+        exportViews,
+        activeExportViewId,
+        setExportView: exportViews && exportViews.length > 1 && onExportViewChange
+            ? setExportView
+            : undefined,
+    });
+    return (_jsx("div", { ref: ref, id: id, style: chartExportRootStyle, children: children }));
+};
+ChartExportSurface.displayName = "ChartExportSurface";

package/dist/report/ClustersOverview.d.ts

@@ -0,0 +1,24 @@
+import type { FC } from "react";
+import { type MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
+/**
+ * Cluster inventory fields this card reads.
+ * agent-sdk and planner-sdk inventories both satisfy it. `cpuOverCommitment`
+ * stays `unknown` because generated models type it as a number while older
+ * payloads send a ratio string such as `"1:4"`.
+ */
+export interface InventoryDataLike {
+    infra?: {
+        cpuOverCommitment?: unknown;
+    };
+    vms?: {
+        total?: number;
+    };
+}
+export interface ClustersOverviewProps {
+    clustersPerDatacenter?: number[];
+    clusters?: Record<string, InventoryDataLike>;
+    /** `"html"` in agent-ui; ui-app passes `"chart"`. */
+    legendVariant?: MigrationDonutChartLegendVariant;
+}
+export declare const ClustersOverview: FC<ClustersOverviewProps>;
+//# sourceMappingURL=ClustersOverview.d.ts.map

package/dist/report/ClustersOverview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClustersOverview.d.ts","sourceRoot":"","sources":["../../src/report/ClustersOverview.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,EAAE,EAAO,MAAM,OAAO,CAAC;AAErC,OAAO,EAGL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAS1C;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE;QACN,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC7B,CAAC;IACF,GAAG,CAAC,EAAE;QACJ,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,MAAM,WAAW,qBAAqB;IACpC,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAC7C,qDAAqD;IACrD,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAyOD,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA2JtD,CAAC"}

package/dist/report/ClustersOverview.js

@@ -0,0 +1,228 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Card, CardBody, CardTitle, Dropdown, DropdownItem, DropdownList, Flex, FlexItem, MenuToggle, } from "@patternfly/react-core";
+import { DatabaseIcon } from "@patternfly/react-icons";
+import { chart_color_black_500, chart_color_blue_300, chart_color_green_300, chart_color_orange_100, chart_color_purple_100, chart_color_purple_300, chart_color_red_orange_200, chart_color_teal_200, chart_color_teal_400, chart_color_yellow_400, } from "@patternfly/react-tokens";
+import { useMemo, useState } from "react";
+import { MigrationDonutChart, } from "../charts/MigrationDonutChart.js";
+import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { clustersOverviewStyles } from "./ClustersOverviewStyles.js";
+import { chartExportViewsFromLabels } from "./chartExport.js";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+const VIEW_MODE_LABELS = {
+    dataCenterDistribution: "Cluster distribution by data center",
+    vmByCluster: "VM distribution by cluster",
+    cpuOverCommitment: "Cluster CPU over commitment",
+};
+const TOP_CLUSTERS = 4;
+const TOP_CPU_RATIOS = 5;
+const REST_OF_CLUSTERS_LABEL = "Rest of clusters";
+const REST_OF_DATACENTERS_LABEL = "Rest of datacenters";
+const CHART_ID = "clusters-overview";
+const CHART_TITLE = "Clusters";
+/**
+ * Same categorical order as the previous cluster hex palette, mapped onto
+ * PatternFly `chart_color_*` tokens (nearest token where the old hex was
+ * not itself a token).
+ */
+const CLUSTER_COLORS = [
+    chart_color_blue_300.value,
+    chart_color_purple_300.value,
+    chart_color_purple_100.value,
+    chart_color_teal_200.value,
+    chart_color_yellow_400.value,
+    chart_color_green_300.value,
+    chart_color_orange_100.value,
+    chart_color_red_orange_200.value,
+    chart_color_teal_400.value,
+    chart_color_black_500.value,
+];
+const EMPTY_CHART = {
+    chartData: [],
+    legend: {},
+    title: "",
+    subTitle: "",
+};
+const isViewMode = (value) => value === "dataCenterDistribution" ||
+    value === "vmByCluster" ||
+    value === "cpuOverCommitment";
+const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const legendFor = (categories) => {
+    const legend = {};
+    categories.forEach((category, index) => {
+        const color = CLUSTER_COLORS[index % CLUSTER_COLORS.length];
+        if (color) {
+            legend[category] = color;
+        }
+    });
+    return legend;
+};
+const readCounts = (values) => {
+    if (!Array.isArray(values)) {
+        return [];
+    }
+    return values.filter((value) => typeof value === "number" && Number.isFinite(value) && value >= 0);
+};
+const readClusters = (clusters) => {
+    if (!isRecord(clusters)) {
+        return [];
+    }
+    return Object.values(clusters);
+};
+const readVmTotal = (cluster) => {
+    if (!isRecord(cluster) || !isRecord(cluster.vms)) {
+        return 0;
+    }
+    const total = cluster.vms.total;
+    return typeof total === "number" && Number.isFinite(total) && total >= 0
+        ? total
+        : 0;
+};
+/**
+ * Read `infra.cpuOverCommitment` without assuming either SDK's generated
+ * shape. Missing infra, a non-object infra, or an absent property yield
+ * `undefined` instead of throwing.
+ */
+const readCpuOverCommitment = (cluster) => {
+    if (!isRecord(cluster) || !isRecord(cluster.infra)) {
+        return undefined;
+    }
+    if (!("cpuOverCommitment" in cluster.infra)) {
+        return undefined;
+    }
+    return cluster.infra.cpuOverCommitment;
+};
+const parseCpuOverCommitment = (raw) => {
+    if (typeof raw === "number") {
+        return Number.isFinite(raw) ? raw : Number.NaN;
+    }
+    if (typeof raw !== "string") {
+        return Number.NaN;
+    }
+    const trimmed = raw.trim();
+    if (trimmed === "") {
+        return Number.NaN;
+    }
+    const match = trimmed.match(/^\d+\s*:\s*(\d+(?:\.\d+)?)$/);
+    if (match?.[1] != null) {
+        return Number(match[1]);
+    }
+    const asNum = Number(trimmed);
+    return Number.isFinite(asNum) ? asNum : Number.NaN;
+};
+const formatRatio = (ratio) => {
+    const formatted = ratio % 1 === 0 ? ratio.toFixed(0) : ratio.toFixed(2);
+    return formatted.replace(/(?:\.0+|(\.\d*[1-9]))0+$/, "$1");
+};
+const buildRankedDonut = (counts, options) => {
+    const total = counts.reduce((sum, count) => sum + count, 0);
+    const ranked = counts
+        .map((count, index) => ({ count, index }))
+        .sort((a, b) => b.count - a.count);
+    const top = ranked.slice(0, TOP_CLUSTERS);
+    const restSum = ranked
+        .slice(TOP_CLUSTERS)
+        .reduce((sum, item) => sum + item.count, 0);
+    const slices = top.map((item, index) => {
+        const name = options.sliceName(index + 1);
+        return {
+            name,
+            count: item.count,
+            countDisplay: `${item.count} ${options.countSuffix}`,
+            legendCategory: name,
+        };
+    });
+    if (restSum > 0) {
+        slices.push({
+            name: options.restName,
+            count: restSum,
+            countDisplay: `${restSum} ${options.countSuffix}`,
+            legendCategory: options.restName,
+        });
+    }
+    return {
+        chartData: slices,
+        legend: legendFor(slices.map((slice) => slice.legendCategory)),
+        title: `${total}`,
+        subTitle: options.subTitle,
+    };
+};
+const buildVmByCluster = (clusters) => {
+    const counts = readClusters(clusters).map(readVmTotal);
+    if (counts.length === 0) {
+        return EMPTY_CHART;
+    }
+    return buildRankedDonut(counts, {
+        sliceName: (rank) => `Cluster ${rank}`,
+        countSuffix: "VMs",
+        restName: REST_OF_CLUSTERS_LABEL,
+        subTitle: "VMs",
+    });
+};
+const buildDatacenterDistribution = (clustersPerDatacenter) => {
+    const counts = readCounts(clustersPerDatacenter);
+    if (counts.length === 0) {
+        return EMPTY_CHART;
+    }
+    return buildRankedDonut(counts, {
+        sliceName: (rank) => `Data center ${rank}`,
+        countSuffix: "clusters",
+        restName: REST_OF_DATACENTERS_LABEL,
+        subTitle: "Clusters",
+    });
+};
+const buildCpuOverCommitment = (clusters) => {
+    const ranked = readClusters(clusters)
+        .map((cluster) => parseCpuOverCommitment(readCpuOverCommitment(cluster)))
+        .filter((value) => Number.isFinite(value) && value >= 0)
+        .sort((a, b) => b - a)
+        .slice(0, TOP_CPU_RATIOS);
+    const slices = ranked.map((value, index) => {
+        const legendCategory = `Cluster ${index + 1}`;
+        const display = formatRatio(value);
+        return {
+            name: display,
+            count: value,
+            countDisplay: display,
+            legendCategory,
+        };
+    });
+    return {
+        chartData: slices,
+        legend: legendFor(slices.map((slice) => slice.legendCategory)),
+        title: "",
+        subTitle: "",
+    };
+};
+export const ClustersOverview = ({ clustersPerDatacenter, clusters, legendVariant = "html", }) => {
+    const [viewMode, setViewMode] = useState("vmByCluster");
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const chart = useMemo(() => {
+        if (viewMode === "cpuOverCommitment") {
+            return buildCpuOverCommitment(clusters);
+        }
+        if (viewMode === "vmByCluster") {
+            return buildVmByCluster(clusters);
+        }
+        return buildDatacenterDistribution(clustersPerDatacenter);
+    }, [viewMode, clustersPerDatacenter, clusters]);
+    const chartTitle = `${CHART_TITLE} — ${VIEW_MODE_LABELS[viewMode]}`;
+    const emptyTitle = viewMode === "cpuOverCommitment"
+        ? REPORT_CARD_EMPTY_STATE_TITLES.cpuOvercommitment
+        : REPORT_CARD_EMPTY_STATE_TITLES.clusters;
+    return (_jsx(ChartExportSurface, { id: CHART_ID, title: chartTitle, exportViews: chartExportViewsFromLabels(CHART_TITLE, VIEW_MODE_LABELS), activeExportViewId: viewMode, onExportViewChange: (viewId) => {
+            if (isViewMode(viewId)) {
+                setViewMode(viewId);
+            }
+        }, children: _jsxs(Card, { className: dashboardStyles.card, children: [_jsx(CardTitle, { children: _jsxs(Flex, { className: clustersOverviewStyles.titleRow, justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsx(FlexItem, { children: _jsxs("div", { children: [_jsxs("div", { children: [_jsx(DatabaseIcon, {}), " ", CHART_TITLE] }), _jsx("div", { className: clustersOverviewStyles.cardSubtitle, children: viewMode === "dataCenterDistribution"
+                                                ? "Top 5 datacenters"
+                                                : "Top 5 clusters" })] }) }), _jsx(ChartHeaderActions, { chartId: CHART_ID, title: chartTitle, children: _jsx(Dropdown, { isOpen: isDropdownOpen, onSelect: (_event, value) => {
+                                        if (isViewMode(value)) {
+                                            setViewMode(value);
+                                        }
+                                        setIsDropdownOpen(false);
+                                    }, onOpenChange: setIsDropdownOpen, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, onClick: () => setIsDropdownOpen((open) => !open), isExpanded: isDropdownOpen, className: clustersOverviewStyles.menuToggleMinWidth, children: VIEW_MODE_LABELS[viewMode] })), children: _jsxs(DropdownList, { children: [_jsx(DropdownItem, { value: "vmByCluster", children: VIEW_MODE_LABELS.vmByCluster }, "vmByCluster"), _jsx(DropdownItem, { value: "cpuOverCommitment", children: VIEW_MODE_LABELS.cpuOverCommitment }, "cpuOverCommitment"), _jsx(DropdownItem, { value: "dataCenterDistribution", children: VIEW_MODE_LABELS.dataCenterDistribution }, "dataCenterDistribution")] }) }) })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: chart.chartData.length === 0 ? (_jsx(CardEmptyState, { title: emptyTitle })) : viewMode === "cpuOverCommitment" ? (_jsxs(_Fragment, { children: [_jsx("div", { className: clustersOverviewStyles.cpuOvercommitBoxes, children: chart.chartData.map((item) => (_jsx("div", { className: clustersOverviewStyles.cpuOvercommitBox, style: { background: chart.legend[item.legendCategory] }, children: item.countDisplay }, `cpu-box-${item.legendCategory}`))) }), _jsx("div", { className: clustersOverviewStyles.cpuOvercommitLegend, children: chart.chartData.map((item) => (_jsxs("div", { className: clustersOverviewStyles.cpuOvercommitLegendItem, children: [_jsx("span", { className: clustersOverviewStyles.cpuOvercommitLegendSwatch, style: { background: chart.legend[item.legendCategory] } }), _jsxs("span", { className: clustersOverviewStyles.cpuOvercommitLegendText, children: [item.legendCategory, " (", item.countDisplay, ")"] })] }, `cpu-legend-${item.legendCategory}`))) })] })) : (_jsx(MigrationDonutChart, { legendVariant: legendVariant, data: chart.chartData, height: 300, width: 420, donutThickness: 18, titleFontSize: 34, legend: chart.legend, title: chart.title, subTitle: chart.subTitle, subTitleColor: "var(--pf-t--global--text--color--subtle)", tooltipLabelFormatter: ({ datum, percent }) => `${datum.countDisplay}\n${percent.toFixed(1)}%` })) })] }) }));
+};
+ClustersOverview.displayName = "ClustersOverview";

package/dist/report/ClustersOverviewStyles.d.ts

@@ -0,0 +1,12 @@
+export declare const clustersOverviewStyles: {
+    titleRow: string;
+    cardSubtitle: string;
+    menuToggleMinWidth: string;
+    cpuOvercommitBoxes: string;
+    cpuOvercommitBox: string;
+    cpuOvercommitLegend: string;
+    cpuOvercommitLegendItem: string;
+    cpuOvercommitLegendSwatch: string;
+    cpuOvercommitLegendText: string;
+};
+//# sourceMappingURL=ClustersOverviewStyles.d.ts.map

package/dist/report/ClustersOverviewStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClustersOverviewStyles.d.ts","sourceRoot":"","sources":["../../src/report/ClustersOverviewStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB;;;;;;;;;;CA2GlC,CAAC"}