Merge PR #33520 into octopus

* refs/pull/33520/head:
	mgr/dashboard: Isolate each RBD component

Reviewed-by: Stephan Müller <smueller@suse.com>

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts

@@ -30,12 +30,13 @@ import { RbdConfigurationFormComponent } from './rbd-configuration-form/rbd-conf
 import { RbdConfigurationListComponent } from './rbd-configuration-list/rbd-configuration-list.component';
 import { RbdDetailsComponent } from './rbd-details/rbd-details.component';
 import { RbdFormComponent } from './rbd-form/rbd-form.component';
-import { RbdImagesComponent } from './rbd-images/rbd-images.component';
 import { RbdListComponent } from './rbd-list/rbd-list.component';
 import { RbdNamespaceFormModalComponent } from './rbd-namespace-form/rbd-namespace-form-modal.component';
 import { RbdNamespaceListComponent } from './rbd-namespace-list/rbd-namespace-list.component';
+import { RbdPerformanceComponent } from './rbd-performance/rbd-performance.component';
 import { RbdSnapshotFormModalComponent } from './rbd-snapshot-form/rbd-snapshot-form-modal.component';
 import { RbdSnapshotListComponent } from './rbd-snapshot-list/rbd-snapshot-list.component';
+import { RbdTabsComponent } from './rbd-tabs/rbd-tabs.component';
 import { RbdTrashListComponent } from './rbd-trash-list/rbd-trash-list.component';
 import { RbdTrashMoveModalComponent } from './rbd-trash-move-modal/rbd-trash-move-modal.component';
 import { RbdTrashPurgeModalComponent } from './rbd-trash-purge-modal/rbd-trash-purge-modal.component';
@@ -84,7 +85,6 @@ import { RbdTrashRestoreModalComponent } from './rbd-trash-restore-modal/rbd-tra
     RbdSnapshotFormModalComponent,
     RbdTrashListComponent,
     RbdTrashMoveModalComponent,
-    RbdImagesComponent,
     RbdTrashRestoreModalComponent,
     RbdTrashPurgeModalComponent,
     IscsiTargetDetailsComponent,
@@ -93,7 +93,9 @@ import { RbdTrashRestoreModalComponent } from './rbd-trash-restore-modal/rbd-tra
     IscsiTargetIqnSettingsModalComponent,
     IscsiTargetDiscoveryModalComponent,
     RbdConfigurationListComponent,
-    RbdConfigurationFormComponent
+    RbdConfigurationFormComponent,
+    RbdTabsComponent,
+    RbdPerformanceComponent
   ],
   exports: [RbdConfigurationListComponent, RbdConfigurationFormComponent]
 })
