From: Kanika Murarka <kmurarka@redhat.com>
Date: Thu, 4 Oct 2018 15:53:22 +0000 (+0530)
Subject: mgr/dashboard: Adding Grafana componenets to views
X-Git-Tag: v14.0.1~104^2~3
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=81ffe2bf5b5d5081a04c77ce3b854e33072af216;p=ceph.git

mgr/dashboard: Adding Grafana componenets to views

Fixes: https://tracker.ceph.com/issues/24999
Signed-off-by: Kanika Murarka <kmurarka@redhat.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html
index f3129cd0fb2bc..974068b972b2a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html
@@ -40,6 +40,12 @@
                        *ngIf="clientsSelect">
     </cd-cephfs-clients>
   </tab>
+  <tab i18n-heading
+       heading="Performance Details">
+    <cd-grafana [grafanaPath]="'rRfFzWtik/mds-performance?var-mds_servers=mds.' + grafanaId"
+                grafanaStyle="one">
+    </cd-grafana>
+  </tab>
 </tabset>
 
 <!-- templates -->
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.ts
index 8d28ce298825b..e536e455037d5 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.ts
@@ -30,6 +30,7 @@ export class CephfsDetailComponent implements OnChanges, OnInit {
   standbys = [];
   clientCount: number;
   mdsCounters = {};
+  grafanaId: any;
 
   objectValues = Object.values;
   clientsSelect = false;
@@ -43,6 +44,8 @@ export class CephfsDetailComponent implements OnChanges, OnInit {
   ngOnChanges() {
     if (this.selection.hasSelection) {
       this.selectedItem = this.selection.first();
+      const mdsInfo: any[] = this.selectedItem.mdsmap.info;
+      this.grafanaId = Object.values(mdsInfo)[0].name;
 
       if (this.id !== this.selectedItem.id) {
         this.id = this.selectedItem.id;
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
index 3893de00e6799..357c8062a4a39 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
@@ -10,6 +10,7 @@ import { TabsModule } from 'ngx-bootstrap/tabs';
 import { SharedModule } from '../../shared/shared.module';
 import { PerformanceCounterModule } from '../performance-counter/performance-counter.module';
 import { ConfigurationComponent } from './configuration/configuration.component';
+import { HostDetailsComponent } from './hosts/host-details/host-details.component';
 import { HostsComponent } from './hosts/hosts.component';
 import { MonitorComponent } from './monitor/monitor.component';
 import { OsdDetailsComponent } from './osd/osd-details/osd-details.component';
@@ -39,7 +40,8 @@ import { OsdScrubModalComponent } from './osd/osd-scrub-modal/osd-scrub-modal.co
     OsdDetailsComponent,
     OsdPerformanceHistogramComponent,
     OsdScrubModalComponent,
-    OsdFlagsModalComponent
+    OsdFlagsModalComponent,
+    HostDetailsComponent
   ]
 })
 export class ClusterModule {}
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
new file mode 100644
index 0000000000000..2f26bf7d46f39
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.html
@@ -0,0 +1,8 @@
+<tabset *ngIf="selection.hasSingleSelection">
+  <tab i18n-heading
+       heading="Performance Details">
+    <cd-grafana [grafanaPath]="'7IGu2Ttmz/host-details?'"
+                grafanaStyle="three">
+    </cd-grafana>
+  </tab>
+</tabset>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.scss
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.spec.ts
new file mode 100644
index 0000000000000..b4ae12f9957ab
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.spec.ts
@@ -0,0 +1,38 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BsDropdownModule } from 'ngx-bootstrap';
+import { TabsModule } from 'ngx-bootstrap/tabs';
+
+import { configureTestBed } from '../../../../../testing/unit-test-helper';
+import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
+import { SharedModule } from '../../../../shared/shared.module';
+import { HostDetailsComponent } from './host-details.component';
+
+describe('HostDetailsComponent', () => {
+  let component: HostDetailsComponent;
+  let fixture: ComponentFixture<HostDetailsComponent>;
+
+  configureTestBed({
+    imports: [
+      HttpClientTestingModule,
+      TabsModule.forRoot(),
+      BsDropdownModule.forRoot(),
+      SharedModule
+    ],
+    declarations: [HostDetailsComponent]
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HostDetailsComponent);
+    component = fixture.componentInstance;
+
+    component.selection = new CdTableSelection();
+
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.ts
new file mode 100644
index 0000000000000..f72b7b2b95947
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-details/host-details.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input, OnChanges } from '@angular/core';
+
+import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
+
+@Component({
+  selector: 'cd-host-details',
+  templateUrl: './host-details.component.html',
+  styleUrls: ['./host-details.component.scss']
+})
+export class HostDetailsComponent implements OnChanges {
+  @Input()
+  selection: CdTableSelection;
+  host: any;
+
+  constructor() {}
+
+  ngOnChanges() {
+    if (this.selection.hasSelection) {
+      this.host = this.selection.first();
+    }
+  }
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html
index 4f71cad08cbe9..614f172cc8bc9 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html
@@ -1,14 +1,33 @@
-<cd-table [data]="hosts"
-          [columns]="columns"
-          columnMode="flex"
-          (fetchData)="getHosts($event)">
-  <ng-template #servicesTpl let-value="value">
-    <span *ngFor="let service of value; last as isLast">
-      <a [routerLink]="[service.cdLink]"
-         [queryParams]="cdParams"
-         *ngIf="service.canRead">{{ service.type }}.{{ service.id }}</a>
-      <span *ngIf="!service.canRead">{{ service.type }}.{{ service.id }}</span>
-      {{ !isLast ? ", " : "" }}
-    </span>
-  </ng-template>
-</cd-table>
+<tabset>
+  <tab i18n-heading
+       heading="Hosts List">
+    <cd-table [data]="hosts"
+              [columns]="columns"
+              columnMode="flex"
+              (fetchData)="getHosts($event)"
+              selectionType="single"
+              (updateSelection)="updateSelection($event)">
+      <ng-template #servicesTpl let-value="value">
+        <span *ngFor="let service of value; last as isLast">
+          <a [routerLink]="[service.cdLink]"
+             [queryParams]="cdParams"
+             *ngIf="service.canRead">{{ service.type }}.{{ service.id }}
+          </a>
+          <span *ngIf="!service.canRead">
+            {{ service.type }}.{{ service.id }}
+          </span>
+          {{ !isLast ? ", " : "" }}
+        </span>
+      </ng-template>
+      <cd-host-details cdTableDetail
+                       [selection]="selection">
+      </cd-host-details>
+    </cd-table>
+  </tab>
+  <tab i18n-heading
+       heading="Overall Performance">
+    <cd-grafana [grafanaPath]="'lxnjcTAmk/host-overview?'"
+                grafanaStyle="two">
+    </cd-grafana>
+  </tab>
+</tabset>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts
index ba23b2d332774..2f800c6767b05 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts
@@ -3,12 +3,14 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { BsDropdownModule } from 'ngx-bootstrap';
+import { TabsModule } from 'ngx-bootstrap/tabs';
 
 import { configureTestBed } from '../../../../testing/unit-test-helper';
 import { ComponentsModule } from '../../../shared/components/components.module';
 import { Permissions } from '../../../shared/models/permissions';
 import { AuthStorageService } from '../../../shared/services/auth-storage.service';
 import { SharedModule } from '../../../shared/shared.module';
+import { HostDetailsComponent } from './host-details/host-details.component';
 import { HostsComponent } from './hosts.component';
 
 describe('HostsComponent', () => {
@@ -25,12 +27,13 @@ describe('HostsComponent', () => {
     imports: [
       SharedModule,
       HttpClientTestingModule,
+      TabsModule.forRoot(),
       ComponentsModule,
       BsDropdownModule.forRoot(),
       RouterTestingModule
     ],
     providers: [{ provide: AuthStorageService, useValue: fakeAuthStorageService }],
-    declarations: [HostsComponent]
+    declarations: [HostsComponent, HostDetailsComponent]
   });
 
   beforeEach(() => {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts
index 3009e8a6cfa1e..86aa28d38d218 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts
@@ -3,6 +3,7 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { HostService } from '../../../shared/api/host.service';
 import { CdTableColumn } from '../../../shared/models/cd-table-column';
 import { CdTableFetchDataContext } from '../../../shared/models/cd-table-fetch-data-context';
+import { CdTableSelection } from '../../../shared/models/cd-table-selection';
 import { Permissions } from '../../../shared/models/permissions';
 import { CephShortVersionPipe } from '../../../shared/pipes/ceph-short-version.pipe';
 import { AuthStorageService } from '../../../shared/services/auth-storage.service';
@@ -18,6 +19,7 @@ export class HostsComponent implements OnInit {
   hosts: Array<object> = [];
   isLoadingHosts = false;
   cdParams = { fromLink: '/hosts' };
+  selection = new CdTableSelection();
 
   @ViewChild('servicesTpl')
   public servicesTpl: TemplateRef<any>;
@@ -52,6 +54,10 @@ export class HostsComponent implements OnInit {
     ];
   }
 
+  updateSelection(selection: CdTableSelection) {
+    this.selection = selection;
+  }
+
   getHosts(context: CdTableFetchDataContext) {
     if (this.isLoadingHosts) {
       return;
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 d5773faf44631..35b057bee7a9f 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
@@ -34,4 +34,10 @@
       </div>
     </div>
   </tab>
+  <tab i18n-heading
+       heading="Performance Details">
+    <cd-grafana [grafanaPath]="'MKj_9ipiz/osd-device-details?var-osd_id=' + osd['id']"
+                grafanaStyle="GrafanaStyles.two">
+    </cd-grafana>
+  </tab>
 </tabset>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
index 71d6fec3e3858..3c031b4cc10c0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
@@ -1,45 +1,57 @@
-<cd-table [data]="osds"
-          (fetchData)="getOsdList()"
-          [columns]="columns"
-          selectionType="single"
-          (updateSelection)="updateSelection($event)"
-          [updateSelectionOnRefresh]="'never'">
-  <div class="table-actions btn-toolbar"
-       *ngIf="permission.update">
-    <cd-table-actions [permission]="permission"
-                      [selection]="selection"
-                      onlyDropDown="Perform Task"
-                      class="btn-group"
-                      [tableActions]="tableActions">
-    </cd-table-actions>
+<tabset>
+  <tab i18n-heading
+       heading="OSDs List">
+    <cd-table [data]="osds"
+              (fetchData)="getOsdList()"
+              [columns]="columns"
+              selectionType="single"
+              (updateSelection)="updateSelection($event)"
+              [updateSelectionOnRefresh]="'never'">
+      <div class="table-actions btn-toolbar" *ngIf="permission.update">
+        <cd-table-actions [permission]="permission"
+                          [selection]="selection"
+                          onlyDropDown="Perform Task"
+                          class="btn-group"
+                          [tableActions]="tableActions">
+        </cd-table-actions>
 
-    <button class="btn btn-sm btn-default btn-label tc_configureCluster"
-            type="button"
-            (click)="configureClusterAction()">
-      <i class="fa fa-fw fa-cog"
-         aria-hidden="true"></i>
-      <ng-container i18n>Set Cluster-wide OSD Flags</ng-container>
-    </button>
-  </div>
+        <button class="btn btn-sm btn-default btn-label tc_configureCluster"
+                type="button"
+                (click)="configureClusterAction()">
+          <i class="fa fa-fw fa-cog"
+             aria-hidden="true">
+          </i>
+          <ng-container i18n>Set Cluster-wide OSD Flags</ng-container>
+        </button>
+      </div>
 
-  <cd-osd-details cdTableDetail
-                  [selection]="selection">
-  </cd-osd-details>
-</cd-table>
+      <cd-osd-details cdTableDetail
+                      [selection]="selection">
+      </cd-osd-details>
+    </cd-table>
 
-<ng-template #statusColor
-             let-value="value">
-  <span *ngFor="let state of value; last as last">
-    <span class="label"
-          [ngClass]="{'label-success': ['in', 'up'].includes(state), 'label-danger': ['down', 'out'].includes(state)}">
-      {{ state }}
-    </span>
-    <span *ngIf="!last">&nbsp;</span>
-  </span>
-</ng-template>
+    <ng-template #statusColor
+                 let-value="value">
+      <span *ngFor="let state of value; last as last">
+        <span class="label"
+              [ngClass]="{'label-success': ['in', 'up'].includes(state), 'label-danger': ['down', 'out'].includes(state)}">
+         {{ state }}
+        </span>
+        <span *ngIf="!last">&nbsp;</span>
+      </span>
+    </ng-template>
 
-<ng-template #osdUsageTpl
-             let-row="row">
-  <cd-usage-bar [totalBytes]="row.stats.stat_bytes"
-                [usedBytes]="row.stats.stat_bytes_used"></cd-usage-bar>
-</ng-template>
+    <ng-template #osdUsageTpl
+                 let-row="row">
+      <cd-usage-bar [totalBytes]="row.stats.stat_bytes"
+                    [usedBytes]="row.stats.stat_bytes_used">
+      </cd-usage-bar>
+    </ng-template>
+  </tab>
+  <tab i18n-heading
+       heading="Overall Performance">
+    <cd-grafana [grafanaPath]="'lo02I1Aiz/osd-overview?'"
+                grafanaStyle="three">
+    </cd-grafana>
+  </tab>
+</tabset>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html
index 440c4caf1bd16..c3595fdaa6726 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.html
@@ -1,14 +1,31 @@
-<cd-table [data]="pools"
-          (fetchData)="getPoolList($event)"
-          [columns]="columns"
-          selectionType="single"
-          (updateSelection)="updateSelection($event)">
-  <tabset cdTableDetail *ngIf="selection.hasSingleSelection">
-    <tab i18n-heading
-         heading="Details">
-      <cd-table-key-value [data]="selection.first()" [autoReload]="false">
-      </cd-table-key-value>
-    </tab>
-  </tabset>
-</cd-table>
+<tabset>
+  <tab i18n-heading heading="Pools List">
+    <cd-table [data]="pools"
+              (fetchData)="getPoolList($event)"
+              [columns]="columns" selectionType="single"
+              (updateSelection)="updateSelection($event)">
+      <tabset cdTableDetail
+              *ngIf="selection.hasSingleSelection">
+        <tab i18n-heading heading="Details">
+          <cd-table-key-value [data]="selection.first()"
+                              [autoReload]="false">
+          </cd-table-key-value>
+        </tab>
+        <tab i18n-heading
+             heading="Performance Details">
+          <cd-grafana [grafanaPath]="'8ypfkWpik/ceph-pool-detail?var-pool_name='
+                      + selection.first()['pool_name']"
+                      grafanaStyle="one">
+          </cd-grafana>
+        </tab>
+      </tabset>
+    </cd-table>
+  </tab>
 
+  <tab i18n-heading
+       heading="Overall Performance">
+    <cd-grafana [grafanaPath]="'z99hzWtmk/ceph-pools-overview?'"
+                grafanaStyle="two">
+    </cd-grafana>
+  </tab>
+</tabset>
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 81c5919db6971..2881e958c1c42 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
@@ -11,4 +11,10 @@
                                   [serviceId]="serviceId">
     </cd-table-performance-counter>
   </tab>
+  <tab i18n-heading
+       heading="Performance Details">
+    <cd-grafana [grafanaPath]="'x5ARzZtmk/rgw-instance-detail?var-rgw_servers=rgw.' + this.selection.first().id"
+                grafanaStyle="one">
+    </cd-grafana>
+  </tab>
 </tabset>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html
index 35cdf214951d8..73fbc0f233a8c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html
@@ -1,10 +1,20 @@
-<cd-table [data]="daemons"
-          [columns]="columns"
-          columnMode="flex"
-          selectionType="single"
-          (updateSelection)="updateSelection($event)"
-          (fetchData)="getDaemonList($event)">
-  <cd-rgw-daemon-details cdTableDetail
-                         [selection]="selection">
-  </cd-rgw-daemon-details>
-</cd-table>
+<tabset>
+  <tab i18n-heading heading="Daemons List">
+    <cd-table [data]="daemons"
+              [columns]="columns"
+              columnMode="flex"
+              selectionType="single"
+              (updateSelection)="updateSelection($event)"
+              (fetchData)="getDaemonList($event)">
+      <cd-rgw-daemon-details cdTableDetail [selection]="selection">
+      </cd-rgw-daemon-details>
+    </cd-table>
+  </tab>
+
+  <tab i18n-heading
+       heading="Overall Performance">
+    <cd-grafana [grafanaPath]="'WAkugZpiz/rgw-overview?'"
+                grafanaStyle="two">
+    </cd-grafana>
+  </tab>
+</tabset>