@openshift-assisted/ui-lib 2.39.5 → 2.41.0

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkConfigurationForm.tsx

@@ -16,6 +16,7 @@ import {
   SecurityFields,
   useAlerts,
   useFormikAutoSave,
+  ClustersAPI,
 } from '../../../../common';
 import { useDefaultConfiguration } from '../ClusterDefaultConfigurationContext';
 import { useClusterWizardContext } from '../../clusterWizard/ClusterWizardContext';
@@ -45,6 +46,7 @@ import {
   V2ClusterUpdateParams,
 } from '@openshift-assisted/types/assisted-installer-service';
 import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
+import { useFeature } from '../../../hooks/use-feature';
 
 const NetworkConfigurationForm: React.FC<{
   cluster: Cluster;
@@ -65,6 +67,9 @@ const NetworkConfigurationForm: React.FC<{
     useFormikContext<NetworkConfigurationValues>();
   const isAutoSaveRunning = useFormikAutoSave();
   const errorFields = getFormikErrorFields(errors, touched);
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const { addAlert } = useAlerts();
+  const dispatch = useDispatch();
 
   // DHCP allocation is currently not supported for Nutanix hosts
   // https://issues.redhat.com/browse/MGMT-12382
@@ -79,6 +84,29 @@ const NetworkConfigurationForm: React.FC<{
     }
   }, [isHostsPlatformTypeNutanix, setFieldValue, values.vipDhcpAllocation]);
 
