@openshift-migration-advisor/shared-components 0.24.0 → 0.25.0-0ad1e70d1fa5

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";

package/src/report/ChartExportSurface.tsx

@@ -0,0 +1,60 @@
+import { type FC, type ReactNode, useCallback, useRef } from "react";
+import {
+  type ChartExportView,
+  chartExportRootStyle,
+  waitForChartExportPaint,
+} from "./chartExport.js";
+import { useRegisterChart } from "./chartExportContext.js";
+
+export const ChartExportSurface: FC<{
+  id: string;
+  title: string;
+  filename?: string;
+  exportViews?: ChartExportView[];
+  activeExportViewId?: string;
+  onExportViewChange?: (viewId: string) => void;
+  children: ReactNode;
+}> = ({
+  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: string) => {
+    const change = onExportViewChangeRef.current;
+    if (change && activeViewRef.current !== viewId) {
+      change(viewId);
+      await new Promise<void>((resolve) => {
+        window.setTimeout(resolve, 0);
+      });
+    }
+    await waitForChartExportPaint();
+  }, []);
+
+  const ref = useRegisterChart({
+    id,
+    title,
+    filename,
+    exportViews,
+    activeExportViewId,
+    setExportView:
+      exportViews && exportViews.length > 1 && onExportViewChange
+        ? setExportView
+        : undefined,
+  });
+  return (
+    <div ref={ref} id={id} style={chartExportRootStyle}>
+      {children}
+    </div>
+  );
+};
+
+ChartExportSurface.displayName = "ChartExportSurface";

package/src/report/FeatureStatusBadge.tsx

@@ -0,0 +1,30 @@
+import { Label } from "@patternfly/react-core";
+import { CheckCircleIcon, TimesCircleIcon } from "@patternfly/react-icons";
+import type { FC } from "react";
+import type { FeatureStatus } from "./infrastructureSummaryModel.js";
+
+export interface FeatureStatusBadgeProps {
+  status: FeatureStatus;
+}
+
+export const FeatureStatusBadge: FC<FeatureStatusBadgeProps> = ({ status }) => {
+  if (status === "unknown") {
+    return <span>—</span>;
+  }
+
+  if (status === "enabled") {
+    return (
+      <Label color="green" isCompact icon={<CheckCircleIcon />}>
+        Enabled
+      </Label>
+    );
+  }
+
+  return (
+    <Label color="grey" isCompact icon={<TimesCircleIcon />}>
+      Disabled
+    </Label>
+  );
+};
+
+FeatureStatusBadge.displayName = "FeatureStatusBadge";

package/src/report/HostPowerStates.tsx

@@ -0,0 +1,38 @@
+import { ServerIcon } from "@patternfly/react-icons";
+import type { FC } from "react";
+import { useMemo } from "react";
+import type { MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { PowerStateCard } from "./PowerStateCard.js";
+import { buildHostPowerStateChart } from "./powerStates.js";
+
+export interface HostPowerStatesProps {
+  hostPowerStates?: Record<string, number>;
+  legendVariant?: MigrationDonutChartLegendVariant;
+}
+
+export const HostPowerStates: FC<HostPowerStatesProps> = ({
+  hostPowerStates,
+  legendVariant,
+}) => {
+  const chart = useMemo(
+    () => buildHostPowerStateChart(hostPowerStates),
+    [hostPowerStates],
+  );
+
+  return (
+    <PowerStateCard
+      id="esxi-host-power-states"
+      title="ESXi host power states"
+      icon={<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/src/report/InfrastructureSummary.tsx

@@ -0,0 +1,73 @@
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Flex,
+  FlexItem,
+} from "@patternfly/react-core";
+import type { FC } from "react";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import type { InfrastructureSummaryModel } from "./infrastructureSummaryModel.js";
+
+export interface InfrastructureSummaryProps {
+  summary: InfrastructureSummaryModel;
+}
+
+const formatCount = (value: number | undefined): string =>
+  typeof value === "number" ? String(value) : "—";
+
+const INFRA_CHART_ID = "infrastructure-summary";
+const INFRA_TITLE = "Infrastructure summary";
+
+export const InfrastructureSummary: FC<InfrastructureSummaryProps> = ({
+  summary,
+}) => (
+  <ChartExportSurface id={INFRA_CHART_ID} title={INFRA_TITLE}>
+    <Card isFullHeight>
+      <CardTitle>
+        <Flex
+          justifyContent={{ default: "justifyContentSpaceBetween" }}
+          alignItems={{ default: "alignItemsCenter" }}
+        >
+          <FlexItem>{INFRA_TITLE}</FlexItem>
+          <ChartHeaderActions chartId={INFRA_CHART_ID} title={INFRA_TITLE} />
+        </Flex>
+      </CardTitle>
+      <CardBody>
+        <DescriptionList isAutoFit displaySize="lg">
+          <DescriptionListGroup>
+            <DescriptionListTerm>VMware version</DescriptionListTerm>
+            <DescriptionListDescription>
+              {summary.vmwareVersion}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Datacenters</DescriptionListTerm>
+            <DescriptionListDescription>
+              {formatCount(summary.datacenters)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>vCenters</DescriptionListTerm>
+            <DescriptionListDescription>
+              {formatCount(summary.vCenters)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>ESXi hosts</DescriptionListTerm>
+            <DescriptionListDescription>
+              {formatCount(summary.esxiHosts)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        </DescriptionList>
+      </CardBody>
+    </Card>
+  </ChartExportSurface>
+);
+
+InfrastructureSummary.displayName = "InfrastructureSummary";