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

diff --git a/src/zenserver/frontend/html/pages/test.js b/src/zenserver/frontend/html/pages/test.js
new file mode 100644
index 000000000..2a84ff163
--- /dev/null
+++ b/src/zenserver/frontend/html/pages/test.js
@@ -0,0 +1,147 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+"use strict";
+
+import { ZenPage } from "./page.js"
+import { Table, PropTable, Toolbar, ProgressBar } from "../util/widgets.js"
+import { Modal, } from "../util/modal.js"
+
+////////////////////////////////////////////////////////////////////////////////
+export class Page extends ZenPage
+{
+	main()
+	{
+		var gen_word = (function() {
+			var s = 0x314251;
+			var r = function(a, b) {
+				s = (s * 0x493) & 0x7fffffff;
+				return ((s >> 3) % (b - a)) + a;
+			};
+			return function(a=5, b=10) {
+				const co = "aeioubcdfghjklmnpqrstvwxyz";
+				var ret = "";
+				for (var i = 0, n = r(a,b); i < n; ++i)
+					ret += co[r(0, co.length)];
+				return ret;
+			};
+		})();
+		var gen_para = function(a=5, b=10, s=" ") {
+			var ret = gen_word(2, 9);
+			for (var i = 0; i < ((ret.length * 0x493) % (b - a)) + b; ++i)
+				ret += s + gen_word(2, 9);
+			return ret;
+		}
+
+		this.set_title("test");
+
+		// swatches
+		const swatches = this.tag()
+			.style("position", "absolute")
+			.style("top", "3.5em")
+			.style("left", "3.5em")
+		for (var suffix of ["g0", "g1", "g2", "g3", "g4",
+							"p0", "p1", "p2", "p3", "p4",
+							"ln", "er"])
+		{
+			swatches.tag()
+				.style("float", "left")
+				.style("width", "2em")
+				.style("height", "2em")
+				.style("background-color", `var(--theme_${suffix})`)
+				.text(suffix);
+		}
+
+		// section
+		var section0 = this.add_section("section");
+		var section1 = section0.add_section("sub-section");
+		var section2 = section1.add_section("sub-sub-section");
+
+		// table
+		const cols = [gen_word(), gen_word(), gen_word(), gen_word()];
+		var tables = [
+			section0.add_widget(Table, cols),
+			section1.add_widget(Table, cols, Table.Flag_EvenSpacing, 5),
+			section2.add_widget(Table, cols, Table.Flag_EvenSpacing, -1),
+		];
+
+		for (const table of tables)
+		{
+			table.add_row(gen_word());
+			table.add_row(gen_word(), gen_word(), gen_word(), gen_word());
+			table.add_row(gen_word(), gen_word(), gen_para(15, 25), gen_word(), gen_word(), gen_word(), gen_word(), gen_word());
+		}
+
+		// spacing tests
+		{
+			const spacing_section = section0.add_section("spacing");
+			const flags = {
+				"EvenSpacing"			: Table.Flag_EvenSpacing,
+				"EvenSpacing|BiasLeft"	: Table.Flag_EvenSpacing | Table.Flag_BiasLeft,
+				"PackRight"				: Table.Flag_PackRight,
+			};
+			for (const flag_name in flags)
+			{
+				const flag = flags[flag_name];
+				const another_table = spacing_section.add_widget(
+					Table,
+					[flag_name, gen_word(), gen_word(), gen_word(), gen_word()],
+					flag,
+				);
+				for (var i = 0; i < 3; ++i)
+					another_table.add_row(gen_para(1, 5), gen_para(1, 3), gen_word(), gen_word(), gen_word());
+			}
+		}
+
+		// prop-table
+		var pt_section = section0.add_section("prop-table")
+		var prop_table = pt_section.add_widget(PropTable);
+		for (var i = 0; i < 7; ++i)
+			prop_table.add_property(gen_word(), gen_para(1, 20, "/"));
+
+		// misc
+		const misc_section = section0.add_section("misc").add_section("misc");
+		misc_section.tag().text("just text");
+		misc_section.tag().text("this is a link").link();
+		misc_section.tag().text("MODAL DIALOG").on_click((e) => {
+			new Modal()
+				.title("modal")
+				.message("here is a message what I wrote")
+				.option("press me!", () => { alert("hi"); })
+				.option("cancel", () => void(0));
+		});
+
+		// toolbar
+		pt_section.add_section("toolbar");
+		var toolbar = pt_section.add_widget(Toolbar);
+		for (const side of [toolbar.left(), toolbar.right()])
+		{
+			side.add("tb_item0");
+			side.add("tb_item1");
+			side.sep();
+			side.add("tb_item2");
+		}
+
+		var tb_item_clicked = function(arg0, arg1) {
+			alert(arg0 + " != " + arg1);
+		};
+		var row = prop_table.add_property("toolbar", "");
+		toolbar = new Toolbar(row.get_cell(-1), true);
+		toolbar.left() .add("tbitem0").on_click(tb_item_clicked, 11, -22);
+		toolbar.left() .add("tbitem1").on_click(tb_item_clicked, 22, -33);
+		toolbar.right().add("tbitem2").on_click(tb_item_clicked, 33, -55);
+		toolbar.right().add("tbitem3").on_click(tb_item_clicked, 44, -88);
+
+		// progress bar
+		const progress_bar = this.add_widget(ProgressBar);
+		setInterval(function() {
+			var count = 0
+			return () => {
+				count = (count + 1) % 100;
+				progress_bar.set_progress("testing", count, 100);
+			};
+		}(), 49.3);
+
+		// error
+		throw Error("deliberate error");
+	}
+}