@openshift-migration-advisor/shared-components 0.27.0-ad43dbdf05ab → 0.28.0-09381b4d22e5

package/dist/report/VMMigrationStatus.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from "@emotion/css";
+import { Card, CardBody, CardTitle, Content, Dropdown, DropdownItem, DropdownList, Flex, FlexItem, MenuToggle, } from "@patternfly/react-core";
+import { VirtualMachineIcon } from "@patternfly/react-icons";
+import { chart_color_blue_300, chart_color_purple_100, chart_color_purple_300, chart_color_teal_200, 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 { chartExportViewsFromLabels } from "./chartExport.js";
+import { chartColorFailure, chartColorSuccess, REPORT_CARD_EMPTY_STATE_TITLES, } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+const VIEW_MODE_LABELS = {
+    issuesVsNoIssues: "No issues vs with issues",
+    issuesBreakdown: "With issues breakdown",
+};
+const CHART_ID = "vm-migration-status";
+const CHART_TITLE = "VM migration status";
+const MIGRATABLE_LABEL = "Migratable";
+const NOT_MIGRATABLE_LABEL = "Not ready for migration";
+const CATEGORY_ORDER = [
+    { label: "Critical", key: "critical" },
+    { label: "Error", key: "error" },
+    { label: "Warning", key: "warning" },
+    { label: "Information", key: "information" },
+    { label: "Advisory", key: "advisory" },
+];
+/**
+ * Same categorical order as the previous breakdown hex palette, mapped onto
+ * PatternFly `chart_color_*` tokens (nearest token where the old hex was not
+ * itself a token).
+ */
+const CATEGORY_COLORS = {
+    Critical: chart_color_blue_300.value,
+    Error: chart_color_purple_300.value,
+    Warning: chart_color_purple_100.value,
+    Information: chart_color_teal_200.value,
+    Advisory: chart_color_yellow_400.value,
+};
+const menuToggleMinWidth = css `
+  min-width: 250px;
+`;
+const isViewMode = (value) => value === "issuesVsNoIssues" || value === "issuesBreakdown";
+const toCount = (value) => typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : 0;
+export const VMMigrationStatus = ({ data, issuesBreakdown, onReadinessSelect, onCategorySelect, onTitleClick, legendVariant = "html", }) => {
+    const [viewMode, setViewMode] = useState("issuesVsNoIssues");
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const totalVMs = data.migratable + data.nonMigratable;
+    const donutData = [
+        {
+            name: MIGRATABLE_LABEL,
+            count: data.migratable,
+            countDisplay: `${data.migratable} VMs`,
+            legendCategory: MIGRATABLE_LABEL,
+        },
+        {
+            name: NOT_MIGRATABLE_LABEL,
+            count: data.nonMigratable,
+            countDisplay: `${data.nonMigratable} VMs`,
+            legendCategory: NOT_MIGRATABLE_LABEL,
+        },
+    ];
+    const legend = {
+        [MIGRATABLE_LABEL]: chartColorSuccess,
+        [NOT_MIGRATABLE_LABEL]: chartColorFailure,
+    };
+    const breakdownData = useMemo(() => {
+        if (!issuesBreakdown) {
+            return [];
+        }
+        return CATEGORY_ORDER.map(({ label, key }) => ({
+            name: label,
+            count: toCount(issuesBreakdown[key]),
+        }));
+    }, [issuesBreakdown]);
+    const maxCount = useMemo(() => breakdownData.length > 0
+        ? Math.max(...breakdownData.map((d) => d.count))
+        : 0, [breakdownData]);
+    const chartTitle = `${CHART_TITLE} — ${VIEW_MODE_LABELS[viewMode]}`;
+    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, { alignItems: { default: "alignItemsCenter" }, justifyContent: { default: "justifyContentSpaceBetween" }, children: [_jsxs(FlexItem, { children: [_jsx(VirtualMachineIcon, {}), " VM Migration Status"] }), _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: menuToggleMinWidth, children: VIEW_MODE_LABELS[viewMode] })), children: _jsxs(DropdownList, { children: [_jsx(DropdownItem, { value: "issuesVsNoIssues", children: VIEW_MODE_LABELS.issuesVsNoIssues }, "issuesVsNoIssues"), _jsx(DropdownItem, { value: "issuesBreakdown", children: VIEW_MODE_LABELS.issuesBreakdown }, "issuesBreakdown")] }) }) })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: viewMode === "issuesVsNoIssues" ? (totalVMs === 0 ? (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.migrationStatus })) : (_jsx(MigrationDonutChart, { legendVariant: legendVariant, data: donutData, legend: legend, height: 300, width: 420, donutThickness: 18, padAngle: 1, title: `${totalVMs}`, subTitle: "VMs", subTitleColor: "var(--pf-t--global--text--color--subtle)", titleFontSize: 34, legendLabelFormatter: ({ x, countDisplay }) => `${x} (${countDisplay})`, onItemClick: onReadinessSelect
+                            ? (item) => onReadinessSelect(item.name === MIGRATABLE_LABEL)
+                            : undefined, onTitleClick: onTitleClick }))) : breakdownData.length === 0 ? (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.issuesBreakdown })) : (_jsxs("div", { children: [_jsx("div", { className: dashboardStyles.storageChartWrapper, children: _jsx(Flex, { direction: { default: "row" }, alignItems: { default: "alignItemsFlexEnd" }, justifyContent: { default: "justifyContentCenter" }, spaceItems: { default: "spaceItemsMd" }, style: {
+                                        height: "250px",
+                                        width: "100%",
+                                    }, children: breakdownData.map((item) => {
+                                        const heightPercentage = maxCount > 0 ? (item.count / maxCount) * 100 : 0;
+                                        const minHeightPercentage = item.count > 0 ? 20 : 0;
+                                        const finalHeightPercentage = Math.max(heightPercentage, minHeightPercentage);
+                                        const barColor = CATEGORY_COLORS[item.name] || CATEGORY_COLORS.Critical;
+                                        return (_jsxs(Flex, { direction: { default: "column" }, alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsSm" }, style: { flex: "1", maxWidth: "120px" }, children: [_jsx(FlexItem, { style: {
+                                                        height: "200px",
+                                                        display: "flex",
+                                                        alignItems: "flex-end",
+                                                        width: "100%",
+                                                        justifyContent: "center",
+                                                    }, children: _jsx("button", { type: "button", onClick: () => onCategorySelect?.(item.name), title: `${item.name}: ${item.count} VMs`, style: {
+                                                            width: "60px",
+                                                            height: `${finalHeightPercentage}%`,
+                                                            backgroundColor: barColor,
+                                                            transition: "height 0.3s ease",
+                                                            borderRadius: "4px 4px 0 0",
+                                                            cursor: "pointer",
+                                                            border: "none",
+                                                            padding: 0,
+                                                        } }) }), _jsx(FlexItem, { children: _jsxs(Content, { component: "small", style: {
+                                                            fontSize: "12px",
+                                                            textAlign: "center",
+                                                            wordBreak: "break-word",
+                                                            color: "var(--pf-t--global--text--color--regular)",
+                                                        }, children: [item.name, _jsx("br", {}), "(", item.count, " VMs)"] }) })] }, item.name));
+                                    }) }) }), _jsx("div", { children: _jsx(Content, { component: "small", style: {
+                                        fontSize: "12px",
+                                        color: "var(--pf-t--global--text--color--subtle)",
+                                        marginTop: "16px",
+                                        textAlign: "center",
+                                        display: "block",
+                                    }, children: "Totals may exceed the unique VM count because a VM can appear in multiple categories" }) })] })) })] }) }));
+};
+VMMigrationStatus.displayName = "VMMigrationStatus";

