mgr/dashboard: Fix NFS routing

Fixes https://tracker.ceph.com/issues/65310

The NFS tab in object and File nav uses same route due to which both
gets activated when one of them is clicked.
Hence, this PR separates the routing for Object and File nav.
Object-> NFS: /rgw/nfs
File-> NFS: /cephfs/nfs

Both routes use same NFS List and Form component but under different
routes as mentioned above.

Changes summary
- updated route for File from "/fs" to "/cephfs/<any_other_sub_route>"
  to support both fs and nfs tabs. Since using `/fs` and `/fs/nfs` will
activate both paths and it will be an undesirable user experience.
- `getFsalRouteFromPath` helper function to set the storage backend from
  route.
- removed `stoarge-backend` field from nfs form as now route decides teh
  storage backend
- breadcrumbs redirect to respective navs
- updated e2e tests
- updated unit tests
- changes list page of object-> nfs page to say Bucket instead of Path

Signed-off-by: Afreen <[email protected]>

Author: afreen23

src/pybind/mgr/dashboard/frontend/cypress/e2e/common/urls.po.ts

@@ -42,7 +42,7 @@ export class UrlsCollection extends PageHelper {
     'rgw daemons': { url: '#/rgw/daemon', id: 'cd-rgw-daemon-list' },
 
     // CephFS
-    cephfs: { url: '#/cephfs', id: 'cd-cephfs-list' },
-    'create cephfs': { url: '#/cephfs/create', id: 'cd-cephfs-form' }
+    cephfs: { url: '#/cephfs/fs', id: 'cd-cephfs-list' },
+    'create cephfs': { url: '#/cephfs/fs/create', id: 'cd-cephfs-form' }
   };
 }

src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/10-nfs-exports.e2e-spec.ts

