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

package/src/report/NetworkOverview.tsx

@@ -0,0 +1,405 @@
+import { css } from "@emotion/css";
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Flex,
+  FlexItem,
+  MenuToggle,
+  type MenuToggleElement,
+} from "@patternfly/react-core";
+import { TopologyIcon } from "@patternfly/react-icons";
+import {
+  chart_color_black_500,
+  chart_color_blue_300,
+  chart_color_green_300,
+  chart_color_orange_100,
+  chart_color_purple_100,
+  chart_color_purple_300,
+  chart_color_red_orange_200,
+  chart_color_teal_200,
+  chart_color_teal_400,
+  chart_color_yellow_400,
+} from "@patternfly/react-tokens";
+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";
+
+/** Network fields this card reads. Apps pass SDK networks structurally. */
+export interface NetworkLike {
+  vmsCount?: number;
+  vlanId?: string | number;
+}
+
+/** Infra fields this card reads. */
+export interface NetworkInfraLike {
+  networks?: NetworkLike[];
+}
+
+/** Deprecated NIC histogram used when `distributionByNicCount` is absent. */
+export interface NicCountHistogram {
+  data?: number[];
+  minValue?: number;
+  step?: number;
+}
+
+/** NIC summary fields this card reads from the VM resource breakdown. */
+export interface NicCountSummary {
+  total?: number;
+  histogram?: NicCountHistogram;
+}
+
+export interface NetworkOverviewProps {
+  infra?: NetworkInfraLike;
+  nicCount?: NicCountSummary;
+  distributionByNicCount?: Record<string, number>;
+  /** `"html"` in agent-ui; ui-app passes `"chart"`. */
+  legendVariant?: MigrationDonutChartLegendVariant;
+}
+
+type ViewMode = "networkDistribution" | "nicCount";
+
+const VIEW_MODE_LABELS: Record<ViewMode, string> = {
+  networkDistribution: "VM distribution by network",
+  nicCount: "VM distribution by NIC count",
+};
+
+const TOP_NETWORKS = 4;
+const REST_OF_NETWORKS_LABEL = "Rest of networks";
+const CHART_ID = "network-overview";
+const CHART_TITLE = "Networks";
+
+/**
+ * Categorical order from the ui-app network donut, mapped onto PatternFly
+ * `chart_color_*` tokens (nearest token where the old hex was not a token).
+ */
+const NETWORK_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,
+  chart_color_orange_100.value,
+  chart_color_red_orange_200.value,
+  chart_color_teal_400.value,
+  chart_color_black_500.value,
+];
+
+const cardSubtitle = css`
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: 0.85rem;
+`;
+
+const menuToggleMinWidth = css`
+  min-width: 250px;
+`;
+
+const titleRow = css`
+  width: 100%;
+`;
+
+const isViewMode = (value: string | number | undefined): value is ViewMode =>
+  value === "networkDistribution" || value === "nicCount";
+
+const legendFor = (categories: string[]): Record<string, string> => {
+  const legend: Record<string, string> = {};
+  categories.forEach((category, index) => {
+    const color = NETWORK_COLORS[index % NETWORK_COLORS.length];
+    if (color) {
+      legend[category] = color;
+    }
+  });
+  return legend;
+};
+
+const vlanLabel = (vlanId: NetworkLike["vlanId"]): string => {
+  if (typeof vlanId !== "string" && typeof vlanId !== "number") {
+    return "-";
+  }
+  const value = String(vlanId).trim();
+  return value !== "" ? value : "-";
+};
+
+const buildNetworkDonut = (
+  networks: NetworkLike[] | undefined,
+): {
+  slices: MigrationDonutChartDatum[];
+  legend: Record<string, string>;
+  title: string;
+  vlanBySlice: Record<string, string>;
+} => {
+  const items = (Array.isArray(networks) ? networks : [])
+    .map((network) => ({
+      vmsCount:
+        typeof network?.vmsCount === "number" ? network.vmsCount : Number.NaN,
+      vlanId: vlanLabel(network?.vlanId),
+    }))
+    .filter(
+      (network) => Number.isFinite(network.vmsCount) && network.vmsCount >= 0,
+    )
+    .sort((a, b) => b.vmsCount - a.vmsCount);
+
+  const totalVMs = items.reduce((sum, network) => sum + network.vmsCount, 0);
+  const top = items.slice(0, TOP_NETWORKS);
+  const restSum = items
+    .slice(TOP_NETWORKS)
+    .reduce((sum, network) => sum + network.vmsCount, 0);
+
+  const vlanBySlice: Record<string, string> = {};
+  const slices: MigrationDonutChartDatum[] = top.map((network, index) => {
+    const name = `Network ${index + 1}`;
+    vlanBySlice[name] = network.vlanId;
+    return {
+      name,
+      count: network.vmsCount,
+      countDisplay: `${network.vmsCount} VMs`,
+      legendCategory: name,
+    };
+  });
+
+  if (restSum > 0) {
+    slices.push({
+      name: REST_OF_NETWORKS_LABEL,
+      count: restSum,
+      countDisplay: `${restSum} VMs`,
+      legendCategory: REST_OF_NETWORKS_LABEL,
+    });
+    vlanBySlice[REST_OF_NETWORKS_LABEL] = "-";
+  }
+
+  return {
+    slices,
+    legend: legendFor(slices.map((slice) => slice.legendCategory)),
+    title: `${totalVMs}`,
+    vlanBySlice,
+  };
+};
+
+const nicBucketLabel = (bucket: string): string => {
+  const count = Number.parseInt(bucket, 10);
+  if (bucket.endsWith("+")) {
+    return `${count}+ NIC`;
+  }
+  return count === 1 ? "1 NIC" : `${count} NIC`;
+};
+
+const compareNicBuckets = (
+  a: { bucket: string },
+  b: { bucket: string },
+): number => {
+  const aPlus = a.bucket.endsWith("+");
+  const bPlus = b.bucket.endsWith("+");
+  if (aPlus !== bPlus) {
+    return aPlus ? 1 : -1;
+  }
+  const aNum = Number.parseInt(a.bucket, 10);
+  const bNum = Number.parseInt(b.bucket, 10);
+  if (Number.isFinite(aNum) && Number.isFinite(bNum)) {
+    return aNum - bNum;
+  }
+  return a.bucket.localeCompare(b.bucket);
+};
+
+const slicesFromBuckets = (
+  entries: { bucket: string; count: number }[],
+): MigrationDonutChartDatum[] =>
+  entries.map((entry) => {
+    const label = nicBucketLabel(entry.bucket);
+    return {
+      name: label,
+      count: entry.count,
+      countDisplay: `${entry.count} VMs`,
+      legendCategory: label,
+    };
+  });
+
+const buildNicDonut = (
+  distributionByNicCount: Record<string, number> | undefined,
+  nicCount: NicCountSummary | undefined,
+): {
+  slices: MigrationDonutChartDatum[];
+  legend: Record<string, string>;
+  title: string;
+} => {
+  if (distributionByNicCount != null) {
+    const entries = Object.entries(distributionByNicCount)
+      .map(([bucket, value]) => ({
+        bucket,
+        count: Number.isFinite(Number(value)) ? Number(value) : 0,
+      }))
+      .filter((entry) => entry.count > 0)
+      .sort(compareNicBuckets);
+    const slices = slicesFromBuckets(entries);
+    const total = entries.reduce((sum, entry) => sum + entry.count, 0);
+    return {
+      slices,
+      legend: legendFor(slices.map((slice) => slice.legendCategory)),
+      title: `${total}`,
+    };
+  }
+
+  const histogram = nicCount?.histogram;
+  const data = Array.isArray(histogram?.data) ? histogram.data : [];
+  const minValue =
+    typeof histogram?.minValue === "number" ? histogram.minValue : 0;
+  const step = typeof histogram?.step === "number" ? histogram.step : 1;
+  const buckets = data
+    .map((count, index) => ({
+      bucket: String(minValue + index * step),
+      count: Number(count) || 0,
+    }))
+    .filter((entry) => entry.count > 0)
+    .sort((a, b) => Number(a.bucket) - Number(b.bucket));
+  const slices = slicesFromBuckets(buckets);
+  const total =
+    typeof nicCount?.total === "number"
+      ? nicCount.total
+      : buckets.reduce((sum, entry) => sum + entry.count, 0);
+
+  return {
+    slices,
+    legend: legendFor(slices.map((slice) => slice.legendCategory)),
+    title: `${total}`,
+  };
+};
+
+export const NetworkOverview: FC<NetworkOverviewProps> = ({
+  infra,
+  nicCount,
+  distributionByNicCount,
+  legendVariant = "html",
+}) => {
+  const [viewMode, setViewMode] = useState<ViewMode>("networkDistribution");
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const networkChart = useMemo(
+    () => buildNetworkDonut(infra?.networks),
+    [infra?.networks],
+  );
+  const nicChart = useMemo(
+    () => buildNicDonut(distributionByNicCount, nicCount),
+    [distributionByNicCount, nicCount],
+  );
+
+  const chartTitle = `${CHART_TITLE} — ${VIEW_MODE_LABELS[viewMode]}`;
+  const activeChart =
+    viewMode === "networkDistribution" ? networkChart : nicChart;
+  const emptyTitle =
+    viewMode === "networkDistribution"
+      ? REPORT_CARD_EMPTY_STATE_TITLES.networks
+      : REPORT_CARD_EMPTY_STATE_TITLES.nicCount;
+
+  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>
+                  <TopologyIcon /> {CHART_TITLE}
+                </div>
+                {viewMode === "networkDistribution" && (
+                  <div className={cardSubtitle}>Top 5 networks</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="networkDistribution"
+                    key="networkDistribution"
+                  >
+                    {VIEW_MODE_LABELS.networkDistribution}
+                  </DropdownItem>
+                  <DropdownItem value="nicCount" key="nicCount">
+                    {VIEW_MODE_LABELS.nicCount}
+                  </DropdownItem>
+                </DropdownList>
+              </Dropdown>
+            </ChartHeaderActions>
+          </Flex>
+        </CardTitle>
+        <CardBody className={dashboardStyles.cardBodyScrollable}>
+          {activeChart.slices.length === 0 ? (
+            <CardEmptyState title={emptyTitle} />
+          ) : (
+            <MigrationDonutChart
+              legendVariant={legendVariant}
+              data={activeChart.slices}
+              legend={activeChart.legend}
+              height={300}
+              width={420}
+              donutThickness={18}
+              titleFontSize={34}
+              title={activeChart.title}
+              subTitle="VMs"
+              subTitleColor="var(--pf-t--global--text--color--subtle)"
+              itemsPerRow={Math.ceil(activeChart.slices.length / 2)}
+              labelFontSize={18}
+              marginLeft="0%"
+              tooltipLabelFormatter={({ datum, percent }) => {
+                const summary = `${datum.countDisplay}\n${percent.toFixed(1)}%`;
+                if (viewMode !== "networkDistribution") {
+                  return summary;
+                }
+                const vlan = networkChart.vlanBySlice[datum.legendCategory];
+                return `${summary}\nVLAN: ${vlan ?? "-"}`;
+              }}
+            />
+          )}
+        </CardBody>
+      </Card>
+    </ChartExportSurface>
+  );
+};
+
+NetworkOverview.displayName = "NetworkOverview";

package/src/report/OSDistribution.tsx

@@ -21,6 +21,9 @@ import { DesktopIcon } from "@patternfly/react-icons";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import type { FC, Ref } from "react";
 import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { chartExportHideProps, chartExportScrollProps } from "./chartExport.js";
 import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
 import { dashboardStyles, tableFullWidthStyle } from "./dashboardStyles.js";
 import { EmptySearchResults } from "./EmptySearchResults.js";
@@ -43,47 +46,55 @@ const tableScrollStyle = css`
   max-height: 350px;
 `;
 
+const OS_DISTRIBUTION_CHART_ID = "os-distribution";
+const OS_DISTRIBUTION_TITLE = "Operating system distribution";
+
 interface OSDistributionProps {
   osData: Record<string, OSDistributionEntry>;
-  isExportMode?: boolean;
 }
 
-export const OSDistribution: FC<OSDistributionProps> = ({
-  osData,
-  isExportMode = false,
-}) => (
-  <Card
-    className={isExportMode ? dashboardStyles.cardPrint : dashboardStyles.card}
-    id="os-distribution"
+export const OSDistribution: FC<OSDistributionProps> = ({ osData }) => (
+  <ChartExportSurface
+    id={OS_DISTRIBUTION_CHART_ID}
+    title={OS_DISTRIBUTION_TITLE}
   >
-    <CardTitle>
-      <Flex
-        alignItems={{ default: "alignItemsCenter" }}
-        spaceItems={{ default: "spaceItemsSm" }}
-      >
-        <FlexItem>
-          <DesktopIcon /> Operating Systems
-        </FlexItem>
-        <FlexItem>
-          <OsSupportTiersHelpPopover />
-        </FlexItem>
-      </Flex>
-    </CardTitle>
-    <CardBody>
-      <OSBarChart osData={osData} isExportMode={isExportMode} />
-    </CardBody>
-  </Card>
+    <Card className={dashboardStyles.card}>
+      <CardTitle>
+        <Flex
+          justifyContent={{ default: "justifyContentSpaceBetween" }}
+          alignItems={{ default: "alignItemsCenter" }}
+        >
+          <FlexItem>
+            <Flex
+              alignItems={{ default: "alignItemsCenter" }}
+              spaceItems={{ default: "spaceItemsSm" }}
+            >
+              <FlexItem>
+                <DesktopIcon /> Operating Systems
+              </FlexItem>
+              <FlexItem {...chartExportHideProps}>
+                <OsSupportTiersHelpPopover />
+              </FlexItem>
+            </Flex>
+          </FlexItem>
+          <ChartHeaderActions
+            chartId={OS_DISTRIBUTION_CHART_ID}
+            title={OS_DISTRIBUTION_TITLE}
+          />
+        </Flex>
+      </CardTitle>
+      <CardBody>
+        <OSBarChart osData={osData} />
+      </CardBody>
+    </Card>
+  </ChartExportSurface>
 );
 
 interface OSBarChartProps {
   osData: Record<string, OSDistributionEntry>;
-  isExportMode?: boolean;
 }
 
-export const OSBarChart: FC<OSBarChartProps> = ({
-  osData,
-  isExportMode = false,
-}) => {
+export const OSBarChart: FC<OSBarChartProps> = ({ osData }) => {
   const vm = useOsBarChartViewModel(osData);
 
   if (vm.tableRows.length === 0) {
@@ -94,7 +105,7 @@ export const OSBarChart: FC<OSBarChartProps> = ({
 
   return (
     <>
-      {!isExportMode ? (
+      <div {...chartExportHideProps}>
         <Toolbar hasNoPadding>
           <ToolbarContent>
             <ToolbarItem>
@@ -138,7 +149,7 @@ export const OSBarChart: FC<OSBarChartProps> = ({
             </ToolbarItem>
           </ToolbarContent>
         </Toolbar>
-      ) : null}
+      </div>
 
       <Stack hasGutter>
         {vm.showUpgradeNotice ? (
@@ -148,11 +159,8 @@ export const OSBarChart: FC<OSBarChartProps> = ({
         ) : null}
         <StackItem>
           <div
-            className={
-              isExportMode
-                ? tableFullWidthStyle
-                : `${tableScrollStyle} ${tableFullWidthStyle}`
-            }
+            className={`${tableScrollStyle} ${tableFullWidthStyle}`}
+            {...chartExportScrollProps}
           >
             <Table aria-label="Operating systems" variant="compact">
               <Thead>
@@ -176,14 +184,10 @@ export const OSBarChart: FC<OSBarChartProps> = ({
                         <OsNameCell
                           osName={row.osName}
                           upgradeRecommendation={row.upgradeRecommendation}
-                          isExportMode={isExportMode}
                         />
                       </Td>
                       <Td dataLabel="Tier">
-                        <SupportTierBadge
-                          tier={row.tier}
-                          isExportMode={isExportMode}
-                        />
+                        <SupportTierBadge tier={row.tier} />
                       </Td>
                       <Td dataLabel="VMs">{row.count}</Td>
                     </Tr>

package/src/report/OsUpgradeRecommendationPopover.tsx

@@ -2,6 +2,7 @@ import { css } from "@emotion/css";
 import { Button, Flex, FlexItem, Popover } from "@patternfly/react-core";
 import { InfoCircleIcon } from "@patternfly/react-icons";
 import type { FC } from "react";
+import { chartExportHideProps } from "./chartExport.js";
 
 const upgradeRecommendationPopoverCloseButton = css`
   .pf-v6-c-popover__close .pf-v6-c-button.pf-m-plain,
@@ -44,18 +45,16 @@ OsUpgradeRecommendationPopover.displayName = "OsUpgradeRecommendationPopover";
 interface OsNameCellProps {
   osName: string;
   upgradeRecommendation?: string;
-  isExportMode?: boolean;
 }
 
 export const OsNameCell: FC<OsNameCellProps> = ({
   osName,
   upgradeRecommendation,
-  isExportMode = false,
 }) => {
   const hasUpgradeRecommendation =
     upgradeRecommendation && upgradeRecommendation.trim() !== "";
 
-  if (!hasUpgradeRecommendation || isExportMode) {
+  if (!hasUpgradeRecommendation) {
     return <>{osName}</>;
   }
 
@@ -66,7 +65,7 @@ export const OsNameCell: FC<OsNameCellProps> = ({
       flexWrap={{ default: "nowrap" }}
     >
       <FlexItem>{osName}</FlexItem>
-      <FlexItem shrink={{ default: "shrink" }}>
+      <FlexItem shrink={{ default: "shrink" }} {...chartExportHideProps}>
         <OsUpgradeRecommendationPopover
           upgradeRecommendation={upgradeRecommendation}
         />

package/src/report/PowerStateCard.tsx

@@ -1,4 +1,10 @@
-import { Card, CardBody, CardTitle } from "@patternfly/react-core";
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Flex,
+  FlexItem,
+} from "@patternfly/react-core";
 import type { FC, ReactNode } from "react";
 import {
   MigrationDonutChart,
@@ -6,6 +12,8 @@ import {
   type MigrationDonutChartLegendVariant,
 } from "../charts/MigrationDonutChart.js";
 import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
 import { dashboardStyles } from "./dashboardStyles.js";
 
 export interface PowerStateCardProps {
@@ -17,7 +25,6 @@ export interface PowerStateCardProps {
   legend: Record<string, string>;
   total: number;
   subTitle: string;
-  isExportMode?: boolean;
   itemsPerRow?: number;
   legendVariant?: MigrationDonutChartLegendVariant;
 }
@@ -31,43 +38,49 @@ export const PowerStateCard: FC<PowerStateCardProps> = ({
   legend,
   total,
   subTitle,
-  isExportMode = false,
   itemsPerRow = 2,
   legendVariant = "html",
 }) => (
-  <Card
-    className={isExportMode ? dashboardStyles.cardPrint : dashboardStyles.card}
-    id={id}
-  >
-    <CardTitle>
-      {icon} {title}
-    </CardTitle>
-    <CardBody>
-      {total === 0 ? (
-        <CardEmptyState title={emptyTitle} />
-      ) : (
-        <MigrationDonutChart
-          legendVariant={legendVariant}
-          data={slices}
-          legend={legend}
-          height={300}
-          width={420}
-          donutThickness={18}
-          padAngle={1}
-          title={`${total}`}
-          subTitle={subTitle}
-          subTitleColor="var(--pf-t--global--text--color--subtle)"
-          titleFontSize={34}
-          labelFontSize={16}
-          itemsPerRow={itemsPerRow}
-          marginLeft="0%"
-          tooltipLabelFormatter={({ datum, percent }) =>
-            `${datum.countDisplay}\n${percent.toFixed(1)}%`
-          }
-        />
-      )}
-    </CardBody>
-  </Card>
+  <ChartExportSurface id={id} title={title}>
+    <Card className={dashboardStyles.card}>
+      <CardTitle>
+        <Flex
+          justifyContent={{ default: "justifyContentSpaceBetween" }}
+          alignItems={{ default: "alignItemsCenter" }}
+        >
+          <FlexItem>
+            {icon} {title}
+          </FlexItem>
+          <ChartHeaderActions chartId={id} title={title} />
+        </Flex>
+      </CardTitle>
+      <CardBody>
+        {total === 0 ? (
+          <CardEmptyState title={emptyTitle} />
+        ) : (
+          <MigrationDonutChart
+            legendVariant={legendVariant}
+            data={slices}
+            legend={legend}
+            height={300}
+            width={420}
+            donutThickness={18}
+            padAngle={1}
+            title={`${total}`}
+            subTitle={subTitle}
+            subTitleColor="var(--pf-t--global--text--color--subtle)"
+            titleFontSize={34}
+            labelFontSize={16}
+            itemsPerRow={itemsPerRow}
+            marginLeft="0%"
+            tooltipLabelFormatter={({ datum, percent }) =>
+              `${datum.countDisplay}\n${percent.toFixed(1)}%`
+            }
+          />
+        )}
+      </CardBody>
+    </Card>
+  </ChartExportSurface>
 );
 
 PowerStateCard.displayName = "PowerStateCard";