Bug 1988905: External mode deployments fails on parsing json in ODF wizard

frontend/packages/ceph-storage-plugin/locales/en/ceph-storage-plugin.json

@@ -265,11 +265,12 @@
   "Password": "Password",
   "Hide password": "Hide password",
   "Reveal password": "Reveal password",
+  "The uploaded file is not a valid JSON file": "The uploaded file is not a valid JSON file",
   "External storage metadata": "External storage metadata",
   "Download <1>{{SCRIPT_NAME}}</1> script and run on the RHCS cluster, then upload the results (JSON).": "Download <1>{{SCRIPT_NAME}}</1> script and run on the RHCS cluster, then upload the results (JSON).",
   "Download script": "Download script",
-  "The uploaded file is not a valid JSON file": "The uploaded file is not a valid JSON file",
   "Browse": "Browse",
+  "Clear": "Clear",
   "Upload JSON file": "Upload JSON file",
   "An error has occurred": "An error has occurred",
   "Create StorageSystem": "Create StorageSystem",

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/create-steps.tsx

@@ -57,7 +57,7 @@ export const createSteps = (
     },
     reviewAndCreate: {
       name: StepsName(t)[Steps.ReviewAndCreate],
-      component: <ReviewAndCreate state={state} />,
+      component: <ReviewAndCreate state={state} hasOCS={hasOCS} />,
     },
   };
 

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/create-storage-system-steps/backing-storage-step/backing-storage-step.tsx

@@ -5,7 +5,7 @@ import { Form, FormSelect, FormSelectOption, FormSelectProps, Radio } from '@pat
 import { useFlag } from '@console/shared/src';
 import { StorageClassDropdown } from '@console/internal/components/utils/storage-class-dropdown';
 import { ListKind, StorageClassResourceKind } from '@console/internal/module/k8s';
