Ceph » mgr » Dashboard

An exception is raised when collapsing the OSD detail pane if the backend API call is too slow.

Uncaught TypeError: this.osd is undefined
    refresh osd-details.component.ts:44
    __tryOrUnsub Subscriber.ts:265
    next Subscriber.ts:207
    _next Subscriber.ts:139
    next Subscriber.ts:99
    observe Notification.ts:47
    dispatch delay.ts:100
    _execute AsyncAction.ts:122
    execute AsyncAction.ts:97
    flush AsyncScheduler.ts:58

The cause is when the detail is collapsed, `this.osd` become undefined and got assigned.

It's not easy to reproduce if the API call is fast. But it can be artificially created by applying the following patch (collapse the detail when seeing `start refresh`):

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-det
ails.component.ts
index 2ed5e0fe1f..f5c47d4a27 100644
--- 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
@@ -38,7 +38,9 @@ export class OsdDetailsComponent implements OnChanges {
   }

   refresh() {
+    console.log('start refresh');
     this.osdService.getDetails(this.osd.id).subscribe((data) => {
+      console.log('done refresh');
       this.osd.details = data;
       this.osd.histogram_failed = '';
       if (!_.isObject(data.histogram)) {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/osd.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/osd.service.ts
index cc088d0e95..db6851b054 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/osd.service.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/osd.service.ts
@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';

 import * as _ from 'lodash';
-import { map } from 'rxjs/operators';
+import { map, delay } from 'rxjs/operators';

 import { CdDevice } from '../models/devices';
 import { SmartDataResponseV1 } from '../models/smart';
@@ -81,7 +81,7 @@ export class OsdService {
       histogram: { [key: string]: object };
       smart: { [device_identifier: string]: any };
     }
-    return this.http.get<OsdData>(`${this.path}/${id}`);
+    return this.http.get<OsdData>(`${this.path}/${id}`).pipe(delay(4000));
   }

   /**