Fixing breadcrumbs link issue for block pool

Signed-off-by: Gowtham Shanmugasundaram <gshanmug@redhat.com>
openshift · Aug 17, 2021 · bce490f · bce490f
1 parent 5076e7a
commit bce490f
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 52 deletions.
diff --git a/frontend/packages/ceph-storage-plugin/console-extensions.json b/frontend/packages/ceph-storage-plugin/console-extensions.json
@@ -122,25 +122,11 @@
       "disallowed": ["OCS"]
     }
   },
-  {
-    "type": "console.page/resource/list",
-    "properties": {
-      "model": {
-        "group": "ceph.rook.io",
-        "version": "v1",
-        "kind": "CephBlockPool"
-      },
-      "component": { "$codeRef": "blockPoolListPage.BlockPoolListPage" }
-    },
-    "flags": {
-      "required": ["OCS"]
-    }
-  },
   {
     "type": "console.page/route",
     "properties": {
       "exact": true,
-      "path": ["/k8s/ns/:ns/ceph.rook.io~v1~CephBlockPool/~new"],
+      "path": "/odf/system/ocs.openshift.io~v1~StorageCluster/:systemName/ceph.rook.io~v1~CephBlockPool/create/~new",
       "component": {
         "$codeRef": "blockPoolCreatePage.default"
       }
@@ -150,14 +136,13 @@
     }
   },
   {
-    "type": "console.page/resource/details",
+    "type": "console.page/route",
     "properties": {
-      "model": {
-        "group": "ceph.rook.io",
-        "version": "v1",
-        "kind": "CephBlockPool"
-      },
-      "component": { "$codeRef": "blockPoolDetailsPage.default" }
+      "exact": false,
+      "path": "/odf/system/ocs.openshift.io~v1~StorageCluster/:systemName/ceph.rook.io~v1~CephBlockPool/:poolName",
+      "component": {
+        "$codeRef": "blockPoolDetailsPage.default"
+      }
     },
     "flags": {
       "required": ["OCS"]

diff --git a/frontend/packages/ceph-storage-plugin/locales/en/ceph-storage-plugin.json b/frontend/packages/ceph-storage-plugin/locales/en/ceph-storage-plugin.json
@@ -9,6 +9,8 @@
   "Create new claim": "Create new claim",
   "Create": "Create",
   "Cancel": "Cancel",
+  "StorageSystems": "StorageSystems",
+  "StorageSystem details": "StorageSystem details",
   "Enabled": "Enabled",
   "Disabled": "Disabled",
   "Last synced": "Last synced",
@@ -380,8 +382,6 @@
   "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}}",

diff --git a/frontend/packages/ceph-storage-plugin/src/components/block-pool/block-pool-details-page.tsx b/frontend/packages/ceph-storage-plugin/src/components/block-pool/block-pool-details-page.tsx
@@ -1,15 +1,33 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import { RouteComponentProps } from 'react-router';
+import { useLocation } from 'react-router-dom';
 
+import { referenceForModel } from '@console/internal/module/k8s/k8s';
 import { DetailsPage } from '@console/internal/components/factory';
-import { navFactory } from '@console/internal/components/utils';
+import { navFactory, ResourceIcon } from '@console/internal/components/utils';
 
 import { menuActionCreator } from './block-pool-menu-action';
 import { BlockPoolDashboard } from '../dashboards/block-pool/block-pool-dashboard';
+import { CEPH_STORAGE_NAMESPACE } from '../../constants';
+import { CephBlockPoolModel } from '../../models';
 
-const BlockPoolDetailsPage: React.FC<React.ComponentProps<typeof DetailsPage>> = (props) => {
+const BlockPoolIcon: React.FC<BlockPoolIconProps> = ({ name, kind }) => {
+  return (
+    <span>
+      <ResourceIcon kind={kind} />
+      {name}
+    </span>
+  );
+};
+
+const BlockPoolDetailsPage: React.FC<BlockPoolDetailsPagePros> = ({ match, ...props }) => {
+  const { poolName } = match.params;
   const { editYaml } = navFactory;
   const { t } = useTranslation();
+  const location = useLocation();
+  const detailsPagePath: string = location.pathname;
+  const kind: string = referenceForModel(CephBlockPoolModel);
 
   // Overview page and YAML page
   const pagesFor = React.useCallback(
@@ -24,14 +42,43 @@ const BlockPoolDetailsPage: React.FC<React.ComponentProps<typeof DetailsPage>> =
     [editYaml, t],
   );
 
+  const breadcrumbs = () => [
+    {
+      name: t('ceph-storage-plugin~StorageSystems'),
+      path: '/odf/systems',
+    },
+    {
+      name: t('ceph-storage-plugin~StorageSystem details'),
+      path: detailsPagePath.split(`/${poolName}`)[0],
+    },
+    {
+      name: poolName,
+      path: '',
+    },
+  ];
+
   return (
     <DetailsPage
       {...props}
-      pagesFor={pagesFor}
+      match={match}
+      name={poolName}
+      namespace={CEPH_STORAGE_NAMESPACE}
+      kind={kind}
+      kindObj={CephBlockPoolModel}
       menuActions={menuActionCreator}
+      pagesFor={pagesFor}
       customData={{ tFunction: t }}
+      breadcrumbsFor={breadcrumbs}
+      icon={() => <BlockPoolIcon name={poolName} kind={kind} />}
     />
   );
 };
 
+type BlockPoolIconProps = {
+  name: string;
+  kind: string;
+};
+
+type BlockPoolDetailsPagePros = RouteComponentProps<{ poolName: string }>;
+
 export default BlockPoolDetailsPage;
diff --git a/frontend/packages/ceph-storage-plugin/src/components/block-pool/block-pool-list-page.tsx b/frontend/packages/ceph-storage-plugin/src/components/block-pool/block-pool-list-page.tsx
@@ -1,7 +1,14 @@
 import * as React from 'react';
 import { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
+import { useLocation, Link } from 'react-router-dom';
 
+import {
+  ResourceIcon,
+  ResourceKebab,
+  Kebab,
+  humanizeBinaryBytes,
+} from '@console/internal/components/utils';
 import { useDeepCompareMemoize, StatusIconAndText, Status } from '@console/shared';
 import { sortable, wrappable } from '@patternfly/react-table';
 import { Tooltip } from '@patternfly/react-core';
@@ -14,13 +21,7 @@ import {
   TableRow,
   TableData,
 } from '@console/internal/components/factory';
-import {
-  ResourceLink,
-  ResourceKebab,
-  Kebab,
-  resourcePathFromModel,
-  humanizeBinaryBytes,
-} from '@console/internal/components/utils';
+
 import { usePrometheusPoll } from '@console/internal/components/graphs/prometheus-poll-hook';
 import { PrometheusEndpoint } from '@console/internal/components/graphs/helpers';
 import { StorageClassModel } from '@console/internal/models';
@@ -112,7 +113,7 @@ const BlockPoolTableRow: React.FC<RowFunctionArgs> = ({ obj, index, key, style,
   const { t } = useTranslation();
   const blockPoolColumnInfo = BlockPoolColumnInfo(t);
   const props: BlockPoolListRowProps = customData;
-  const { name, namespace } = obj.metadata;
+  const { name } = obj.metadata;
   const replica: string = obj.spec?.replicated?.size;
   const mirroringStatus: boolean = obj.spec?.mirroring?.enabled;
   const mirroringImageHealth: string = mirroringStatus
@@ -131,6 +132,9 @@ const BlockPoolTableRow: React.FC<RowFunctionArgs> = ({ obj, index, key, style,
     [name, props],
   );
 
+  // Details page link
+  const to = `${props.listPagePath}/${name}`;
+
   // Metrics
   // {poolRawCapacity: {"pool-1" : size_bytes, "pool-2" : size_bytes, ...}}
   const rawCapacity: string = props.poolRawCapacity[name]
@@ -146,7 +150,10 @@ const BlockPoolTableRow: React.FC<RowFunctionArgs> = ({ obj, index, key, style,
         className={blockPoolColumnInfo.name.classes}
         columnID={blockPoolColumnInfo.name.id}
       >
-        <ResourceLink kind={referenceFor(obj)} name={name} namespace={namespace} />
+        <ResourceIcon kind={referenceForModel(CephBlockPoolModel)} />
+        <Link to={to} className="co-resource-item__resource-name" data-test={name}>
+          {name}
+        </Link>
       </TableData>
       <TableData
         className={blockPoolColumnInfo.status.classes}
@@ -262,19 +269,18 @@ const BlockPoolList: React.FC<BlockPoolListProps> = (props) => {
         cephCluster: cephClusters?.[0],
         poolRawCapacity,
         poolCompressionSavings,
+        listPagePath: props.customData,
       }}
       virtualize
     />
   );
 };
 
 export const BlockPoolListPage: React.FC<BlockListPoolPageProps> = (props) => {
+  const location = useLocation();
+  const listPagePath: string = location.pathname;
   const createProps = {
-    to: `${resourcePathFromModel(
-      CephBlockPoolModel,
-      null,
-      props.namespace ?? CEPH_STORAGE_NAMESPACE,
-    )}/~new`,
+    to: `${listPagePath}/create/~new`,
   };
   return (
     <ListPage
@@ -284,6 +290,7 @@ export const BlockPoolListPage: React.FC<BlockListPoolPageProps> = (props) => {
       createProps={createProps}
       kind={referenceForModel(CephBlockPoolModel)}
       ListComponent={BlockPoolList}
+      customData={listPagePath}
     />
   );
 };
@@ -297,10 +304,12 @@ type BlockPoolListRowProps = {
   storageClasses: OcsStorageClassKind[];
   poolRawCapacity: PoolMetrics;
   poolCompressionSavings: PoolMetrics;
+  listPagePath: string;
 };
 
 type BlockPoolListProps = {
   data: StoragePoolKind[];
+  customData: string;
 };
 
 type BlockListPoolPageProps = {

diff --git a/frontend/packages/ceph-storage-plugin/src/components/block-pool/create-block-pool.tsx b/frontend/packages/ceph-storage-plugin/src/components/block-pool/create-block-pool.tsx
@@ -28,10 +28,7 @@ import { POOL_STATE } from '../../constants/storage-pool-const';
 import './create-block-pool.scss';
 
 const CreateBlockPool: React.FC<CreateBlockPoolProps> = ({ match }) => {
-  const {
-    params: { appName },
-    url,
-  } = match;
+  const { params, url } = match;
   const { t } = useTranslation();
 
   const [state, dispatch] = React.useReducer(blockPoolReducer, blockPoolInitialState);
@@ -41,8 +38,7 @@ const CreateBlockPool: React.FC<CreateBlockPoolProps> = ({ match }) => {
 
   const cephCluster: CephClusterKind = useDeepCompareMemoize(cephClusters[0], true);
 
-  const blockPoolPageUrl = url.replace('/~new', '');
-  const pathName = appName || 'BlockPools';
+  const blockPoolPageUrl = url.replace('/create/~new', '');
 
   const onClose = () => {
     history.goBack();
@@ -102,7 +98,7 @@ const CreateBlockPool: React.FC<CreateBlockPoolProps> = ({ match }) => {
         <BreadCrumbs
           breadcrumbs={[
             {
-              name: pathName.startsWith('ocs-operator') ? 'Openshift Container Storage' : pathName,
+              name: params?.appName ? 'Openshift Container Storage' : 'Openshift Data Foundation',
               path: url.replace('/~new', ''),
             },
             {
@@ -146,7 +142,7 @@ const CreateBlockPool: React.FC<CreateBlockPoolProps> = ({ match }) => {
 };
 
 type CreateBlockPoolProps = {
-  match: RouteMatch<{ ns: string; appName: string }>;
+  match: RouteMatch<{ appName: string; systemName: string }>;
 };
 
 export default CreateBlockPool;
diff --git a/frontend/packages/ceph-storage-plugin/src/utils/block-pool.tsx b/frontend/packages/ceph-storage-plugin/src/utils/block-pool.tsx
@@ -12,8 +12,8 @@ import {
 } from '@patternfly/react-icons';
 
 import { StoragePoolKind, OcsStorageClassKind } from '../types';
-import { CephBlockPoolModel } from '../models';
-import { CEPH_STORAGE_NAMESPACE, OCS_INTERNAL_CR_NAME } from '../constants/index';
+import { CephBlockPoolModel, OCSServiceModel } from '../models';
+import { CEPH_STORAGE_NAMESPACE } from '../constants/index';
 import { COMPRESSION_ON, ROOK_MODEL, POOL_PROGRESS } from '../constants/storage-pool-const';
 
 export const LoadingComponent: React.FC = () => {
@@ -208,7 +208,7 @@ export const FooterPrimaryActions = (t: TFunction) => ({
 
 export const isDefaultPool = (blockPoolConfig: StoragePoolKind): boolean =>
   !!blockPoolConfig?.metadata.ownerReferences?.find(
-    (ownerReference) => ownerReference.name === OCS_INTERNAL_CR_NAME,
+    (ownerReference) => ownerReference.kind === OCSServiceModel.kind,
   );
 
 export const BlockPoolColumnInfo = (t: TFunction) => ({