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

Fixes: https://tracker.ceph.com/issues/45303
Signed-off-by: Tiago Melo <tmelo@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 569062d66ffceb1f8fe5516e85d8cf162cbb2e15..68225e2e46746258e5b8f5db6878a335aa6746b0 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
@@ -7,16 +7,14 @@
       <a ngbNavLink
          i18n>Devices</a>
       <ng-template ngbNavContent>
-        <cd-device-list *ngIf="osd.loaded && osd.id !== null"
-                        [osdId]="osd.id"></cd-device-list>
+        <cd-device-list [osdId]="osd?.id"></cd-device-list>
       </ng-template>
     </li>
     <li ngbNavItem>
       <a ngbNavLink
          i18n>Attributes (OSD map)</a>
       <ng-template ngbNavContent>
-        <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>
       </ng-template>
     </li>
@@ -24,9 +22,9 @@
       <a ngbNavLink
          i18n>Metadata</a>
       <ng-template ngbNavContent>
-        <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"
@@ -38,16 +36,16 @@
       <a ngbNavLink
          i18n>Device health</a>
       <ng-template ngbNavContent>
-        <cd-smart-list [osdId]="osd.id"></cd-smart-list>
+        <cd-smart-list [osdId]="osd?.id"></cd-smart-list>
       </ng-template>
     </li>
     <li ngbNavItem>
       <a ngbNavLink
          i18n>Performance counter</a>
       <ng-template ngbNavContent>
-        <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>
       </ng-template>
     </li>
@@ -55,20 +53,20 @@
       <a ngbNavLink
          i18n>Histogram</a>
       <ng-template ngbNavContent>
-        <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>
+                        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..2ed5e0fe1f76cf9e2c1b7a38a2ef952d2463029a 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 (this.osd?.id !== this.selection?.id) {
       this.osd = this.selection;
+    }
+
+    if (_.isNumber(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 91ddad6ae66884a1f99b641f1a1993c74c38dea9..bd687a9daae67748fad9304a477b909d90a5d2af 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
@@ -5,8 +5,7 @@
     <a ngbNavLink
        i18n>OSDs List</a>
     <ng-template ngbNavContent>
-      <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 2465d29c2168374f952a8fcc6a069bd28794f7c3..cc59e674f48f640e1d8b5b469a29d64eb6411c15 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,5 @@
 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';
 
@@ -14,7 +14,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()
@@ -42,12 +42,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 },
       {
@@ -81,4 +75,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);
+    }
+  }
 }