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.

1 files changed, 70 insertions, 0 deletions

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");
+	}
+}