@openshift-migration-advisor/shared-components 0.23.0 → 0.25.0-6a4104ca5ed2

package/README.md

@@ -7,7 +7,9 @@ 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
 
 ## Installation
 
@@ -23,13 +25,42 @@ 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/charts/index.d.ts

@@ -1,2 +1,2 @@
-export { MigrationDonutChart, type MigrationDonutChartDatum, type MigrationDonutChartProps, } from "./MigrationDonutChart.js";
+export { MigrationDonutChart, type MigrationDonutChartDatum, type MigrationDonutChartLegendVariant, type MigrationDonutChartProps, } from "./MigrationDonutChart.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/charts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/charts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,GAC9B,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/charts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,gCAAgC,EACrC,KAAK,wBAAwB,GAC9B,MAAM,0BAA0B,CAAC"}

package/dist/forms/RadioButtonFormGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonFormGroup.d.ts","sourceRoot":"","sources":["../../src/forms/RadioButtonFormGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,yBACR,SAAQ,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC;IAC3C,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,yBAAyB,+BAoC3B"}
+{"version":3,"file":"RadioButtonFormGroup.d.ts","sourceRoot":"","sources":["../../src/forms/RadioButtonFormGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,yBACR,SAAQ,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC;IAC3C,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,yBAAyB,+BA2C3B"}

package/dist/forms/RadioButtonFormGroup.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormGroup, Radio } from "@patternfly/react-core";
 import { Controller, useFormContext } from "react-hook-form";
 import FormFieldHelperText from "./FormFieldHelperText.js";
