@openshift-migration-advisor/shared-components 0.23.0-e6249b8ada7d → 0.24.0

package/README.md

@@ -8,7 +8,6 @@ Includes:
 - Guest OS support-tier helpers and badges
 - Report chart primitives (`MigrationDonutChart`)
 - Operating Systems distribution card
-- Infrastructure summary, vCenter cluster details, and host/VM power-state cards
 
 ## Installation
 
@@ -24,15 +23,10 @@ npm install @openshift-migration-advisor/shared-components
 
 ```tsx
 import {
-  buildInfrastructureSummary,
-  HostPowerStates,
-  InfrastructureSummary,
   MigrationDonutChart,
   OSDistribution,
   SupportTierBadge,
   TextInputFormGroup,
-  VCenterClusterDetails,
-  VmPowerStates,
 } from "@openshift-migration-advisor/shared-components";
 ```
 

package/dist/charts/index.d.ts

@@ -1,2 +1,2 @@
-export { MigrationDonutChart, type MigrationDonutChartDatum, type MigrationDonutChartLegendVariant, type MigrationDonutChartProps, } from "./MigrationDonutChart.js";
+export { MigrationDonutChart, type MigrationDonutChartDatum, type MigrationDonutChartProps, } from "./MigrationDonutChart.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/charts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/charts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,gCAAgC,EACrC,KAAK,wBAAwB,GAC9B,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/charts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,GAC9B,MAAM,0BAA0B,CAAC"}

package/dist/forms/RadioButtonFormGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonFormGroup.d.ts","sourceRoot":"","sources":["../../src/forms/RadioButtonFormGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,yBACR,SAAQ,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC;IAC3C,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,yBAAyB,+BA2C3B"}
+{"version":3,"file":"RadioButtonFormGroup.d.ts","sourceRoot":"","sources":["../../src/forms/RadioButtonFormGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,yBACR,SAAQ,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC;IAC3C,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,yBAAyB,+BAoC3B"}

package/dist/forms/RadioButtonFormGroup.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormGroup, Radio } from "@patternfly/react-core";
 import { Controller, useFormContext } from "react-hook-form";
 import FormFieldHelperText from "./FormFieldHelperText.js";
