@openshift-assisted/ui-lib 2.9.0-cim → 2.9.6-cim

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

@@ -1,8 +1,8 @@
 import Humanize from 'humanize-plus';
-import { Disk, Inventory } from '../../api';
+import { Disk, Inventory } from '@openshift-assisted/types/assisted-installer-service';
 import { DASH, OpticalDiskDriveType } from '../constants';
 import { HumanizedSortable } from '../ui/table/utils';
-import { fileSize } from './utils';
+import { fileSize } from '../../utils';
 
 export type HostRowHardwareInfo = {
   serialNumber: string;
@@ -20,9 +20,10 @@ export type SimpleHardwareInfo = {
 
 export const getMemoryCapacity = (inventory: Inventory): number =>
   inventory.memory?.physicalBytes || 0;
+
 export const getDiskCapacity = (inventory: Inventory): number =>
   inventory.disks
-    ?.filter((disk) => disk.driveType !== OpticalDiskDriveType)
+    ?.filter((disk) => disk.driveType !== OpticalDiskDriveType && !disk.holders)
     .reduce((diskSize: number, disk: Disk) => diskSize + (disk.sizeBytes || 0), 0) || 0;
 
 export const getHumanizedCpuClockSpeed = (inventory: Inventory) =>

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  AddCircleOIcon,
   BanIcon,
   CheckCircleIcon,
   ConnectedIcon,
@@ -18,7 +17,7 @@ import {
   global_success_color_100 as okColor,
   chart_color_blue_300 as blueColor,
 } from '@patternfly/react-tokens';
-import { Host } from '../../api';
+import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import { HostStatus } from './types';
 
 export const hostStatus: HostStatus<Host['status'] | 'finalizing'> = Object.freeze({
@@ -229,7 +228,7 @@ export const hostStatus: HostStatus<Host['status'] | 'finalizing'> = Object.free
     key: 'added-to-existing-cluster',
     title: 'Installed',
     category: 'Installation related',
-    icon: <AddCircleOIcon />,
+    icon: <CheckCircleIcon color={okColor.value} />,
     details: 'This host completed its installation successfully.',
   },
 });

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

@@ -1,8 +1,13 @@
 import { breakWord, expandable, sortable } from '@patternfly/react-table';
 import * as React from 'react';
 import { Address4, Address6 } from 'ip-address';
-import { Cluster, Host, HostUpdateParams, Interface, stringToJSON } from '../../api';
-import { ValidationsInfo as HostValidationsInfo } from '../../types/hosts';
+import type {
+  Cluster,
+  Host,
+  HostUpdateParams,
+  Interface,
+} from '@openshift-assisted/types/assisted-installer-service';
+import type { ValidationsInfo as HostValidationsInfo } from '../../types/hosts';
 import { getSubnet } from '../clusterConfiguration';
 import { DASH } from '../constants';
 import { getDateTimeCell } from '../ui';
@@ -24,6 +29,7 @@ import {
 import { selectMachineNetworkCIDR } from '../../selectors/clusterSelectors';
 import { hostStatus } from './status';
 import { TFunction } from 'i18next';
+import { stringToJSON } from '../../utils';
 
 export const getSelectedNic = (nics: Interface[], currentSubnet: Address4 | Address6) => {
   return nics.find((nic) => {
@@ -139,7 +145,7 @@ export const statusColumn = (
       const sublabel =
         areOnlySoftValidationsFailing(validationsInfo) &&
         ['known', 'known-unbound'].includes(host.status)
-          ? 'Some validations failed'
+          ? t('ai:Some validations failed')
           : undefined;
 
       const actualHostStatus = getHostStatus(host.status, clusterStatus);
@@ -162,9 +168,9 @@ export const statusColumn = (
   };
 };
 
-export const discoveredAtColumn: TableRow<Host> = {
+export const discoveredAtColumn = (t: TFunction): TableRow<Host> => ({
   header: {
-    title: 'Discovered on',
+    title: t('ai:Discovered on'),
     props: {
       id: 'col-header-discoveredat',
     },
@@ -179,7 +185,7 @@ export const discoveredAtColumn: TableRow<Host> = {
       sortableValue: dateTimeCell.sortableValue,
     };
   },
-};
+});
 
 export const cpuArchitectureColumn = (t: TFunction): TableRow<Host> => ({
   header: {
@@ -199,9 +205,9 @@ export const cpuArchitectureColumn = (t: TFunction): TableRow<Host> => ({
   },
 });
 
-export const cpuCoresColumn: TableRow<Host> = {
+export const cpuCoresColumn = (t: TFunction): TableRow<Host> => ({
   header: {
-    title: 'CPU Cores',
+    title: t('ai:CPU Cores'),
     props: {
       id: 'col-header-cpucores',
     },
@@ -224,11 +230,11 @@ export const cpuCoresColumn: TableRow<Host> = {
       sortableValue: cores.sortableValue,
     };
   },
-};
+});
 
-export const memoryColumn: TableRow<Host> = {
+export const memoryColumn = (t: TFunction): TableRow<Host> => ({
   header: {
-    title: 'Memory',
+    title: t('ai:Memory'),
     props: {
       id: 'col-header-memory',
     },
@@ -249,11 +255,11 @@ export const memoryColumn: TableRow<Host> = {
       sortableValue: memory.sortableValue,
     };
   },
-};
+});
 
-export const disksColumn: TableRow<Host> = {
+export const disksColumn = (t: TFunction): TableRow<Host> => ({
   header: {
-    title: 'Total storage',
+    title: t('ai:Total storage'),
     props: {
       id: 'col-header-disk',
     },
@@ -274,7 +280,7 @@ export const disksColumn: TableRow<Host> = {
       sortableValue: disk.sortableValue,
     };
   },
-};
+});
 
 export const countColumn = (cluster: Cluster): TableRow<Host> => ({
   header: { title: <HostsCount cluster={cluster} inParenthesis /> },
@@ -365,6 +371,7 @@ const ActionTitle: React.FC<{ disabled: boolean; description?: string; title: st
 
 export const hostActionResolver =
   ({
+    t,
     onInstallHost,
     canInstallHost,
     onEditHost,
@@ -384,7 +391,7 @@ export const hostActionResolver =
     canEditBMH,
     canUnbindHost,
     onUnbindHost,
-  }: HostsTableActions): ActionsResolver<Host> =>
+  }: HostsTableActions & { t: TFunction }): ActionsResolver<Host> =>
   (host) => {
     const actions = [];
     if (host) {
@@ -404,7 +411,7 @@ export const hostActionResolver =
           if (typeof canEdit === 'boolean') {
             canEdit &&
               actions.push({
-                title: 'Change hostname',
+                title: t('ai:Change hostname'),
                 id: `button-edit-host-${hostname}`, // id is everchanging, not ideal for tests
                 onClick: () => onEditHost(host),
               });
@@ -412,7 +419,11 @@ export const hostActionResolver =
             const [enabled, reason] = canEdit;
             actions.push({
               title: (
-                <ActionTitle disabled={!enabled} description={reason} title="Change hostname" />
+                <ActionTitle
+                  disabled={!enabled}
+                  description={reason}
+                  title={t('ai:Change hostname')}
+                />
               ),
               id: `button-edit-host-${hostname}`, // id is everchanging, not ideal for tests
               onClick: () => onEditHost(host),
@@ -423,35 +434,35 @@ export const hostActionResolver =
       }
       if (onHostEnable && canEnable?.(host)) {
         actions.push({
-          title: 'Enable in cluster',
+          title: t('ai:Enable in cluster'),
           id: `button-enable-in-cluster-${hostname}`,
           onClick: () => onHostEnable(host),
         });
       }
       if (onHostDisable && canDisable?.(host)) {
         actions.push({
-          title: 'Disable in cluster',
+          title: t('ai:Disable in cluster'),
           id: `button-disable-in-cluster-${hostname}`,
           onClick: () => onHostDisable(host),
         });
       }
       if (onHostReset && canReset?.(host)) {
         actions.push({
-          title: 'Reset host',
+          title: t('ai:Reset host'),
           id: `button-reset-host-${hostname}`,
           onClick: () => onHostReset(host),
         });
       }
       if (onViewHostEvents) {
         actions.push({
-          title: 'View host events',
+          title: t('ai:View host events'),
           id: `button-view-host-events-${hostname}`,
           onClick: () => onViewHostEvents(host),
         });
       }
       if (onDownloadHostLogs && canDownloadHostLogs?.(host)) {
         actions.push({
-          title: 'Download host logs',
+          title: t('ai:Download host logs'),
           id: `button-download-host-installation-logs-${hostname}`,
           onClick: () => onDownloadHostLogs(host),
         });
@@ -462,14 +473,16 @@ export const hostActionResolver =
           if (typeof canDeleteHost === 'boolean') {
             canDeleteHost &&
               actions.push({
-                title: 'Delete host',
+                title: t('ai:Remove host'),
                 id: `button-delete-host-${hostname}`,
                 onClick: () => onDeleteHost(host),
               });
           } else {
             const [enabled, reason] = canDeleteHost;
             actions.push({
-              title: <ActionTitle disabled={!enabled} description={reason} title="Delete host" />,
+              title: (
+                <ActionTitle disabled={!enabled} description={reason} title={t('ai:Remove host')} />
+              ),
               id: `button-delete-host-${hostname}`,
               onClick: () => onDeleteHost(host),
               isDisabled: !enabled,
@@ -481,7 +494,9 @@ export const hostActionResolver =
         if (canEditBMH) {
           const [enabled, reason] = canEditBMH(host);
           actions.push({
-            title: <ActionTitle disabled={!enabled} description={reason} title="Edit BMC" />,
+            title: (
+              <ActionTitle disabled={!enabled} description={reason} title={t('ai:Edit BMC')} />
+            ),
             id: `button-edit-bmh-host-${hostname}`,
             onClick: () => onEditBMH(host),
             isDisabled: !enabled,
@@ -493,7 +508,11 @@ export const hostActionResolver =
         const [enabled, reason] = canUnbindHost(host);
         actions.push({
           title: (
-            <ActionTitle disabled={!enabled} description={reason} title="Remove from the cluster" />
+            <ActionTitle
+              disabled={!enabled}
+              description={reason}
+              title={t('ai:Remove from the cluster')}
+            />
           ),
           id: `button-unbind-host-${hostname}`,
           onClick: () => onUnbindHost(host),

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

@@ -1,5 +1,10 @@
 import React from 'react';
-import { Cluster, Disk, Host, HostUpdateParams } from '../../api';
+import {
+  Cluster,
+  Disk,
+  Host,
+  HostUpdateParams,
+} from '@openshift-assisted/types/assisted-installer-service';
 import { ValidationsInfo } from '../../types/hosts';
 import { HostsNotShowingLinkProps } from '../clusterConfiguration';
 import { OnDiskRoleType } from './DiskRole';

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

@@ -17,16 +17,23 @@ const perPageOptions: PerPageOptions[] = [
   },
 ];
 
-export const usePagination = (dataCount: number) => {
-  const [perPage, setPerPage] = React.useState(10);
+export const usePagination = (
+  dataCount: number,
+  wizardPerPage?: number,
+  setWizardPerPage?: (perPage: number) => void,
+) => {
+  const [perPage, setPerPage] = React.useState(wizardPerPage || 10);
   const [page, setPage] = React.useState(1);
 
   const { onSetPage, onPerPageSelect } = React.useMemo<PaginationCallbacks>(
     () => ({
       onSetPage: (evt, pageNumber) => setPage(pageNumber),
-      onPerPageSelect: (evt, perPage) => setPerPage(perPage),
+      onPerPageSelect: (evt, perPage) => {
+        setPerPage(perPage);
+        setWizardPerPage && setWizardPerPage(perPage);
+      },
     }),
-    [],
+    [setWizardPerPage],
   );
 
   const showPagination = dataCount > 10;

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

@@ -1,7 +1,11 @@
-import filesize from 'filesize.js';
 import Fuse from 'fuse.js';
 import { TFunction } from 'i18next';
-import { Host, Cluster, Inventory, stringToJSON } from '../../api';
+import type {
+  Host,
+  Cluster,
+  Inventory,
+} from '@openshift-assisted/types/assisted-installer-service';
+import { stringToJSON } from '../../utils';
 import { hostRoles, TIME_ZERO } from '../../config';
 import { DASH } from '../constants';
 import {
@@ -185,12 +189,6 @@ export const getHardwareTypeText = (inventory: Inventory, t: TFunction) => {
   return hardwareTypeText;
 };
 
-export const fileSize: typeof filesize = (...args) =>
-  filesize
-    .call(null, ...args)
-    .toUpperCase()
-    .replace(/I/, 'i');
-
 export const getInventory = (host: Host) => {
   const { inventory: inventoryString = '' } = host;
   return stringToJSON<Inventory>(inventoryString) || {};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SupportLevel } from '../../api';
+import { SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
 import { FeatureId, isPreviewSupportLevel } from '../../types';
 import { TechnologyPreview, DeveloperPreview } from '../ui/PreviewBadge';
 

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

@@ -1,33 +1,5 @@
 import React from 'react';
-import { TFunction } from 'i18next';
-
-import { CpuArchitecture, FeatureId } from '../../types';
-import { useTranslation } from '../../hooks/use-translation-wrapper';
-import { ArchitectureSupportLevelId, FeatureSupportLevelId, SupportLevel } from '../../api';
-
-export type NewFeatureSupportLevelMap = Record<FeatureSupportLevelId, SupportLevel>;
-export type ArchitectureSupportLevelMap = Record<ArchitectureSupportLevelId, SupportLevel>;
-
-export type ActiveFeatureConfiguration = {
-  underlyingCpuArchitecture: CpuArchitecture;
-  hasStaticIpNetworking: boolean;
-};
-
-export type NewFeatureSupportLevelData = {
-  getFeatureSupportLevels(): NewFeatureSupportLevelMap;
-  getFeatureSupportLevel(
-    featureId: FeatureId,
-    supportLevelData?: NewFeatureSupportLevelMap,
-  ): SupportLevel | undefined;
-  isFeatureDisabled(featureId: FeatureId, supportLevelData?: NewFeatureSupportLevelMap): boolean;
-  getFeatureDisabledReason(
-    featureId: FeatureId,
-    t?: TFunction,
-    supportLevelData?: NewFeatureSupportLevelMap,
-  ): string | undefined;
-  isFeatureSupported(featureId: FeatureId, supportLevelData?: NewFeatureSupportLevelMap): boolean;
-  activeFeatureConfiguration?: ActiveFeatureConfiguration;
-};
+import { NewFeatureSupportLevelData } from './types';
 
 const NewFeatureSupportLevelContext = React.createContext<NewFeatureSupportLevelData | null>(null);
 
@@ -44,10 +16,9 @@ export const NewFeatureSupportLevelContextProvider: React.FC<{
 
 export const useNewFeatureSupportLevel = () => {
   const context = React.useContext(NewFeatureSupportLevelContext);
-  const { t } = useTranslation();
   if (!context) {
     throw new Error(
-      t('ai:useNewFeatureSupportLevel must be used within NewFeatureSupportLevelContextProvider.'),
+      'useNewFeatureSupportLevel must be used within NewFeatureSupportLevelContextProvider.',
     );
   }
   return context;

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

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

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

@@ -0,0 +1,30 @@
+import {
+  ArchitectureSupportLevelId,
+  FeatureSupportLevelId,
+  SupportLevel,
+} from '@openshift-assisted/types/assisted-installer-service';
+import { CpuArchitecture, FeatureId } from '../../types';
+
+export type NewFeatureSupportLevelMap = Record<FeatureSupportLevelId, SupportLevel>;
+export type ArchitectureSupportLevelMap = Record<ArchitectureSupportLevelId, SupportLevel>;
+
+export type ActiveFeatureConfiguration = {
+  underlyingCpuArchitecture: CpuArchitecture;
+  hasStaticIpNetworking: boolean;
+};
+
+export type NewFeatureSupportLevelData = {
+  getFeatureSupportLevels(): NewFeatureSupportLevelMap;
+  getFeatureSupportLevel(
+    featureId: FeatureId,
+    supportLevelData?: NewFeatureSupportLevelMap,
+  ): SupportLevel | undefined;
+  isFeatureDisabled(featureId: FeatureId, supportLevelData?: NewFeatureSupportLevelMap): boolean;
+  getFeatureDisabledReason(
+    featureId: FeatureId,
+    supportLevelData?: NewFeatureSupportLevelMap,
+    cpuArchitecture?: string,
+  ): string | undefined;
+  isFeatureSupported(featureId: FeatureId, supportLevelData?: NewFeatureSupportLevelMap): boolean;
+  activeFeatureConfiguration?: ActiveFeatureConfiguration;
+};

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

@@ -1,10 +1,8 @@
-import { Cluster, stringToJSON, SupportLevel } from '../../api';
+import { Cluster, SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
 import { ClusterFeatureUsage, FeatureId, FeatureIdToSupportLevel } from '../../types';
-import {
-  NewFeatureSupportLevelData,
-  NewFeatureSupportLevelMap,
-} from './NewFeatureSupportLevelContext';
+import type { NewFeatureSupportLevelData, NewFeatureSupportLevelMap } from './types';
 import { TFunction } from 'i18next';
+import { stringToJSON } from '../../utils';
 
 export const getLimitedFeatureSupportLevels = (
   cluster: Cluster,

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

@@ -1,5 +1,12 @@
 import React from 'react';
-import { TextContent, Text, TextVariants, Popover } from '@patternfly/react-core';
+import {
+  TextContent,
+  Text,
+  TextVariants,
+  Popover,
+  Alert,
+  AlertVariant,
+} from '@patternfly/react-core';
 import {
   Table,
   TableHeader,
@@ -10,7 +17,8 @@ import {
   IRow,
 } from '@patternfly/react-table';
 import { ExtraParamsType } from '@patternfly/react-table/dist/js/components/Table/base';
-import { Disk, fileSize, Host, WithTestID } from '../../index';
+import type { Disk, Host } from '@openshift-assisted/types/assisted-installer-service';
+import type { WithTestID } from '../../types/index';
 import DiskRole, { OnDiskRoleType } from '../hosts/DiskRole';
 import DiskLimitations from '../hosts/DiskLimitations';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
@@ -19,6 +27,10 @@ import FormatDiskCheckbox, {
   DiskFormattingType,
   isInDiskSkipFormattingList,
 } from '../hosts/FormatDiskCheckbox';
+import { fileSize } from '../../utils';
+import { PopoverIcon } from '../ui';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { TFunction } from 'i18next';
 
 interface DisksTableProps extends WithTestID {
   canEditDisks?: (host: Host) => boolean;
@@ -29,7 +41,7 @@ interface DisksTableProps extends WithTestID {
   updateDiskSkipFormatting?: DiskFormattingType;
 }
 
-const diskColumns = (showFormat: boolean) => [
+const diskColumns = (t: TFunction, showFormat: boolean) => [
   { title: 'Name' },
   { title: 'Role' },
   { title: 'Limitations' },
@@ -38,7 +50,13 @@ const diskColumns = (showFormat: boolean) => [
   { title: 'Size' },
   { title: 'Serial' },
   { title: 'Model' },
-  { title: 'WWN' },
+  {
+    title: (
+      <>
+        WWN <PopoverIcon bodyContent={t('ai:World Wide Name (WWN) is a unique disk identifier.')} />
+      </>
+    ),
+  },
 ];
 
 const diskRowKey = ({ rowData }: ExtraParamsType) => rowData?.key as string;
@@ -53,6 +71,80 @@ const SkipFormattingDisk = () => (
   </TextContent>
 );
 
+const getDiskLimitation = (
+  diskName: Disk['name'],
+  hostName: Host['requestedHostname'],
+  holder: Disk,
+) => {
+  if (holder.driveType) {
+    switch (holder.driveType) {
+      case 'LVM':
+        return `LVM logical volumes were found on the installation disk ${
+          diskName as string
+        } selected for host ${hostName as string} and will be deleted during installation.`;
+      case 'RAID':
+        return `The installation disk ${diskName as string} selected for host ${
+          hostName as string
+        }, is part of a software RAID that will be deleted during the installation.`;
+      case 'Multipath':
+        return `The installation disk ${diskName as string} selected for host ${
+          hostName as string
+        } is managed by multipath. We strongly recommend using the multipath device ${
+          holder.name as string
+        } to improve reliability.`;
+    }
+  }
+};
+
+const DiskName = ({
+  disk,
+  disks,
+  host,
+  installationDiskId,
+}: {
+  disk: Disk;
+  disks: Disk[];
+  host: Host;
+  installationDiskId?: string;
+}) => {
+  const isIndented = disk.holders?.split(',').length === 1;
+  let diskLimitations = null;
+
+  if (disk.id === installationDiskId) {
+    const parentDisk = disks.find((d) => disk.holders?.split(',').includes(d.name as string));
+    if (parentDisk) {
+      diskLimitations = getDiskLimitation(disk.name, host.requestedHostname, parentDisk);
+    }
+  }
+
+  return (
+    <>
+      {isIndented && <span style={{ width: '1rem', display: 'inline-block' }} />}
+      {isInDiskSkipFormattingList(host, disk.id) && (
+        <Popover bodyContent={<SkipFormattingDisk />} minWidth="20rem" maxWidth="30rem">
+          <ExclamationTriangleIcon color={warningColor.value} size="sm" />
+        </Popover>
+      )}
+      {'   '}
+      {disk.bootable ? `${disk.name || ''} (bootable)` : disk.name}
+      {diskLimitations && (
+        <>
+          {'    '}
+          <Popover
+            headerContent="Warning"
+            bodyContent={<Alert variant={AlertVariant.warning} isInline title={diskLimitations} />}
+            minWidth="20rem"
+            maxWidth="30rem"
+            data-testid="disk-limitations-popover"
+          >
+            <ExclamationTriangleIcon color={warningColor.value} size="sm" />
+          </Popover>
+        </>
+      )}
+    </>
+  );
+};
+
 const DisksTable = ({
   canEditDisks,
   host,
@@ -62,24 +154,29 @@ const DisksTable = ({
   onDiskRole,
   updateDiskSkipFormatting,
 }: DisksTableProps) => {
+  const { t } = useTranslation();
   const isEditable = !!canEditDisks?.(host);
-  const diskColumnTitles = diskColumns(isEditable);
+  const diskColumnTitles = diskColumns(t, isEditable);
 
-  const rows: IRow[] = [...disks]
-    .sort((diskA, diskB) => diskA.name?.localeCompare(diskB.name || '') || 0)
+  const rows: IRow[] = disks
+    .filter((disk) => disk.driveType !== 'LVM')
+    .sort((a, b) => (a.name && a.name.localeCompare(b.name as string)) || 0)
+    .sort((a, b) => {
+      const aVal = (a.holders || a.name) as string;
+      const bVal = (b.holders || b.name) as string;
+
+      return aVal?.localeCompare(bVal) || 0;
+    })
     .map((disk, index) => ({
       cells: [
         {
           title: (
-            <>
-              {isInDiskSkipFormattingList(host, disk.id) && (
-                <Popover bodyContent={<SkipFormattingDisk />} minWidth="20rem" maxWidth="30rem">
-                  <ExclamationTriangleIcon color={warningColor.value} size="sm" />
-                </Popover>
-              )}
-              {'   '}
-              {disk.bootable ? `${disk.name || ''} (bootable)` : disk.name}
-            </>
+            <DiskName
+              disk={disk}
+              disks={disks}
+              host={host}
+              installationDiskId={installationDiskId}
+            />
           ),
           props: { 'data-testid': 'disk-name' },
         },
@@ -133,4 +230,4 @@ const DisksTable = ({
   );
 };
 
-export default DisksTable;
+export { DisksTable, getDiskLimitation };

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Grid, GridItem } from '@patternfly/react-core';
-import { getInventory, Host } from '../../index';
+import { getInventory } from '../../index';
 import { OnDiskRoleType } from '../hosts/DiskRole';
 import { DiskFormattingType } from '../hosts/FormatDiskCheckbox';
-import DisksTable from './DisksTable';
+import { DisksTable } from './DisksTable';
 import SectionTitle from '../ui/SectionTitle';
+import { Host } from '@openshift-assisted/types/assisted-installer-service';
 
 type StorageDetailProps = {
   host: Host;

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { Host, WithTestID } from '../../index';
+import { WithTestID } from '../../index';
 import { usePagination } from '../hosts/usePagination';
 import AITable, { AITableProps } from '../hosts/AITable';
+import { Host } from '@openshift-assisted/types/assisted-installer-service';
 
 const getHostId = (host: Host) => host.id;
 

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { sortable } from '@patternfly/react-table';
 import { TFunction } from 'i18next';
-import { getHostRole, getInventory, Host, RoleCell } from '../../index';
+import { getHostRole, getInventory, RoleCell } from '../../index';
 import { TableRow } from '../hosts/AITable';
 import { Popover, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+import { Host } from '@openshift-assisted/types/assisted-installer-service';
 
 const SkipFormattingDisks = () => (
   <TextContent>