mgr/dashboard: make smb tabs routable

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
index 82e0c9c98724ebac795b6160b8acba263ec8b7a6..59c576330d94cf5b0c1173714d1f7aea479d415f 100644 (file)
--- 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
index 3417d30adb62b57a343e66c9e594c12c3adc5f28..7c9f591fb38a9ce089ed8f8dbf98cf6dd4989259 100644 (file)
--- 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
index d7a6dfcc687b065e44cb6eba67f17f2ba13edf48..2cc53a8241d3c2c8930d319bbb1051925280f9bc 100644 (file)
--- 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
index 3f3da5e1e09eeda06c6c40458ebb4b55e7523361..ad6f0e46179a6636a4c2506758cdef029499c893 100644 (file)
--- 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
index 6cc47f165a8593d4883e02bc6dda7190c727f956..7ed04f0c738db61ebbf97af05f82849fee76c653 100644 (file)
--- 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
index df5d7665d5a36b0fc15badfd019ce5faa2966719..e2212cb576756b00d0bde850d9a23aad541206d7 100644 (file)
--- 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
index 03f2fbce5f806c365599388d5f0cc1a76a405789..6031de18adfc2866c128b720347706c20d96bb39 100644 (file)
--- 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
index 3d7584007a40252bb2c9a3522b62064eb2041b7d..fb0be8fff30cccfd9ebd53ea18374f931119ea07 100644 (file)
--- 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,10 +1,11 @@
-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({
@@ -12,11 +13,20 @@ enum 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
index 9d5ab9d98fe6dd285dad2efbb47cc6fa945ec72d..ea5ae0a958b16c8a1c98029dad0424bb238a2d91 100644 (file)
--- 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"