From aa1b1eba918759a4631cf7d02768e8dcc03d6269 Mon Sep 17 00:00:00 2001 From: Nizamudeen A Date: Thu, 11 Sep 2025 10:59:47 +0530 Subject: [PATCH] mgr/dashboard: improve search and pagination behavior add a throttle to the pagination cycle so that if you repeatedly try to cycle through the page, it increases the delay. Doing this because unlike search the button click to change page is deliberate and the first click to the button should respond immediately. another thing is that the search with a keyword stores every keystroke i do in the search field and then after the debouncce interval it sends all those request one by one. for eg: if i type 222 it waits 1s for the debounce timer and then sends a request to find osd with id 2 first then again 2 and then again 2. Instead it should only send 222 at the end. Fixes: https://tracker.ceph.com/issues/72979 Signed-off-by: Nizamudeen A (cherry picked from commit 5eda016780b91ca46ba394a3a5ef3fd988897ebd) --- .../app/shared/datatable/table/table.component.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) 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 4e6e49ef50967..aa0ba0f6aff7f 100644 --- 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 @@ -383,6 +383,7 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr }); } private previousRows = new Map(); + private debouncedSearch = this.reloadData.bind(this); constructor( // private ngZone: NgZone, @@ -539,7 +540,13 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr // debounce reloadData method so that search doesn't run api requests // for every keystroke if (this.serverSide) { - this.reloadData = _.debounce(this.reloadData, 1000); + this.reloadData = _.throttle(this.reloadData.bind(this), 1000, { + leading: true, + trailing: false + }); + this.debouncedSearch = _.debounce(this.reloadData.bind(this), 1000); + } else { + this.debouncedSearch = this.reloadData.bind(this); } // ngx-datatable triggers calculations each time mouse enters a row, @@ -883,7 +890,8 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr }); context.pageInfo.offset = this.userConfig.offset; context.pageInfo.limit = this.userConfig.limit; - context.search = this.userConfig.search; + if (this.serverSide) context.search = this.search; + else context.search = this.userConfig.search; if (this.userConfig.sorts?.length) { const sort = this.userConfig.sorts[0]; context.sort = `${sort.dir === 'desc' ? '-' : '+'}${sort.prop}`; @@ -1239,7 +1247,7 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr this.userConfig.limit = this.limit; this.userConfig.search = this.search; this.updating = false; - this.reloadData(); + this.debouncedSearch(); } this.rows = this.data; } else { -- 2.39.5