+  const onNext = React.useCallback(async () => {
+    if (isSingleClusterFeatureEnabled) {
+      try {
+        await ClustersAPI.updateInstallConfig(
+          cluster.id,
+          JSON.stringify(JSON.stringify({ featureSet: 'TechPreviewNoUpgrade' })),
+        );
+      } catch (e) {
+        handleApiError(e, () =>
+          addAlert({
+            title: 'Failed to update install-config',
+            message: getApiErrorMessage(e),
+          }),
+        );
+        if (isUnknownServerError(e as Error)) {
+          dispatch(setServerUpdateError());
+        }
+        return;
+      }
+    }
+    clusterWizardContext.moveNext();
+  }, [addAlert, cluster.id, clusterWizardContext, dispatch, isSingleClusterFeatureEnabled]);
+
   const footer = (
     <ClusterWizardFooter
       cluster={cluster}
@@ -91,7 +119,7 @@ const NetworkConfigurationForm: React.FC<{
         !isValid ||
         !canNextNetwork({ cluster })
       }
-      onNext={() => clusterWizardContext.moveNext()}
+      onNext={() => void onNext()}
       onBack={() => clusterWizardContext.moveBack()}
       isBackDisabled={isSubmitting || isAutoSaveRunning}
     />

package/lib/ocm/components/clusterConfiguration/operators/OperatorCheckbox.tsx

@@ -83,7 +83,7 @@ const OperatorRequirements = ({
                 <ListItem>
                   Each worker node requires an additional {workerRequirements?.ramMib || 360} MiB of
                   memory {workerRequirements?.diskSizeGb ? ',' : ' and'}{' '}
-                  {workerRequirements?.cpuCores || 2} CPUs
+                  {workerRequirements?.cpuCores || 2} CPU cores
                   {workerRequirements?.diskSizeGb
                     ? ` and ${workerRequirements?.diskSizeGb} storage space`
                     : ''}
@@ -93,7 +93,7 @@ const OperatorRequirements = ({
                 <ListItem>
                   Each control plane node requires an additional {masterRequirements?.ramMib || 150}{' '}
                   MiB of memory {masterRequirements?.diskSizeGb ? ',' : ' and'}{' '}
-                  {masterRequirements?.cpuCores || 4} CPUs
+                  {masterRequirements?.cpuCores || 4} CPU cores
                   {masterRequirements?.diskSizeGb
                     ? ` and ${masterRequirements?.diskSizeGb} storage space`
                     : ''}

package/lib/ocm/components/clusterConfiguration/operators/bundleSpecs.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { List, ListItem } from '@patternfly/react-core';
-import { OPENSHIFT_AI_REQUIREMENTS_LINK } from '../../../../common';
 
 export type BundleSpec = {
   noSNO?: boolean;
@@ -11,51 +10,34 @@ export type BundleSpec = {
 
 export const bundleSpecs: { [key: string]: BundleSpec } = {
   virtualization: {
+    noSNO: true,
     Description: () => (
       <List>
         <ListItem>
           Enabled CPU virtualization support in BIOS (Intel-VT / AMD-V) on all nodes.
         </ListItem>
         <ListItem>
-          Each control plane node requires an additional 1024 MiB of memory and 3 CPUs.
+          Each control plane node requires an additional 1024 MiB of memory and 3 CPU cores.
         </ListItem>
-        <ListItem>Each worker node requires an additional 1024 MiB of memory and 5 CPUs.</ListItem>
         <ListItem>
-          Additional resources may be required to support the selected storage operator.
+          Each worker node requires an additional 1024 MiB of memory and 5 CPU cores.
         </ListItem>
-      </List>
-    ),
-  },
-  'openshift-ai-nvidia': {
-    noSNO: true,
-    incompatibleBundles: ['openshift-ai-amd'],
-    Description: () => (
-      <List>
-        <ListItem>At least two worker nodes.</ListItem>
         <ListItem>
-          Each worker node requires 32 additional GiB of memory and 8 additional CPUs.
-        </ListItem>
-        <ListItem>At least one supported NVIDIA GPU.</ListItem>
-        <ListItem>
-          Nodes that have NVIDIA GPUs installed need to have secure boot disabled.
+          Additional resources may be required to support the selected storage operator.
         </ListItem>
       </List>
     ),
-    docsLink: OPENSHIFT_AI_REQUIREMENTS_LINK,
   },
-  'openshift-ai-amd': {
+  'openshift-ai': {
     noSNO: true,
-    incompatibleBundles: ['openshift-ai-nvidia'],
+    incompatibleBundles: [],
     Description: () => (
       <List>
-        <ListItem>At least two worker nodes.</ListItem>
         <ListItem>
-          Each worker node requires 32 additional GiB of memory and 8 additional CPUs.
+          NVIDIA GPU, AMD GPU and Kernel Module Management may or may not be installed based on the
+          GPU discovered on your hosts.
         </ListItem>
-        <ListItem>At least one supported AMD GPU.</ListItem>
-        <ListItem>Nodes that have AMD GPUs installed need to have secure boot disabled.</ListItem>
       </List>
     ),
-    docsLink: OPENSHIFT_AI_REQUIREMENTS_LINK,
   },
 };

package/lib/ocm/components/clusterConfiguration/staticIp/components/StaticIpPage.tsx

@@ -62,10 +62,10 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
     switch (clusterWizardContext.currentStepId) {
       case 'static-ip-yaml-view':
         return <YamlView {...viewProps} />;
-      case 'static-ip-host-configurations':
-        return <FormViewHosts {...viewProps} />;
       case 'static-ip-network-wide-configurations':
         return <FormViewNetworkWide {...viewProps} />;
+      case 'static-ip-host-configurations':
+        return <FormViewHosts {...viewProps} />;
       default:
         throw `Unexpected wizard step id ${clusterWizardContext.currentStepId} when entering static ip page`;
     }
@@ -85,11 +85,13 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
         </Text>
       </TextContent>
 
-      <StaticIpViewRadioGroup
-        initialView={initialStaticIpInfo.view}
-        confirmOnChangeView={confirmOnChangeView}
-        onChangeView={onChangeView}
-      />
+      {clusterWizardContext.currentStepId === 'static-ip-network-wide-configurations' && (
+        <StaticIpViewRadioGroup
+          initialView={initialStaticIpInfo.view}
+          confirmOnChangeView={confirmOnChangeView}
+          onChangeView={onChangeView}
+        />
+      )}
       {initialStaticIpInfo.isDataComplete && isoRegenerationAlert}
       {content}
     </Grid>

package/lib/ocm/components/clusterDetail/ClusterDetailStatusMessages.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Alert } from '@patternfly/react-core';
 import {
-  RenderIf,
   REDHAT_CONSOLE_OPENSHIFT,
   canDownloadKubeconfig,
   isSNO,
@@ -16,6 +15,7 @@ import { ExternalPlatformLinks } from '../clusterConfiguration/platformIntegrati
 import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
 import { Cluster, PlatformType } from '@openshift-assisted/types/assisted-installer-service';
 import PostInstallAlert from '../../../common/components/clusterDetail/PostInstallAlert';
+import { useFeature } from '../../hooks/use-feature';
 
 type ClusterDetailStatusMessagesProps = {
   cluster: Cluster;
@@ -26,6 +26,7 @@ const ClusterDetailStatusMessages = ({
   cluster,
   showAddHostsInfo,
 }: ClusterDetailStatusMessagesProps) => {
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const featureSupportLevelContext = useNewFeatureSupportLevel();
   const { inactiveDeletionHours } = useDefaultConfiguration(['inactiveDeletionHours']);
   const inactiveDeletionDays = Math.round((inactiveDeletionHours || 0) / 24);
@@ -43,23 +44,21 @@ const ClusterDetailStatusMessages = ({
 
   return (
     <>
-      <RenderIf
-        condition={
-          typeof inactiveDeletionHours === 'number' && canDownloadKubeconfig(cluster.status)
-        }
-      >
-        <Alert
-          variant="info"
-          isInline
-          title={
-            dateDifference > 0
-              ? `Download and save your kubeconfig file in a safe place. This file will be automatically ` +
-                `deleted from Assisted Installer's service in ${dateDifference} days.`
-              : `Kubeconfig file was automatically deleted ${inactiveDeletionDays} days after installation.`
-          }
-        />
-      </RenderIf>
-      <RenderIf condition={showAddHostsAlert}>
+      {!isSingleClusterFeatureEnabled &&
+        typeof inactiveDeletionHours === 'number' &&
+        canDownloadKubeconfig(cluster.status) && (
+          <Alert
+            variant="info"
+            isInline
+            title={
+              dateDifference > 0
+                ? `Download and save your kubeconfig file in a safe place. This file will be automatically ` +
+                  `deleted from Assisted Installer's service in ${dateDifference} days.`
+                : `Kubeconfig file was automatically deleted ${inactiveDeletionDays} days after installation.`
+            }
+          />
+        )}
+      {showAddHostsAlert && (
         <Alert
           variant="info"
           isInline
@@ -76,7 +75,7 @@ const ClusterDetailStatusMessages = ({
             </p>
           }
         />
-      </RenderIf>
+      )}
       {platformLink && <PostInstallAlert link={platformLink} />}
     </>
   );

package/lib/ocm/components/clusterDetail/ClusterDetailsButtonGroup.tsx

@@ -15,6 +15,8 @@ import ViewClusterEventsButton from '../../../common/components/ui/ViewClusterEv
 import { LaunchOpenshiftConsoleButton } from '../../../common/components/clusterDetail/ConsoleModal';
 import { Cluster, Credentials } from '@openshift-assisted/types/assisted-installer-service';
 
+import './ClusterDetailsButtonGroup.css';
+
 type ClusterDetailsButtonGroupProps = {
   cluster: Cluster;
   credentials?: Credentials;

package/lib/ocm/components/clusterWizard/ClusterDetails.tsx

@@ -75,12 +75,16 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
       try {
         const searchParams = new URLSearchParams(location.search);
         const isAssistedMigration = searchParams.get('source') === 'assisted_migration';
+        //For Assisted Migration we need to LVMs operator
+        if (isAssistedMigration) {
+          params.olmOperators = [{ name: 'lvm' }];
+        }
         const cluster = await ClustersService.create(params, isAssistedMigration);
         navigate(`../${cluster.id}`, { state: ClusterWizardFlowStateNew });
         await UISettingService.update(cluster.id, { addCustomManifests });
-        //TO-DO: Assisted-Migration. Provisional code. Needs to be removed when MTV integration be finished
+        //For Assisted Migration we need to enable virtualization bundle
         if (isAssistedMigration) {
-          await ClustersService.createClusterManifestsForAssistedMigration(cluster.id);
+          await UISettingService.update(cluster.id, { bundlesSelected: ['virtualization'] });
         }
       } catch (e) {
         handleApiError(e, () =>

package/lib/ocm/components/clusterWizard/ClusterWizard.tsx

@@ -16,7 +16,7 @@ import {
   InfraEnv,
   InfraEnvUpdateParams,
 } from '@openshift-assisted/types/assisted-installer-service';
-import KubeconfigDownload from './KubeconfigDownload';
+import CredentialsDownload from './CredentialsDownload';
 
 type ClusterWizardProps = {
   cluster: Cluster;
@@ -45,8 +45,8 @@ const ClusterWizard = ({ cluster, infraEnv, updateInfraEnv }: ClusterWizardProps
       case 'static-ip-network-wide-configurations':
       case 'static-ip-yaml-view':
         return <StaticIp cluster={cluster} infraEnv={infraEnv} updateInfraEnv={updateInfraEnv} />;
-      case 'kubeconfig-download':
-        return <KubeconfigDownload cluster={cluster} />;
+      case 'credentials-download':
+        return <CredentialsDownload cluster={cluster} />;
       case 'cluster-details':
       default:
         return <ClusterDetails cluster={cluster} infraEnv={infraEnv} />;

package/lib/ocm/components/clusterWizard/ClusterWizardContextProvider.tsx

@@ -69,7 +69,7 @@ const getWizardStepIds = (
     stepsCopy = removeStepFromClusterWizard(stepsCopy, 'custom-manifests', 1);
   }
   if (isSingleClusterFeatureEnabled) {
-    stepsCopy = addStepToClusterWizard(stepsCopy, 'networking', ['kubeconfig-download']);
+    stepsCopy = addStepToClusterWizard(stepsCopy, 'networking', ['credentials-download']);
   }
 
   return stepsCopy;

package/lib/ocm/components/clusterWizard/ClusterWizardNavigation.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { WizardNav } from '@patternfly/react-core/deprecated';
+import { WizardNav } from '@patternfly/react-core';
 import {
   canNextClusterDetails,
   canNextHostDiscovery,
@@ -51,11 +51,11 @@ const ClusterWizardNavigation = ({ cluster }: { cluster?: Cluster }) => {
   const getNavItem = (idx: number, stepId: ClusterWizardStepsType): ReactNode => {
     return (
       <WizardNavItem
-        step={idx}
+        stepIndex={idx}
         key={stepId}
         id={`wizard-nv-${stepId}`}
         content={wizardStepNames[stepId]}
-        onNavItemClick={() => clusterWizardContext.setCurrentStepId(stepId)}
+        onClick={() => clusterWizardContext.setCurrentStepId(stepId)}
         isCurrent={clusterWizardContext.currentStepId === stepId}
         isDisabled={isStepDisabled(idx, stepId)}
         isValid={() => isStepValid(stepId, cluster)}
@@ -66,14 +66,14 @@ const ClusterWizardNavigation = ({ cluster }: { cluster?: Cluster }) => {
   const getStaticIpFormViewNavItem = (idx: number): ReactNode => {
     return (
       <WizardNavItem
-        step={idx}
+        stepIndex={idx}
         isExpandable={true}
         content="Static network configurations"
         key="static-network-configuration-form-view"
         isCurrent={isStaticIpStep(clusterWizardContext.currentStepId)}
         isDisabled={isStepIdxAfterCurrent(idx)}
       >
-        <WizardNav returnList>
+        <WizardNav isInnerList>
           {staticIpFormViewSubSteps.map((stepId, subIdx) => {
             return getNavItem(idx + subIdx, stepId);
           })}

package/lib/ocm/components/clusterWizard/CredentialsDownload.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import {
+  ClustersAPI,
+  ClusterWizardStep,
+  ClusterWizardStepHeader,
+  getApiErrorMessage,
+  handleApiError,
+  KUBECONFIG_INFO_LINK,
+  useAlerts,
+  useTranslation,
+} from '../../../common';
+import { useClusterWizardContext } from './ClusterWizardContext';
+import ClusterWizardFooter from './ClusterWizardFooter';
+import ClusterWizardNavigation from './ClusterWizardNavigation';
+import { WithErrorBoundary } from '../../../common/components/ErrorHandling/WithErrorBoundary';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { Alert, AlertVariant, Checkbox, Stack } from '@patternfly/react-core';
+import { downloadFile } from '../../../common/utils';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+
+const CredentialsDownload: React.FC<{ cluster: Cluster }> = ({ cluster }) => {
+  const clusterWizardContext = useClusterWizardContext();
+  const [isChecked, setIsChecked] = React.useState<boolean>(false);
+  const [isDownloading, setIsDownloading] = React.useState(false);
+  const { addAlert } = useAlerts();
+  const { t } = useTranslation();
+
+  const downloadSingleFile = async (fileName: string) => {
+    try {
+      const response = await ClustersAPI.downloadClusterCredentials(cluster.id, fileName);
+      downloadFile('', response.data, fileName);
+      return true;
+    } catch (e) {
+      handleApiError(e, (e) => {
+        addAlert({
+          title: t('ai:Could not download {{fileName}} file', { fileName }),
+          message: getApiErrorMessage(e),
+        });
+      });
+      return false;
+    }
+  };
+
+  const handleDownloadClick = async () => {
+    setIsDownloading(true);
+
+    const configSuccess = await downloadSingleFile('kubeconfig');
+    const passwordSuccess = await downloadSingleFile('kubeadmin-password');
+
+    const hasError = !configSuccess || !passwordSuccess;
+
+    setTimeout(() => {
+      setIsDownloading(false);
+
+      if (!hasError) {
+        clusterWizardContext.moveNext();
+      }
+    }, 500);
+  };
+
+  const footer = (
+    <ClusterWizardFooter
+      cluster={cluster}
+      onNext={() => void handleDownloadClick()}
+      onBack={() => clusterWizardContext.moveBack()}
+      isNextDisabled={!isChecked || isDownloading}
+      nextButtonText={t('ai:Download credentials')}
+      isNextButtonLoading={isDownloading}
+    />
+  );
+
+  return (
+    <ClusterWizardStep navigation={<ClusterWizardNavigation cluster={cluster} />} footer={footer}>
+      <WithErrorBoundary title={t('ai:Failed to load Credentials Download step')}>
+        <Stack hasGutter>
+          <ClusterWizardStepHeader>{t('ai:Download credentials')}</ClusterWizardStepHeader>
+          <Alert
+            title={t('ai:Make sure you download and store your credentials files in a safe place')}
+            variant={AlertVariant.warning}
+            isInline
+            actionLinks={
+              <a href={KUBECONFIG_INFO_LINK} target="_blank" rel="noopener noreferrer">
+                {t('ai:Learn more about Kubeconfig')} <ExternalLinkAltIcon />
+              </a>
+            }
+          >
+            {t(`ai:You should use your cluster's Kubeconfig file to gain access to the cluster.`)}
+            <br />
+            {t(`ai:You can use username and password to log-in to your console through the UI.`)}
+          </Alert>
+          <Checkbox
+            id="credentials-download-agreement"
+            isChecked={isChecked}
+            onChange={() => setIsChecked(!isChecked)}
+            label={t(
+              'ai:I understand that I need to download credentials files prior of proceeding with the cluster installation.',
+            )}
+          />
+        </Stack>
+      </WithErrorBoundary>
+    </ClusterWizardStep>
+  );
+};
+
+export default CredentialsDownload;

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

@@ -11,7 +11,7 @@ export const wizardStepNames: { [key in ClusterWizardStepsType]: string } = {
   networking: 'Networking',
   'custom-manifests': 'Custom manifests',
   review: 'Review and create',
-  'kubeconfig-download': 'Download Kubeconfig',
+  'credentials-download': 'Download credentials',
 };
 
 export const defaultWizardSteps: ClusterWizardStepsType[] = [

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

@@ -29,7 +29,7 @@ export type ClusterWizardStepsType =
   | 'networking'
   | 'review'
   | 'custom-manifests'
-  | 'kubeconfig-download';
+  | 'credentials-download';
 
 const wizardStepsOrder: ClusterWizardStepsType[] = [
   'cluster-details',
@@ -41,7 +41,7 @@ const wizardStepsOrder: ClusterWizardStepsType[] = [
   'storage',
   'networking',
   'custom-manifests',
-  'kubeconfig-download',
+  'credentials-download',
   'review',
 ];
 
@@ -243,7 +243,7 @@ const reviewStepValidationsMap: WizardStepValidationMap = {
   softValidationIds: [],
 };
 
-const kubeconfigValidationMap = buildEmptyValidationsMap();
+const credentialsValidationMap = buildEmptyValidationsMap();
 
 const customManifestsValidationsMap = buildEmptyValidationsMap();
 
@@ -258,7 +258,7 @@ export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardSt
   storage: storageStepValidationsMap,
   networking: networkingStepValidationsMap,
   review: reviewStepValidationsMap,
-  'kubeconfig-download': kubeconfigValidationMap,
+  'credentials-download': credentialsValidationMap,
 };
 
 export const allClusterWizardSoftValidationIds =

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

@@ -14,8 +14,12 @@ import {
   ToolbarGroup,
   Tooltip,
   InputGroupItem,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
 } from '@patternfly/react-core';
-import { Select, SelectOption, SelectProps } from '@patternfly/react-core/deprecated';
 import { FilterIcon } from '@patternfly/react-icons/dist/js/icons/filter-icon';
 import { SyncIcon } from '@patternfly/react-icons/dist/js/icons/sync-icon';
 import { clusterStatusLabels, isSelectEventChecked, ToolbarButton } from '../../../common';
@@ -72,8 +76,11 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
     });
   };
 
-  const onStatusToggle: SelectProps['onToggle'] = () => setStatusExpanded(!isStatusExpanded);
-  const onStatusSelect: SelectProps['onSelect'] = (event, val) => {
+  const onStatusToggle = () => setStatusExpanded(!isStatusExpanded);
+  const onStatusSelect = (
+    val: string,
+    event?: React.MouseEvent | React.ChangeEvent | undefined,
+  ) => {
     const value = val as Cluster['status'];
     onSelect('status', isSelectEventChecked(event), value);
   };
@@ -133,24 +140,37 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
           deleteChipGroup={onDeleteChipGroup}
           categoryName="status"
         >
-          <Select
-            variant="checkbox"
-            aria-label="status"
-            onToggle={onStatusToggle}
-            onSelect={onStatusSelect}
-            selections={filters.status}
+          <Dropdown
             isOpen={isStatusExpanded}
-            placeholderText={statusPlaceholder}
-            toggleId="cluster-list-filter-status"
+            onSelect={(event, value) => onStatusSelect(value as string, event)}
+            onOpenChange={onStatusToggle}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                id="cluster-list-filter-status"
+                ref={toggleRef}
+                isFullWidth
+                onClick={onStatusToggle}
+                isExpanded={isStatusExpanded}
+              >
+                {statusPlaceholder}
+              </MenuToggle>
+            )}
+            shouldFocusToggleOnSelect
           >
-            {clusterStatusFilterLabels(t).map((label) => (
-              <SelectOption
-                key={label}
-                value={label}
-                inputId={`cluster-list-filter-status-${label}`}
-              />
-            ))}
-          </Select>
+            <DropdownList>
+              {clusterStatusFilterLabels(t).map((label) => (
+                <DropdownItem
+                  id={`cluster-list-filter-status-${label}`}
+                  hasCheckbox
+                  isSelected={filters.status.includes(label)}
+                  key={label}
+                  value={label}
+                >
+                  {label}
+                </DropdownItem>
+              ))}
+            </DropdownList>
+          </Dropdown>
         </CustomToolbarFilter>
         <ToolbarButton
           variant={ButtonVariant.primary}