mgr/dashboard: Progress bar does not stop in TableKeyValueComponent

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

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

src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.html

@@ -1,4 +1,5 @@
-<cd-table [data]="tableData"
+<cd-table #table
+          [data]="tableData"
           [columns]="columns"
           columnMode="flex"
           [toolHeader]="false"
@@ -6,6 +7,5 @@
           [autoSave]="false"
           [header]="false"
           [footer]="false"
-          [limit]="0"
-          (fetchData)="reloadData()">
+          [limit]="0">
 </cd-table>

src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts

@@ -210,4 +210,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();
+    });
+  });
 });

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
@@ -19,19 +28,20 @@ import { CdTableColumn } from '../../models/cd-table-column';
   styleUrls: ['./table-key-value.component.scss']
 })
 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;
@@ -57,6 +67,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();
   }
 
@@ -143,9 +163,4 @@ export class TableKeyValueComponent implements OnInit, OnChanges {
     }
     return v;
   }
-
-  reloadData() {
-    // Forward event triggered by the 'cd-table' datatable.
-    this.fetchData.emit();
-  }
 }