Merge pull request #1216 from openshift-cherrypick-robot/cherry-pick-…

…1212-to-release-4.15-compatibility

[release-4.15-compatibility] Bug 2259961: Adds fallback layer for multi cluster code in External mode

packages/ocs/dashboards/persistent-external/breakdown-card.tsx

@@ -37,6 +37,7 @@ import {
   TitleWithHelp,
 } from '../persistent-internal/capacity-breakdown-card/capacity-breakdown-card';
 import '../persistent-internal/capacity-breakdown-card/capacity-breakdown-card.scss';
+import useClientFallback from './fallback-hook';
 
 export const BreakdownCard: React.FC = () => {
   const { t } = useCustomTranslation();
@@ -51,7 +52,8 @@ export const BreakdownCard: React.FC = () => {
   const { systemFlags } = useODFSystemFlagsSelector();
 
   // name of created StorageClasses are prefix by StorageCluster name
-  const storageClassNamePrefix = systemFlags[clusterNs]?.ocsClusterName;
+  const storageClassName = systemFlags?.[clusterNs]?.ocsClusterName;
+  const storageClassNamePrefix = useClientFallback(storageClassName);
 
   const { queries, model, metric } = getBreakdownMetricsQuery(
     metricType,

packages/ocs/dashboards/persistent-external/fallback-hook.ts

@@ -0,0 +1,37 @@
+import { StorageClassModel } from '@odf/shared/models';
+import { StorageClassResourceKind } from '@odf/shared/types';
+import { referenceForModel } from '@odf/shared/utils';
+import {
+  WatchK8sResource,
+  useK8sWatchResource,
+} from '@openshift-console/dynamic-plugin-sdk';
+
+const scResource: WatchK8sResource = {
+  isList: true,
+  kind: referenceForModel(StorageClassModel),
+};
+
+const fsProvisionerPostFix = '.cephfs.csi.ceph.com';
+
+/**
+ * This hooks is for ODF Client Mode use case only.
+ * ODF client mode doesn't deploy ODF StorageCluster hence falling back to StorageClases.
+ */
+const useClientFallback = (storageClusterName) => {
+  const [storageClasses, storageClassesLoaded, storageClassLoadError] =
+    useK8sWatchResource<StorageClassResourceKind[]>(scResource);
+  if (storageClusterName) {
+    return storageClusterName;
+  }
+
+  const provisioners = storageClasses.map((sc) => sc.provisioner);
+  const fileSystemProvisioner = provisioners.find((item) =>
+    item.includes(fsProvisionerPostFix)
+  );
+  const clusterName = fileSystemProvisioner?.split(fsProvisionerPostFix)?.[0];
+  return storageClassesLoaded && !storageClassLoadError
+    ? clusterName
+    : 'ocs-storagecluster';
+};
+
+export default useClientFallback;

packages/ocs/dashboards/persistent-external/utilization-card.tsx

@@ -21,6 +21,7 @@ import {
   INDEPENDENT_UTILIZATION_QUERIES,
 } from '../../queries';
 import { ODFSystemParams } from '../../types';
+import useClientFallback from './fallback-hook';
 
 export const UtilizationContent: React.FC = () => {
   const { t } = useCustomTranslation();
@@ -29,7 +30,8 @@ export const UtilizationContent: React.FC = () => {
   const { systemFlags } = useODFSystemFlagsSelector();
 
   // name of created StorageClasses are prefix by StorageCluster name
-  const storageClassNamePrefix = systemFlags[clusterNs]?.ocsClusterName;
+  const storageClassName = systemFlags?.[clusterNs]?.ocsClusterName;
+  const storageClassNamePrefix = useClientFallback(storageClassName);
 
   return (
     <UtilizationBody>