1 files changed, 50 insertions, 19 deletions

diff --git a/src/zenserver/frontend/html/pages/page.js b/src/zenserver/frontend/html/pages/page.js
index 592b699dc..dd8032c28 100644
--- a/src/zenserver/frontend/html/pages/page.js
+++ b/src/zenserver/frontend/html/pages/page.js
@@ -70,14 +70,41 @@ export class ZenPage extends PageBase
 
 	add_branding(parent)
 	{
-		var root = parent.tag().id("branding");
+		var banner = parent.tag("zen-banner");
+		banner.attr("subtitle", "SERVER");
+		banner.attr("tagline", "Local Storage Service");
+		banner.attr("logo-src", "favicon.ico");
+		banner.attr("load", "0");
+
+		this._banner = banner;
+		this._poll_status();
+	}
 
-		const logo_container = root.tag("div").id("logo");
-		logo_container.tag("img").attr("src", "favicon.ico").id("zen_icon");
-		logo_container.tag("span").id("zen_text").text("zenserver");
-		logo_container.tag().id("go_home").on_click(() => window.location.search = "");
+	async _poll_status()
+	{
+		try
+		{
+			var cbo = await new Fetcher().resource("/status/status").cbo();
+			if (cbo)
+			{
+				var obj = cbo.as_object();
 
-		root.tag("img").attr("src", "epicgames.ico").id("epic_logo");
+				var hostname = obj.find("hostname");
+				if (hostname)
+				{
+					this._banner.attr("tagline", "Local Storage Service \u2014 " + hostname.as_value());
+				}
+
+				var cpu = obj.find("cpuUsagePercent");
+				if (cpu)
+				{
+					this._banner.attr("load", cpu.as_value().toFixed(1));
+				}
+			}
+		}
+		catch (e) { console.warn("status poll:", e); }
+
+		setTimeout(() => this._poll_status(), 2000);
 	}
 
 	add_service_nav(parent)
@@ -88,30 +115,34 @@ export class ZenPage extends PageBase
 		// which links to show based on the services that are currently registered.
 
 		const service_dashboards = [
-			{ base_uri: "/compute/",  label: "Compute", 		href: "/dashboard/compute/compute.html" },
-			{ base_uri: "/orch/",   label: "Orchestrator", 	href: "/dashboard/compute/orchestrator.html" },
-			{ base_uri: "/hub/",    label: "Hub", 			href: "/dashboard/compute/hub.html" },
+			{ base_uri: "/compute/",  label: "Compute", 		href: "/dashboard/?page=compute" },
+			{ base_uri: "/orch/",   label: "Orchestrator", 	href: "/dashboard/?page=orchestrator" },
+			{ base_uri: "/hub/",    label: "Hub", 			href: "/dashboard/?page=hub" },
 		];
 
+		nav.tag("a").text("Home").attr("href", "/dashboard/");
+
+		nav.tag("a").text("Sessions").attr("href", "/dashboard/?page=sessions");
+		nav.tag("a").text("Cache").attr("href", "/dashboard/?page=cache");
+		nav.tag("a").text("Projects").attr("href", "/dashboard/?page=projects");
+		this._info_link = nav.tag("a").text("Info").attr("href", "/dashboard/?page=info");
+
 		new Fetcher().resource("/api/").json().then((data) => {
 			const services = data.services || [];
 			const uris = new Set(services.map(s => s.base_uri));
 
 			const links = service_dashboards.filter(d => uris.has(d.base_uri));
 
-			if (links.length === 0)
-			{
-				nav.inner().style.display = "none";
-				return;
-			}
-
+			// Insert service links before the Info link
+			const info_elem = this._info_link.inner();
 			for (const link of links)
 			{
-				nav.tag("a").text(link.label).attr("href", link.href);
+				const a = document.createElement("a");
+				a.textContent = link.label;
+				a.href = link.href;
+				info_elem.parentNode.insertBefore(a, info_elem);
 			}
-		}).catch(() => {
-			nav.inner().style.display = "none";
-		});
+		}).catch(() => {});
 	}
 
 	set_title(...args)