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

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

@@ -0,0 +1,344 @@
+import React from 'react';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { FeatureId } from '../../types';
+import {
+  OPERATOR_NAME_AMD_GPU,
+  OPERATOR_NAME_AUTHORINO,
+  OPERATOR_NAME_CNV,
+  OPERATOR_NAME_KMM,
+  OPERATOR_NAME_LSO,
+  OPERATOR_NAME_LVM,
+  OPERATOR_NAME_MCE,
+  OPERATOR_NAME_MTV,
+  OPERATOR_NAME_NMSTATE,
+  OPERATOR_NAME_NODE_FEATURE_DISCOVERY,
+  OPERATOR_NAME_NVIDIA_GPU,
+  OPERATOR_NAME_ODF,
+  OPERATOR_NAME_OPENSHIFT_AI,
+  OPERATOR_NAME_OSC,
+  OPERATOR_NAME_PIPELINES,
+  OPERATOR_NAME_SERVERLESS,
+  OPERATOR_NAME_SERVICEMESH,
+  OPERATOR_NAME_NODE_HEALTHCHECK,
+  OPERATOR_NAME_SELF_NODE_REMEDIATION,
+  OPERATOR_NAME_FENCE_AGENTS_REMEDIATION,
+  OPERATOR_NAME_NODE_MAINTENANCE,
+  OPERATOR_NAME_KUBE_DESCHEDULER,
+} from '../../config/constants';
+import { ExternalLink } from '../ui';
+import {
+  AUTHORINO_OPERATOR_LINK,
+  CNV_LINK,
+  FENCE_AGENTS_REMEDIATION_LINK,
+  getKubeDeschedulerLink,
+  getLsoLink,
+  getLvmsDocsLink,
+  getMceDocsLink,
+  getNmstateLink,
+  getNodeFeatureDiscoveryLink,
+  getNvidiaGpuLink,
+  getServiceMeshLink,
+  KMM_LINK,
+  MTV_LINK,
+  NODE_HEALTHCHECK_LINK,
+  ODF_LINK,
+  ODF_REQUIREMENTS_LINK,
+  OPENSHIFT_AI_LINK,
+  OPENSHIFT_AI_REQUIREMENTS_LINK,
+  OSC_LINK,
+  OSC_REQUIREMENTS_LINK,
+  PIPELINES_OPERATOR_LINK,
+  SELF_NODE_REMEDIATION_LINK,
+  SERVERLESS_OPERATOR_LINK,
+} from '../../config';
+import { getMajorMinorVersion } from '../../utils';
+import { useNewFeatureSupportLevel } from '../newFeatureSupportLevels';
+
+export const isOCPVersionEqualsOrMore = (
+  openshiftVersion: string,
+  ocpVersionToCompare: string,
+): boolean => {
+  const [majorA, minorA] = getMajorMinorVersion(openshiftVersion).split('.');
+  const [majorB, minorB] = ocpVersionToCompare.split('.');
+  return (
+    Number(majorA) > Number(majorB) ||
+    (Number(majorA) === Number(majorB) && Number(minorA) >= Number(minorB))
+  );
+};
+
+export type OperatorSpec = {
+  title: string;
+  featureId: FeatureId;
+  Description?: React.ComponentType<{ openshiftVersion?: string }>;
+  notStandalone?: boolean;
+  Requirements?: React.ComponentType<{ cluster: Cluster }>;
+};
+
+export const getOperatorSpecs = (useLVMS?: boolean): { [key: string]: OperatorSpec } => {
+  return {
+    [OPERATOR_NAME_MTV]: {
+      title: 'Migration Toolkit for Virtualization',
+      featureId: 'MTV',
+      Description: () => (
+        <>
+          This Toolkit (MTV) enables you to migrate virtual machines from VMware vSphere, Red Hat
+          Virtualization, or OpenStack to OpenShift Virtualization running on Red Hat OpenShift.{' '}
+          <ExternalLink href={MTV_LINK}>Learn more</ExternalLink>
+        </>
+      ),
+    },
+    [OPERATOR_NAME_AMD_GPU]: {
+      title: 'AMD GPU',
+      featureId: 'AMD_GPU',
+      Requirements: () => <>Requires at least one supported AMD GPU</>,
+      Description: () => (
+        <>
+          Automate the management of AMD software components needed to provision and monitor GPUs.
+        </>
+      ),
+    },
+    [OPERATOR_NAME_LSO]: {
+      title: 'Local Storage Operator',
+      featureId: 'LSO',
+      Description: ({ openshiftVersion }) => (
+        <>
+          Allows provisioning of persistent storage by using local volumes.{' '}
+          <ExternalLink href={getLsoLink(openshiftVersion)}>Learn more</ExternalLink>
+        </>
+      ),
+      notStandalone: true,
+    },
+    [OPERATOR_NAME_AUTHORINO]: {
+      title: 'Authorino',
+      featureId: 'AUTHORINO',
+      Description: () => (
+        <>
+          Lightweight external authorization service for tailor-made Zero Trust API security.{' '}
+          <ExternalLink href={AUTHORINO_OPERATOR_LINK}>Learn more</ExternalLink>
+        </>
+      ),
+      notStandalone: true,
+    },
+    [OPERATOR_NAME_CNV]: {
+      title: 'OpenShift Virtualization',
+      featureId: 'CNV',
+      Requirements: () => (
+        <>Enabled CPU virtualization support in BIOS (Intel-VT / AMD-V) on all nodes</>
+      ),
+      Description: () => (
+        <>
+          Run virtual machines alongside containers on one platform.{' '}
+          <ExternalLink href={CNV_LINK}>Learn more</ExternalLink>
+        </>
+      ),
+    },
+    [OPERATOR_NAME_FENCE_AGENTS_REMEDIATION]: {
+      title: 'Fence Agents Remediation',
+      featureId: 'FENCE_AGENTS_REMEDIATION',
+      Description: () => (
+        <>
+          Externally fences failed nodes using power controllers.{' '}
+          <ExternalLink href={FENCE_AGENTS_REMEDIATION_LINK}>Learn more</ExternalLink>
+        </>
+      ),
+      notStandalone: true,
+    },
+    [OPERATOR_NAME_KMM]: {
+      title: 'Kernel Module Management',
+      featureId: 'KMM',
+      Description: () => (
+        <>
+          Management of kernel modules. <ExternalLink href={KMM_LINK}>Learn more</ExternalLink>
+        </>
+      ),
+    },
+    [OPERATOR_NAME_KUBE_DESCHEDULER]: {
+      title: 'Kube Descheduler',
+      featureId: 'KUBE_DESCHEDULER',
+      Description: ({ openshiftVersion }) => (
+        <>
+          Evicts pods to reschedule them onto more suitable nodes.{' '}
+          <ExternalLink href={getKubeDeschedulerLink(openshiftVersion)}>Learn more</ExternalLink>
+        </>
+      ),
+      notStandalone: true,
+    },
+    [OPERATOR_NAME_MCE]: {
+      title: 'Multicluster engine',
+      featureId: 'MCE',
+      Description: ({ openshiftVersion }) => (
+        <>
+          Create, import, and manage multiple clusters from this cluster.{' '}
+          <ExternalLink href={getMceDocsLink(openshiftVersion)}>Learn more</ExternalLink>
+        </>
+      ),
+    },
+    [OPERATOR_NAME_NMSTATE]: {
+      title: 'NMState',
+      featureId: 'NMSTATE',
+      Description: ({ openshiftVersion }) => (
+        <>
+          Provides users with functionality to configure various network interface types, DNS, and
+          routing on cluster nodes.{' '}
+          <ExternalLink href={getNmstateLink(openshiftVersion)}>Learn more</ExternalLink>
+        </>
+      ),
+    },
+    [OPERATOR_NAME_NODE_FEATURE_DISCOVERY]: {
+      title: 'Node Feature Discovery',
+      featureId: 'NODE_FEATURE_DISCOVERY',
+      Description: ({ openshiftVersion }) => (
+        <>
+          Manage the detection of hardware features and configuration by labeling nodes with
+          hardware-specific information.{' '}
+          <ExternalLink href={getNodeFeatureDiscoveryLink(openshiftVersion)}>
+            Learn more
+          </ExternalLink>
+        </>
+      ),
+    },
+    [OPERATOR_NAME_NODE_HEALTHCHECK]: {
+      title: 'Node Healthcheck',
+      featureId: 'NODE_HEALTHCHECK',
+      Description: () => (
+        <>
+          Identify Unhealthy Nodes.{' '}
+          <ExternalLink href={NODE_HEALTHCHECK_LINK}>Learn more</ExternalLink>
+        </>
+      ),
+      notStandalone: true,
+    },
+    [OPERATOR_NAME_NODE_MAINTENANCE]: {
+      title: 'Node Maintenance',
+      featureId: 'NODE_MAINTENANCE',
+      Description: () => (
+        <>
+          Place nodes in maintenance mode.{' '}
+          <ExternalLink href={NODE_HEALTHCHECK_LINK}>Learn more</ExternalLink>
+        </>
+      ),
+      notStandalone: true,
+    },
+    [OPERATOR_NAME_NVIDIA_GPU]: {
+      title: 'NVIDIA GPU',
+      featureId: 'NVIDIA_GPU',
+      Requirements: () => <>Requires at least one supported NVIDIA GPU</>,
+      Description: ({ openshiftVersion }) => (
+        <>
+          Automate the management of NVIDIA software components needed to provision and monitor
+          GPUs. <ExternalLink href={getNvidiaGpuLink(openshiftVersion)}>Learn more</ExternalLink>
+        </>
+      ),
+    },
+    [OPERATOR_NAME_ODF]: {
+      title: 'OpenShift Data Foundation',
+      featureId: 'ODF',
+      Requirements: () => (
+        <ExternalLink href={ODF_REQUIREMENTS_LINK}>
+          Learn more about the requirements for OpenShift Data Foundation
+        </ExternalLink>
+      ),
+      Description: () => (
+        <>
+          Persistent software-defined storage for hybrid applications.{' '}
+          <ExternalLink href={ODF_LINK}>Learn more</ExternalLink>
+        </>
+      ),
+    },
+    [OPERATOR_NAME_OPENSHIFT_AI]: {
+      title: 'OpenShift AI',
+      featureId: 'OPENSHIFT_AI',
+      Requirements: () => (
+        <ExternalLink href={OPENSHIFT_AI_REQUIREMENTS_LINK}>Learn more</ExternalLink>
+      ),
+      Description: () => (
+        <>
+          Train, serve, monitor and manage AI/ML models and applications.{' '}
+          <ExternalLink href={OPENSHIFT_AI_LINK}>Learn more</ExternalLink>
+        </>
+      ),
+    },
+    [OPERATOR_NAME_OSC]: {
+      title: 'OpenShift sandboxed containers',
+      featureId: 'OSC',
+      Requirements: () => (
+        <ExternalLink href={OSC_REQUIREMENTS_LINK}>
+          Learn more about the requirements for OpenShift sandboxed containers
+        </ExternalLink>
+      ),
+      Description: () => (
+        <>
+          OpenShift sandboxed containers support for OpenShift Container Platform provides users
+          with built-in support for running Kata Containers as an additional optional runtime. It
+          provides an additional virtualization machine(VM) isolation layer for pods.{' '}
+          <ExternalLink href={OSC_LINK}>Learn more</ExternalLink>
+        </>
+      ),
+    },
+    [OPERATOR_NAME_PIPELINES]: {
+      title: 'Pipelines',
+      featureId: 'PIPELINES',
+      Description: () => (
+        <>
+          Cloud-native continuous integration and delivery (CI/CD) solution for building pipelines
+          using Tekton. <ExternalLink href={PIPELINES_OPERATOR_LINK}>Learn more</ExternalLink>
+        </>
+      ),
+      notStandalone: true,
+    },
+    [OPERATOR_NAME_SELF_NODE_REMEDIATION]: {
+      title: 'Self Node Remediation',
+      featureId: 'SELF_NODE_REMEDIATION',
+      Description: () => (
+        <>
+          Allows nodes to reboot themselves when they become unhealthy.{' '}
+          <ExternalLink href={SELF_NODE_REMEDIATION_LINK}>Learn more</ExternalLink>
+        </>
+      ),
+      notStandalone: true,
+    },
+    [OPERATOR_NAME_SERVERLESS]: {
+      title: 'Serverless',
+      featureId: 'SERVERLESS',
+      Description: () => (
+        <>
+          Deploy workflow applications based on the CNCF Serverless Workflow specification.{' '}
+          <ExternalLink href={SERVERLESS_OPERATOR_LINK}>Learn more</ExternalLink>
+        </>
+      ),
+      notStandalone: true,
+    },
+    [OPERATOR_NAME_SERVICEMESH]: {
+      title: 'Service Mesh',
+      featureId: 'SERVICEMESH',
+      Description: ({ openshiftVersion }) => (
+        <>
+          Platform that provides behavioral insight and operational control over a service mesh.{' '}
+          <ExternalLink href={getServiceMeshLink(openshiftVersion)}>Learn more</ExternalLink>
+        </>
+      ),
+      notStandalone: true,
+    },
+    [OPERATOR_NAME_LVM]: {
+      title: useLVMS ? 'Logical Volume Manager Storage' : 'Logical Volume Manager',
+      featureId: 'LVM',
+      Description: ({ openshiftVersion }) =>
+        useLVMS ? (
+          <>
+            Storage virtualization that offers a more flexible approach for disk space management.{' '}
+            <ExternalLink href={getLvmsDocsLink(openshiftVersion)}>Learn more</ExternalLink>
+          </>
+        ) : (
+          <>
+            Storage virtualization that offers a more flexible approach for disk space management.
+          </>
+        ),
+    },
+  };
+};
+
+export const useOperatorSpecs = () => {
+  const { getFeatureSupportLevel } = useNewFeatureSupportLevel();
+  const useLVMS = getFeatureSupportLevel('LVM') === 'supported';
+  return React.useMemo(() => getOperatorSpecs(useLVMS), [useLVMS]);
+};

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

