From c309893d7e72a2a3d1fc5acf7992ab161c418745 Mon Sep 17 00:00:00 2001
From: spletka <stefan.pletka@bitfly.at>
Date: Tue, 19 Sep 2023 17:12:55 +0200
Subject: [PATCH 1/5] (BIDS-2481) Debounced all datatables

---
 static/js/dashboard.js                 | 18 ++++++++++++------
 static/js/datatable_loader.js          |  4 ++--
 templates/dashboard.html               |  1 +
 templates/dashboard/tables.html        |  7 +------
 templates/deposits.html                |  5 +++--
 templates/epochs.html                  |  3 ++-
 templates/eth1DepositsLeaderboard.html |  3 ++-
 templates/execution/blocks.html        |  8 ++------
 templates/pools_rocketpool.html        |  9 +++++----
 templates/slot/slot.html               |  9 +++++----
 templates/validator/tables.html        | 12 ++++++------
 templates/validator/validator.html     |  1 +
 templates/validators.html              |  3 ++-
 templates/validators_leaderboard.html  |  3 ++-
 templates/validators_slashings.html    |  3 ++-
 templates/withdrawals.html             |  5 +++--
 16 files changed, 51 insertions(+), 43 deletions(-)

diff --git a/static/js/dashboard.js b/static/js/dashboard.js
index c9e681da46..e133b3c0ec 100644
--- a/static/js/dashboard.js
+++ b/static/js/dashboard.js
@@ -66,7 +66,7 @@ function showValidatorHist(index) {
     details: false,
     pagingType: "simple",
     pageLength: 10,
-    ajax: "/validator/" + index + "/history",
+    ajax: dataTableLoader("/validator/" + index + "/history"),
     language: {
       searchPlaceholder: "Search by Epoch Number",
       search: "",
@@ -1170,6 +1170,7 @@ $(document).ready(function () {
     window.dispatchEvent(new CustomEvent("dashboard_validators_set"))
 
     if (state.validators.length) {
+      var uRLSearchParams = new URLSearchParams([["validators", state.validators.join(",")]])
       var qryStr = "?validators=" + state.validators.join(",")
       if (window.location.search != qryStr) {
         var newUrl = window.location.pathname + qryStr + window.location.hash
@@ -1182,7 +1183,7 @@ $(document).ready(function () {
       document.querySelector("#clear-search").style.visibility = "visible"
 
       $.ajax({
-        url: "/dashboard/data/validators" + qryStr,
+        url: dataTableLoader("/dashboard/data/validators", uRLSearchParams),
         success: function (result) {
           var t1 = Date.now()
           console.log(`loaded validators-data: length: ${result.data.length}, fetch: ${t1 - t0}ms`)
@@ -1233,7 +1234,7 @@ $(document).ready(function () {
         document.querySelector("#bookmark-button").style.visibility = "visible"
 
         $.ajax({
-          url: "/dashboard/data/earnings" + qryStr,
+          url: dataTableLoader("/dashboard/data/earnings", uRLSearchParams),
           success: function (result) {
             var t1 = Date.now()
             console.log(`loaded earnings: fetch: ${t1 - t0}ms`)
@@ -1319,9 +1320,14 @@ $(document).ready(function () {
 
   function renderCharts() {
     var t0 = Date.now()
-    var qryStr = "?validators=" + state.validators.join(",")
     $.ajax({
-      url: "/dashboard/data/allbalances" + qryStr + "&days=31",
+      url: dataTableLoader(
+        "/dashboard/data/allbalances",
+        new URLSearchParams([
+          ["validators", state.validators.join(",")],
+          ["days", "31"],
+        ])
+      ),
       success: function (result) {
         var t1 = Date.now()
         createIncomeChart(result.consensusChartData, result.executionChartData)
@@ -1332,7 +1338,7 @@ $(document).ready(function () {
       },
     })
     $.ajax({
-      url: "/dashboard/data/proposals" + qryStr,
+      url: dataTableLoader("/dashboard/data/proposals", new URLSearchParams([["validators", state.validators.join(",")]])),
       success: function (result) {
         var t1 = Date.now()
         if (result && result.length) {
diff --git a/static/js/datatable_loader.js b/static/js/datatable_loader.js
index 6a52cdee10..9007fe0ebc 100644
--- a/static/js/datatable_loader.js
+++ b/static/js/datatable_loader.js
@@ -6,7 +6,7 @@
  * There is also a retry mechanism that retries the server request if the request fails.
  * @param path: Path to load the table data from the server
  */
-function dataTableLoader(path) {
+function dataTableLoader(path, param) {
   const MAX_RETRIES = 5
   const DEBOUNCE_DELAY = 500
   const RETRY_DELAY = 1000
@@ -25,7 +25,7 @@ function dataTableLoader(path) {
   }
 
   const doFetch = (tableData, callback) => {
-    fetch(`${path}?${new URLSearchParams(tableData)}`)
+    fetch(`${path}?${new URLSearchParams(tableData)}&${param}`)
       .then((response) => {
         if (!response.ok) {
           throw new Error(`Failed with status: ${response.status}`)
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 6804ae109a..7c9319d1cc 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -2,6 +2,7 @@
 
   <script type="text/javascript" src="/js/datatables.min.js"></script>
   <script type="text/javascript" src="/js/datatable_input.js"></script>
+  <script type="text/javascript" src="/js/datatable_loader.js"></script>
   <script src="/js/highcharts/highstock.min.js"></script>
   <script src="/js/highcharts/exporting.min.js"></script>
   <script src="/js/highcharts/offline-exporting.min.js"></script>
diff --git a/templates/dashboard/tables.html b/templates/dashboard/tables.html
index 437f284d06..9df4bb13ec 100644
--- a/templates/dashboard/tables.html
+++ b/templates/dashboard/tables.html
@@ -64,12 +64,7 @@
             order: [[1, "desc"]],
             lengthChange: false,
             searching: false,
-            ajax: {
-              url: `/dashboard/data/withdrawal`,
-              data: function (d) {
-                d.validators = getValidatorString()
-              },
-            },
+            ajax: dataTableLoader(`/dashboard/data/withdrawal`, new URLSearchParams([["validators", getValidatorString()]])),
             pagingType: "input",
             pageLength: 10,
             language: {
diff --git a/templates/deposits.html b/templates/deposits.html
index 8430ad909b..ba1439c165 100644
--- a/templates/deposits.html
+++ b/templates/deposits.html
@@ -1,6 +1,7 @@
 {{ define "js" }}
   <script type="text/javascript" src="/js/datatables.min.js"></script>
   <script type="text/javascript" src="/js/datatable_input.js"></script>
+  <script type="text/javascript" src="/js/datatable_loader.js"></script>
   <script type="text/javascript" src="/js/highcharts/highstock.min.js"></script>
   <script type="text/javascript" src="/js/highcharts/highcharts-global-options.js"></script>
     <script>
@@ -22,7 +23,7 @@
               },
               order: [[4, 'desc']],
               searching: true,
-              ajax: '/validators/initiated-deposits/data',
+              ajax: dataTableLoader('/validators/initiated-deposits/data'),
               pagingType: 'input',
               preDrawCallback: function() {
                   // this does not always work.. not sure how to solve the staying tooltip
@@ -58,7 +59,7 @@
             },
             order: [[0, "desc"]],
             searching: true,
-            ajax: "/validators/included-deposits/data",
+            ajax: dataTableLoader("/validators/included-deposits/data"),
             pagingType: "input",
             language: {
               searchPlaceholder: "Slot | Validator Key | Withdrawal Credentials | ENS address",
diff --git a/templates/epochs.html b/templates/epochs.html
index 5724bec324..1ca06e6159 100644
--- a/templates/epochs.html
+++ b/templates/epochs.html
@@ -1,6 +1,7 @@
 {{ define "js" }}
   <script type="text/javascript" src="/js/datatables.min.js"></script>
   <script type="text/javascript" src="/js/datatable_input.js"></script>
+  <script type="text/javascript" src="/js/datatable_loader.js"></script>
   <script>
     $(document).ready(function () {
       $("#epochs").DataTable({
@@ -8,7 +9,7 @@
         serverSide: true,
         ordering: false,
         searching: true,
-        ajax: "/epochs/data",
+        ajax: dataTableLoader("/epochs/data"),
         pagingType: "input",
         stateSave: true,
         stateSaveCallback: function (settings, data) {
diff --git a/templates/eth1DepositsLeaderboard.html b/templates/eth1DepositsLeaderboard.html
index 73d03b56ba..f8cc6b389b 100644
--- a/templates/eth1DepositsLeaderboard.html
+++ b/templates/eth1DepositsLeaderboard.html
@@ -1,6 +1,7 @@
 {{ define "js" }}
   <script type="text/javascript" src="/js/datatables.min.js"></script>
   <script type="text/javascript" src="/js/datatable_input.js"></script>
+  <script type="text/javascript" src="/js/datatable_loader.js"></script>
   <script src="/js/highcharts/highcharts.min.js"></script>
   <script src="/js/highcharts/annotations.min.js"></script>
   <script src="/js/highcharts/data.min.js"></script>
@@ -147,7 +148,7 @@
                   ordering: true,
                   order: [[1, 'desc']],
                   searching: true,
-                  ajax: '/validators/deposit-leaderboard/data',
+                  ajax: dataTableLoader('/validators/deposit-leaderboard/data'),
                   pagingType: 'input',
                   preDrawCallback: function () {
                         // this does not always work.. not sure how to solve the staying tooltip
diff --git a/templates/execution/blocks.html b/templates/execution/blocks.html
index c6eb72a9af..5b9c780944 100644
--- a/templates/execution/blocks.html
+++ b/templates/execution/blocks.html
@@ -1,6 +1,7 @@
 {{ define "js" }}
   <script type="text/javascript" src="/js/datatables.min.js"></script>
   <script type="text/javascript" src="/js/datatable_input.js"></script>
+  <script type="text/javascript" src="/js/datatable_loader.js"></script>
 
   <script>
     // live update for current block id
@@ -35,12 +36,7 @@
         serverSide: true,
         ordering: false,
         searching: false,
-        ajax: {
-          url: "/blocks/data",
-          data: function (d) {
-            return $.extend({}, d, { recordsTotal: highestID })
-          },
-        },
+        ajax: dataTableLoader("/blocks/data", new URLSearchParams([["recordsTotal", highestID]])),
         pageLength: 10,
         pagingType: "input",
         language: {
diff --git a/templates/pools_rocketpool.html b/templates/pools_rocketpool.html
index 6c690a1795..f58f3c8450 100644
--- a/templates/pools_rocketpool.html
+++ b/templates/pools_rocketpool.html
@@ -2,9 +2,10 @@
   <script type="text/javascript" src="/js/datatablesNew.min.js"></script>
   <script type="text/javascript" src="/js/datatables.min.js"></script>
   <script type="text/javascript" src="/js/datatable_input.js"></script>
+  <script type="text/javascript" src="/js/datatable_loader.js"></script>
   <script>
     $("#minipools").DataTable({
-      ajax: "/pools/rocketpool/data/minipools",
+      ajax: dataTableLoader("/pools/rocketpool/data/minipools"),
       language: {
         info: "_TOTAL_ entries",
         infoEmpty: "No entries match",
@@ -93,7 +94,7 @@
     })
 
     $("#nodes").DataTable({
-      ajax: "/pools/rocketpool/data/nodes",
+      ajax: dataTableLoader("/pools/rocketpool/data/nodes"),
       language: {
         info: "_TOTAL_ entries",
         infoEmpty: "No entries match",
@@ -194,7 +195,7 @@
     })
 
     $("#dao_members").DataTable({
-      ajax: "/pools/rocketpool/data/dao_members",
+      ajax: dataTableLoader("/pools/rocketpool/data/dao_members"),
       language: {
         info: "_TOTAL_ entries",
         infoEmpty: "No entries match",
@@ -271,7 +272,7 @@
     })
 
     $("#dao_proposals").DataTable({
-      ajax: "/pools/rocketpool/data/dao_proposals",
+      ajax: dataTableLoader("/pools/rocketpool/data/dao_proposals"),
       language: {
         info: "_TOTAL_ entries",
         infoEmpty: "No entries match",
diff --git a/templates/slot/slot.html b/templates/slot/slot.html
index 15b600caf6..72fed9b8b5 100644
--- a/templates/slot/slot.html
+++ b/templates/slot/slot.html
@@ -2,6 +2,7 @@
 
   <script type="text/javascript" src="/js/datatables.min.js"></script>
   <script type="text/javascript" src="/js/datatable_input.js"></script>
+  <script type="text/javascript" src="/js/datatable_loader.js"></script>
 
   <script>
     function getInfoElementAttestations (text, color) {
@@ -145,7 +146,7 @@
         serverSide: true,
         ordering: false,
         searching: false,
-        ajax: "/slot/" + slotNumber + "/deposits",
+        ajax: dataTableLoader("/slot/" + slotNumber + "/deposits"),
         pageLength: 10,
         pagingType: "input",
         language: {
@@ -199,7 +200,7 @@
           return JSON.parse(localStorage.getItem("DataTables_" + settings.sInstance))
         },
         searching: true,
-        ajax: "/slot/" + slotNumber + "/votes",
+        ajax: dataTableLoader("/slot/" + slotNumber + "/votes"),
         pageLength: 16,
         pagingType: "input",
         language: {
@@ -239,7 +240,7 @@
           info: false,
           // stateSave: true,
           searching: false,
-          ajax: "/slot/" + slotNumber + "/withdrawals",
+          ajax: dataTableLoader("/slot/" + slotNumber + "/withdrawals"),
           paging: false,
           // deferLoading: true,
           pageLength: 10,
@@ -265,7 +266,7 @@
           info: false,
           // stateSave: true,
           searching: false,
-          ajax: "/slot/" + slotNumber + "/blsChange",
+          ajax: dataTableLoader("/slot/" + slotNumber + "/blsChange"),
           paging: false,
           // deferLoading: true,
           pageLength: 10,
diff --git a/templates/validator/tables.html b/templates/validator/tables.html
index be0c289ee0..d2df012d03 100644
--- a/templates/validator/tables.html
+++ b/templates/validator/tables.html
@@ -36,7 +36,7 @@
                 order: [[0, 'desc']],
                 lengthChange: false,
                 searching: false,
-                ajax: '/validator/' + index + '/proposedblocks',
+                ajax: dataTableLoader('/validator/' + index + '/proposedblocks'),
                 pagingType: 'input',
                 pageLength: 10,
                 language: {
@@ -127,7 +127,7 @@
                     order: [[0, 'desc']],
                     lengthChange: false,
                     searching: false,
-                    ajax: '/validator/' + index + '/attestations',
+                    ajax: dataTableLoader('/validator/' + index + '/attestations'),
                     pagingType: 'input',
                     pageLength: 10,
                     language: {
@@ -197,7 +197,7 @@
                     lengthChange: false,
                     searching: false,
                     ajax: {
-                      url: `/validator/${index}/withdrawals`,
+                      url: dataTableLoader(`/validator/${index}/withdrawals`),
                       dataSrc: function ( { data } ) {
                         // add the estimate row if it exists
                         {{ if .NextWithdrawalRow }}
@@ -279,7 +279,7 @@
                       return JSON.parse(localStorage.getItem("DataTables_" + settings.sInstance))
                     },
                     searching: false,
-                    ajax: '/validator/' + index + '/sync',
+                    ajax: dataTableLoader('/validator/' + index + '/sync'),
                     pagingType: 'input',
                     pageLength: 10,
                     language: {
@@ -358,7 +358,7 @@
                   return JSON.parse(localStorage.getItem("DataTables_" + settings.sInstance))
                 },
                 searching: false,
-                ajax: '/validator/' + index + '/slashings',
+                ajax: dataTableLoader('/validator/' + index + '/slashings'),
                 pagingType: 'input',
                 pageLength: 10,
                 language: {
@@ -639,7 +639,7 @@ <h6 class="">This table displays the deposits received and processed by the beac
                 stateLoadCallback: function (settings) {
                   return JSON.parse(localStorage.getItem("DataTables_" + settings.sInstance))
                 },
-                ajax: '/validator/' + index + '/history',
+                ajax: dataTableLoader('/validator/' + index + '/history'),
                 pagingType: 'input',
                 pageLength: 10,
                 language: {
diff --git a/templates/validator/validator.html b/templates/validator/validator.html
index ac68df83e8..6462367f0b 100644
--- a/templates/validator/validator.html
+++ b/templates/validator/validator.html
@@ -12,6 +12,7 @@
   {{ if and (ne .Status "deposited") (ne .Status "deposited_invalid") }}
     <script type="text/javascript" src="/js/datatables.min.js"></script>
     <script type="text/javascript" src="/js/datatable_input.js"></script>
+    <script type="text/javascript" src="/js/datatable_loader.js"></script>
     <script src="/js/highcharts/highstock.min.js"></script>
     <script src="/js/highcharts/exporting.min.js"></script>
     <script src="/js/highcharts/offline-exporting.min.js"></script>
diff --git a/templates/validators.html b/templates/validators.html
index 39a1ede42e..351a477923 100644
--- a/templates/validators.html
+++ b/templates/validators.html
@@ -1,6 +1,7 @@
 {{ define "js" }}
   <script type="text/javascript" src="/js/datatables.min.js"></script>
   <script type="text/javascript" src="/js/datatable_input.js"></script>
+  <script type="text/javascript" src="/js/datatable_loader.js"></script>
     <script>
         var validatorsDataTable;
         const totalCount = {{.TotalCount}};
@@ -116,7 +117,7 @@ <h6 class="dropdown-header"><span>Filter state</span> <span><span class="text-su
                 stateLoadCallback: function (settings) {
                   return JSON.parse(localStorage.getItem("DataTables_" + settings.sInstance))
                 },
-                ajax: '/validators/data?filterByState=' + state,
+                ajax: dataTableLoader('/validators/data', new URLSearchParams([["filterByState", state]])),
                 pagingType: 'input',
                 language: {
                     paginate: {
diff --git a/templates/validators_leaderboard.html b/templates/validators_leaderboard.html
index 2f645593a1..710a6b9424 100644
--- a/templates/validators_leaderboard.html
+++ b/templates/validators_leaderboard.html
@@ -1,6 +1,7 @@
 {{ define "js" }}
   <script type="text/javascript" src="/js/datatables.min.js"></script>
   <script type="text/javascript" src="/js/datatable_input.js"></script>
+  <script type="text/javascript" src="/js/datatable_loader.js"></script>
   <script>
     $(document).ready(function () {
       var tblOpts = {
@@ -16,7 +17,7 @@
         stateLoadCallback: function (settings) {
           return JSON.parse(localStorage.getItem("DataTables_" + settings.sInstance))
         },
-        ajax: "/validators/leaderboard/data",
+        ajax: dataTableLoader("/validators/leaderboard/data"),
         pagingType: "input",
         language: {
           searchPlaceholder: "Search by Public Key / Index / Name",
diff --git a/templates/validators_slashings.html b/templates/validators_slashings.html
index cda1ad4e9f..4783b51afc 100644
--- a/templates/validators_slashings.html
+++ b/templates/validators_slashings.html
@@ -1,6 +1,7 @@
 {{ define "js" }}
   <script type="text/javascript" src="/js/datatables.min.js"></script>
   <script type="text/javascript" src="/js/datatable_input.js"></script>
+  <script type="text/javascript" src="/js/datatable_loader.js"></script>
   <script>
     $("#slashings").DataTable({
       processing: true,
@@ -17,7 +18,7 @@
       },
       paging: true,
       pagingType: "input",
-      ajax: "/validators/slashings/data",
+      ajax: dataTableLoader("/validators/slashings/data"),
       language: {
         // searchPlaceholder: 'Search by Epoch Number',
         // search: '',
diff --git a/templates/withdrawals.html b/templates/withdrawals.html
index 5e857cb028..8fe6053fc9 100644
--- a/templates/withdrawals.html
+++ b/templates/withdrawals.html
@@ -1,6 +1,7 @@
 {{ define "js" }}
   <script type="text/javascript" src="/js/datatables.min.js"></script>
   <script type="text/javascript" src="/js/datatable_input.js"></script>
+  <script type="text/javascript" src="/js/datatable_loader.js"></script>
   <script type="text/javascript" src="/js/highcharts/highstock.min.js"></script>
   <script type="text/javascript" src="/js/highcharts/highcharts-global-options.js"></script>
   <script>
@@ -54,7 +55,7 @@
         },
         order: [[2, "desc"]],
         searching: true,
-        ajax: "/validators/withdrawals/data",
+        ajax: dataTableLoader("/validators/withdrawals/data"),
         pageLength: 10,
         pagingType: "input",
         preDrawCallback: function () {
@@ -127,7 +128,7 @@
         },
         order: [[2, "desc"]],
         searching: true,
-        ajax: "/validators/withdrawals/bls",
+        ajax: dataTableLoader("/validators/withdrawals/bls"),
         pageLength: 10,
         pagingType: "input",
         preDrawCallback: function () {

From a29b4ae71d2fb73deec42e859edaa51cbd7c96a6 Mon Sep 17 00:00:00 2001
From: spletka <stefan.pletka@bitfly.at>
Date: Wed, 20 Sep 2023 14:23:18 +0200
Subject: [PATCH 2/5] (BIDS-2481) Fixed dashboard datatables

---
 static/js/dashboard.js          | 15 ++++-----------
 static/js/datatable_loader.js   |  9 +++++++--
 templates/validator/tables.html |  7 ++-----
 3 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/static/js/dashboard.js b/static/js/dashboard.js
index e133b3c0ec..da40e13133 100644
--- a/static/js/dashboard.js
+++ b/static/js/dashboard.js
@@ -1170,7 +1170,6 @@ $(document).ready(function () {
     window.dispatchEvent(new CustomEvent("dashboard_validators_set"))
 
     if (state.validators.length) {
-      var uRLSearchParams = new URLSearchParams([["validators", state.validators.join(",")]])
       var qryStr = "?validators=" + state.validators.join(",")
       if (window.location.search != qryStr) {
         var newUrl = window.location.pathname + qryStr + window.location.hash
@@ -1183,7 +1182,7 @@ $(document).ready(function () {
       document.querySelector("#clear-search").style.visibility = "visible"
 
       $.ajax({
-        url: dataTableLoader("/dashboard/data/validators", uRLSearchParams),
+        url: "/dashboard/data/validators" + qryStr,
         success: function (result) {
           var t1 = Date.now()
           console.log(`loaded validators-data: length: ${result.data.length}, fetch: ${t1 - t0}ms`)
@@ -1234,7 +1233,7 @@ $(document).ready(function () {
         document.querySelector("#bookmark-button").style.visibility = "visible"
 
         $.ajax({
-          url: dataTableLoader("/dashboard/data/earnings", uRLSearchParams),
+          url: "/dashboard/data/earnings" + qryStr,
           success: function (result) {
             var t1 = Date.now()
             console.log(`loaded earnings: fetch: ${t1 - t0}ms`)
@@ -1321,13 +1320,7 @@ $(document).ready(function () {
   function renderCharts() {
     var t0 = Date.now()
     $.ajax({
-      url: dataTableLoader(
-        "/dashboard/data/allbalances",
-        new URLSearchParams([
-          ["validators", state.validators.join(",")],
-          ["days", "31"],
-        ])
-      ),
+      url: "/dashboard/data/allbalances?validators=" + state.validators.join(",") + "&days=31",
       success: function (result) {
         var t1 = Date.now()
         createIncomeChart(result.consensusChartData, result.executionChartData)
@@ -1338,7 +1331,7 @@ $(document).ready(function () {
       },
     })
     $.ajax({
-      url: dataTableLoader("/dashboard/data/proposals", new URLSearchParams([["validators", state.validators.join(",")]])),
+      url: "/dashboard/data/proposals?validators=" + state.validators.join(","),
       success: function (result) {
         var t1 = Date.now()
         if (result && result.length) {
diff --git a/static/js/datatable_loader.js b/static/js/datatable_loader.js
index 9007fe0ebc..e4ccb8e68c 100644
--- a/static/js/datatable_loader.js
+++ b/static/js/datatable_loader.js
@@ -1,12 +1,14 @@
 /**
- * function dataTableLoader(path)
+ * function dataTableLoader(path, param)
  * used to create an ajax function for a DataTable.
  * This function is used to load data from the server for a DataTable.
  * It is debounced to avoid multiple requests to the server when the user clicks on the pagination buttons.
  * There is also a retry mechanism that retries the server request if the request fails.
  * @param path: Path to load the table data from the server
+ * @param param: Additional parameters to be passed to the server
+ * @param dataSrc: Function to be called on the data returned from the server
  */
-function dataTableLoader(path, param) {
+function dataTableLoader(path, param, dataSrc) {
   const MAX_RETRIES = 5
   const DEBOUNCE_DELAY = 500
   const RETRY_DELAY = 1000
@@ -33,6 +35,9 @@ function dataTableLoader(path, param) {
         return response.json()
       })
       .then((data) => {
+        if (typeof dataSrc === "function") {
+          data = dataSrc({ data })
+        }
         callback(data)
       })
       .catch((err) => {
diff --git a/templates/validator/tables.html b/templates/validator/tables.html
index d2df012d03..8c85f5696c 100644
--- a/templates/validator/tables.html
+++ b/templates/validator/tables.html
@@ -196,9 +196,7 @@
                     order: [[0, 'desc']],
                     lengthChange: false,
                     searching: false,
-                    ajax: {
-                      url: dataTableLoader(`/validator/${index}/withdrawals`),
-                      dataSrc: function ( { data } ) {
+                    ajax: dataTableLoader(`/validator/${index}/withdrawals`, "", function ( {data} ) {
                         // add the estimate row if it exists
                         {{ if .NextWithdrawalRow }}
                           let row = {{.NextWithdrawalRow}}
@@ -207,8 +205,7 @@
                           }
                         {{ end }}
                         return data
-                      },
-                    },
+                      }),
                     pagingType: 'input',
                     pageLength: 10,
                     language: {

From e4b66ca8d5069fa677539c13dd44eb364c8266eb Mon Sep 17 00:00:00 2001
From: spletka <stefan.pletka@bitfly.at>
Date: Wed, 20 Sep 2023 14:28:26 +0200
Subject: [PATCH 3/5] (BIDS-2481) Reverted dashboard changes

---
 static/js/dashboard.js        | 5 +++--
 static/js/datatable_loader.js | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/static/js/dashboard.js b/static/js/dashboard.js
index da40e13133..221ef699d6 100644
--- a/static/js/dashboard.js
+++ b/static/js/dashboard.js
@@ -1319,8 +1319,9 @@ $(document).ready(function () {
 
   function renderCharts() {
     var t0 = Date.now()
+    var qryStr = "?validators=" + state.validators.join(",")
     $.ajax({
-      url: "/dashboard/data/allbalances?validators=" + state.validators.join(",") + "&days=31",
+      url: "/dashboard/data/allbalances" + qryStr + "&days=31",
       success: function (result) {
         var t1 = Date.now()
         createIncomeChart(result.consensusChartData, result.executionChartData)
@@ -1331,7 +1332,7 @@ $(document).ready(function () {
       },
     })
     $.ajax({
-      url: "/dashboard/data/proposals?validators=" + state.validators.join(","),
+      url: "/dashboard/data/proposals" + qryStr,
       success: function (result) {
         var t1 = Date.now()
         if (result && result.length) {
diff --git a/static/js/datatable_loader.js b/static/js/datatable_loader.js
index e4ccb8e68c..d5e17bff0d 100644
--- a/static/js/datatable_loader.js
+++ b/static/js/datatable_loader.js
@@ -1,5 +1,5 @@
 /**
- * function dataTableLoader(path, param)
+ * function dataTableLoader(path, param, dataSrc)
  * used to create an ajax function for a DataTable.
  * This function is used to load data from the server for a DataTable.
  * It is debounced to avoid multiple requests to the server when the user clicks on the pagination buttons.

From 7fc3311172827d79f128a2b992023901bb9a4b9d Mon Sep 17 00:00:00 2001
From: spletka <stefan.pletka@bitfly.at>
Date: Tue, 3 Oct 2023 13:36:15 +0200
Subject: [PATCH 4/5] (BIDS-2481) Fixed validators page filter debouncing

---
 templates/validators.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/templates/validators.html b/templates/validators.html
index 351a477923..0b81146a77 100644
--- a/templates/validators.html
+++ b/templates/validators.html
@@ -99,6 +99,7 @@ <h6 class="dropdown-header"><span>Filter state</span> <span><span class="text-su
                 var hashState = window.location.hash.substring(1);
                 if (possibleStates[hashState]) state = hashState
             }
+            var urlSearchParams = new URLSearchParams([["filterByState", state]])
 
             var usp = new URLSearchParams(window.location.search)
             var q = usp.get('q')
@@ -117,7 +118,7 @@ <h6 class="dropdown-header"><span>Filter state</span> <span><span class="text-su
                 stateLoadCallback: function (settings) {
                   return JSON.parse(localStorage.getItem("DataTables_" + settings.sInstance))
                 },
-                ajax: dataTableLoader('/validators/data', new URLSearchParams([["filterByState", state]])),
+                ajax: dataTableLoader('/validators/data', urlSearchParams),
                 pagingType: 'input',
                 language: {
                     paginate: {
@@ -136,7 +137,7 @@ <h6 class="dropdown-header"><span>Filter state</span> <span><span class="text-su
                         .find('[data-filter-validators]')
                         .click(function() {
                             var f = $(this).data('filter-validators');
-                            validatorsDataTable.ajax.url(`/validators/data?filterByState=${f}`);
+                            urlSearchParams.set("filterByState", f)
                             validatorsDataTable.ajax.reload();
                             adaptTableToState(f)
                         });

From 12f1720efa87b1d74b0ecec86f5189f4f4c3c2f3 Mon Sep 17 00:00:00 2001
From: spletka <stefan.pletka@bitfly.at>
Date: Wed, 4 Oct 2023 11:28:37 +0200
Subject: [PATCH 5/5] (BIDS-2481) Fix next withdrawal datatable entry

---
 templates/validator/tables.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/validator/tables.html b/templates/validator/tables.html
index 8c85f5696c..7ba526bb36 100644
--- a/templates/validator/tables.html
+++ b/templates/validator/tables.html
@@ -201,7 +201,7 @@
                         {{ if .NextWithdrawalRow }}
                           let row = {{.NextWithdrawalRow}}
                           if (row && row.length) {
-                            data = row.concat(data)
+                            data.data = row.concat(data.data)
                           }
                         {{ end }}
                         return data