From 2a527796725ac787cf96ff2a35de05dd3feefc76 Mon Sep 17 00:00:00 2001
From: Volker Theile <vtheile@suse.com>
Date: Tue, 30 Jun 2020 11:26:22 +0200
Subject: [PATCH] mgr/dashboard: stay on active tab

* Remember the selected tab and restore the state on tabset init.
* Remove tab headers where only one tab is shown.

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

Signed-off-by: Volker Theile <vtheile@suse.com>
---
 .../cluster/configuration.e2e-spec.ts         |   5 +-
 .../cypress/integration/page-helper.po.ts     |   8 +-
 .../image-list/image-list.component.html      |   9 +-
 .../rbd-details/rbd-details.component.html    |   9 +-
 .../cephfs-tabs/cephfs-tabs.component.html    |  11 +-
 .../configuration-details.component.html      | 218 +++++++-------
 .../configuration-details.component.spec.ts   |   4 +-
 .../host-details/host-details.component.html  |  13 +-
 .../app/ceph/cluster/logs/logs.component.html |   7 +-
 .../mgr-module-details.component.html         |  16 +-
 .../mgr-module-details.component.spec.ts      |   4 +-
 .../osd-details/osd-details.component.html    |  17 +-
 .../service-details.component.html            |  16 +-
 .../service-details.component.spec.ts         |  23 +-
 .../nfs-details/nfs-details.component.html    |   7 +-
 .../pool-details/pool-details.component.html  |  11 +-
 .../rgw-bucket-details.component.html         | 268 +++++++++---------
 .../rgw-bucket-details.component.spec.ts      |   4 +-
 .../rgw-daemon-details.component.html         |   9 +-
 .../rgw-user-details.component.html           |   7 +-
 .../role-details/role-details.component.html  |  30 +-
 .../shared/directives/directives.module.ts    |   7 +-
 .../directives/stateful-tab.directive.spec.ts |  29 ++
 .../directives/stateful-tab.directive.ts      |  31 ++
 24 files changed, 376 insertions(+), 387 deletions(-)
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/directives/stateful-tab.directive.spec.ts
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/directives/stateful-tab.directive.ts

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/configuration.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/configuration.e2e-spec.ts
index fda568206752..33b3e357a68d 100644
--- a/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/configuration.e2e-spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/configuration.e2e-spec.ts
@@ -23,10 +23,9 @@ describe('Configuration page', () => {
       configuration.getTableSelectedCount().should('eq', 1);
     });
 
-    it('should check that details table opens and tab is correct', () => {
+    it('should check that details table opens (w/o tab header)', () => {
       configuration.getStatusTables().should('be.visible');
-      configuration.getTabsCount().should('eq', 1);
-      configuration.getTabText(0).should('eq', 'Details');
+      configuration.getTabs().should('not.exist');
     });
   });
 
diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/page-helper.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/page-helper.po.ts
index 44532b666781..b1a2fdfda377 100644
--- a/src/pybind/mgr/dashboard/frontend/cypress/integration/page-helper.po.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/page-helper.po.ts
@@ -69,12 +69,16 @@ export abstract class PageHelper {
     cy.get('.breadcrumb-item.active').should('have.text', text);
   }
 
