@openshift-assisted/ui-lib 2.50.1 → 2.51.0

package/lib/ocm/components/clusterWizard/disconnected/DisconnectedStaticIp.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { ClusterWizardStep, getFormikErrorFields, useAlerts } from '../../../../common';
+import { useClusterWizardContext } from '../ClusterWizardContext';
+import ClusterWizardFooter from '../ClusterWizardFooter';
+import ClusterWizardNavigation from '../ClusterWizardNavigation';
+import { StaticIpFormState } from '../../clusterConfiguration/staticIp/components/propTypes';
+import { StaticIpPage } from '../../clusterConfiguration/staticIp/components/StaticIpPage';
+import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
+import { InfraEnvsAPI } from '../../../services/apis';
+import { InfraEnvUpdateParams } from '@openshift-assisted/types/assisted-installer-service';
+
+const getInitialFormStateProps = (): StaticIpFormState => {
+  return {
+    isValid: true,
+    isSubmitting: false,
+    isAutoSaveRunning: false,
+    errors: {},
+    touched: {},
+    isEmpty: true,
+  };
+};
+
+const DisconnectedStaticIp: React.FC = () => {
+  const { moveNext, moveBack, disconnectedInfraEnv, setDisconnectedInfraEnv } =
+    useClusterWizardContext();
+  const { alerts } = useAlerts();
+  const [formState, setFormStateProps] = React.useState<StaticIpFormState>(
+    getInitialFormStateProps(),
+  );
+
+  const onFormStateChange = (formState: StaticIpFormState) => {
+    setFormStateProps(formState);
+  };
+
+  const updateInfraEnv = async (params: InfraEnvUpdateParams) => {
+    if (!disconnectedInfraEnv?.id) {
+      throw new Error('No disconnected infraEnv available');
+    }
+    const { data: updatedInfraEnv } = await InfraEnvsAPI.update(disconnectedInfraEnv.id, params);
+    setDisconnectedInfraEnv(updatedInfraEnv);
+    return updatedInfraEnv;
+  };
+
+  const isNextDisabled =
+    formState.isAutoSaveRunning || !formState.isValid || !!alerts.length || formState.isSubmitting;
+  const errorFields = getFormikErrorFields<object>(formState.errors, formState.touched);
+
+  const footer = (
+    <ClusterWizardFooter
+      alertTitle="Static IP configuration contains missing or invalid fields"
+      alertContent={null}
+      errorFields={errorFields}
+      isSubmitting={formState.isSubmitting}
+      onNext={() => moveNext()}
+      onBack={() => moveBack()}
+      isNextDisabled={isNextDisabled}
+      isBackDisabled={formState.isSubmitting || formState.isAutoSaveRunning}
+    />
+  );
+
+  if (!disconnectedInfraEnv) {
+    return null;
+  }
+
+  return (
+    <ClusterWizardStep navigation={<ClusterWizardNavigation />} footer={footer}>
+      <WithErrorBoundary title="Failed to load Static IP step">
+        <StaticIpPage
+          infraEnv={disconnectedInfraEnv}
+          updateInfraEnv={updateInfraEnv}
+          onFormStateChange={onFormStateChange}
+        />
+      </WithErrorBoundary>
+    </ClusterWizardStep>
+  );
+};
+
+export default DisconnectedStaticIp;

package/lib/ocm/components/clusterWizard/disconnected/OptionalConfigurationsStep.tsx