package/dist/report/captureChartElement.d.ts

@@ -1,8 +1,13 @@
+export declare const CHART_CAPTURE_SCALE_SINGLE = 2;
+export type CaptureChartElementOptions = {
+    /** Higher scale sharpens text in PNG exports; keep at 1 for bulk PDF/zip. */
+    scale?: number;
+};
 /**
  * Tab panels stay mounted with `hidden` / `display:none` when another tab is
  * active. html2canvas then measures a 0×0 box. Reveal those ancestors off-screen
  * for the duration of the capture, then restore.
  */
 export declare function revealHiddenChartAncestors(element: HTMLElement): () => void;
-export declare function captureChartElement(element: HTMLElement): Promise<HTMLCanvasElement>;
+export declare function captureChartElement(element: HTMLElement, options?: CaptureChartElementOptions): Promise<HTMLCanvasElement>;
 //# sourceMappingURL=captureChartElement.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"captureChartElement.d.ts","sourceRoot":"","sources":["../../src/report/captureChartElement.ts"],"names":[],"mappings":"AAsCA;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,IAAI,CAqD3E;AAuQD,wBAAsB,mBAAmB,CACvC,OAAO,EAAE,WAAW,GACnB,OAAO,CAAC,iBAAiB,CAAC,CAoC5B"}
