mgr/dashboard: Re-enable OSD's table autoReload

Fixes: https://tracker.ceph.com/issues/45303
Signed-off-by: Tiago Melo <tmelo@suse.com>
(cherry picked from commit e5d94e24ecf676afc5bca7810459f8d1ebda4642)

Conflicts:
  src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html
    - Template structure change
  src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
    - Template structure change
  src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/device-list/device-list.component.ts
    - Optional chaining is not available in older version of TypeScript, use
      `_.get` to implement it.

Signed-off-by: Kiefer Chang <kiefer.chang@suse.com>

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 3430d00b48afc6d5c165c6739b5bc0401e4d39a1..3769577cb3786c9074d7e1e5da5ff37a74e79b3c 100644 (file)
--- 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
@@ -2,22 +2,20 @@
         id="tabset-osd-details">
   <tab heading="Devices"
        i18n-heading>
-    <cd-device-list *ngIf="osd.loaded && osd.id !== null"
-                    [osdId]="osd.id"></cd-device-list>
+    <cd-device-list [osdId]="osd?.id"></cd-device-list>
   </tab>
 
   <tab heading="Attributes (OSD map)"
        i18n-heading>
-    <cd-table-key-value *ngIf="osd.loaded"
-                        [data]="osd.details.osd_map">
+    <cd-table-key-value [data]="osd?.details?.osd_map">
     </cd-table-key-value>
   </tab>
 
   <tab heading="Metadata"
        i18n-heading>
-    <cd-table-key-value *ngIf="osd.loaded && osd.details.osd_metadata; else noMetaData"
+    <cd-table-key-value *ngIf="osd?.details?.osd_metadata; else noMetaData"
                         (fetchData)="refresh()"
-                        [data]="osd.details.osd_metadata">
+                        [data]="osd?.details?.osd_metadata">
     </cd-table-key-value>
     <ng-template #noMetaData>
       <cd-alert-panel type="warning"
@@ -27,33 +25,33 @@
 
   <tab heading="Device health"
        i18n-heading>
-    <cd-smart-list [osdId]="osd.id"></cd-smart-list>
+    <cd-smart-list [osdId]="osd?.id"></cd-smart-list>
   </tab>
 
   <tab heading="Performance counter"
        i18n-heading>
-    <cd-table-performance-counter *ngIf="osd.loaded"
+    <cd-table-performance-counter *ngIf="osd?.details"
                                   serviceType="osd"
-                                  [serviceId]="osd.id">
+                                  [serviceId]="osd?.id">
     </cd-table-performance-counter>
   </tab>
 
   <tab heading="Histogram"
        i18n-heading>
-    <cd-alert-panel *ngIf="osd.loaded && osd.histogram_failed"
+    <cd-alert-panel *ngIf="osd?.histogram_failed"
                     type="warning"
                     i18n>Histogram not available: {{ osd.histogram_failed }}</cd-alert-panel>
 
     <div class="row"
-         *ngIf="osd.loaded && osd.details.histogram">
+         *ngIf="osd?.details?.histogram">
       <div class="col-md-6">
         <h4 i18n>Writes</h4>
-        <cd-osd-performance-histogram [histogram]="osd.details.histogram.osd.op_w_latency_in_bytes_histogram">
+        <cd-osd-performance-histogram [histogram]="osd?.details?.histogram?.osd?.op_w_latency_in_bytes_histogram">
         </cd-osd-performance-histogram>
       </div>
       <div class="col-md-6">
         <h4 i18n>Reads</h4>
-        <cd-osd-performance-histogram [histogram]="osd.details.histogram.osd.op_r_latency_out_bytes_histogram">
+        <cd-osd-performance-histogram [histogram]="osd?.details?.histogram?.osd?.op_r_latency_out_bytes_histogram">
         </cd-osd-performance-histogram>
       </div>
     </div>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.ts
index 9cac703d2622692b3cd24554df3cbb9e87265af6..0f9e7f701a82ca754c357278a68d92fcfc8dcd67 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.ts
@@ -17,7 +17,6 @@ export class OsdDetailsComponent implements OnChanges {
 
   osd: {
     id?: number;
-    loaded?: boolean;
     details?: any;
     histogram_failed?: string;
     tree?: any;
@@ -29,11 +28,11 @@ export class OsdDetailsComponent implements OnChanges {
   }
 
   ngOnChanges() {
-    this.osd = {
-      loaded: false
-    };
-    if (this.selection) {
+    if (_.get(this, 'osd.id') !== _.get(this, 'selection.id')) {
       this.osd = this.selection;
+    }
+
+    if (_.isNumber(_.get(this, 'osd.id'))) {
       this.refresh();
     }
   }
@@ -46,7 +45,6 @@ export class OsdDetailsComponent implements OnChanges {
         this.osd.histogram_failed = data.histogram;
         this.osd.details.histogram = undefined;
       }
-      this.osd.loaded = true;
     });
   }
 }

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 55d0e0219360f5e58e6852e6e7b71164aad61c36..65a38cd90a3d6e30f74d8b3b4360b3a527dab467 100644 (file)
--- 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,9 +1,7 @@
 <tabset>
   <tab i18n-heading
        heading="OSDs List">
-
-    <cd-table [autoReload]="false"
-              [data]="osds"
+    <cd-table [data]="osds"
               (fetchData)="getOsdList()"
               [columns]="columns"
               selectionType="multiClick"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/device-list/device-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/device-list/device-list.component.ts
index d16ee7cbe8d38d7d7328d80af5417b508b6bf3de..949b8acf14a26682125ad65b4d09ccb7c19e300f 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/device-list/device-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/device-list/device-list.component.ts
@@ -1,5 +1,6 @@
 import { DatePipe } from '@angular/common';
-import { Component, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, TemplateRef, ViewChild } from '@angular/core';
+
 import { I18n } from '@ngx-translate/i18n-polyfill';
 import { HostService } from '../../../shared/api/host.service';
 import { OsdService } from '../../../shared/api/osd.service';
@@ -12,7 +13,7 @@ import { CdDevice } from '../../../shared/models/devices';
   templateUrl: './device-list.component.html',
   styleUrls: ['./device-list.component.scss']
 })
-export class DeviceListComponent implements OnInit {
+export class DeviceListComponent implements OnChanges, OnInit {
   @Input()
   hostname = '';
   @Input()
@@ -40,12 +41,6 @@ export class DeviceListComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    const updateDevicesFn = (devices: CdDevice[]) => (this.devices = devices);
-    if (this.hostname) {
-      this.hostService.getDevices(this.hostname).subscribe(updateDevicesFn);
-    } else if (this.osdId !== null) {
-      this.osdService.getDevices(this.osdId).subscribe(updateDevicesFn);
-    }
     this.columns = [
       { prop: 'devid', name: this.i18n('Device ID'), minWidth: 200 },
       {
@@ -79,4 +74,13 @@ export class DeviceListComponent implements OnInit {
       { prop: 'readableDaemons', name: this.i18n('Daemons') }
     ];
   }
+
+  ngOnChanges() {
+    const updateDevicesFn = (devices: CdDevice[]) => (this.devices = devices);
+    if (this.hostname) {
+      this.hostService.getDevices(this.hostname).subscribe(updateDevicesFn);
+    } else if (this.osdId !== null) {
+      this.osdService.getDevices(this.osdId).subscribe(updateDevicesFn);
+    }
+  }
 }