@openshift-migration-advisor/shared-components 0.24.0 → 0.25.0-1c27267d2ea6

package/dist/report/powerStates.js

@@ -0,0 +1,113 @@
+const HOST_POWER_CATEGORIES = [
+    "Powered on",
+    "Powered off",
+    "Standby",
+    "Not responding",
+    "Maintenance",
+];
+const HOST_POWER_KEY_ALIASES = {
+    poweredon: "Powered on",
+    powered_on: "Powered on",
+    green: "Powered on",
+    poweredoff: "Powered off",
+    powered_off: "Powered off",
+    standby: "Standby",
+    stand_by: "Standby",
+    notresponding: "Not responding",
+    not_responding: "Not responding",
+    gray: "Not responding",
+    grey: "Not responding",
+    red: "Not responding",
+    maintenance: "Maintenance",
+    inmaintenance: "Maintenance",
+    inmaintenancemode: "Maintenance",
+};
+export const HOST_POWER_COLORS = {
+    "Powered on": "#0066cc",
+    "Powered off": "#dca614",
+    Standby: "#f0ab00",
+    "Not responding": "#c9190b",
+    Maintenance: "#002f5d",
+};
+const VM_POWER_CATEGORIES = ["Powered off", "Powered on", "Suspended"];
+const VM_POWER_KEY_ALIASES = {
+    poweredoff: "Powered off",
+    powered_off: "Powered off",
+    poweredon: "Powered on",
+    powered_on: "Powered on",
+    suspended: "Suspended",
+};
+export const VM_POWER_COLORS = {
+    "Powered off": "#0066cc",
+    "Powered on": "#dca614",
+    Suspended: "#5e40be",
+};
+const OTHER_COLOR = "#6a6e73";
+const normalizeKey = (key) => key
+    .trim()
+    .toLowerCase()
+    .replace(/[\s-]+/g, "");
+const formatUnknownLabel = (key) => {
+    const spaced = key
+        .replace(/[_-]+/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .trim();
+    if (!spaced) {
+        return "Unknown";
+    }
+    return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+};
+const toSlice = (name, count, unit) => ({
+    name,
+    count,
+    legendCategory: name,
+    countDisplay: `${count} ${count === 1 ? unit.replace(/s$/, "") : unit}`,
+});
+const sumCounts = (counts) => Object.values(counts).reduce((total, count) => total + (count || 0), 0);
+export const buildHostPowerStateChart = (hostPowerStates) => {
+    const counts = Object.fromEntries(HOST_POWER_CATEGORIES.map((category) => [category, 0]));
+    for (const [key, count] of Object.entries(hostPowerStates ?? {})) {
+        const mapped = HOST_POWER_KEY_ALIASES[normalizeKey(key)];
+        const label = mapped ?? formatUnknownLabel(key);
+        counts[label] = (counts[label] ?? 0) + (count || 0);
+    }
+    const orderedLabels = [
+        ...HOST_POWER_CATEGORIES,
+        ...Object.keys(counts).filter((label) => !HOST_POWER_CATEGORIES.includes(label)),
+    ];
+    const slices = orderedLabels.map((label) => toSlice(label, counts[label] ?? 0, "hosts"));
+    const legend = {};
+    for (const label of orderedLabels) {
+        legend[label] = HOST_POWER_COLORS[label] ?? OTHER_COLOR;
+    }
+    return {
+        slices,
+        legend,
+        total: sumCounts(counts),
+    };
+};
+export const buildVmPowerStateChart = (powerStates) => {
+    const counts = {
+        "Powered off": 0,
+        "Powered on": 0,
+    };
+    for (const [key, count] of Object.entries(powerStates ?? {})) {
+        const mapped = VM_POWER_KEY_ALIASES[normalizeKey(key)];
+        const label = mapped ?? formatUnknownLabel(key);
+        counts[label] = (counts[label] ?? 0) + (count || 0);
+    }
+    const orderedLabels = [
+        ...VM_POWER_CATEGORIES.filter((category) => category !== "Suspended" || (counts[category] ?? 0) > 0),
+        ...Object.keys(counts).filter((label) => !VM_POWER_CATEGORIES.includes(label)),
+    ];
+    const slices = orderedLabels.map((label) => toSlice(label, counts[label] ?? 0, "VMs"));
+    const legend = {};
+    for (const label of orderedLabels) {
+        legend[label] = VM_POWER_COLORS[label] ?? OTHER_COLOR;
+    }
+    return {
+        slices,
+        legend,
+        total: sumCounts(counts),
+    };
+};

package/dist/report/reportExportOptions.d.ts

@@ -0,0 +1,17 @@
+export interface ReportExportOption {
+    key: string;
+    label: string;
+    description?: string;
+    onSelect: () => void;
+    isDisabled?: boolean;
+}
+export interface StandardReportExportHandlers {
+    onExportPdf?: () => void;
+    onExportPng?: () => void;
+    onExportHtml?: () => void;
+}
+/**
+ * Standard report-download actions. Omit a handler to hide that format.
+ */
+export declare const standardReportExportOptions: ({ onExportPdf, onExportPng, onExportHtml, }: StandardReportExportHandlers) => ReportExportOption[];
+//# sourceMappingURL=reportExportOptions.d.ts.map

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

@@ -0,0 +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"}

package/dist/report/reportExportOptions.js

@@ -0,0 +1,31 @@
+/**
+ * Standard report-download actions. Omit a handler to hide that format.
+ */
+export const standardReportExportOptions = ({ onExportPdf, onExportPng, onExportHtml, }) => {
+    const options = [];
+    if (onExportPdf) {
+        options.push({
+            key: "pdf",
+            label: "PDF",
+            description: "Export the report as a PDF",
+            onSelect: onExportPdf,
+        });
+    }
+    if (onExportHtml) {
+        options.push({
+            key: "html",
+            label: "HTML",
+            description: "Export the report as HTML",
+            onSelect: onExportHtml,
+        });
+    }
+    if (onExportPng) {
+        options.push({
+            key: "png",
+            label: "PNG",
+            description: "Download all charts as PNG files",
+            onSelect: onExportPng,
+        });
+    }
+    return options;
+};

package/dist/report/zipChartPngs.d.ts

@@ -0,0 +1,3 @@
+import type { ChartExportFile } from "./chartExport.js";
+export declare function zipChartPngs(files: ChartExportFile[]): Promise<Blob>;
+//# sourceMappingURL=zipChartPngs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zipChartPngs.d.ts","sourceRoot":"","sources":["../../src/report/zipChartPngs.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,wBAAsB,YAAY,CAAC,KAAK,EAAE,eAAe,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAM1E"}

package/dist/report/zipChartPngs.js

@@ -0,0 +1,8 @@
+import JSZip from "jszip";
+export async function zipChartPngs(files) {
+    const zip = new JSZip();
+    for (const file of files) {
+        zip.file(file.filename, file.blob);
+    }
+    return zip.generateAsync({ type: "blob", compression: "STORE" });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openshift-migration-advisor/shared-components",
-  "version": "0.24.0",
+  "version": "0.25.0-1c27267d2ea6",
   "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",
@@ -44,5 +44,10 @@
     "src",
     "LICENSE",
     "README.md"
-  ]
+  ],
+  "dependencies": {
+    "html2canvas-pro": "^2.4.5",
+    "jspdf": "^4.2.1",
+    "jszip": "^3.10.2"
+  }
 }