@@ -8,5 +8,5 @@ export default function RadioButtonFormGroup({ id, label, name, isRequired = fal
     const isTouched = methods.formState.touchedFields[name];
     const isSubmitted = methods.formState.isSubmitted;
     const showError = error && (isTouched || isSubmitted);
-    return (_jsxs(FormGroup, { label: label, isRequired: isRequired, fieldId: id, role: "radiogroup", isInline: true, ...props, children: [_jsx(Controller, { name: name, control: methods.control, render: ({ field }) => (_jsx(_Fragment, { children: options.map((option) => (_jsx(Radio, { id: option.id, name: name, label: option.label, isChecked: field.value === option.value, onChange: () => field.onChange(option.value), onBlur: field.onBlur }, option.value))) })) }), _jsx(FormFieldHelperText, { helpText: helpText, errorMessage: showError ? error?.message : undefined })] }));
+    return (_jsxs(FormGroup, { label: label, isRequired: isRequired, fieldId: id, ...props, children: [_jsx(Controller, { name: name, control: methods.control, render: ({ field }) => (_jsx("div", { style: { display: "flex", gap: "16px" }, role: "radiogroup", children: options.map((option) => (_jsx(Radio, { id: option.id, name: name, label: option.label, isChecked: field.value === option.value, onChange: () => field.onChange(option.value), onBlur: field.onBlur }, option.value))) })) }), _jsx(FormFieldHelperText, { helpText: helpText, errorMessage: showError ? error?.message : undefined })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"OSDistribution.d.ts","sourceRoot":"","sources":["../../src/report/OSDistribution.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,EAAE,EAAO,MAAM,OAAO,CAAC;AAQrC,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,oBAAoB,CAAC;AAY5B,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAyBlD,CAAC;AAEF,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAoH1C,CAAC"}
+{"version":3,"file":"OSDistribution.d.ts","sourceRoot":"","sources":["../../src/report/OSDistribution.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,EAAE,EAAO,MAAM,OAAO,CAAC;AAQrC,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,oBAAoB,CAAC;AAyB5B,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAyBlD,CAAC;AAEF,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAgH1C,CAAC"}

package/dist/report/OSDistribution.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { css } from "@emotion/css";
-import { Card, CardBody, CardTitle, Flex, FlexItem, MenuToggle, SearchInput, Select, SelectList, SelectOption, Stack, StackItem, Toolbar, ToolbarContent, ToolbarItem, } from "@patternfly/react-core";
+import { Card, CardBody, CardTitle, Flex, FlexItem, MenuToggle, SearchInput, Select, SelectList, SelectOption, Toolbar, ToolbarContent, ToolbarItem, } from "@patternfly/react-core";
 import { DesktopIcon } from "@patternfly/react-icons";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import { CardEmptyState } from "./CardEmptyState.js";
@@ -13,9 +13,19 @@ import { OsNameCell } from "./OsUpgradeRecommendationPopover.js";
 import { getSupportTierLegendLabel, ORDERED_SUPPORT_TIERS, } from "./osSupportTier.js";
 import { SupportTierBadge } from "./SupportTierBadge.js";
 import { ALL_TIERS_FILTER, useOsBarChartViewModel, } from "./useOsBarChartViewModel.js";
+const filterToolbarStyle = css `
+  padding-left: 0;
+  padding-right: 0;
+`;
+const filterItemStyle = css `
+  flex: 1 1 0;
+  min-width: 0;
+`;
+const vmsColumnStyle = css `
+  text-align: right;
+`;
 const tableScrollStyle = css `
   overflow: auto;
-  max-height: 350px;
 `;
 export const OSDistribution = ({ osData, isExportMode = false, }) => (_jsxs(Card, { className: isExportMode ? dashboardStyles.cardPrint : dashboardStyles.card, id: "os-distribution", children: [_jsx(CardTitle, { children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsSm" }, children: [_jsxs(FlexItem, { children: [_jsx(DesktopIcon, {}), " Operating Systems"] }), _jsx(FlexItem, { children: _jsx(OsSupportTiersHelpPopover, {}) })] }) }), _jsx(CardBody, { children: _jsx(OSBarChart, { osData: osData, isExportMode: isExportMode }) })] }));
 export const OSBarChart = ({ osData, isExportMode = false, }) => {
@@ -23,7 +33,5 @@ export const OSBarChart = ({ osData, isExportMode = false, }) => {
     if (vm.tableRows.length === 0) {
         return (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.operatingSystems }));
     }
-    return (_jsxs(_Fragment, { children: [!isExportMode ? (_jsx(Toolbar, { hasNoPadding: true, children: _jsxs(ToolbarContent, { children: [_jsx(ToolbarItem, { children: _jsx(SearchInput, { placeholder: "Filter by OS", value: vm.osFilter, onChange: (_event, value) => vm.setOsFilter(value), onClear: vm.clearOsFilter, "aria-label": "Filter operating systems by name" }) }), _jsx(ToolbarItem, { children: _jsx(Select, { isOpen: vm.isTierSelectOpen, selected: vm.tierFilter, onSelect: vm.handleTierSelect, onOpenChange: vm.setIsTierSelectOpen, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, isExpanded: vm.isTierSelectOpen, onClick: vm.toggleTierSelectOpen, isFullWidth: true, children: vm.tierFilterLabel })), "aria-label": "Filter operating systems by support tier", children: _jsxs(SelectList, { children: [_jsx(SelectOption, { value: ALL_TIERS_FILTER, children: "All tiers" }), ORDERED_SUPPORT_TIERS.map((tier) => (_jsx(SelectOption, { value: tier, children: getSupportTierLegendLabel(tier) }, tier)))] }) }) })] }) })) : null, _jsxs(Stack, { hasGutter: true, children: [vm.showUpgradeNotice ? (_jsx(StackItem, { children: _jsx(OsUpgradeNotice, {}) })) : null, _jsx(StackItem, { children: _jsx("div", { className: isExportMode
-                                ? tableFullWidthStyle
-                                : `${tableScrollStyle} ${tableFullWidthStyle}`, children: _jsxs(Table, { "aria-label": "Operating systems", variant: "compact", children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { children: "OS" }), _jsx(Th, { children: "Tier" }), _jsx(Th, { children: "VMs" })] }) }), _jsx(Tbody, { children: vm.showNoResults ? (_jsx(Tr, { children: _jsx(Td, { colSpan: 3, children: _jsx(EmptySearchResults, { title: "No matching operating system found" }) }) })) : (vm.filteredRows.map((row) => (_jsxs(Tr, { children: [_jsx(Td, { dataLabel: "OS", children: _jsx(OsNameCell, { osName: row.osName, upgradeRecommendation: row.upgradeRecommendation, isExportMode: isExportMode }) }), _jsx(Td, { dataLabel: "Tier", children: _jsx(SupportTierBadge, { tier: row.tier, isExportMode: isExportMode }) }), _jsx(Td, { dataLabel: "VMs", children: row.count })] }, row.osName)))) })] }) }) })] })] }));
+    return (_jsxs(_Fragment, { children: [!isExportMode ? (_jsx(Toolbar, { className: filterToolbarStyle, children: _jsxs(ToolbarContent, { children: [_jsx(ToolbarItem, { className: filterItemStyle, children: _jsx(SearchInput, { placeholder: "Filter by OS", value: vm.osFilter, onChange: (_event, value) => vm.setOsFilter(value), onClear: vm.clearOsFilter, "aria-label": "Filter operating systems by name" }) }), _jsx(ToolbarItem, { className: filterItemStyle, children: _jsx(Select, { isOpen: vm.isTierSelectOpen, selected: vm.tierFilter, onSelect: vm.handleTierSelect, onOpenChange: vm.setIsTierSelectOpen, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, isExpanded: vm.isTierSelectOpen, onClick: vm.toggleTierSelectOpen, style: { width: "100%" }, children: vm.tierFilterLabel })), "aria-label": "Filter operating systems by support tier", children: _jsxs(SelectList, { children: [_jsx(SelectOption, { value: ALL_TIERS_FILTER, children: "All tiers" }), ORDERED_SUPPORT_TIERS.map((tier) => (_jsx(SelectOption, { value: tier, children: getSupportTierLegendLabel(tier) }, tier)))] }) }) })] }) })) : null, vm.showUpgradeNotice ? _jsx(OsUpgradeNotice, {}) : null, _jsx("div", { className: isExportMode ? undefined : tableScrollStyle, style: isExportMode ? undefined : { maxHeight: "350px" }, children: _jsxs(Table, { "aria-label": "Operating systems", variant: "compact", className: tableFullWidthStyle, children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { children: "OS" }), _jsx(Th, { children: "Tier" }), _jsx(Th, { className: vmsColumnStyle, children: "VMs" })] }) }), _jsx(Tbody, { children: vm.showNoResults ? (_jsx(Tr, { children: _jsx(Td, { colSpan: 3, children: _jsx(EmptySearchResults, { title: "No matching operating system found" }) }) })) : (vm.filteredRows.map((row) => (_jsxs(Tr, { children: [_jsx(Td, { dataLabel: "OS", children: _jsx(OsNameCell, { osName: row.osName, upgradeRecommendation: row.upgradeRecommendation, isExportMode: isExportMode }) }), _jsx(Td, { dataLabel: "Tier", children: _jsx(SupportTierBadge, { tier: row.tier, isExportMode: isExportMode }) }), _jsx(Td, { dataLabel: "VMs", className: vmsColumnStyle, children: row.count })] }, row.osName)))) })] }) })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"OsSupportTiersHelpPopover.d.ts","sourceRoot":"","sources":["../../src/report/OsSupportTiersHelpPopover.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAsChC,eAAO,MAAM,yBAAyB,EAAE,EASvC,CAAC"}
+{"version":3,"file":"OsSupportTiersHelpPopover.d.ts","sourceRoot":"","sources":["../../src/report/OsSupportTiersHelpPopover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAyEhC,eAAO,MAAM,yBAAyB,EAAE,EASvC,CAAC"}

package/dist/report/OsSupportTiersHelpPopover.js

@@ -1,8 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Content, Label, Stack, StackItem, } from "@patternfly/react-core";
+import { css } from "@emotion/css";
+import { Label } from "@patternfly/react-core";
 import { ExternalLinkAltIcon } from "@patternfly/react-icons";
 import { getSupportTierBadgeColor, getSupportTierDefinition, getSupportTierLegendLabel, ORDERED_SUPPORT_TIERS, SUPPORT_TIER_LEARN_MORE_URL, } from "./osSupportTier.js";
 import PopoverIcon from "./PopoverIcon.js";
