sort items on dashboard (#924)

* add pagination and consistent sorting on cache and projects ui pages

2 files changed, 113 insertions, 79 deletions

diff --git a/src/zenserver/frontend/html/pages/cache.js b/src/zenserver/frontend/html/pages/cache.js
index e0f6f73b6..93059b81c 100644
--- a/src/zenserver/frontend/html/pages/cache.js
+++ b/src/zenserver/frontend/html/pages/cache.js
@@ -6,7 +6,7 @@ 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"
+import { Table, Toolbar, Pager } from "../util/widgets.js"
 
 ////////////////////////////////////////////////////////////////////////////////
 export class Page extends ZenPage
@@ -44,8 +44,6 @@ export class Page extends ZenPage
 		// Cache Namespaces
 		var section = this._collapsible_section("Cache Namespaces");
 
-		section.tag().classify("dropall").text("drop-all").on_click(() => this.drop_all());
-
 		var columns = [
 			"namespace",
 			"dir",
@@ -56,31 +54,27 @@ export class Page extends ZenPage
 			"actions",
 		];
 
-		var zcache_info = await new Fetcher().resource("/z$/").json();
 		this._cache_table = section.add_widget(Table, columns, Table.Flag_FitLeft|Table.Flag_PackRight|Table.Flag_AlignNumeric);
 
-		for (const namespace of zcache_info["Namespaces"] || [])
-		{
-			new Fetcher().resource(`/z$/${namespace}/`).json().then((data) => {
-				const row = this._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_namespace(namespace));
-
-				cell = row.get_cell(-1);
-				const action_tb = new Toolbar(cell, true);
-				action_tb.left().add("view").on_click(() => this.view_namespace(namespace));
-				action_tb.left().add("drop").on_click(() => this.drop_namespace(namespace));
-
-				row.attr("zs_name", namespace);
-			});
-		}
+		this._cache_pager = new Pager(section, 25, () => this._render_cache_page());
+		const cache_drop_link = document.createElement("span");
+		cache_drop_link.className = "dropall zen_action";
+		cache_drop_link.style.position = "static";
+		cache_drop_link.textContent = "drop-all";
+		cache_drop_link.addEventListener("click", () => this.drop_all());
+		this._cache_pager.prepend(cache_drop_link);
+
+		const zcache_info = await new Fetcher().resource("/z$/").json();
+		const namespaces = zcache_info["Namespaces"] || [];
+		const results = await Promise.allSettled(
+			namespaces.map(ns => new Fetcher().resource(`/z$/${ns}/`).json().then(data => ({ namespace: ns, data })))
+		);
+		this._cache_data = results
+			.filter(r => r.status === "fulfilled")
+			.map(r => r.value)
+			.sort((a, b) => a.namespace.localeCompare(b.namespace));
+		this._cache_pager.set_total(this._cache_data.length);
+		this._render_cache_page();
 
 		// Namespace detail area (inside namespaces section so it collapses together)
 		this._namespace_host = section;
@@ -95,6 +89,35 @@ export class Page extends ZenPage
 		}
 	}
 