-import { StorageClassModel } from '@console/internal/models';
+import { InfrastructureModel, StorageClassModel } from '@console/internal/models';
 import { useK8sGet } from '@console/internal/components/utils/k8s-get-hook';
 import {
   ClusterServiceVersionKind,
@@ -31,6 +31,8 @@ import { CEPH_STORAGE_NAMESPACE, NO_PROVISIONER } from '../../../../constants';
 import './backing-storage-step.scss';
 import { GUARDED_FEATURES } from '../../../../features';
 
+const RHCS_SUPPORTED_INFRA = ['BareMetal', 'None', 'VSphere', 'OpenStack', 'oVirt', 'IBMCloud'];
+
 const ExternalSystemSelection: React.FC<ExternalSystemSelectionProps> = ({
   dispatch,
   stepIdReached,
@@ -121,6 +123,7 @@ export const BackingStorage: React.FC<BackingStorageProps> = ({
   const [sc, scLoaded, scLoadError] = useK8sGet<ListKind<StorageClassResourceKind>>(
     StorageClassModel,
   );
+  const [infra, infraLoaded, infraLoadError] = useK8sGet<any>(InfrastructureModel, 'cluster');
   const isMCGStandalone = useFlag(GUARDED_FEATURES.ODF_MCG_STANDALONE);
   const [csvList, csvListLoaded, csvListLoadError] = useK8sGet<ListKind<ClusterServiceVersionKind>>(
     ClusterServiceVersionModel,
@@ -134,12 +137,16 @@ export const BackingStorage: React.FC<BackingStorageProps> = ({
   const odfCsv = getODFCsv(csvList?.items);
   const supportedODFVendors = getSupportedVendors(odfCsv);
 
-  const allowedExternalStorage: ExternalStorage[] = SUPPORTED_EXTERNAL_STORAGE.filter(
-    ({ model }) => {
-      const kind = getStorageSystemKind(model);
-      return supportedODFVendors.includes(kind) && !formattedSS.has(kind);
-    },
-  );
+  const infraType = infra?.spec?.platformSpec?.type;
+  const enableRhcs = RHCS_SUPPORTED_INFRA.includes(infraType);
+
+  const allowedExternalStorage: ExternalStorage[] =
+    !enableRhcs || hasOCS
+      ? SUPPORTED_EXTERNAL_STORAGE.filter(({ model }) => {
+          const kind = getStorageSystemKind(model);
+          return supportedODFVendors.includes(kind) && kind !== STORAGE_CLUSTER_SYSTEM_KIND;
+        })
+      : SUPPORTED_EXTERNAL_STORAGE;
 
   const { type, externalStorage, deployment, isAdvancedOpen } = state;
 
@@ -150,6 +157,13 @@ export const BackingStorage: React.FC<BackingStorageProps> = ({
      */
     if (hasOCS && allowedExternalStorage.length) {
       dispatch({ type: 'backingStorage/setType', payload: BackingStorageType.EXTERNAL });
+      dispatch({
+        type: 'wizard/setStorageClass',
+        payload: {
+          name: '',
+          provisioner: '',
+        },
+      });
     }
   }, [dispatch, allowedExternalStorage.length, hasOCS]);
 
@@ -158,20 +172,21 @@ export const BackingStorage: React.FC<BackingStorageProps> = ({
      * Allow pre selecting the "create new storage class" option instead of the "existing" option
      * if no storage classes present. This is true for a baremetal platform.
      */
-    if (sc?.items?.length === 0 && deployment === DeploymentType.FULL) {
+    if (
+      sc?.items?.length === 0 &&
+      deployment === DeploymentType.FULL &&
+      type !== BackingStorageType.EXTERNAL
+    ) {
       dispatch({ type: 'backingStorage/setType', payload: BackingStorageType.LOCAL_DEVICES });
-    }
-  }, [deployment, dispatch, sc]);
-
-  React.useEffect(() => {
-    /* Update storage class state when existing storage class is not selected. */
-    if (type === BackingStorageType.LOCAL_DEVICES || type === BackingStorageType.EXTERNAL) {
       dispatch({
         type: 'wizard/setStorageClass',
-        payload: { name: '', provisioner: NO_PROVISIONER },
+        payload: {
+          name: '',
+          provisioner: NO_PROVISIONER,
+        },
       });
     }
-  }, [dispatch, type]);
+  }, [deployment, dispatch, sc, type]);
 
   const showExternalStorageSelection =
     type === BackingStorageType.EXTERNAL && allowedExternalStorage.length;
@@ -180,20 +195,31 @@ export const BackingStorage: React.FC<BackingStorageProps> = ({
   const RADIO_GROUP_NAME = 'backing-storage-radio-group';
 
   const onRadioSelect = (_, event) => {
-    dispatch({ type: 'backingStorage/setType', payload: event.target.value });
+    const newType = event.target.value;
     if (stepIdReached !== 1) {
       /*
        * Reset the wizard when user has selected a new deployment flow
        * and has not visited any step other than first step.
        */
       dispatch({ type: 'wizard/setInitialState' });
     }
+    /* Update storage class state when existing storage class is not selected. */
+    if (newType === BackingStorageType.LOCAL_DEVICES || newType === BackingStorageType.EXTERNAL) {
+      dispatch({
+        type: 'wizard/setStorageClass',
+        payload: {
+          name: '',
+          provisioner: type === BackingStorageType.EXTERNAL ? '' : NO_PROVISIONER,
+        },
+      });
+    }
+    dispatch({ type: 'backingStorage/setType', payload: newType });
   };
 
   return (
     <ErrorHandler
-      error={error || scLoadError || csvListLoadError}
-      loaded={loaded && scLoaded && csvListLoaded}
+      error={error || scLoadError || infraLoadError || csvListLoadError}
+      loaded={loaded && scLoaded && infraLoaded && csvListLoaded}
     >
       <Form>
         <Radio

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/create-storage-system-steps/review-and-create-step/review-and-create-step.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { TextContent, Text, TextVariants, List, ListItem } from '@patternfly/react-core';
 import { useFlag } from '@console/shared/src';
@@ -25,7 +26,7 @@ export const ReviewItem = ({ children, title }) => (
   </div>
 );
 
-export const ReviewAndCreate: React.FC<ReviewAndCreateProps> = ({ state }) => {
+export const ReviewAndCreate: React.FC<ReviewAndCreateProps> = ({ state, hasOCS }) => {
   const { t } = useTranslation();
   const isMultusSupported = useFlag(GUARDED_FEATURES.OCS_MULTUS);
 
@@ -35,13 +36,17 @@ export const ReviewAndCreate: React.FC<ReviewAndCreateProps> = ({ state }) => {
     securityAndNetwork,
     createLocalVolumeSet,
     backingStorage,
+    connectionDetails,
+    createStorageClass,
     nodes,
   } = state;
   const { capacity, arbiterLocation, enableArbiter } = capacityAndNodes;
   const { encryption, kms, networkType } = securityAndNetwork;
   const { deployment, externalStorage, type } = backingStorage;
 
   const isMCG = deployment === DeploymentType.MCG;
+  const isRhcs = !_.isEmpty(connectionDetails);
+  const isStandaloneExternal = hasOCS && !_.isEmpty(createStorageClass);
 
   const isNoProvisioner = storageClass.provisioner === NO_PROVISIONER;
   const formattedCapacity = !isNoProvisioner
@@ -65,7 +70,7 @@ export const ReviewAndCreate: React.FC<ReviewAndCreateProps> = ({ state }) => {
   return (
     <>
       <ReviewItem title={t('ceph-storage-plugin~Backing storage')}>
-        {!isMCG && (
+        {!isMCG && !isRhcs && (
           <ListItem>
             {t('ceph-storage-plugin~StorageClass: {{name}}', {
               name: storageClass.name || createLocalVolumeSet.volumeSetName,
@@ -85,7 +90,7 @@ export const ReviewAndCreate: React.FC<ReviewAndCreateProps> = ({ state }) => {
           </ListItem>
         )}
       </ReviewItem>
-      {!isMCG && (
+      {!isMCG && !isRhcs && !isStandaloneExternal && (
         <ReviewItem title={t('ceph-storage-plugin~Capacity and nodes')}>
           <ListItem>
             {t('ceph-storage-plugin~Cluster capacity: {{capacity}}', {
@@ -119,39 +124,42 @@ export const ReviewAndCreate: React.FC<ReviewAndCreateProps> = ({ state }) => {
           )}
         </ReviewItem>
       )}
-      {isMCG ? (
-        <ReviewItem title={t('ceph-storage-plugin~Security')}>
-          <ListItem>{t('ceph-storage-plugin~Encryption: Enabled')}</ListItem>
-          <ListItem>
-            {t('ceph-storage-plugin~External key management service: {{kmsStatus}}', {
-              kmsStatus,
-            })}
-          </ListItem>
-        </ReviewItem>
-      ) : (
-        <ReviewItem title={t('ceph-storage-plugin~Security and network')}>
-          <ListItem>
-            {t('ceph-storage-plugin~Encryption: {{encryptionStatus}}', { encryptionStatus })}
-          </ListItem>
-          {hasEncryption && (
+      {!isRhcs &&
+        !isStandaloneExternal &&
+        (isMCG ? (
+          <ReviewItem title={t('ceph-storage-plugin~Security')}>
+            <ListItem>{t('ceph-storage-plugin~Encryption: Enabled')}</ListItem>
             <ListItem>
               {t('ceph-storage-plugin~External key management service: {{kmsStatus}}', {
                 kmsStatus,
               })}
             </ListItem>
-          )}
-          {isMultusSupported && (
+          </ReviewItem>
+        ) : (
+          <ReviewItem title={t('ceph-storage-plugin~Security and network')}>
             <ListItem>
-              {t('ceph-storage-plugin~Network: {{networkType}}', {
-                networkType: NetworkTypeLabels[networkType],
-              })}
+              {t('ceph-storage-plugin~Encryption: {{encryptionStatus}}', { encryptionStatus })}
             </ListItem>
-          )}
-        </ReviewItem>
-      )}
+            {hasEncryption && (
+              <ListItem>
+                {t('ceph-storage-plugin~External key management service: {{kmsStatus}}', {
+                  kmsStatus,
+                })}
+              </ListItem>
+            )}
+            {isMultusSupported && (
+              <ListItem>
+                {t('ceph-storage-plugin~Network: {{networkType}}', {
+                  networkType: NetworkTypeLabels[networkType],
+                })}
+              </ListItem>
+            )}
+          </ReviewItem>
+        ))}
     </>
   );
 };
 type ReviewAndCreateProps = {
   state: WizardState;
+  hasOCS: boolean;
 };

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/external-storage/red-hat-ceph-storage/index.scss

@@ -7,5 +7,5 @@
 }
 
 .odf-connection-details__helper-text {
-    padding-top: 0.2rem;
+    padding-top: var(--pf-global--spacer--xs);
 }