mgr/dashboard_v2: Create links to perf counters

- Display links to the services in the Hosts data table
- Add missing MDS performance counter backend

Signed-off-by: Volker Theile <vtheile@suse.com>

src/pybind/mgr/dashboard_v2/controllers/perf_counters.py

@@ -53,6 +53,7 @@ class PerfCounter(RESTController):
 @AuthRequired()
 class PerfCounters(RESTController):
     def __init__(self):
+        self.mds = PerfCounter('mds', self.mgr)
         self.mon = PerfCounter('mon', self.mgr)
         self.osd = PerfCounter('osd', self.mgr)
         self.rgw = PerfCounter('rgw', self.mgr)

src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/cluster.module.ts

@@ -1,26 +1,25 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
 
 import { ComponentsModule } from '../../shared/components/components.module';
 import { SharedModule } from '../../shared/shared.module';
 import { HostsComponent } from './hosts/hosts.component';
 import { MonitorService } from './monitor.service';
 import { MonitorComponent } from './monitor/monitor.component';
-import { ServiceListPipe } from './service-list.pipe';
 
 @NgModule({
   imports: [
     CommonModule,
     ComponentsModule,
-    SharedModule
+    SharedModule,
+    RouterModule
   ],
   declarations: [
     HostsComponent,
-    ServiceListPipe,
     MonitorComponent,
   ],
   providers: [
-    ServiceListPipe,
     MonitorService
   ]
 })

src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/hosts/hosts.component.html

@@ -10,4 +10,9 @@
           [toolHeader]="false"
           [footer]="false"
           [limit]="0">
+  <ng-template #servicesTpl let-value="value">
+    <span *ngFor="let service of value; last as isLast">
+      <a [routerLink]="[service.cdLink]">{{ service.type }}.{{ service.id }}</a>{{ !isLast ? ", " : "" }}
+    </span>
+  </ng-template>
 </cd-table>

src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/hosts/hosts.component.spec.ts

@@ -1,9 +1,9 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { ComponentsModule } from '../../../shared/components/components.module';
 import { SharedModule } from '../../../shared/shared.module';
-import { ServiceListPipe } from '../service-list.pipe';
 import { HostsComponent } from './hosts.component';
 
 describe('HostsComponent', () => {
@@ -15,14 +15,11 @@ describe('HostsComponent', () => {
       imports: [
         SharedModule,
         HttpClientTestingModule,
-        ComponentsModule
+        ComponentsModule,
+        RouterTestingModule
       ],
       declarations: [
-        HostsComponent,
-        ServiceListPipe
-      ],
-      providers: [
-        ServiceListPipe
+        HostsComponent
       ]
     })
     .compileComponents();

src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/hosts/hosts.component.ts

@@ -1,6 +1,4 @@
-import { Component, OnInit } from '@angular/core';
-
-import { ServiceListPipe } from '../service-list.pipe';
+import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 
 import { CephShortVersionPipe } from '../../../shared/pipes/ceph-short-version.pipe';
 import { HostService } from '../../../shared/services/host.service';
@@ -15,9 +13,12 @@ export class HostsComponent implements OnInit {
   columns: Array<object> = [];
   hosts: Array<object> = [];
 
+  @ViewChild('servicesTpl') public servicesTpl: TemplateRef<any>;
+
   constructor(private hostService: HostService,
-              cephShortVersionPipe: CephShortVersionPipe,
-              serviceListPipe: ServiceListPipe) {
+              private cephShortVersionPipe: CephShortVersionPipe) { }
+
+  ngOnInit() {
     this.columns = [
       {
         name: 'Hostname',
@@ -28,19 +29,23 @@ export class HostsComponent implements OnInit {
         name: 'Services',
         prop: 'services',
         flexGrow: 3,
-        pipe: serviceListPipe
+        cellTemplate: this.servicesTpl
       },
       {
         name: 'Version',
         prop: 'ceph_version',
         flexGrow: 1,
-        pipe: cephShortVersionPipe
+        pipe: this.cephShortVersionPipe
       }
     ];
-  }
-
-  ngOnInit() {
     this.hostService.list().then((resp) => {
+      resp.map((host) => {
+        host.services.map((service) => {
+          service.cdLink = `/perf_counters/${service.type}/${service.id}`;
+          return service;
+        });
+        return host;
+      });
       this.hosts = resp;
     });
   }

src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/service-list.pipe.spec.ts

@@ -1,8 +0,0 @@
-import { ServiceListPipe } from './service-list.pipe';
-
-describe('ServiceListPipe', () => {
-  it('create an instance', () => {
-    const pipe = new ServiceListPipe();
-    expect(pipe).toBeTruthy();
-  });
-});

src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/service-list.pipe.ts

@@ -1,14 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'serviceList'
-})
-export class ServiceListPipe implements PipeTransform {
-  transform(value: any, args?: any): any {
-    const strings = [];
-    value.forEach((server) => {
-      strings.push(server.type + '.' + server.id);
-    });
-    return strings.join(', ');
-  }
-}

src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter/performance-counter.component.html

@@ -1,16 +1,6 @@
-<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>
-
+  <h3>{{ serviceType }}.{{ serviceId }}</h3>
   <cd-table-performance-counter [serviceType]="serviceType"
                                 [serviceId]="serviceId">
   </cd-table-performance-counter>

src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/performance-counter/performance-counter.component.ts

@@ -1,8 +1,6 @@
 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',
@@ -13,10 +11,7 @@ export class PerformanceCounterComponent implements OnInit, OnDestroy {
   serviceType: string;
   routeParamsSubscribe: any;
 
-  constructor(
-    private route: ActivatedRoute,
-    private performanceCounterService: TablePerformanceCounterService
-  ) {}
+  constructor(private route: ActivatedRoute) { }
 
   ngOnInit() {
     this.routeParamsSubscribe = this.route.params.subscribe(