@openshift-migration-advisor/shared-components 0.25.0 → 0.27.0-3f8ae10b086b

package/src/report/CpuAndMemoryOverview.tsx

@@ -0,0 +1,277 @@
+import { css } from "@emotion/css";
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Flex,
+  FlexItem,
+  MenuToggle,
+  type MenuToggleElement,
+} from "@patternfly/react-core";
+import { DataProcessorIcon } from "@patternfly/react-icons";
+import type { FC, Ref } from "react";
+import { useMemo, useState } from "react";
+import {
+  MigrationDonutChart,
+  type MigrationDonutChartDatum,
+  type MigrationDonutChartLegendVariant,
+} 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 { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+
+export interface CpuAndMemoryOverviewProps {
+  cpuTierDistribution?: Record<string, number>;
+  memoryTierDistribution?: Record<string, number>;
+  memoryTotalGB?: number;
+  cpuTotalCores?: number;
+  /**
+   * Memory-tier slice click. The argument is the distribution key.
+   * Agent-ui maps it to a VM memory filter; ui-app omits it.
+   */
+  onTierSelect?: (tierLabel: string) => void;
+  /** Center-title click. Agent-ui opens the VM list with no extra filters. */
+  onTitleClick?: () => void;
+  /** `"html"` in agent-ui; ui-app passes `"chart"`. */
+  legendVariant?: MigrationDonutChartLegendVariant;
+}
+
+type ViewMode = "memoryTiers" | "vcpuTiers";
+
+const VIEW_MODE_LABELS: Record<ViewMode, string> = {
+  memoryTiers: "VM distribution by memory size tier",
+  vcpuTiers: "VM distribution by vCPU count tier",
+};
+
+const VIEW_SUBTITLES: Record<ViewMode, string> = {
+  memoryTiers: "Memory size tiers",
+  vcpuTiers: "vCPU count tiers",
+};
+
+/**
+ * Categorical order shared by the agent-ui and ui-app CPU/memory donuts.
+ */
+const TIER_COLORS = [
+  "#0066cc",
+  "#5e40be",
+  "#b6a6e9",
+  "#73c5c5",
+  "#b98412",
+  "#28a745",
+  "#f0ad4e",
+  "#d9534f",
+  "#009596",
+  "#6a6e73",
+];
+
+const CHART_ID = "cpu-memory-overview";
+const CHART_TITLE = "CPU & memory";
+
+const cardSubtitle = css`
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: 0.85rem;
+`;
+
+const menuToggleMinWidth = css`
+  min-width: 290px;
+`;
+
+const titleRow = css`
+  width: 100%;
+`;
+
+const isViewMode = (value: string | number | undefined): value is ViewMode =>
+  value === "memoryTiers" || value === "vcpuTiers";
+
+const tierSortKey = (label: string): number => {
+  const value = Number.parseInt(label.trim(), 10);
+  return Number.isFinite(value) ? value : Number.MAX_SAFE_INTEGER;
+};
+
+const hasUnit = (label: string, unit: "GB" | "cores"): boolean =>
+  unit === "GB" ? /gb$/i.test(label) : /cores?$/i.test(label);
+
+const slicesFromDistribution = (
+  distribution: Record<string, number> | undefined,
+  unit: "GB" | "cores",
+): MigrationDonutChartDatum[] =>
+  Object.entries(distribution ?? {})
+    .filter(([, count]) => Number(count) > 0)
+    .sort(([left], [right]) => tierSortKey(left) - tierSortKey(right))
+    .map(([tier, count]) => {
+      const trimmed = tier.trim();
+      const name = hasUnit(trimmed, unit) ? trimmed : `${trimmed} ${unit}`;
+      const vmCount = Number(count);
+      return {
+        name,
+        count: vmCount,
+        countDisplay: `${vmCount} VMs`,
+        legendCategory: tier,
+      };
+    });
+
+const legendFor = (categories: string[]): Record<string, string> => {
+  const legend: Record<string, string> = {};
+  categories.forEach((category, index) => {
+    const color = TIER_COLORS[index % TIER_COLORS.length];
+    if (color) {
+      legend[category] = color;
+    }
+  });
+  return legend;
+};
+
+export const CpuAndMemoryOverview: FC<CpuAndMemoryOverviewProps> = ({
+  cpuTierDistribution,
+  memoryTierDistribution,
+  memoryTotalGB,
+  cpuTotalCores,
+  onTierSelect,
+  onTitleClick,
+  legendVariant = "html",
+}) => {
+  const [viewMode, setViewMode] = useState<ViewMode>("memoryTiers");
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const memorySlices = useMemo(
+    () => slicesFromDistribution(memoryTierDistribution, "GB"),
+    [memoryTierDistribution],
+  );
+  const vcpuSlices = useMemo(
+    () => slicesFromDistribution(cpuTierDistribution, "cores"),
+    [cpuTierDistribution],
+  );
+
+  const activeSlices = viewMode === "memoryTiers" ? memorySlices : vcpuSlices;
+  const legend = useMemo(
+    () => legendFor(activeSlices.map((slice) => slice.legendCategory)),
+    [activeSlices],
+  );
+  const totalVMs = useMemo(
+    () => activeSlices.reduce((sum, slice) => sum + slice.count, 0),
+    [activeSlices],
+  );
+
+  const chartTitle = `${CHART_TITLE} — ${VIEW_MODE_LABELS[viewMode]}`;
+  const subTitle =
+    viewMode === "memoryTiers"
+      ? typeof memoryTotalGB === "number"
+        ? `${memoryTotalGB.toLocaleString()} GB`
+        : undefined
+      : typeof cpuTotalCores === "number"
+        ? `${cpuTotalCores.toLocaleString()} Cores`
+        : undefined;
+  const emptyTitle =
+    viewMode === "memoryTiers"
+      ? REPORT_CARD_EMPTY_STATE_TITLES.memory
+      : REPORT_CARD_EMPTY_STATE_TITLES.cpu;
+
+  return (
+    <ChartExportSurface
+      id={CHART_ID}
+      title={chartTitle}
+      exportViews={chartExportViewsFromLabels(CHART_TITLE, VIEW_MODE_LABELS)}
+      activeExportViewId={viewMode}
+      onExportViewChange={(viewId) => {
+        if (isViewMode(viewId)) {
+          setViewMode(viewId);
+        }
+      }}
+    >
+      <Card className={dashboardStyles.card}>
+        <CardTitle>
+          <Flex
+            className={titleRow}
+            justifyContent={{ default: "justifyContentSpaceBetween" }}
+            alignItems={{ default: "alignItemsCenter" }}
+          >
+            <FlexItem>
+              <div>
+                <div>
+                  <DataProcessorIcon /> {CHART_TITLE}
+                </div>
+                <div className={cardSubtitle}>{VIEW_SUBTITLES[viewMode]}</div>
+              </div>
+            </FlexItem>
+            <ChartHeaderActions chartId={CHART_ID} title={chartTitle}>
+              <Dropdown
+                isOpen={isDropdownOpen}
+                onSelect={(_event, value) => {
+                  if (isViewMode(value)) {
+                    setViewMode(value);
+                  }
+                  setIsDropdownOpen(false);
+                }}
+                onOpenChange={setIsDropdownOpen}
+                toggle={(toggleRef: Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    onClick={() => setIsDropdownOpen((open) => !open)}
+                    isExpanded={isDropdownOpen}
+                    className={menuToggleMinWidth}
+                  >
+                    {VIEW_MODE_LABELS[viewMode]}
+                  </MenuToggle>
+                )}
+              >
+                <DropdownList>
+                  <DropdownItem value="memoryTiers" key="memoryTiers">
+                    {VIEW_MODE_LABELS.memoryTiers}
+                  </DropdownItem>
+                  <DropdownItem value="vcpuTiers" key="vcpuTiers">
+                    {VIEW_MODE_LABELS.vcpuTiers}
+                  </DropdownItem>
+                </DropdownList>
+              </Dropdown>
+            </ChartHeaderActions>
+          </Flex>
+        </CardTitle>
+        <CardBody className={dashboardStyles.cardBodyScrollable}>
+          {activeSlices.length === 0 ? (
+            <CardEmptyState title={emptyTitle} />
+          ) : (
+            <MigrationDonutChart
+              legendVariant={legendVariant}
+              data={activeSlices}
+              legend={legend}
+              height={300}
+              width={420}
+              donutThickness={18}
+              titleFontSize={34}
+              title={`${totalVMs} VMs`}
+              subTitle={subTitle}
+              subTitleColor="var(--pf-t--global--text--color--subtle)"
+              legendLabelFormatter={({ x, countDisplay }) =>
+                `${x} (${countDisplay})`
+              }
+              tooltipLabelFormatter={({ datum, percent }) =>
+                `${datum.countDisplay}\n${percent.toFixed(1)}%`
+              }
+              itemsPerRow={
+                legendVariant === "chart"
+                  ? Math.ceil(activeSlices.length / 2)
+                  : undefined
+              }
+              labelFontSize={legendVariant === "chart" ? 18 : undefined}
+              marginLeft={legendVariant === "chart" ? "52%" : undefined}
+              onItemClick={
+                viewMode === "memoryTiers" && onTierSelect
+                  ? (item) => onTierSelect(item.legendCategory)
+                  : undefined
+              }
+              onTitleClick={onTitleClick}
+            />
+          )}
+        </CardBody>
+      </Card>
+    </ChartExportSurface>
+  );
+};
+
+CpuAndMemoryOverview.displayName = "CpuAndMemoryOverview";

package/src/report/ErrorTable.tsx

@@ -0,0 +1,85 @@
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Flex,
+  FlexItem,
+  Icon,
+} from "@patternfly/react-core";
+import { ExclamationCircleIcon } from "@patternfly/react-icons";
+import type React from "react";
+import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+import { ReportTable } from "./ReportTable.js";
+
+/**
+ * Minimal shape of a migration issue consumed by {@link ErrorTable}. Declared
+ * locally so this package does not depend on a specific SDK (`agent-sdk` or
+ * `planner-sdk`); callers pass the subset of `MigrationIssue` fields read here.
+ */
+export interface MigrationIssueLike {
+  label: string;
+  assessment: string;
+  count: number;
+}
+
+export interface ErrorTableProps {
+  errors: MigrationIssueLike[];
+  /** Optional drill-down callback invoked with an issue's `label`. */
+  onConcernClick?: (concernLabel: string) => void;
+}
+
+export const ErrorTable: React.FC<ErrorTableProps> = ({
+  errors,
+  onConcernClick,
+}) => {
+  const handleRowClick = (issue: MigrationIssueLike) => {
+    if (issue.label && onConcernClick) {
+      onConcernClick(issue.label);
+    }
+  };
+
+  const chartId = "errors-table";
+  const chartTitle = "Errors";
+
+  return (
+    <ChartExportSurface id={chartId} title={chartTitle}>
+      <Card className={dashboardStyles.card}>
+        <CardTitle>
+          <Flex
+            justifyContent={{ default: "justifyContentSpaceBetween" }}
+            alignItems={{ default: "alignItemsCenter" }}
+          >
+            <FlexItem>
+              <Icon status="danger">
+                <ExclamationCircleIcon />
+              </Icon>{" "}
+              Errors
+            </FlexItem>
+            <ChartHeaderActions chartId={chartId} title={chartTitle} />
+          </Flex>
+        </CardTitle>
+        <CardBody className={dashboardStyles.cardBodyScrollable}>
+          {errors.length === 0 ? (
+            <CardEmptyState title={REPORT_CARD_EMPTY_STATE_TITLES.errors} />
+          ) : (
+            <div>
+              <ReportTable<MigrationIssueLike>
+                data={errors}
+                columns={["Description", "Total VMs"]}
+                fields={["assessment", "count"]}
+                onRowClick={onConcernClick ? handleRowClick : undefined}
+                clickableFields={onConcernClick ? ["assessment"] : []}
+              />
+            </div>
+          )}
+        </CardBody>
+      </Card>
+    </ChartExportSurface>
+  );
+};
+
+ErrorTable.displayName = "ErrorTable";

