Dashboard: alignment of complex stats & logo goes home (#187)

* Unselectable logo text

* Revisit alignment of complex request/bytes stats

* ZenStore logo takes you home

3 files changed, 78 insertions, 57 deletions

diff --git a/src/zenserver/frontend/html.zip b/src/zenserver/frontend/html.zip
index 9080591e5..0edf64c95 100644
--- a/src/zenserver/frontend/html.zip
+++ b/src/zenserver/frontend/html.zip
diff --git a/src/zenserver/frontend/html/zen.css b/src/zenserver/frontend/html/zen.css
index d9b983ff6..885c58fc4 100644
--- a/src/zenserver/frontend/html/zen.css
+++ b/src/zenserver/frontend/html/zen.css
@@ -11,7 +11,7 @@
 	--theme_p1:	#58b;
 	--theme_p2:	#cce;
 	--theme_p3:	#dde;
-	--theme_p4:	#eef;
+	--theme_p4:	#eeeef7;
 
 	--theme_er:	#fcc;
 }
@@ -254,17 +254,32 @@ h3 {
 	font-size:		10pt;
 	font-weight:	bolder;
 	margin-bottom:	2.6em;
+	position:		relative;
 }
 
 #logo {
 	width:			min-content;
 	margin:			auto;
+	user-select:	none;
+	position:		relative;
+}
+
+#logo #go_home {
+	width:			100%;
+	height:			100%;
+	position:		absolute;
+	top:			0;
+	left:			0;
+}
+
+#logo:hover {
+	filter:			drop-shadow(0 0.15em 0.1em var(--theme_p2));
 }
 
 #ue_logo {
 	position:		absolute;
-	top:			2em;
-	right:			2em;
+	top:			1em;
+	right:			0;
 	width:			5em;
 	margin:			auto;
 }
