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, 92 insertions, 0 deletions

diff --git a/src/zenserver/frontend/html/pages/project.js b/src/zenserver/frontend/html/pages/project.js
new file mode 100644
index 000000000..05e8efc9f
--- /dev/null
+++ b/src/zenserver/frontend/html/pages/project.js
@@ -0,0 +1,92 @@
+// 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 { Modal } from "../util/modal.js"
+import { Table, PropTable, Toolbar } from "../util/widgets.js"
+
+////////////////////////////////////////////////////////////////////////////////
+export class Page extends ZenPage
+{
+	async main()
+	{
+		// info
+		var section = this.add_section("info");
+
+		const project = this.get_param("project");
+
+		this.set_title("project - " + project);
+
+		var info = await new Fetcher().resource("prj", project).json();
+		var prop_table = section.add_widget(PropTable);
+		for (const key in info)
+		{
+			if (key == "oplogs")
+				continue;
+
+			prop_table.add_property(key, info[key]);
+		}
+
+		// oplog
+		section = this.add_section("oplogs");
+
+		var oplog_table = section.add_widget(
+			Table,
+			["name", "marker", "size", "ops", "expired", "actions"],
+			Table.Flag_PackRight
+		)
+
+		var count = 0;
+		for (const oplog of info["oplogs"])
+		{
+			const name = oplog["id"];
+
+			var info = new Fetcher().resource("prj", project, "oplog", name).json();
+
+			var row = oplog_table.add_row(name);
+
+			var cell = row.get_cell(0);
+			this.as_link(cell, "oplog", name)
+
+			cell = row.get_cell(-1);
+			const action_tb = new Toolbar(cell, true).left();
+			this.as_link(action_tb.add("view"), "oplog", name);
+			this.as_link(action_tb.add("tree"), "tree", name);
+			action_tb.add("drop").on_click((x) => this.drop_oplog(x), name);
+
+			info = await info;
+			row.get_cell(1).text(info["markerpath"]);
+			row.get_cell(2).text(Friendly.kib(info["totalsize"]));
+			row.get_cell(3).text(Friendly.sep(info["opcount"]));
+			row.get_cell(4).text(info["expired"]);
+		}
+	}
+
+	as_link(component, page, oplog_id)
+	{
+		component.link("", {
+			"page" : page,
+			"project" : this.get_param("project"),
+			"oplog" : oplog_id,
+		});
+	}
+
+	drop_oplog(oplog_id)
+	{
+		const drop = async () => {
+			await new Fetcher()
+				.resource("prj", this.get_param("project"), "oplog", oplog_id)
+				.delete();
+			this.reload();
+		};
+
+		new Modal()
+			.title("Confirmation")
+			.message(`Drop oplog '${oplog_id}'?`)
+			.option("Yes", () => drop())
+			.option("No");
+	}
+}