+	_render_cache_page()
+	{
+		const { start, end } = this._cache_pager.page_range();
+		this._cache_table.clear(start);
+		for (let i = start; i < end; i++)
+		{
+			const item = this._cache_data[i];
+			const data = item.data;
+			const row = this._cache_table.add_row(
+				"",
+				data["Configuration"]["RootDir"],
+				data["Buckets"].length,
+				data["EntryCount"],
+				Friendly.bytes(data["StorageSize"].DiskSize),
+				Friendly.bytes(data["StorageSize"].MemorySize)
+			);
+
+			const cell = row.get_cell(0);
+			cell.tag().text(item.namespace).on_click(() => this.view_namespace(item.namespace));
+
+			const action_cell = row.get_cell(-1);
+			const action_tb = new Toolbar(action_cell, true);
+			action_tb.left().add("view").on_click(() => this.view_namespace(item.namespace));
+			action_tb.left().add("drop").on_click(() => this.drop_namespace(item.namespace));
+
+			row.attr("zs_name", item.namespace);
+		}
+	}
+
 	_render_stats(stats)
 	{
 		const safe = (obj, path) => path.split(".").reduce((a, b) => a && a[b], obj);
@@ -611,10 +634,9 @@ export class Page extends ZenPage
 	async drop_all()
 	{
 		const drop = async () => {
-			for (const row of this._cache_table)
+			for (const item of this._cache_data || [])
 			{
-				const namespace = row.attr("zs_name");
-				await new Fetcher().resource("z$", namespace).delete();
+				await new Fetcher().resource("z$", item.namespace).delete();
 			}
 			this.reload();
 		};
diff --git a/src/zenserver/frontend/html/pages/projects.js b/src/zenserver/frontend/html/pages/projects.js
index dfe4faeb8..52d5dbb88 100644
--- a/src/zenserver/frontend/html/pages/projects.js
+++ b/src/zenserver/frontend/html/pages/projects.js
@@ -6,7 +6,7 @@ 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"
+import { Table, Toolbar, Pager } from "../util/widgets.js"
 
 ////////////////////////////////////////////////////////////////////////////////
 export class Page extends ZenPage
@@ -39,8 +39,6 @@ export class Page extends ZenPage
 		// Projects list
 		var section = this._collapsible_section("Projects");
 
-		section.tag().classify("dropall").text("drop-all").on_click(() => this.drop_all());
-
 		var columns = [
 			"name",
 			"project dir",
@@ -51,51 +49,18 @@ export class Page extends ZenPage
 
 		this._project_table = section.add_widget(Table, columns, Table.Flag_FitLeft|Table.Flag_PackRight|Table.Flag_Sortable|Table.Flag_AlignNumeric);
 
-		var projects = await new Fetcher().resource("/prj/list").json();
-		projects.sort((a, b) => (b.LastAccessTime || 0) - (a.LastAccessTime || 0));
+		this._project_pager = new Pager(section, 25, () => this._render_projects_page());
+		const drop_link = document.createElement("span");
+		drop_link.className = "dropall zen_action";
+		drop_link.style.position = "static";
+		drop_link.textContent = "drop-all";
+		drop_link.addEventListener("click", () => this.drop_all());
+		this._project_pager.prepend(drop_link);
 
-		for (const project of projects)
-		{
-			var row = this._project_table.add_row(
-				"",
-				"",
-				"",
-				"",
-			);
-
-			var cell = row.get_cell(0);
-			cell.tag().text(project.Id).on_click(() => this.view_project(project.Id));
-
-			if (project.ProjectRootDir)
-			{
-				row.get_cell(1).tag("a").text(project.ProjectRootDir)
-					.attr("href", "vscode://" + project.ProjectRootDir.replace(/\\/g, "/"));
-			}
-			if (project.EngineRootDir)
-			{
-				row.get_cell(2).tag("a").text(project.EngineRootDir)
-					.attr("href", "vscode://" + project.EngineRootDir.replace(/\\/g, "/"));
-			}
-
-			cell = row.get_cell(-1);
-			const action_tb = new Toolbar(cell, true).left();
-			action_tb.add("view").on_click(() => this.view_project(project.Id));
-			action_tb.add("drop").on_click(() => this.drop_project(project.Id));
-
-			row.attr("zs_name", project.Id);
-
-			// Fetch project details to get oplog count
-			new Fetcher().resource("prj", project.Id).json().then((info) => {
-				const oplogs = info["oplogs"] || [];
-				row.get_cell(3).text(Friendly.sep(oplogs.length)).style("textAlign", "right");
-				// Right-align the corresponding header cell
-				const header = this._project_table._element.firstElementChild;
-				if (header && header.children[4])
-				{
-					header.children[4].style.textAlign = "right";
-				}
-			}).catch(() => {});
-		}
+		this._projects_data = await new Fetcher().resource("/prj/list").json();
+		this._projects_data.sort((a, b) => a.Id.localeCompare(b.Id));
+		this._project_pager.set_total(this._projects_data.length);
+		this._render_projects_page();
 
 		// Project detail area (inside projects section so it collapses together)
 		this._project_host = section;
@@ -198,6 +163,54 @@ export class Page extends ZenPage
 		}
 	}
 
+	_render_projects_page()
+	{
+		const { start, end } = this._project_pager.page_range();
+		this._project_table.clear(start);
+		for (let i = start; i < end; i++)
+		{
+			const project = this._projects_data[i];
+			const row = this._project_table.add_row(
+				"",
+				"",
+				"",
+				"",
+			);
+
+			const cell = row.get_cell(0);
+			cell.tag().text(project.Id).on_click(() => this.view_project(project.Id));
+
+			if (project.ProjectRootDir)
+			{
+				row.get_cell(1).tag("a").text(project.ProjectRootDir)
+					.attr("href", "vscode://" + project.ProjectRootDir.replace(/\\/g, "/"));
+			}
+			if (project.EngineRootDir)
+			{
+				row.get_cell(2).tag("a").text(project.EngineRootDir)
+					.attr("href", "vscode://" + project.EngineRootDir.replace(/\\/g, "/"));
+			}
+
+			const action_cell = row.get_cell(-1);
+			const action_tb = new Toolbar(action_cell, true).left();
+			action_tb.add("view").on_click(() => this.view_project(project.Id));
+			action_tb.add("drop").on_click(() => this.drop_project(project.Id));
+
+			row.attr("zs_name", project.Id);
+
+			new Fetcher().resource("prj", project.Id).json().then((info) => {
+				const oplogs = info["oplogs"] || [];
+				row.get_cell(3).text(Friendly.sep(oplogs.length)).style("textAlign", "right");
+			}).catch(() => {});
+		}
+
+		const header = this._project_table._element.firstElementChild;
+		if (header && header.children[4])
+		{
+			header.children[4].style.textAlign = "right";
+		}
+	}
+
 	async view_project(project_id)
 	{
 		// Toggle off if already selected
@@ -318,10 +331,9 @@ export class Page extends ZenPage
 	async drop_all()
 	{
 		const drop = async () => {
-			for (const row of this._project_table)
+			for (const project of this._projects_data || [])
 			{
-				const project_id = row.attr("zs_name");
-				await new Fetcher().resource("prj", project_id).delete();
+				await new Fetcher().resource("prj", project.Id).delete();
 			}
 			this.reload();
 		};