@openshift-assisted/ui-lib 2.14.6-cim → 2.15.0-cim

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

@@ -2,7 +2,12 @@ import React from 'react';
 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 } from '@openshift-assisted/types/assisted-installer-service';
+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 { DASH } from '../constants';
@@ -107,6 +112,62 @@ const NicsTable: React.FC<NicsTableProps & WithTestID> = ({ interfaces, testId }
   );
 };
 
+type GpusTableProps = {
+  gpus: Gpu[];
+};
+
+const gpusColumns = (t: TFunction) => [
+  { title: t('ai:Vendor') },
+  { title: t('ai:Vendor ID') },
+  { title: t('ai:Model') },
+  { title: t('ai:Device ID') },
+  { title: t('ai:Address') },
+];
+
+const GpusTable: React.FC<GpusTableProps & WithTestID> = ({ gpus: gpus, testId }) => {
+  const { t } = useTranslation();
+  const rows = gpus
+    .sort((gpuA, gpuB) => gpuA.name?.localeCompare(gpuB.name || '') || 0)
+    .map((gpu) => ({
+      cells: [
+        { title: gpu.vendor, props: { 'data-testid': 'gpu-vendor' } },
+        { title: gpu.vendorId, props: { 'data-testid': 'gpu-vendor-id' } },
+        { title: gpu.name, props: { 'data-testid': 'gpu-name' } },
+        { title: gpu.deviceId, props: { 'data-testid': 'gpu-device-id' } },
+        { title: gpu.address, props: { 'data-testid': 'gpu-address' } },
+      ],
+      key: gpu.name,
+    })) as { cells: { title: string | React.ReactNode; props?: object }[]; key: string }[];
+
+  return (
+    <Table
+      data-testid={testId}
+      variant={TableVariant.compact}
+      aria-label={t("ai:Host's graphics processing units table")}
+      borders={false}
+    >
+      <Thead>
+        <Tr>
+          {gpusColumns(t).map((col, i) => (
+            <Th key={`col-${i}`}>{col.title}</Th>
+          ))}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {rows.map((row, i) => (
+          <Tr key={`gpu-row:${row.key}`}>
+            {row.cells?.map((cell, j) => (
+              <Td key={`cell-${i}-${j}`} {...cell.props}>
+                {cell.title}
+              </Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  );
+};
+
 export const HostDetail = ({
   host,
   canEditDisks,
@@ -124,6 +185,7 @@ export const HostDetail = ({
   );
   const rowInfo = getHostRowHardwareInfo(inventory);
   const nics = inventory.interfaces || [];
+  const gpus = inventory.gpus || [];
 
   let bmcAddress = inventory.bmcAddress;
   if (inventory.bmcV6address) {
@@ -218,6 +280,14 @@ export const HostDetail = ({
       <GridItem>
         <NicsTable interfaces={nics} testId={'nics-table'} />
       </GridItem>
+      {gpus.length > 0 && (
+        <div>
+          <SectionTitle testId={'gpus-section'} title={t('ai:GPU', { count: gpus.length })} />
+          <GridItem>
+            <GpusTable gpus={gpus} testId={'gpus-table'} />
+          </GridItem>
+        </div>
+      )}
     </Grid>
   );
 };

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

@@ -57,7 +57,6 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
   const { host } = props;
   const { status, statusInfo } = host;
   const { t } = useTranslation();
-
   if (['installing-in-progress'].includes(status)) {
     return (
       <TextContent>
@@ -141,7 +140,7 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
             <Text>{details}</Text>
           </TextContent>
         )}
-        <HostValidationGroups {...props} />
+        <HostValidationGroups openshiftVersion={openshiftVersion} {...props} />
       </StackItem>
     </Stack>
   );

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownItem } from '@patternfly/react-core/deprecated';
+import { DropdownItem } from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type ChangeHostnameActionProps = {

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

@@ -9,6 +9,7 @@ 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,
@@ -19,6 +20,7 @@ import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { getKeys } from '../../utils';
 
 import './HostValidationGroups.css';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 export type AdditionNtpSourcePropsType = {
   AdditionalNTPSourcesDialogToggleComponent?: React.FC;
@@ -39,6 +41,7 @@ export type ValidationInfoActionProps = AdditionNtpSourcePropsType &
 
 type HostValidationGroupsProps = ValidationInfoActionProps & {
   validationsInfo: ValidationsInfo;
+  openshiftVersion?: string;
 };
 
 type ValidationGroupAlertProps = ValidationInfoActionProps & {
@@ -145,6 +148,34 @@ const ApiVipConnectivityAlert = ({
   );
 };
 
+const MtuInfoLink = ({ docsVersion }: { docsVersion: string }) => {
+  const { t } = useTranslation();
+  return (
+    <a href={getMtuLink(docsVersion)} target="_blank" rel="noopener noreferrer">
+      {t('ai:Learn more about MTU (maximum transmission unit)')} <ExternalLinkAltIcon />.
+    </a>
+  );
+};
+
+const MtuSyncAlert = ({
+  variant,
+  validation,
+  docsVersion,
+}: {
+  variant: AlertVariant;
+  validation: Validation;
+  docsVersion: string;
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Alert title={t('ai:MTU (maximum transmission unit) failure')} variant={variant} isInline>
+      {toSentence(validation.message)} {hostValidationFailureHints(t)[validation.id]}
+      <br />
+      {<MtuInfoLink docsVersion={docsVersion} />}
+    </Alert>
+  );
+};
+
 const ValidationGroupAlerts = ({
   validations,
   title,
@@ -153,7 +184,8 @@ const ValidationGroupAlerts = ({
   AdditionalNTPSourcesDialogToggleComponent,
   UpdateDay2ApiVipDialogToggleComponent,
   host,
-}: ValidationGroupAlertProps) => {
+  openshiftVersion,
+}: ValidationGroupAlertProps & { openshiftVersion?: string }) => {
   if (!validations.length) {
     return null;
   }
@@ -162,6 +194,7 @@ const ValidationGroupAlerts = ({
     ['hostname-valid']: undefined,
     ['ntp-synced']: undefined,
     ['ignition-downloadable']: undefined,
+    ['mtu-valid']: undefined,
   };
   const alerts = [];
   const validationsWithoutActions: Validation[] = [];
@@ -210,6 +243,16 @@ const ValidationGroupAlerts = ({
       />,
     );
   }
+  if (validationsWithActions['mtu-valid'] && AdditionalNTPSourcesDialogToggleComponent) {
+    alerts.push(
+      <MtuSyncAlert
+        validation={validationsWithActions['mtu-valid']}
+        variant={variant}
+        key="mtu-sync-alert"
+        docsVersion={openshiftVersion || '4.17'}
+      />,
+    );
+  }
   if (validationsWithoutActions.length > 0) {
     alerts.push(
       <ValidationsAlert
@@ -223,20 +266,22 @@ const ValidationGroupAlerts = ({
   return <AlertGroup>{alerts}</AlertGroup>;
 };
 
-export const HostValidationGroups = ({ validationsInfo, ...props }: HostValidationGroupsProps) => {
+export const HostValidationGroups = ({
+  validationsInfo,
+  openshiftVersion,
+  ...props
+}: HostValidationGroupsProps) => {
   const { t } = useTranslation();
   return (
     <>
       {getKeys(validationsInfo).map((groupName) => {
         const validations = validationsInfo[groupName] || [];
-
         const pendingValidations = validations.filter(
           (v) => v.status === 'pending' && v.id !== 'ntp-synced',
         );
         const failedValidations = validations.filter(
           (v) => (v.status === 'failure' || v.status === 'error') && v.id !== 'ntp-synced',
         );
-
         const softValidations = validations.filter(
           (v) => ['pending', 'failure', 'error'].includes(v.status) && v.id === 'ntp-synced',
         );
@@ -261,7 +306,6 @@ export const HostValidationGroups = ({ validationsInfo, ...props }: HostValidati
             </>
           );
         };
-
         const groupLabel = hostValidationGroupLabels(t)[groupName] as string;
         return (
           <Fragment key={groupName}>
@@ -279,11 +323,13 @@ export const HostValidationGroups = ({ validationsInfo, ...props }: HostValidati
                     variant={AlertVariant.info}
                     title={t('ai:Pending validations:')}
                     validations={pendingValidations}
+                    openshiftVersion={openshiftVersion}
                     {...props}
                   />
                   <ValidationGroupAlerts
                     variant={AlertVariant.info}
                     validations={softValidations}
+                    openshiftVersion={openshiftVersion}
                     title={''}
                     {...props}
                   />
@@ -294,6 +340,7 @@ export const HostValidationGroups = ({ validationsInfo, ...props }: HostValidati
               variant={AlertVariant.warning}
               title={t('ai:Failed validations:')}
               validations={failedValidations}
+              openshiftVersion={openshiftVersion}
               {...props}
             />
           </Fragment>

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

@@ -11,14 +11,13 @@ import {
   ToolbarItem,
   ToolbarProps,
   Tooltip,
-} from '@patternfly/react-core';
-import {
   Dropdown,
   DropdownItem,
-  DropdownToggle,
-  DropdownToggleCheckbox,
-} from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+  MenuToggle,
+  MenuToggleElement,
+  DropdownList,
+  MenuToggleCheckbox,
+} from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 import './TableToolbar.css';
@@ -52,6 +51,8 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
   const [selectOpen, setSelectOpen] = React.useState(false);
   const onSelectToggle = React.useCallback(() => setSelectOpen(!selectOpen), [selectOpen]);
   const onActionsToggle = React.useCallback(() => setActionsOpen(!actionsOpen), [actionsOpen]);
+  const onSelectAll = () => setSelectedIDs(itemIDs);
+  const onSelectNone = () => setSelectedIDs([]);
 
   React.useEffect(() => {
     if (!selectedIDs.every((id) => itemIDs.includes(id))) {
@@ -72,57 +73,62 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
   const actionsDropdown = (
     <Dropdown
       onSelect={onActionsToggle}
-      toggle={
-        <DropdownToggle
-          onToggle={onActionsToggle}
-          toggleIndicator={CaretDownIcon}
-          isDisabled={isDisabled}
-        >
+      onOpenChange={onActionsToggle}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle ref={toggleRef} isFullWidth onClick={onActionsToggle} isExpanded={actionsOpen}>
           {t('ai:Actions')}
-        </DropdownToggle>
-      }
+        </MenuToggle>
+      )}
       isOpen={actionsOpen}
-      dropdownItems={actions}
-    />
+    >
+      {actions}
+    </Dropdown>
+  );
+
+  const SelectDropdown = (
+    <Dropdown
+      onSelect={onSelectToggle}
+      onOpenChange={onSelectToggle}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          isFullWidth
+          onClick={onSelectToggle}
+          isExpanded={selectOpen}
+          splitButtonOptions={{
+            items: [
+              <MenuToggleCheckbox
+                id="select-checkbox"
+                key="select-checkbox"
+                aria-label="Select all"
+                onChange={(checked, _event) => (checked ? onSelectAll() : onSelectNone())}
+                isChecked={isChecked}
+              >
+                {selectedIDs.length} {t('ai:selected')}
+              </MenuToggleCheckbox>,
+            ],
+          }}
+        />
+      )}
+      isOpen={selectOpen}
+    >
+      <DropdownList>
+        <DropdownItem id={'select-all'} key="select-all" onClick={onSelectAll}>
+          {t('ai:Select all')}
+        </DropdownItem>
+        <DropdownItem id={'select-none'} key="select-none" onClick={onSelectNone}>
+          {t('ai:Select none')}
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
   );
 
-  const onSelectAll = () => setSelectedIDs(itemIDs);
-  const onSelectNone = () => setSelectedIDs([]);
   return (
     <Split hasGutter>
       <SplitItem isFilled>
         <Toolbar className="table-toolbar" clearAllFilters={clearAllFilters}>
           <ToolbarContent className="table-toolbar__content">
-            <ToolbarItem>
-              <Dropdown
-                onSelect={onSelectToggle}
-                toggle={
-                  <DropdownToggle
-                    splitButtonItems={[
-                      <DropdownToggleCheckbox
-                        id="select-checkbox"
-                        key="select-checkbox"
-                        aria-label={t('ai:Select all')}
-                        onChange={(_event, checked) => (checked ? onSelectAll() : onSelectNone())}
-                        isChecked={isChecked}
-                      >
-                        {selectedIDs.length} {t('ai:selected')}
-                      </DropdownToggleCheckbox>,
-                    ]}
-                    onToggle={onSelectToggle}
-                  />
-                }
-                isOpen={selectOpen}
-                dropdownItems={[
-                  <DropdownItem key="select-all" onClick={onSelectAll}>
-                    {t('ai:Select all')}
-                  </DropdownItem>,
-                  <DropdownItem key="select-none" onClick={onSelectNone}>
-                    {t('ai:Select none')}
-                  </DropdownItem>,
-                ]}
-              />
-            </ToolbarItem>
+            <ToolbarItem>{SelectDropdown}</ToolbarItem>
             {children}
             <ToolbarItem>
               {isDisabled ? (

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

@@ -232,7 +232,7 @@ export const areOnlySoftValidationsFailing = (validationsInfo: HostValidationsIn
   );
   if (!failingValidationIds.length) return false;
   for (const id of failingValidationIds) {
-    if (!['ntp-synced', 'container-images-available'].includes(id)) {
+    if (!['ntp-synced', 'container-images-available', 'mtu-valid'].includes(id)) {
       return false;
     }
   }

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

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

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

@@ -14,19 +14,26 @@ export type ActiveFeatureConfiguration = {
   hasStaticIpNetworking: boolean;
 };
 
+export type GetFeatureDisabledReason = (
+  featureId: FeatureId,
+  supportLevelData?: NewFeatureSupportLevelMap,
+  cpuArchitecture?: SupportedCpuArchitecture,
+  platformType?: PlatformType,
+) => string | undefined;
+
+export type GetFeatureSupportLevel = (
+  featureId: FeatureId,
+  supportLevelData?: NewFeatureSupportLevelMap,
+) => SupportLevel | undefined;
+
 export type NewFeatureSupportLevelData = {
   getFeatureSupportLevels(): NewFeatureSupportLevelMap;
-  getFeatureSupportLevel(
-    featureId: FeatureId,
-    supportLevelData?: NewFeatureSupportLevelMap,
-  ): SupportLevel | undefined;
+  getFeatureSupportLevel: GetFeatureSupportLevel;
   isFeatureDisabled(featureId: FeatureId, supportLevelData?: NewFeatureSupportLevelMap): boolean;
-  getFeatureDisabledReason(
+  getFeatureDisabledReason: GetFeatureDisabledReason;
+  isFeatureSupported: (
     featureId: FeatureId,
     supportLevelData?: NewFeatureSupportLevelMap,
-    cpuArchitecture?: SupportedCpuArchitecture,
-    platformType?: PlatformType,
-  ): string | undefined;
-  isFeatureSupported(featureId: FeatureId, supportLevelData?: NewFeatureSupportLevelMap): boolean;
+  ) => boolean;
   activeFeatureConfiguration?: ActiveFeatureConfiguration;
 };