From 3b3eb0e2bdb26d78c763fc06899700a7652552df Mon Sep 17 00:00:00 2001 From: avillarreal Date: Fri, 2 Oct 2026 15:51:00 -0500 Subject: [PATCH 01/11] Add horizontal scroll to tables that go off screen --- .../org/apache/accumulo/monitor/resources/js/coordinator.js | 2 ++ .../resources/org/apache/accumulo/monitor/resources/js/table.js | 2 ++ 2 files changed, 4 insertions(+) diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/coordinator.js b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/coordinator.js index a641ef2a818..44609e43780 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/coordinator.js +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/coordinator.js @@ -68,6 +68,7 @@ $(function () { // Create a table for scans list tableRunning = new DataTable(runningTableHtmlTable, { + scrollX: true, "ajax": function (data, callback) { callback({ data: getStoredArray(RUNNING_COMPACTIONS_BY_TABLE) @@ -99,6 +100,7 @@ $(function () { }); queueRunning = new DataTable(runningQueueHtmlTable, { + scrollX: true, "ajax": function (data, callback) { callback({ data: getStoredArray(RUNNING_COMPACTIONS_BY_GROUP) diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/table.js b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/table.js index 82d9eb7940f..5cb96bdda13 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/table.js +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/table.js @@ -121,6 +121,7 @@ function refreshTabletTables() { */ function initTabletsTable() { tabletsTable = new DataTable('#tabletsList', { + scrollX: true, "stateSave": true, "columnDefs": [{ "targets": "big-num", @@ -178,6 +179,7 @@ function initTabletsTable() { */ function initTabletServersTable() { tabletServersTable = new DataTable('#tabletServersList', { + scrollX: true, "stateSave": true, "colReorder": true, "searching": false, From 6ec460ae85144a10167639c3cb96f1f2e7241051 Mon Sep 17 00:00:00 2001 From: avillarreal Date: Mon, 5 Oct 2026 14:53:37 -0500 Subject: [PATCH 02/11] Correct implementation for scrollX on DataTables that are too wide --- .../org/apache/accumulo/monitor/resources/js/coordinator.js | 2 -- .../accumulo/monitor/resources/js/server_process_common.js | 1 + .../resources/org/apache/accumulo/monitor/resources/js/table.js | 2 -- 3 files changed, 1 insertion(+), 4 deletions(-) diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/coordinator.js b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/coordinator.js index 44609e43780..a641ef2a818 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/coordinator.js +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/coordinator.js @@ -68,7 +68,6 @@ $(function () { // Create a table for scans list tableRunning = new DataTable(runningTableHtmlTable, { - scrollX: true, "ajax": function (data, callback) { callback({ data: getStoredArray(RUNNING_COMPACTIONS_BY_TABLE) @@ -100,7 +99,6 @@ $(function () { }); queueRunning = new DataTable(runningQueueHtmlTable, { - scrollX: true, "ajax": function (data, callback) { callback({ data: getStoredArray(RUNNING_COMPACTIONS_BY_GROUP) diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js index 687083a1db2..26978dcca15 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js @@ -246,6 +246,7 @@ function refreshServerInformation(callback, table, storageKey, banner, bannerMsg */ function createDataTable(table, storageKey) { var dataTableRef = new DataTable(table, { + scrollX: true, "autoWidth": false, "ajax": function (data, callback) { callback({ diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/table.js b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/table.js index 5cb96bdda13..82d9eb7940f 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/table.js +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/table.js @@ -121,7 +121,6 @@ function refreshTabletTables() { */ function initTabletsTable() { tabletsTable = new DataTable('#tabletsList', { - scrollX: true, "stateSave": true, "columnDefs": [{ "targets": "big-num", @@ -179,7 +178,6 @@ function initTabletsTable() { */ function initTabletServersTable() { tabletServersTable = new DataTable('#tabletServersList', { - scrollX: true, "stateSave": true, "colReorder": true, "searching": false, From 42bae53bf844b8d12449f02f099029b53e91589f Mon Sep 17 00:00:00 2001 From: avillarreal Date: Mon, 5 Oct 2026 16:17:12 -0500 Subject: [PATCH 03/11] Add custom button Reset to DataTables layout --- .../monitor/resources/js/server_process_common.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js index 26978dcca15..ad1adf360ac 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js @@ -257,7 +257,15 @@ function createDataTable(table, storageKey) { "extend": 'colvis', "text": '', "titleAttr": 'Columns' - }], + }, + { + "extend": 'spacer' + }, + { + "text": 'Reset', + "titleAttr": 'Reset column selection and ordering', + "action": function ( e, dt, node, config ) { table.colReorder.reset(); dt.columns( config.show ).visible( true ); } + }], "layout": { "topStart": "pageLength", "topEnd": ["search", "buttons"], From 6958e869998c3ecd1a6bfcd73a2243bd499978bc Mon Sep 17 00:00:00 2001 From: avillarreal Date: Mon, 5 Oct 2026 16:59:31 -0500 Subject: [PATCH 04/11] Format Reset button function --- .../accumulo/monitor/resources/js/server_process_common.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js index ad1adf360ac..079aed63411 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js @@ -246,7 +246,7 @@ function refreshServerInformation(callback, table, storageKey, banner, bannerMsg */ function createDataTable(table, storageKey) { var dataTableRef = new DataTable(table, { - scrollX: true, + "scrollX": true, "autoWidth": false, "ajax": function (data, callback) { callback({ @@ -264,7 +264,10 @@ function createDataTable(table, storageKey) { { "text": 'Reset', "titleAttr": 'Reset column selection and ordering', - "action": function ( e, dt, node, config ) { table.colReorder.reset(); dt.columns( config.show ).visible( true ); } + "action": function ( e, dt, node, config ) { + table.colReorder.reset(); + dt.columns( config.show ).visible( true ) + } }], "layout": { "topStart": "pageLength", From b1e491c68a58dd88b0a52efcf0e02c819d20aab6 Mon Sep 17 00:00:00 2001 From: avillarreal Date: Tue, 6 Oct 2026 13:02:11 -0500 Subject: [PATCH 05/11] Update Reset button action to make it actually reset columns --- .../resources/js/server_process_common.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js index 079aed63411..9c2b9de96fd 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js @@ -254,9 +254,9 @@ function createDataTable(table, storageKey) { }); }, "buttons": [{ - "extend": 'colvis', - "text": '', - "titleAttr": 'Columns' + "extend": 'colvis', + "text": '', + "titleAttr": 'Columns', }, { "extend": 'spacer' @@ -264,11 +264,15 @@ function createDataTable(table, storageKey) { { "text": 'Reset', "titleAttr": 'Reset column selection and ordering', - "action": function ( e, dt, node, config ) { - table.colReorder.reset(); - dt.columns( config.show ).visible( true ) + action: function (e, table) { + // reset column selection + table.columns().visible(true); + // reset column ordering + if (table.colReorder) { + table.colReorder.reset(); + } } - }], + }], "layout": { "topStart": "pageLength", "topEnd": ["search", "buttons"], From 4efd000c2e2547bf7a4902855e73cab44eb8f0e7 Mon Sep 17 00:00:00 2001 From: avillarreal Date: Tue, 6 Oct 2026 13:18:30 -0500 Subject: [PATCH 06/11] Change ordering to order --- .../accumulo/monitor/resources/js/server_process_common.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js index 9c2b9de96fd..fa32cb88538 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js @@ -263,11 +263,11 @@ function createDataTable(table, storageKey) { }, { "text": 'Reset', - "titleAttr": 'Reset column selection and ordering', + "titleAttr": 'Reset column selection and order', action: function (e, table) { // reset column selection table.columns().visible(true); - // reset column ordering + // reset column order if (table.colReorder) { table.colReorder.reset(); } From f48d94d288413e08034b4a20931554d90e235ef3 Mon Sep 17 00:00:00 2001 From: avillarreal Date: Thu, 22 Oct 2026 12:52:22 -0500 Subject: [PATCH 07/11] Update tooltip on Reset button --- .../accumulo/monitor/resources/js/server_process_common.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js index fa32cb88538..6187981793b 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js @@ -263,7 +263,7 @@ function createDataTable(table, storageKey) { }, { "text": 'Reset', - "titleAttr": 'Reset column selection and order', + "titleAttr": 'Reset column selection and column order', action: function (e, table) { // reset column selection table.columns().visible(true); From 0c8e966f95ade06797ce2077323e175b2f91dd75 Mon Sep 17 00:00:00 2001 From: avillarreal Date: Thu, 22 Oct 2026 13:11:01 -0500 Subject: [PATCH 08/11] WIP solution for misaligned column body --- .../accumulo/monitor/resources/js/server_process_common.js | 1 + 1 file changed, 1 insertion(+) diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js index 6187981793b..eeded30da35 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js @@ -400,5 +400,6 @@ function createDataTable(table, storageKey) { ], "columns": getDataTableCols(storageKey) }); + dataTableRef.columns.adjust(); return dataTableRef; } From a42daeedfef86229cfb14132602f98219640c74f Mon Sep 17 00:00:00 2001 From: avillarreal Date: Thu, 22 Oct 2026 14:36:03 -0500 Subject: [PATCH 09/11] WIP solution for misaligned column body --- .../org/apache/accumulo/monitor/resources/css/screen.css | 2 ++ .../accumulo/monitor/resources/js/server_process_common.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/css/screen.css b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/css/screen.css index 05a4a78eddb..df5e5e2475d 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/css/screen.css +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/css/screen.css @@ -128,6 +128,7 @@ hr { table { font-size: 9pt; + width: 100% !important; } .table-bordered th, @@ -167,6 +168,7 @@ th { color: #333333; font-size: 10pt; vertical-align: bottom; + width: 100% !important; } td.firstcell { diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js index eeded30da35..3b32f52c95b 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js @@ -400,6 +400,6 @@ function createDataTable(table, storageKey) { ], "columns": getDataTableCols(storageKey) }); - dataTableRef.columns.adjust(); + //dataTableRef.columns.adjust(); return dataTableRef; } From e3ac4bfd11ae4d71addb9ccd7dcd2672ee307e6d Mon Sep 17 00:00:00 2001 From: avillarreal Date: Fri, 23 Oct 2026 15:26:45 -0500 Subject: [PATCH 10/11] WIP save the scroll position of the scrollable dataTable --- .../accumulo/monitor/resources/js/server_process_common.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js index 3b32f52c95b..8f2ff471dcf 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js @@ -150,6 +150,9 @@ function getDataTableCols(storageKey) { * and executes an ajax method to load the data. */ function refreshTable(table, storageKey) { + // save the current scroll position of the table + var $scrollContainer = $(table).parent('.dt-scroll-body'); + var currentScrollTop = $scrollContainer.scrollTop(); // Destroy the DataTable var dataTableRef = dataTableRefs.get(table); @@ -182,6 +185,8 @@ function refreshTable(table, storageKey) { dataTableRef = createDataTable(table, storageKey); ajaxReloadTable(dataTableRef); dataTableRefs.set(table, dataTableRef); + // restore the scroll position + $scrollContainer.scrollTop(currentScrollTop); } /** From 275e278967f2a3fc1b5989f8b99a103bddb76369 Mon Sep 17 00:00:00 2001 From: avillarreal Date: Mon, 26 Oct 2026 11:13:47 -0500 Subject: [PATCH 11/11] Fix misaligned DataTables header and body when table is scrollable --- .../org/apache/accumulo/monitor/resources/css/screen.css | 8 ++++---- .../monitor/resources/js/server_process_common.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/css/screen.css b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/css/screen.css index df5e5e2475d..76b2eb98f3f 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/css/screen.css +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/css/screen.css @@ -128,13 +128,12 @@ hr { table { font-size: 9pt; - width: 100% !important; } .table-bordered th, .table-bordered td { - border: 1px solid light-dark(#ddd, #444) !important; - } + border: 1px solid light-dark(#ddd, #444) !important; +} table.sortable { border-left: 0; @@ -153,6 +152,7 @@ td { padding-top: 0.15em; padding-bottom: 0.15em; color: #333333; + white-space: nowrap; } th { @@ -168,7 +168,7 @@ th { color: #333333; font-size: 10pt; vertical-align: bottom; - width: 100% !important; + white-space: nowrap; } td.firstcell { diff --git a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js index 8f2ff471dcf..e971ddc019c 100644 --- a/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js +++ b/server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server_process_common.js @@ -405,6 +405,6 @@ function createDataTable(table, storageKey) { ], "columns": getDataTableCols(storageKey) }); - //dataTableRef.columns.adjust(); + return dataTableRef; }