package/src/report/HostPowerStates.tsx

@@ -8,13 +8,11 @@ import { buildHostPowerStateChart } from "./powerStates.js";
 
 export interface HostPowerStatesProps {
   hostPowerStates?: Record<string, number>;
-  isExportMode?: boolean;
   legendVariant?: MigrationDonutChartLegendVariant;
 }
 
 export const HostPowerStates: FC<HostPowerStatesProps> = ({
   hostPowerStates,
-  isExportMode = false,
   legendVariant,
 }) => {
   const chart = useMemo(
@@ -32,7 +30,6 @@ export const HostPowerStates: FC<HostPowerStatesProps> = ({
       legend={chart.legend}
       total={chart.total}
       subTitle="Hosts"
-      isExportMode={isExportMode}
       legendVariant={legendVariant}
     />
   );

package/src/report/HostsOverview.tsx

@@ -0,0 +1,185 @@
+import { css } from "@emotion/css";
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Flex,
+  FlexItem,
+} from "@patternfly/react-core";
+import { ServerIcon } from "@patternfly/react-icons";
+import {
+  chart_color_blue_300,
+  chart_color_green_300,
+  chart_color_purple_100,
+  chart_color_purple_300,
+  chart_color_teal_200,
+  chart_color_yellow_400,
+} from "@patternfly/react-tokens";
+import type { FC } from "react";
+import { useMemo } from "react";
+import {
+  MigrationDonutChart,
+  type MigrationDonutChartDatum,
+  type MigrationDonutChartLegendVariant,
+} from "../charts/MigrationDonutChart.js";
+import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+
+/** Smallest host shape this card reads. Apps pass SDK hosts structurally. */
+export interface HostLike {
+  model?: string | number;
+}
+
+export interface HostsOverviewProps {
+  hosts?: HostLike[];
+  /** `"html"` in agent-ui; ui-app passes `"chart"`. */
+  legendVariant?: MigrationDonutChartLegendVariant;
+}
+
+const TOP_HOST_MODELS = 5;
+const OTHER_MODELS_LABEL = "Other models";
+const UNKNOWN_MODEL_LABEL = "Unknown model";
+const CHART_ID = "hosts-overview";
+const CHART_TITLE = "Host distribution by model";
+
+/**
+ * Same categorical order as the ui-app host-model donut, mapped onto
+ * PatternFly `chart_color_*` tokens (nearest token where the old hex
+ * was not itself a token).
+ */
+const HOST_MODEL_COLORS = [
+  chart_color_blue_300.value,
+  chart_color_purple_300.value,
+  chart_color_purple_100.value,
+  chart_color_teal_200.value,
+  chart_color_yellow_400.value,
+  chart_color_green_300.value,
+];
+
+const cardSubtitle = css`
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: 0.85rem;
+`;
+
+const hostModelLabel = (model: HostLike["model"]): string => {
+  const raw =
+    typeof model === "string"
+      ? model
+      : typeof model === "number"
+        ? String(model)
+        : "";
+  const trimmed = raw.trim();
+  return trimmed !== "" ? trimmed : UNKNOWN_MODEL_LABEL;
+};
+
+const buildHostModelDonut = (
+  hosts: HostLike[],
+): {
+  slices: MigrationDonutChartDatum[];
+  legend: Record<string, string>;
+  totalHosts: number;
+} => {
+  const counts = new Map<string, number>();
+  for (const host of hosts) {
+    const label = hostModelLabel(host?.model);
+    counts.set(label, (counts.get(label) ?? 0) + 1);
+  }
+
+  const entries = [...counts.entries()]
+    .map(([model, count]) => ({ model, count }))
+    .sort((a, b) => b.count - a.count);
+
+  const top = entries.slice(0, TOP_HOST_MODELS);
+  const restSum = entries
+    .slice(TOP_HOST_MODELS)
+    .reduce((sum, entry) => sum + entry.count, 0);
+
+  const slices: MigrationDonutChartDatum[] = top.map((entry) => ({
+    name: entry.model,
+    count: entry.count,
+    countDisplay: `${entry.count} hosts`,
+    legendCategory: entry.model,
+  }));
+
+  if (restSum > 0) {
+    slices.push({
+      name: OTHER_MODELS_LABEL,
+      count: restSum,
+      countDisplay: `${restSum} hosts`,
+      legendCategory: OTHER_MODELS_LABEL,
+    });
+  }
+
+  const legend: Record<string, string> = {};
+  slices.forEach((slice, index) => {
+    const color = HOST_MODEL_COLORS[index % HOST_MODEL_COLORS.length];
+    if (color) {
+      legend[slice.legendCategory] = color;
+    }
+  });
+
+  return { slices, legend, totalHosts: hosts.length };
+};
+
+export const HostsOverview: FC<HostsOverviewProps> = ({
+  hosts,
+  legendVariant = "html",
+}) => {
+  const { slices, legend, totalHosts } = useMemo(
+    () => buildHostModelDonut(Array.isArray(hosts) ? hosts : []),
+    [hosts],
+  );
+
+  return (
+    <ChartExportSurface id={CHART_ID} title={CHART_TITLE}>
+      <Card className={dashboardStyles.card}>
+        <CardTitle>
+          <Flex
+            justifyContent={{ default: "justifyContentSpaceBetween" }}
+            alignItems={{ default: "alignItemsCenter" }}
+          >
+            <FlexItem>
+              <div>
+                <div>
+                  <ServerIcon /> {CHART_TITLE}
+                </div>
+                <div className={cardSubtitle}>Top 5 models</div>
+              </div>
+            </FlexItem>
+            <ChartHeaderActions chartId={CHART_ID} title={CHART_TITLE} />
+          </Flex>
+        </CardTitle>
+        <CardBody className={dashboardStyles.cardBodyScrollable}>
+          {slices.length === 0 ? (
+            <CardEmptyState title={REPORT_CARD_EMPTY_STATE_TITLES.hosts} />
+          ) : (
+            <MigrationDonutChart
+              legendVariant={legendVariant}
+              data={slices}
+              height={300}
+              width={420}
+              donutThickness={18}
+              titleFontSize={34}
+              legend={legend}
+              legendWidth={680}
+              title={`${totalHosts}`}
+              subTitle="Hosts"
+              subTitleColor="var(--pf-t--global--text--color--subtle)"
+              itemsPerRow={2}
+              labelFontSize={16}
+              marginLeft="0%"
+              tooltipLabelFormatter={({ datum, percent }) =>
+                `${datum.countDisplay}\n${percent.toFixed(1)}%`
+              }
+            />
+          )}
+        </CardBody>
+      </Card>
+    </ChartExportSurface>
+  );
+};
+
+HostsOverview.displayName = "HostsOverview";

package/src/report/InfrastructureSummary.tsx

@@ -6,8 +6,12 @@ import {
   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 {
@@ -17,40 +21,53 @@ export interface InfrastructureSummaryProps {
 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,
 }) => (
-  <Card isFullHeight id="infrastructure-summary">
-    <CardTitle>Infrastructure summary</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 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";