mgr/dashboard_v2: add performance counter page

Signed-off-by: Tiago Melo <tmelo@suse.com>

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/app-routing.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/app-routing.module.ts
index 490bce77f8941c97de86d17529f5163bd657f025..96afda406690c4994f3e06d0ddb0816cb120507c 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/app-routing.module.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/app-routing.module.ts
@@ -4,6 +4,9 @@ import { RouterModule, Routes } from '@angular/router';
 import { PoolDetailComponent } from './ceph/block/pool-detail/pool-detail.component';
 import { HostsComponent } from './ceph/cluster/hosts/hosts.component';
 import { DashboardComponent } from './ceph/dashboard/dashboard/dashboard.component';
+import {
+  PerformanceCounterComponent
+} from './ceph/performance-counter/performance-counter/performance-counter.component';
 import { RgwDaemonListComponent } from './ceph/rgw/rgw-daemon-list/rgw-daemon-list.component';
 import { LoginComponent } from './core/auth/login/login.component';
 import { AuthGuardService } from './shared/services/auth-guard.service';
@@ -22,7 +25,12 @@ const routes: Routes = [
     component: RgwDaemonListComponent,
     canActivate: [AuthGuardService]
   },
-  { path: 'block/pool/:name', component: PoolDetailComponent, canActivate: [AuthGuardService] }
+  { path: 'block/pool/:name', component: PoolDetailComponent, canActivate: [AuthGuardService] },
+  {
+    path: 'perf_counters/:type/:id',
+    component: PerformanceCounterComponent,
+    canActivate: [AuthGuardService]
+  }
 ];
 
 @NgModule({

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter.module.ts
index 18ff9ca891cff6d41b80a6b4fb22396efe38bc5b..f2c20299f4c4ec279ac75453bfc4b70ff4736011 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter.module.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter.module.ts
@@ -1,17 +1,25 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
 
 import { SharedModule } from '../../shared/shared.module';
+import {
+  PerformanceCounterComponent
+} from './performance-counter/performance-counter.component';
 import { TablePerformanceCounterService } from './services/table-performance-counter.service';
-import { TablePerformanceCounterComponent } from './table-performance-counter/table-performance-counter.component'; // tslint:disable-line
+import {
+  TablePerformanceCounterComponent
+} from './table-performance-counter/table-performance-counter.component';
 
 @NgModule({
   imports: [
     CommonModule,
-    SharedModule
+    SharedModule,
+    RouterModule
   ],
   declarations: [
-    TablePerformanceCounterComponent
+    TablePerformanceCounterComponent,
+    PerformanceCounterComponent
   ],
   providers: [
     TablePerformanceCounterService

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter/performance-counter.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter/performance-counter.component.html
new file mode 100644 (file)
index 0000000..6fac560
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter/performance-counter.component.html
@@ -0,0 +1,17 @@
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item">Cluster</li>
+    <li class="breadcrumb-item active">
+      <a [routerLink]="['/monitor']">Monitors</a>
+    </li>
+    <li class="breadcrumb-item active">{{ serviceType }}.{{ serviceId }} </li>
+  </ol>
+</nav>
+
+<fieldset>
+  <legend>Performance Counters</legend>
+
+  <cd-table-performance-counter [serviceType]="serviceType"
+                                [serviceId]="serviceId">
+  </cd-table-performance-counter>
+</fieldset>

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter/performance-counter.component.scss b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter/performance-counter.component.scss
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter/performance-counter.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter/performance-counter.component.spec.ts
new file mode 100644 (file)
index 0000000..f2e2dae
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter/performance-counter.component.spec.ts
@@ -0,0 +1,43 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { PerformanceCounterModule } from '../performance-counter.module';
+import { TablePerformanceCounterService } from '../services/table-performance-counter.service';
+import { PerformanceCounterComponent } from './performance-counter.component';
+
+describe('PerformanceCounterComponent', () => {
+  let component: PerformanceCounterComponent;
+  let fixture: ComponentFixture<PerformanceCounterComponent>;
+
+  const fakeService = {
+    get: (service_type: string, service_id: string) => {
+      return new Promise(function(resolve, reject) {
+        return [];
+      });
+    },
+    list: () => {
+      return new Promise(function(resolve, reject) {
+        return {};
+      });
+    }
+  };
+
+  beforeEach(
+    async(() => {
+      TestBed.configureTestingModule({
+        imports: [PerformanceCounterModule, RouterTestingModule],
+        providers: [{ provide: TablePerformanceCounterService, useValue: fakeService }]
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PerformanceCounterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter/performance-counter.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter/performance-counter.component.ts
new file mode 100644 (file)
index 0000000..0877ee5
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter/performance-counter.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { TablePerformanceCounterService } from '../services/table-performance-counter.service';
+
+@Component({
+  selector: 'cd-performance-counter',
+  templateUrl: './performance-counter.component.html',
+  styleUrls: ['./performance-counter.component.scss']
+})
+export class PerformanceCounterComponent implements OnInit, OnDestroy {
+  serviceId: string;
+  serviceType: string;
+  routeParamsSubscribe: any;
+
+  constructor(
+    private route: ActivatedRoute,
+    private performanceCounterService: TablePerformanceCounterService
+  ) {}
+
+  ngOnInit() {
+    this.routeParamsSubscribe = this.route.params.subscribe(
+      (params: { type: string; id: string }) => {
+        this.serviceId = params.id;
+        this.serviceType = params.type;
+      }
+    );
+  }
+
+  ngOnDestroy() {
+    this.routeParamsSubscribe.unsubscribe();
+  }
+}