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

package/src/report/__tests__/infrastructureSummaryModel.test.ts

@@ -0,0 +1,224 @@
+import { describe, expect, it } from "vitest";
+import {
+  booleanToFeatureStatus,
+  buildClusterDetailRows,
+  buildClusterDetails,
+  buildInfrastructureSummary,
+  countVCenters,
+  formatVSphereVersion,
+  hostCapabilityStatus,
+  type InventoryCluster,
+  type InventoryHost,
+  type InventoryInfra,
+  visibleNetworks,
+  vsanStatus,
+} from "../infrastructureSummaryModel.js";
+
+const createInfra = (
+  overrides: Partial<InventoryInfra> = {},
+): InventoryInfra => ({
+  totalHosts: 0,
+  networks: [],
+  datastores: [],
+  ...overrides,
+});
+
+describe("formatVSphereVersion", () => {
+  it("formats API versions as vSphere labels and drops trailing build zeros", () => {
+    expect(formatVSphereVersion("7.0.3.0")).toBe("vSphere 7.0.3");
+    expect(formatVSphereVersion("8.0.3.0")).toBe("vSphere 8.0.3");
+  });
+
+  it("keeps an existing vSphere prefix and missing values", () => {
+    expect(formatVSphereVersion("vSphere 7.0.3")).toBe("vSphere 7.0.3");
+    expect(formatVSphereVersion(undefined)).toBe("—");
+    expect(formatVSphereVersion("")).toBe("—");
+  });
+});
+
+describe("feature status helpers", () => {
+  it("maps booleans to enabled, disabled, or unknown", () => {
+    expect(booleanToFeatureStatus(true)).toBe("enabled");
+    expect(booleanToFeatureStatus(false)).toBe("disabled");
+    expect(booleanToFeatureStatus(undefined)).toBe("unknown");
+  });
+
+  it("treats vMotion as enabled when any host supports it", () => {
+    const hosts: InventoryHost[] = [
+      { vmotionSupported: false },
+      { vmotionSupported: true },
+    ];
+    expect(hostCapabilityStatus(hosts, "vmotionSupported")).toBe("enabled");
+  });
+
+  it("treats vMotion as disabled when every known host reports false", () => {
+    const hosts: InventoryHost[] = [
+      { vmotionSupported: false },
+      { vmotionSupported: false },
+    ];
+    expect(hostCapabilityStatus(hosts, "vmotionSupported")).toBe("disabled");
+  });
+
+  it("treats missing host capability flags as unknown", () => {
+    expect(hostCapabilityStatus([{}], "vmotionSupported")).toBe("unknown");
+    expect(hostCapabilityStatus([], "vmotionSupported")).toBe("unknown");
+  });
+
+  it("detects vSAN from datastore type or disk type", () => {
+    expect(
+      vsanStatus(
+        createInfra({
+          datastores: [{ type: "vSAN" }],
+        }),
+      ),
+    ).toBe("enabled");
+    expect(
+      vsanStatus(createInfra(), { total: 10, diskTypes: { vSAN: {} } }),
+    ).toBe("enabled");
+    expect(vsanStatus(createInfra({ datastores: [] }))).toBe("disabled");
+    expect(vsanStatus()).toBe("unknown");
+  });
+});
+
+describe("buildInfrastructureSummary", () => {
+  it("maps inventory metadata into the summary card model", () => {
+    const summary = buildInfrastructureSummary({
+      infra: createInfra({
+        totalHosts: 12,
+        totalDatacenters: 1,
+      }),
+      vcenterVersion: "7.0.3.0",
+      vcenterId: "vc-1",
+      clusters: {},
+    });
+
+    expect(summary).toEqual({
+      vmwareVersion: "vSphere 7.0.3",
+      datacenters: 1,
+      vCenters: 1,
+      esxiHosts: 12,
+    });
+  });
+
+  it("falls back to clustersPerDatacenter length and unique vCenter ids", () => {
+    const summary = buildInfrastructureSummary({
+      infra: createInfra({
+        totalHosts: 7,
+        clustersPerDatacenter: [1, 1],
+      }),
+      clusters: {
+        A: {
+          infra: createInfra(),
+          vms: { total: 1 },
+          vcenter: { id: "vc-a" },
+        },
+        B: {
+          infra: createInfra(),
+          vms: { total: 1 },
+          vcenter: { id: "vc-b" },
+        },
+      },
+    });
+
+    expect(summary.datacenters).toBe(2);
+    expect(summary.vCenters).toBe(2);
+  });
+});
+
+describe("countVCenters", () => {
+  it("returns undefined when no vCenter identity is present", () => {
+    expect(countVCenters(undefined, undefined)).toBeUndefined();
+  });
+});
+
+describe("cluster details", () => {
+  it("builds sorted aggregate rows from cluster features", () => {
+    const clusters: Record<string, InventoryCluster> = {
+      "Cluster-Dev-02": {
+        infra: createInfra({
+          totalHosts: 7,
+          hosts: [{ vmotionSupported: true }],
+          datastores: [],
+        }),
+        vms: { total: 350 },
+        clusterFeatures: { drsEnabled: false, haEnabled: true },
+      },
+      "Cluster-Prod-01": {
+        infra: createInfra({
+          totalHosts: 5,
+          hosts: [{ vmotionSupported: true }],
+          datastores: [{ type: "vSAN" }],
+        }),
+        vms: { total: 280 },
+        clusterFeatures: { drsEnabled: true, haEnabled: true },
+      },
+    };
+
+    const rows = buildClusterDetailRows(clusters);
+    expect(rows.map((row) => row.name)).toEqual([
+      "Cluster-Dev-02",
+      "Cluster-Prod-01",
+    ]);
+    expect(rows[0]).toMatchObject({
+      hosts: 7,
+      vms: 350,
+      vmotion: "enabled",
+      drs: "disabled",
+      vsan: "disabled",
+    });
+    expect(rows[1]).toMatchObject({
+      hosts: 5,
+      vms: 280,
+      drs: "enabled",
+      vsan: "enabled",
+    });
+  });
+
+  it("builds the detailed cluster model including HA and network labels", () => {
+    const details = buildClusterDetails({
+      infra: createInfra({
+        totalHosts: 7,
+        hosts: [{ vmotionSupported: true }],
+        networks: [
+          { type: "distributed", name: "VDS-Dev", vlanId: "10" },
+          { type: "distributed", name: "VDS-Dev", vlanId: "11" },
+          { type: "dvswitch", name: "vDSwitch0" },
+        ],
+      }),
+      vms: { total: 350 },
+      clusterFeatures: { drsEnabled: false, haEnabled: true },
+    });
+
+    expect(details).toMatchObject({
+      hosts: 7,
+      vms: 350,
+      networksDetected: 2,
+      vmotion: "enabled",
+      drs: "disabled",
+      ha: "enabled",
+      vsan: "disabled",
+    });
+    expect(details?.networks.map((network) => network.displayName)).toEqual([
+      "VDS-Dev (VLAN 10)",
+      "VDS-Dev (VLAN 11)",
+    ]);
+  });
+});
+
+describe("visibleNetworks", () => {
+  it("omits unnamed networks and dvswitches", () => {
+    expect(
+      visibleNetworks(
+        createInfra({
+          networks: [
+            { type: "distributed", name: "  " },
+            { type: "dvswitch", name: "switch" },
+            { type: "standard", name: "VM Network" },
+          ],
+        }),
+      ),
+    ).toEqual([
+      { name: "VM Network", vlanId: undefined, displayName: "VM Network" },
+    ]);
+  });
+});