@@ -110,7 +112,22 @@ const routes: Routes = [
     canActivate: [FeatureTogglesGuardService],
     data: { breadcrumbs: 'Images' },
     children: [
-      { path: '', component: RbdImagesComponent },
+      { path: '', component: RbdListComponent },
+      {
+        path: 'namespaces',
+        component: RbdNamespaceListComponent,
+        data: { breadcrumbs: 'Namespaces' }
+      },
+      {
+        path: 'trash',
+        component: RbdTrashListComponent,
+        data: { breadcrumbs: 'Trash' }
+      },
+      {
+        path: 'performance',
+        component: RbdPerformanceComponent,
+        data: { breadcrumbs: 'Overall Performance' }
+      },
       {
         path: URLVerbs.CREATE,
         component: RbdFormComponent,

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.html

@@ -1,3 +1,5 @@
+<cd-rbd-tabs></cd-rbd-tabs>
+
 <cd-view-cache *ngFor="let viewCacheStatus of viewCacheStatusList"
                [status]="viewCacheStatus.status"
                [statusFor]="viewCacheStatus.statusFor"></cd-view-cache>

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts

@@ -26,6 +26,7 @@ import { SharedModule } from '../../../shared/shared.module';
 import { RbdConfigurationListComponent } from '../rbd-configuration-list/rbd-configuration-list.component';
 import { RbdDetailsComponent } from '../rbd-details/rbd-details.component';
 import { RbdSnapshotListComponent } from '../rbd-snapshot-list/rbd-snapshot-list.component';
+import { RbdTabsComponent } from '../rbd-tabs/rbd-tabs.component';
 import { RbdListComponent } from './rbd-list.component';
 import { RbdModel } from './rbd-model';
 
@@ -55,7 +56,8 @@ describe('RbdListComponent', () => {
       RbdListComponent,
       RbdDetailsComponent,
       RbdSnapshotListComponent,
-      RbdConfigurationListComponent
+      RbdConfigurationListComponent,
+      RbdTabsComponent
     ],
     providers: [TaskListService, i18nProviders]
   });

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-list/rbd-namespace-list.component.html

@@ -1,3 +1,5 @@
+<cd-rbd-tabs></cd-rbd-tabs>
+
 <cd-table [data]="namespaces"
           (fetchData)="refresh()"
           columnMode="flex"

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-list/rbd-namespace-list.component.spec.ts

@@ -2,20 +2,28 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
+import { TabsModule } from 'ngx-bootstrap/tabs';
 import { ToastrModule } from 'ngx-toastr';
 
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
 import { TaskListService } from '../../../shared/services/task-list.service';
 import { SharedModule } from '../../../shared/shared.module';
+import { RbdTabsComponent } from '../rbd-tabs/rbd-tabs.component';
 import { RbdNamespaceListComponent } from './rbd-namespace-list.component';
 
 describe('RbdNamespaceListComponent', () => {
   let component: RbdNamespaceListComponent;
   let fixture: ComponentFixture<RbdNamespaceListComponent>;
 
   configureTestBed({
-    declarations: [RbdNamespaceListComponent],
-    imports: [SharedModule, HttpClientTestingModule, RouterTestingModule, ToastrModule.forRoot()],
+    declarations: [RbdNamespaceListComponent, RbdTabsComponent],
+    imports: [
+      SharedModule,
+      HttpClientTestingModule,
+      RouterTestingModule,
+      ToastrModule.forRoot(),
+      TabsModule.forRoot()
+    ],
     providers: [TaskListService, i18nProviders]
   });
 

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-performance/rbd-performance.component.html

@@ -0,0 +1,6 @@
+<cd-rbd-tabs></cd-rbd-tabs>
+
+<cd-grafana [grafanaPath]="'rbd-overview?'"
+            uid="41FrpeUiz"
+            grafanaStyle="two">
+</cd-grafana>

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-performance/rbd-performance.component.spec.ts

@@ -0,0 +1,31 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { TabsModule } from 'ngx-bootstrap/tabs';
+
+import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
+import { SharedModule } from '../../../shared/shared.module';
+import { RbdTabsComponent } from '../rbd-tabs/rbd-tabs.component';
+import { RbdPerformanceComponent } from './rbd-performance.component';
+
+describe('RbdPerformanceComponent', () => {
+  let component: RbdPerformanceComponent;
+  let fixture: ComponentFixture<RbdPerformanceComponent>;
+
+  configureTestBed({
+    imports: [HttpClientTestingModule, RouterTestingModule, SharedModule, TabsModule.forRoot()],
+    declarations: [RbdPerformanceComponent, RbdTabsComponent],
+    providers: i18nProviders
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RbdPerformanceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-performance/rbd-performance.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'cd-rbd-performance',
+  templateUrl: './rbd-performance.component.html',
+  styleUrls: ['./rbd-performance.component.scss']
+})
+export class RbdPerformanceComponent {
+  constructor() {}
+}

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.spec.ts

@@ -4,6 +4,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { I18n } from '@ngx-translate/i18n-polyfill';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { TabsModule } from 'ngx-bootstrap/tabs';
 import { ToastrModule } from 'ngx-toastr';
 import { Subject, throwError as observableThrowError } from 'rxjs';
 
@@ -27,6 +28,7 @@ import { NotificationService } from '../../../shared/services/notification.servi
 import { SummaryService } from '../../../shared/services/summary.service';
 import { TaskListService } from '../../../shared/services/task-list.service';
 import { RbdSnapshotFormModalComponent } from '../rbd-snapshot-form/rbd-snapshot-form-modal.component';
+import { RbdTabsComponent } from '../rbd-tabs/rbd-tabs.component';
 import { RbdSnapshotListComponent } from './rbd-snapshot-list.component';
 import { RbdSnapshotModel } from './rbd-snapshot.model';
 
@@ -45,15 +47,16 @@ describe('RbdSnapshotListComponent', () => {
   };
 
   configureTestBed({
-    declarations: [RbdSnapshotListComponent],
+    declarations: [RbdSnapshotListComponent, RbdTabsComponent],
     imports: [
-      DataTableModule,
-      ComponentsModule,
-      ToastrModule.forRoot(),
       ApiModule,
+      ComponentsModule,
+      DataTableModule,
       HttpClientTestingModule,
+      PipesModule,
       RouterTestingModule,
-      PipesModule
+      TabsModule.forRoot(),
+      ToastrModule.forRoot()
     ],
     providers: [
       { provide: AuthStorageService, useValue: fakeAuthStorageService },

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-tabs/rbd-tabs.component.html

@@ -0,0 +1,23 @@
+<tabset>
+  <tab heading="Images"
+       i18n-heading
+       [active]="url === '/block/rbd'"
+       (selectTab)="navigateTo('/block/rbd')">
+  </tab>
+  <tab heading="Namespaces"
+       i18n-heading
+       [active]="url === '/block/rbd/namespaces'"
+       (selectTab)="navigateTo('/block/rbd/namespaces')">
+  </tab>
+  <tab heading="Trash"
+       i18n-heading
+       [active]="url === '/block/rbd/trash'"
+       (selectTab)="navigateTo('/block/rbd/trash')">
+  </tab>
+  <tab heading="Overall Performance"
+       i18n-heading
+       *ngIf="grafanaPermission.read"
+       [active]="url === '/block/rbd/performance'"
+       (selectTab)="navigateTo('/block/rbd/performance')">
+  </tab>
+</tabset>

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-tabs/rbd-tabs.component.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { TabsModule } from 'ngx-bootstrap/tabs';
+
+import { configureTestBed } from '../../../../testing/unit-test-helper';
+import { RbdTabsComponent } from './rbd-tabs.component';
+
+describe('RbdTabsComponent', () => {
+  let component: RbdTabsComponent;
+  let fixture: ComponentFixture<RbdTabsComponent>;
+
+  configureTestBed({
+    imports: [TabsModule.forRoot(), RouterTestingModule],
+    declarations: [RbdTabsComponent]
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RbdTabsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-tabs/rbd-tabs.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Permission } from '../../../shared/models/permissions';
+import { AuthStorageService } from '../../../shared/services/auth-storage.service';
+
+@Component({
+  selector: 'cd-rbd-tabs',
+  templateUrl: './rbd-tabs.component.html',
+  styleUrls: ['./rbd-tabs.component.scss']
+})
+export class RbdTabsComponent implements OnInit {
+  grafanaPermission: Permission;
+  url: string;
+
+  constructor(private authStorageService: AuthStorageService, private router: Router) {
+    this.grafanaPermission = this.authStorageService.getPermissions().grafana;
+  }
+
+  ngOnInit() {
+    this.url = this.router.url;
+  }
+
+  navigateTo(url: string) {
+    this.router.navigate([url]);
+  }
+}

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-list/rbd-trash-list.component.html

@@ -1,3 +1,5 @@
+<cd-rbd-tabs></cd-rbd-tabs>
+
 <cd-view-cache *ngFor="let viewCacheStatus of viewCacheStatusList"
                [status]="viewCacheStatus.status"
                [statusFor]="viewCacheStatus.statusFor"></cd-view-cache>