mgr/dashboard: add nvmeof performance and overview grafana dashboards to Block -> Nvme/TCP tab in dashboard

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

Signed-off-by: Aashish Sharma <[email protected]>

Author: aaSharma14

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

@@ -63,7 +63,8 @@ import {
   RadioModule,
   SelectModule,
   UIShellModule,
-  TreeviewModule
+  TreeviewModule,
+  TabsModule
 } from 'carbon-components-angular';
 
 // Icons
@@ -97,7 +98,8 @@ import Reset from '@carbon/icons/es/reset/32';
     NumberModule,
     ModalModule,
     DatePickerModule,
-    ComboBoxModule
+    ComboBoxModule,
+    TabsModule
   ],
   declarations: [
     RbdListComponent,

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway/nvmeof-gateway.component.html

@@ -15,22 +15,71 @@
   </cds-combo-box>
 </div>
 
-<legend i18n>
-  Gateways
-  <cd-help-text>
-    Ceph NVMe-oF gateways provide Ceph Block Device storage through NVMe/TCP. For VMware clients the NVMe/TCP volumes display as  VMFS Datastores. For Linux clients the NVMe/TCP volumes display as as block devices.</cd-help-text>
-</legend>
-<div>
-  <cd-table [data]="gateways"
-            (fetchData)="getGateways()"
-            [columns]="gatewayColumns">
-  </cd-table>
-</div>
-
 <ng-template #statusTpl
              let-row="data.row">
   <span class="badge"
         [ngClass]="row | pipeFunction:getStatusClass">
     {{ row.status_desc }}
   </span>
 </ng-template>
+
+<cds-tabs
+  type="contained"
+  followFocus="true"
+  isNavigation="true"
+  [cacheActive]="false">
+  <cds-tab
+    heading="Gateways"
+    [tabContent]="gateways_content"
+    i18n-heading
+    (selected)="onSelected(Tabs.gateways)">
+  </cds-tab>
+  <cds-tab
+    heading="Overview"
+    [tabContent]="overview_content"
+    i18n-heading
+    (selected)="onSelected(Tabs.overview)">
+  </cds-tab>
+  <cds-tab
+    heading="Performance"
+    [tabContent]="performance_content"
+    i18n-heading
+    (selected)="onSelected(Tabs.overview)">
+  </cds-tab>
+</cds-tabs>
+
+<ng-template #gateways_content>
+  <legend *ngIf="selectedTab === Tabs.gateways"
+          i18n>
+    Gateways
+    <cd-help-text>
+      Ceph NVMe-oF gateways provide Ceph Block Device storage through NVMe/TCP. For VMware clients the NVMe/TCP volumes display as  VMFS Datastores. For Linux clients the NVMe/TCP volumes display as as block devices.
+    </cd-help-text>
+  </legend>
+  <div>
+    <cd-table [data]="gateways"
+              (fetchData)="getGateways()"
+              [columns]="gatewayColumns">
+    </cd-table>
+  </div>
+</ng-template>
+
+<ng-template #overview_content>
+  <cd-grafana i18n-title
+              title="Gateway overview"
+              grafanaPath="ceph-nvme-of-gateways-overview?var-group={{selectedGatewayGroup}}&var-gateway=All"
+              [type]="'metrics'"
+              uid="feeuv1dno43r4ddjhjssdd"
+              grafanaStyle="three">
+  </cd-grafana>
+</ng-template>
+
+<ng-template #performance_content>
+  <cd-grafana i18n-title
+              title="Gateway performance"
+              grafanaPath="ceph-nvme-of-gateways-performance?var-group={{selectedGatewayGroup}}"
+              [type]="'metrics'"
+              uid="feeuv1dno43r4deed"
+              grafanaStyle="three">
+  </cd-grafana>
+</ng-template>

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway/nvmeof-gateway.component.ts

@@ -23,12 +23,28 @@ type Gateway = {
   status_desc: string;
 };
 
+enum TABS {
+  'gateways',
+  'overview'
+}
+
 @Component({
   selector: 'cd-nvmeof-gateway',
   templateUrl: './nvmeof-gateway.component.html',
   styleUrls: ['./nvmeof-gateway.component.scss']
 })
 export class NvmeofGatewayComponent implements OnInit {
+  selectedTab: TABS;
+  selectedGatewayGroup: string = null;
+
+  onSelected(tab: TABS) {
+    this.selectedTab = tab;
+  }
+
+  public get Tabs(): typeof TABS {
+    return TABS;
+  }
+
   @ViewChild('statusTpl', { static: true })
   statusTpl: TemplateRef<any>;
 
@@ -96,6 +112,7 @@ export class NvmeofGatewayComponent implements OnInit {
   onGroupSelection(selected: ComboBoxItem) {
     selected.selected = true;
     this.groupService = selected.serviceName;
+    this.selectedGatewayGroup = selected.content;
     this.getGateways();
   }
 

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-details/nvmeof-subsystems-details.component.html

@@ -38,6 +38,20 @@
         </cd-nvmeof-initiators-list>
       </ng-template>
     </ng-container>
+    <ng-container ngbNavItem="performance-details"
+                  *ngIf="permissions.grafana.read">
+      <a ngbNavLink
+         i18n>Performance Details</a>
+      <ng-template ngbNavContent>
+        <cd-grafana i18n-title
+                    title="Subsystem details"
+                    grafanaPath="ceph-nvme-of-gateways-performance?var-group={{group}}&var-subsystem={{subsystemNQN}}"
+                    [type]="'metrics'"
+                    uid="feeuv1dno43r4deed"
+                    grafanaStyle="three">
+        </cd-grafana>
+      </ng-template>
+    </ng-container>
   </nav>
 
   <div [ngbNavOutlet]="nav"></div>

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-details/nvmeof-subsystems-details.component.spec.ts

@@ -3,7 +3,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
-
+import { Permissions } from '~/app/shared/models/permissions';
 import { SharedModule } from '~/app/shared/shared.module';
 import { NvmeofSubsystemsDetailsComponent } from './nvmeof-subsystems-details.component';
 
@@ -29,6 +29,9 @@ describe('NvmeofSubsystemsDetailsComponent', () => {
       namespace_count: 1,
       max_namespaces: 256
     };
+    component.permissions = new Permissions({
+      grafana: ['read']
+    });
     component.ngOnChanges();
     fixture.detectChanges();
   });

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-details/nvmeof-subsystems-details.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input, OnChanges } from '@angular/core';
 import { NvmeofSubsystem } from '~/app/shared/models/nvmeof';
+import { Permissions } from '~/app/shared/models/permissions';
 
 @Component({
   selector: 'cd-nvmeof-subsystems-details',
@@ -10,7 +11,9 @@ export class NvmeofSubsystemsDetailsComponent implements OnChanges {
   @Input()
   selection: NvmeofSubsystem;
   @Input()
-  group: NvmeofSubsystem;
+  group: string;
+  @Input()
+  permissions: Permissions;
 
   selectedItem: any;
   data: any;

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems/nvmeof-subsystems.component.html

@@ -31,7 +31,7 @@
           (updateSelection)="updateSelection($event)">
 
   <div class="table-actions">
-    <cd-table-actions [permission]="permission"
+    <cd-table-actions [permission]="permissions.nvmeof"
                       [selection]="selection"
                       class="btn-group"
                       [tableActions]="tableActions">
@@ -40,6 +40,7 @@
 
   <cd-nvmeof-subsystems-details *cdTableDetail
                                 [selection]="expandedRow"
+                                [permissions]="permissions"
                                 [group]="group">
   </cd-nvmeof-subsystems-details>
 </cd-table>

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems/nvmeof-subsystems.component.ts

@@ -4,7 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { ActionLabelsI18n, URLVerbs } from '~/app/shared/constants/app.constants';
 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
 import { NvmeofSubsystem } from '~/app/shared/models/nvmeof';
-import { Permission } from '~/app/shared/models/permissions';
+import { Permissions } from '~/app/shared/models/permissions';
 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
 import { ListWithDetails } from '~/app/shared/classes/list-with-details.class';
 import { CdTableAction } from '~/app/shared/models/cd-table-action';
@@ -31,7 +31,7 @@ const BASE_URL = 'block/nvmeof/subsystems';
 export class NvmeofSubsystemsComponent extends ListWithDetails implements OnInit {
   subsystems: NvmeofSubsystem[] = [];
   subsystemsColumns: any;
-  permission: Permission;
+  permissions: Permissions;
   selection = new CdTableSelection();
   tableActions: CdTableAction[];
   subsystemDetails: any[];
@@ -48,7 +48,7 @@ export class NvmeofSubsystemsComponent extends ListWithDetails implements OnInit
     private route: ActivatedRoute
   ) {
     super();
-    this.permission = this.authStorageService.getPermissions().nvmeof;
+    this.permissions = this.authStorageService.getPermissions();
   }
 
   ngOnInit() {