dashboard search (#936)

- Improvement: Dashboard paginated lists now include a search input that jumps to the page containing the first match and highlights the row
- Improvement: Dashboard paginated lists show a loading indicator while fetching data
- Improvement: Hub dashboard navigates to and highlights newly provisioned instances

1 files changed, 4 insertions, 1 deletions

diff --git a/src/zenserver/frontend/html/pages/cache.js b/src/zenserver/frontend/html/pages/cache.js
index 93059b81c..c6567f0be 100644
--- a/src/zenserver/frontend/html/pages/cache.js
+++ b/src/zenserver/frontend/html/pages/cache.js
@@ -56,7 +56,8 @@ export class Page extends ZenPage
 
 		this._cache_table = section.add_widget(Table, columns, Table.Flag_FitLeft|Table.Flag_PackRight|Table.Flag_AlignNumeric);
 
-		this._cache_pager = new Pager(section, 25, () => this._render_cache_page());
+		this._cache_pager = new Pager(section, 25, () => this._render_cache_page(),
+			Pager.make_search_fn(() => this._cache_data, item => item.namespace));
 		const cache_drop_link = document.createElement("span");
 		cache_drop_link.className = "dropall zen_action";
 		cache_drop_link.style.position = "static";
@@ -64,6 +65,7 @@ export class Page extends ZenPage
 		cache_drop_link.addEventListener("click", () => this.drop_all());
 		this._cache_pager.prepend(cache_drop_link);
 
+		const loading = Pager.loading(section);
 		const zcache_info = await new Fetcher().resource("/z$/").json();
 		const namespaces = zcache_info["Namespaces"] || [];
 		const results = await Promise.allSettled(
@@ -75,6 +77,7 @@ export class Page extends ZenPage
 			.sort((a, b) => a.namespace.localeCompare(b.namespace));
 		this._cache_pager.set_total(this._cache_data.length);
 		this._render_cache_page();
+		loading.remove();
 
 		// Namespace detail area (inside namespaces section so it collapses together)
 		this._namespace_host = section;