refactoring (support ODF in any Namespace)

package.json

@@ -81,6 +81,7 @@
     "history": "^4.9.0",
     "i18next": "^20.2.1",
     "i18next-conv": "^10.1.0",
+    "immer": "^10.0.3",
     "js-base64": "^2.1.9",
     "js-yaml": "^3.13.1",
     "lodash-es": "^4.17.21",
@@ -108,6 +109,7 @@
     "ts-loader": "^9.4.1",
     "ts-node": "5.0.1",
     "tsm": "^2.3.0",
+    "typesafe-actions": "^4.2.1",
     "typescript": "^4.8",
     "victory-core": "^35.4.4",
     "webpack": "5.74.0",

packages/client/src/components/dashboards/cards/activity-card.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useODFNamespaceSelector } from '@odf/core/redux';
 import { PVC_PROVISIONER_ANNOTATION } from '@odf/ocs/constants';
 import {
   eventsResource,
@@ -48,6 +49,8 @@ const getClientOperatorSubscription = (
   ) as SubscriptionKind;
 
 const RecentEvent: React.FC = () => {
+  const { odfNamespace } = useODFNamespaceSelector();
+
   const [pvcs, pvcLoaded, pvcLoadError] =
     useK8sWatchResource<PersistentVolumeClaimKind[]>(pvcResource);
   const [events, eventsLoaded, eventsLoadError] =
@@ -61,8 +64,8 @@ const RecentEvent: React.FC = () => {
   const memoizedPVCNames = useDeepCompareMemoize(validPVC, true);
 
   const clientEventsFilter = React.useCallback(
-    () => isPersistentStorageEvent(memoizedPVCNames),
-    [memoizedPVCNames]
+    () => isPersistentStorageEvent(memoizedPVCNames, odfNamespace),
+    [memoizedPVCNames, odfNamespace]
   );
 
   const eventObject = {

packages/ibm/system-connection-details.tsx

@@ -166,9 +166,9 @@ export const createFlashSystemPayload: CreatePayload<FlashSystemState> = ({
   systemName,
   state,
   model,
+  namespace,
   storageClassName,
 }) => {
-  const namespace = 'openshift-storage';
   const defaultFilesystem = 'ext4';
   const defaultVolumeMode = 'thick';
   const defaultVolumePrefix = 'odf';

packages/mco/components/create-dr-policy/create-dr-policy.tsx

@@ -167,6 +167,7 @@ export const CreateDRPolicy: React.FC<ReRouteResourceProps> = ({
             clusterName: cluster?.name,
             storageClusterRef: {
               name: cluster.storageClusterName,
+              // ToDo (epic 4422): Need to update this as per ConfigMap/ClusterClaim (whichever us decided) JSON output
               namespace: CEPH_STORAGE_NAMESPACE,
             },
           })),

packages/mco/components/mco-dashboard/queries.ts

@@ -26,6 +26,7 @@ export const LAST_SYNC_TIME_QUERY = 'ramen_sync_duration_seconds';
 export const getLastSyncPerClusterQuery = () =>
   `${LAST_SYNC_TIME_QUERY}{${DRPC_OBJECT_TYPE}, ${RAMEN_HUB_OPERATOR_METRICS_SERVICE}}`;
 
+// ToDo (epic 4422): Need to update as per updates in the metrics
 export const CAPACITY_QUERIES = {
   [StorageDashboard.TOTAL_CAPACITY_FILE_BLOCK]: `(label_replace(odf_system_map{target_namespace="openshift-storage"} , "managedBy", "$1", "target_name", "(.*)"))  * on (namespace, managedBy, cluster) group_right(storage_system, target_kind) ${TOTAL_CAPACITY_FILE_BLOCK_METRIC}`,
   [StorageDashboard.USED_CAPACITY_FILE_BLOCK]: `(label_replace(odf_system_map{target_namespace="openshift-storage"} , "managedBy", "$1", "target_name", "(.*)"))  * on (namespace, managedBy, cluster) group_right(storage_system, target_kind) ${USED_CAPACITY_FILE_BLOCK_METRIC}`,
@@ -43,6 +44,7 @@ export const getRBDSnapshotUtilizationQuery = (
   return queries[queryName];
 };
 
+// ToDo (epic 4422): Need to update as per updates in the metrics
 export const STATUS_QUERIES = {
   [StorageDashboard.SYSTEM_HEALTH]: `(label_replace(odf_system_map{target_namespace="openshift-storage"} , "managedBy", "$1", "target_name", "(.*)"))  * on (namespace, managedBy, cluster) group_right(storage_system, target_kind) ${SYSTEM_HEALTH_METRIC}`,
   [StorageDashboard.HEALTH]: SYSTEM_HEALTH_METRIC,

packages/mco/components/modals/app-manage-policies/parsers/application-set-parser.spec.tsx

@@ -273,6 +273,7 @@ const appResources2: ArgoApplicationSetResourceKind = {
 };
 
 const onClose = jest.fn();
+
 jest.mock('@odf/mco/hooks/disaster-recovery', () => ({
   __esModule: true,
   useDisasterRecoveryResourceWatch: jest.fn(() => {
@@ -283,6 +284,7 @@ jest.mock('@odf/mco/hooks/disaster-recovery', () => ({
     }
   }),
 }));
+
 jest.mock('@odf/mco/hooks/argo-application-set', () => ({
   __esModule: true,
   useArgoApplicationSetResourceWatch: jest.fn(() => {
@@ -293,6 +295,7 @@ jest.mock('@odf/mco/hooks/argo-application-set', () => ({
     }
   }),
 }));
+
 jest.mock('../utils/k8s-utils', () => ({
   unAssignPromises: jest.fn(() => [Promise.resolve({ data: {} })]),
 }));

packages/ocs/block-pool/BlockPoolDetailsPage.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
+import { useSafeK8sWatchResource } from '@odf/core/hooks';
+import { useODFNamespaceSelector } from '@odf/core/redux';
 import DetailsPage from '@odf/shared/details-page/DetailsPage';
-import { LoadingBox } from '@odf/shared/generic/status-box';
 import { Kebab } from '@odf/shared/kebab/kebab';
 import { ModalKeys } from '@odf/shared/modals/types';
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
 import { referenceForModel } from '@odf/shared/utils';
 import { EventStreamWrapped, YAMLEditorWrapped } from '@odf/shared/utils/Tabs';
-import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
 import { RouteComponentProps, useLocation } from 'react-router-dom';
-import { CEPH_NS } from '../constants';
 import { BlockPoolDashboard } from '../dashboards/block-pool/block-pool-dashboard';
 import { CephBlockPoolModel, CephClusterModel } from '../models';
 import { StoragePoolKind } from '../types';
@@ -33,12 +32,16 @@ export const BlockPoolDetailsPage: React.FC<BlockPoolDetailsPageProps> = ({
   const location = useLocation();
   const kind = referenceForModel(CephBlockPoolModel);
 
-  const [resource, loaded] = useK8sWatchResource<StoragePoolKind>({
-    kind,
-    name: poolName,
-    namespace: CEPH_NS,
-    isList: false,
-  });
+  const { odfNamespace, isODFNsLoaded, odfNsLoadError } =
+    useODFNamespaceSelector();
+
+  const [resource, loaded, loadError] =
+    useSafeK8sWatchResource<StoragePoolKind>((ns: string) => ({
+      kind,
+      name: poolName,
+      namespace: ns,
+      isList: false,
+    }));
 
   const breadcrumbs = [
     {
@@ -62,7 +65,7 @@ export const BlockPoolDetailsPage: React.FC<BlockPoolDetailsPageProps> = ({
         extraProps={{
           resource,
           resourceModel: CephBlockPoolModel,
-          namespace: CEPH_NS,
+          namespace: odfNamespace,
         }}
         customKebabItems={[
           {
@@ -82,12 +85,12 @@ export const BlockPoolDetailsPage: React.FC<BlockPoolDetailsPageProps> = ({
         ]}
       />
     );
-  }, [resource, t]);
+  }, [resource, odfNamespace, t]);
 
-  return !loaded ? (
-    <LoadingBox />
-  ) : (
+  return (
     <DetailsPage
+      loaded={loaded && isODFNsLoaded}
+      loadError={loadError || odfNsLoadError}
       breadcrumbs={breadcrumbs}
       actions={actions}
       resourceModel={CephBlockPoolModel}

packages/ocs/block-pool/BlockPoolListPage.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { useSafeK8sWatchResources } from '@odf/core/hooks';
+import { useODFNamespaceSelector } from '@odf/core/redux';
 import { healthStateMapping } from '@odf/shared/dashboards/status-card/states';
 import {
   useCustomPrometheusPoll,
@@ -15,7 +17,11 @@ import {
   CephClusterKind,
 } from '@odf/shared/types';
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
-import { humanizeBinaryBytes, referenceForModel } from '@odf/shared/utils';
+import {
+  humanizeBinaryBytes,
+  referenceForModel,
+  getValidPrometheusPollObj,
+} from '@odf/shared/utils';
 import {
   ListPageBody,
   ListPageCreateLink,
@@ -26,7 +32,7 @@ import {
   TableColumn,
   TableData,
   useActiveColumns,
-  useK8sWatchResources,
+  WatchK8sResults,
   useListPageFilter,
   VirtualizedTable,
 } from '@openshift-console/dynamic-plugin-sdk';
@@ -35,7 +41,6 @@ import classNames from 'classnames';
 import { Link, useLocation } from 'react-router-dom';
 import { Tooltip } from '@patternfly/react-core';
 import { sortable, wrappable } from '@patternfly/react-table';
-import { CEPH_NS } from '../constants';
 import { CephBlockPoolModel, CephClusterModel } from '../models';
 import { getPoolQuery, StorageDashboardQuery } from '../queries';
 import { StoragePoolKind } from '../types';
@@ -370,11 +375,11 @@ type BlockPoolListPageProps = {
   hideColumnManagement?: boolean;
 };
 
-const resources = {
+const resources = (ns: string) => ({
   ceph: {
     kind: referenceForModel(CephClusterModel),
     namespaced: true,
-    namespace: CEPH_NS,
+    namespace: ns,
     isList: true,
   },
   sc: {
@@ -386,7 +391,7 @@ const resources = {
     kind: referenceForModel(CephBlockPoolModel),
     isList: true,
   },
-};
+});
 
 type WatchType = {
   sc: StorageClassResourceKind[];
@@ -397,10 +402,15 @@ type WatchType = {
 export const BlockPoolListPage: React.FC<BlockPoolListPageProps> = ({}) => {
   const { t } = useCustomTranslation();
 
+  const { odfNamespace, isODFNsLoaded, odfNsLoadError, isNsSafe } =
+    useODFNamespaceSelector();
+
   const location = useLocation();
   const listPagePath: string = location.pathname;
 
-  const response = useK8sWatchResources<WatchType>(resources);
+  const response = useSafeK8sWatchResources(
+    resources
+  ) as WatchK8sResults<WatchType>;
 
   const cephClusters = response.ceph.data;
   const cephLoaded = response.ceph.loaded;
@@ -423,27 +433,37 @@ export const BlockPoolListPage: React.FC<BlockPoolListPageProps> = ({}) => {
 
   // Metrics
   const [poolRawCapacityMetrics, rawCapLoadError, rawCapLoading] =
-    useCustomPrometheusPoll({
-      endpoint: 'api/v1/query' as any,
-      query: getPoolQuery(
-        memoizedPoolNames,
-        StorageDashboardQuery.POOL_RAW_CAPACITY_USED
-      ),
-      namespace: CEPH_NS,
-      basePath: usePrometheusBasePath(),
-    });
+    useCustomPrometheusPoll(
+      getValidPrometheusPollObj(
+        {
+          endpoint: 'api/v1/query' as any,
+          query: getPoolQuery(
+            memoizedPoolNames,
+            StorageDashboardQuery.POOL_RAW_CAPACITY_USED
+          ),
+          namespace: odfNamespace,
+          basePath: usePrometheusBasePath(),
+        },
+        isNsSafe
+      )
+    );
 
   // compression queries
   const [compressionSavings, compressionLoadError, compressionLoading] =
-    useCustomPrometheusPoll({
-      endpoint: 'api/v1/query' as any,
-      query: getPoolQuery(
-        poolNames,
-        StorageDashboardQuery.POOL_COMPRESSION_SAVINGS
-      ),
-      namespace: CEPH_NS,
-      basePath: usePrometheusBasePath(),
-    });
+    useCustomPrometheusPoll(
+      getValidPrometheusPollObj(
+        {
+          endpoint: 'api/v1/query' as any,
+          query: getPoolQuery(
+            poolNames,
+            StorageDashboardQuery.POOL_COMPRESSION_SAVINGS
+          ),
+          namespace: odfNamespace,
+          basePath: usePrometheusBasePath(),
+        },
+        isNsSafe
+      )
+    );
 
   const customData = React.useMemo(() => {
     const poolRawCapacity: PoolMetrics = getPerPoolMetrics(
@@ -498,15 +518,15 @@ export const BlockPoolListPage: React.FC<BlockPoolListPageProps> = ({}) => {
       <ListPageBody>
         <ListPageFilter
           data={data}
-          loaded={loaded}
+          loaded={loaded && isODFNsLoaded}
           onFilterChange={onFilterChange}
           hideColumnManagement={true}
         />
         <BlockPoolList
           data={filteredData}
           unfilteredData={data}
-          loaded={loaded}
-          loadError={error}
+          loaded={loaded && isODFNsLoaded}
+          loadError={error || odfNsLoadError}
           rowData={{ ...customData }}
         />
       </ListPageBody>