From: Volker Theile <vtheile@suse.com>
Date: Thu, 15 Feb 2018 10:16:11 +0000 (+0100)
Subject: mgr/dashboard_v2: Datatable related code improvements
X-Git-Tag: v13.0.2~84^2~54
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=7244fc06f6a4308ea677dcb310169d203cde6214;p=ceph.git

mgr/dashboard_v2: Datatable related code improvements

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

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/hosts/hosts.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/hosts/hosts.component.html
index 93e1a8ffd9a..29f74fab55b 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/hosts/hosts.component.html
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/hosts/hosts.component.html
@@ -9,7 +9,8 @@
           columnMode="flex"
           [toolHeader]="false"
           [footer]="false"
-          [limit]="0">
+          [limit]="0"
+          (fetchData)="getHosts()">
   <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 ? ", " : "" }}
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/hosts/hosts.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/hosts/hosts.component.ts
index 2c6f1b1cadc..dfc7b62e050 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/hosts/hosts.component.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/hosts/hosts.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 
+import { CdTableColumn } from '../../../shared/models/cd-table-column';
 import { CephShortVersionPipe } from '../../../shared/pipes/ceph-short-version.pipe';
 import { HostService } from '../../../shared/services/host.service';
 
@@ -10,7 +11,7 @@ import { HostService } from '../../../shared/services/host.service';
 })
 export class HostsComponent implements OnInit {
 
-  columns: Array<object> = [];
+  columns: Array<CdTableColumn> = [];
   hosts: Array<object> = [];
 
   @ViewChild('servicesTpl') public servicesTpl: TemplateRef<any>;
@@ -38,6 +39,9 @@ export class HostsComponent implements OnInit {
         pipe: this.cephShortVersionPipe
       }
     ];
