@openshift-assisted/ui-lib 2.9.14-cim → 2.10.0-cim

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

@@ -1,237 +1,248 @@
 import * as React from 'react';
-import {
-  BanIcon,
-  CheckCircleIcon,
-  ConnectedIcon,
-  DisconnectedIcon,
-  ExclamationCircleIcon,
-  ExclamationTriangleIcon,
-  InProgressIcon,
-  LinkIcon,
-  PendingIcon,
-  PlusIcon,
-} from '@patternfly/react-icons';
-import {
-  global_danger_color_100 as dangerColor,
-  global_warning_color_100 as warningColor,
-  global_success_color_100 as okColor,
-  chart_color_blue_300 as blueColor,
-} from '@patternfly/react-tokens';
+import { BanIcon } from '@patternfly/react-icons/dist/js/icons/ban-icon';
+import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
+import { DisconnectedIcon } from '@patternfly/react-icons/dist/js/icons/disconnected-icon';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
+import { LinkIcon } from '@patternfly/react-icons/dist/js/icons/link-icon';
+import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
+import { PlusIcon } from '@patternfly/react-icons/dist/js/icons/plus-icon';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
+import { chart_color_blue_300 as blueColor } from '@patternfly/react-tokens/dist/js/chart_color_blue_300';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import { HostStatus } from './types';
+import { TFunction } from 'i18next';
 
