This is an automated email from the ASF dual-hosted git repository.
DomGarguilo pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/accumulo.git
The following commit(s) were added to refs/heads/main by this push:
new dafad06028 Improve monitor server tables: horizontal scroll, Reset
button, keep state on refresh (#6579)
dafad06028 is described below
commit dafad06028991d9e26d9f45640de8719f9e3ba8d
Author: Amanda Villarreal <[email protected]>
AuthorDate: Mon Nov 9 14:39:58 2026 -0600
Improve monitor server tables: horizontal scroll, Reset button, keep state
on refresh (#6579)
* Allow wide server process tables to scroll horizontally inside their
container using CSS overflow instead of DataTables scrollX, so the
header and body stay a single table and columns remain aligned
* Add a Reset button next to the column visibility control that restores
all columns, the original column order, and the default sort
* Only destroy and rebuild a DataTable on refresh when the server's column
definitions change; otherwise just reload the rows. This keeps the
scroll position, column order, and visibility across auto-refresh and
fixes ColReorder errors when a refresh happens mid-drag
---
.../accumulo/monitor/resources/css/screen.css | 9 +++--
.../monitor/resources/js/server_process_common.js | 40 ++++++++++++++++++----
2 files changed, 41 insertions(+), 8 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 05a4a78edd..f0b06dd6a4 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
@@ -132,8 +132,8 @@ table {
.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;
@@ -169,6 +169,11 @@ th {
vertical-align: bottom;
}
+/* scroll DataTables horizontally without splitting header and body into
separate tables */
+.dt-layout-table > div {
+ overflow-x: auto;
+}
+
td.firstcell {
border-left: 0;
}
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 687083a1db..b5dfc3216f 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
@@ -61,6 +61,7 @@
*/
var dataTableRefs = new Map();
+var dataTableColKeys = new Map();
/**
* This function returns the entire response from session storage
@@ -144,15 +145,23 @@ function getDataTableCols(storageKey) {
}
/**
- * This function refreshes the table. It destroys the DataTable
+ * This function refreshes the table. If the columns are unchanged since the
+ * last refresh, it only reloads the rows. Otherwise, it destroys the DataTable
* and clears the HTML table. Then it recreates the table header
* HTML elements from the columns, redefines the DataTable,
* and executes an ajax method to load the data.
*/
function refreshTable(table, storageKey) {
+ var dataTableRef = dataTableRefs.get(table);
+ var colsKey = JSON.stringify(getStoredColumns(storageKey));
+
+ // If column data has not changed, only reload the rows so scroll position
and column state do not reset
+ if (dataTableRef != null && dataTableColKeys.get(table) === colsKey) {
+ ajaxReloadTable(dataTableRef);
+ return;
+ }
// Destroy the DataTable
- var dataTableRef = dataTableRefs.get(table);
if (dataTableRef != null) {
dataTableRef.destroy();
}
@@ -182,6 +191,7 @@ function refreshTable(table, storageKey) {
dataTableRef = createDataTable(table, storageKey);
ajaxReloadTable(dataTableRef);
dataTableRefs.set(table, dataTableRef);
+ dataTableColKeys.set(table, colsKey);
}
/**
@@ -253,10 +263,28 @@ function createDataTable(table, storageKey) {
});
},
"buttons": [{
- "extend": 'colvis',
- "text": '<i class="bi bi-gear"></i>',
- "titleAttr": 'Columns'
- }],
+ "extend": 'colvis',
+ "text": '<i class="bi bi-gear"></i>',
+ "titleAttr": 'Columns'
+ },
+ {
+ "extend": 'spacer'
+ },
+ {
+ "text": 'Reset',
+ "titleAttr": 'Reset column selection, column order, and sorting',
+ "action": function (e, dt) {
+ // reset column selection
+ dt.columns().visible(true);
+ // reset column order
+ dt.colReorder.reset();
+ // reset sorting to the DataTables default (first column ascending)
+ dt.order([
+ [0, 'asc']
+ ]).draw();
+ }
+ }
+ ],
"layout": {
"topStart": "pageLength",
"topEnd": ["search", "buttons"],