package/src/report/__tests__/powerStates.test.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildHostPowerStateChart,
+  buildVmPowerStateChart,
+} from "../powerStates.js";
+
+describe("buildHostPowerStateChart", () => {
+  it("maps overallStatus green to powered on and keeps zero categories", () => {
+    const chart = buildHostPowerStateChart({ green: 7 });
+
+    expect(chart.total).toBe(7);
+    expect(chart.slices.map((slice) => [slice.name, slice.count])).toEqual([
+      ["Powered on", 7],
+      ["Powered off", 0],
+      ["Standby", 0],
+      ["Not responding", 0],
+      ["Maintenance", 0],
+    ]);
+    expect(chart.slices[0].countDisplay).toBe("7 hosts");
+  });
+
+  it("maps explicit host power and maintenance keys", () => {
+    const chart = buildHostPowerStateChart({
+      poweredOn: 5,
+      poweredOff: 1,
+      standBy: 1,
+      notResponding: 1,
+      inMaintenanceMode: 2,
+    });
+
+    expect(chart.total).toBe(10);
+    expect(
+      chart.slices.find((slice) => slice.name === "Maintenance")?.count,
+    ).toBe(2);
+    expect(
+      chart.slices.find((slice) => slice.name === "Not responding")?.count,
+    ).toBe(1);
+  });
+});
+
+describe("buildVmPowerStateChart", () => {
+  it("maps VM power states and omits unused suspended", () => {
+    const chart = buildVmPowerStateChart({
+      poweredOff: 297,
+      poweredOn: 53,
+    });
+
+    expect(chart.total).toBe(350);
+    expect(chart.slices.map((slice) => [slice.name, slice.count])).toEqual([
+      ["Powered off", 297],
+      ["Powered on", 53],
+    ]);
+    expect(chart.slices[0].countDisplay).toBe("297 VMs");
+  });
+
+  it("includes suspended when present", () => {
+    const chart = buildVmPowerStateChart({
+      poweredOn: 10,
+      poweredOff: 2,
+      suspended: 1,
+    });
+
+    expect(chart.slices.map((slice) => slice.name)).toEqual([
+      "Powered off",
+      "Powered on",
+      "Suspended",
+    ]);
+    expect(chart.slices[2].countDisplay).toBe("1 VM");
+  });
+});

