Dashboard: display package data sizes in oplog entry and tree views. (#232)

* Wrong divisor for friendly giga-values

* We want Explorer style for kilo/kibi units; round up

* var -> const - zero idea if this matters

* Include sum of an entry's package data sizes in index

* Method to enurate all properties of a loaded oplog index

* Include bulkdata size in an oplog index

* Found a space that was missing

* Show package data sizes when viewing an oplog entry

* Navigating a component tree would error out at the end of the chain

* Parameterise friendly rounding

* Added size and rawsize columns to oplog tree view

* Sort of parameterised indexer's worker count and page size

* Right-align size columns on entry view page

* Updated frontend .zip archive

* A changelog update

2 files changed, 85 insertions, 17 deletions

diff --git a/src/zenserver/frontend/html/pages/entry.js b/src/zenserver/frontend/html/pages/entry.js
index b166d0a6f..a0e3ee915 100644
--- a/src/zenserver/frontend/html/pages/entry.js
+++ b/src/zenserver/frontend/html/pages/entry.js
@@ -4,6 +4,7 @@
 
 import { ZenPage } from "./page.js"
 import { Fetcher } from "../util/fetcher.js"
+import { Friendly } from "../util/friendly.js"
 import { Table, PropTable, Toolbar, ProgressBar } from "../util/widgets.js"
 import { create_indexer } from "../indexer/indexer.js"
 
@@ -84,7 +85,11 @@ export class Page extends ZenPage
 		// data
 		{
 			const sub_section = section.add_section("data");
-			const table = sub_section.add_widget(Table, ["name", "actions"], Table.Flag_PackRight);
+			const table = sub_section.add_widget(
+				Table,
+				["name", "size", "rawsize", "actions"], Table.Flag_PackRight
+			);
+			table.id("datatable");
 			for (const field_name of ["packagedata", "bulkdata"])
 			{
 				var pkg_data = entry.find(field_name);
@@ -93,12 +98,13 @@ export class Page extends ZenPage
 
 				for (const item of pkg_data.as_array())
 				{
-					var io_hash;
-					var file_name;
+					var io_hash, size, raw_size, file_name;
 					for (const field of item.as_object())
 					{
-						if (field.is_named("data")) io_hash = field.as_value();
-						else if (field.is_named("filename")) file_name = field.as_value();
+						if (field.is_named("data"))				io_hash = field.as_value();
+						else if (field.is_named("filename"))	file_name = field.as_value();
+						else if (field.is_named("size"))		size = field.as_value();
+						else if (field.is_named("rawsize"))		raw_size = field.as_value();
 					}
 
 					if (io_hash instanceof Uint8Array)
@@ -109,7 +115,10 @@ export class Page extends ZenPage
 						io_hash = ret;
 					}
 
-					const row = table.add_row(file_name);
+					size = (size !== undefined) ? Friendly.kib(size) : "";
+					raw_size = (raw_size !== undefined) ? Friendly.kib(raw_size) : "";
+
+					const row = table.add_row(file_name, size, raw_size);
 
 					const project = this.get_param("project");
 					const oplog = this.get_param("oplog");
diff --git a/src/zenserver/frontend/html/pages/tree.js b/src/zenserver/frontend/html/pages/tree.js
index c3cea0eb5..23ff3e819 100644
--- a/src/zenserver/frontend/html/pages/tree.js
+++ b/src/zenserver/frontend/html/pages/tree.js
@@ -3,6 +3,7 @@
 "use strict";
 
 import { ZenPage } from "./page.js"
+import { Friendly } from "../util/friendly.js"
 import { ProgressBar } from "../util/widgets.js"
 import { create_indexer } from "../indexer/indexer.js"
 
@@ -13,17 +14,31 @@ export class Page extends ZenPage
 	{
 		const project = this.get_param("project");
 		const oplog = this.get_param("oplog");
+		const sort_by = this.get_param("sort", -1);
 
 		this._indexer = this._load_indexer(project, oplog);
 
 		this.set_title("tree - " + oplog);
 		const section = this.add_section(project + " - " + oplog);
 
+		this._create_tree(section);
+		this._expand(this._root);
+		this._activate_sort_header(-1, sort_by);
+	}
+
+	_create_tree(section)
+	{
 		const list = section.tag().id("tree_root").tag("ul");
 		const root = list.tag("li");
 		root.attr("part", "/");
-		root.tag().text("/");
-		this._expand(root);
+		const header = root.tag();
+		header.tag().text("/");
+		this._sort_headers = [
+			header.tag().text("size").on_click(() => this._change_sort(0)),
+			header.tag().text("rawsize").on_click(() => this._change_sort(1)),
+			header.tag().text("count").on_click(() => this._change_sort(2)),
+		];
+		this._root = root;
 	}
 
 	async _load_indexer(project, oplog)
@@ -47,12 +62,11 @@ export class Page extends ZenPage
 			if (!item.is("li")) continue;
 			prefix = item.attr("part") + prefix;
 		}
-		console.log(prefix);
 
 		const indexer = await this._indexer;
 
 		const new_nodes = new Object();
-		for (var name of indexer.enum_names())
+		for (var [name, size, raw_size] of indexer.enum_all())
 		{
 			if (!name.startsWith(prefix))
 				continue;
@@ -62,19 +76,25 @@ export class Page extends ZenPage
 			if (slash != -1)
 				name = name.substr(0, slash + 1);
 
-			if (new_nodes[name] === undefined)
-				new_nodes[name] = 1;
+			if (new_nodes[name] !== undefined)
+			{
+				new_nodes[name][0] += size;
+				new_nodes[name][1] += raw_size;
+				new_nodes[name][2] += 1;
+			}
 			else
-				new_nodes[name] += 1;
+				new_nodes[name] = [size, raw_size, 1];
 		}
 
-		const by_count = this.get_param("bycount", 0)|0;
+		var sort_by = this.get_param("sort", -1)|0;
+		sort_by = Math.min(Math.max(sort_by, -1), 3);
+
 		const sorted_keys = Object.keys(new_nodes).sort((l, r) => {
 			const is_node_l = l.endsWith("/");
 			const any_nodes = is_node_l + r.endsWith("/");
-			if (any_nodes == 0)	return r < l;
 			if (any_nodes == 1)	return is_node_l ? -1 : 1;
-			return by_count ? (new_nodes[r] - new_nodes[l]) : (r < l);
+			if (sort_by >= 0) return (new_nodes[r][sort_by] - new_nodes[l][sort_by]);
+			return r < l;
 		})
 
 		const list = node.tag("ul");
@@ -83,10 +103,18 @@ export class Page extends ZenPage
 			const item = list.tag("li").attr("part", name);
 			const info = item.tag();
 			const label = info.tag().text(name);
+
+			for (var i = 0; i < 2; ++i)
+			{
+				const size = Friendly.kib(new_nodes[name][i]);
+				info.tag().text(size);
+			}
+
 			if (name.endsWith("/"))
 			{
+				const count = Friendly.sep(new_nodes[name][2]);
+				info.tag().text(count);
 				label.on_click((x) => this.expand_collapse(x), item);
-				info.tag().text(new_nodes[name]);
 				continue;
 			}
 
@@ -115,4 +143,35 @@ export class Page extends ZenPage
 			return this._expand(node);
 		return this._collapse(node);
 	}
+
+	_activate_sort_header(current, next)
+	{
+		const impl = (index, is_on) => {
+			if (index >= 0 && index < this._sort_headers.length)
+				this._sort_headers[index].attr("active", is_on ? "" : null);
+		};
+		impl(current, false);
+		impl(next, true);
+	}
+
+	_change_sort(sort_by)
+	{
+		const current = this.get_param("sort");
+		if (current == sort_by)
+			sort_by = -1;
+
+		this._activate_sort_header(current, sort_by);
+
+		this.set_param("sort", sort_by);
+
+		for (var node = this._root.first_child(); node;)
+		{
+			const next = node.next_sibling();
+			if (node.is("ul"))
+				node.destroy();
+			node = next;
+		}
+
+		this._expand(this._root);
+	}
 }