@@ -285,4 +300,11 @@ h3 {
 #error > pre:nth-child(2) {
 	font-size:	0.8em;
 	color:		var(--theme_g1);
-};
+}
+
+/* stats -------------------------------------------------------------------- */
+
+#stat .zen_proptable pre {
+	float:			left;
+	min-width:		15%;
+}
diff --git a/src/zenserver/frontend/html/zen.js b/src/zenserver/frontend/html/zen.js
index 3fac5f312..df71cac7b 100644
--- a/src/zenserver/frontend/html/zen.js
+++ b/src/zenserver/frontend/html/zen.js
@@ -558,13 +558,30 @@ class Page
 ////////////////////////////////////////////////////////////////////////////////
 class ZenPage extends Page
 {
-	constructor(...args)
+	constructor(parent, ...args)
 	{
-		super(...args);
+		super(parent, ...args);
 		super.set_title("zen");
+		this.add_branding(parent);
 		this.generate_crumbs();
 	}
 
+	add_branding(parent)
+	{
+		var root = parent.tag().id("branding");
+
+		const zen_store = root.tag("pre").id("logo").text(
+			"_________            _______ __\n" +
+			"\\____   /___   ___  /   ___//  |__ ___ ______  ____\n" +
+			"  /  __/ __ \\ /   \\ \\___  \\\\_  __//   \\\\_    \\/ __ \\\n" +
+			" /     \\  __//  |  \\/      \\|  | (  -  )|  |\\/\\  __/\n" +
+			"/______/\\___/\\__|__/\\______/|__|  \\___/ |__|   \\___|"
+		);
+		zen_store.tag().id("go_home").on_click(() => window.location.search = "");
+
+		root.tag("img").attr("src", "favicon.ico").id("ue_logo");
+	}
+
 	set_title(...args)
 	{
 		super.set_title(...args);
@@ -1068,55 +1085,53 @@ class Stat extends ZenPage
 {
 	static TemporalStat = class
 	{
-		constructor(data)
+		constructor(data, as_bytes)
 		{
 			this._data = data;
+			this._as_bytes = as_bytes;
 		}
 
 		toString()
 		{
 			const columns = [
-				[],
-				["rate;"],	[],
-				["t;"],		[], [],
+				/* count */	{},
+				/* rate */	{},
+				/* t */		{}, {},
 			];
 			const data = this._data;
 			for (var key in data)
 			{
-				var value = key + ": " + Friendly.sep(data[key], 2);
-				value = value.replace("rate_", "");
-				value = value.replace("t_", "");
-
-				if (key.startsWith("rate_"))	columns[2].push(value);
-				else if (key.startsWith("t_p")) columns[5].push(value);
-				else if (key.startsWith("t_"))	columns[4].push(value);
-				else							columns[0].push(Friendly.sep(data[key]));
+				var out = columns[0];
+				if (key.startsWith("rate_"))	out = columns[1];
+				else if (key.startsWith("t_p")) out = columns[3];
+				else if (key.startsWith("t_"))	out = columns[2];
+				out[key] = data[key];
 			}
 
-			var line_count = 0
-			for (var column of columns)
-				line_count = Math.max(line_count, column.length);
-
-			const widths = [13, 5, 19, 2, 23, -1];
+			var friendly = this._as_bytes ? Friendly.kib : Friendly.sep;
 
 			var content = "";
-			for (var i = 0; i < line_count; ++i)
+			for (var i = 0; i < columns.length; ++i)
 			{
-				for (var j in columns)
+				content += "<pre>";
+				const column = columns[i];
+				for (var key in column)
 				{
-					const column = columns[j];
-					var cell = (column.length > i) ? column[i] : "";
-					var lead = cell.indexOf(":");
-					if (lead >= 0)
-						cell = " ".repeat(7 - lead) + cell;
-					if (widths[j] > 0)
-						cell = cell.padEnd(widths[j]);
-					content += cell;
+					var value = column[key];
+					if (i)
+					{
+						value = Friendly.sep(value, 2);
+						key = key.padStart(9);
+						content += key + ": " + value;
+					}
+					else
+						content += friendly(value);
+					content += "\n";
 				}
-				content += "\n";
+				content += "</pre>";
 			}
 
-			return "<pre>" + content + "</pre>";
+			return content;
 		}
 	}
 
@@ -1194,7 +1209,8 @@ class Stat extends ZenPage
 
 				if (candidate["rate_mean"] != undefined)
 				{
-					node[name] = new Stat.TemporalStat(candidate);
+					const as_bytes = (name.indexOf("bytes") >= 0);
+					node[name] = new Stat.TemporalStat(candidate, as_bytes);
 					continue;
 				}
 
@@ -1210,32 +1226,15 @@ class Stat extends ZenPage
 
 
 ////////////////////////////////////////////////////////////////////////////////
-function add_branding(parent)
-{
-	var root = parent.tag().id("branding");
-
-	root.tag("pre").id("logo").text(
-		"_________            _______ __\n" +
-		"\\____   /___   ___  /   ___//  |__ ___ ______  ____\n" +
-		"  /  __/ __ \\ /   \\ \\___  \\\\_  __//   \\\\_    \\/ __ \\\n" +
-		" /     \\  __//  |  \\/      \\|  | (  -  )|  |\\/\\  __/\n" +
-		"/______/\\___/\\__|__/\\______/|__|  \\___/ |__|   \\___|"
-	);
-
-	root.tag("img").attr("src", "favicon.ico").id("ue_logo");
-}
-
-////////////////////////////////////////////////////////////////////////////////
 async function main_guarded()
 {
-	const root = new Component(document.body).tag().id("container").tag();
-
-	add_branding(root);
-
 	const params = new URLSearchParams(window.location.search);
 	const page = params.get("page");
-	var impl = undefined;
 
+	const body = new Component(document.body).id(page);
+	const root = body.tag().id("container").tag();
+
+	var impl = undefined;
 	if (page == "project")		impl = new Project(root, params);
 	else if (page == "stat")	impl = new Stat(root, params);
 	else if (page == "oplog")	impl = new Oplog(root, params);