mgr/dashboard: Progress bar does not stop in TableKeyValueComponent

Fixes: https://tracker.ceph.com/issues/35907
Signed-off-by: Volker Theile <vtheile@suse.com>
(cherry picked from commit 7243d9b67dc8c15283e30f889eb4d3fd00a5701a)

Conflicts:
	src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts :
					: Resolved in TableKeyValueComponent

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.html
index 87bdf07341b2147ee3d705ac10531c12f5d5a492..d2177a1ba26c72e66136b64de1912a7903045118 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.html
@@ -1,10 +1,10 @@
-<cd-table [data]="tableData"
+<cd-table #table
+          [data]="tableData"
           [columns]="columns"
           columnMode="flex"
           [toolHeader]="false"
           [autoReload]="autoReload"
           [header]="false"
           [footer]="false"
-          [limit]="0"
-          (fetchData)="reloadData()">
+          [limit]="0">
 </cd-table>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
index e965b6493bde11fa86f46925fcc111e6b00f31d1..304da6cb778b778e9ea155fac324ac43c2ff1276 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
@@ -204,4 +204,22 @@ describe('TableKeyValueComponent', () => {
       ]);
     });
   });
+
+  describe('subscribe fetchData', () => {
+    it('should not subscribe fetchData of table', () => {
+      component.ngOnInit();
+      expect(component.table.fetchData.observers.length).toBe(0);
+    });
+
+    it('should call fetchData', () => {
+      let called = false;
+      component.fetchData.subscribe(() => {
+        called = true;
+      });
+      component.ngOnInit();
+      expect(component.table.fetchData.observers.length).toBe(1);
+      component.table.fetchData.emit();
+      expect(called).toBeTruthy();
+    });
+  });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts
index a6ad738073e8b9266d6505d94781849b0f3371a8..34830c323ddf190b9844b9d0cb531b76fa30a188 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts
@@ -1,9 +1,18 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  ViewChild
+} from '@angular/core';
 
 import * as _ from 'lodash';
 
 import { CellTemplate } from '../../enum/cell-template.enum';
 import { CdTableColumn } from '../../models/cd-table-column';
+import { TableComponent } from '../table/table.component';
 
 /**
  * Display the given data in a 2 column data table. The left column
@@ -20,15 +29,16 @@ import { CdTableColumn } from '../../models/cd-table-column';
 })
 export class TableKeyValueComponent implements OnInit, OnChanges {
 
-  columns: Array<CdTableColumn> = [];
+  @ViewChild(TableComponent)
+  table: TableComponent;
 
   @Input() data: any;
   @Input() autoReload: any = 5000;
-
   @Input() renderObjects = false;
   // Only used if objects are rendered
   @Input() appendParentKey = true;
 
+  columns: Array<CdTableColumn> = [];
   tableData: {
     key: string,
     value: any
@@ -53,6 +63,16 @@ export class TableKeyValueComponent implements OnInit, OnChanges {
         flexGrow: 3
       }
     ];
+    // We need to subscribe the 'fetchData' event here and not in the
+    // HTML template, otherwise the data table will display the loading
+    // indicator infinitely if data is only bound via '[data]="xyz"'.
+    // See for 'loadingIndicator' in 'TableComponent::ngOnInit()'.
+    if (this.fetchData.observers.length > 0) {
+      this.table.fetchData.subscribe(() => {
+        // Forward event triggered by the 'cd-table' data table.
+        this.fetchData.emit();
+      });
+    }
     this.useData();
   }
 
@@ -137,9 +157,4 @@ export class TableKeyValueComponent implements OnInit, OnChanges {
     }
     return v;
   }
-
-  reloadData() {
-    // Forward event triggered by the 'cd-table' datatable.
-    this.fetchData.emit();
-  }
 }