mgr/dashboard: make smb tabs routable

nizamial09 · Pegonzal · commit 36053d1591c8 · 2025-04-02T21:05:25.000+02:00
Fixes: https://tracker.ceph.com/issues/70759 Signed-off-by: Nizamudeen A <nia@redhat.com>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts
@@ -51,11 +51,14 @@ import { MultiClusterComponent } from './ceph/cluster/multi-cluster/multi-cluste
 import { MultiClusterListComponent } from './ceph/cluster/multi-cluster/multi-cluster-list/multi-cluster-list.component';
 import { MultiClusterDetailsComponent } from './ceph/cluster/multi-cluster/multi-cluster-details/multi-cluster-details.component';
 import { SmbClusterFormComponent } from './ceph/smb/smb-cluster-form/smb-cluster-form.component';
-import { SmbTabsComponent } from './ceph/smb/smb-tabs/smb-tabs.component';
 import { SmbShareFormComponent } from './ceph/smb/smb-share-form/smb-share-form.component';
 import { SmbJoinAuthFormComponent } from './ceph/smb/smb-join-auth-form/smb-join-auth-form.component';
 import { SmbUsersgroupsFormComponent } from './ceph/smb/smb-usersgroups-form/smb-usersgroups-form.component';
 import { NfsClusterComponent } from './ceph/nfs/nfs-cluster/nfs-cluster.component';
