@openshift-assisted/ui-lib 2.55.0 → 2.56.0

package/lib/common/components/hosts/HostPropertyValidationPopover.tsx

@@ -2,24 +2,24 @@ import React from 'react';
 import { Button, ButtonVariant, Flex, Icon, Popover } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
 import { toSentence } from '../ui';
-import { hostValidationFailureHints, hostValidationLabels } from '../../config';
+import { hostValidationLabels } from '../../config';
 import { Validation } from '../../types/hosts';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type ValidationPopoverProps = {
   validation: Validation;
   actions?: React.ReactNode[];
+  additionalBodyContent?: React.ReactNode;
 };
 
 const ValidationPopover: React.FC<React.PropsWithChildren<ValidationPopoverProps>> = ({
   validation,
   actions,
+  additionalBodyContent,
   children,
 }) => {
   const { t } = useTranslation();
-  const failedValidationHint = hostValidationFailureHints(t)[validation.id];
 
   return (
     <Popover
@@ -27,7 +27,8 @@ const ValidationPopover: React.FC<React.PropsWithChildren<ValidationPopoverProps
       bodyContent={
         <div>
           {toSentence(validation.message)}
-          {validation.status === 'failure' && failedValidationHint && ` ${failedValidationHint}`}
+          {additionalBodyContent && ' '}
+          {additionalBodyContent}
         </div>
       }
       footerContent={actions}
@@ -43,27 +44,29 @@ const ValidationPopover: React.FC<React.PropsWithChildren<ValidationPopoverProps
 type HostPropertyValidationPopoverProps = {
   validation?: Validation;
   failureActions?: React.ReactNode[];
-  pendingActions?: React.ReactNode[];
+  failureBodyContent?: React.ReactNode;
   showFailure?: boolean;
-  showPending?: boolean;
   showSuccess?: boolean;
 };
 
-const HostPropertyValidationPopover: React.FC<
+export const HostPropertyValidationPopover: React.FC<
   React.PropsWithChildren<HostPropertyValidationPopoverProps>
 > = ({
   validation,
   failureActions,
-  pendingActions,
+  failureBodyContent,
   children,
   showFailure = true,
-  showPending = false,
   showSuccess = false,
 }) => {
   if (validation) {
     if (showFailure && validation.status === 'failure') {
       return (
-        <ValidationPopover validation={validation} actions={failureActions}>
+        <ValidationPopover
+          validation={validation}
+          actions={failureActions}
+          additionalBodyContent={failureBodyContent}
+        >
           <Flex columnGap={{ default: 'columnGapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
             <Icon status="danger">
               <ExclamationCircleIcon />
@@ -73,15 +76,6 @@ const HostPropertyValidationPopover: React.FC<
         </ValidationPopover>
       );
     }
-    if (showPending && validation.status === 'pending') {
-      return (
-        <ValidationPopover validation={validation} actions={pendingActions}>
-          <Flex columnGap={{ default: 'columnGapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
-            <PendingIcon /> {children}
-          </Flex>
-        </ValidationPopover>
-      );
-    }
     if (showSuccess && validation.status === 'success') {
       return (
         <>
@@ -97,5 +91,3 @@ const HostPropertyValidationPopover: React.FC<
   }
   return <>{children}</>;
 };
-
-export default HostPropertyValidationPopover;

package/lib/common/components/hosts/HostRowDetail.tsx

@@ -1,32 +1,32 @@
 import React from 'react';
+import { TFunction } from 'i18next';
 import { Grid, GridItem } from '@patternfly/react-core';
 import { TableVariant, Tbody, Thead, Table, Th, Tr, Td } from '@patternfly/react-table';
-import { DetailItem, DetailList, DetailListProps } from '../ui';
 import type {
   Disk,
   Host,
   Interface,
   Gpu,
 } from '@openshift-assisted/types/assisted-installer-service';
-import type { ValidationsInfo } from '../../types/hosts';
-import type { WithTestID } from '../../types/index';
+import { WithTestID } from '../../types';
+import { ValidationsInfo } from '../../types/hosts';
+import { stringToJSON } from '../../utils';
+import { useTranslation } from '../../hooks';
 import { DASH } from '../constants';
+import { StorageDetail } from '../storage';
+import { DetailListProps, DetailList, SectionTitle, DetailItem } from '../ui';
+import { ValidationInfoActionProps } from './HostValidationGroups';
+import { NtpValidationStatus } from './NtpValidationStatus';
+import { OnDiskRoleType } from './HostsTableDetailContext';
 import { getHostRowHardwareInfo } from './hardwareInfo';
-import { getHardwareTypeText, getInventory } from './utils';
-import type { ValidationInfoActionProps } from './HostValidationGroups';
-import NtpValidationStatus from './NtpValidationStatus';
-import { useTranslation } from '../../hooks/use-translation-wrapper';
-import SectionTitle from '../ui/SectionTitle';
-import { OnDiskRoleType } from './DiskRole';
-import StorageDetail from '../storage/StorageDetail';
-import { stringToJSON } from '../../utils';
-import { TFunction } from 'i18next';
+import { getInventory, getHardwareTypeText } from './utils';
 
 type HostDetailProps = {
   host: Host;
   canEditDisks?: (host: Host) => boolean;
   onDiskRole?: OnDiskRoleType;
   AdditionalNTPSourcesDialogToggleComponent?: ValidationInfoActionProps['AdditionalNTPSourcesDialogToggleComponent'];
+  NtpSyncFailureMessageComponent?: ValidationInfoActionProps['NtpSyncFailureMessageComponent'];
   hideNTPStatus?: boolean;
   updateDiskSkipFormatting?: (
     shouldFormatDisk: boolean,
@@ -173,6 +173,7 @@ export const HostDetail = ({
   canEditDisks,
   onDiskRole,
   AdditionalNTPSourcesDialogToggleComponent,
+  NtpSyncFailureMessageComponent,
   hideNTPStatus = false,
   updateDiskSkipFormatting,
 }: HostDetailProps) => {
@@ -199,10 +200,11 @@ export const HostDetail = ({
     () => (
       <NtpValidationStatus
         AdditionalNTPSourcesDialogToggleComponent={AdditionalNTPSourcesDialogToggleComponent}
+        NtpSyncFailureMessageComponent={NtpSyncFailureMessageComponent}
         validationsInfo={validationsInfo}
       />
     ),
-    [AdditionalNTPSourcesDialogToggleComponent, validationsInfo],
+    [AdditionalNTPSourcesDialogToggleComponent, NtpSyncFailureMessageComponent, validationsInfo],
   );
 
   return (

package/lib/common/components/hosts/HostStatus.tsx

@@ -250,6 +250,7 @@ const HostStatus: React.FC<React.PropsWithChildren<HostStatusProps>> = ({
   status,
   onEditHostname,
   AdditionalNTPSourcesDialogToggleComponent,
+  NtpSyncFailureMessageComponent,
   UpdateDay2ApiVipDialogToggleComponent,
   children,
   zIndex,
@@ -274,6 +275,7 @@ const HostStatus: React.FC<React.PropsWithChildren<HostStatusProps>> = ({
     host,
     onEditHostname: toggleHostname,
     AdditionalNTPSourcesDialogToggleComponent,
+    NtpSyncFailureMessageComponent,
     title,
     validationsInfo,
     details,

package/lib/common/components/hosts/HostValidationGroups.tsx

@@ -6,22 +6,18 @@ import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/e
 
 import { Host, HostValidationId } from '@openshift-assisted/types/assisted-installer-service';
 import { Validation, ValidationsInfo } from '../../types/hosts';
-import {
-  getMtuLink,
-  hostValidationFailureHints,
-  hostValidationGroupLabels,
-  hostValidationLabels,
-} from '../../config';
+import { getMtuLink, hostValidationGroupLabels, hostValidationLabels } from '../../config';
 import { toSentence } from '../ui';
-import Hostname from './Hostname';
-import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { useTranslation } from '../../hooks';
 import { getKeys } from '../../utils';
+import { Hostname } from './Hostname';
 
 import './HostValidationGroups.css';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 export type AdditionNtpSourcePropsType = {
   AdditionalNTPSourcesDialogToggleComponent?: React.FC;
+  NtpSyncFailureMessageComponent?: React.FC;
 };
 
 export type UpdateDay2ApiVipPropsType = {
@@ -69,8 +65,7 @@ const ValidationsAlert = ({
               {hostValidationLabels(t)[v.id] || v.id}:
             </span>
             &nbsp;
-            {toSentence(v.message.replace(/\\n/, ' '))}{' '}
-            {v.status === 'failure' && hostValidationFailureHints(t)[v.id]}
+            {toSentence(v.message.replace(/\\n/, ' '))}
           </li>
         ))}
       </ul>
@@ -113,10 +108,16 @@ const HostnameAlert = ({
 
 const NtpSyncAlert = ({
   AdditionalNTPSourcesDialogToggleComponent,
+  NtpSyncFailureMessageComponent,
   variant,
   validation,
-}: Required<AdditionNtpSourcePropsType> & { variant: AlertVariant; validation: Validation }) => {
-  const actionLinks = [<AdditionalNTPSourcesDialogToggleComponent key="add-ntp-sources" />];
+}: AdditionNtpSourcePropsType & {
+  variant: AlertVariant;
+  validation: Validation;
+}) => {
+  const actionLinks = AdditionalNTPSourcesDialogToggleComponent
+    ? [<AdditionalNTPSourcesDialogToggleComponent key="add-ntp-sources" />]
+    : [];
   const { t } = useTranslation();
   return (
     <Alert
@@ -125,7 +126,13 @@ const NtpSyncAlert = ({
       actionLinks={actionLinks}
       isInline
     >
-      {toSentence(validation.message)} {hostValidationFailureHints(t)[validation.id]}
+      {toSentence(validation.message)}
+      {NtpSyncFailureMessageComponent && (
+        <>
+          {' '}
+          <NtpSyncFailureMessageComponent />
+        </>
+      )}
     </Alert>
   );
 };
@@ -170,7 +177,7 @@ const MtuSyncAlert = ({
   const { t } = useTranslation();
   return (
     <Alert title={t('ai:MTU (maximum transmission unit) failure')} variant={variant} isInline>
-      {toSentence(validation.message)} {hostValidationFailureHints(t)[validation.id]}
+      {toSentence(validation.message)}
       <br />
       {<MtuInfoLink docsVersion={docsVersion} />}
     </Alert>
@@ -183,6 +190,7 @@ const ValidationGroupAlerts = ({
   variant,
   onEditHostname,
   AdditionalNTPSourcesDialogToggleComponent,
+  NtpSyncFailureMessageComponent,
   UpdateDay2ApiVipDialogToggleComponent,
   host,
   openshiftVersion,
@@ -234,10 +242,14 @@ const ValidationGroupAlerts = ({
       />,
     );
   }
-  if (validationsWithActions['ntp-synced'] && AdditionalNTPSourcesDialogToggleComponent) {
+  if (
+    validationsWithActions['ntp-synced'] &&
+    (AdditionalNTPSourcesDialogToggleComponent || NtpSyncFailureMessageComponent)
+  ) {
     alerts.push(
       <NtpSyncAlert
         AdditionalNTPSourcesDialogToggleComponent={AdditionalNTPSourcesDialogToggleComponent}
+        NtpSyncFailureMessageComponent={NtpSyncFailureMessageComponent}
         validation={validationsWithActions['ntp-synced']}
         variant={variant}
         key="ntp-sync-alert"

package/lib/common/components/hosts/Hostname.tsx

@@ -18,7 +18,7 @@ type HostnameProps = {
   readonly?: boolean;
 };
 
-const Hostname: React.FC<HostnameProps> = ({
+export const Hostname: React.FC<HostnameProps> = ({
   host,
   inventory = {},
   onEditHostname,
@@ -96,4 +96,3 @@ const Hostname: React.FC<HostnameProps> = ({
     body
   );
 };
-export default Hostname;

package/lib/common/components/hosts/HostsTable.tsx

@@ -1,27 +1,24 @@
 import * as React from 'react';
 import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
-import { HostsNotShowingLink, HostsNotShowingLinkProps } from '../clusterConfiguration';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
-import AITable, {
-  ExpandComponentProps,
-  AITableProps,
-} from '../../../common/components/hosts/AITable';
-import { HostDetail } from './HostRowDetail';
+
+import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { WithTestID } from '../../types';
-import EmptyState from '../ui/uiState/EmptyState';
+import { EmptyState } from '../ui';
+import { HostDetail } from './HostRowDetail';
 import { usePagination } from './usePagination';
-import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { AITable, AITableProps, ExpandComponentProps } from './AITable';
 
 const getHostId = (host: Host) => host.id;
 
 type HostsTableEmptyStateProps = {
-  setDiscoveryHintModalOpen?: HostsNotShowingLinkProps['setDiscoveryHintModalOpen'];
   isSNO?: boolean;
+  secondaryActions?: React.ReactNode[];
 };
 
 export const HostsTableEmptyState = ({
-  setDiscoveryHintModalOpen,
   isSNO = false,
+  secondaryActions,
 }: HostsTableEmptyStateProps) => {
   const { t } = useTranslation();
   return (
@@ -29,15 +26,7 @@ export const HostsTableEmptyState = ({
       icon={ConnectedIcon}
       title={t('ai:Waiting for host...', { count: +isSNO })}
       content={t('ai:Hosts may take a few minutes to appear here after booting.')}
-      secondaryActions={
-        setDiscoveryHintModalOpen && [
-          <HostsNotShowingLink
-            key="hosts-not-showing"
-            isSNO={isSNO}
-            setDiscoveryHintModalOpen={setDiscoveryHintModalOpen}
-          />,
-        ]
-      }
+      secondaryActions={secondaryActions}
     />
   );
 };
@@ -65,7 +54,7 @@ type HostsTableProps = ReturnType<typeof usePagination> &
     children: React.ReactNode;
   };
 
-const HostsTable = ({
+export const HostsTable = ({
   hosts,
   skipDisabled,
   alreadySorted,
@@ -87,5 +76,3 @@ const HostsTable = ({
     <AITable<Host> getDataId={getHostId} data={data} alreadySorted={alreadySorted} {...rest} />
   );
 };
-
-export default HostsTable;

package/lib/common/components/hosts/HostsTableDetailContext.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
-import { OnDiskRoleType } from './DiskRole';
+import { Disk, DiskRole, Host } from '@openshift-assisted/types/assisted-installer-service';
 import { HostsTableActions } from './types';
 
+export type OnDiskRoleType = (
+  hostId: Host['id'],
+  diskId: Disk['id'],
+  role: DiskRole,
+) => Promise<unknown>;
+
 type HostsTableDetailContextValue = {
   onDiskRole: OnDiskRoleType | undefined;
   canEditDisks: HostsTableActions['canEditDisks'];
@@ -12,7 +18,7 @@ const HostsTableDetailContext = React.createContext<HostsTableDetailContextValue
   undefined,
 );
 
-const HostsTableDetailContextProvider: React.FC<
+export const HostsTableDetailContextProvider: React.FC<
   React.PropsWithChildren<HostsTableDetailContextValue>
 > = ({ canEditDisks, onDiskRole, updateDiskSkipFormatting, children }) => {
   const context = {
@@ -28,7 +34,7 @@ const HostsTableDetailContextProvider: React.FC<
   );
 };
 
-const useHostsTableDetailContext = () => {
+export const useHostsTableDetailContext = () => {
   const context = React.useContext(HostsTableDetailContext);
   if (context === undefined) {
     throw new Error(
@@ -37,5 +43,3 @@ const useHostsTableDetailContext = () => {
   }
   return context;
 };
-
-export { HostsTableDetailContextProvider, useHostsTableDetailContext };

package/lib/common/components/hosts/NtpValidationStatus.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Validation, ValidationsInfo } from '../../../common/types/hosts';
-import HostPropertyValidationPopover from './HostPropertyValidationPopover';
-import { ValidationInfoActionProps } from './HostValidationGroups';
-import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
+import { useTranslation } from '../../hooks';
+import { Validation, ValidationsInfo } from '../../types/hosts';
+import { HostPropertyValidationPopover } from './HostPropertyValidationPopover';
+import { ValidationInfoActionProps } from './HostValidationGroups';
 
 const getLabel = (t: TFunction, validationStatus?: Validation['status']) => {
   switch (validationStatus) {
@@ -19,28 +19,31 @@ const getLabel = (t: TFunction, validationStatus?: Validation['status']) => {
 type NtpValidationsStatusProps = {
   validationsInfo: ValidationsInfo;
   AdditionalNTPSourcesDialogToggleComponent: ValidationInfoActionProps['AdditionalNTPSourcesDialogToggleComponent'];
+  NtpSyncFailureMessageComponent?: ValidationInfoActionProps['NtpSyncFailureMessageComponent'];
 };
 
-const NtpValidationStatus: React.FC<NtpValidationsStatusProps> = ({
+export const NtpValidationStatus: React.FC<NtpValidationsStatusProps> = ({
   validationsInfo,
   AdditionalNTPSourcesDialogToggleComponent,
+  NtpSyncFailureMessageComponent,
 }) => {
   const ntpSyncedValidation = validationsInfo.network?.find((v) => v.id === 'ntp-synced');
   const actions = [];
   if (AdditionalNTPSourcesDialogToggleComponent) {
     actions.push(<AdditionalNTPSourcesDialogToggleComponent key="add-ntp-sources" />);
   }
+  const bodyContent = NtpSyncFailureMessageComponent ? (
+    <NtpSyncFailureMessageComponent />
+  ) : undefined;
   const { t } = useTranslation();
   return (
     <HostPropertyValidationPopover
       validation={ntpSyncedValidation}
       failureActions={actions}
-      pendingActions={actions}
+      failureBodyContent={bodyContent}
       showSuccess
-      showPending
     >
       {getLabel(t, ntpSyncedValidation?.status)}
     </HostPropertyValidationPopover>
   );
 };
-export default NtpValidationStatus;

package/lib/common/components/hosts/index.ts

@@ -1,8 +1,15 @@
 export * from './utils';
 export * from './types';
+export * from './AITable';
+export * from './AdditionalNTPSourcesDialog';
 export * from './HostValidationGroups';
+export * from './HostsTable';
+export * from './HostRowDetail';
 export * from './tableColumns';
 export * from './tableUtils';
+export * from './usePagination';
+export * from './HostsTableDetailContext';
+export * from './VMRebootConfigurationInfo';
 
 export { default as RoleCell } from './RoleCell';
 export { default as RoleDropdown } from './RoleDropdown';
@@ -15,5 +22,5 @@ export { default as TableToolbar } from './TableToolbar';
 export { ChangeHostnameAction, DeleteHostAction } from './HostToolbarActions';
 export { default as MassChangeHostnameModal } from './MassChangeHostnameModal';
 export { default as MassDeleteHostModal } from './MassDeleteHostModal';
-export { default as Hostname } from './Hostname';
+export * from './Hostname';
 export * from './status';

package/lib/common/components/hosts/tableColumns.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TFunction } from 'i18next';
 import { Address4, Address6 } from 'ip-address';
+import { LabelGroup, Label } from '@patternfly/react-core';
 import {
   Cluster,
   Host,
@@ -8,16 +9,15 @@ import {
   Interface,
 } from '@openshift-assisted/types/assisted-installer-service';
 import type { ValidationsInfo as HostValidationsInfo } from '../../types/hosts';
-import { getSubnet } from '../clusterConfiguration';
-import { LabelGroup, Label } from '@patternfly/react-core';
+import { getSubnet } from '../clusterConfiguration/utils';
 import { selectMachineNetworkCIDR } from '../../selectors';
 import { stringToJSON } from '../../utils';
 import { DASH } from '../constants';
 import { getDateTimeCell } from '../ui';
 import { TableRow } from './AITable';
 import { getHostRowHardwareInfo } from './hardwareInfo';
-import Hostname from './Hostname';
-import HostPropertyValidationPopover from './HostPropertyValidationPopover';
+import { Hostname } from './Hostname';
+import { HostPropertyValidationPopover } from './HostPropertyValidationPopover';
 import HostsCount from './HostsCount';
 import HostStatus from './HostStatus';
 import RoleCell from './RoleCell';
@@ -129,6 +129,7 @@ export const statusColumn = (
   AdditionalNTPSourcesDialogToggleComponent?: React.FC,
   onEditHostname?: HostsTableActions['onEditHost'],
   UpdateDay2ApiVipDialogToggleComponent?: React.FC,
+  NtpSyncFailureMessageComponent?: React.FC,
 ): TableRow<Host> => {
   return {
     header: {
@@ -157,6 +158,7 @@ export const statusColumn = (
             onEditHostname={editHostname}
             validationsInfo={validationsInfo}
             AdditionalNTPSourcesDialogToggleComponent={AdditionalNTPSourcesDialogToggleComponent}
+            NtpSyncFailureMessageComponent={NtpSyncFailureMessageComponent}
             UpdateDay2ApiVipDialogToggleComponent={UpdateDay2ApiVipDialogToggleComponent}
           />
         ),

package/lib/common/components/hosts/types.ts

@@ -1,20 +1,8 @@
 import React from 'react';
-import {
-  Cluster,
-  Disk,
-  Host,
-  HostUpdateParams,
-} from '@openshift-assisted/types/assisted-installer-service';
+import { Disk, Host, HostUpdateParams } from '@openshift-assisted/types/assisted-installer-service';
 import { ValidationsInfo } from '../../types/hosts';
-import { HostsNotShowingLinkProps } from '../clusterConfiguration';
-import { OnDiskRoleType } from './DiskRole';
 import { AdditionNtpSourcePropsType, UpdateDay2ApiVipPropsType } from './HostValidationGroups';
-
-export type ClusterHostsTableProps = {
-  cluster: Cluster;
-  skipDisabled?: boolean;
-  setDiscoveryHintModalOpen?: HostsNotShowingLinkProps['setDiscoveryHintModalOpen'];
-};
+import { OnDiskRoleType } from './HostsTableDetailContext';
 
 export type EditHostFormValues = {
   hostId: string; // identifier, uuid

package/lib/common/components/index.ts

@@ -8,4 +8,7 @@ export * from './AlertsContextProvider';
 export * from './hosts';
 export * from './fetching';
 export * from './AddHosts';
-export * from './featureSupportLevels';
+export * from './newFeatureSupportLevels';
+export * from './ErrorHandling';
+export * from './operators';
+export * from './storage';

package/lib/common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge.tsx

@@ -9,7 +9,7 @@ export type NewSupportLevelBadgeProps = {
   supportLevel: SupportLevel | undefined;
 };
 
-const NewFeatureSupportLevelBadge: React.FC<NewSupportLevelBadgeProps> = ({
+export const NewFeatureSupportLevelBadge: React.FC<NewSupportLevelBadgeProps> = ({
   featureId,
   supportLevel,
 }) => {
@@ -23,5 +23,3 @@ const NewFeatureSupportLevelBadge: React.FC<NewSupportLevelBadgeProps> = ({
     <DeveloperPreview testId={testId} />
   );
 };
-
-export default NewFeatureSupportLevelBadge;

package/lib/common/components/newFeatureSupportLevels/index.ts

@@ -1,2 +1,3 @@
 export * from './NewFeatureSupportLevelContext';
 export * from './types';
+export * from './NewFeatureSupportLevelBadge';

package/lib/common/components/newFeatureSupportLevels/types.ts

@@ -9,7 +9,7 @@ import { CpuArchitecture, FeatureId, SupportedCpuArchitecture } from '../../type
 export type NewFeatureSupportLevelMap = Record<FeatureSupportLevelId, SupportLevel>;
 export type ArchitectureSupportLevelMap = Record<ArchitectureSupportLevelId, SupportLevel>;
 
-export type ActiveFeatureConfiguration = {
+export type NewActiveFeatureConfiguration = {
   underlyingCpuArchitecture: CpuArchitecture;
   hasStaticIpNetworking: boolean;
 };
@@ -36,5 +36,5 @@ export type NewFeatureSupportLevelData = {
     featureId: FeatureId,
     supportLevelData?: NewFeatureSupportLevelMap,
   ) => boolean;
-  activeFeatureConfiguration?: ActiveFeatureConfiguration;
+  activeFeatureConfiguration?: NewActiveFeatureConfiguration;
 };

package/lib/common/components/operators/index.tsx

@@ -0,0 +1,2 @@
+export * from './operatorDescriptions';
+export * from './operatorSpecs';

package/lib/common/components/storage/DiskLimitations.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import {
+  Alert,
+  AlertVariant,
+  Button,
+  ButtonVariant,
+  List,
+  ListItem,
+  Popover,
+} from '@patternfly/react-core';
+import { Disk } from '@openshift-assisted/types/assisted-installer-service';
+import { useTranslation } from '../../hooks';
+
+type DiskLimitationsPopoverContentProps = {
+  eligible?: boolean;
+  notEligibleReasons?: string[];
+};
+
+const DiskLimitationsPopoverContent: React.FC<DiskLimitationsPopoverContentProps> = ({
+  eligible,
+  notEligibleReasons,
+}) => {
+  const alerts = [];
+  const { t } = useTranslation();
+  if (!eligible) {
+    alerts.push(
+      <Alert
+        key="install-eligibility"
+        variant={AlertVariant.warning}
+        title={t('ai:Disk is not eligible for installation')}
+        isInline
+      >
+        {notEligibleReasons && (
+          <List>
+            {notEligibleReasons.map((reason: string) => (
+              <ListItem key={reason}>{reason}</ListItem>
+            ))}
+          </List>
+        )}
+      </Alert>,
+    );
+  }
+  return <>{alerts}</>;
+};
+
+type DiskLimitationsProps = {
+  disk: Disk;
+};
+
+export const DiskLimitations: React.FC<DiskLimitationsProps> = ({ disk }) => {
+  if (!disk.installationEligibility?.eligible) {
+    const limitationsCount = disk.installationEligibility?.notEligibleReasons?.length || 0;
+    return (
+      <Popover
+        headerContent={<div>Disk limitations</div>}
+        bodyContent={<DiskLimitationsPopoverContent {...disk.installationEligibility} />}
+        minWidth="30rem"
+        maxWidth="50rem"
+      >
+        <Button variant={ButtonVariant.link} isInline>
+          {limitationsCount}
+        </Button>
+      </Popover>
+    );
+  }
+  return null;
+};