mgr/dashboard: debounce reload data with serverSide

Whenever we use serverSide (paginate through backend) we should
debounce reloadData since it might call api calls too much times.

Signed-off-by: Pere Diaz Bou <pdiazbou@redhat.com>
(cherry picked from commit c832464998ed3ed34af3bda37056dfdc1729f4a6)
(cherry picked from commit 84a6f5dad5f1f7f842a5d4283c9b2b246db894ca)

Resolves: rhbz#2125432

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 ea25dad289a9b02aae40707fdd41373e1a28fe2c..71d71218486959b9c4d42676c598194ae32a804d 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
@@ -398,8 +398,11 @@ export class RbdListComponent extends ListWithDetails implements OnInit {
       }
     });
 
-    this.count = CdTableServerSideService.getCount(resp[0]);
-    this.images = images;
+    if (images.length > 0) {
+      this.count = CdTableServerSideService.getCount(resp[0]);
+    } else {
+      this.count = 0;
+    }
     return images;
   }
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
index eb6214a9398caf48c3d42bd71469d1939eed9a9c..659b9f4518bc2221fa8145c2255091c1c5b0ecae 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
@@ -262,6 +262,11 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
 
   ngOnInit() {
     this.localColumns = _.clone(this.columns);
+    // debounce reloadData method so that search doesn't run api requests
+    // for every keystroke
+    if (this.serverSide) {
+      this.reloadData = _.debounce(this.reloadData, 1000);
+    }
 
     // ngx-datatable triggers calculations each time mouse enters a row,
     // this will prevent that.