1 files changed, 80 insertions, 0 deletions
diff --git a/src/zenserver/frontend/html/pages/builds.js b/src/zenserver/frontend/html/pages/builds.js
new file mode 100644
index 000000000..c63d13b91
--- /dev/null
+++ b/src/zenserver/frontend/html/pages/builds.js
@@ -0,0 +1,80 @@
+// 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"
+
+////////////////////////////////////////////////////////////////////////////////
+export class Page extends ZenPage
+{
+	generate_crumbs() {}
+
+	async main()
+	{
+		this.set_title("build store");
+
+		// Build Store Stats
+		const stats_section = this._collapsible_section("Build Store Service Stats");
+		stats_section.tag().classify("dropall").text("raw yaml \u2192").on_click(() => {
+			window.open("/stats/builds.yaml", "_blank");
+		});
+		this._stats_grid = stats_section.tag().classify("grid").classify("stats-tiles");
+
+		const stats = await new Fetcher().resource("stats", "builds").json();
+		if (stats)
+		{
+			this._render_stats(stats);
+		}
+
+		this.connect_stats_ws((all_stats) => {
+			const s = all_stats["builds"];
+			if (s)
+			{
+				this._render_stats(s);
+			}
+		});
+	}
+
+	_render_stats(stats)
+	{
+		stats = this._merge_last_stats(stats);
+		const grid = this._stats_grid;
+		const safe = (obj, path) => path.split(".").reduce((a, b) => a && a[b], obj);
+
+		grid.inner().innerHTML = "";
+
+		// HTTP Requests tile
+		this._render_http_requests_tile(grid, safe(stats, "requests"), safe(stats, "store.badrequestcount") || 0);
+
+		// Build Store tile
+		{
+			const blobs    = safe(stats, "store.blobs") || {};
+			const metadata = safe(stats, "store.metadata") || {};
+			const tile = grid.tag().classify("card").classify("stats-tile");
+			tile.tag().classify("card-title").text("Build Store");
+			const columns = tile.tag().classify("tile-columns");
+
+			const left = columns.tag().classify("tile-metrics");
+			this._metric(left, Friendly.bytes(safe(stats, "store.size.disk") || 0), "disk", true);
+			this._metric(left, Friendly.sep(blobs.count || 0), "blobs");
+			this._metric(left, Friendly.sep(blobs.readcount || 0), "blob reads");
+			this._metric(left, Friendly.sep(blobs.writecount || 0), "blob writes");
+			const blobHitRatio = (blobs.readcount || 0) > 0
+				? (((blobs.hitcount || 0) / blobs.readcount) * 100).toFixed(1) + "%"
+				: "-";
+			this._metric(left, blobHitRatio, "blob hit ratio");
+
+			const right = columns.tag().classify("tile-metrics");
+			this._metric(right, Friendly.sep(metadata.count || 0), "metadata entries", true);
+			this._metric(right, Friendly.sep(metadata.readcount || 0), "meta reads");
+			this._metric(right, Friendly.sep(metadata.writecount || 0), "meta writes");
+			const metaHitRatio = (metadata.readcount || 0) > 0
+				? (((metadata.hitcount || 0) / metadata.readcount) * 100).toFixed(1) + "%"
+				: "-";
+			this._metric(right, metaHitRatio, "meta hit ratio");
+		}
+	}
+
+}