+{"version":3,"file":"captureChartElement.d.ts","sourceRoot":"","sources":["../../src/report/captureChartElement.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,0BAA0B,IAAI,CAAC;AAG5C,MAAM,MAAM,0BAA0B,GAAG;IACvC,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAwBF;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,IAAI,CAqD3E;AAwQD,wBAAsB,mBAAmB,CACvC,OAAO,EAAE,WAAW,EACpB,OAAO,GAAE,0BAA+B,GACvC,OAAO,CAAC,iBAAiB,CAAC,CA0C5B"}

package/dist/report/captureChartElement.js

@@ -1,8 +1,10 @@
 import { t_color_gray_20, t_color_white, t_global_text_color_regular, } from "@patternfly/react-tokens";
 import html2canvas from "html2canvas-pro";
 import { applyLightThemeToDocument, CHART_EXPORT_CAPTURING_ATTR, CHART_EXPORT_SCROLL_ATTR, shouldIgnoreChartExportElement, } from "./chartExport.js";
-/** CSS-pixel scale; 2x made zip-all of ~15 live cards too slow. */
-const CHART_CAPTURE_SCALE = 1;
+/** Default scale for bulk exports; single-chart PNG uses a higher scale. */
+const CHART_CAPTURE_SCALE_DEFAULT = 1;
+export const CHART_CAPTURE_SCALE_SINGLE = 2;
+const EXPORT_FONT_FAMILY = "RedHatText, Overpass, Helvetica, Arial, sans-serif";
 const HIDDEN_LAYOUT_STYLE_KEYS = [
     "display",
     "position",
@@ -140,6 +142,7 @@ function applyLightThemeSvgText(root) {
         }
         node.style.fill = LIGHT_EXPORT_TEXT;
         node.style.color = LIGHT_EXPORT_TEXT;
+        node.style.fontFamily = EXPORT_FONT_FAMILY;
     }
 }
 function hideCardBeforePseudo() {
@@ -266,7 +269,8 @@ function prepareCaptureLayout(element) {
         }
     };
 }
-export async function captureChartElement(element) {
+export async function captureChartElement(element, options = {}) {
+    const scale = options.scale ?? CHART_CAPTURE_SCALE_DEFAULT;
     const restoreHidden = revealHiddenChartAncestors(element);
     const restoreLayout = prepareCaptureLayout(element);
     element.setAttribute(CHART_EXPORT_CAPTURING_ATTR, "");
@@ -284,14 +288,19 @@ export async function captureChartElement(element) {
             useCORS: true,
             backgroundColor: LIGHT_EXPORT_BACKGROUND,
             logging: false,
-            scale: CHART_CAPTURE_SCALE,
+            scale,
             imageTimeout: 0,
             ignoreElements: (node) => node instanceof Element &&
                 shouldIgnoreChartExportElement(node, element),
             onclone: (clonedDoc, clonedElement) => {
+                // Dropping the dark-theme class off the clone root makes every
+                // PatternFly CSS-variable surface (cards, tables, labels) resolve to
+                // light automatically — html2canvas reads computed styles from this
+                // clone. Only Victory's inlined SVG text needs explicit recoloring.
                 applyLightThemeToDocument(clonedDoc);
                 applyComputedStylesToClone(element, clonedElement);
                 applyLightThemeSvgText(clonedElement);
+                clonedElement.style.fontFamily = EXPORT_FONT_FAMILY;
             },
         });
     }

package/dist/report/chartExport.js