+  getTabs() {
+    return cy.get('.nav.nav-tabs li');
+  }
+
   getTabText(index: number) {
-    return cy.get('.nav.nav-tabs li').its(index).text();
+    return this.getTabs().its(index).text();
   }
 
   getTabsCount(): any {
-    return cy.get('.nav.nav-tabs li').its('length');
+    return this.getTabs().its('length');
   }
 
   /**
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html
index 584a09a9ad71..ee2f3d0421b3 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/image-list/image-list.component.html
@@ -1,7 +1,8 @@
 <ul ngbNav
     #nav="ngbNav"
-    class="nav-tabs">
-  <li ngbNavItem>
+    class="nav-tabs"
+    cdStatefulTab="image-list">
+  <li ngbNavItem="issues">
     <a ngbNavLink
        i18n>Issues</a>
     <ng-template ngbNavContent>
@@ -13,7 +14,7 @@
       </cd-table>
     </ng-template>
   </li>
-  <li ngbNavItem>
+  <li ngbNavItem="syncing">
     <a ngbNavLink
        i18n>Syncing</a>
     <ng-template ngbNavContent>
@@ -25,7 +26,7 @@
       </cd-table>
     </ng-template>
   </li>
-  <li ngbNavItem>
+  <li ngbNavItem="ready">
     <a ngbNavLink
        i18n>Ready</a>
     <ng-template ngbNavContent>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.html
index 1288b858a72f..583ba9669230 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-details/rbd-details.component.html
@@ -5,8 +5,9 @@
 <ng-container *ngIf="selection">
   <ul ngbNav
       #nav="ngbNav"
-      class="nav-tabs">
-    <li ngbNavItem>
+      class="nav-tabs"
+      cdStatefulTab="rbd-details">
+    <li ngbNavItem="details">
       <a ngbNavLink
          i18n>Details</a>
       <ng-template ngbNavContent>
@@ -124,7 +125,7 @@
         </table>
       </ng-template>
     </li>
-    <li ngbNavItem>
+    <li ngbNavItem="snapshots">
       <a ngbNavLink
          i18n>Snapshots</a>
       <ng-template ngbNavContent>
@@ -135,7 +136,7 @@
                               [rbdName]="selection.name"></cd-rbd-snapshot-list>
       </ng-template>
     </li>
-    <li ngbNavItem>
+    <li ngbNavItem="configuration">
       <a ngbNavLink
          i18n>Configuration</a>
       <ng-template ngbNavContent>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html
index cc1f8226ed73..7a222a1000e3 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-tabs/cephfs-tabs.component.html
@@ -2,8 +2,9 @@
   <ul ngbNav
       #nav="ngbNav"
       (navChange)="softRefresh()"
-      class="nav-tabs">
-    <li ngbNavItem>
+      class="nav-tabs"
+      cdStatefulTab="cephfs-tabs">
+    <li ngbNavItem="details">
       <a ngbNavLink
          i18n>Details</a>
       <ng-template ngbNavContent>
@@ -11,7 +12,7 @@
         </cd-cephfs-detail>
       </ng-template>
     </li>
-    <li ngbNavItem>
+    <li ngbNavItem="clients">
       <a ngbNavLink>
         <ng-container i18n>Clients</ng-container>
         <span class="badge badge-pill badge-tab ml-1">{{ clients.data.length }}</span>
@@ -23,14 +24,14 @@
         </cd-cephfs-clients>
       </ng-template>
     </li>
-    <li ngbNavItem>
+    <li ngbNavItem="directories">
       <a ngbNavLink
          i18n>Directories</a>
       <ng-template ngbNavContent>
         <cd-cephfs-directories [id]="id"></cd-cephfs-directories>
       </ng-template>
     </li>
-    <li ngbNavItem>
+    <li ngbNavItem="performance-details">
       <a ngbNavLink
          i18n>Performance Details</a>
       <ng-template ngbNavContent>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.html
index 93c375d70d61..8debf9dc66bc 100755
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.html
@@ -1,117 +1,105 @@
 <ng-container *ngIf="selection">
-  <ul ngbNav
-      #nav="ngbNav"
-      class="nav-tabs">
-    <li ngbNavItem>
-      <a ngbNavLink
-         i18n>Details</a>
-      <ng-template ngbNavContent>
-        <table class="table table-striped table-bordered">
-          <tbody>
-            <tr>
-              <td i18n
-                  class="bold w-25">Name</td>
-              <td class="w-75">{{ selection.name }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Description</td>
-              <td>{{ selection.desc }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Long description</td>
-              <td>{{ selection.long_desc }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Current values</td>
-              <td>
-                <span *ngFor="let conf of selection.value; last as isLast">
-                  {{ conf.section }}: {{ conf.value }}{{ !isLast ? "," : "" }}<br />
-                </span>
-              </td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Default</td>
-              <td>{{ selection.default }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Daemon default</td>
-              <td>{{ selection.daemon_default }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Type</td>
-              <td>{{ selection.type }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Min</td>
-              <td>{{ selection.min }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Max</td>
-              <td>{{ selection.max }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Flags</td>
-              <td>
-                <span *ngFor="let flag of selection.flags">
-                  <span title="{{ flags[flag] }}">
-                    <span class="badge badge-dark mr-2">{{ flag | uppercase }}</span>
-                  </span>
-                </span>
-              </td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Services</td>
-              <td>
-                <span *ngFor="let service of selection.services">
-                  <span class="badge badge-dark mr-2">{{ service }}</span>
-                </span>
-              </td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Source</td>
-              <td>{{ selection.source }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Level</td>
-              <td>{{ selection.level }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Can be updated at runtime (editable)</td>
-              <td>{{ selection.can_update_at_runtime | booleanText }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Tags</td>
-              <td>{{ selection.tags }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Enum values</td>
-              <td>{{ selection.enum_values }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">See also</td>
-              <td>{{ selection.see_also }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </ng-template>
-    </li>
-  </ul>
-
-  <div [ngbNavOutlet]="nav"></div>
+  <table class="table table-striped table-bordered">
+    <tbody>
+      <tr>
+        <td i18n
+            class="bold w-25">Name</td>
+        <td class="w-75">{{ selection.name }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Description</td>
+        <td>{{ selection.desc }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Long description</td>
+        <td>{{ selection.long_desc }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Current values</td>
+        <td>
+          <span *ngFor="let conf of selection.value; last as isLast">
+            {{ conf.section }}: {{ conf.value }}{{ !isLast ? "," : "" }}<br />
+          </span>
+        </td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Default</td>
+        <td>{{ selection.default }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Daemon default</td>
+        <td>{{ selection.daemon_default }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Type</td>
+        <td>{{ selection.type }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Min</td>
+        <td>{{ selection.min }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Max</td>
+        <td>{{ selection.max }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Flags</td>
+        <td>
+          <span *ngFor="let flag of selection.flags">
+            <span title="{{ flags[flag] }}">
+              <span class="badge badge-dark mr-2">{{ flag | uppercase }}</span>
+            </span>
+          </span>
+        </td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Services</td>
+        <td>
+          <span *ngFor="let service of selection.services">
+            <span class="badge badge-dark mr-2">{{ service }}</span>
+          </span>
+        </td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Source</td>
+        <td>{{ selection.source }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Level</td>
+        <td>{{ selection.level }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Can be updated at runtime (editable)</td>
+        <td>{{ selection.can_update_at_runtime | booleanText }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Tags</td>
+        <td>{{ selection.tags }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Enum values</td>
+        <td>{{ selection.enum_values }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">See also</td>
+        <td>{{ selection.see_also }}</td>
+      </tr>
+    </tbody>
+  </table>
 </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.spec.ts
index f94224736a9c..40b05d829a4e 100755
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.spec.ts
@@ -1,7 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
-
 import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
 import { DataTableModule } from '../../../../shared/datatable/datatable.module';
 import { SharedModule } from '../../../../shared/shared.module';
@@ -13,7 +11,7 @@ describe('ConfigurationDetailsComponent', () => {
 
   configureTestBed({
     declarations: [ConfigurationDetailsComponent],
-    imports: [DataTableModule, SharedModule, NgbNavModule],
+    imports: [DataTableModule, SharedModule],
     providers: [i18nProviders]
   });
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html
index 6c71d59b93ef..fa4ce2f26e8f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html
@@ -1,15 +1,16 @@
 <ng-container *ngIf="selection">
   <ul ngbNav
       #nav="ngbNav"
-      class="nav-tabs">
-    <li ngbNavItem>
+      class="nav-tabs"
+      cdStatefulTab="host-details">
+    <li ngbNavItem="devices">
       <a ngbNavLink
          i18n>Devices</a>
       <ng-template ngbNavContent>
         <cd-device-list [hostname]="selection['hostname']"></cd-device-list>
       </ng-template>
     </li>
-    <li ngbNavItem
+    <li ngbNavItem="inventory"
         *ngIf="permissions.hosts.read">
       <a ngbNavLink
          i18n>Inventory</a>
@@ -17,7 +18,7 @@
         <cd-inventory [hostname]="selectedHostname"></cd-inventory>
       </ng-template>
     </li>
-    <li ngbNavItem
+    <li ngbNavItem="daemons"
         *ngIf="permissions.hosts.read">
       <a ngbNavLink
          i18n>Daemons</a>
@@ -26,7 +27,7 @@
         </cd-service-daemon-list>
       </ng-template>
     </li>
-    <li ngbNavItem
+    <li ngbNavItem="performance-details"
         *ngIf="permissions.grafana.read">
       <a ngbNavLink
          i18n>Performance Details</a>
@@ -37,7 +38,7 @@
         </cd-grafana>
       </ng-template>
     </li>
-    <li ngbNavItem>
+    <li ngbNavItem="device-health">
       <a ngbNavLink
          i18n>Device health</a>
       <ng-template ngbNavContent>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
index a9848cee383e..f0e49476b76f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
@@ -3,8 +3,9 @@
 
   <ul ngbNav
       #nav="ngbNav"
-      class="nav-tabs">
-    <li ngbNavItem>
+      class="nav-tabs"
+      cdStatefulTab="logs">
+    <li ngbNavItem="cluster-logs">
       <a ngbNavLink
          i18n>Cluster Logs</a>
       <ng-template ngbNavContent>
@@ -23,7 +24,7 @@
         </div>
       </ng-template>
     </li>
-    <li ngbNavItem>
+    <li ngbNavItem="audit-logs">
       <a ngbNavLink
          i18n>Audit Logs</a>
       <ng-template ngbNavContent>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-details/mgr-module-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-details/mgr-module-details.component.html
index 861575d0a14a..29cae36bafff 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-details/mgr-module-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-details/mgr-module-details.component.html
@@ -1,16 +1,4 @@
 <ng-container *ngIf="selection">
-  <ul ngbNav
-      #nav="ngbNav"
-      class="nav-tabs">
-    <li ngbNavItem>
-      <a ngbNavLink
-         i18n>Details</a>
-      <ng-template ngbNavContent>
-        <cd-table-key-value [data]="module_config">
-        </cd-table-key-value>
-      </ng-template>
-    </li>
-  </ul>
-
-  <div [ngbNavOutlet]="nav"></div>
+  <cd-table-key-value [data]="module_config">
+  </cd-table-key-value>
 </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-details/mgr-module-details.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-details/mgr-module-details.component.spec.ts
index d28861eeedf9..f33e17cd11d4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-details/mgr-module-details.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-details/mgr-module-details.component.spec.ts
@@ -1,8 +1,6 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
-
 import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
 import { SharedModule } from '../../../../shared/shared.module';
 import { MgrModuleDetailsComponent } from './mgr-module-details.component';
@@ -13,7 +11,7 @@ describe('MgrModuleDetailsComponent', () => {
 
   configureTestBed({
     declarations: [MgrModuleDetailsComponent],
-    imports: [HttpClientTestingModule, SharedModule, NgbNavModule],
+    imports: [HttpClientTestingModule, SharedModule],
     providers: [i18nProviders]
   });
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html
index 68225e2e4674..bca3f7407156 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html
@@ -2,15 +2,16 @@
   <ul ngbNav
       #nav="ngbNav"
       id="tabset-osd-details"
-      class="nav-tabs">
-    <li ngbNavItem>
+      class="nav-tabs"
+      cdStatefulTab="osd-details">
+    <li ngbNavItem="devices">
       <a ngbNavLink
          i18n>Devices</a>
       <ng-template ngbNavContent>
         <cd-device-list [osdId]="osd?.id"></cd-device-list>
       </ng-template>
     </li>
-    <li ngbNavItem>
+    <li ngbNavItem="attributes">
       <a ngbNavLink
          i18n>Attributes (OSD map)</a>
       <ng-template ngbNavContent>
@@ -18,7 +19,7 @@
         </cd-table-key-value>
       </ng-template>
     </li>
-    <li ngbNavItem>
+    <li ngbNavItem="metadata">
       <a ngbNavLink
          i18n>Metadata</a>
       <ng-template ngbNavContent>
@@ -32,14 +33,14 @@
         </ng-template>
       </ng-template>
     </li>
-    <li ngbNavItem>
+    <li ngbNavItem="device-health">
       <a ngbNavLink
          i18n>Device health</a>
       <ng-template ngbNavContent>
         <cd-smart-list [osdId]="osd?.id"></cd-smart-list>
       </ng-template>
     </li>
-    <li ngbNavItem>
+    <li ngbNavItem="performance-counter">
       <a ngbNavLink
          i18n>Performance counter</a>
       <ng-template ngbNavContent>
@@ -49,7 +50,7 @@
         </cd-table-performance-counter>
       </ng-template>
     </li>
-    <li ngbNavItem>
+    <li ngbNavItem="histogram">
       <a ngbNavLink
          i18n>Histogram</a>
       <ng-template ngbNavContent>
@@ -72,7 +73,7 @@
         </div>
       </ng-template>
     </li>
-    <li ngbNavItem
+    <li ngbNavItem="performance-details"
         *ngIf="grafanaPermission.read">
       <a ngbNavLink
          i18n>Performance Details</a>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-details/service-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-details/service-details.component.html
index 46d3affd0d00..704f0f98e0e9 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-details/service-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-details/service-details.component.html
@@ -1,16 +1,4 @@
 <ng-container *ngIf="selection">
-  <ul ngbNav
-      #nav="ngbNav"
-      class="nav-tabs">
-    <li ngbNavItem>
-      <a ngbNavLink
-         i18n>Daemons</a>
-      <ng-template ngbNavContent>
-        <cd-service-daemon-list [serviceName]="selection['service_name']">
-        </cd-service-daemon-list>
-      </ng-template>
-    </li>
-  </ul>
-
-  <div [ngbNavOutlet]="nav"></div>
+  <cd-service-daemon-list [serviceName]="selection['service_name']">
+  </cd-service-daemon-list>
 </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-details/service-details.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-details/service-details.component.spec.ts
index dc2ec0b66c29..1faa2bed8451 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-details/service-details.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-details/service-details.component.spec.ts
@@ -4,11 +4,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 
-import {
-  configureTestBed,
-  i18nProviders,
-  TabHelper
-} from '../../../../../testing/unit-test-helper';
+import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
 import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
 import { SummaryService } from '../../../../shared/services/summary.service';
 import { SharedModule } from '../../../../shared/shared.module';
@@ -43,21 +39,4 @@ describe('ServiceDetailsComponent', () => {
     fixture.detectChanges();
     expect(component).toBeTruthy();
   });
-
-  describe('Service details tabset', () => {
-    beforeEach(() => {
-      component.selection.selected = [{ serviceName: 'osd' }];
-      fixture.detectChanges();
-    });
-
-    it('should have a NgbNav', () => {
-      const ngbNav = TabHelper.getNgbNav(fixture);
-      expect(ngbNav).toBeDefined();
-    });
-
-    it('should show tabs', () => {
-      const ngbNavItems = TabHelper.getTextContents(fixture);
-      expect(ngbNavItems).toEqual(['Daemons']);
-    });
-  });
 });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-details/nfs-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-details/nfs-details.component.html
index 4fc2aa2c9cd7..2a8b9453f3fa 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-details/nfs-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-details/nfs-details.component.html
@@ -1,8 +1,9 @@
 <ng-container *ngIf="selection">
   <ul ngbNav
       #nav="ngbNav"
-      class="nav-tabs">
-    <li ngbNavItem>
+      class="nav-tabs"
+      cdStatefulTab="nfs-details">
+    <li ngbNavItem="details">
       <a ngbNavLink
          i18n>Details</a>
       <ng-template ngbNavContent>
@@ -10,7 +11,7 @@
         </cd-table-key-value>
       </ng-template>
     </li>
-    <li ngbNavItem>
+    <li ngbNavItem="clients">
       <a ngbNavLink
          i18n>Clients ({{ clients.length }})</a>
       <ng-template ngbNavContent>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-details/pool-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-details/pool-details.component.html
index c5a8a0b1a40d..7492ddde6079 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-details/pool-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-details/pool-details.component.html
@@ -2,8 +2,9 @@
               cdTableDetail>
   <ul ngbNav
       #nav="ngbNav"
-      class="nav-tabs">
-    <li ngbNavItem>
+      class="nav-tabs"
+      cdStatefulTab="pool-details">
+    <li ngbNavItem="details">
       <a ngbNavLink
          i18n>Details</a>
       <ng-template ngbNavContent>
@@ -13,7 +14,7 @@
         </cd-table-key-value>
       </ng-template>
     </li>
-    <li ngbNavItem
+    <li ngbNavItem="performance-details"
         *ngIf="permissions.grafana.read">
       <a ngbNavLink
          i18n>Performance Details</a>
@@ -24,7 +25,7 @@
         </cd-grafana>
       </ng-template>
     </li>
-    <li ngbNavItem
+    <li ngbNavItem="configuration"
         *ngIf="selection.type === 'replicated'">
       <a ngbNavLink
          i18n>Configuration</a>
@@ -32,7 +33,7 @@
         <cd-rbd-configuration-table [data]="selectedPoolConfiguration"></cd-rbd-configuration-table>
       </ng-template>
     </li>
-    <li ngbNavItem
+    <li ngbNavItem="cache-tiers-details"
         *ngIf="selection['tiers']?.length > 0">
       <a ngbNavLink
          i18n>Cache Tiers Details</a>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.html
index 1bb5bca2c617..310de113c4aa 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.html
@@ -1,144 +1,132 @@
 <ng-container *ngIf="selection">
-  <ul ngbNav
-      #nav="ngbNav"
-      class="nav-tabs">
-    <li ngbNavItem>
-      <a ngbNavLink
-         i18n>Details</a>
-      <ng-template ngbNavContent>
-        <table class="table table-striped table-bordered">
-          <tbody>
-            <tr>
-              <td i18n
-                  class="bold w-25">Name</td>
-              <td class="w-75">{{ selection.bid }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">ID</td>
-              <td>{{ selection.id }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Owner</td>
-              <td>{{ selection.owner }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Index type</td>
-              <td>{{ selection.index_type }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Placement rule</td>
-              <td>{{ selection.placement_rule }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Marker</td>
-              <td>{{ selection.marker }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Maximum marker</td>
-              <td>{{ selection.max_marker }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Version</td>
-              <td>{{ selection.ver }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Master version</td>
-              <td>{{ selection.master_ver }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Modification time</td>
-              <td>{{ selection.mtime | cdDate }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Zonegroup</td>
-              <td>{{ selection.zonegroup }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">Versioning</td>
-              <td>{{ selection.versioning }}</td>
-            </tr>
-            <tr>
-              <td i18n
-                  class="bold">MFA Delete</td>
-              <td>{{ selection.mfa_delete }}</td>
-            </tr>
-          </tbody>
-        </table>
+  <table class="table table-striped table-bordered">
+    <tbody>
+      <tr>
+        <td i18n
+            class="bold w-25">Name</td>
+        <td class="w-75">{{ selection.bid }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">ID</td>
+        <td>{{ selection.id }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Owner</td>
+        <td>{{ selection.owner }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Index type</td>
+        <td>{{ selection.index_type }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Placement rule</td>
+        <td>{{ selection.placement_rule }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Marker</td>
+        <td>{{ selection.marker }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Maximum marker</td>
+        <td>{{ selection.max_marker }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Version</td>
+        <td>{{ selection.ver }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Master version</td>
+        <td>{{ selection.master_ver }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Modification time</td>
+        <td>{{ selection.mtime | cdDate }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Zonegroup</td>
+        <td>{{ selection.zonegroup }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Versioning</td>
+        <td>{{ selection.versioning }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">MFA Delete</td>
+        <td>{{ selection.mfa_delete }}</td>
+      </tr>
+    </tbody>
+  </table>
 
-        <!-- Bucket quota -->
-        <div *ngIf="selection.bucket_quota">
-          <legend i18n>Bucket quota</legend>
-          <table class="table table-striped table-bordered">
-            <tbody>
-              <tr>
-                <td i18n
-                    class="bold w-25">Enabled</td>
-                <td class="w-75">{{ selection.bucket_quota.enabled | booleanText }}</td>
-              </tr>
-              <tr>
-                <td i18n
-                    class="bold">Maximum size</td>
-                <td *ngIf="selection.bucket_quota.max_size <= -1"
-                    i18n>Unlimited</td>
-                <td *ngIf="selection.bucket_quota.max_size > -1">
-                  {{ selection.bucket_quota.max_size | dimless }}
-                </td>
-              </tr>
-              <tr>
-                <td i18n
-                    class="bold">Maximum objects</td>
-                <td *ngIf="selection.bucket_quota.max_objects <= -1"
-                    i18n>Unlimited</td>
-                <td *ngIf="selection.bucket_quota.max_objects > -1">
-                  {{ selection.bucket_quota.max_objects }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+  <!-- Bucket quota -->
+  <div *ngIf="selection.bucket_quota">
+    <legend i18n>Bucket quota</legend>
+    <table class="table table-striped table-bordered">
+      <tbody>
+        <tr>
+          <td i18n
+              class="bold w-25">Enabled</td>
+          <td class="w-75">{{ selection.bucket_quota.enabled | booleanText }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold">Maximum size</td>
+          <td *ngIf="selection.bucket_quota.max_size <= -1"
+              i18n>Unlimited</td>
+          <td *ngIf="selection.bucket_quota.max_size > -1">
+            {{ selection.bucket_quota.max_size | dimless }}
+          </td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold">Maximum objects</td>
+          <td *ngIf="selection.bucket_quota.max_objects <= -1"
+              i18n>Unlimited</td>
+          <td *ngIf="selection.bucket_quota.max_objects > -1">
+            {{ selection.bucket_quota.max_objects }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 
-        <!-- Locking -->
-        <legend i18n>Locking</legend>
-        <table class="table table-striped table-bordered">
-          <tbody>
-            <tr>
-              <td i18n
-                  class="bold w-25">Enabled</td>
-              <td class="w-75">{{ selection.lock_enabled | booleanText }}</td>
-            </tr>
-            <ng-container *ngIf="selection.lock_enabled">
-              <tr>
-                <td i18n
-                    class="bold">Mode</td>
-                <td>{{ selection.lock_mode }}</td>
-              </tr>
-              <tr>
-                <td i18n
-                    class="bold">Days</td>
-                <td>{{ selection.lock_retention_period_days }}</td>
-              </tr>
-              <tr>
-                <td i18n
-                    class="bold">Years</td>
-                <td>{{ selection.lock_retention_period_years }}</td>
-              </tr>
-            </ng-container>
-          </tbody>
-        </table>
-      </ng-template>
-    </li>
-  </ul>
-
-  <div [ngbNavOutlet]="nav"></div>
+  <!-- Locking -->
+  <legend i18n>Locking</legend>
+  <table class="table table-striped table-bordered">
+    <tbody>
+      <tr>
+        <td i18n
+            class="bold w-25">Enabled</td>
+        <td class="w-75">{{ selection.lock_enabled | booleanText }}</td>
+      </tr>
+      <ng-container *ngIf="selection.lock_enabled">
+        <tr>
+          <td i18n
+              class="bold">Mode</td>
+          <td>{{ selection.lock_mode }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold">Days</td>
+          <td>{{ selection.lock_retention_period_days }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold">Years</td>
+          <td>{{ selection.lock_retention_period_years }}</td>
+        </tr>
+      </ng-container>
+    </tbody>
+  </table>
 </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.spec.ts
index 3fa79f21050c..68799f5ee362 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.spec.ts
@@ -1,7 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
-
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
 import { CdTableSelection } from '../../../shared/models/cd-table-selection';
 import { SharedModule } from '../../../shared/shared.module';
@@ -13,7 +11,7 @@ describe('RgwBucketDetailsComponent', () => {
 
   configureTestBed({
     declarations: [RgwBucketDetailsComponent],
-    imports: [SharedModule, NgbNavModule],
+    imports: [SharedModule],
     providers: [i18nProviders]
   });
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html
index 77292949b2ab..873200d71b9f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html
@@ -1,8 +1,9 @@
 <ng-container *ngIf="selection">
   <ul ngbNav
       #nav="ngbNav"
-      class="nav-tabs">
-    <li ngbNavItem>
+      class="nav-tabs"
+      cdStatefulTab="rgw-daemon-details">
+    <li ngbNavItem="details">
       <a ngbNavLink
          i18n>Details</a>
       <ng-template ngbNavContent>
@@ -11,7 +12,7 @@
         </cd-table-key-value>
       </ng-template>
     </li>
-    <li ngbNavItem>
+    <li ngbNavItem="performance-counters">
       <a ngbNavLink
          i18n>Performance Counters</a>
       <ng-template ngbNavContent>
@@ -20,7 +21,7 @@
         </cd-table-performance-counter>
       </ng-template>
     </li>
-    <li ngbNavItem
+    <li ngbNavItem="performance-details"
         *ngIf="grafanaPermission.read">
       <a ngbNavLink
          i18n>Performance Details</a>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.html
index c081756061a3..14c9fc2fee35 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.html
@@ -1,8 +1,9 @@
 <ng-container *ngIf="selection">
   <ul ngbNav
       #nav="ngbNav"
-      class="nav-tabs">
-    <li ngbNavItem>
+      class="nav-tabs"
+      cdStatefulTab="rgw-user-details">
+    <li ngbNavItem="details">
       <a ngbNavLink
          i18n>Details</a>
       <ng-template ngbNavContent>
@@ -130,7 +131,7 @@
         </div>
       </ng-template>
     </li>
-    <li ngbNavItem
+    <li ngbNavItem="keys"
         *ngIf="keys.length">
       <a ngbNavLink
          i18n>Keys</a>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-details/role-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-details/role-details.component.html
index 0bb532ddfa19..ca4b6781bbf5 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-details/role-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-details/role-details.component.html
@@ -1,23 +1,11 @@
 <ng-container *ngIf="selection">
-  <ul ngbNav
-      #nav="ngbNav"
-      class="nav-tabs">
-    <li ngbNavItem>
-      <a ngbNavLink
-         i18n>Details</a>
-      <ng-template ngbNavContent>
-        <cd-table [data]="scopes_permissions"
-                  [columns]="columns"
-                  columnMode="flex"
-                  [toolHeader]="false"
-                  [autoReload]="false"
-                  [autoSave]="false"
-                  [footer]="false"
-                  [limit]="0">
-        </cd-table>
-      </ng-template>
-    </li>
-  </ul>
-
-  <div [ngbNavOutlet]="nav"></div>
+  <cd-table [data]="scopes_permissions"
+            [columns]="columns"
+            columnMode="flex"
+            [toolHeader]="false"
+            [autoReload]="false"
+            [autoSave]="false"
+            [footer]="false"
+            [limit]="0">
+  </cd-table>
 </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/directives.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/directives.module.ts
index a72c6f6c68c9..3b011043c737 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/directives.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/directives.module.ts
@@ -8,6 +8,7 @@ import { FormLoadingDirective } from './form-loading.directive';
 import { IopsDirective } from './iops.directive';
 import { MillisecondsDirective } from './milliseconds.directive';
 import { PasswordButtonDirective } from './password-button.directive';
+import { StatefulTabDirective } from './stateful-tab.directive';
 import { TrimDirective } from './trim.directive';
 
 @NgModule({
@@ -21,7 +22,8 @@ import { TrimDirective } from './trim.directive';
     TrimDirective,
     MillisecondsDirective,
     IopsDirective,
-    FormLoadingDirective
+    FormLoadingDirective,
+    StatefulTabDirective
   ],
   exports: [
     AutofocusDirective,
@@ -32,7 +34,8 @@ import { TrimDirective } from './trim.directive';
     TrimDirective,
     MillisecondsDirective,
     IopsDirective,
-    FormLoadingDirective
+    FormLoadingDirective,
+    StatefulTabDirective
   ]
 })
 export class DirectivesModule {}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/stateful-tab.directive.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/stateful-tab.directive.spec.ts
new file mode 100644
index 000000000000..70ecb1adb88c
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/stateful-tab.directive.spec.ts
@@ -0,0 +1,29 @@
+import { NgbNav, NgbNavChangeEvent, NgbNavConfig } from '@ng-bootstrap/ng-bootstrap';
+
+import { StatefulTabDirective } from './stateful-tab.directive';
+
+describe('StatefulTabDirective', () => {
+  it('should create an instance', () => {
+    const directive = new StatefulTabDirective(null);
+    expect(directive).toBeTruthy();
+  });
+
+  it('should get and select active tab', () => {
+    const nav = new NgbNav('tablist', new NgbNavConfig(), <any>null, null);
+    spyOn(nav, 'select');
+    spyOn(window.localStorage, 'getItem').and.returnValue('foo');
+    const directive = new StatefulTabDirective(nav);
+    directive.ngOnInit();
+    expect(window.localStorage.getItem).toHaveBeenCalled();
+    expect(nav.select).toHaveBeenCalledWith('foo');
+  });
+
+  it('should store active tab', () => {
+    spyOn(window.localStorage, 'setItem');
+    const directive = new StatefulTabDirective(null);
+    directive.cdStatefulTab = 'bar';
+    const event: NgbNavChangeEvent<string> = { activeId: '', nextId: 'xyz', preventDefault: null };
+    directive.onNavChange(event);
+    expect(window.localStorage.setItem).toHaveBeenCalledWith('tabset_bar', 'xyz');
+  });
+});
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/stateful-tab.directive.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/stateful-tab.directive.ts
new file mode 100644
index 000000000000..cf6f27e9592d
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/stateful-tab.directive.ts
@@ -0,0 +1,31 @@
+import { Directive, Host, HostListener, Input, OnInit, Optional } from '@angular/core';
+
+import { NgbNav, NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap';
+
+@Directive({
+  selector: '[cdStatefulTab]'
+})
+export class StatefulTabDirective implements OnInit {
+  @Input()
+  cdStatefulTab: string;
+
+  private localStorage = window.localStorage;
+
+  constructor(@Optional() @Host() private nav: NgbNav) {}
+
+  ngOnInit() {
+    // Is an activate tab identifier stored in the local storage?
+    const activeId = this.localStorage.getItem(`tabset_${this.cdStatefulTab}`);
+    if (activeId) {
+      this.nav.select(activeId);
+    }
+  }
+
+  @HostListener('navChange', ['$event'])
+  onNavChange(event: NgbNavChangeEvent) {
+    // Store the current active tab identifier in the local storage.
+    if (this.cdStatefulTab && event.nextId) {
+      this.localStorage.setItem(`tabset_${this.cdStatefulTab}`, event.nextId);
+    }
+  }
+}
-- 
2.47.3