Bug 1989876: Fix routing for ODF 4.9(OCS) Dashboard and link Ceph Block Pools

frontend/packages/ceph-storage-plugin/console-extensions.json

@@ -176,7 +176,7 @@
   {
     "type": "console.page/route",
     "properties": {
-      "path": "/odf/resource/noobaa.io~v1alpha1~BackingStore/~new",
+      "path": "/odf/resource/noobaa.io~v1alpha1~BackingStore/create/~new",
       "exact": true,
       "component": {
         "$codeRef": "bsCreate.default"
@@ -186,7 +186,7 @@
   {
     "type": "console.page/route",
     "properties": {
-      "path": "/odf/resource/noobaa.io~v1alpha1~NamespaceStore/~new",
+      "path": "/odf/resource/noobaa.io~v1alpha1~NamespaceStore/create/~new",
       "exact": true,
       "component": {
         "$codeRef": "nssCreate.default"
@@ -196,11 +196,21 @@
   {
     "type": "console.page/route",
     "properties": {
-      "path": "/odf/resource/noobaa.io~v1alpha1~BucketClass/~new",
+      "path": "/odf/resource/noobaa.io~v1alpha1~BucketClass/create/~new",
       "exact": true,
       "component": {
         "$codeRef": "bcCreate.default"
       }
     }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "path": "/odf/system/ocs.openshift.io~v1~StorageCluster/:systemName",
+      "exact": false,
+      "component": {
+        "$codeRef": "odfSystemDashboard.default"
+      }
+    }
   }
 ]

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

@@ -379,6 +379,9 @@
   "Storage Efficiency": "Storage Efficiency",
   "OpenShift Container Storage Overview": "OpenShift Container Storage Overview",
   "Block and File": "Block and File",
+  "BlockPools": "BlockPools",
+  "StorageSystems": "StorageSystems",
+  "StorageSystem details": "StorageSystem details",
   "Storage Classes": "Storage Classes",
   "Pods": "Pods",
   "{{metricType}}": "{{metricType}}",

frontend/packages/ceph-storage-plugin/package.json

@@ -35,7 +35,8 @@
       "resourceListPage": "./src/components/odf-resources/resource-list-page.tsx",
       "bsCreate": "./src/components/create-backingstore-page/create-bs-page.tsx",
       "bcCreate": "./src/components/bucket-class/create-bc.tsx",
-      "nssCreate": "./src/components/namespace-store/create-namespace-store.tsx"
+      "nssCreate": "./src/components/namespace-store/create-namespace-store.tsx",
+      "odfSystemDashboard": "./src/components/dashboards/odf-system-dashboard.tsx"
     }
   }
 }

frontend/packages/ceph-storage-plugin/src/components/dashboards/ocs-system-dashboard.tsx

@@ -46,12 +46,12 @@ const convertToCard = (Card: React.ComponentType): GridDashboardCard => ({ Card
 const isPagePresent = (pages: Page[], page: Page): boolean =>
   pages.some((p) => page.href === p.href);
 
-const BLOCK_FILE = 'block-file';
+export const BLOCK_FILE = 'block-file';
 const OBJECT = 'object';
 
 const sortPages = (a: Page, b: Page): number => {
-  if (a.href === BLOCK_FILE) return -1;
-  if (b.href === OBJECT) return 1;
+  if (a.href === BLOCK_FILE || a.href === `overview/${BLOCK_FILE}`) return -1;
+  if (b.href === OBJECT || a.href === `overview/${OBJECT}`) return 1;
   return 0;
 };
 
@@ -144,19 +144,19 @@ const OCSSystemDashboard: React.FC<DashboardsPageProps> = ({
   const showInternalDashboard = !isIndependent && isCephAvailable;
 
   const internalPage = {
-    href: BLOCK_FILE,
+    href: !isOCS ? `overview/${BLOCK_FILE}` : BLOCK_FILE,
     name: t('ceph-storage-plugin~Block and File'),
-    component: () => <PersistentInternalDashboard />,
+    component: PersistentInternalDashboard,
   };
   const externalPage = {
-    href: BLOCK_FILE,
+    href: !isOCS ? `overview/${BLOCK_FILE}` : BLOCK_FILE,
     name: t('ceph-storage-plugin~Block and File'),
-    component: () => <PersistentExternalDashboard />,
+    component: PersistentExternalDashboard,
   };
   const objectPage = {
-    href: OBJECT,
+    href: !isOCS ? `overview/${OBJECT}` : OBJECT,
     name: t('ceph-storage-plugin~Object'),
-    component: () => <ObjectServiceDashboard />,
+    component: ObjectServiceDashboard,
   };
 
   React.useEffect(() => {
@@ -183,12 +183,12 @@ const OCSSystemDashboard: React.FC<DashboardsPageProps> = ({
   React.useEffect(() => {
     if (!location.pathname.includes(BLOCK_FILE) && !location.pathname.includes(OBJECT)) {
       if (isCephAvailable === true) {
-        history.push(`${match.path}/${BLOCK_FILE}`);
+        history.push(`${match.url}/${BLOCK_FILE}`);
       } else if (isCephAvailable === false && isObjectServiceAvailable) {
-        history.push(`${match.path}/${OBJECT}`);
+        history.push(`${match.url}/${OBJECT}`);
       }
     }
-  }, [isCephAvailable, isObjectServiceAvailable, history, match.path, location.pathname]);
+  }, [isCephAvailable, isObjectServiceAvailable, history, match.url, location.pathname]);
 
   return kindsInFlight && k8sModels.size === 0 ? (
     <LoadingBox />

frontend/packages/ceph-storage-plugin/src/components/dashboards/odf-system-dashboard.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { useLocation, match as Match } from 'react-router-dom';
+import {
+  DashboardsPageProps,
+  mapStateToProps,
+} from '@console/internal/components/dashboard/dashboards-page/dashboards';
+import { Page, HorizontalNav, LoadingBox, PageHeading } from '@console/internal/components/utils';
+import { referenceForModel } from '@console/internal/module/k8s';
+// eslint-disable-next-line import/no-named-default
+import { default as OCSOverview, BLOCK_FILE } from './ocs-system-dashboard';
+import { BlockPoolListPage } from '../block-pool/block-pool-list-page';
+import { CEPH_STORAGE_NAMESPACE } from '../../constants';
+import { CephBlockPoolModel } from '../../models';
+
+type ODFSystemDashboardPageProps = Omit<DashboardsPageProps, 'match'> & {
+  match: Match<{ systemName: string }>;
+};
+
+const ODFSystemDashboard: React.FC<ODFSystemDashboardPageProps> = ({
+  kindsInFlight,
+  k8sModels,
+  ...rest
+}) => {
+  const { t } = useTranslation();
+  const { systemName } = rest.match.params;
+  const pages: Page[] = [
+    {
+      path: 'overview/:dashboard',
+      href: 'overview/block-file',
+      name: t('ceph-storage-plugin~Overview'),
+      component: OCSOverview,
+    },
+    {
+      href: referenceForModel(CephBlockPoolModel),
+      name: t('ceph-storage-plugin~BlockPools'),
+      component: () => <BlockPoolListPage namespace={CEPH_STORAGE_NAMESPACE} />,
+    },
+  ];
+
+  const breadcrumbs = [
+    {
+      name: t('ceph-storage-plugin~StorageSystems'),
+      path: '/odf/systems',
+    },
+    {
+      name: t('ceph-storage-plugin~StorageSystem details'),
+      path: '',
+    },
+  ];
+
+  const title = rest.match.params.systemName;
+
+  const location = useLocation();
+
+  React.useEffect(() => {
+    if (location.pathname.endsWith(systemName)) {
+      rest.history.push(`${location.pathname}/overview/${BLOCK_FILE}`);
+    } else if (location.pathname.endsWith('overview')) {
+      rest.history.push(`${location.pathname}/${BLOCK_FILE}`);
+    }
+  }, [rest.history, location.pathname, systemName]);
+
+  return kindsInFlight && k8sModels.size === 0 ? (
+    <LoadingBox />
+  ) : (
+    <>
+      <PageHeading title={title} breadcrumbs={breadcrumbs} detail />
+      <HorizontalNav match={rest.match} pages={pages} noStatusBox />
+    </>
+  );
+};
+
+export default connect(mapStateToProps)(ODFSystemDashboard);

frontend/packages/ceph-storage-plugin/src/components/odf-resources/resource-list-page.tsx

@@ -132,7 +132,7 @@ type GenericListPageProps = {
 const GenericListPage: React.FC<GenericListPageProps> = (props) => {
   const { resourceKind } = props;
   const createProps = {
-    to: `/odf/resource/${resourceKind}/~new`,
+    to: `/odf/resource/${resourceKind}/create/~new`,
   };
   return (
     <ListPage

frontend/packages/ceph-storage-plugin/src/plugin.ts

@@ -463,7 +463,7 @@ const plugin: Plugin<ConsumedExtensions> = [
       page: {
         // t('ceph-storage-plugin~Backing Store')
         name: '%ceph-storage-plugin~Backing Store%',
-        href: 'resource/noobaa.io~v1alpha1~BucketClass',
+        href: 'resource/noobaa.io~v1alpha1~BackingStore',
       },
       loader: async () =>
         (
@@ -489,7 +489,7 @@ const plugin: Plugin<ConsumedExtensions> = [
           await import(
             './components/odf-resources/resource-list-page' /* webpackChunkName: "odf-system-list" */
           )
-        ).BackingStoreListPage,
+        ).BucketClassListPage,
     },
   },
   // Adding this Extension because dynamic endpoint is not avbl
@@ -508,7 +508,7 @@ const plugin: Plugin<ConsumedExtensions> = [
           await import(
             './components/odf-resources/resource-list-page' /* webpackChunkName: "odf-system-list" */
           )
-        ).BackingStoreListPage,
+        ).NamespaceStoreListPage,
     },
   },
 ];