Bids 2481/all datatables should be debounced

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: "",

static/js/datatable_loader.js

@@ -1,12 +1,14 @@
 /**
- * function dataTableLoader(path)
+ * 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.
  * 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) {
+function dataTableLoader(path, param, dataSrc) {
   const MAX_RETRIES = 5
   const DEBOUNCE_DELAY = 500
   const RETRY_DELAY = 1000
@@ -25,14 +27,17 @@ function dataTableLoader(path) {
   }
 
   const doFetch = (tableData, callback) => {
-    fetch(`${path}?${$.param(tableData)}`)
+    fetch(`${path}?${$.param(tableData)}&${param}`)
       .then((response) => {
         if (!response.ok) {
           throw new Error(`Failed with status: ${response.status}`)
         }
         return response.json()
       })
       .then((data) => {
+        if (typeof dataSrc === "function") {
+          data = dataSrc({ data })
+        }
         callback(data)
       })
       .catch((err) => {

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>

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: {

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",

templates/epochs.html

@@ -1,14 +1,15 @@
 {{ 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({
         processing: true,
         serverSide: true,
         ordering: false,
         searching: true,
-        ajax: "/epochs/data",
+        ajax: dataTableLoader("/epochs/data"),
         pagingType: "input",
         stateSave: true,
         stateSaveCallback: function (settings, data) {

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

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: {

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",

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,

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: {
@@ -196,9 +196,7 @@
                     order: [[0, 'desc']],
                     lengthChange: false,
                     searching: false,
-                    ajax: {
-                      url: `/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: {
@@ -279,7 +276,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 +355,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 +636,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: {

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>

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: {

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",

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: '',

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 () {