@@ -8,5 +8,5 @@ export default function RadioButtonFormGroup({ id, label, name, isRequired = fal
     const isTouched = methods.formState.touchedFields[name];
     const isSubmitted = methods.formState.isSubmitted;
     const showError = error && (isTouched || isSubmitted);
-    return (_jsxs(FormGroup, { label: label, isRequired: isRequired, fieldId: id, ...props, children: [_jsx(Controller, { name: name, control: methods.control, render: ({ field }) => (_jsx("div", { style: { display: "flex", gap: "16px" }, role: "radiogroup", children: options.map((option) => (_jsx(Radio, { id: option.id, name: name, label: option.label, isChecked: field.value === option.value, onChange: () => field.onChange(option.value), onBlur: field.onBlur }, option.value))) })) }), _jsx(FormFieldHelperText, { helpText: helpText, errorMessage: showError ? error?.message : undefined })] }));
+    return (_jsxs(FormGroup, { label: label, isRequired: isRequired, fieldId: id, role: "radiogroup", isInline: true, ...props, children: [_jsx(Controller, { name: name, control: methods.control, render: ({ field }) => (_jsx(_Fragment, { children: options.map((option) => (_jsx(Radio, { id: option.id, name: name, label: option.label, isChecked: field.value === option.value, onChange: () => field.onChange(option.value), onBlur: field.onBlur }, option.value))) })) }), _jsx(FormFieldHelperText, { helpText: helpText, errorMessage: showError ? error?.message : undefined })] }));
 }

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,22 @@
+import { type FC, type ReactNode } from "react";
+import { type ChartCaptureSource, type ChartExportFile } 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 { ChartExportApi, ChartExportFormat, } from "./chartExportContext.js";
+export { useChartExport, useRegisterChart } from "./chartExportContext.js";
+export interface ChartExportProviderProps {
+    children: ReactNode;
+    capture?: CaptureChartElement;
+    zipFiles?: ZipChartFiles;
+    encodePng?: EncodeChartPng;
+    buildPdf?: BuildChartDocument;
+    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,EAQrB,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,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,kBAAkB,CAAC;IAC9B,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,CAgQ5D,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) => {
+        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 resolvePdf(buildPdf);
+            try {
+                downloadFile(await build(toCaptureSources(charts, captureFn, prepareElement), documentTitle), 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/FeatureStatusBadge.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from "react";
+import type { FeatureStatus } from "./infrastructureSummaryModel.js";
+export interface FeatureStatusBadgeProps {
+    status: FeatureStatus;
+}
+export declare const FeatureStatusBadge: FC<FeatureStatusBadgeProps>;
+//# sourceMappingURL=FeatureStatusBadge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureStatusBadge.d.ts","sourceRoot":"","sources":["../../src/report/FeatureStatusBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAkB1D,CAAC"}

package/dist/report/FeatureStatusBadge.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Label } from "@patternfly/react-core";
+import { CheckCircleIcon, TimesCircleIcon } from "@patternfly/react-icons";
+export const FeatureStatusBadge = ({ status }) => {
+    if (status === "unknown") {
+        return _jsx("span", { children: "\u2014" });
+    }
+    if (status === "enabled") {
+        return (_jsx(Label, { color: "green", isCompact: true, icon: _jsx(CheckCircleIcon, {}), children: "Enabled" }));
+    }
+    return (_jsx(Label, { color: "grey", isCompact: true, icon: _jsx(TimesCircleIcon, {}), children: "Disabled" }));
+};
+FeatureStatusBadge.displayName = "FeatureStatusBadge";

package/dist/report/HostPowerStates.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from "react";
+import type { MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
+export interface HostPowerStatesProps {
+    hostPowerStates?: Record<string, number>;
+    legendVariant?: MigrationDonutChartLegendVariant;
+}
+export declare const HostPowerStates: FC<HostPowerStatesProps>;
+//# sourceMappingURL=HostPowerStates.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HostPowerStates.d.ts","sourceRoot":"","sources":["../../src/report/HostPowerStates.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,kCAAkC,CAAC;AAKzF,MAAM,WAAW,oBAAoB;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAsBpD,CAAC"}

package/dist/report/HostPowerStates.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ServerIcon } from "@patternfly/react-icons";
+import { useMemo } from "react";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { PowerStateCard } from "./PowerStateCard.js";
+import { buildHostPowerStateChart } from "./powerStates.js";
+export const HostPowerStates = ({ hostPowerStates, legendVariant, }) => {
+    const chart = useMemo(() => buildHostPowerStateChart(hostPowerStates), [hostPowerStates]);
+    return (_jsx(PowerStateCard, { id: "esxi-host-power-states", title: "ESXi host power states", icon: _jsx(ServerIcon, {}), emptyTitle: REPORT_CARD_EMPTY_STATE_TITLES.hostPowerStates, slices: chart.slices, legend: chart.legend, total: chart.total, subTitle: "Hosts", legendVariant: legendVariant }));
+};
+HostPowerStates.displayName = "HostPowerStates";

package/dist/report/InfrastructureSummary.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from "react";
+import type { InfrastructureSummaryModel } from "./infrastructureSummaryModel.js";
+export interface InfrastructureSummaryProps {
+    summary: InfrastructureSummaryModel;
+}
+export declare const InfrastructureSummary: FC<InfrastructureSummaryProps>;
+//# sourceMappingURL=InfrastructureSummary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InfrastructureSummary.d.ts","sourceRoot":"","sources":["../../src/report/InfrastructureSummary.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAElF,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,0BAA0B,CAAC;CACrC;AAQD,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CA4ChE,CAAC"}

package/dist/report/InfrastructureSummary.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardBody, CardTitle, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Flex, FlexItem, } from "@patternfly/react-core";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+const formatCount = (value) => typeof value === "number" ? String(value) : "—";
+const INFRA_CHART_ID = "infrastructure-summary";
+const INFRA_TITLE = "Infrastructure summary";
+export const InfrastructureSummary = ({ summary, }) => (_jsx(ChartExportSurface, { id: INFRA_CHART_ID, title: INFRA_TITLE, children: _jsxs(Card, { isFullHeight: true, children: [_jsx(CardTitle, { children: _jsxs(Flex, { justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsx(FlexItem, { children: INFRA_TITLE }), _jsx(ChartHeaderActions, { chartId: INFRA_CHART_ID, title: INFRA_TITLE })] }) }), _jsx(CardBody, { children: _jsxs(DescriptionList, { isAutoFit: true, displaySize: "lg", children: [_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "VMware version" }), _jsx(DescriptionListDescription, { children: summary.vmwareVersion })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Datacenters" }), _jsx(DescriptionListDescription, { children: formatCount(summary.datacenters) })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "vCenters" }), _jsx(DescriptionListDescription, { children: formatCount(summary.vCenters) })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "ESXi hosts" }), _jsx(DescriptionListDescription, { children: formatCount(summary.esxiHosts) })] })] }) })] }) }));
+InfrastructureSummary.displayName = "InfrastructureSummary";

package/dist/report/OSDistribution.d.ts

@@ -2,12 +2,10 @@ import type { FC } from "react";
 import { type OSDistributionEntry } from "./osSupportTier.js";
 interface OSDistributionProps {
     osData: Record<string, OSDistributionEntry>;
-    isExportMode?: boolean;
 }
 export declare const OSDistribution: FC<OSDistributionProps>;
 interface OSBarChartProps {
     osData: Record<string, OSDistributionEntry>;
-    isExportMode?: boolean;
 }
 export declare const OSBarChart: FC<OSBarChartProps>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"OSDistribution.d.ts","sourceRoot":"","sources":["../../src/report/OSDistribution.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,EAAE,EAAO,MAAM,OAAO,CAAC;AAQrC,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,oBAAoB,CAAC;AAyB5B,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAyBlD,CAAC;AAEF,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAgH1C,CAAC"}
+{"version":3,"file":"OSDistribution.d.ts","sourceRoot":"","sources":["../../src/report/OSDistribution.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,EAAE,EAAO,MAAM,OAAO,CAAC;AAWrC,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,oBAAoB,CAAC;AAe5B,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;CAC7C;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAmClD,CAAC;AAEF,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;CAC7C;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA0G1C,CAAC"}

package/dist/report/OSDistribution.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { css } from "@emotion/css";
-import { Card, CardBody, CardTitle, Flex, FlexItem, MenuToggle, SearchInput, Select, SelectList, SelectOption, Toolbar, ToolbarContent, ToolbarItem, } from "@patternfly/react-core";
+import { Card, CardBody, CardTitle, Flex, FlexItem, MenuToggle, SearchInput, Select, SelectList, SelectOption, Stack, StackItem, Toolbar, ToolbarContent, ToolbarItem, } from "@patternfly/react-core";
 import { DesktopIcon } from "@patternfly/react-icons";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { chartExportHideProps, chartExportScrollProps } from "./chartExport.js";
 import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
 import { dashboardStyles, tableFullWidthStyle } from "./dashboardStyles.js";
 import { EmptySearchResults } from "./EmptySearchResults.js";
@@ -13,25 +16,17 @@ import { OsNameCell } from "./OsUpgradeRecommendationPopover.js";
 import { getSupportTierLegendLabel, ORDERED_SUPPORT_TIERS, } from "./osSupportTier.js";
 import { SupportTierBadge } from "./SupportTierBadge.js";
 import { ALL_TIERS_FILTER, useOsBarChartViewModel, } from "./useOsBarChartViewModel.js";
-const filterToolbarStyle = css `
-  padding-left: 0;
-  padding-right: 0;
-`;
-const filterItemStyle = css `
-  flex: 1 1 0;
-  min-width: 0;
-`;
-const vmsColumnStyle = css `
-  text-align: right;
-`;
 const tableScrollStyle = css `
   overflow: auto;
+  max-height: 350px;
 `;
-export const OSDistribution = ({ osData, isExportMode = false, }) => (_jsxs(Card, { className: isExportMode ? dashboardStyles.cardPrint : dashboardStyles.card, id: "os-distribution", children: [_jsx(CardTitle, { children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsSm" }, children: [_jsxs(FlexItem, { children: [_jsx(DesktopIcon, {}), " Operating Systems"] }), _jsx(FlexItem, { children: _jsx(OsSupportTiersHelpPopover, {}) })] }) }), _jsx(CardBody, { children: _jsx(OSBarChart, { osData: osData, isExportMode: isExportMode }) })] }));
-export const OSBarChart = ({ osData, isExportMode = false, }) => {
+const OS_DISTRIBUTION_CHART_ID = "os-distribution";
+const OS_DISTRIBUTION_TITLE = "Operating system distribution";
+export const OSDistribution = ({ osData }) => (_jsx(ChartExportSurface, { id: OS_DISTRIBUTION_CHART_ID, title: OS_DISTRIBUTION_TITLE, children: _jsxs(Card, { className: dashboardStyles.card, children: [_jsx(CardTitle, { children: _jsxs(Flex, { justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsx(FlexItem, { children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsSm" }, children: [_jsxs(FlexItem, { children: [_jsx(DesktopIcon, {}), " Operating Systems"] }), _jsx(FlexItem, { ...chartExportHideProps, children: _jsx(OsSupportTiersHelpPopover, {}) })] }) }), _jsx(ChartHeaderActions, { chartId: OS_DISTRIBUTION_CHART_ID, title: OS_DISTRIBUTION_TITLE })] }) }), _jsx(CardBody, { children: _jsx(OSBarChart, { osData: osData }) })] }) }));
+export const OSBarChart = ({ osData }) => {
     const vm = useOsBarChartViewModel(osData);
     if (vm.tableRows.length === 0) {
         return (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.operatingSystems }));
     }
-    return (_jsxs(_Fragment, { children: [!isExportMode ? (_jsx(Toolbar, { className: filterToolbarStyle, children: _jsxs(ToolbarContent, { children: [_jsx(ToolbarItem, { className: filterItemStyle, children: _jsx(SearchInput, { placeholder: "Filter by OS", value: vm.osFilter, onChange: (_event, value) => vm.setOsFilter(value), onClear: vm.clearOsFilter, "aria-label": "Filter operating systems by name" }) }), _jsx(ToolbarItem, { className: filterItemStyle, children: _jsx(Select, { isOpen: vm.isTierSelectOpen, selected: vm.tierFilter, onSelect: vm.handleTierSelect, onOpenChange: vm.setIsTierSelectOpen, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, isExpanded: vm.isTierSelectOpen, onClick: vm.toggleTierSelectOpen, style: { width: "100%" }, children: vm.tierFilterLabel })), "aria-label": "Filter operating systems by support tier", children: _jsxs(SelectList, { children: [_jsx(SelectOption, { value: ALL_TIERS_FILTER, children: "All tiers" }), ORDERED_SUPPORT_TIERS.map((tier) => (_jsx(SelectOption, { value: tier, children: getSupportTierLegendLabel(tier) }, tier)))] }) }) })] }) })) : null, vm.showUpgradeNotice ? _jsx(OsUpgradeNotice, {}) : null, _jsx("div", { className: isExportMode ? undefined : tableScrollStyle, style: isExportMode ? undefined : { maxHeight: "350px" }, children: _jsxs(Table, { "aria-label": "Operating systems", variant: "compact", className: tableFullWidthStyle, children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { children: "OS" }), _jsx(Th, { children: "Tier" }), _jsx(Th, { className: vmsColumnStyle, children: "VMs" })] }) }), _jsx(Tbody, { children: vm.showNoResults ? (_jsx(Tr, { children: _jsx(Td, { colSpan: 3, children: _jsx(EmptySearchResults, { title: "No matching operating system found" }) }) })) : (vm.filteredRows.map((row) => (_jsxs(Tr, { children: [_jsx(Td, { dataLabel: "OS", children: _jsx(OsNameCell, { osName: row.osName, upgradeRecommendation: row.upgradeRecommendation, isExportMode: isExportMode }) }), _jsx(Td, { dataLabel: "Tier", children: _jsx(SupportTierBadge, { tier: row.tier, isExportMode: isExportMode }) }), _jsx(Td, { dataLabel: "VMs", className: vmsColumnStyle, children: row.count })] }, row.osName)))) })] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ...chartExportHideProps, children: _jsx(Toolbar, { hasNoPadding: true, children: _jsxs(ToolbarContent, { children: [_jsx(ToolbarItem, { children: _jsx(SearchInput, { placeholder: "Filter by OS", value: vm.osFilter, onChange: (_event, value) => vm.setOsFilter(value), onClear: vm.clearOsFilter, "aria-label": "Filter operating systems by name" }) }), _jsx(ToolbarItem, { children: _jsx(Select, { isOpen: vm.isTierSelectOpen, selected: vm.tierFilter, onSelect: vm.handleTierSelect, onOpenChange: vm.setIsTierSelectOpen, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, isExpanded: vm.isTierSelectOpen, onClick: vm.toggleTierSelectOpen, isFullWidth: true, children: vm.tierFilterLabel })), "aria-label": "Filter operating systems by support tier", children: _jsxs(SelectList, { children: [_jsx(SelectOption, { value: ALL_TIERS_FILTER, children: "All tiers" }), ORDERED_SUPPORT_TIERS.map((tier) => (_jsx(SelectOption, { value: tier, children: getSupportTierLegendLabel(tier) }, tier)))] }) }) })] }) }) }), _jsxs(Stack, { hasGutter: true, children: [vm.showUpgradeNotice ? (_jsx(StackItem, { children: _jsx(OsUpgradeNotice, {}) })) : null, _jsx(StackItem, { children: _jsx("div", { className: `${tableScrollStyle} ${tableFullWidthStyle}`, ...chartExportScrollProps, children: _jsxs(Table, { "aria-label": "Operating systems", variant: "compact", children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { children: "OS" }), _jsx(Th, { children: "Tier" }), _jsx(Th, { children: "VMs" })] }) }), _jsx(Tbody, { children: vm.showNoResults ? (_jsx(Tr, { children: _jsx(Td, { colSpan: 3, children: _jsx(EmptySearchResults, { title: "No matching operating system found" }) }) })) : (vm.filteredRows.map((row) => (_jsxs(Tr, { children: [_jsx(Td, { dataLabel: "OS", children: _jsx(OsNameCell, { osName: row.osName, upgradeRecommendation: row.upgradeRecommendation }) }), _jsx(Td, { dataLabel: "Tier", children: _jsx(SupportTierBadge, { tier: row.tier }) }), _jsx(Td, { dataLabel: "VMs", children: row.count })] }, row.osName)))) })] }) }) })] })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"OsSupportTiersHelpPopover.d.ts","sourceRoot":"","sources":["../../src/report/OsSupportTiersHelpPopover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAyEhC,eAAO,MAAM,yBAAyB,EAAE,EASvC,CAAC"}
+{"version":3,"file":"OsSupportTiersHelpPopover.d.ts","sourceRoot":"","sources":["../../src/report/OsSupportTiersHelpPopover.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAsChC,eAAO,MAAM,yBAAyB,EAAE,EASvC,CAAC"}

package/dist/report/OsSupportTiersHelpPopover.js

@@ -1,37 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { css } from "@emotion/css";
-import { Label } from "@patternfly/react-core";
+import { Button, Content, Label, Stack, StackItem, } from "@patternfly/react-core";
 import { ExternalLinkAltIcon } from "@patternfly/react-icons";
 import { getSupportTierBadgeColor, getSupportTierDefinition, getSupportTierLegendLabel, ORDERED_SUPPORT_TIERS, SUPPORT_TIER_LEARN_MORE_URL, } from "./osSupportTier.js";
 import PopoverIcon from "./PopoverIcon.js";
-const tierListStyle = css `
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--pf-t--global--spacer--400);
-`;
-const tierItemStyle = css `
-  display: flex;
-  flex-direction: column;
-  gap: var(--pf-t--global--spacer--100);
-`;
-const tierBadgeStyle = css `
-  width: fit-content;
-  max-width: 100%;
-  align-self: flex-start;
-`;
-const tierDescriptionStyle = css `
-  margin: 0;
-  color: var(--pf-t--global--text--color--regular);
-`;
-const learnMoreLinkStyle = css `
-  display: inline-flex;
-  align-items: center;
-  gap: var(--pf-t--global--spacer--xs);
-  margin-top: var(--pf-t--global--spacer--400);
-`;
-const OsSupportTiersHelpBody = () => (_jsxs("div", { children: [_jsx("ul", { className: tierListStyle, children: ORDERED_SUPPORT_TIERS.map((tier) => (_jsxs("li", { className: tierItemStyle, children: [_jsx(Label, { className: tierBadgeStyle, color: getSupportTierBadgeColor(tier), isCompact: true, children: getSupportTierLegendLabel(tier) }), _jsx("p", { className: tierDescriptionStyle, children: getSupportTierDefinition(tier) })] }, tier))) }), _jsxs("a", { "aria-label": "Learn more about operating system support tiers", className: learnMoreLinkStyle, href: SUPPORT_TIER_LEARN_MORE_URL, target: "_blank", rel: "noopener noreferrer", children: ["Learn more ", _jsx(ExternalLinkAltIcon, {})] })] }));
+const OsSupportTiersHelpBody = () => (_jsxs(Stack, { hasGutter: true, children: [ORDERED_SUPPORT_TIERS.map((tier) => (_jsxs(StackItem, { children: [_jsx(Label, { color: getSupportTierBadgeColor(tier), isCompact: true, children: getSupportTierLegendLabel(tier) }), _jsx(Content, { component: "p", children: getSupportTierDefinition(tier) })] }, tier))), _jsx(StackItem, { children: _jsx(Button, { variant: "link", isInline: true, component: "a", href: SUPPORT_TIER_LEARN_MORE_URL, target: "_blank", rel: "noopener noreferrer", icon: _jsx(ExternalLinkAltIcon, {}), iconPosition: "end", "aria-label": "Learn more about operating system support tiers", children: "Learn more" }) })] }));
 export const OsSupportTiersHelpPopover = () => (_jsx(PopoverIcon, { noVerticalAlign: true, maxWidth: "40rem", headerContent: "Guest OS support tiers", bodyContent: _jsx(OsSupportTiersHelpBody, {}), buttonOuiaId: "guest-os-support-tiers-help", "aria-label": "Guest OS support tiers help" }));
 OsSupportTiersHelpPopover.displayName = "OsSupportTiersHelpPopover";

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

@@ -1 +1 @@
-{"version":3,"file":"OsUpgradeNotice.d.ts","sourceRoot":"","sources":["../../src/report/OsUpgradeNotice.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,eAAO,MAAM,eAAe,EAAE,EAiB7B,CAAC"}
+{"version":3,"file":"OsUpgradeNotice.d.ts","sourceRoot":"","sources":["../../src/report/OsUpgradeNotice.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,eAAO,MAAM,eAAe,EAAE,EAgB7B,CAAC"}