mgr/dashboard: allow refreshing inventory page

Fixes: https://tracker.ceph.com/issues/43420
Signed-off-by: Kiefer Chang <kiefer.chang@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory-devices/inventory-devices.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory-devices/inventory-devices.component.ts
index ce5d3c2cfe32682a95bde573f5dafcfccf57d760..79744611fd7d8430e39813a5c9dbed9d226c7091 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory-devices/inventory-devices.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory-devices/inventory-devices.component.ts
@@ -1,11 +1,21 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild
+} from '@angular/core';
 import { I18n } from '@ngx-translate/i18n-polyfill';
 
 import * as _ from 'lodash';
 import { BsModalService } from 'ngx-bootstrap/modal';
+import { Subscription } from 'rxjs';
 
 import { OrchestratorService } from '../../../../shared/api/orchestrator.service';
 import { FormModalComponent } from '../../../../shared/components/form-modal/form-modal.component';
+import { TableComponent } from '../../../../shared/datatable/table/table.component';
 import { CellTemplate } from '../../../../shared/enum/cell-template.enum';
 import { Icons } from '../../../../shared/enum/icons.enum';
 import { NotificationType } from '../../../../shared/enum/notification-type.enum';
@@ -24,7 +34,10 @@ import { InventoryDevice } from './inventory-device.model';
   templateUrl: './inventory-devices.component.html',
   styleUrls: ['./inventory-devices.component.scss']
 })
-export class InventoryDevicesComponent implements OnInit, OnChanges {
+export class InventoryDevicesComponent implements OnInit, OnDestroy {
+  @ViewChild(TableComponent, { static: true })
+  table: TableComponent;
+
   // Devices
   @Input() devices: InventoryDevice[] = [];
 
@@ -46,11 +59,14 @@ export class InventoryDevicesComponent implements OnInit, OnChanges {
 
   @Output() filterChange = new EventEmitter<CdTableColumnFiltersChange>();
 
+  @Output() fetchInventory = new EventEmitter();
+
   icons = Icons;
   columns: Array<CdTableColumn> = [];
   selection: CdTableSelection = new CdTableSelection();
   permission: Permission;
   tableActions: CdTableAction[];
+  fetchInventorySub: Subscription;
 
   constructor(
     private authStorageService: AuthStorageService,
@@ -141,10 +157,18 @@ export class InventoryDevicesComponent implements OnInit, OnChanges {
         col.filterable = true;
       }
     });
+
+    if (this.fetchInventory.observers.length > 0) {
+      this.fetchInventorySub = this.table.fetchData.subscribe(() => {
+        this.fetchInventory.emit();
+      });
+    }
   }
 
-  ngOnChanges() {
-    this.devices = [...this.devices];
+  ngOnDestroy() {
+    if (this.fetchInventorySub) {
+      this.fetchInventorySub.unsubscribe();
+    }
   }
 
   onColumnFiltersChanged(event: CdTableColumnFiltersChange) {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory.component.html
index 8f573cf9810eff679f7b1efb2591426a856506a3..de8a1145bd2002f2f31cfcf4b661c3ceddd5e9aa 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory.component.html
@@ -11,7 +11,8 @@
     <div class="col-md-12">
       <cd-inventory-devices [devices]="devices"
                             [hiddenColumns]="hostname === undefined ? [] : ['hostname']"
-                            selectionType="single">
+                            selectionType="single"
+                            (fetchInventory)="refresh()">
       </cd-inventory-devices>
     </div>
   </div>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory.component.ts
index f7481ec417df850aee5fbf1390bd7b67ef4ee8a8..a1c6a4eccc1f01c1f61961c1e13ae010362f4ba4 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory.component.ts
@@ -22,7 +22,6 @@ export class InventoryComponent implements OnChanges, OnInit {
   docsUrl: string;
 
   devices: Array<InventoryDevice> = [];
-  isLoadingDevices = false;
 
   constructor(
     private cephReleaseNamePipe: CephReleaseNamePipe,
@@ -48,10 +47,6 @@ export class InventoryComponent implements OnChanges, OnInit {
     this.orchService.status().subscribe((data: { available: boolean }) => {
       this.orchestratorExist = data.available;
       this.checkingOrchestrator = false;
-
-      if (this.orchestratorExist) {
-        this.getInventory();
-      }
     });
   }
 
@@ -63,23 +58,20 @@ export class InventoryComponent implements OnChanges, OnInit {
   }
 
   getInventory() {
-    if (this.isLoadingDevices) {
-      return;
-    }
-    this.isLoadingDevices = true;
     if (this.hostname === '') {
-      this.isLoadingDevices = false;
       return;
     }
     this.orchService.inventoryDeviceList(this.hostname).subscribe(
       (devices: InventoryDevice[]) => {
         this.devices = devices;
-        this.isLoadingDevices = false;
       },
       () => {
         this.devices = [];
-        this.isLoadingDevices = false;
       }
     );
   }
+
+  refresh() {
+    this.getInventory();
+  }
 }