package/src/charts/index.ts

@@ -1,5 +1,6 @@
 export {
   MigrationDonutChart,
   type MigrationDonutChartDatum,
+  type MigrationDonutChartLegendVariant,
   type MigrationDonutChartProps,
 } from "./MigrationDonutChart.js";

package/src/forms/RadioButtonFormGroup.tsx

@@ -33,12 +33,19 @@ export default function RadioButtonFormGroup({
   const showError = error && (isTouched || isSubmitted);
 
   return (
-    <FormGroup label={label} isRequired={isRequired} fieldId={id} {...props}>
+    <FormGroup
+      label={label}
+      isRequired={isRequired}
+      fieldId={id}
+      role="radiogroup"
+      isInline
+      {...props}
+    >
       <Controller
         name={name}
         control={methods.control}
         render={({ field }) => (
-          <div style={{ display: "flex", gap: "16px" }} role="radiogroup">
+          <>
             {options.map((option) => (
               <Radio
                 key={option.value}
@@ -50,7 +57,7 @@ export default function RadioButtonFormGroup({
                 onBlur={field.onBlur}
               />
             ))}
-          </div>
+          </>
         )}
       />
       <FormFieldHelperText

package/src/report/ChartDownloadButton.tsx

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

package/src/report/ChartExportProvider.tsx

@@ -0,0 +1,384 @@
+import {
+  type FC,
+  type ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  type ChartCaptureSource,
+  type ChartExportFile,
+  canvasToBlob,
+  downloadBlob,
+  type RegisteredChart,
+  releaseCanvas,
+  restoreChartExportViews,
+  sortRegisteredChartsByDocumentOrder,
+  toBulkChartCaptureSources,
+} from "./chartExport.js";
+import {
+  type ChartExportApi,
+  ChartExportApiContext,
+  type ChartExportFormat,
+  type ChartExportRegistry,
+  ChartExportRegistryContext,
+} from "./chartExportContext.js";
+import { getChartExportFilename } from "./chartExportFilenames.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;
+}
+
+const EXPORT_LOADING_LABELS: Record<ChartExportFormat, string> = {
+  pdf: "Generating PDF...",
+  png: "Generating PNG...",
+  html: "Generating HTML...",
+};
+
+const defaultZipFilename = (): string => getChartExportFilename("zip");
+const defaultPdfFilename = (): string => getChartExportFilename("pdf");
+const defaultHtmlFilename = (): string => getChartExportFilename("html");
+
+async function resolveCapture(
+  override?: CaptureChartElement,
+): Promise<CaptureChartElement> {
+  if (override) {
+    return override;
+  }
+  const { captureChartElement } = await import("./captureChartElement.js");
+  return captureChartElement;
+}
+
+async function resolvePrepareElement(
+  overrideCapture?: CaptureChartElement,
+): Promise<((element: HTMLElement) => () => void) | undefined> {
+  if (overrideCapture) {
+    return undefined;
+  }
+  const { revealHiddenChartAncestors } = await import(
+    "./captureChartElement.js"
+  );
+  return revealHiddenChartAncestors;
+}
+
+async function resolveZip(override?: ZipChartFiles): Promise<ZipChartFiles> {
+  if (override) {
+    return override;
+  }
+  const { zipChartPngs } = await import("./zipChartPngs.js");
+  return zipChartPngs;
+}
+
+async function resolvePdf(
+  override?: BuildChartDocument,
+): Promise<BuildChartDocument> {
+  if (override) {
+    return override;
+  }
+  const { buildPdfFromCharts } = await import("./pdfExport.js");
+  return buildPdfFromCharts;
+}
+
+async function resolveHtml(
+  override?: BuildChartDocument,
+): Promise<BuildChartDocument> {
+  if (override) {
+    return override;
+  }
+  const { buildHtmlFromCharts } = await import("./htmlExport.js");
+  return buildHtmlFromCharts;
+}
+
+function toCaptureSources(
+  charts: RegisteredChart[],
+  capture: CaptureChartElement,
+  prepareElement?: (element: HTMLElement) => () => void,
+): ChartCaptureSource[] {
+  return toBulkChartCaptureSources(charts, capture, prepareElement);
+}
+
+export const ChartExportProvider: FC<ChartExportProviderProps> = ({
+  children,
+  capture,
+  zipFiles,
+  encodePng = canvasToBlob,
+  buildPdf,
+  buildHtml,
+  downloadFile = downloadBlob,
+  getZipFilename = defaultZipFilename,
+  getPdfFilename = defaultPdfFilename,
+  getHtmlFilename = defaultHtmlFilename,
+}) => {
+  const chartsRef = useRef(new Map<string, RegisteredChart>());
+  const isBusyRef = useRef(false);
+  const [downloadingChartId, setDownloadingChartId] = useState<string | null>(
+    null,
+  );
+  const [exportingFormat, setExportingFormat] =
+    useState<ChartExportFormat | null>(null);
+  const [exportError, setExportError] = useState<string | null>(null);
+
+  const registry = useMemo<ChartExportRegistry>(
+    () => ({
+      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((): RegisteredChart[] => {
+    return sortRegisteredChartsByDocumentOrder(
+      Array.from(chartsRef.current.values()).filter(
+        (chart) => chart.element.isConnected,
+      ),
+    );
+  }, []);
+
+  const runCapture = useCallback(
+    async (
+      work: () => Promise<void>,
+      chartId: string | null,
+      format: ChartExportFormat,
+    ) => {
+      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: string) => {
+      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: ChartExportFile[] = [];
+        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: string) => {
+      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: string) => {
+      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<ChartExportApi>(
+    () => ({
+      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 (
+    <ChartExportRegistryContext.Provider value={registry}>
+      <ChartExportApiContext.Provider value={api}>
+        {children}
+      </ChartExportApiContext.Provider>
+    </ChartExportRegistryContext.Provider>
+  );
+};
+
+ChartExportProvider.displayName = "ChartExportProvider";