package/src/report/captureChartElement.ts

@@ -0,0 +1,368 @@
+import html2canvas from "html2canvas-pro";
+import {
+  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;
+const HIDDEN_LAYOUT_STYLE_KEYS = [
+  "display",
+  "position",
+  "left",
+  "top",
+  "width",
+  "maxHeight",
+  "overflow",
+  "zIndex",
+] as const;
+
+type HiddenLayoutStyleKey = (typeof HIDDEN_LAYOUT_STYLE_KEYS)[number];
+
+type HiddenAncestorSnapshot = {
+  node: HTMLElement;
+  hidden: HTMLElement["hidden"];
+  styles: Record<HiddenLayoutStyleKey, string>;
+};
+
+function isDisplayNone(node: HTMLElement): boolean {
+  return window.getComputedStyle(node).display === "none";
+}
+
+/**
+ * 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 function revealHiddenChartAncestors(element: HTMLElement): () => void {
+  const saved: HiddenAncestorSnapshot[] = [];
+  let node: HTMLElement | null = element;
+
+  while (node && node !== document.documentElement) {
+    if (node.hidden || isDisplayNone(node)) {
+      saved.push({
+        node,
+        hidden: node.hidden,
+        styles: {
+          display: node.style.display,
+          position: node.style.position,
+          left: node.style.left,
+          top: node.style.top,
+          width: node.style.width,
+          maxHeight: node.style.maxHeight,
+          overflow: node.style.overflow,
+          zIndex: node.style.zIndex,
+        },
+      });
+    }
+    node = node.parentElement;
+  }
+
+  if (saved.length === 0) {
+    return () => undefined;
+  }
+
+  const outermost = saved[saved.length - 1].node;
+  const parentWidth = outermost.parentElement?.clientWidth ?? 0;
+  const layoutWidth =
+    parentWidth || document.documentElement.clientWidth || 1024;
+
+  for (const entry of saved) {
+    entry.node.hidden = false;
+    entry.node.style.display = "block";
+    entry.node.style.position = "fixed";
+    entry.node.style.left = "-10000px";
+    entry.node.style.top = "0";
+    entry.node.style.width = `${layoutWidth}px`;
+    entry.node.style.maxHeight = "none";
+    entry.node.style.overflow = "visible";
+    entry.node.style.zIndex = "-1";
+  }
+
+  return () => {
+    for (const entry of saved) {
+      entry.node.hidden = entry.hidden;
+      for (const key of HIDDEN_LAYOUT_STYLE_KEYS) {
+        entry.node.style[key] = entry.styles[key];
+      }
+    }
+  };
+}
+
+const PADDED_CAPTURE_SELECTOR =
+  ".pf-v6-c-card__title, .pf-v6-c-card__header, .pf-v6-c-card__body";
+const CARD_CAPTURE_SELECTOR = ".pf-v6-c-card";
+const TRANSPARENT_FILLS = new Set(["", "transparent", "rgba(0, 0, 0, 0)"]);
+
+function queryCards(root: HTMLElement): HTMLElement[] {
+  const cards = Array.from(
+    root.querySelectorAll<HTMLElement>(CARD_CAPTURE_SELECTOR),
+  );
+  if (root.matches(CARD_CAPTURE_SELECTOR)) {
+    cards.unshift(root);
+  }
+  return cards;
+}
+
+function resolvedFill(color: string): string {
+  return TRANSPARENT_FILLS.has(color) ? "#ffffff" : color;
+}
+
+function applyComputedPadding(source: HTMLElement, dest: HTMLElement): void {
+  const computed = window.getComputedStyle(source);
+  dest.style.paddingTop = computed.paddingTop;
+  dest.style.paddingRight = computed.paddingRight;
+  dest.style.paddingBottom = computed.paddingBottom;
+  dest.style.paddingLeft = computed.paddingLeft;
+}
+
+function readCardBorder(source: HTMLElement): {
+  width: string;
+  style: string;
+  color: string;
+} | null {
+  if (source.style.borderWidth && source.style.borderStyle) {
+    return {
+      width: source.style.borderWidth,
+      style: source.style.borderStyle,
+      color: source.style.borderColor,
+    };
+  }
+  const computed = window.getComputedStyle(source);
+  const before = window.getComputedStyle(source, "::before");
+  const width =
+    before.borderTopWidth && before.borderTopWidth !== "0px"
+      ? before.borderTopWidth
+      : computed.borderTopWidth;
+  const style =
+    before.borderTopStyle && before.borderTopStyle !== "none"
+      ? before.borderTopStyle
+      : computed.borderTopStyle;
+  const color =
+    before.borderTopColor && before.borderTopColor !== "rgba(0, 0, 0, 0)"
+      ? before.borderTopColor
+      : computed.borderTopColor;
+  if (width === "0px" || style === "none") {
+    return null;
+  }
+  return { width, style, color };
+}
+
+function applyCardChrome(source: HTMLElement, dest: HTMLElement): void {
+  const computed = window.getComputedStyle(source);
+  dest.style.borderRadius = computed.borderRadius;
+  dest.style.backgroundColor = resolvedFill(computed.backgroundColor);
+  dest.style.overflow = "hidden";
+  const border = readCardBorder(source);
+  if (border) {
+    dest.style.borderWidth = border.width;
+    dest.style.borderStyle = border.style;
+    dest.style.borderColor = border.color;
+  }
+}
+
+function hideCardBeforePseudo(): () => void {
+  const style = document.createElement("style");
+  style.setAttribute("data-chart-export-hide-before", "");
+  style.textContent = `
+[${CHART_EXPORT_CAPTURING_ATTR}] .pf-v6-c-card::before,
+[${CHART_EXPORT_CAPTURING_ATTR}].pf-v6-c-card::before {
+  border: none !important;
+  box-shadow: none !important;
+}
+`;
+  document.head.append(style);
+  return () => {
+    style.remove();
+  };
+}
+
+function copyComputedPadding(node: HTMLElement): {
+  paddingTop: string;
+  paddingRight: string;
+  paddingBottom: string;
+  paddingLeft: string;
+} {
+  const previous = {
+    paddingTop: node.style.paddingTop,
+    paddingRight: node.style.paddingRight,
+    paddingBottom: node.style.paddingBottom,
+    paddingLeft: node.style.paddingLeft,
+  };
+  applyComputedPadding(node, node);
+  return previous;
+}
+
+function copyCardChrome(node: HTMLElement): {
+  borderRadius: string;
+  backgroundColor: string;
+  overflow: string;
+  overflowPriority: string;
+  borderWidth: string;
+  borderStyle: string;
+  borderColor: string;
+  minHeight: string;
+  height: string;
+  maxHeight: string;
+} {
+  const previous = {
+    borderRadius: node.style.borderRadius,
+    backgroundColor: node.style.backgroundColor,
+    overflow: node.style.getPropertyValue("overflow"),
+    overflowPriority: node.style.getPropertyPriority("overflow"),
+    borderWidth: node.style.borderWidth,
+    borderStyle: node.style.borderStyle,
+    borderColor: node.style.borderColor,
+    minHeight: node.style.minHeight,
+    height: node.style.height,
+    maxHeight: node.style.maxHeight,
+  };
+  applyCardChrome(node, node);
+  node.style.minHeight = "0px";
+  node.style.height = "auto";
+  node.style.maxHeight = "none";
+  return previous;
+}
+
+function applyComputedStylesToClone(
+  sourceRoot: HTMLElement,
+  clonedRoot: HTMLElement,
+): void {
+  const sourceCards = queryCards(sourceRoot);
+  const cloneCards = queryCards(clonedRoot);
+  sourceCards.forEach((source, index) => {
+    const dest = cloneCards[index];
+    if (dest) {
+      applyCardChrome(source, dest);
+    }
+  });
+
+  const sources = sourceRoot.querySelectorAll<HTMLElement>(
+    PADDED_CAPTURE_SELECTOR,
+  );
+  const dests = clonedRoot.querySelectorAll<HTMLElement>(
+    PADDED_CAPTURE_SELECTOR,
+  );
+  sources.forEach((source, index) => {
+    const dest = dests[index];
+    if (dest) {
+      applyComputedPadding(source, dest);
+    }
+  });
+}
+
+function prepareCaptureLayout(element: HTMLElement): () => void {
+  const expandNodes = [
+    element,
+    ...Array.from(
+      element.querySelectorAll<HTMLElement>(
+        `[${CHART_EXPORT_SCROLL_ATTR}], .pf-v6-c-card__body`,
+      ),
+    ),
+  ];
+  const cards = queryCards(element);
+  const paddedNodes = Array.from(
+    element.querySelectorAll<HTMLElement>(PADDED_CAPTURE_SELECTOR),
+  );
+  const previousExpand = expandNodes.map((node) => ({
+    node,
+    overflow: node.style.getPropertyValue("overflow"),
+    overflowPriority: node.style.getPropertyPriority("overflow"),
+    maxHeight: node.style.maxHeight,
+    height: node.style.height,
+  }));
+  const previousChrome = cards.map((node) => ({
+    node,
+    ...copyCardChrome(node),
+  }));
+  const previousPadding = paddedNodes.map((node) => ({
+    node,
+    ...copyComputedPadding(node),
+  }));
+
+  for (const node of expandNodes) {
+    node.style.setProperty("overflow", "visible", "important");
+    node.style.maxHeight = "none";
+    node.style.height = "auto";
+  }
+
+  return () => {
+    for (const entry of previousExpand) {
+      if (entry.overflow) {
+        entry.node.style.setProperty(
+          "overflow",
+          entry.overflow,
+          entry.overflowPriority,
+        );
+      } else {
+        entry.node.style.removeProperty("overflow");
+      }
+      entry.node.style.maxHeight = entry.maxHeight;
+      entry.node.style.height = entry.height;
+    }
+    for (const entry of previousChrome) {
+      entry.node.style.borderRadius = entry.borderRadius;
+      entry.node.style.backgroundColor = entry.backgroundColor;
+      if (entry.overflow) {
+        entry.node.style.setProperty(
+          "overflow",
+          entry.overflow,
+          entry.overflowPriority,
+        );
+      } else {
+        entry.node.style.removeProperty("overflow");
+      }
+      entry.node.style.borderWidth = entry.borderWidth;
+      entry.node.style.borderStyle = entry.borderStyle;
+      entry.node.style.borderColor = entry.borderColor;
+      entry.node.style.minHeight = entry.minHeight;
+      entry.node.style.height = entry.height;
+      entry.node.style.maxHeight = entry.maxHeight;
+    }
+    for (const entry of previousPadding) {
+      entry.node.style.paddingTop = entry.paddingTop;
+      entry.node.style.paddingRight = entry.paddingRight;
+      entry.node.style.paddingBottom = entry.paddingBottom;
+      entry.node.style.paddingLeft = entry.paddingLeft;
+    }
+  };
+}
+
+export async function captureChartElement(
+  element: HTMLElement,
+): Promise<HTMLCanvasElement> {
+  const restoreHidden = revealHiddenChartAncestors(element);
+  const restoreLayout = prepareCaptureLayout(element);
+  element.setAttribute(CHART_EXPORT_CAPTURING_ATTR, "");
+  const restoreCardBefore = hideCardBeforePseudo();
+
+  try {
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => resolve());
+    });
+    if (element.getBoundingClientRect().width < 1) {
+      await new Promise<void>((resolve) => {
+        requestAnimationFrame(() => resolve());
+      });
+    }
+    return html2canvas(element, {
+      useCORS: true,
+      backgroundColor: null,
+      logging: false,
+      scale: CHART_CAPTURE_SCALE,
+      imageTimeout: 0,
+      ignoreElements: (node) =>
+        node instanceof Element &&
+        shouldIgnoreChartExportElement(node, element),
+      onclone: (_clonedDoc, clonedElement) => {
+        applyComputedStylesToClone(element, clonedElement);
+      },
+    });
+  } finally {
+    restoreCardBefore();
+    element.removeAttribute(CHART_EXPORT_CAPTURING_ATTR);
+    restoreLayout();
+    restoreHidden();
+  }
+}