+import { SmbClusterListComponent } from './ceph/smb/smb-cluster-list/smb-cluster-list.component';
+import { SmbJoinAuthListComponent } from './ceph/smb/smb-join-auth-list/smb-join-auth-list.component';
+import { SmbUsersgroupsListComponent } from './ceph/smb/smb-usersgroups-list/smb-usersgroups-list.component';
+import { SmbOverviewComponent } from './ceph/smb/smb-overview/smb-overview.component';
 
 @Injectable()
 export class PerformanceCounterBreadcrumbsResolver extends BreadcrumbsResolver {
@@ -437,7 +440,7 @@ const routes: Routes = [
           },
           {
             path: 'smb',
-            canActivateChild: [ModuleStatusGuardService],
+            canActivate: [ModuleStatusGuardService],
             data: {
               moduleStatusGuardConfig: {
                 uiApiPath: 'smb',
@@ -449,41 +452,67 @@ const routes: Routes = [
               breadcrumbs: 'File/SMB'
             },
             children: [
-              { path: '', component: SmbTabsComponent },
+              { path: '', component: SmbClusterListComponent },
               {
-                path: `${URLVerbs.CREATE}`,
-                component: SmbClusterFormComponent,
-                data: { breadcrumbs: ActionLabels.CREATE }
-              },
-              {
-                path: `share/${URLVerbs.CREATE}/:clusterId`,
-                component: SmbShareFormComponent,
-                data: { breadcrumbs: ActionLabels.CREATE }
+                path: 'clusters',
+                data: { breadcrumbs: 'Clusters' },
+                children: [
+                  { path: '', component: SmbClusterListComponent },
+                  {
+                    path: `${URLVerbs.CREATE}`,
+                    component: SmbClusterFormComponent,
+                    data: { breadcrumbs: ActionLabels.CREATE }
+                  },
+                  {
+                    path: `${URLVerbs.EDIT}/:cluster_id`,
+                    component: SmbClusterFormComponent,
+                    data: { breadcrumbs: ActionLabels.EDIT }
+                  }
+                ]
               },
               {
-                path: `${URLVerbs.EDIT}/:cluster_id`,
-                component: SmbClusterFormComponent,
-                data: { breadcrumbs: ActionLabels.EDIT }
+                path: 'active-directory',
+                data: { breadcrumbs: 'Active Directory' },
+                children: [
+                  { path: '', component: SmbJoinAuthListComponent },
+                  {
+                    path: `${URLVerbs.CREATE}`,
+                    component: SmbJoinAuthFormComponent,
+                    data: { breadcrumbs: ActionLabels.CREATE }
+                  },
+                  {
+                    path: `${URLVerbs.EDIT}/:authId`,
+                    component: SmbJoinAuthFormComponent,
+                    data: { breadcrumbs: ActionLabels.EDIT }
+                  }
+                ]
               },
               {
-                path: `ad/${URLVerbs.CREATE}`,
-                component: SmbJoinAuthFormComponent,
-                data: { breadcrumbs: ActionLabels.CREATE }
+                path: 'standalone',
+                data: { breadcrumbs: 'Standalone' },
+                children: [
+                  { path: '', component: SmbUsersgroupsListComponent },
+                  {
+                    path: `${URLVerbs.CREATE}`,
+                    component: SmbUsersgroupsFormComponent,
+                    data: { breadcrumbs: ActionLabels.CREATE }
+                  },
+                  {
+                    path: `${URLVerbs.EDIT}/:usersGroupsId`,
+                    component: SmbUsersgroupsFormComponent
+                  }
+                ]
               },
               {
-                path: `ad/${URLVerbs.EDIT}/:authId`,
-                component: SmbJoinAuthFormComponent,
-                data: { breadcrumbs: ActionLabels.EDIT }
+                path: 'overview',
+                component: SmbOverviewComponent,
+                data: { breadcrumbs: 'Overview' }
               },
               {
-                path: `standalone/${URLVerbs.CREATE}`,
-                component: SmbUsersgroupsFormComponent,
+                path: `share/${URLVerbs.CREATE}/:clusterId`,
+                component: SmbShareFormComponent,
                 data: { breadcrumbs: ActionLabels.CREATE }
               },
-              {
-                path: `standalone/${URLVerbs.EDIT}/:usersGroupsId`,
-                component: SmbUsersgroupsFormComponent
-              },
               {
                 path: `share/${URLVerbs.EDIT}/:clusterId/:shareId`,
                 component: SmbShareFormComponent,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-list/smb-cluster-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-list/smb-cluster-list.component.html
@@ -1,3 +1,5 @@
+<cd-smb-tabs></cd-smb-tabs>
+
 <ng-container *ngIf="smbClusters$ | async as smbClusters">
   <cd-table
     headerTitle="Clusters"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-list/smb-cluster-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-cluster-list/smb-cluster-list.component.ts
@@ -24,7 +24,7 @@ import { DeleteConfirmationModalComponent } from '~/app/shared/components/delete
 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
 import { FinishedTask } from '~/app/shared/models/finished-task';
 
-const BASE_URL = 'cephfs/smb';
+const BASE_URL = 'cephfs/smb/clusters';
 @Component({
   selector: 'cd-smb-cluster-list',
   templateUrl: './smb-cluster-list.component.html',
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-join-auth-list/smb-join-auth-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-join-auth-list/smb-join-auth-list.component.html
@@ -1,3 +1,5 @@
+<cd-smb-tabs></cd-smb-tabs>
+
 <cd-table
   headerTitle="Active directory access resources"
   headerDescription="Logical management units for authorization on active directory (AD) servers"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-join-auth-list/smb-join-auth-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-join-auth-list/smb-join-auth-list.component.ts
@@ -18,7 +18,7 @@ import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
 import { FinishedTask } from '~/app/shared/models/finished-task';
 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
 
-export const JOINAUTH_URL = '/cephfs/smb/ad';
+export const JOINAUTH_URL = '/cephfs/smb/active-directory';
 
 @Component({
   selector: 'cd-smb-join-auth-list',
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-overview/smb-overview.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-overview/smb-overview.component.html
@@ -1,3 +1,5 @@
+<cd-smb-tabs></cd-smb-tabs>
+
 <cd-grafana
   i18n-title
   title="SMB overview"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-tabs/smb-tabs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-tabs/smb-tabs.component.html
@@ -5,42 +5,26 @@
   [cacheActive]="false">
   <cds-tab
     heading="Clusters"
-    [tabContent]="clusters"
     i18n-heading
+    [active]="activeTab === Tabs.clusters"
     (selected)="onSelected(Tabs.clusters)">
   </cds-tab>
   <cds-tab
     heading="Active Directory"
-    [tabContent]="joinAuth"
     i18n-heading
-    (selected)="onSelected(Tabs.joinAuths)">
+    [active]="activeTab === Tabs.activeDirectory"
+    (selected)="onSelected(Tabs.activeDirectory)">
   </cds-tab>
   <cds-tab
     heading="Standalone"
-    [tabContent]="usersgroups"
     i18n-heading
-    (selected)="onSelected(Tabs.usersgroups)">
+    [active]="activeTab === Tabs.standalone"
+    (selected)="onSelected(Tabs.standalone)">
   </cds-tab>
   <cds-tab
     heading="Overview"
-    [tabContent]="overview"
     i18n-heading
+    [active]="activeTab === Tabs.overview"
     (selected)="onSelected(Tabs.overview)">
   </cds-tab>
 </cds-tabs>
-
-<ng-template #clusters>
-  <cd-smb-cluster-list></cd-smb-cluster-list>
-</ng-template>
-
-<ng-template #joinAuth>
-  <cd-smb-join-auth-list></cd-smb-join-auth-list>
-</ng-template>
-
-<ng-template #usersgroups>
-  <cd-smb-users-list></cd-smb-users-list>
-</ng-template>
-
-<ng-template #overview>
-  <cd-smb-overview></cd-smb-overview>
-</ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-tabs/smb-tabs.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-tabs/smb-tabs.component.ts
@@ -1,22 +1,32 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 enum TABS {
-  'clusters',
-  'joinAuths',
-  'usersgroups',
-  'overview'
+  clusters = 'clusters',
+  activeDirectory = 'active-directory',
+  standalone = 'standalone',
+  overview = 'overview'
 }
 
 @Component({
   selector: 'cd-smb-tabs',
   templateUrl: './smb-tabs.component.html',
   styleUrls: ['./smb-tabs.component.scss']
 })
-export class SmbTabsComponent {
+export class SmbTabsComponent implements OnInit {
   selectedTab: TABS;
+  activeTab: TABS = TABS.clusters;
+
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {
+    const currentPath = this.router.url;
+    this.activeTab = Object.values(TABS).find((tab) => currentPath.includes(tab)) || TABS.clusters;
+  }
 
   onSelected(tab: TABS) {
     this.selectedTab = tab;
+    this.router.navigate([`/cephfs/smb/${tab}`]);
   }
 
   public get Tabs(): typeof TABS {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-usersgroups-list/smb-usersgroups-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/smb/smb-usersgroups-list/smb-usersgroups-list.component.html
@@ -1,3 +1,5 @@
+<cd-smb-tabs></cd-smb-tabs>
+
 <ng-container *ngIf="usersGroups$ | async as usersGroups">
   <cd-table
     headerTitle="Standalone access resoruces"

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+<cd-smb-tabs></cd-smb-tabs>`
	`2`	`+`
`1`	`3`	`<ng-container *ngIf="smbClusters$ \| async as smbClusters">`
`2`	`4`	`<cd-table`
`3`	`5`	`headerTitle="Clusters"`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+<cd-smb-tabs></cd-smb-tabs>`
	`2`	`+`
`1`	`3`	`<cd-grafana`
`2`	`4`	`i18n-title`
`3`	`5`	`title="SMB overview"`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+<cd-smb-tabs></cd-smb-tabs>`
	`2`	`+`
`1`	`3`	`<ng-container *ngIf="usersGroups$ \| async as usersGroups">`
`2`	`4`	`<cd-table`
`3`	`5`	`headerTitle="Standalone access resoruces"`