@@ -9,7 +9,7 @@ export const chartExportScrollProps = {
 };
 export const chartExportRootStyle = {
     width: "100%",
-    height: "100%",
+    height: "auto",
 };
 export function releaseCanvas(canvas) {
     canvas.width = 0;

package/dist/report/dashboardStyles.d.ts

@@ -3,6 +3,12 @@ export declare const dashboardStyles: {
     cardScroll: string;
     equalHeightRow: string;
     equalHeight: string;
+    /**
+     * Flex child of {@link dashboardStyles.card}. `min-height: 0` lets the body
+     * shrink inside the card max-height; `overflow: auto` scrolls tables and tall
+     * charts when needed (phantom scrollbars on donut cards are avoided by the
+     * card layout and ChartExportSurface sizing, not a second body class).
+     */
     cardBodyScrollable: string;
     card: string;
     storageCardOverflowHidden: string;

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

@@ -1 +1 @@
-{"version":3,"file":"dashboardStyles.d.ts","sourceRoot":"","sources":["../../src/report/dashboardStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAkF3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAM/B,CAAC"}
+{"version":3,"file":"dashboardStyles.d.ts","sourceRoot":"","sources":["../../src/report/dashboardStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;;;IA8B1B;;;;;OAKG;;;;;;;;;CAkDJ,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAM/B,CAAC"}

package/dist/report/dashboardStyles.js

@@ -25,6 +25,12 @@ export const dashboardStyles = {
     flex: 1 1 0;
     height: 100%;
   `,
+    /**
+     * Flex child of {@link dashboardStyles.card}. `min-height: 0` lets the body
+     * shrink inside the card max-height; `overflow: auto` scrolls tables and tall
+     * charts when needed (phantom scrollbars on donut cards are avoided by the
+     * card layout and ChartExportSurface sizing, not a second body class).
+     */
     cardBodyScrollable: css `
     overflow: auto;
   `,
@@ -32,12 +38,9 @@ export const dashboardStyles = {
     // at the same specificity, which wins in the production build due to stylesheet
     // injection order. `!important` forces `hidden` regardless of that order.
     card: css `
-    min-height: 430px;
-    max-height: 520px;
-    height: 100%;
+    height: 520px;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     overflow: hidden !important;
   `,
     storageCardOverflowHidden: css `

package/dist/report/index.d.ts

@@ -35,10 +35,12 @@ export type { PowerStateChartModel } from "./powerStates.js";
 export { buildHostPowerStateChart, buildVmPowerStateChart, HOST_POWER_COLORS, VM_POWER_COLORS, } from "./powerStates.js";
 export { ExportReportButton, type ExportReportButtonProps, ReportExportMenu, type ReportExportMenuProps, } from "./ReportExportMenu.js";
 export { ReportTable, type ReportTableProps } from "./ReportTable.js";
-export { type ReportExportOption, type StandardReportExportHandlers, standardReportExportOptions, } from "./reportExportOptions.js";
+export { type ReportExportOption, type ReportExportSection, type StandardReportExportHandlers, type StandardReportExportOptionsConfig, standardReportExportOptions, } from "./reportExportOptions.js";
+export { type StorageDiskTierData, StorageOverview, type StorageOverviewProps, } from "./StorageOverview.js";
 export { SupportTierBadge } from "./SupportTierBadge.js";
 export { ALL_TIERS_FILTER, type OsBarChartViewModel, type OsTableRow, useOsBarChartViewModel, } from "./useOsBarChartViewModel.js";
 export { VCenterClusterDetails, type VCenterClusterDetailsProps, } from "./VCenterClusterDetails.js";
+export { type IssuesBreakdownLike, VMMigrationStatus, type VMMigrationStatusProps, } from "./VMMigrationStatus.js";
 export { VmPowerStates, type VmPowerStatesProps, } from "./VmPowerStates.js";
 export { WarningsTable, type WarningsTableProps, } from "./WarningsTable.js";
 export { zipChartPngs } from "./zipChartPngs.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/report/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/report/index.ts"],"names":[],"mappings":"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"}

package/dist/report/index.js

@@ -33,9 +33,11 @@ export { buildHostPowerStateChart, buildVmPowerStateChart, HOST_POWER_COLORS, VM
 export { ExportReportButton, ReportExportMenu, } from "./ReportExportMenu.js";
 export { ReportTable } from "./ReportTable.js";
 export { standardReportExportOptions, } from "./reportExportOptions.js";
+export { StorageOverview, } from "./StorageOverview.js";
 export { SupportTierBadge } from "./SupportTierBadge.js";
 export { ALL_TIERS_FILTER, useOsBarChartViewModel, } from "./useOsBarChartViewModel.js";
 export { VCenterClusterDetails, } from "./VCenterClusterDetails.js";
+export { VMMigrationStatus, } from "./VMMigrationStatus.js";
 export { VmPowerStates, } from "./VmPowerStates.js";
 export { WarningsTable, } from "./WarningsTable.js";
 export { zipChartPngs } from "./zipChartPngs.js";

package/dist/report/reportExportOptions.d.ts

@@ -1,17 +1,28 @@
+export interface ReportExportSection {
+    id: string;
+    label: string;
+}
 export interface ReportExportOption {
     key: string;
     label: string;
     description?: string;
     onSelect: () => void;
     isDisabled?: boolean;
+    /** When set, the menu groups rows and shows `label` as the group heading. */
+    section?: ReportExportSection;
 }
 export interface StandardReportExportHandlers {
     onExportPdf?: () => void;
     onExportPng?: () => void;
     onExportHtml?: () => void;
 }
+export type StandardReportExportOptionsConfig = StandardReportExportHandlers & {
+    /** Dropdown group label for PDF / HTML / PNG. Default: `"Assessment report"`. */
+    assessmentSectionLabel?: string;
+};
 /**
- * Standard report-download actions. Omit a handler to hide that format.
+ * Optional helper for chart-based assessment downloads. Omit a handler to hide
+ * that format. Override `assessmentSectionLabel` if product copy differs per app.
  */
-export declare const standardReportExportOptions: ({ onExportPdf, onExportPng, onExportHtml, }: StandardReportExportHandlers) => ReportExportOption[];
+export declare const standardReportExportOptions: ({ onExportPdf, onExportPng, onExportHtml, assessmentSectionLabel, }: StandardReportExportOptionsConfig) => ReportExportOption[];
 //# sourceMappingURL=reportExportOptions.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"reportExportOptions.d.ts","sourceRoot":"","sources":["../../src/report/reportExportOptions.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,4BAA4B;IAC3C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,2BAA2B,GAAI,6CAIzC,4BAA4B,KAAG,kBAAkB,EA+BnD,CAAC"}
+{"version":3,"file":"reportExportOptions.d.ts","sourceRoot":"","sources":["../../src/report/reportExportOptions.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,MAAM,WAAW,4BAA4B;IAC3C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,MAAM,MAAM,iCAAiC,GAAG,4BAA4B,GAAG;IAC7E,iFAAiF;IACjF,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC,CAAC;AAOF;;;GAGG;AACH,eAAO,MAAM,2BAA2B,GAAI,qEAKzC,iCAAiC,KAAG,kBAAkB,EAmCxD,CAAC"}

package/dist/report/reportExportOptions.js

@@ -1,30 +1,38 @@
+const DEFAULT_ASSESSMENT_SECTION = {
+    id: "assessment-report",
+    label: "Assessment report",
+};
 /**
- * Standard report-download actions. Omit a handler to hide that format.
+ * Optional helper for chart-based assessment downloads. Omit a handler to hide
+ * that format. Override `assessmentSectionLabel` if product copy differs per app.
  */
-export const standardReportExportOptions = ({ onExportPdf, onExportPng, onExportHtml, }) => {
+export const standardReportExportOptions = ({ onExportPdf, onExportPng, onExportHtml, assessmentSectionLabel, }) => {
+    const section = assessmentSectionLabel
+        ? { ...DEFAULT_ASSESSMENT_SECTION, label: assessmentSectionLabel }
+        : DEFAULT_ASSESSMENT_SECTION;
     const options = [];
     if (onExportPdf) {
         options.push({
             key: "pdf",
             label: "PDF",
-            description: "Export the report as a PDF",
             onSelect: onExportPdf,
+            section,
         });
     }
     if (onExportHtml) {
         options.push({
             key: "html",
             label: "HTML",
-            description: "Export the report as HTML",
             onSelect: onExportHtml,
+            section,
         });
     }
     if (onExportPng) {
         options.push({
             key: "png",
             label: "PNG",
-            description: "Download all charts as PNG files",
             onSelect: onExportPng,
+            section,
         });
     }
     return options;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openshift-migration-advisor/shared-components",
-  "version": "0.27.0-ad43dbdf05ab",
+  "version": "0.28.0-09381b4d22e5",
   "description": "Shared React UI components for Migration Advisor apps (report charts, forms, OS support tiers)",
   "author": "Montse Ortega <mortegag@redhat.com>",
   "license": "Apache-2.0",
@@ -46,7 +46,7 @@
     "README.md"
   ],
   "dependencies": {
-    "html2canvas-pro": "^2.5.1",
+    "html2canvas-pro": "^2.5.2",
     "jspdf": "^4.2.1",
     "jszip": "^3.10.2"
   }

package/src/charts/MigrationDonutChart.tsx

@@ -108,6 +108,10 @@ const themedChartTooltipFlyoutPadding = {
   right: 10,
 } as const;
 
+/** Victory SVG text defaults to a serif face; match PatternFly / html2canvas export. */
+const chartTextFontFamily =
+  "RedHatText, Overpass, Helvetica, Arial, sans-serif";
+
 const styles = {
   legendIcon: css`
     margin-right: 4px;
@@ -136,6 +140,7 @@ const styles = {
     background: none;
     padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--ml);
     margin: 0;
+    font-family: ${chartTextFontFamily};
     transition: opacity var(--pf-t--global--motion--duration--short);
     white-space: nowrap;
 
@@ -146,6 +151,7 @@ const styles = {
   legendLabel: css`
     gap: var(--pf-t--global--spacer--lg);
     padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--ml);
+    font-family: ${chartTextFontFamily};
     white-space: nowrap;
   `,
   legendInner: css`
@@ -422,6 +428,7 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
               labels: {
                 fontSize: labelFontSize,
                 fill: "var(--pf-t--global--text--color--regular)",
+                fontFamily: chartTextFontFamily,
               },
             }}
           />
@@ -474,6 +481,7 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
                     fill: titleColor,
                     fontSize: titleFontSize,
                     fontWeight: "bold",
+                    fontFamily: chartTextFontFamily,
                   },
                 ]}
               />
@@ -487,6 +495,7 @@ export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
                   {
                     fill: subTitleColor,
                     fontSize: subTitleFontSize,
+                    fontFamily: chartTextFontFamily,
                   },
                 ]}
               />