-const OsSupportTiersHelpBody = () => (_jsxs(Stack, { hasGutter: true, children: [ORDERED_SUPPORT_TIERS.map((tier) => (_jsxs(StackItem, { children: [_jsx(Label, { color: getSupportTierBadgeColor(tier), isCompact: true, children: getSupportTierLegendLabel(tier) }), _jsx(Content, { component: "p", children: getSupportTierDefinition(tier) })] }, tier))), _jsx(StackItem, { children: _jsx(Button, { variant: "link", isInline: true, component: "a", href: SUPPORT_TIER_LEARN_MORE_URL, target: "_blank", rel: "noopener noreferrer", icon: _jsx(ExternalLinkAltIcon, {}), iconPosition: "end", "aria-label": "Learn more about operating system support tiers", children: "Learn more" }) })] }));
+const tierListStyle = css `
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--400);
+`;
+const tierItemStyle = css `
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--100);
+`;
+const tierBadgeStyle = css `
+  width: fit-content;
+  max-width: 100%;
+  align-self: flex-start;
+`;
+const tierDescriptionStyle = css `
+  margin: 0;
+  color: var(--pf-t--global--text--color--regular);
+`;
+const learnMoreLinkStyle = css `
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pf-t--global--spacer--xs);
+  margin-top: var(--pf-t--global--spacer--400);
+`;
+const OsSupportTiersHelpBody = () => (_jsxs("div", { children: [_jsx("ul", { className: tierListStyle, children: ORDERED_SUPPORT_TIERS.map((tier) => (_jsxs("li", { className: tierItemStyle, children: [_jsx(Label, { className: tierBadgeStyle, color: getSupportTierBadgeColor(tier), isCompact: true, children: getSupportTierLegendLabel(tier) }), _jsx("p", { className: tierDescriptionStyle, children: getSupportTierDefinition(tier) })] }, tier))) }), _jsxs("a", { "aria-label": "Learn more about operating system support tiers", className: learnMoreLinkStyle, href: SUPPORT_TIER_LEARN_MORE_URL, target: "_blank", rel: "noopener noreferrer", children: ["Learn more ", _jsx(ExternalLinkAltIcon, {})] })] }));
 export const OsSupportTiersHelpPopover = () => (_jsx(PopoverIcon, { noVerticalAlign: true, maxWidth: "40rem", headerContent: "Guest OS support tiers", bodyContent: _jsx(OsSupportTiersHelpBody, {}), buttonOuiaId: "guest-os-support-tiers-help", "aria-label": "Guest OS support tiers help" }));
 OsSupportTiersHelpPopover.displayName = "OsSupportTiersHelpPopover";

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