@@ -151,11 +151,10 @@ const DisksTable = ({
     .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: [
+    .map((disk, index) => {
+      const rowCells = [
         {
           title: (
             <DiskName
@@ -180,27 +179,32 @@ const DisksTable = ({
           props: { 'data-testid': 'disk-role' },
         },
         { title: <DiskLimitations disk={disk} />, props: { 'data-testid': 'disk-limitations' } },
-        isEditable && {
-          title: (
-            <FormatDiskCheckbox
-              host={host}
-              diskId={disk.id}
-              installationDiskId={installationDiskId}
-              index={index}
-              updateDiskSkipFormatting={updateDiskSkipFormatting}
-            />
-          ),
-          props: { 'data-testid': 'disk-formatted' },
-        },
+        isEditable
+          ? {
+              title: (
+                <FormatDiskCheckbox
+                  host={host}
+                  diskId={disk.id}
+                  installationDiskId={installationDiskId}
+                  index={index}
+                  updateDiskSkipFormatting={updateDiskSkipFormatting}
+                />
+              ),
+              props: { 'data-testid': 'disk-formatted' },
+            }
+          : null,
         { title: disk.driveType, props: { 'data-testid': 'drive-type' } },
         { title: fileSize(disk.sizeBytes || 0, 2, 'si'), props: { 'data-testid': 'disk-size' } },
         { title: disk.serial, props: { 'data-testid': 'disk-serial' } },
         { title: disk.model, props: { 'data-testid': 'disk-model' } },
         { title: disk.wwn, props: { 'data-testid': 'disk-wwn' } },
-      ],
-      key: disk.path,
-    })) as { key: string; cells: { title: string | React.ReactNode; props: object }[] }[];
+      ].filter(Boolean); // Remove null values to keep alignment
 
+      return { key: disk.path, cells: rowCells } as {
+        key: string;
+        cells: { title: string | React.ReactNode; props: object }[];
+      };
+    });
   return (
     <Table data-testid={testId} variant={TableVariant.compact} aria-label="Host's disks table">
       <Thead>
@@ -212,7 +216,8 @@ const DisksTable = ({
       </Thead>
       <Tbody>
         {rows.map((row, i) => (
-          <Tr key={`disk-row-${row.key}`} data-testid={`disk-row-${row.key}`}>
+          // eslint-disable-next-line no-console
+          <Tr key={`disk-row-${row.key}`} data-testid={`disk-row-${row.key}-host-${host.id}`}>
             {row.cells.map((cell, j) => (
               <Td key={`cell-${i}-${j}`} {...cell.props}>
                 {cell.title}

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

@@ -16,8 +16,12 @@ import {
   Badge,
   TextInputTypes,
   InputGroupItem,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
 } from '@patternfly/react-core';
-import { Select, SelectOption, SelectProps } from '@patternfly/react-core/deprecated';
 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';
@@ -137,7 +141,7 @@ const ClusterEventsToolbar = ({
     setFilters(nextFilters);
   };
 
-  const onHostToggle: SelectProps['onToggle'] = () => setHostExpanded(!isHostExpanded);
+  const onHostToggle = () => setHostExpanded(!isHostExpanded);
   const onHostSelect = (value: string, isChecked: boolean) => {
     switch (value) {
       case DELETED_HOSTS:
@@ -157,7 +161,7 @@ const ClusterEventsToolbar = ({
     }
   };
 
-  const onSeverityToggle: SelectProps['onToggle'] = () => setSeverityExpanded(!isSeverityExpanded);
+  const onSeverityToggle = () => setSeverityExpanded(!isSeverityExpanded);
   const onSeveritySelect = (value: string, isChecked: boolean) => {
     onSelect('severities', isChecked, value);
   };
@@ -227,41 +231,56 @@ const ClusterEventsToolbar = ({
             }
             deleteChipGroup={onDeleteChipGroup}
           >
-            <Select
-              variant="checkbox"
-              aria-label="hosts"
-              toggleId="cluster-events-hosts-dropdown-button"
-              onToggle={onHostToggle}
-              onSelect={(e, value) => onHostSelect(value as string, isSelectEventChecked(e))}
-              selections={getSelections()}
-              customBadgeText={hostChips.length}
+            <Dropdown
               isOpen={isHostExpanded}
-              placeholderText={<Placeholder text="Hosts" />}
-              maxHeight={280}
-              zIndex={600}
+              onSelect={(e, value) => onHostSelect(value as string, isSelectEventChecked(e))}
+              onOpenChange={onHostToggle}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  id="cluster-events-hosts-dropdown-button"
+                  ref={toggleRef}
+                  isFullWidth
+                  onClick={onHostToggle}
+                  isExpanded={isHostExpanded}
+                  badge={hostChips.length && <Badge isRead>{hostChips.length}</Badge>}
+                >
+                  <Placeholder text="Hosts" />
+                </MenuToggle>
+              )}
+              shouldFocusToggleOnSelect
             >
-              {[
-                <SelectOption
-                  inputId={`checkbox-${CLUSTER_LEVEL}`}
+              <DropdownList>
+                <DropdownItem
+                  id={`checkbox-${CLUSTER_LEVEL}`}
+                  hasCheckbox
+                  isSelected={getSelections().includes(CLUSTER_LEVEL)}
                   key={CLUSTER_LEVEL}
                   value={CLUSTER_LEVEL}
                 >
                   {t('ai:Cluster-level events')}
-                </SelectOption>,
-                <SelectOption
-                  inputId={`checkbox-${DELETED_HOSTS}`}
+                </DropdownItem>
+                <DropdownItem
+                  id={`checkbox-${DELETED_HOSTS}`}
+                  hasCheckbox
+                  isSelected={getSelections().includes(DELETED_HOSTS)}
                   key={DELETED_HOSTS}
                   value={DELETED_HOSTS}
                 >
                   {t('ai:Deleted hosts')}
-                </SelectOption>,
-                ...sortedHosts.map((host) => (
-                  <SelectOption inputId={`checkbox-${host.id}`} key={host.id} value={host.id}>
+                </DropdownItem>
+                {...sortedHosts.map((host) => (
+                  <DropdownItem
+                    id={`checkbox-${host.id}`}
+                    hasCheckbox
+                    isSelected={getSelections().includes(host.id)}
+                    key={host.id}
+                    value={host.id}
+                  >
                     {host.hostname}
-                  </SelectOption>
-                )),
-              ]}
-            </Select>
+                  </DropdownItem>
+                ))}
+              </DropdownList>
+            </Dropdown>
           </CustomToolbarFilter>
         )}
 
@@ -278,28 +297,42 @@ const ClusterEventsToolbar = ({
           deleteChipGroup={onDeleteChipGroup}
           categoryName="Severity"
         >
-          <Select
-            variant="checkbox"
-            aria-label="Severity"
-            toggleId="cluster-events-severity-dropdown-button"
-            onToggle={onSeverityToggle}
+          <Dropdown
+            isOpen={isSeverityExpanded}
             onSelect={(event, value) =>
               onSeveritySelect(value as string, isSelectEventChecked(event))
             }
-            selections={filters.severities}
-            isOpen={isSeverityExpanded}
-            placeholderText={<Placeholder text="Severity" />}
-          >
-            {EVENT_SEVERITIES.map((severity) => (
-              <SelectOption
-                data-testid={`${severity}-filter-option`}
-                key={severity}
-                value={severity}
+            onOpenChange={onSeverityToggle}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                id="cluster-events-severity-dropdown-button"
+                ref={toggleRef}
+                isFullWidth
+                onClick={onSeverityToggle}
+                isExpanded={isSeverityExpanded}
+                badge={
+                  filters.severities?.length && <Badge isRead>{filters.severities.length}</Badge>
+                }
               >
-                {capitalize(severity)} <Badge isRead>{severityCounts[severity]}</Badge>
-              </SelectOption>
-            ))}
-          </Select>
+                <Placeholder text="Severity" />
+              </MenuToggle>
+            )}
+            shouldFocusToggleOnSelect
+          >
+            <DropdownList>
+              {EVENT_SEVERITIES.map((severity) => (
+                <DropdownItem
+                  data-testid={`${severity}-filter-option`}
+                  hasCheckbox
+                  isSelected={filters.severities?.includes(severity)}
+                  key={severity}
+                  value={severity}
+                >
+                  {capitalize(severity)} <Badge isRead>{severityCounts[severity]}</Badge>
+                </DropdownItem>
+              ))}
+            </DropdownList>
+          </Dropdown>
         </ToolbarFilter>
 
         <ToolbarItem>

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { PreviewBadge, PreviewBadgeProps } from './PreviewBadge';
+import { DEVELOPER_SUPPORT_LEVEL_LINK } from '../../config/docs_links';
 
 export type DeveloperPreviewProps = Omit<PreviewBadgeProps, 'text' | 'popoverContent'>;
 
@@ -12,6 +13,7 @@ export const DeveloperPreview: React.FC<DeveloperPreviewProps> = (props) => {
       popoverContent={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.',
       )}
+      externalLink={DEVELOPER_SUPPORT_LEVEL_LINK}
       {...props}
     />
   );