@@ -0,0 +1,364 @@
+import * as React from 'react';
+import { Formik } from 'formik';
+import { TFunction } from 'i18next';
+import * as Yup from 'yup';
+import {
+  ClusterWizardStep,
+  TechnologyPreview,
+  sshPublicKeyValidationSchema,
+  getFormikErrorFields,
+  httpProxyValidationSchema,
+  noProxyValidationSchema,
+  ipValidationSchema,
+  InputField,
+  CheckboxField,
+  AdditionalNTPSourcesField,
+  ProxyFieldsType,
+  PullSecret,
+  pullSecretValidationSchema,
+} from '../../../../common';
+import { Split, SplitItem, Grid, GridItem, Form, Content } from '@patternfly/react-core';
+import { useClusterWizardContext } from '../ClusterWizardContext';
+import ClusterWizardFooter from '../ClusterWizardFooter';
+import ClusterWizardNavigation from '../ClusterWizardNavigation';
+import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
+import UploadSSH from '../../../../common/components/clusterConfiguration/UploadSSH';
+import { ProxyInputFields } from '../../../../common/components/clusterConfiguration/ProxyFields';
+import { handleApiError, getApiErrorMessage } from '../../../../common/api';
+import { useAlerts } from '../../../../common/components/AlertsContextProvider';
+import { AlertVariant } from '@patternfly/react-core';
+import InfraEnvsService from '../../../services/InfraEnvsService';
+import { InfraEnvsAPI } from '../../../services/apis';
+import usePullSecret from '../../../hooks/usePullSecret';
+import { useParams } from 'react-router-dom-v5-compat';
+import ClustersService from '../../../services/ClustersService';
+import {
+  Cluster,
+  InfraEnv,
+  InfraEnvCreateParams,
+  InfraEnvUpdateParams,
+} from '@openshift-assisted/types/assisted-installer-service';
+import { HostsNetworkConfigurationControlGroup } from '../../clusterConfiguration/HostsNetworkConfigurationControlGroup';
+import { HostsNetworkConfigurationType } from '../../../services/types';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import { getDummyInfraEnvField } from '../../clusterConfiguration/staticIp/data/dummyData';
+import { ntpSourceValidationSchema } from '../../../../common/validationSchemas/ntpValidation';
+import { isInOcm } from '../../../../common/api';
+
+const DEFAULT_CPU_ARCHITECTURE = 'x86_64' as const;
+const DISCONNECTED_IMAGE_TYPE = 'disconnected-iso' as const;
+
+type OptionalConfigurationsFormValues = ProxyFieldsType & {
+  sshPublicKey?: string;
+  enableNtpSources: boolean;
+  additionalNtpSources?: string;
+  hostsNetworkConfigurationType: HostsNetworkConfigurationType;
+  rendezvousIp?: string;
+  pullSecret?: string;
+};
+
+const DEFAULT_INITIAL_VALUES: OptionalConfigurationsFormValues = {
+  sshPublicKey: '',
+  enableProxy: false,
+  httpProxy: '',
+  httpsProxy: '',
+  noProxy: '',
+  enableNtpSources: false,
+  additionalNtpSources: '',
+  hostsNetworkConfigurationType: HostsNetworkConfigurationType.DHCP,
+  rendezvousIp: '',
+  pullSecret: '',
+};
+
+/**
+ * Rehydrate form values from infraEnv when navigating back to this step.
+ */
+const infraEnvToFormValues = (infraEnv: InfraEnv): OptionalConfigurationsFormValues => ({
+  ...DEFAULT_INITIAL_VALUES,
+  sshPublicKey: infraEnv.sshAuthorizedKey ?? '',
+  enableProxy: !!(infraEnv.proxy?.httpProxy || infraEnv.proxy?.httpsProxy),
+  httpProxy: infraEnv.proxy?.httpProxy ?? '',
+  httpsProxy: infraEnv.proxy?.httpsProxy ?? '',
+  noProxy: infraEnv.proxy?.noProxy ?? '',
+  enableNtpSources: !!infraEnv.additionalNtpSources,
+  additionalNtpSources: infraEnv.additionalNtpSources ?? '',
+  hostsNetworkConfigurationType:
+    (infraEnv.staticNetworkConfig?.length ?? 0) > 0
+      ? HostsNetworkConfigurationType.STATIC
+      : HostsNetworkConfigurationType.DHCP,
+  rendezvousIp: infraEnv.rendezvousIp ?? '',
+});
+
+/**
+ * Builds common infrastructure environment params from form values
+ */
+const buildInfraEnvParams = (values: OptionalConfigurationsFormValues) => {
+  // Build proxy object - only include fields that have values
+  const proxy = {
+    ...(values.httpProxy && { httpProxy: values.httpProxy }),
+    ...(values.httpsProxy && { httpsProxy: values.httpsProxy }),
+    ...(values.noProxy && { noProxy: values.noProxy }),
+  };
+  const hasProxy = Object.keys(proxy).length > 0;
+
+  return {
+    ...(values.sshPublicKey && { sshAuthorizedKey: values.sshPublicKey }),
+    ...(hasProxy && { proxy }),
+    ...(values.additionalNtpSources && {
+      additionalNtpSources: values.additionalNtpSources,
+    }),
+    ...(values.rendezvousIp && { rendezvousIp: values.rendezvousIp }),
+    // Initialize with dummy static network config when static IP is selected
+    // This is required for the StaticIpPage to render properly
+    ...(values.hostsNetworkConfigurationType === HostsNetworkConfigurationType.STATIC && {
+      staticNetworkConfig: getDummyInfraEnvField(),
+    }),
+  };
+};
+
+const getValidationSchema = (t: TFunction, requirePullSecret: boolean) =>
+  Yup.lazy((values: OptionalConfigurationsFormValues) =>
+    Yup.object().shape({
+      sshPublicKey: sshPublicKeyValidationSchema(t),
+      enableProxy: Yup.boolean().required(),
+      httpProxy: httpProxyValidationSchema({
+        values,
+        pairValueName: 'httpsProxy',
+        allowEmpty: true,
+        t,
+      }),
+      httpsProxy: httpProxyValidationSchema({
+        values,
+        pairValueName: 'httpProxy',
+        allowEmpty: true,
+        t,
+      }),
+      noProxy: noProxyValidationSchema(t),
+      enableNtpSources: Yup.boolean().required(),
+      additionalNtpSources: ntpSourceValidationSchema(t),
+      hostsNetworkConfigurationType: Yup.string()
+        .oneOf(Object.values(HostsNetworkConfigurationType))
+        .required(),
+      rendezvousIp: Yup.string()
+        .max(45, 'IP address must be at most 45 characters')
+        .test(
+          'ip-validation',
+          'Not a valid IP address',
+          (value) => !value || ipValidationSchema(t).isValidSync(value),
+        ),
+      ...(requirePullSecret && {
+        pullSecret: pullSecretValidationSchema(t).required(t('ai:Required field')),
+      }),
+    }),
+  );
+
+const OptionalConfigurationsStep = () => {
+  const { clusterId } = useParams<{ clusterId: string }>();
+  const [cluster, setCluster] = React.useState<Cluster | null>(null);
+  const { t } = useTranslation();
+  const defaultPullSecret = usePullSecret();
+
+  const { moveNext, moveBack, setDisconnectedInfraEnv, disconnectedInfraEnv } =
+    useClusterWizardContext();
+  const { addAlert, clearAlerts } = useAlerts();
+
+  React.useEffect(() => {
+    const fetchCluster = async () => {
+      if (!clusterId) {
+        return;
+      }
+      try {
+        const fetchedCluster = await ClustersService.get(clusterId);
+        setCluster(fetchedCluster);
+      } catch (error) {
+        handleApiError(error, () => {
+          addAlert({
+            title: t('ai:Failed to fetch cluster'),
+            message: getApiErrorMessage(error),
+            variant: AlertVariant.danger,
+          });
+        });
+      }
+    };
+    void fetchCluster();
+  }, [clusterId, addAlert, t]);
+
+  const initialValues: OptionalConfigurationsFormValues = disconnectedInfraEnv
+    ? infraEnvToFormValues(disconnectedInfraEnv)
+    : DEFAULT_INITIAL_VALUES;
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validateOnMount
+      validationSchema={getValidationSchema(t, !isInOcm)}
+      onSubmit={async (values) => {
+        clearAlerts();
+        if (!cluster?.id) {
+          addAlert({
+            title: t('ai:Missing cluster'),
+            message: t('ai:Cluster must be created before configuring infrastructure environment'),
+            variant: AlertVariant.danger,
+          });
+          return;
+        }
+
+        const commonParams = buildInfraEnvParams(values);
+        // Default pull secret only exists in OCM; when !isInOcm the user must provide it via the field
+        const pullSecretToUse = isInOcm ? defaultPullSecret : values.pullSecret;
+
+        try {
+          if (disconnectedInfraEnv?.id) {
+            // Update existing infraEnv
+            const updateParams: InfraEnvUpdateParams = {
+              ...commonParams,
+              imageType: DISCONNECTED_IMAGE_TYPE,
+              pullSecret: pullSecretToUse,
+            };
+            const { data: updatedInfraEnv } = await InfraEnvsAPI.update(
+              disconnectedInfraEnv.id,
+              updateParams,
+            );
+            setDisconnectedInfraEnv({
+              ...updatedInfraEnv,
+              // infraEnv does not return the whole OCP version
+              openshiftVersion: cluster.openshiftVersion,
+            });
+          } else {
+            // Create new infraEnv
+            const createParams: InfraEnvCreateParams = {
+              name: InfraEnvsService.makeInfraEnvName(DEFAULT_CPU_ARCHITECTURE, cluster.name),
+              clusterId: cluster.id,
+              openshiftVersion: cluster.openshiftVersion,
+              cpuArchitecture: DEFAULT_CPU_ARCHITECTURE,
+              imageType: DISCONNECTED_IMAGE_TYPE,
+              pullSecret: pullSecretToUse ?? '',
+              ...commonParams,
+            };
+            const createdInfraEnv = await InfraEnvsService.create(createParams);
+            setDisconnectedInfraEnv({
+              ...createdInfraEnv,
+              // infraEnv does not return the whole OCP version
+              openshiftVersion: cluster.openshiftVersion,
+            });
+          }
+          moveNext();
+        } catch (error) {
+          handleApiError(error, () => {
+            addAlert({
+              title: disconnectedInfraEnv?.id
+                ? t('ai:Failed to update infrastructure environment')
+                : t('ai:Failed to create infrastructure environment'),
+              message: getApiErrorMessage(error),
+              variant: AlertVariant.danger,
+            });
+          });
+        }
+      }}
+    >
+      {({ submitForm, isValid, errors, touched, isSubmitting, values }) => {
+        const errorFields = getFormikErrorFields(errors, touched);
+        const handleNext = () => {
+          void submitForm(); // This will trigger onSubmit
+        };
+
+        return (
+          <ClusterWizardStep
+            navigation={<ClusterWizardNavigation />}
+            footer={
+              <ClusterWizardFooter
+                disconnectedClusterId={clusterId}
+                onNext={handleNext} // Changed from moveNext
+                onBack={moveBack}
+                isNextDisabled={!isValid || !cluster}
+                errorFields={errorFields}
+                isSubmitting={isSubmitting}
+              />
+            }
+          >
+            <WithErrorBoundary title="Failed to load Optional Configurations step">
+              <Grid hasGutter>
+                <GridItem>
+                  <Split>
+                    <SplitItem>
+                      <Content component="h2">{t('ai:Optional configurations')}</Content>
+                    </SplitItem>
+                    <SplitItem>
+                      <TechnologyPreview />
+                    </SplitItem>
+                  </Split>
+                </GridItem>
+                <GridItem>
+                  <Form id="wizard-cluster-optional-configurations__form">
+                    {/* Pull secret (!OCM only) */}
+                    {!isInOcm && <PullSecret defaultPullSecret={defaultPullSecret} isOcm={false} />}
+
+                    {/* Rendezvous IP */}
+                    <InputField
+                      label={t('ai:Rendezvous IP')}
+                      name="rendezvousIp"
+                      helperText={t(
+                        'ai:The IP address that hosts will use to communicate with the bootstrap node during installation.',
+                      )}
+                      placeholder="e.g., 192.168.1.10"
+                      maxLength={45}
+                    />
+
+                    <UploadSSH />
+
+                    {/* Proxy Settings */}
+                    <CheckboxField
+                      label={t('ai:Configure proxy settings')}
+                      name="enableProxy"
+                      helperText={
+                        <p>
+                          {t(
+                            'ai:If hosts are behind a firewall that requires the use of a proxy, provide additional information about the proxy.',
+                          )}
+                        </p>
+                      }
+                      body={values.enableProxy && <ProxyInputFields />}
+                    />
+
+                    {/* NTP Configuration */}
+                    <CheckboxField
+                      label={t('ai:Add your own NTP (Network Time Protocol) sources')}
+                      name="enableNtpSources"
+                      helperText={
+                        <p>
+                          {t(
+                            'ai:Configure your own NTP sources to synchronize the time between the hosts that will be added to this infrastructure environment.',
+                          )}
+                        </p>
+                      }
+                      body={
+                        values.enableNtpSources && (
+                          <Grid hasGutter>
+                            <AdditionalNTPSourcesField
+                              name="additionalNtpSources"
+                              helperText={t(
+                                'ai:A comma separated list of IP or domain names of the NTP pools or servers.',
+                              )}
+                            />
+                          </Grid>
+                        )
+                      }
+                    />
+
+                    {/* Network Configuration */}
+                    <HostsNetworkConfigurationControlGroup
+                      clusterExists={false}
+                      isDisabled={false}
+                    />
+                  </Form>
+                </GridItem>
+              </Grid>
+            </WithErrorBoundary>
+          </ClusterWizardStep>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export default OptionalConfigurationsStep;

package/lib/ocm/components/clusterWizard/disconnected/ReviewStep.tsx

@@ -25,16 +25,13 @@ import {
   Content,
 } from '@patternfly/react-core';
 import { Formik } from 'formik';
-import { saveAs } from 'file-saver';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate, useParams } from 'react-router-dom-v5-compat';
 
 import { getOperatorSpecs } from '../../../../common/components/operators/operatorSpecs';
 
-const downloadUrl =
-  'https://mirror.openshift.com/pub/cgw/assisted-installer-disconnected/latest/agent-ove.x86_64.iso';
-
 const ReviewStep = () => {
-  const { moveBack } = useClusterWizardContext();
+  const { moveBack, disconnectedInfraEnv } = useClusterWizardContext();
+  const { clusterId } = useParams<{ clusterId: string }>();
   const opSpecs = getOperatorSpecs(() => undefined);
   const navigate = useNavigate();
 
@@ -50,11 +47,14 @@ const ReviewStep = () => {
         footer={
           <ClusterWizardFooter
             onNext={() => {
-              downloadUrl && saveAs(downloadUrl);
+              if (disconnectedInfraEnv?.downloadUrl) {
+                window.open(disconnectedInfraEnv.downloadUrl, '_blank');
+              }
               navigate('/cluster-list');
             }}
             onBack={moveBack}
             nextButtonText="Download ISO"
+            disconnectedClusterId={clusterId}
           />
         }
       >
@@ -96,9 +96,19 @@ const ReviewStep = () => {
               </List>
             </Alert>
             <DescriptionList isHorizontal>
+              {disconnectedInfraEnv?.rendezvousIp && (
+                <DescriptionListGroup>
+                  <DescriptionListTerm>Rendezvous IP</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    {disconnectedInfraEnv?.rendezvousIp}
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+              )}
               <DescriptionListGroup>
                 <DescriptionListTerm>OpenShift version</DescriptionListTerm>
-                <DescriptionListDescription>4.20</DescriptionListDescription>
+                <DescriptionListDescription>
+                  {disconnectedInfraEnv?.openshiftVersion || ''}
+                </DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>CPU architecture</DescriptionListTerm>
@@ -106,7 +116,7 @@ const ReviewStep = () => {
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>ISO size</DescriptionListTerm>
-                <DescriptionListDescription>approx. 43.5GB</DescriptionListDescription>
+                <DescriptionListDescription>approx. 50 GB</DescriptionListDescription>
               </DescriptionListGroup>
             </DescriptionList>
           </Grid>

package/lib/ocm/components/clusterWizard/index.ts

@@ -2,4 +2,5 @@ export { default as ClusterDetailsForm } from './ClusterDetailsForm';
 export { default as NewClusterWizard } from './NewClusterWizard';
 export { default as ClusterWizard } from './ClusterWizard';
 export { default as ClusterWizardContextProvider } from './ClusterWizardContextProvider';
+export { useClusterWizardContext } from './ClusterWizardContext';
 export { OpenShiftVersionsContextProvider } from './OpenShiftVersionsContext';

package/lib/ocm/components/clusterWizard/wizardTransition.ts

@@ -31,7 +31,8 @@ export type ClusterWizardStepsType =
   | 'custom-manifests'
   | 'credentials-download'
   | 'disconnected-basic'
-  | 'disconnected-review';
+  | 'disconnected-review'
+  | 'disconnected-optional-configurations';
 
 const wizardStepsOrder: ClusterWizardStepsType[] = [
   'cluster-details',
@@ -49,6 +50,7 @@ const wizardStepsOrder: ClusterWizardStepsType[] = [
 
 export const disconnectedSteps: ClusterWizardStepsType[] = [
   'disconnected-basic',
+  'disconnected-optional-configurations',
   'disconnected-review',
 ];
 
@@ -100,6 +102,9 @@ export const getClusterWizardFirstStep = (
     case 'pending-for-input':
     case 'adding-hosts':
     case 'insufficient':
+      if (customManifestsStepNeedsToBeFilled) {
+        return 'custom-manifests';
+      }
       return getStepForFailingHostValidations(hosts);
     default:
       return 'cluster-details';
@@ -239,7 +244,12 @@ const networkingStepValidationsMap: WizardStepValidationMap = {
   // Alternatively we would have to whitelist network validations instead of using group
   // TODO(mlibra): remove that container-images-available from soft validations and let backend drive it via disabling it.
   //   Depends on: https://issues.redhat.com/browse/MGMT-5265
-  softValidationIds: ['ntp-synced', 'container-images-available', 'mtu-valid'],
+  softValidationIds: [
+    'ntp-synced',
+    'container-images-available',
+    'mtu-valid',
+    'custom-manifests-requirements-satisfied',
+  ],
 };
 
 const reviewStepValidationsMap: WizardStepValidationMap = {
@@ -260,6 +270,7 @@ const credentialsValidationMap = buildEmptyValidationsMap();
 const customManifestsValidationsMap = buildEmptyValidationsMap();
 const disconnectedReviewValidationsMap = buildEmptyValidationsMap();
 const disconnectedBasicValidationsMap = buildEmptyValidationsMap();
+const disconnectedOptionalConfigurationsValidationsMap = buildEmptyValidationsMap();
 
 export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardStepsType> = {
   'cluster-details': clusterDetailsStepValidationsMap,
@@ -275,6 +286,7 @@ export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardSt
   'credentials-download': credentialsValidationMap,
   'disconnected-review': disconnectedReviewValidationsMap,
   'disconnected-basic': disconnectedBasicValidationsMap,
+  'disconnected-optional-configurations': disconnectedOptionalConfigurationsValidationsMap,
 };
 
 export const allClusterWizardSoftValidationIds =

package/lib/ocm/components/clusters/ClusterStatus.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 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 { FileAltIcon } from '@patternfly/react-icons/dist/js/icons/file-alt-icon';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { BanIcon } from '@patternfly/react-icons/dist/js/icons/ban-icon';
-import { clusterStatusLabels, UiIcon, WithTestID } from '../../../common';
+import { clusterStatusLabels, WithTestID } from '../../../common';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { Icon } from '@patternfly/react-core';
 
 type ClusterStatusProps = {
   status: Cluster['status'];
@@ -24,25 +24,47 @@ type ClusterStatusIconProps = {
 export const ClusterStatusIcon: React.FC<ClusterStatusIconProps> = ({ status, ...extraProps }) => {
   switch (status) {
     case 'cancelled':
-      return <UiIcon size="sm" icon={<BanIcon {...extraProps} />} />;
+      return (
+        <Icon size="sm">
+          <BanIcon {...extraProps} />
+        </Icon>
+      );
     case 'insufficient':
     case 'pending-for-input':
     case 'ready':
-      return <UiIcon size="sm" icon={<FileAltIcon {...extraProps} />} />;
+      return (
+        <Icon size="sm">
+          <FileAltIcon {...extraProps} />
+        </Icon>
+      );
     case 'error':
-      return <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon {...extraProps} />} />;
+      return (
+        <Icon size="sm" status="danger">
+          <ExclamationCircleIcon {...extraProps} />
+        </Icon>
+      );
     case 'installed':
-      return <UiIcon size="sm" icon={<CheckCircleIcon color={okColor.value} {...extraProps} />} />;
+      return (
+        <Icon status="success" size="sm">
+          <CheckCircleIcon {...extraProps} />
+        </Icon>
+      );
     case 'installing-pending-user-action':
       return (
-        <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon {...extraProps} />} />
+        <Icon size="sm" status="warning">
+          <ExclamationTriangleIcon {...extraProps} />
+        </Icon>
       );
 
     case 'preparing-for-installation':
     case 'installing':
     case 'finalizing':
     case 'adding-hosts':
-      return <UiIcon size="sm" icon={<InProgressIcon {...extraProps} />} />;
+      return (
+        <Icon size="sm">
+          <InProgressIcon {...extraProps} />
+        </Icon>
+      );
     default:
       return <></>;
   }