+  }
+
+  getHosts() {
     this.hostService.list().then((resp) => {
       resp.map((host) => {
         host.services.map((service) => {
@@ -49,5 +53,4 @@ export class HostsComponent implements OnInit {
       this.hosts = resp;
     });
   }
-
 }
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/table-performance-counter/table-performance-counter.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/table-performance-counter/table-performance-counter.component.html
index dd954792d83..516c66f429b 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/table-performance-counter/table-performance-counter.component.html
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/table-performance-counter/table-performance-counter.component.html
@@ -3,7 +3,8 @@
           columnMode="flex"
           [toolHeader]="false"
           [footer]="false"
-          [limit]="0">
+          [limit]="0"
+          (fetchData)="getCounters()">
   <ng-template #valueTpl let-row="row">
     {{ row.value | dimless }} {{ row.unit }}
   </ng-template>
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/table-performance-counter/table-performance-counter.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/table-performance-counter/table-performance-counter.component.ts
index 9f9c70c65e7..6ac05c9849a 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/table-performance-counter/table-performance-counter.component.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/performance-counter/table-performance-counter/table-performance-counter.component.ts
@@ -48,7 +48,6 @@ export class TablePerformanceCounterComponent implements OnInit {
         flexGrow: 1
       }
     ];
-    this.getCounters();
   }
 
   getCounters() {
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html
index 83fd492a7b2..de2295a9709 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.html
@@ -1,6 +1,7 @@
 <tabset>
   <tab heading="Details">
-    <cd-table-key-value [data]="metadata">
+    <cd-table-key-value [data]="metadata"
+                        (fetchData)="getMetaData()">
     </cd-table-key-value>
   </tab>
   <tab heading="Performance Counters">
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.ts
index f5cef494366..418f46c707c 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-details/rgw-daemon-details.component.ts
@@ -19,17 +19,17 @@ export class RgwDaemonDetailsComponent implements OnInit {
   constructor(private rgwDaemonService: RgwDaemonService) { }
 
   ngOnInit() {
-    this.getMetaData();
+    // Get the service id of the first selected row.
+    if (this.selected.length > 0) {
+      this.serviceId = this.selected[0].id;
+    }
   }
 
-  private getMetaData() {
-    if (this.selected.length < 1) {
+  getMetaData() {
+    if (_.isEmpty(this.serviceId)) {
       return;
     }
 
-    // Get the service id of the first selected row.
-    this.serviceId = this.selected[0].id;
-
     this.rgwDaemonService.get(this.serviceId)
       .then((resp) => {
         const metadata = [];
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html
index 77814b73ebb..22fe789373d 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.html
@@ -5,6 +5,7 @@
 </nav>
 <cd-table [data]="daemons"
           [columns]="columns"
+          columnMode="flex"
           [detailsComponent]="detailsComponent"
           (fetchData)="getDaemonList()"
           [beforeShowDetails]="beforeShowDetails">
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.ts
index c9d02510abd..f4be3192364 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/rgw/rgw-daemon-list/rgw-daemon-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { CdTableColumn } from '../../../shared/models/cd-table-column';
 import { CephShortVersionPipe } from '../../../shared/pipes/ceph-short-version.pipe';
@@ -9,38 +9,35 @@ import { RgwDaemonService } from '../services/rgw-daemon.service';
   templateUrl: './rgw-daemon-list.component.html',
   styleUrls: ['./rgw-daemon-list.component.scss']
 })
-export class RgwDaemonListComponent implements OnInit {
+export class RgwDaemonListComponent {
 
   columns: Array<CdTableColumn> = [];
   daemons: Array<object> = [];
 
   detailsComponent = 'RgwDaemonDetailsComponent';
 
-  constructor(private rgwDaemonService: RgwDaemonService) {
+  constructor(private rgwDaemonService: RgwDaemonService,
+              cephShortVersionPipe: CephShortVersionPipe) {
     this.columns = [
       {
         name: 'ID',
         prop: 'id',
-        width: 100
+        flexGrow: 2
       },
       {
         name: 'Hostname',
         prop: 'server_hostname',
-        width: 100
+        flexGrow: 2
       },
       {
         name: 'Version',
         prop: 'version',
-        width: 50,
-        pipe: new CephShortVersionPipe()
+        flexGrow: 1,
+        pipe: cephShortVersionPipe
       }
     ];
   }
 
-  ngOnInit() {
-    this.getDaemonList();
-  }
-
   getDaemonList() {
     this.rgwDaemonService.list()
       .then((resp) => {
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.html
index ad5346f18ef..b09e5e9e1ba 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.html
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.html
@@ -4,5 +4,6 @@
           [toolHeader]="false"
           [header]="false"
           [footer]="false"
-          [limit]="0">
+          [limit]="0"
+          (fetchData)="reloadData()">
 </cd-table>
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts
index b8af65a120c..46e4f71f90e 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 import { CellTemplate } from '../../enum/cell-template.enum';
 import { CdTableColumn } from '../../models/cd-table-column';
@@ -39,6 +39,11 @@ export class TableKeyValueComponent implements OnInit {
    */
   @Input() value = 'value';
 
+  /**
+   * The function that will be called to update the input data.
+   */
+  @Output() fetchData = new EventEmitter();
+
   constructor() { }
 
   ngOnInit() {
@@ -54,4 +59,9 @@ export class TableKeyValueComponent implements OnInit {
       }
     ];
   }
+
+  reloadData() {
+    // Forward event triggered by the 'cd-table' datatable.
+    this.fetchData.emit();
+  }
 }
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.html
index 043362f7393..a3c66b861ac 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.html
@@ -60,7 +60,7 @@
                  [headerHeight]="header ? 'auto' : 0"
                  [footerHeight]="footer ? 'auto' : 0"
                  [limit]="limit > 0 ? limit : undefined"
-                 [loadingIndicator]="true"
+                 [loadingIndicator]="loadingIndicator"
                  [rowHeight]="'auto'">
     <!-- Row Detail Template -->
     <ngx-datatable-row-detail (toggle)="updateDetailView()">
@@ -71,7 +71,6 @@
 
 <!-- cell templates that can be accessed from outside -->
 <ng-template #tableCellBoldTpl
-             let-row="row"
              let-value="value">
   <strong>{{ value }}</strong>
 </ng-template>
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.scss b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.scss
index 2d19806633e..80136b63edd 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.scss
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.scss
@@ -76,6 +76,7 @@
   }
   .input-group.dataTables_paginate {
     width: 8%;
+    min-width: 85px;
   }
 }
 
@@ -83,6 +84,35 @@
   border: $border-color;
   margin-bottom: 0;
   max-width: none!important;
+  .progress-linear {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 5px;
+    padding: 0;
+    margin: 0;
+    .container {
+      background-color: $oa-color-light-blue;
+      .bar {
+        left: 0;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        overflow: hidden;
+        background-color: $oa-color-light-blue;
+      }
+      .bar:before{
+        display: block;
+        position: absolute;
+        content: "";
+        left: -200px;
+        width: 200px;
+        height: 100%;
+        background-color: $oa-color-blue;
+        animation: progress-loading 3s linear infinite;
+      }
+    }
+  }
   .datatable-header {
     background-clip: padding-box;
     background-color: #f9f9f9;
@@ -180,3 +210,25 @@
     }
   }
 }
+
+@keyframes progress-loading {
+    from {
+      left: -200px;
+      width: 15%;
+    }
+    50% {
+      width: 30%;
+    }
+    70% {
+      width: 70%;
+    }
+    80% {
+      left: 50%;
+    }
+    95% {
+      left: 120%;
+    }
+    to {
+      left: 100%;
+    }
+}
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts
index db158649453..cefecdc0468 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts
@@ -31,7 +31,7 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges {
   @ViewChild('routerLinkTpl') routerLinkTpl: TemplateRef<any>;
 
   // This is the array with the items to be shown.
-  @Input() data: any[];
+  @Input() data: any[] = [];
   // Each item -> { prop: 'attribute name', name: 'display name' }
   @Input() columns: CdTableColumn[];
   // Method used for setting column widths.
@@ -50,6 +50,7 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges {
   // The current selection is passed as function argument. To do not display
   // the details page, return false.
   @Input() beforeShowDetails: Function;
+
   // Should be the function that will update the input data.
   @Output() fetchData = new EventEmitter();
 
@@ -60,6 +61,7 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges {
   search = '';
   rows = [];
   selected = [];
+  loadingIndicator = false;
   paginationClasses = {
     pagerLeftArrow: 'i fa fa-angle-double-left',
     pagerRightArrow: 'i fa fa-angle-double-right',
@@ -118,11 +120,13 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges {
   }
 
   reloadData() {
+    this.loadingIndicator = true;
     this.fetchData.emit();
   }
 
   useData() {
     this.rows = [...this.data];
+    this.loadingIndicator = false;
   }
 
   toggleExpandRow() {