-export const hostStatus: HostStatus<Host['status'] | 'finalizing'> = Object.freeze({
-  'unbinding-pending-user-action': {
-    key: 'unbinding-pending-user-action',
-    title: 'Removing from cluster',
-    category: 'Discovery related',
-    icon: <InProgressIcon />,
-    details:
-      'This host is being removed from the cluster. To finish, reboot the host with the infrastructure environment ISO.',
-  },
-  reclaiming: {
-    key: 'reclaiming',
-    title: 'Returning to the infrastructure environment',
-    category: 'Discovery related',
-    icon: <InProgressIcon />,
-    details: 'This host is being removed from the cluster.',
-  },
-  'reclaiming-rebooting': {
-    key: 'reclaiming-rebooting',
-    title: 'Rebooting while returning to the infrastructure environment',
-    category: 'Discovery related',
-    icon: <InProgressIcon />,
-    details: 'This host is being rebooted to be available for reuse in another cluster.',
-  },
-  'preparing-failed': {
-    key: 'preparing-failed',
-    title: 'Preparing step failed',
-    category: 'Installation related',
-    details: 'Preparing step failed',
-  },
-  unbinding: {
-    key: 'unbinding',
-    title: 'Removing from cluster',
-    category: 'Discovery related',
-    icon: <InProgressIcon />,
-    details: 'This host is being removed from the cluster.',
-  },
-  'disabled-unbound': {
-    key: 'disabled-unbound',
-    title: 'Disabled',
-    category: 'Discovery related',
-    icon: <BanIcon />,
-    details:
-      'This host was manually removed from a cluster and can not be included in another one. Enable this host to make it available again.',
-  },
-  'disconnected-unbound': {
-    key: 'disconnected-unbound',
-    title: 'Disconnected',
-    category: 'Discovery related',
-    icon: <DisconnectedIcon />,
-    details: 'Ensure the host is running, responsive, and is able to contact the installer.',
-  },
-  'discovering-unbound': {
-    key: 'discovering-unbound',
-    title: 'Discovering',
-    category: 'Discovery related',
-    icon: <ConnectedIcon />,
-    details:
-      'This host is transmitting its hardware and networking information to the installer. Please wait while this information is received.',
-  },
-  'insufficient-unbound': {
-    key: 'insufficient-unbound',
-    title: 'Insufficient',
-    category: 'Discovery related',
-    icon: <ExclamationTriangleIcon color={warningColor.value} />,
-    details:
-      'This host does not meet the minimum hardware or networking requirements and can not be included in the cluster.',
-  },
-  'known-unbound': {
-    key: 'known-unbound',
-    title: 'Available',
-    category: 'Discovery related',
-    icon: <PlusIcon color={blueColor.value} />,
-    details:
-      'This host meets the minimum hardware and networking requirements and can be included in the cluster.',
-  },
-  binding: {
-    key: 'binding',
-    title: 'Binding',
-    category: 'Discovery related',
-    icon: <LinkIcon />,
-    details: 'This host is being added to the cluster.',
-  },
-  discovering: {
-    key: 'discovering',
-    title: 'Discovering',
-    category: 'Discovery related',
-    icon: <ConnectedIcon />,
-    details:
-      'This host is transmitting its hardware and networking information to the installer. Please wait while this information is received.',
-  },
-  'pending-for-input': {
-    key: 'pending-for-input',
-    title: 'Pending input',
-    category: 'Discovery related',
-    icon: <PendingIcon />,
-  },
-  known: {
-    key: 'known',
-    title: 'Ready',
-    category: 'Discovery related',
-    icon: <CheckCircleIcon color={okColor.value} />,
-    details:
-      'This host meets the minimum hardware and networking requirements and will be included in the cluster.',
-  },
-  disconnected: {
-    key: 'disconnected',
-    title: 'Disconnected',
-    category: 'Discovery related',
-    icon: <DisconnectedIcon />,
-    details:
-      'This host has lost its connection to the installer and will not be included in the cluster unless connectivity is restored.',
-  },
-  insufficient: {
-    key: 'insufficient',
-    title: 'Insufficient',
-    category: 'Discovery related',
-    icon: <ExclamationTriangleIcon color={warningColor.value} />,
-    details:
-      'This host does not meet the minimum hardware or networking requirements and will not be included in the cluster.',
-  },
-  disabled: {
-    key: 'disabled',
-    title: 'Disabled',
-    category: 'Discovery related',
-    icon: <BanIcon />,
-    details:
-      'This host was manually disabled and will not be included in the cluster. Enable this host to include it again.',
-  },
-  'preparing-for-installation': {
-    key: 'preparing-for-installation',
-    title: 'Preparing for installation',
-    category: 'Installation related',
-    icon: <InProgressIcon />,
-  },
-  'preparing-successful': {
-    key: 'preparing-successful',
-    title: 'Preparing step successful',
-    category: 'Installation related',
-    icon: <InProgressIcon />,
-  },
-  installing: {
-    key: 'installing',
-    title: 'Starting installation',
-    category: 'Installation related',
-    icon: <InProgressIcon />,
-  },
-  'installing-in-progress': {
-    key: 'installing-in-progress',
-    title: 'Installing',
-    category: 'Installation related',
-    icon: <InProgressIcon />,
-    withProgress: true,
-  },
-  'installing-pending-user-action': {
-    key: 'installing-pending-user-action',
-    title: 'Pending user action',
-    category: 'Installation related',
-    icon: <ExclamationTriangleIcon color={warningColor.value} />,
-    details: 'This host is pending user action',
-  },
-  installed: {
-    key: 'installed',
-    title: 'Installed',
-    category: 'Installation related',
-    icon: <CheckCircleIcon color={okColor.value} />,
-    details: 'This host completed its installation successfully.',
-  },
-  cancelled: {
-    key: 'cancelled',
-    title: 'Installation cancelled',
-    category: 'Installation related',
-    icon: <BanIcon />,
-    details: 'This host installation has been cancelled.',
-    withProgress: true,
-  },
-  error: {
-    key: 'error',
-    title: 'Error',
-    category: 'Installation related',
-    icon: <ExclamationCircleIcon color={dangerColor.value} />,
-    details: 'This host failed its installation.',
-    withProgress: true,
-  },
-  resetting: {
-    key: 'resetting',
-    title: 'Resetting',
-    category: 'Installation related',
-    icon: <InProgressIcon />,
-    details: 'This host is resetting the installation.',
-  },
-  'resetting-pending-user-action': {
-    key: 'resetting-pending-user-action',
-    title: 'Reboot required',
-    category: 'Installation related',
-    icon: <ExclamationTriangleIcon color={warningColor.value} />,
-    details:
-      'Host has already been booted from disk during the previous installation. To finish resetting the installation, boot the host into the discovery image',
-  },
-  finalizing: {
-    key: 'finalizing',
-    title: 'Finalizing',
-    category: 'Installation related',
-    icon: <InProgressIcon />,
-  },
-  'added-to-existing-cluster': {
-    key: 'added-to-existing-cluster',
-    title: 'Installed',
-    category: 'Installation related',
-    icon: <CheckCircleIcon color={okColor.value} />,
-    details: 'This host completed its installation successfully.',
-  },
-});
+export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizing'> =>
+  Object.freeze({
+    'unbinding-pending-user-action': {
+      key: 'unbinding-pending-user-action',
+      title: t('ai:Removing from cluster'),
+      category: 'Discovery related',
+      icon: <InProgressIcon />,
+      details: t(
+        'ai:This host is being removed from the cluster. To finish, reboot the host with the infrastructure environment ISO.',
+      ),
+    },
+    reclaiming: {
+      key: 'reclaiming',
+      title: t('ai:Returning to the infrastructure environment'),
+      category: 'Discovery related',
+      icon: <InProgressIcon />,
+      details: t('ai:This host is being removed from the cluster.'),
+    },
+    'reclaiming-rebooting': {
+      key: 'reclaiming-rebooting',
+      title: t('ai:Rebooting while returning to the infrastructure environment'),
+      category: 'Discovery related',
+      icon: <InProgressIcon />,
+      details: t('ai:This host is being rebooted to be available for reuse in another cluster.'),
+    },
+    'preparing-failed': {
+      key: 'preparing-failed',
+      title: t('ai:Preparing step failed'),
+      category: 'Installation related',
+      details: t('ai:Preparing step failed'),
+    },
+    unbinding: {
+      key: 'unbinding',
+      title: t('ai:Removing from cluster'),
+      category: 'Discovery related',
+      icon: <InProgressIcon />,
+      details: t('ai:This host is being removed from the cluster.'),
+    },
+    'disabled-unbound': {
+      key: 'disabled-unbound',
+      title: t('ai:Disabled'),
+      category: 'Discovery related',
+      icon: <BanIcon />,
+      details: t(
+        'ai:This host was manually removed from a cluster and can not be included in another one. Enable this host to make it available again.',
+      ),
+    },
+    'disconnected-unbound': {
+      key: 'disconnected-unbound',
+      title: t('ai:Disconnected'),
+      category: 'Discovery related',
+      icon: <DisconnectedIcon />,
+      details: t(
+        'ai:Ensure the host is running, responsive, and is able to contact the installer.',
+      ),
+    },
+    'discovering-unbound': {
+      key: 'discovering-unbound',
+      title: t('ai:Discovering'),
+      category: 'Discovery related',
+      icon: <ConnectedIcon />,
+      details: t(
+        'ai:This host is transmitting its hardware and networking information to the installer. Please wait while this information is received.',
+      ),
+    },
+    'insufficient-unbound': {
+      key: 'insufficient-unbound',
+      title: t('ai:Insufficient'),
+      category: 'Discovery related',
+      icon: <ExclamationTriangleIcon color={warningColor.value} />,
+      details: t(
+        'ai:This host does not meet the minimum hardware or networking requirements and can not be included in the cluster.',
+      ),
+    },
+    'known-unbound': {
+      key: 'known-unbound',
+      title: t('ai:Available'),
+      category: 'Discovery related',
+      icon: <PlusIcon color={blueColor.value} />,
+      details: t(
+        'ai:This host meets the minimum hardware and networking requirements and can be included in the cluster.',
+      ),
+    },
+    binding: {
+      key: 'binding',
+      title: t('ai:Binding'),
+      category: 'Discovery related',
+      icon: <LinkIcon />,
+      details: t('ai:This host is being added to the cluster.'),
+    },
+    discovering: {
+      key: 'discovering',
+      title: t('ai:Discovering'),
+      category: 'Discovery related',
+      icon: <ConnectedIcon />,
+      details: t(
+        'ai:This host is transmitting its hardware and networking information to the installer. Please wait while this information is received.',
+      ),
+    },
+    'pending-for-input': {
+      key: 'pending-for-input',
+      title: t('ai:Pending input'),
+      category: 'Discovery related',
+      icon: <PendingIcon />,
+    },
+    known: {
+      key: 'known',
+      title: t('ai:Ready'),
+      category: 'Discovery related',
+      icon: <CheckCircleIcon color={okColor.value} />,
+      details: t(
+        'ai:This host meets the minimum hardware and networking requirements and will be included in the cluster.',
+      ),
+    },
+    disconnected: {
+      key: 'disconnected',
+      title: t('ai:Disconnected'),
+      category: 'Discovery related',
+      icon: <DisconnectedIcon />,
+      details: t(
+        'ai:This host has lost its connection to the installer and will not be included in the cluster unless connectivity is restored.',
+      ),
+    },
+    insufficient: {
+      key: 'insufficient',
+      title: t('ai:Insufficient'),
+      category: 'Discovery related',
+      icon: <ExclamationTriangleIcon color={warningColor.value} />,
+      details: t(
+        'ai:This host does not meet the minimum hardware or networking requirements and will not be included in the cluster.',
+      ),
+    },
+    disabled: {
+      key: 'disabled',
+      title: t('ai:Disabled'),
+      category: 'Discovery related',
+      icon: <BanIcon />,
+      details: t(
+        'ai:This host was manually disabled and will not be included in the cluster. Enable this host to include it again.',
+      ),
+    },
+    'preparing-for-installation': {
+      key: 'preparing-for-installation',
+      title: t('ai:Preparing for installation'),
+      category: 'Installation related',
+      icon: <InProgressIcon />,
+    },
+    'preparing-successful': {
+      key: 'preparing-successful',
+      title: t('ai:Preparing step successful'),
+      category: 'Installation related',
+      icon: <InProgressIcon />,
+    },
+    installing: {
+      key: 'installing',
+      title: t('ai:Starting installation'),
+      category: 'Installation related',
+      icon: <InProgressIcon />,
+    },
+    'installing-in-progress': {
+      key: 'installing-in-progress',
+      title: t('ai:Installing'),
+      category: 'Installation related',
+      icon: <InProgressIcon />,
+      withProgress: true,
+    },
+    'installing-pending-user-action': {
+      key: 'installing-pending-user-action',
+      title: t('ai:Pending user action'),
+      category: 'Installation related',
+      icon: <ExclamationTriangleIcon color={warningColor.value} />,
+      details: t('ai:This host is pending user action'),
+    },
+    installed: {
+      key: 'installed',
+      title: t('ai:Installed'),
+      category: 'Installation related',
+      icon: <CheckCircleIcon color={okColor.value} />,
+      details: t('ai:This host completed its installation successfully.'),
+    },
+    cancelled: {
+      key: 'cancelled',
+      title: t('ai:Installation cancelled'),
+      category: 'Installation related',
+      icon: <BanIcon />,
+      details: t('ai:This host installation has been cancelled.'),
+      withProgress: true,
+    },
+    error: {
+      key: 'error',
+      title: t('ai:Error'),
+      category: 'Installation related',
+      icon: <ExclamationCircleIcon color={dangerColor.value} />,
+      details: t('ai:This host failed its installation.'),
+      withProgress: true,
+    },
+    resetting: {
+      key: 'resetting',
+      title: t('ai:Resetting'),
+      category: 'Installation related',
+      icon: <InProgressIcon />,
+      details: t('ai:This host is resetting the installation.'),
+    },
+    'resetting-pending-user-action': {
+      key: 'resetting-pending-user-action',
+      title: t('ai:Reboot required'),
+      category: 'Installation related',
+      icon: <ExclamationTriangleIcon color={warningColor.value} />,
+      details: t(
+        'ai:Host has already been booted from disk during the previous installation. To finish resetting the installation, boot the host into the discovery image',
+      ),
+    },
+    finalizing: {
+      key: 'finalizing',
+      title: t('ai:Finalizing'),
+      category: 'Installation related',
+      icon: <InProgressIcon />,
+    },
+    'added-to-existing-cluster': {
+      key: 'added-to-existing-cluster',
+      title: t('ai:Installed'),
+      category: 'Installation related',
+      icon: <CheckCircleIcon color={okColor.value} />,
+      details: t('ai:This host completed its installation successfully.'),
+    },
+  });
 
 export const hostStatusOrder: Host['status'][] = [
   'error',

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

@@ -154,7 +154,7 @@ export const statusColumn = (
         title: (
           <HostStatus
             host={host}
-            status={{ ...hostStatus[actualHostStatus], sublabel }}
+            status={{ ...hostStatus(t)[actualHostStatus], sublabel }}
             onEditHostname={editHostname}
             validationsInfo={validationsInfo}
             AdditionalNTPSourcesDialogToggleComponent={AdditionalNTPSourcesDialogToggleComponent}
@@ -286,8 +286,8 @@ export const countColumn = (cluster: Cluster): TableRow<Host> => ({
   header: { title: <HostsCount cluster={cluster} inParenthesis /> },
 });
 
-export const activeNICColumn = (cluster: Cluster): TableRow<Host> => ({
-  header: { title: 'Active NIC', transforms: [sortable] },
+export const activeNICColumn = (cluster: Cluster, t: TFunction): TableRow<Host> => ({
+  header: { title: t('ai:Active NIC'), transforms: [sortable] },
   cell: (host) => {
     const inventory = getInventory(host);
     const nics = inventory.interfaces || [];

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
 import { FeatureId, isPreviewSupportLevel } from '../../types';
-import { TechnologyPreview, DeveloperPreview } from '../ui/PreviewBadge';
+import { TechnologyPreview } from '../ui/TechnologyPreview';
+import { DeveloperPreview } from '../ui/DeveloperPreview';
 
 export type NewSupportLevelBadgeProps = {
   featureId: FeatureId;

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

@@ -21,7 +21,7 @@ import type { Disk, Host } from '@openshift-assisted/types/assisted-installer-se
 import type { WithTestID } from '../../types/index';
 import DiskRole, { OnDiskRoleType } from '../hosts/DiskRole';
 import DiskLimitations from '../hosts/DiskLimitations';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 import FormatDiskCheckbox, {
   DiskFormattingType,
@@ -42,14 +42,14 @@ interface DisksTableProps extends WithTestID {
 }
 
 const diskColumns = (t: TFunction, showFormat: boolean) => [
-  { title: 'Name' },
-  { title: 'Role' },
-  { title: 'Limitations' },
-  showFormat ? { title: 'Format?' } : '',
-  { title: 'Drive type' },
-  { title: 'Size' },
-  { title: 'Serial' },
-  { title: 'Model' },
+  { title: t('ai:Name') },
+  { title: t('ai:Role') },
+  { title: t('ai:Limitations') },
+  showFormat ? { title: t('ai:Format?') } : '',
+  { title: t('ai:Drive type') },
+  { title: t('ai:Size') },
+  { title: t('ai:Serial') },
+  { title: t('ai:Model') },
   {
     title: (
       <>

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

@@ -6,6 +6,7 @@ import { DiskFormattingType } from '../hosts/FormatDiskCheckbox';
 import { DisksTable } from './DisksTable';
 import SectionTitle from '../ui/SectionTitle';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type StorageDetailProps = {
   host: Host;
@@ -23,11 +24,13 @@ const StorageDetail = ({
   const inventory = getInventory(host);
   const disks = inventory.disks || [];
 
+  const { t } = useTranslation();
+
   return (
     <Grid hasGutter>
       <SectionTitle
         testId={'disks-section'}
-        title={`${disks.length} Disk${disks.length === 1 ? '' : 's'}`}
+        title={t('ai:{{count}} Disk', { count: disks.length })}
       />
       <GridItem>
         <DisksTable

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

@@ -4,7 +4,7 @@ import { TFunction } from 'i18next';
 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 { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 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';
 

package/lib/common/components/ui/BorderedIcon/BorderedIcon.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { DownloadIcon, IconSize } from '@patternfly/react-icons';
+import { DownloadIcon } from '@patternfly/react-icons/dist/js/icons/download-icon';
+import { IconSize } from '@patternfly/react-icons/dist/js/createIcon';
 
 export const getPadding = (size: IconSize | keyof typeof IconSize) => {
   switch (size) {

package/lib/common/components/ui/ClusterEventsToolbar.tsx

@@ -19,7 +19,8 @@ import {
   Badge,
   TextInputTypes,
 } from '@patternfly/react-core';
-import { SearchIcon, FilterIcon } from '@patternfly/react-icons';
+import { SearchIcon } from '@patternfly/react-icons/dist/js/icons/search-icon';
+import { FilterIcon } from '@patternfly/react-icons/dist/js/icons/filter-icon';
 import type { ClusterEventsFiltersType } from '../../types';
 import type {
   Cluster,

package/lib/common/components/ui/DeveloperPreview.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { PreviewBadge, PreviewBadgeProps } from './PreviewBadge';
+
+export type DeveloperPreviewProps = Omit<PreviewBadgeProps, 'text' | 'popoverText'>;
+
+export const DeveloperPreview: React.FC<DeveloperPreviewProps> = (props) => {
+  const { t } = useTranslation();
+  return (
+    <PreviewBadge
+      text={t('ai:Developer Preview')}
+      popoverText={t(
+        'ai:Developer preview features are not intended to be used in production environments. The clusters deployed with the developer preview features are considered to be development clusters and are not supported through the Red Hat Customer Portal case management system.',
+      )}
+      {...props}
+    />
+  );
+};
+DeveloperPreview.displayName = 'DeveloperPreview';