mgr/dashboard_v2: Use datatable on Cluster/Hosts page.

Signed-off-by: Volker Theile <[email protected]>

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

@@ -1,15 +1,23 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
+import { ComponentsModule } from '../../shared/components/components.module';
 import { SharedModule } from '../../shared/shared.module';
 import { HostsComponent } from './hosts/hosts.component';
 import { ServiceListPipe } from './service-list.pipe';
 
 @NgModule({
   imports: [
     CommonModule,
+    ComponentsModule,
     SharedModule
   ],
-  declarations: [HostsComponent, ServiceListPipe],
+  declarations: [
+    HostsComponent,
+    ServiceListPipe
+  ],
+  providers: [
+    ServiceListPipe
+  ]
 })
 export class ClusterModule { }

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

@@ -4,31 +4,9 @@
     <li class="breadcrumb-item active">Hosts</li>
   </ol>
 </nav>
-<table class="table table-bordered">
-  <thead>
-  <tr>
-    <th>
-      Hostname
-    </th>
-    <th>
-      Services
-    </th>
-    <th>
-      Version
-    </th>
-  </tr>
-  </thead>
-  <tbody>
-  <tr *ngFor="let host of hosts">
-    <td>
-      {{ host.hostname }}
-    </td>
-    <td>
-      {{ host.services | serviceList }}
-    </td>
-    <td>
-      {{ host.ceph_version | cephShortVersion }}
-    </td>
-  </tr>
-  </tbody>
-</table>
+<cd-table [data]="hosts"
+          [columns]="columns"
+          columnMode="flex"
+          [toolHeader]="false"
+          [footer]="false">
+</cd-table>

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

@@ -1,6 +1,7 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { async, ComponentFixture, TestBed } from '@angular/core/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';
@@ -13,11 +14,15 @@ describe('HostsComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         SharedModule,
-        HttpClientTestingModule
+        HttpClientTestingModule,
+        ComponentsModule
       ],
       declarations: [
         HostsComponent,
         ServiceListPipe
+      ],
+      providers: [
+        ServiceListPipe
       ]
     })
     .compileComponents();

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

@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
+import { ServiceListPipe } from '../service-list.pipe';
+
+import { CephShortVersionPipe } from '../../../shared/pipes/ceph-short-version.pipe';
 import { HostService } from '../../../shared/services/host.service';
 
 @Component({
@@ -9,9 +12,32 @@ import { HostService } from '../../../shared/services/host.service';
 })
 export class HostsComponent implements OnInit {
 
-  hosts: any = [];
+  columns: Array<object> = [];
+  hosts: Array<object> = [];
 
-  constructor(private hostService: HostService) { }
+  constructor(private hostService: HostService,
+              cephShortVersionPipe: CephShortVersionPipe,
+              serviceListPipe: ServiceListPipe) {
+    this.columns = [
+      {
+        name: 'Hostname',
+        prop: 'hostname',
+        flexGrow: 1
+      },
+      {
+        name: 'Services',
+        prop: 'services',
+        flexGrow: 3,
+        pipe: serviceListPipe
+      },
+      {
+        name: 'Version',
+        prop: 'ceph_version',
+        flexGrow: 1,
+        pipe: cephShortVersionPipe
+      }
+    ];
+  }
 
   ngOnInit() {
     this.hostService.list().then((resp) => {

src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/table/table.component.html

@@ -1,6 +1,6 @@
 <div class="dataTables_wrapper">
   <div class="dataTables_header clearfix"
-       *ngIf="header">
+       *ngIf="toolHeader">
     <!-- actions -->
     <div class="oadatatableactions">
         <ng-content select="table-actions"></ng-content>
@@ -54,9 +54,10 @@
                  [selected]="selected"
                  (select)="toggleExpandRow($event)"
                  [columns]="columns"
-                 [columnMode]="'force'"
+                 [columnMode]="columnMode"
                  [rows]="rows"
-                 [footerHeight]="'auto'"
+                 [headerHeight]="header ? 'auto' : 0"
+                 [footerHeight]="footer ? 'auto' : 0"
                  [limit]="limit"
                  [loadingIndicator]="true"
                  [rowHeight]="'auto'">

src/pybind/mgr/dashboard_v2/frontend/src/app/shared/components/table/table.component.ts

@@ -25,12 +25,18 @@ export class TableComponent implements OnInit, OnChanges {
 
   // This is the array with the items to be shown
   @Input() data: any[];
-  // each item -> { prop: 'attribute name', name: 'display name' }
+  // Each item -> { prop: 'attribute name', name: 'display name' }
   @Input() columns: TableColumn[];
-  // name of the component fe 'TableDetailsComponent'
+  // Method used for setting column widths.
+  @Input() columnMode ?= 'force';
+  // Name of the component fe 'TableDetailsComponent'
   @Input() detailsComponent?: string;
+  // Display the tool header, including reload button, pagination and search fields?
+  @Input() toolHeader ?= true;
+  // Display the table header?
   @Input() header ?= true;
-
+  // Display the table footer?
+  @Input() footer ?= true;
   // Should be the function that will update the input data
   @Output() fetchData = new EventEmitter();
 

src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/pipes.module.ts

@@ -24,6 +24,7 @@ import { HealthColorPipe } from './health-color.pipe';
     EllipsisPipe
   ],
   providers: [
+    CephShortVersionPipe,
     DimlessBinaryPipe,
     DimlessPipe
   ]