@@ -1 +1 @@
-{"version":3,"file":"OsUpgradeNotice.d.ts","sourceRoot":"","sources":["../../src/report/OsUpgradeNotice.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,eAAO,MAAM,eAAe,EAAE,EAgB7B,CAAC"}
+{"version":3,"file":"OsUpgradeNotice.d.ts","sourceRoot":"","sources":["../../src/report/OsUpgradeNotice.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,eAAO,MAAM,eAAe,EAAE,EAiB7B,CAAC"}

package/dist/report/OsUpgradeNotice.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from "@emotion/css";
 import { Content, Flex, FlexItem, Icon } from "@patternfly/react-core";
 import { InfoCircleIcon } from "@patternfly/react-icons";
-export const OsUpgradeNotice = () => (_jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsSm" }, children: [_jsx(FlexItem, { children: _jsx(Icon, { status: "info", children: _jsx(InfoCircleIcon, {}) }) }), _jsx(FlexItem, { children: _jsx(Content, { component: "p", children: "Some operating systems may need upgrades before migration" }) })] }));
+const noticeStyle = css `
+  margin-bottom: var(--pf-t--global--spacer--200);
+`;
+export const OsUpgradeNotice = () => (_jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsSm" }, className: noticeStyle, children: [_jsx(FlexItem, { children: _jsx(Icon, { status: "info", children: _jsx(InfoCircleIcon, {}) }) }), _jsx(FlexItem, { children: _jsx(Content, { component: "p", style: { fontWeight: 500 }, children: "Some operating systems may need upgrades before migration" }) })] }));
 OsUpgradeNotice.displayName = "OsUpgradeNotice";

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

@@ -1 +1 @@
-{"version":3,"file":"SupportTierBadge.d.ts","sourceRoot":"","sources":["../../src/report/SupportTierBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAKL,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAC;AAa5B,UAAU,qBAAqB;IAC7B,IAAI,EAAE,WAAW,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAYD,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAiBtD,CAAC"}
+{"version":3,"file":"SupportTierBadge.d.ts","sourceRoot":"","sources":["../../src/report/SupportTierBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAKL,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAC;AAW5B,UAAU,qBAAqB;IAC7B,IAAI,EAAE,WAAW,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAYD,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAiBtD,CAAC"}

package/dist/report/SupportTierBadge.js

@@ -2,19 +2,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { css } from "@emotion/css";
 import { Label, Tooltip } from "@patternfly/react-core";
 import { getSupportTierBadgeColor, getSupportTierBadgeInlineStyle, getSupportTierDefinition, getSupportTierLegendLabel, } from "./osSupportTier.js";
-const exportBadgeStyle = (backgroundColor, color) => css `
+const exportBadgeStyle = css `
   display: inline-block;
   padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm);
   border-radius: var(--pf-t--global--border--radius--pill);
   font-size: var(--pf-t--global--font--size--body--sm);
   line-height: var(--pf-t--global--font--line-height--body);
   white-space: nowrap;
-  background-color: ${backgroundColor};
-  color: ${color};
 `;
 const ExportSupportTierBadge = ({ tier }) => {
     const { backgroundColor, color } = getSupportTierBadgeInlineStyle(tier);
-    return (_jsx("span", { className: exportBadgeStyle(backgroundColor, color), children: getSupportTierLegendLabel(tier) }));
+    return (_jsx("span", { className: exportBadgeStyle, style: { backgroundColor, color }, children: getSupportTierLegendLabel(tier) }));
 };
 export const SupportTierBadge = ({ tier, isExportMode = false, }) => {
     if (isExportMode) {

package/dist/report/constants.d.ts

@@ -19,7 +19,5 @@ export declare const REPORT_CARD_EMPTY_STATE_TITLES: {
     readonly operatingSystems: "Operating system data not collected";
     readonly migrationStatus: "Migration status data not collected";
     readonly issuesBreakdown: "Issues breakdown data not collected";
-    readonly hostPowerStates: "Host power state data not collected";
-    readonly vmPowerStates: "VM power state data not collected";
 };
 //# sourceMappingURL=constants.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/report/constants.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,WAA6B,CAAC;AAC5D,eAAO,MAAM,iBAAiB,WAA+B,CAAC;AAE9D,eAAO,MAAM,8BAA8B;;;;;;;;;;;;;;;;CAgBjC,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/report/constants.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,WAA6B,CAAC;AAC5D,eAAO,MAAM,iBAAiB,WAA+B,CAAC;AAE9D,eAAO,MAAM,8BAA8B;;;;;;;;;;;;;;CAcjC,CAAC"}

package/dist/report/constants.js

@@ -20,6 +20,4 @@ export const REPORT_CARD_EMPTY_STATE_TITLES = {
     operatingSystems: "Operating system data not collected",
     migrationStatus: "Migration status data not collected",
     issuesBreakdown: "Issues breakdown data not collected",
-    hostPowerStates: "Host power state data not collected",
-    vmPowerStates: "VM power state data not collected",
 };

package/dist/report/index.d.ts

@@ -3,11 +3,6 @@ export { chartColorFailure, chartColorSuccess, REPORT_CARD_EMPTY_STATE_TITLES, }
 export { DashboardEmptyStateBase, type DashboardEmptyStateBaseProps, } from "./DashboardEmptyStateBase.js";
 export { dashboardStyles, tableFullWidthStyle } from "./dashboardStyles.js";
 export { EmptySearchResults, type EmptySearchResultsProps, } from "./EmptySearchResults.js";
-export { FeatureStatusBadge, type FeatureStatusBadgeProps, } from "./FeatureStatusBadge.js";
-export { HostPowerStates, type HostPowerStatesProps, } from "./HostPowerStates.js";
-export { InfrastructureSummary, type InfrastructureSummaryProps, } from "./InfrastructureSummary.js";
-export type { ClusterDetailRow, ClusterDetailsModel, FeatureStatus, HostCapability, InfrastructureSummaryModel, InventoryCluster, InventoryDatastore, InventoryHost, InventoryInfra, InventoryNetwork, InventoryVms, NetworkLabel, } from "./infrastructureSummaryModel.js";
-export { booleanToFeatureStatus, buildClusterDetailRows, buildClusterDetails, buildInfrastructureSummary, countVCenters, formatVSphereVersion, hostCapabilityStatus, visibleNetworks, vsanStatus, } from "./infrastructureSummaryModel.js";
 export { OSBarChart, OSDistribution } from "./OSDistribution.js";
 export { OsSupportTiersHelpPopover } from "./OsSupportTiersHelpPopover.js";
 export { OsUpgradeNotice } from "./OsUpgradeNotice.js";
@@ -15,11 +10,6 @@ export { OsNameCell, OsUpgradeRecommendationPopover, } from "./OsUpgradeRecommen
 export type { OSDistributionEntry, SupportTierBadgeStyle, } from "./osSupportTier.js";
 export { getSupportTierBadgeColor, getSupportTierBadgeInlineStyle, getSupportTierDefinition, getSupportTierLegendLabel, getSupportTierSortOrder, hasOsUpgradeNotice, ORDERED_SUPPORT_TIERS, resolveSupportTier, SUPPORT_TIER_BADGE_COLORS, SUPPORT_TIER_BADGE_INLINE_STYLES, SUPPORT_TIER_DEFINITIONS, SUPPORT_TIER_LABELS, SUPPORT_TIER_LEARN_MORE_URL, SupportTier, } from "./osSupportTier.js";
 export { default as PopoverIcon } from "./PopoverIcon.js";
-export { PowerStateCard, type PowerStateCardProps, } from "./PowerStateCard.js";
-export type { PowerStateChartModel } from "./powerStates.js";
-export { buildHostPowerStateChart, buildVmPowerStateChart, HOST_POWER_COLORS, VM_POWER_COLORS, } from "./powerStates.js";
 export { SupportTierBadge } from "./SupportTierBadge.js";
 export { ALL_TIERS_FILTER, type OsBarChartViewModel, type OsTableRow, useOsBarChartViewModel, } from "./useOsBarChartViewModel.js";
-export { VCenterClusterDetails, type VCenterClusterDetailsProps, } from "./VCenterClusterDetails.js";
-export { VmPowerStates, type VmPowerStatesProps, } from "./VmPowerStates.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/report/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,4BAA4B,EAC5B,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,8BAA8B,GAC/B,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,uBAAuB,EACvB,KAAK,4BAA4B,GAClC,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,4BAA4B,CAAC;AACpC,YAAY,EACV,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,0BAA0B,EAC1B,gBAAgB,EAChB,kBAAkB,EAClB,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,YAAY,GACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,EACnB,0BAA0B,EAC1B,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,eAAe,EACf,UAAU,GACX,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EACL,UAAU,EACV,8BAA8B,GAC/B,MAAM,qCAAqC,CAAC;AAC7C,YAAY,EACV,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,wBAAwB,EACxB,8BAA8B,EAC9B,wBAAwB,EACxB,yBAAyB,EACzB,uBAAuB,EACvB,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,EACzB,gCAAgC,EAChC,wBAAwB,EACxB,mBAAmB,EACnB,2BAA2B,EAC3B,WAAW,GACZ,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EACL,wBAAwB,EACxB,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,GAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EACL,gBAAgB,EAChB,KAAK,mBAAmB,EACxB,KAAK,UAAU,EACf,sBAAsB,GACvB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/report/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,4BAA4B,EAC5B,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,8BAA8B,GAC/B,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,uBAAuB,EACvB,KAAK,4BAA4B,GAClC,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EACL,UAAU,EACV,8BAA8B,GAC/B,MAAM,qCAAqC,CAAC;AAC7C,YAAY,EACV,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,wBAAwB,EACxB,8BAA8B,EAC9B,wBAAwB,EACxB,yBAAyB,EACzB,uBAAuB,EACvB,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,EACzB,gCAAgC,EAChC,wBAAwB,EACxB,mBAAmB,EACnB,2BAA2B,EAC3B,WAAW,GACZ,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EACL,gBAAgB,EAChB,KAAK,mBAAmB,EACxB,KAAK,UAAU,EACf,sBAAsB,GACvB,MAAM,6BAA6B,CAAC"}

package/dist/report/index.js

@@ -3,19 +3,11 @@ export { chartColorFailure, chartColorSuccess, REPORT_CARD_EMPTY_STATE_TITLES, }
 export { DashboardEmptyStateBase, } from "./DashboardEmptyStateBase.js";
 export { dashboardStyles, tableFullWidthStyle } from "./dashboardStyles.js";
 export { EmptySearchResults, } from "./EmptySearchResults.js";
-export { FeatureStatusBadge, } from "./FeatureStatusBadge.js";
-export { HostPowerStates, } from "./HostPowerStates.js";
-export { InfrastructureSummary, } from "./InfrastructureSummary.js";
-export { booleanToFeatureStatus, buildClusterDetailRows, buildClusterDetails, buildInfrastructureSummary, countVCenters, formatVSphereVersion, hostCapabilityStatus, visibleNetworks, vsanStatus, } from "./infrastructureSummaryModel.js";
 export { OSBarChart, OSDistribution } from "./OSDistribution.js";
 export { OsSupportTiersHelpPopover } from "./OsSupportTiersHelpPopover.js";
 export { OsUpgradeNotice } from "./OsUpgradeNotice.js";
 export { OsNameCell, OsUpgradeRecommendationPopover, } from "./OsUpgradeRecommendationPopover.js";
 export { getSupportTierBadgeColor, getSupportTierBadgeInlineStyle, getSupportTierDefinition, getSupportTierLegendLabel, getSupportTierSortOrder, hasOsUpgradeNotice, ORDERED_SUPPORT_TIERS, resolveSupportTier, SUPPORT_TIER_BADGE_COLORS, SUPPORT_TIER_BADGE_INLINE_STYLES, SUPPORT_TIER_DEFINITIONS, SUPPORT_TIER_LABELS, SUPPORT_TIER_LEARN_MORE_URL, SupportTier, } from "./osSupportTier.js";
 export { default as PopoverIcon } from "./PopoverIcon.js";
-export { PowerStateCard, } from "./PowerStateCard.js";
-export { buildHostPowerStateChart, buildVmPowerStateChart, HOST_POWER_COLORS, VM_POWER_COLORS, } from "./powerStates.js";
 export { SupportTierBadge } from "./SupportTierBadge.js";
 export { ALL_TIERS_FILTER, useOsBarChartViewModel, } from "./useOsBarChartViewModel.js";
-export { VCenterClusterDetails, } from "./VCenterClusterDetails.js";
-export { VmPowerStates, } from "./VmPowerStates.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openshift-migration-advisor/shared-components",
-  "version": "0.23.0-e6249b8ada7d",
+  "version": "0.24.0",
   "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",

package/src/charts/index.ts

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

package/src/forms/RadioButtonFormGroup.tsx

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

package/src/report/OSDistribution.tsx

@@ -11,8 +11,6 @@ import {
   Select,
   SelectList,
   SelectOption,
-  Stack,
-  StackItem,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -38,9 +36,22 @@ import {
   useOsBarChartViewModel,
 } from "./useOsBarChartViewModel.js";
 
+const filterToolbarStyle = css`
+  padding-left: 0;
+  padding-right: 0;
+`;
+
+const filterItemStyle = css`
+  flex: 1 1 0;
+  min-width: 0;
+`;
+
+const vmsColumnStyle = css`
+  text-align: right;
+`;
+
 const tableScrollStyle = css`
   overflow: auto;
-  max-height: 350px;
 `;
 
 interface OSDistributionProps {
@@ -95,9 +106,9 @@ export const OSBarChart: FC<OSBarChartProps> = ({
   return (
     <>
       {!isExportMode ? (
-        <Toolbar hasNoPadding>
+        <Toolbar className={filterToolbarStyle}>
           <ToolbarContent>
-            <ToolbarItem>
+            <ToolbarItem className={filterItemStyle}>
               <SearchInput
                 placeholder="Filter by OS"
                 value={vm.osFilter}
@@ -106,7 +117,7 @@ export const OSBarChart: FC<OSBarChartProps> = ({
                 aria-label="Filter operating systems by name"
               />
             </ToolbarItem>
-            <ToolbarItem>
+            <ToolbarItem className={filterItemStyle}>
               <Select
                 isOpen={vm.isTierSelectOpen}
                 selected={vm.tierFilter}
@@ -117,7 +128,7 @@ export const OSBarChart: FC<OSBarChartProps> = ({
                     ref={toggleRef}
                     isExpanded={vm.isTierSelectOpen}
                     onClick={vm.toggleTierSelectOpen}
-                    isFullWidth
+                    style={{ width: "100%" }}
                   >
                     {vm.tierFilterLabel}
                   </MenuToggle>
@@ -140,60 +151,56 @@ export const OSBarChart: FC<OSBarChartProps> = ({
         </Toolbar>
       ) : null}
 
-      <Stack hasGutter>
-        {vm.showUpgradeNotice ? (
-          <StackItem>
-            <OsUpgradeNotice />
-          </StackItem>
-        ) : null}
-        <StackItem>
-          <div
-            className={
-              isExportMode
-                ? tableFullWidthStyle
-                : `${tableScrollStyle} ${tableFullWidthStyle}`
-            }
-          >
-            <Table aria-label="Operating systems" variant="compact">
-              <Thead>
-                <Tr>
-                  <Th>OS</Th>
-                  <Th>Tier</Th>
-                  <Th>VMs</Th>
+      {vm.showUpgradeNotice ? <OsUpgradeNotice /> : null}
+
+      <div
+        className={isExportMode ? undefined : tableScrollStyle}
+        style={isExportMode ? undefined : { maxHeight: "350px" }}
+      >
+        <Table
+          aria-label="Operating systems"
+          variant="compact"
+          className={tableFullWidthStyle}
+        >
+          <Thead>
+            <Tr>
+              <Th>OS</Th>
+              <Th>Tier</Th>
+              <Th className={vmsColumnStyle}>VMs</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {vm.showNoResults ? (
+              <Tr>
+                <Td colSpan={3}>
+                  <EmptySearchResults title="No matching operating system found" />
+                </Td>
+              </Tr>
+            ) : (
+              vm.filteredRows.map((row) => (
+                <Tr key={row.osName}>
+                  <Td dataLabel="OS">
+                    <OsNameCell
+                      osName={row.osName}
+                      upgradeRecommendation={row.upgradeRecommendation}
+                      isExportMode={isExportMode}
+                    />
+                  </Td>
+                  <Td dataLabel="Tier">
+                    <SupportTierBadge
+                      tier={row.tier}
+                      isExportMode={isExportMode}
+                    />
+                  </Td>
+                  <Td dataLabel="VMs" className={vmsColumnStyle}>
+                    {row.count}
+                  </Td>
                 </Tr>
-              </Thead>
-              <Tbody>
-                {vm.showNoResults ? (
-                  <Tr>
-                    <Td colSpan={3}>
-                      <EmptySearchResults title="No matching operating system found" />
-                    </Td>
-                  </Tr>
-                ) : (
-                  vm.filteredRows.map((row) => (
-                    <Tr key={row.osName}>
-                      <Td dataLabel="OS">
-                        <OsNameCell
-                          osName={row.osName}
-                          upgradeRecommendation={row.upgradeRecommendation}
-                          isExportMode={isExportMode}
-                        />
-                      </Td>
-                      <Td dataLabel="Tier">
-                        <SupportTierBadge
-                          tier={row.tier}
-                          isExportMode={isExportMode}
-                        />
-                      </Td>
-                      <Td dataLabel="VMs">{row.count}</Td>
-                    </Tr>
-                  ))
-                )}
-              </Tbody>
-            </Table>
-          </div>
-        </StackItem>
-      </Stack>
+              ))
+            )}
+          </Tbody>
+        </Table>
+      </div>
     </>
   );
 };

package/src/report/OsSupportTiersHelpPopover.tsx

@@ -1,10 +1,5 @@
-import {
-  Button,
-  Content,
-  Label,
-  Stack,
-  StackItem,
-} from "@patternfly/react-core";
+import { css } from "@emotion/css";
+import { Label } from "@patternfly/react-core";
 import { ExternalLinkAltIcon } from "@patternfly/react-icons";
 import type { FC } from "react";
 import {
@@ -16,32 +11,67 @@ import {
 } from "./osSupportTier.js";
 import PopoverIcon from "./PopoverIcon.js";
 
+const tierListStyle = css`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--400);
+`;
+
+const tierItemStyle = css`
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--100);
+`;
+
+const tierBadgeStyle = css`
+  width: fit-content;
+  max-width: 100%;
+  align-self: flex-start;
+`;
+
+const tierDescriptionStyle = css`
+  margin: 0;
+  color: var(--pf-t--global--text--color--regular);
+`;
+
+const learnMoreLinkStyle = css`
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pf-t--global--spacer--xs);
+  margin-top: var(--pf-t--global--spacer--400);
+`;
+
 const OsSupportTiersHelpBody: FC = () => (
-  <Stack hasGutter>
-    {ORDERED_SUPPORT_TIERS.map((tier) => (
-      <StackItem key={tier}>
-        <Label color={getSupportTierBadgeColor(tier)} isCompact>
-          {getSupportTierLegendLabel(tier)}
-        </Label>
-        <Content component="p">{getSupportTierDefinition(tier)}</Content>
-      </StackItem>
-    ))}
-    <StackItem>
-      <Button
-        variant="link"
-        isInline
-        component="a"
-        href={SUPPORT_TIER_LEARN_MORE_URL}
-        target="_blank"
-        rel="noopener noreferrer"
-        icon={<ExternalLinkAltIcon />}
-        iconPosition="end"
-        aria-label="Learn more about operating system support tiers"
-      >
-        Learn more
-      </Button>
-    </StackItem>
-  </Stack>
+  <div>
+    <ul className={tierListStyle}>
+      {ORDERED_SUPPORT_TIERS.map((tier) => (
+        <li key={tier} className={tierItemStyle}>
+          <Label
+            className={tierBadgeStyle}
+            color={getSupportTierBadgeColor(tier)}
+            isCompact
+          >
+            {getSupportTierLegendLabel(tier)}
+          </Label>
+          <p className={tierDescriptionStyle}>
+            {getSupportTierDefinition(tier)}
+          </p>
+        </li>
+      ))}
+    </ul>
+    <a
+      aria-label="Learn more about operating system support tiers"
+      className={learnMoreLinkStyle}
+      href={SUPPORT_TIER_LEARN_MORE_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Learn more <ExternalLinkAltIcon />
+    </a>
+  </div>
 );
 
 export const OsSupportTiersHelpPopover: FC = () => (

package/src/report/OsUpgradeNotice.tsx

@@ -1,11 +1,17 @@
+import { css } from "@emotion/css";
 import { Content, Flex, FlexItem, Icon } from "@patternfly/react-core";
 import { InfoCircleIcon } from "@patternfly/react-icons";
 import type { FC } from "react";
 
+const noticeStyle = css`
+  margin-bottom: var(--pf-t--global--spacer--200);
+`;
+
 export const OsUpgradeNotice: FC = () => (
   <Flex
     alignItems={{ default: "alignItemsCenter" }}
     spaceItems={{ default: "spaceItemsSm" }}
+    className={noticeStyle}
   >
     <FlexItem>
       <Icon status="info">
@@ -13,7 +19,7 @@ export const OsUpgradeNotice: FC = () => (
       </Icon>
     </FlexItem>
     <FlexItem>
-      <Content component="p">
+      <Content component="p" style={{ fontWeight: 500 }}>
         Some operating systems may need upgrades before migration
       </Content>
     </FlexItem>