@openshift-assisted/ui-lib 2.16.2-cim → 2.16.4-cim

package/lib/common/components/ui/formik/SelectField.tsx

@@ -38,7 +38,7 @@ const SelectField: React.FC<SelectFieldProps> = ({
       fieldId={fieldId}
       label={label}
       isRequired={isRequired}
-      labelIcon={labelIcon}
+      labelHelp={labelIcon}
       id={`form-control__${fieldId}`}
     >
       <FormSelect
@@ -65,6 +65,7 @@ const SelectField: React.FC<SelectFieldProps> = ({
               icon={<ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
               id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              data-testid={`input-selectfield-${fieldId}-helper-text`}
             >
               {errorMessage ? errorMessage : hText}
             </HelperTextItem>

package/lib/common/components/ui/formik/SwitchField.tsx

@@ -50,7 +50,7 @@ const SwitchField: React.FC<SwitchFieldProps> = ({
   };
 
   return (
-    <FormGroup fieldId={fieldId} isRequired={isRequired} labelIcon={labelIcon}>
+    <FormGroup fieldId={fieldId} isRequired={isRequired} labelHelp={labelIcon}>
       {tooltipProps ? (
         <Tooltip {...tooltipProps}>
           <Switch {...switchFields} />
@@ -65,6 +65,7 @@ const SwitchField: React.FC<SwitchFieldProps> = ({
               icon={<ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
               id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              data-testid={`input-switchfield-${fieldId}-helper-text`}
             >
               {errorMessage ? errorMessage : hText}
             </HelperTextItem>

package/lib/common/components/ui/formik/TextAreaField.tsx

@@ -41,7 +41,7 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
       fieldId={fieldId}
       label={label}
       isRequired={isRequired}
-      labelIcon={labelIcon}
+      labelHelp={labelIcon}
       className={groupClassName}
       id={`form-control__${fieldId}`}
     >
@@ -60,20 +60,23 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
       {(errorMessage || helperText) && (
         <FormHelperText>
           <HelperText>
+            <HelperTextItem
+              variant={'default'}
+              id={`${fieldId}-helper`}
+              data-testid={`input-textarea-${fieldId}-helper-text`}
+            >
+              {helperText}
+            </HelperTextItem>
             {errorMessage && (
               <HelperTextItem
                 icon={<ExclamationCircleIcon />}
                 variant={'error'}
                 id={`${fieldId}-helper-error`}
+                data-testid={`input-textarea-${fieldId}-helper-text`}
               >
                 {errorMessage}
               </HelperTextItem>
             )}
-            {helperText && (
-              <HelperTextItem variant={'default'} id={`${fieldId}-helper`}>
-                {helperText}
-              </HelperTextItem>
-            )}
           </HelperText>
         </FormHelperText>
       )}

package/lib/common/components/ui/formik/TextAreaSecretField.tsx

@@ -41,7 +41,10 @@ const TextAreaSecretField: React.FC<TextAreaSecretProps> = ({
       {helperTextHidden && (
         <FormHelperText>
           <HelperText>
-            <HelperTextItem>{helperTextHidden}</HelperTextItem>
+            <HelperTextItem data-testid={`input-textareasecret-${fieldId}-helper-text`}>
+              {' '}
+              {helperTextHidden}
+            </HelperTextItem>
           </HelperText>
         </FormHelperText>
       )}

package/lib/common/components/ui/formik/UploadField.tsx

@@ -44,7 +44,7 @@ const UploadField: React.FC<UploadFieldProps> = ({
   const acceptedFiles = { 'application/x-ssh-key': ['.pub'] };
   const maxFileSize = 2048;
   return (
-    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelIcon={labelIcon}>
+    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
       {children}
       <FileUpload
         filenamePlaceholder={t('ai:Drag a file here or browse to upload')}
@@ -58,6 +58,7 @@ const UploadField: React.FC<UploadFieldProps> = ({
         type="text"
         value={field.value as string}
         filename={filename}
+        data-testid={`upload-field-${fieldId}`}
         onDataChange={(_event, file: string) => {
           setValue(file);
           setTouched(true);
@@ -110,6 +111,7 @@ const UploadField: React.FC<UploadFieldProps> = ({
               icon={errorMessage && <ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
               id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              data-testid={`input-uploadfield-${fieldId}-helper-text`}
             >
               {errorMessage ? errorMessage : helperText}
             </HelperTextItem>

package/lib/common/components/ui/formik/_validationSchemas.test.ts

@@ -2,6 +2,7 @@ import { test, describe, expect } from 'vitest';
 import {
   baseDomainValidationSchema,
   dnsNameValidationSchema,
+  dualStackValidationSchema,
   hostPrefixValidationSchema,
   ipBlockValidationSchema,
   ipValidationSchema,
@@ -347,4 +348,85 @@ describe('validationSchemas', () => {
 
     expect(counter).toBe(invalid.length);
   });
+
+  describe('dualStackValidationSchema', () => {
+    describe('OCP < 4.12 (legacy behavior)', () => {
+      const schema = dualStackValidationSchema('machine networks', '4.11');
+
+      test('validates IPv4 as primary and IPv6 as secondary', async () => {
+        const validValues = [[{ cidr: '192.168.1.0/24' }, { cidr: '2001:db8::/64' }]];
+
+        for (const value of validValues) {
+          await expect(schema.validate(value)).resolves.toBe(value);
+        }
+      });
+
+      test('rejects IPv6 as primary for OCP < 4.12', async () => {
+        const invalidValues = [[{ cidr: '2001:db8::/64' }, { cidr: '192.168.1.0/24' }]];
+
+        for (const value of invalidValues) {
+          await expect(schema.validate(value)).rejects.toThrow(
+            'First network has to be IPv4 subnet',
+          );
+        }
+      });
+    });
+
+    describe('OCP >= 4.12 (new behavior)', () => {
+      const schema = dualStackValidationSchema('machine networks', '4.12');
+
+      test('validates IPv4 as primary and IPv6 as secondary', async () => {
+        const validValues = [[{ cidr: '192.168.1.0/24' }, { cidr: '2001:db8::/64' }]];
+
+        for (const value of validValues) {
+          await expect(schema.validate(value)).resolves.toBe(value);
+        }
+      });
+
+      test('validates IPv6 as primary and IPv4 as secondary', async () => {
+        const validValues = [[{ cidr: '2001:db8::/64' }, { cidr: '192.168.1.0/24' }]];
+
+        for (const value of validValues) {
+          await expect(schema.validate(value)).resolves.toBe(value);
+        }
+      });
+    });
+
+    describe('no version specified (defaults to legacy behavior)', () => {
+      const schema = dualStackValidationSchema('machine networks');
+
+      test('validates IPv4 as primary and IPv6 as secondary', async () => {
+        const validValues = [[{ cidr: '192.168.1.0/24' }, { cidr: '2001:db8::/64' }]];
+
+        for (const value of validValues) {
+          await expect(schema.validate(value)).resolves.toBe(value);
+        }
+      });
+
+      test('rejects IPv6 as primary when no version specified', async () => {
+        const invalidValues = [[{ cidr: '2001:db8::/64' }, { cidr: '192.168.1.0/24' }]];
+
+        for (const value of invalidValues) {
+          await expect(schema.validate(value)).rejects.toThrow(
+            'First network has to be IPv4 subnet',
+          );
+        }
+      });
+    });
+
+    describe('edge cases', () => {
+      test('validates maximum 2 networks', async () => {
+        const schema = dualStackValidationSchema('machine networks', '4.12');
+        const invalidValue = [
+          { cidr: '192.168.1.0/24' },
+          { cidr: '2001:db8::/64' },
+          { cidr: '10.0.0.0/24' },
+        ];
+
+        await expect(schema.validate(invalidValue)).rejects.toThrow(
+          'Maximum number of machine networks subnets in dual stack is 2',
+        );
+      });
+    });
+  });
 });

package/lib/common/components/ui/formik/index.tsx

@@ -17,7 +17,6 @@ export { default as RemovableField } from './RemovableField';
 export { default as AddButton } from './AddButton';
 export { default as PencilEditField } from './PencilEditField';
 export { default as AlertFormikError } from './AlertFormikError';
-export { default as SelectFieldWithSearch } from './SelectFieldWithSearch';
 
 export * from './utils';
 export * from './PullSecretField';

package/lib/common/components/ui/formik/validationSchemas.ts

@@ -28,6 +28,7 @@ import {
   nameValidationMessages,
 } from './constants';
 import { allSubnetsIPv4, getAddress, trimCommaSeparatedList, trimSshPublicKey } from './utils';
+import { isMajorMinorVersionEqualOrGreater } from '../../../utils';
 import { selectApiVip, selectIngressVip } from '../../../selectors';
 import { ClusterDetailsValues } from '../../clusterWizard/types';
 
@@ -172,6 +173,17 @@ export const ipValidationSchema = Yup.string().test(
   (value?: string) => Address4.isValid(value || '') || Address6.isValid(value || ''),
 );
 
+// Helpers to classify literal IPs more robustly
+const isIPv4Address = (ip?: string) => {
+  if (!ip) return false;
+  return ip.includes('.') && Address4.isValid(ip);
+};
+
+const isIPv6Address = (ip?: string) => {
+  if (!ip) return false;
+  return ip.includes(':') && Address6.isValid(ip);
+};
+
 export const ipNoSuffixValidationSchema = Yup.string().test(
   'ip-validation-no-suffix',
   'Not a valid IP address',
@@ -201,7 +213,6 @@ export const vipRangeValidationSchema = (
     } catch (err) {
       return true;
     }
-
     const foundHostSubnets = [];
     if (machineNetworks) {
       const cidrs = machineNetworks?.map((network) => network.cidr);
@@ -302,12 +313,51 @@ export const vipNoSuffixValidationSchema = (
       vipDhcpAllocation: NetworkConfigurationValues['vipDhcpAllocation'],
       managedNetworkingType: NetworkConfigurationValues['managedNetworkingType'],
     ) => !vipDhcpAllocation && managedNetworkingType !== 'userManaged',
-    then: () =>
-      requiredOnceSet(head(initialValues)?.ip, 'Required. Please provide an IP address')
+    then: () => {
+      // Per-item schema for VIPs (apiVips[*].ip / ingressVips[*].ip)
+      // 1) Require value once set
+      // 2) Validate IP without suffix
+      // 3) Ensure VIP family matches machineNetworks[idx] family
+      // 4) Validate range vs selected subnets
+      // 5) No broadcast/network address
+      // 6) Uniqueness across API/Ingress
+      const vipFamilyMatchSchema = Yup.string().test(
+        'vip-family-match-machine-network',
+        'IP family must match the corresponding machine network family.',
+        function (value?: string) {
+          if (!value) {
+            return true;
+          }
+          // this.path looks like: "apiVips[0].ip" or "ingressVips[1].ip"
+          const path = this.path || '';
+          const match = path.match(/\[(\d+)\]/);
+          const index = match ? parseInt(match[1], 10) : NaN;
+          if (Number.isNaN(index)) {
+            return true;
+          }
+          const cidr = values.machineNetworks?.[index]?.cidr || '';
+          const mnIsV4 = isCIDR.v4(cidr);
+          const mnIsV6 = isCIDR.v6(cidr);
+          // If machine network at index is not selected/valid, don't block validation here
+          if (!mnIsV4 && !mnIsV6) {
+            return true;
+          }
+          const ipIsV4 = isIPv4Address(value);
+          const ipIsV6 = isIPv6Address(value);
+          if (!ipIsV4 && !ipIsV6) {
+            return true;
+          }
+          return mnIsV4 ? ipIsV4 : ipIsV6;
+        },
+      );
+
+      return requiredOnceSet(head(initialValues)?.ip, 'Required. Please provide an IP address')
         .concat(ipNoSuffixValidationSchema)
+        .concat(vipFamilyMatchSchema)
         .concat(vipRangeValidationSchema(hostSubnets, values, false))
         .concat(vipBroadcastValidationSchema(values))
-        .concat(vipUniqueValidationSchema(values, true)),
+        .concat(vipUniqueValidationSchema(values, true));
+    },
   });
 
 export const vipArrayValidationSchema = <T extends Yup.Maybe<Yup.AnyObject>>(
@@ -323,11 +373,39 @@ export const vipArrayValidationSchema = <T extends Yup.Maybe<Yup.AnyObject>>(
         }),
       )
     : Yup.array<T>()
-  ).test(
-    'vips-length',
-    'Both API and ingress APIs must be provided.',
-    (_value) => values.apiVips?.length === values.ingressVips?.length,
-  );
+  )
+    .test(
+      'vips-length',
+      'Both API and ingress APIs must be provided.',
+      (_value) => values.apiVips?.length === values.ingressVips?.length,
+    )
+    .test(
+      'vips-match-machine-networks',
+      'Primary API and Ingress IPs must match the primary machine network family; secondary must match the secondary machine network family.',
+      (_vips?: { ip?: string }[]) => {
+        const machineNetworks = values.machineNetworks || [];
+        const validateIndex = (idx: number) => {
+          const cidr = machineNetworks[idx]?.cidr || '';
+          const mIsIpv4 = isCIDR.v4(cidr);
+          const mIsIpv6 = isCIDR.v6(cidr);
+          if (!mIsIpv4 && !mIsIpv6) {
+            return true;
+          }
+          const api = values.apiVips?.[idx]?.ip || '';
+          const ing = values.ingressVips?.[idx]?.ip || '';
+          if (!api || !ing) {
+            return true;
+          }
+          const apiOk = mIsIpv4 ? isIPv4Address(api) : isIPv6Address(api);
+          const ingOk = mIsIpv4 ? isIPv4Address(ing) : isIPv6Address(ing);
+          return apiOk && ingOk;
+        };
+
+        const primaryOk = validateIndex(0);
+        const secondaryOk = validateIndex(1);
+        return primaryOk && secondaryOk;
+      },
+    );
 
 export const ipBlockValidationSchema = (reservedCidrs: string | string[] | undefined) =>
   Yup.string()
@@ -439,11 +517,11 @@ export const hostPrefixValidationSchema = (
   const errorMsgIPv4 = `${errorMsgPrefix} (${netBlockNumber}) and 25.`;
   const errorMsgIPv6 = `${errorMsgPrefix} (8) and 128.`;
 
-  if (Address6.isValid(clusterNetworkCidr || '')) {
+  if (isCIDR.v6(clusterNetworkCidr || '')) {
     return Yup.number().required(requiredText).min(8, errorMsgIPv6).max(128, errorMsgIPv6);
   }
 
-  if (Address4.isValid(clusterNetworkCidr || '')) {
+  if (isCIDR.v4(clusterNetworkCidr || '')) {
     return Yup.number()
       .required(requiredText)
       .min(netBlockNumber, errorMsgIPv4)
@@ -703,20 +781,64 @@ export const serviceNetworkValidationSchema = Yup.array().of(
   }),
 );
 
-export const dualStackValidationSchema = (field: string) =>
+export const dualStackValidationSchema = (field: string, openshiftVersion?: string) =>
   Yup.array()
     .max(2, `Maximum number of ${field} subnets in dual stack is 2.`)
     .test(
       'dual-stack-ipv4',
-      'First network has to be IPv4 subnet.',
-      (values?: { cidr: MachineNetwork['cidr'] }[]): boolean =>
-        !!values?.[0].cidr && Address4.isValid(values[0].cidr),
+      openshiftVersion && isMajorMinorVersionEqualOrGreater(openshiftVersion, '4.12')
+        ? 'First network has to be a valid IPv4 or IPv6 subnet.'
+        : 'First network has to be IPv4 subnet.',
+      (values?: { cidr: MachineNetwork['cidr'] }[]): boolean => {
+        // For OCP versions > 4.11, allow IPv6 as primary network
+        if (openshiftVersion && isMajorMinorVersionEqualOrGreater(openshiftVersion, '4.12')) {
+          return !!values?.[0].cidr && (isCIDR.v4(values[0].cidr) || isCIDR.v6(values[0].cidr));
+        }
+        // For older versions, require IPv4 as primary network
+        return !!values?.[0].cidr && isCIDR.v4(values[0].cidr);
+      },
     )
     .test(
-      'dual-stack-ipv6',
-      'Second network has to be IPv6 subnet.',
-      (values?: { cidr: MachineNetwork['cidr'] }[]): boolean =>
-        !!values?.[1].cidr && Address6.isValid(values[1].cidr),
+      'dual-stack-unique-cidrs',
+      `Provided ${field} subnets must be unique.`,
+      (values?: { cidr?: MachineNetwork['cidr'] }[]) => {
+        if (!values || values.length < 2) {
+          return true;
+        }
+        const first = values[0]?.cidr || '';
+        const second = values[1]?.cidr || '';
+        if (!first || !second) {
+          return true;
+        }
+        const firstIsCidr = isCIDR.v4(first) || isCIDR.v6(first);
+        const secondIsCidr = isCIDR.v4(second) || isCIDR.v6(second);
+        if (!firstIsCidr || !secondIsCidr) {
+          return true;
+        }
+        return first !== second;
+      },
+    )
+    .test(
+      'dual-stack-opposite-families',
+      `When two ${field} are provided, one must be IPv4 and the other IPv6.`,
+      (values?: { cidr?: MachineNetwork['cidr'] }[]) => {
+        if (!values || values.length < 2) {
+          return true;
+        }
+        const a = values[0]?.cidr || '';
+        const b = values[1]?.cidr || '';
+        if (!a || !b) {
+          return true;
+        }
+        const a4 = isCIDR.v4(a);
+        const a6 = isCIDR.v6(a);
+        const b4 = isCIDR.v4(b);
+        const b6 = isCIDR.v6(b);
+        if (!((a4 || a6) && (b4 || b6))) {
+          return true;
+        }
+        return (a4 && b6) || (a6 && b4);
+      },
     );
 
 export const IPv4ValidationSchema = Yup.array().test(

package/lib/common/components/ui/uiState/EmptyState.tsx

@@ -1,19 +1,17 @@
 import React from 'react';
 import {
-  Title,
   EmptyState as PFEmptyState,
   EmptyStateBody,
   Bullseye,
-  EmptyStateIcon,
-  EmptyStateIconProps,
   EmptyStateActions,
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons/dist/js/icons/search-icon';
+import { ComponentType } from 'react';
 
 type Props = {
   title?: string;
   content?: React.ReactNode;
-  icon?: EmptyStateIconProps['icon'];
+  icon?: ComponentType;
   primaryAction?: React.ReactNode;
   secondaryActions?: React.ReactNode[];
 };
@@ -26,9 +24,7 @@ const EmptyState: React.FC<Props> = ({
   secondaryActions,
 }) => (
   <Bullseye>
-    <PFEmptyState>
-      <EmptyStateIcon icon={icon} />
-      <Title headingLevel="h2">{title}</Title>
+    <PFEmptyState titleText={title} icon={icon} headingLevel="h2">
       {content && <EmptyStateBody>{content}</EmptyStateBody>}
       {primaryAction}
       {secondaryActions && <EmptyStateActions>{secondaryActions}</EmptyStateActions>}

package/lib/common/components/ui/uiState/ErrorState.tsx

@@ -3,24 +3,20 @@ import {
   EmptyState,
   EmptyStateBody,
   Bullseye,
-  EmptyStateIcon,
   EmptyStateVariant,
   Button,
   ButtonVariant,
-  EmptyStateIconProps,
   EmptyStateActions,
-  EmptyStateHeader,
   EmptyStateFooter,
 } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { global_danger_color_200 as globalDangerColor200 } from '@patternfly/react-tokens/dist/js/global_danger_color_200';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
 
 type ErrorStateProps = {
   title?: string;
   content?: React.ReactNode;
   fetchData?: () => void;
-  icon?: EmptyStateIconProps['icon'];
+  icon?: React.ComponentClass;
   iconColor?: string;
   primaryAction?: React.ReactNode;
   actions?: React.ReactNode[];
@@ -49,19 +45,19 @@ const ErrorState = ({
   content,
   fetchData,
   icon = ExclamationCircleIcon,
-  iconColor = globalDangerColor200.value,
   variant = EmptyStateVariant.sm,
   primaryAction,
   actions,
 }: ErrorStateProps) => {
   return (
     <Bullseye>
-      <EmptyState variant={variant}>
-        <EmptyStateHeader
-          titleText={<>{title}</>}
-          icon={<EmptyStateIcon icon={icon} color={iconColor} />}
-          headingLevel="h2"
-        />
+      <EmptyState
+        status="danger"
+        headingLevel="h2"
+        icon={icon}
+        titleText={<>{title}</>}
+        variant={variant}
+      >
         <EmptyStateBody>{content || <DefaultErrorContent fetchData={fetchData} />}</EmptyStateBody>
         <EmptyStateFooter>
           {primaryAction}

package/lib/common/components/ui/uiState/LoadingState.tsx

@@ -17,7 +17,7 @@ type Props = {
 const LoadingState: React.FC<Props> = ({ content, primaryAction, secondaryActions }) => (
   <Bullseye>
     <EmptyState variant={EmptyStateVariant.sm}>
-      <Spinner size="xl" />
+      <Spinner size="xl" data-testid="loading-state-spinner" />
       {content && <EmptyStateBody>{content}</EmptyStateBody>}
       {primaryAction}
       {secondaryActions && <EmptyStateActions>{secondaryActions}</EmptyStateActions>}

package/lib/common/config/constants.ts

@@ -145,6 +145,8 @@ export const hostValidationLabels = (t: TFunction): { [key in HostValidationId]:
   'node-maintenance-requirements-satisfied': t('ai:Node Maintenance requirements'),
   'kube-descheduler-requirements-satisfied': t('ai:Kube Descheduler requirements'),
   'cluster-observability-requirements-satisfied': t('ai:Cluster Observability requirements'),
+  'loki-requirements-satisfied': t('ai:Loki Operator requirements'),
+  'openshift-logging-requirements-satisfied': t('ai:OpenShift Logging Operator requirements'),
   'numa-resources-requirements-satisfied': t('ai:NUMA Resources requirements'),
   'oadp-requirements-satisfied': t('ai:OADP requirements'),
   'metallb-requirements-satisfied': t('ai:MetalLB requirements'),
@@ -216,6 +218,8 @@ export const hostValidationFailureHints = (
   'node-maintenance-requirements-satisfied': '',
   'kube-descheduler-requirements-satisfied': '',
   'cluster-observability-requirements-satisfied': '',
+  'loki-requirements-satisfied': '',
+  'openshift-logging-requirements-satisfied': '',
   'numa-resources-requirements-satisfied': '',
   'oadp-requirements-satisfied': '',
   'metallb-requirements-satisfied': '',
@@ -247,8 +251,11 @@ export const clusterValidationLabels = (
   'lvm-requirements-satisfied': t('ai:Logical Volume Manager requirements'),
   'cnv-requirements-satisfied': t('ai:CNV requirements'),
   'mce-requirements-satisfied': t('ai:MCE requirements'),
+  'openshift-ai-gpu-requirements-satisfied': t('ai:OpenShift AI GPU requirements'),
   'platform-requirements-satisfied': t('ai:Platform requirements'),
   'cluster-observability-requirements-satisfied': t('ai:Cluster Observability requirements'),
+  'loki-requirements-satisfied': t('ai:Loki Operator requirements'),
+  'openshift-logging-requirements-satisfied': t('ai:OpenShift Logging Operator requirements'),
   'numa-resources-requirements-satisfied': t('ai:NUMA Resources requirements'),
   'oadp-requirements-satisfied': t('ai:OADP requirements'),
   'metallb-requirements-satisfied': t('ai:MetalLB requirements'),
@@ -333,6 +340,8 @@ export const OPERATOR_NAME_FENCE_AGENTS_REMEDIATION = 'fence-agents-remediation'
 export const OPERATOR_NAME_NODE_MAINTENANCE = 'node-maintenance';
 export const OPERATOR_NAME_KUBE_DESCHEDULER = 'kube-descheduler';
 export const OPERATOR_NAME_CLUSTER_OBSERVABILITY = 'cluster-observability';
+export const OPERATOR_NAME_LOKI = 'loki';
+export const OPERATOR_NAME_OPENSHIFT_LOGGING = 'openshift-logging';
 export const OPERATOR_NAME_NUMA_RESOURCES = 'numaresources';
 export const OPERATOR_NAME_OADP = 'oadp';
 export const OPERATOR_NAME_METALLB = 'metallb';
@@ -345,6 +354,9 @@ export const singleClusterOperators = [
   OPERATOR_NAME_NODE_MAINTENANCE,
   OPERATOR_NAME_FENCE_AGENTS_REMEDIATION,
   OPERATOR_NAME_KUBE_DESCHEDULER,
+  OPERATOR_NAME_CLUSTER_OBSERVABILITY,
+  OPERATOR_NAME_LOKI,
+  OPERATOR_NAME_OPENSHIFT_LOGGING,
 ];
 
 export const singleClusterBundles = ['virtualization'];

package/lib/common/config/docs_links.ts

@@ -77,6 +77,8 @@ export const NUTANIX_CONFIG_LINK = `https://docs.redhat.com/en/documentation/ass
 
 export const VSPHERE_CONFIG_LINK = `https://docs.redhat.com/en/documentation/assisted_installer_for_openshift_container_platform/${getYearForAssistedInstallerDocumentationLink()}/html-single/installing_openshift_container_platform_with_the_assisted_installer/index#adding-hosts-on-vsphere_installing-on-vsphere`;
 
+export const VSPHERE_LIMITATIONS_LINK = `https://docs.redhat.com/en/documentation/assisted_installer_for_openshift_container_platform/${getYearForAssistedInstallerDocumentationLink()}/html/installing_openshift_container_platform_with_the_assisted_installer/installing-on-vsphere`;
+
 export const OCI_CONFIG_LINK = `https://docs.redhat.com/en/documentation/assisted_installer_for_openshift_container_platform/${getYearForAssistedInstallerDocumentationLink()}/html-single/installing_openshift_container_platform_with_the_assisted_installer/index#installing-on-oci`;
 
 export const HOW_TO_KNOW_IF_CLUSTER_SUPPORTS_MULTIPLE_CPU_ARCHS = `https://docs.redhat.com/en/documentation/assisted_installer_for_openshift_container_platform/${getYearForAssistedInstallerDocumentationLink()}/html/installing_openshift_container_platform_with_the_assisted_installer/expanding-the-cluster#checking-for-multiple-architectures_expanding-the-cluster`;
@@ -172,10 +174,12 @@ export const getLsoLink = (ocpVersion?: string) => {
     : `https://docs.openshift.com/container-platform/${version}/storage/persistent_storage/persistent_storage_local/ways-to-provision-local-storage.html`;
 };
 
-export const getNmstateLink = (ocpVersion?: string) =>
-  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
-    ocpVersion,
-  )}/html/networking/networking-operators#k8s-nmstate-about-the-k8s-nmstate-operator`;
+export const getNmstateLink = (ocpVersion?: string) => {
+  const version = getDocsOpenshiftVersion(ocpVersion);
+  return isMajorMinorVersionEqualOrGreater(ocpVersion, '4.17')
+    ? `https://docs.redhat.com/en/documentation/openshift_container_platform/${version}/html/networking_operators/k8s-nmstate-about-the-k8s-nmstate-operator`
+    : `https://docs.redhat.com/en/documentation/openshift_container_platform/4.17/html/networking_operators/k8s-nmstate-about-the-k8s-nmstate-operator`;
+};
 
 export const getNodeFeatureDiscoveryLink = (ocpVersion?: string) =>
   `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
@@ -216,6 +220,16 @@ export const getClusterObservabilityLink = (ocpVersion?: string) =>
     ocpVersion,
   )}/html/cluster_observability_operator/cluster-observability-operator-overview`;
 
+export const getLokiLink = (ocpVersion?: string) =>
+  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
+    ocpVersion,
+  )}/html/network_observability/network-observability-overview`;
+
+export const getOpenShiftLoggingLink = (ocpVersion?: string) =>
+  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
+    ocpVersion,
+  )}/html/logging`;
+
 export const getNumaResourcesLink = (ocpVersion?: string) =>
   `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
     ocpVersion,

package/lib/common/reducers/alertsSlice.ts

@@ -6,6 +6,7 @@ export type AlertPayload = {
   title: string;
   message?: string;
   variant?: AlertVariant;
+  key?: string;
 };
 
 export type AlertProps = {
@@ -22,7 +23,7 @@ export const alertsSlice = createSlice({
   name: 'alerts',
   reducers: {
     addAlert: (state, action: PayloadAction<AlertPayload>) => [
-      { key: uuidv4(), variant: AlertVariant.danger, ...action.payload },
+      { key: action.payload.key || uuidv4(), variant: AlertVariant.danger, ...action.payload },
       ...state,
     ],
     removeAlert: (state, action: PayloadAction<string>) =>

package/lib/common/utils.ts

@@ -113,7 +113,7 @@ export const getMajorMinorVersion = (version = '') => {
 };
 
 // Converts an Openshift version to a comparable integer
-export const getComparableVersionInt = (version: string): number => {
+const getComparableVersionInt = (version: string): number => {
   const majorMinorParts = version.split('.').slice(0, 2).map(Number);
   if (majorMinorParts.length < 2 || majorMinorParts.some(isNaN)) {
     // If the version doesn't have the required format, returning 0 makes it be considered