path: root/src/zenserver/frontend/html/pages/start.js

// 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, Toolbar } from "../util/widgets.js"

////////////////////////////////////////////////////////////////////////////////
export class Page extends ZenPage
{
	async main()
	{
		// Discover which services are available
		const api_data = await new Fetcher().resource("/api/").json();
		const available = new Set((api_data.services || []).map(s => s.base_uri));

		// stats tiles
		const safe_lookup = (obj, path, pretty=undefined) => {
			const ret = path.split(".").reduce((a,b) => a && a[b], obj);
			if (ret === undefined) return undefined;
			return pretty ? pretty(ret) : ret;
		};

		var section = this.add_section("Activity");
		section.tag().classify("dropall").text("metrics dashboard →").on_click(() => {
			window.location = "?page=metrics";
		});

		var providers_data = await new Fetcher().resource("stats").json();
		var provider_list = providers_data["providers"] || [];
		var all_stats = {};
		await Promise.all(provider_list.map(async (provider) => {
			all_stats[provider] = await new Fetcher().resource("stats", provider).json();
		}));

		this._http_panel = section.tag().classify("card").classify("stats-tile").classify("stats-http-panel");
		this._http_panel.inner().addEventListener("click", () => { window.location = "?page=metrics"; });
		this._http_panel.tag().classify("http-title").text("HTTP");
		const req_section = this._http_panel.tag().classify("http-section");
		req_section.tag().classify("http-section-label").text("Requests");
		this._http_req_metrics = req_section.tag().classify("tile-metrics");
		const ws_section = this._http_panel.tag().classify("http-section");
		ws_section.tag().classify("http-section-label").text("Websockets");
		this._http_ws_metrics = ws_section.tag().classify("tile-metrics");
		this._stats_grid = section.tag().classify("grid").classify("stats-tiles");
		this._safe_lookup = safe_lookup;
		this._render_stats(all_stats);

		// project list
		var project_table = null;
		if (available.has("/prj/"))
		{
			var section = this.add_section("Cooked Projects");

			section.tag().classify("dropall").text("drop-all").on_click(() => this.drop_all("projects"));

			var columns = [
				"name",
				"project_dir",
				"engine_dir",
				"actions",
			];
			project_table = section.add_widget(Table, columns);

			var projects = await new Fetcher().resource("/prj/list").json();
			projects.sort((a, b) => (b.LastAccessTime || 0) - (a.LastAccessTime || 0));
			projects = projects.slice(0, 25);
			projects.sort((a, b) => a.Id.localeCompare(b.Id));

			for (const project of projects)
			{
				var row = project_table.add_row(
					"",
					project.ProjectRootDir,
					project.EngineRootDir,
				);

				var cell = row.get_cell(0);
				cell.tag().text(project.Id).on_click((x) => this.view_project(x), project.Id);

				var cell = row.get_cell(-1);
				var action_tb = new Toolbar(cell, true);
				action_tb.left().add("view").on_click((x) => this.view_project(x), project.Id);
				action_tb.left().add("drop").on_click((x) => this.drop_project(x), project.Id);

				row.attr("zs_name", project.Id);
			}
		}

		// cache
		var cache_table = null;
		if (available.has("/z$/"))
		{
			var section = this.add_section("Cache");

			section.tag().classify("dropall").text("drop-all").on_click(() => this.drop_all("z$"));

			var columns = [
				"namespace",
				"dir",
				"buckets",
				"entries",
				"size disk",
				"size mem",
				"actions",
			];
			var zcache_info = await new Fetcher().resource("/z$/").json();
			cache_table = section.add_widget(Table, columns, Table.Flag_FitLeft|Table.Flag_PackRight);
			for (const namespace of 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.bytes(data["StorageSize"].DiskSize),
						Friendly.bytes(data["StorageSize"].MemorySize)
					);
					var cell = row.get_cell(0);
					cell.tag().text(namespace).on_click(() => this.view_zcache(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));

					row.attr("zs_name", namespace);
				});
			}
		}

		// version
		var ver_tag = this.tag().id("version");
		var version = new Fetcher().resource("health", "version");
		version.param("detailed", "true");
		version.text().then((data) => ver_tag.text(data));

		this._project_table = project_table;
		this._cache_table = cache_table;

		// WebSocket for live stats updates
		this.connect_stats_ws((all_stats) => this._render_stats(all_stats));
	}

	_render_stats(all_stats)
	{
		const grid = this._stats_grid;
		const safe_lookup = this._safe_lookup;

		// Clear and repopulate service tiles grid
		grid.inner().innerHTML = "";

		// HTTP panel — update metrics containers built once in main()
		const left = this._http_req_metrics;
		left.inner().innerHTML = "";

		let total_requests = 0;
		let total_rate = 0;
		for (const p in all_stats)
		{
			total_requests += (safe_lookup(all_stats[p], "requests.count") || 0);
			total_rate += (safe_lookup(all_stats[p], "requests.rate_1") || 0);
		}

		this._add_tile_metric(left, Friendly.sep(total_requests), "total requests", true);
		if (total_rate > 0)
		{
			this._add_tile_metric(left, Friendly.sep(total_rate, 1) + "/s", "req/sec (1m)");
		}

		const right = this._http_ws_metrics;
		right.inner().innerHTML = "";

		const ws = all_stats["http"] ? (all_stats["http"]["websockets"] || {}) : {};
		this._add_tile_metric(right, Friendly.sep(ws.active_connections || 0), "ws connections", true);
		const ws_frames = (ws.frames_received || 0) + (ws.frames_sent || 0);
		if (ws_frames > 0)
		{
			this._add_tile_metric(right, Friendly.sep(ws_frames), "ws frames");
		}
		const ws_bytes = (ws.bytes_received || 0) + (ws.bytes_sent || 0);
		if (ws_bytes > 0)
		{
			this._add_tile_metric(right, Friendly.bytes(ws_bytes), "ws traffic");
		}


		// Cache tile (z$)
		if (all_stats["z$"])
		{
			const s = all_stats["z$"];
			const tile = grid.tag().classify("card").classify("stats-tile");
			tile.tag().classify("card-title").text("Cache");
			const body = tile.tag().classify("tile-metrics");

			const hits = safe_lookup(s, "cache.hits") || 0;
			const misses = safe_lookup(s, "cache.misses") || 0;
			const ratio = (hits + misses) > 0 ? ((hits / (hits + misses)) * 100).toFixed(1) + "%" : "-";

			this._add_tile_metric(body, ratio, "hit ratio", true);
			this._add_tile_metric(body, safe_lookup(s, "cache.size.disk", Friendly.bytes) || "-", "disk");
			this._add_tile_metric(body, safe_lookup(s, "cache.size.memory", Friendly.bytes) || "-", "memory");

			tile.inner().addEventListener("click", () => { window.location = "?page=stat&provider=z$"; });
		}

		// Project Store tile (prj)
		if (all_stats["prj"])
		{
			const s = all_stats["prj"];
			const tile = grid.tag().classify("card").classify("stats-tile");
			tile.tag().classify("card-title").text("Project Store");
			const body = tile.tag().classify("tile-metrics");

			this._add_tile_metric(body, safe_lookup(s, "requests.count", Friendly.sep) || "-", "requests", true);
			this._add_tile_metric(body, safe_lookup(s, "project_count", Friendly.sep) || "-", "projects");

			tile.inner().addEventListener("click", () => { window.location = "?page=stat&provider=prj"; });
		}

		// Build Store tile (builds)
		if (all_stats["builds"])
		{
			const s = all_stats["builds"];
			const tile = grid.tag().classify("card").classify("stats-tile");
			tile.tag().classify("card-title").text("Build Store");
			const body = tile.tag().classify("tile-metrics");

			this._add_tile_metric(body, safe_lookup(s, "requests.count", Friendly.sep) || "-", "requests", true);
			this._add_tile_metric(body, safe_lookup(s, "store.size.disk", Friendly.bytes) || "-", "disk");

			tile.inner().addEventListener("click", () => { window.location = "?page=builds"; });
		}

		// Proxy tile
		if (all_stats["proxy"])
		{
			const s = all_stats["proxy"];
			const tile = grid.tag().classify("card").classify("stats-tile");
			tile.tag().classify("card-title").text("Proxy");
			const body = tile.tag().classify("tile-metrics");

			const mappings = s.mappings || [];
			let totalActive = 0;
			let totalBytes = 0;
			for (const m of mappings)
			{
				totalActive += (m.activeConnections || 0);
				totalBytes += (m.bytesFromClient || 0) + (m.bytesToClient || 0);
			}

			this._add_tile_metric(body, Friendly.sep(totalActive), "active connections", true);
			this._add_tile_metric(body, Friendly.sep(mappings.length), "mappings");
			this._add_tile_metric(body, Friendly.bytes(totalBytes), "traffic");

			tile.inner().addEventListener("click", () => { window.location = "?page=proxy"; });
		}

		// Hub tile
		if (all_stats["hub"])
		{
			const s = all_stats["hub"];
			const tile = grid.tag().classify("card").classify("stats-tile");
			tile.tag().classify("card-title").text("Hub");
			const body = tile.tag().classify("tile-metrics");

			const current = safe_lookup(s, "currentInstanceCount") || 0;
			const limit = safe_lookup(s, "instanceLimit") || safe_lookup(s, "maxInstanceCount") || 0;
			this._add_tile_metric(body, `${current} / ${limit}`, "instances", true);
			this._add_tile_metric(body, safe_lookup(s, "requests.count", Friendly.sep) || "-", "requests");

			tile.inner().addEventListener("click", () => { window.location = "?page=stat&provider=hub"; });
		}

		// Object Store tile (obj)
		if (all_stats["obj"])
		{
			const s = all_stats["obj"];
			const tile = grid.tag().classify("card").classify("stats-tile");
			tile.tag().classify("card-title").text("Object Store");
			const body = tile.tag().classify("tile-metrics");

			this._add_tile_metric(body, safe_lookup(s, "requests.count", Friendly.sep) || "-", "requests", true);
			this._add_tile_metric(body, safe_lookup(s, "total_bytes_served", Friendly.bytes) || "-", "bytes served");

			tile.inner().addEventListener("click", () => { window.location = "?page=stat&provider=obj"; });
		}

		// Workspace tile (ws)
		if (all_stats["ws"])
		{
			const s = all_stats["ws"];
			const tile = grid.tag().classify("card").classify("stats-tile");
			tile.tag().classify("card-title").text("Workspace");
			const body = tile.tag().classify("tile-metrics");

			this._add_tile_metric(body, safe_lookup(s, "requests.count", Friendly.sep) || "-", "requests", true);
			this._add_tile_metric(body, safe_lookup(s, "workspaces", Friendly.sep) || "-", "workspaces");

			tile.inner().addEventListener("click", () => { window.location = "?page=stat&provider=ws"; });
		}
	}

	_add_tile_metric(parent, value, label, hero=false)
	{
		const m = parent.tag().classify("tile-metric");
		if (hero)
		{
			m.classify("tile-metric-hero");
		}
		m.tag().classify("metric-value").text(value);
		m.tag().classify("metric-label").text(label);
	}

	view_stat(provider)
	{
		window.location = "?page=stat&provider=" + provider;
	}

	view_project(project_id)
	{
		window.location = "?page=project&project=" + project_id;
	}

	drop_project(project_id)
	{
		const drop = async () => {
			await new Fetcher().resource("prj", project_id).delete();
			this.reload();
		};

		new Modal()
			.title("Confirmation")
			.message(`Drop project '${project_id}'?`)
			.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");
	}

	async drop_all_projects()
	{
		for (const row of this._project_table)
		{
			const project_id = row.attr("zs_name");
			await new Fetcher().resource("prj", project_id).delete();
		}
		this.reload();
	}

	async drop_all_zcache()
	{
		for (const row of this._cache_table)
		{
			const namespace = row.attr("zs_name");
			await new Fetcher().resource("z$", namespace).delete();
		}
		this.reload();
	}

	drop_all(what)
	{
		const drop = async () => {
			if (what == "projects") return this.drop_all_projects();
			if (what == "z$")		return this.drop_all_zcache();
		};

		new Modal()
			.title("Confirmation")
			.message(`Drop every item from '${what}'?`)
			.option("Yes", () => drop())
			.option("No");
	}
}