Dashboard: oplog tree view (#217)

* Turned tables and progress bars and friends into "widgets!"

* A step to abstracting away a page's the internal DOM structure

* Folded sector creation into Page and pivoted it to a widget host

* Try and keep start/count as numbers regardless of input

* No need for the entry table to be defined up front now

* Add op count and log sixe to oplog list page

* Cache left side toolbar object

* Bounds count page start when building list of oplog entrie

* Start/end navigation tools

* Build rest of entry page while waiting for indexer to load

* Consistent naming with other pages

* Spacially consolidate fetching code

* Hide fetch latency to speed up index generation workers

* Extract dashboard structure from zen.js monolith

* Fix breadcrumbs after restructuring

* Add view link to actions cell of oplogs list

* Generator to enumerate names of entries in indexer

* Methods for simple traversal of component relations

* is() to check if a component is of a certain type

* Extend attr() to get and unset a component's attributes

* Unsetting all styles of anchor tags was underisrable

* Restore page name as id of container element

* A tree view of an oplog

* Move helper class out to private module scope

* Small tweak to use left var that already exists

* Changelog update

* Updated frontend .zip archive

1 files changed, 94 insertions, 0 deletions

diff --git a/src/zenserver/frontend/html/pages/start.js b/src/zenserver/frontend/html/pages/start.js
new file mode 100644
index 000000000..8c9df62f9
--- /dev/null
+++ b/src/zenserver/frontend/html/pages/start.js
@@ -0,0 +1,94 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+"use strict";
+
+import { ZenPage } from "./page.js"
+import { Fetcher } from "../util/fetcher.js"
+import { Friendly } from "../util/friendly.js"
+import { Table, Toolbar } from "../util/widgets.js"
+
+////////////////////////////////////////////////////////////////////////////////
+export class Page extends ZenPage
+{
+	async main()
+	{
+		var section = this.add_section("projects");
+
+		// project list
+		var columns = [
+			"name",
+			"project_dir",
+			"engine_dir",
+			"actions",
+		];
+		var table = section.add_widget(Table, columns);
+
+		for (const project of await new Fetcher().resource("/prj/list").json())
+		{
+			var row = table.add_row(
+				"",
+				project.ProjectRootDir,
+				project.EngineRootDir,
+			);
+
+			var cell = row.get_cell(0);
+			cell.tag().text(project.Id).on_click((x) => this.view_project(x), project.Id);
+
+			var cell = row.get_cell(-1);
+			var action_tb = new Toolbar(cell, true);
+			action_tb.left().add("view").on_click((x) => this.view_project(x), project.Id);
+			action_tb.left().add("drop").on_click((x) => this.drop_project(x), project.Id);
+		}
+
+		// stats
+		section = this.add_section("stats");
+		columns = [
+			"name",
+			"req count",
+			"size disk",
+			"size mem",
+			"cid total",
+		];
+		const stats_table = section.add_widget(Table, columns, Table.Flag_PackRight);
+		var providers = new Fetcher().resource("stats").json();
+		for (var provider of (await providers)["providers"])
+		{
+			var stats = await new Fetcher().resource("stats", provider).json();
+			var values = [""];
+			try {
+				values.push(stats.requests.count);
+				const size_stat = (stats.store || stats.cache).size;
+				values.push(Friendly.kib(size_stat.disk));
+				values.push(Friendly.kib(size_stat.memory));
+				values.push(stats.cid.size.total);
+			}
+			catch {}
+			row = stats_table.add_row(...values);
+			row.get_cell(0).tag().text(provider).on_click((x) => this.view_stat(x), provider);
+		}
+	}
+
+	view_stat(provider)
+	{
+		window.location = "?page=stat&provider=" + provider;
+	}
+
+	view_project(project_id)
+	{
+		window.location = "?page=project&project=" + project_id;
+	}
+
+	drop_project(project_id)
+	{
+		const drop = async () => {
+			await new Fetcher().resource("prj", project_id).delete();
+			this.reload();
+		};
+
+		new Modal()
+			.title("Confirmation")
+			.message(`Drop project '${project_id}'?`)
+			.option("Yes", () => drop())
+			.option("No");
+	}
+}