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

diff --git a/src/zenserver/frontend/html/util/modal.js b/src/zenserver/frontend/html/util/modal.js
new file mode 100644
index 000000000..a28b013d1
--- /dev/null
+++ b/src/zenserver/frontend/html/util/modal.js
@@ -0,0 +1,46 @@
+// Copyright Epic Games, Inc. All Rights Reserved.
+
+"use strict";
+
+import { Component } from "./component.js"
+
+////////////////////////////////////////////////////////////////////////////////
+export class Modal
+{
+	constructor()
+	{
+		const body = new Component(document.body);
+		this._root = body.tag().classify("zen_modal");
+
+		const bg = this._root.tag().classify("zen_modal_bg");
+		bg.on("click", () => this._root.destroy());
+
+		const rect = this._root.tag();
+		this._title = rect.tag().classify("zen_modal_title");
+		this._content = rect.tag().classify("zen_modal_message");
+		this._buttons = rect.tag().classify("zen_modal_buttons");
+	}
+
+	title(value)
+	{
+		this._title.text(value);
+		return this;
+	}
+
+	message(value)
+	{
+		this._content.text(value);
+		return this;
+	}
+
+	option(name, func, ...args)
+	{
+		const thunk = () => {
+			this._root.destroy();
+			if (func)
+				func(...args);
+		};
+		this._buttons.tag().text(name).on("click", thunk);
+		return this;
+	}
+}