mgr/dashboard: Datatable error panel blinking on page loading

Fixes https://tracker.ceph.com/issues/25090

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

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts
index f5384275d732ac46d920f152522d3bab4cf767e2..33a3a2d6a6e66c96a27f421f4348a5f5989f54c6 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.spec.ts
@@ -13,6 +13,8 @@ import {
 
 import { configureTestBed } from '../../../../testing/unit-test-helper';
 import { ComponentsModule } from '../../../shared/components/components.module';
+import { ViewCacheStatus } from '../../../shared/enum/view-cache-status.enum';
+import { SummaryService } from '../../../shared/services/summary.service';
 import { SharedModule } from '../../../shared/shared.module';
 import { RbdDetailsComponent } from '../rbd-details/rbd-details.component';
 import { RbdSnapshotListComponent } from '../rbd-snapshot-list/rbd-snapshot-list.component';
@@ -22,6 +24,18 @@ describe('RbdListComponent', () => {
   let component: RbdListComponent;
   let fixture: ComponentFixture<RbdListComponent>;
 
+  class SummaryServiceMock extends SummaryService {
+    data: any;
+
+    raiseError() {
+      this.summaryDataSource.error(undefined);
+    }
+
+    refresh() {
+      this.summaryDataSource.next(this.data);
+    }
+  }
+
   configureTestBed({
     imports: [
       SharedModule,
@@ -35,16 +49,46 @@ describe('RbdListComponent', () => {
       RouterTestingModule,
       HttpClientTestingModule
     ],
-    declarations: [RbdListComponent, RbdDetailsComponent, RbdSnapshotListComponent]
+    declarations: [RbdListComponent, RbdDetailsComponent, RbdSnapshotListComponent],
+    providers: [{ provide: SummaryService, useClass: SummaryServiceMock }]
   });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(RbdListComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('after ngOnInit', () => {
+    let summaryService: SummaryServiceMock;
+
+    beforeEach(() => {
+      summaryService = TestBed.get(SummaryService);
+      summaryService.data = undefined;
+      fixture.detectChanges();
+    });
+
+    it('should load images on init', () => {
+      spyOn(component, 'loadImages');
+      summaryService.data = {};
+      summaryService.refresh();
+      expect(component.loadImages).toHaveBeenCalled();
+    });
+
+    it('should not load images on init because no data', () => {
+      spyOn(component, 'loadImages');
+      summaryService.refresh();
+      expect(component.loadImages).not.toHaveBeenCalled();
+    });
+
+    it('should call error function on init when summary service fails', () => {
+      spyOn(component.table, 'reset');
+      summaryService.raiseError();
+      expect(component.table.reset).toHaveBeenCalled();
+      expect(component.viewCacheStatusList).toEqual([{ status: ViewCacheStatus.ValueException }]);
+    });
+  });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts
index 9313ff1a07166dcd00a789101ec638aba614add8..0b0b5f77a4d0d3ef401ade5088251de38be60bc4 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts
@@ -114,14 +114,17 @@ export class RbdListComponent implements OnInit, OnDestroy {
       }
     ];
 
-    this.summaryDataSubscription = this.summaryService.subscribe((data: any) => {
-      if (!data) {
+    this.summaryDataSubscription = this.summaryService.subscribe(
+      (data: any) => {
+        if (data) {
+          this.loadImages(data.executing_tasks);
+        }
+      },
+      () => {
         this.table.reset(); // Disable loading indicator.
         this.viewCacheStatusList = [{ status: ViewCacheStatus.ValueException }];
-        return;
       }
-      this.loadImages(data.executing_tasks);
-    });
+    );
   }
 
   ngOnDestroy() {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/summary.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/summary.service.ts
index f7060361040c3af392fa3a92e48a8b403dd65537..972cd3f754ebcbca96fdc977848062b3b77f4404 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/summary.service.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/summary.service.ts
@@ -57,11 +57,12 @@ export class SummaryService {
    * which is updated once every 5 seconds or when a new task is created.
    *
    * @param {(summary: any) => void} call
+   * @param {(error: any) => void} error
    * @returns {Subscription}
    * @memberof SummaryService
    */
-  subscribe(call: (summary: any) => void): Subscription {
-    return this.summaryData$.subscribe(call);
+  subscribe(call: (summary: any) => void, error?: (error: any) => void): Subscription {
+    return this.summaryData$.subscribe(call, error);
   }
 
   /**