@@ -19,11 +19,11 @@ describe('nfsExport page', () => {
 
   beforeEach(() => {
     cy.login();
-    nfsExport.navigateTo();
   });
 
   describe('breadcrumb test', () => {
     it('should open and show breadcrumb', () => {
+      nfsExport.navigateTo('rgw_index');
       nfsExport.expectBreadcrumbText('NFS');
     });
   });
@@ -43,36 +43,38 @@ describe('nfsExport page', () => {
       buckets.navigateTo('create');
       buckets.create(bucketName, 'dashboard');
 
-      nfsExport.navigateTo();
+      nfsExport.navigateTo('rgw_index');
       nfsExport.existTableCell(rgwPseudo, false);
-      nfsExport.navigateTo('create');
+      nfsExport.navigateTo('rgw_create');
       nfsExport.create(backends[1], squash, client, rgwPseudo, bucketName);
       nfsExport.existTableCell(rgwPseudo);
     });
 
     // @TODO: uncomment this when a CephFS volume can be created through Dashboard.
     // it('should create a nfs-export with CephFS backend', () => {
-    //   nfsExport.navigateTo();
+    //   nfsExport.navigateTo('cephfs_index');
     //   nfsExport.existTableCell(fsPseudo, false);
-    //   nfsExport.navigateTo('create');
+    //   nfsExport.navigateTo('cephfs_create');
     //   nfsExport.create(backends[0], squash, client, fsPseudo);
     //   nfsExport.existTableCell(fsPseudo);
     // });
 
     it('should show Clients', () => {
+      nfsExport.navigateTo('rgw_index');
       nfsExport.clickTab('cd-nfs-details', rgwPseudo, 'Clients (1)');
       cy.get('cd-nfs-details').within(() => {
         nfsExport.getTableCount('total').should('be.gte', 0);
       });
     });
 
     it('should edit an export', () => {
-      nfsExport.editExport(rgwPseudo, editPseudo);
+      nfsExport.editExport(rgwPseudo, editPseudo, 'rgw_index');
 
       nfsExport.existTableCell(editPseudo);
     });
 
     it('should delete exports and bucket', () => {
+      nfsExport.navigateTo('rgw_index');
       nfsExport.delete(editPseudo);
 
       buckets.navigateTo();

src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/nfs/nfs-export.po.ts

@@ -3,21 +3,18 @@ import { PageHelper } from '../../../page-helper.po';
 /* tslint:enable*/
 
 const pages = {
-  index: { url: '#/nfs', id: 'cd-nfs-list' },
-  create: { url: '#/nfs/create', id: 'cd-nfs-form' }
+  cephfs_index: { url: '#cephfs/nfs', id: 'cd-nfs-list' },
+  cephfs_create: { url: '#cephfs/nfs/create', id: 'cd-nfs-form' },
+  rgw_index: { url: '#rgw/nfs', id: 'cd-nfs-list' },
+  rgw_create: { url: '#rgw/nfs/create', id: 'cd-nfs-form' }
 };
 
 export class NFSPageHelper extends PageHelper {
   pages = pages;
-
-  @PageHelper.restrictTo(pages.create.url)
   create(backend: string, squash: string, client: object, pseudo: string, rgwPath?: string) {
     this.selectOption('cluster_id', 'testnfs');
-    // select a storage backend
-    this.selectOption('name', backend);
     if (backend === 'CephFS') {
       this.selectOption('fs_name', 'myfs');
-
       cy.get('#security_label').click({ force: true });
     } else {
       cy.get('input[data-testid=rgw_path]').type(rgwPath);
@@ -38,8 +35,8 @@ export class NFSPageHelper extends PageHelper {
     cy.get('cd-submit-button').click();
   }
 
-  editExport(pseudo: string, editPseudo: string) {
-    this.navigateEdit(pseudo);
+  editExport(pseudo: string, editPseudo: string, url: string) {
+    this.navigateEdit(pseudo, true, true, url);
 
     cy.get('input[name=pseudo]').clear().type(editPseudo);
 

src/pybind/mgr/dashboard/frontend/cypress/e2e/page-helper.po.ts

@@ -52,9 +52,9 @@ export abstract class PageHelper {
   /**
    * Navigates to the edit page
    */
-  navigateEdit(name: string, select = true, breadcrumb = true) {
+  navigateEdit(name: string, select = true, breadcrumb = true, navigateTo: string = null) {
     if (select) {
-      this.navigateTo();
+      this.navigateTo(navigateTo);
       this.getFirstTableCell(name).click();
     }
     cy.contains('Creating...').should('not.exist');

src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts

@@ -370,18 +370,48 @@ const routes: Routes = [
       {
         path: 'cephfs',
         canActivate: [FeatureTogglesGuardService],
-        data: { breadcrumbs: 'File/File Systems' },
         children: [
-          { path: '', component: CephfsListComponent },
           {
-            path: URLVerbs.CREATE,
+            path: 'fs',
+            component: CephfsListComponent,
+            data: { breadcrumbs: 'File/File Systems' }
+          },
+          {
+            path: `fs/${URLVerbs.CREATE}`,
             component: CephfsVolumeFormComponent,
             data: { breadcrumbs: ActionLabels.CREATE }
           },
           {
-            path: `${URLVerbs.EDIT}/:id`,
+            path: `fs/${URLVerbs.EDIT}/:id`,
             component: CephfsVolumeFormComponent,
             data: { breadcrumbs: ActionLabels.EDIT }
+          },
+          {
+            path: 'nfs',
+            canActivateChild: [FeatureTogglesGuardService, ModuleStatusGuardService],
+            data: {
+              moduleStatusGuardConfig: {
+                uiApiPath: 'nfs-ganesha',
+                redirectTo: 'error',
+                section: 'nfs-ganesha',
+                section_info: 'NFS GANESHA',
+                header: 'NFS-Ganesha is not configured'
+              },
+              breadcrumbs: 'File/NFS'
+            },
+            children: [
+              { path: '', component: NfsListComponent },
+              {
+                path: URLVerbs.CREATE,
+                component: NfsFormComponent,
+                data: { breadcrumbs: ActionLabels.CREATE }
+              },
+              {
+                path: `${URLVerbs.EDIT}/:cluster_id/:export_id`,
+                component: NfsFormComponent,
+                data: { breadcrumbs: ActionLabels.EDIT }
+              }
+            ]
           }
         ]
       },
@@ -421,34 +451,6 @@ const routes: Routes = [
             data: { breadcrumbs: ActionLabels.EDIT }
           }
         ]
-      },
-      // NFS
-      {
-        path: 'nfs',
-        canActivateChild: [FeatureTogglesGuardService, ModuleStatusGuardService],
-        data: {
-          moduleStatusGuardConfig: {
-            uiApiPath: 'nfs-ganesha',
-            redirectTo: 'error',
-            section: 'nfs-ganesha',
-            section_info: 'NFS GANESHA',
-            header: 'NFS-Ganesha is not configured'
-          },
-          breadcrumbs: 'NFS'
-        },
-        children: [
-          { path: '', component: NfsListComponent },
-          {
-            path: URLVerbs.CREATE,
-            component: NfsFormComponent,
-            data: { breadcrumbs: ActionLabels.CREATE }
-          },
-          {
-            path: `${URLVerbs.EDIT}/:cluster_id/:export_id`,
-            component: NfsFormComponent,
-            data: { breadcrumbs: ActionLabels.EDIT }
-          }
-        ]
       }
     ]
   },

src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-form/cephfs-form.component.ts

@@ -68,7 +68,7 @@ export class CephfsVolumeFormComponent extends CdForm implements OnInit {
     private route: ActivatedRoute
   ) {
     super();
-    this.editing = this.router.url.startsWith(`/cephfs/${URLVerbs.EDIT}`);
+    this.editing = this.router.url.startsWith(`/cephfs/fs/${URLVerbs.EDIT}`);
     this.action = this.editing ? this.actionLabels.EDIT : this.actionLabels.CREATE;
     this.resource = $localize`File System`;
     this.hosts = {
@@ -176,7 +176,7 @@ export class CephfsVolumeFormComponent extends CdForm implements OnInit {
             this.form.setErrors({ cdSubmitButton: true });
           },
           complete: () => {
-            this.router.navigate([BASE_URL]);
+            this.router.navigate([`${BASE_URL}/fs`]);
           }
         });
     } else {
@@ -210,7 +210,7 @@ export class CephfsVolumeFormComponent extends CdForm implements OnInit {
             self.form.setErrors({ cdSubmitButton: true });
           },
           complete: () => {
-            this.router.navigate([BASE_URL]);
+            this.router.navigate([`${BASE_URL}/fs`]);
           }
         });
     }

src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-list/cephfs-list.component.ts

@@ -27,7 +27,7 @@ import { map, switchMap } from 'rxjs/operators';
 import { HealthService } from '~/app/shared/api/health.service';
 import { CephfsAuthModalComponent } from '~/app/ceph/cephfs/cephfs-auth-modal/cephfs-auth-modal.component';
 
-const BASE_URL = 'cephfs';
+const BASE_URL = 'cephfs/fs';
 
 @Component({
   selector: 'cd-cephfs-list',

src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/models/nfs.fsal.ts

@@ -1,5 +1,9 @@
+export enum SUPPORTED_FSAL {
+  CEPH = 'CEPH',
+  RGW = 'RGW'
+}
 export interface NfsFSAbstractionLayer {
-  value: string;
+  value: SUPPORTED_FSAL;
   descr: string;
   disabled: boolean;
 }