Surfaced basic z$ information to self-hosted dashboard (#441)

- Namespaces are listed on the start page.
- Namespaces can be dropped.
- New page to show details of a namespace and list its buckets.
- Buckets can be dropped.

3 files changed, 124 insertions, 0 deletions

diff --git a/src/zenserver/frontend/html.zip b/src/zenserver/frontend/html.zip
index eadfcf84c..5778fa3d2 100644
--- a/src/zenserver/frontend/html.zip
+++ b/src/zenserver/frontend/html.zip
diff --git a/src/zenserver/frontend/html/pages/start.js b/src/zenserver/frontend/html/pages/start.js
index 472bb27ae..d1c13ccc7 100644
--- a/src/zenserver/frontend/html/pages/start.js
+++ b/src/zenserver/frontend/html/pages/start.js
@@ -41,6 +41,41 @@ export class Page extends ZenPage
 			action_tb.left().add("drop").on_click((x) => this.drop_project(x), project.Id);
 		}
 
+		// cache
+		var section = this.add_section("z$");
+		columns = [
+			"namespace",
+			"dir",
+			"buckets",
+			"entries",
+			"size disk",
+			"size mem",
+			"actions",
+		]
+		var zcache_info = new Fetcher().resource("/z$/").json();
+		const cache_table = section.add_widget(Table, columns, Table.Flag_FitLeft|Table.Flag_PackRight);
+		for (const namespace of (await zcache_info)["Namespaces"])
+		{
+			new Fetcher().resource(`/z$/${namespace}/`).json().then((data) => {
+				const row = cache_table.add_row(
+					"",
+					data["Configuration"]["RootDir"],
+					data["Buckets"].length,
+					data["EntryCount"],
+					Friendly.kib(data["StorageSize"].DiskSize),
+					Friendly.kib(data["StorageSize"].MemorySize)
+				);
+				var cell = row.get_cell(0);
+				cell.tag().text(namespace).on_click(() => this.view_zcache(namespace));
+				row.get_cell(1).tag().text(namespace);
+
+				cell = row.get_cell(-1);
+				const action_tb = new Toolbar(cell, true);
+				action_tb.left().add("view").on_click(() => this.view_zcache(namespace));
+				action_tb.left().add("drop").on_click(() => this.drop_zcache(namespace));
+			});
+		}
+
 		// stats
 		section = this.add_section("stats");
 		columns = [
@@ -92,4 +127,23 @@ export class Page extends ZenPage
 			.option("Yes", () => drop())
 			.option("No");
 	}
+
+	view_zcache(namespace)
+	{
+		window.location = "?page=zcache&namespace=" + namespace;
+	}
+
+	drop_zcache(namespace)
+	{
+		const drop = async () => {
+			await new Fetcher().resource("z$", namespace).delete();
+			this.reload();
+		};
+
+		new Modal()
+			.title("Confirmation")
+			.message(`Drop zcache '${namespace}'?`)
+			.option("Yes", () => drop())
+			.option("No");
+	}
 }
diff --git a/src/zenserver/frontend/html/pages/zcache.js b/src/zenserver/frontend/html/pages/zcache.js
new file mode 100644
index 000000000..974893b21
--- /dev/null
+++ b/src/zenserver/frontend/html/pages/zcache.js
@@ -0,0 +1,70 @@
+// 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()
+	{
+		const namespace = this.get_param("namespace");
+
+		var info = new Fetcher().resource(`/z$/${namespace}/`).json();
+
+		this.set_title("cache - " + namespace);
+
+		var section = this.add_section("info");
+		var cfg_table = section.add_section("config").add_widget(PropTable);
+		var storage_table = section.add_section("storage").add_widget(PropTable);
+
+		info = await info;
+
+		cfg_table.add_object(info["Configuration"], true);
+
+		storage_table.add_property("disk", Friendly.kib(info["StorageSize"]["DiskSize"]));
+		storage_table.add_property("mem", Friendly.kib(info["StorageSize"]["MemorySize"]));
+		storage_table.add_property("entries", Friendly.sep(info["EntryCount"]));
+
+		var column_names = ["name", "disk", "mem", "entries", "actions"];
+		var bucket_table = this.add_section("buckets").add_widget(
+			Table,
+			column_names,
+			Table.Flag_BiasLeft
+		);
+		for (const bucket of info["Buckets"])
+		{
+			const row = bucket_table.add_row(bucket);
+			new Fetcher().resource(`/z$/${namespace}/${bucket}`).json().then((data) => {
+				row.get_cell(1).text(Friendly.kib(data["StorageSize"]["DiskSize"]));
+				row.get_cell(2).text(Friendly.kib(data["StorageSize"]["MemorySize"]));
+				row.get_cell(3).text(Friendly.sep(data["DiskEntryCount"]));
+
+				const cell = row.get_cell(-1);
+				const action_tb = new Toolbar(cell, true);
+				action_tb.left().add("view")
+				action_tb.left().add("drop").on_click(() => this.drop_bucket(bucket));
+			});
+		}
+	}
+
+	drop_bucket(bucket)
+	{
+		const drop = async () => {
+			const namespace = this.get_param("namespace");
+			await new Fetcher().resource("z$", namespace, bucket).delete();
+			this.reload();
+		};
+
+		new Modal()
+			.title("Confirmation")
+			.message(`Drop bucket '${bucket}'?`)
+			.option("Yes", () => drop())
+			.option("No");
+	}
+}