package/src/report/ChartExportProvider.tsx

@@ -6,6 +6,7 @@ import {
   useRef,
   useState,
 } from "react";
+import { CHART_CAPTURE_SCALE_SINGLE } from "./captureChartElement.js";
 import {
   type ChartCaptureSource,
   type ChartExportFile,
@@ -29,6 +30,7 @@ import { getChartExportFilename } from "./chartExportFilenames.js";
 
 export type CaptureChartElement = (
   element: HTMLElement,
+  options?: import("./captureChartElement.js").CaptureChartElementOptions,
 ) => Promise<HTMLCanvasElement>;
 export type ZipChartFiles = (files: ChartExportFile[]) => Promise<Blob>;
 export type EncodeChartPng = (canvas: HTMLCanvasElement) => Promise<Blob>;
@@ -227,7 +229,9 @@ export const ChartExportProvider: FC<ChartExportProviderProps> = ({
             throw new Error("The chart is not ready to export yet.");
           }
           const captureFn = await resolveCapture(capture);
-          const canvas = await captureFn(chart.element);
+          const canvas = await captureFn(chart.element, {
+            scale: CHART_CAPTURE_SCALE_SINGLE,
+          });
           try {
             downloadFile(await encodePng(canvas), chart.filename);
           } finally {

package/src/report/FeatureStatusBadge.tsx

@@ -21,7 +21,7 @@ export const FeatureStatusBadge: FC<FeatureStatusBadgeProps> = ({ status }) => {
   }
 
   return (
-    <Label color="grey" isCompact icon={<TimesCircleIcon />}>
+    <Label variant="outline" isCompact icon={<TimesCircleIcon />}>
       Disabled
     </Label>
   );

package/src/report/ReportExportMenu.tsx

@@ -1,5 +1,7 @@
 import {
+  Divider,
   Dropdown,
+  DropdownGroup,
   DropdownItem,
   DropdownList,
   MenuToggle,
@@ -7,13 +9,41 @@ import {
   Spinner,
 } from "@patternfly/react-core";
 import { DownloadIcon } from "@patternfly/react-icons";
-import { type FC, type Ref, useState } from "react";
+import { type FC, type ReactNode, type Ref, useMemo, useState } from "react";
 import {
   type ReportExportOption,
+  type ReportExportSection,
   type StandardReportExportHandlers,
   standardReportExportOptions,
 } from "./reportExportOptions.js";
 
+function sectionGroupKey(section?: ReportExportSection): string | undefined {
+  return section?.id;
+}
+
+function groupExportOptions(options: ReportExportOption[]): {
+  section?: ReportExportSection;
+  options: ReportExportOption[];
+}[] {
+  const groups: {
+    section?: ReportExportSection;
+    options: ReportExportOption[];
+  }[] = [];
+
+  for (const option of options) {
+    const sectionKey = sectionGroupKey(option.section);
+    const last = groups.length > 0 ? groups[groups.length - 1] : undefined;
+    const lastKey = last ? sectionGroupKey(last.section) : undefined;
+    if (last && lastKey === sectionKey) {
+      last.options.push(option);
+    } else {
+      groups.push({ section: option.section, options: [option] });
+    }
+  }
+
+  return groups;
+}
+
 export interface ReportExportMenuProps {
   options: ReportExportOption[];
   isLoading?: boolean;
@@ -31,10 +61,44 @@ export const ReportExportMenu: FC<ReportExportMenuProps> = ({
 }) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
+  const optionGroups = useMemo(() => groupExportOptions(options), [options]);
+
   if (options.length === 0) {
     return null;
   }
 
+  const menuItems: ReactNode[] = [];
+  optionGroups.forEach((group, index) => {
+    if (index > 0) {
+      const dividerKey =
+        group.section?.id ?? group.options[0]?.key ?? "ungrouped";
+      menuItems.push(
+        <Divider key={`divider-before-${dividerKey}`} component="li" />,
+      );
+    }
+
+    const items = group.options.map((option) => (
+      <DropdownItem
+        key={option.key}
+        isDisabled={option.isDisabled}
+        description={option.description}
+        onClick={option.onSelect}
+      >
+        {option.label}
+      </DropdownItem>
+    ));
+
+    if (group.section) {
+      menuItems.push(
+        <DropdownGroup key={group.section.id} label={group.section.label}>
+          {items}
+        </DropdownGroup>,
+      );
+    } else {
+      menuItems.push(...items);
+    }
+  });
+
   return (
     <Dropdown
       isOpen={isDropdownOpen}
@@ -70,18 +134,7 @@ export const ReportExportMenu: FC<ReportExportMenuProps> = ({
         </MenuToggle>
       )}
     >
-      <DropdownList>
-        {options.map((option) => (
-          <DropdownItem
-            key={option.key}
-            isDisabled={option.isDisabled}
-            description={option.description}
-            onClick={option.onSelect}
-          >
-            {option.label}
-          </DropdownItem>
-        ))}
-      </DropdownList>
+      <DropdownList>{menuItems}</DropdownList>
     </Dropdown>
   );
 };
@@ -94,6 +147,7 @@ export interface ExportReportButtonProps extends StandardReportExportHandlers {
   loadingLabel?: string | null;
   isDisabled?: boolean;
   toggleLabel?: string;
+  assessmentSectionLabel?: string;
 }
 
 export const ExportReportButton: FC<ExportReportButtonProps> = ({
@@ -101,6 +155,7 @@ export const ExportReportButton: FC<ExportReportButtonProps> = ({
   onExportPng,
   onExportHtml,
   extraOptions = [],
+  assessmentSectionLabel,
   ...menuProps
 }) => (
   <ReportExportMenu
@@ -109,6 +164,7 @@ export const ExportReportButton: FC<ExportReportButtonProps> = ({
         onExportPdf,
         onExportPng,
         onExportHtml,
+        assessmentSectionLabel,
       }),
       ...extraOptions,
     ]}