Skip to content

Commit fa5ef37

Browse files
mcmilkmcmilk
committed
Human readable sizes for Webadmin Interface
Motivation ---------- During the last dcache hackathon meeting, there was the idea to display the rather large byte values of the web interface in a human-readable way. Already during the meeting there was a first short version of the implementation. Today I have adjusted a few small things and now ask for a review. Modification ------------ Replace the old JavaScript code of 'httpd/static/scripts/sorting' with a better working one: https://github.com/White-Tiger/sorttable.js The JavaScript file 'common.js' could be used for other modifications as well. Result ------ Fix sorting of the times in 'ms' within the '/cellInfo' page. Display all sizes in human-readable format instead of MiB. The old and new views can be switched using a button in the top left corner. Target: trunk Request: 11.x, 10.x, 9.x Require-book: no Require-notes: yes
1 parent 38ac3d0 commit fa5ef37

File tree

5 files changed

+524
-674
lines changed

5 files changed

+524
-674
lines changed

‎modules/dcache/src/main/java/diskCacheV111/util/HTMLWriter.java‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,7 @@ public void addHeader(String css, String title) {
6363
println("<link type='text/css' rel='stylesheet' href='" + css + "'>");
6464
println("<title>" + title + "</title>");
6565
println("<script type='text/javascript' src='/scripts/sorting/common.js'></script>");
66-
println("<script type='text/javascript' src='/scripts/sorting/css.js'></script>");
67-
println(
68-
"<script type='text/javascript' src='/scripts/sorting/standardista-table-sorting.js'></script>");
66+
println("<script type='text/javascript' src='/scripts/sorting/sorttable.js'></script>");
6967
println("</head>");
7068
println("<body>");
7169
println("<div id='header'>");

‎skel/share/httpd/static/scripts/sorting/common.js‎

Lines changed: 50 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,57 @@
1-
/**
2-
* addEvent written by Dean Edwards, 2005
3-
* with input from Tino Zijdel
4-
*
5-
* http://dean.edwards.name/weblog/2005/10/add-event/
6-
**/
7-
function addEvent(element, type, handler) {
8-
// assign each event handler a unique ID
9-
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
10-
// create a hash table of event types for the element
11-
if (!element.events) element.events = {};
12-
// create a hash table of event handlers for each element/event pair
13-
var handlers = element.events[type];
14-
if (!handlers) {
15-
handlers = element.events[type] = {};
16-
// store the existing event handler (if there is one)
17-
if (element["on" + type]) {
18-
handlers[0] = element["on" + type];
19-
}
20-
}
21-
// store the event handler in the hash table
22-
handlers[handler.$$guid] = handler;
23-
// assign a global event handler to do all the work
24-
element["on" + type] = handleEvent;
25-
};
26-
// a counter used to create unique IDs
27-
addEvent.guid = 1;
28-
29-
function removeEvent(element, type, handler) {
30-
// delete the event handler from the hash table
31-
if (element.events && element.events[type]) {
32-
delete element.events[type][handler.$$guid];
33-
}
34-
};
35-
36-
function handleEvent(event) {
37-
var returnValue = true;
38-
// grab the event object (IE uses a global event object)
39-
event = event || fixEvent(window.event);
40-
// get a reference to the hash table of event handlers
41-
var handlers = this.events[event.type];
42-
// execute each event handler
43-
for (var i in handlers) {
44-
this.$$handleEvent = handlers[i];
45-
if (this.$$handleEvent(event) === false) {
46-
returnValue = false;
47-
}
48-
}
49-
return returnValue;
50-
};
51-
52-
function fixEvent(event) {
53-
// add W3C standard event methods
54-
event.preventDefault = fixEvent.preventDefault;
55-
event.stopPropagation = fixEvent.stopPropagation;
56-
return event;
57-
};
58-
fixEvent.preventDefault = function() {
59-
this.returnValue = false;
60-
};
61-
fixEvent.stopPropagation = function() {
62-
this.cancelBubble = true;
63-
};
64-
65-
// end from Dean Edwards
66-
671

682
/**
69-
* Creates an Element for insertion into the DOM tree.
70-
* From http://simon.incutio.com/archive/2003/06/15/javascriptWithXML
3+
* Common Javascript code which applies to all static HTML files.
714
*
72-
* @param element the element type to be created.
73-
* e.g. ul (no angle brackets)
74-
**/
75-
function createElement(element) {
76-
if (typeof document.createElementNS != 'undefined') {
77-
return document.createElementNS('http://www.w3.org/1999/xhtml', element);
78-
}
79-
if (typeof document.createElement != 'undefined') {
80-
return document.createElement(element);
81-
}
82-
return false;
5+
* Copyright (C) 2025 Deutsches Elektronen-Synchrotron
6+
* Tino Reichardt <tino.reichardt@desy.de>
7+
*/
8+
9+
let isHumanReadable = true;
10+
11+
function BytesToHumanReadable(bytes) {
12+
const units = ['MiB', 'GiB', 'TiB', 'PiB', 'EiB'];
13+
let i = 0;
14+
while (bytes >= 1024 && i < units.length - 1) {
15+
bytes /= 1024;
16+
i++;
17+
}
18+
return `${bytes.toFixed(1)} ${units[i]}`;
8319
}
8420

85-
/**
86-
* "targ" is the element which caused this function to be called
87-
* from http://www.quirksmode.org/js/events_properties.html
88-
**/
89-
function getEventTarget(e) {
90-
var targ;
91-
if (!e) {
92-
e = window.event;
93-
}
94-
if (e.target) {
95-
targ = e.target;
96-
} else if (e.srcElement) {
97-
targ = e.srcElement;
98-
}
99-
if (targ.nodeType == 3) { // defeat Safari bug
100-
targ = targ.parentNode;
101-
}
102-
103-
return targ;
21+
function ClickToggleButton(btn) {
22+
btn.textContent = isHumanReadable ? ' Switch to MiB ' : '[Switch to human readable]';
23+
const totalCells = document.querySelectorAll("table tbody td.total, table tbody td.free, table tbody td.precious");
24+
totalCells.forEach((cell, index) => {
25+
const raw = parseInt(cell.getAttribute('data-st-key'), 10);
26+
cell.textContent = isHumanReadable ? BytesToHumanReadable(raw) : raw;
27+
});
28+
isHumanReadable = !isHumanReadable;
10429
}
10530

31+
// when fully loaded - change some static content
32+
document.addEventListener("DOMContentLoaded", () => {
33+
// fix sorting the times at: http://host:2288/cellInfo
34+
const ping = document.querySelector("th.ping");
35+
if (ping) { ping.classList.add("sorttable_numeric"); }
36+
37+
const main = document.getElementById("main");
38+
if (main) {
39+
// check if we can modify some raw values for human readability
40+
const totalCells = document.querySelectorAll("table tbody td.total, table tbody td.free, table tbody td.precious");
41+
if (totalCells.length <= 0) { return; }
42+
totalCells.forEach((cell, index) => {
43+
if (!cell.hasAttribute('data-st-key')) {
44+
// remember raw value for later use
45+
const rawValue = parseInt(cell.textContent.replace(/[^\d]/g, ''), 10);
46+
if (!isNaN(rawValue)) { cell.setAttribute('data-st-key', rawValue); }
47+
}
48+
const raw = parseInt(cell.getAttribute('data-st-key'), 10);
49+
cell.textContent = isHumanReadable ? raw : BytesToHumanReadable(raw);
50+
});
51+
52+
const toggleBtn = document.createElement("button");
53+
main.parentNode.insertBefore(toggleBtn, main);
54+
toggleBtn.addEventListener("click", () => ClickToggleButton(toggleBtn));
55+
toggleBtn.click();
56+
}
57+
});

‎skel/share/httpd/static/scripts/sorting/css.js‎

Lines changed: 0 additions & 145 deletions
This file was deleted.

0 commit comments

Comments
 (0)