Dashboard stats tiles no longer flicker (#943)

1 files changed, 102 insertions, 111 deletions

diff --git a/src/zenserver/frontend/html/pages/cache.js b/src/zenserver/frontend/html/pages/cache.js
index c6567f0be..58e2023f9 100644
--- a/src/zenserver/frontend/html/pages/cache.js
+++ b/src/zenserver/frontend/html/pages/cache.js
@@ -123,49 +123,46 @@ export class Page extends ZenPage
 
 	_render_stats(stats)
 	{
+		stats = this._merge_last_stats(stats);
 		const safe = (obj, path) => path.split(".").reduce((a, b) => a && a[b], obj);
 		const grid = this._stats_grid;
 
-		this._last_stats = stats;
 		grid.inner().innerHTML = "";
 
 		// Store I/O tile
 		{
-			const store = safe(stats, "cache.store");
-			if (store)
-			{
-				const tile = grid.tag().classify("card").classify("stats-tile").classify("stats-tile-detailed");
-				if (this._selected_category === "store") tile.classify("stats-tile-selected");
-				tile.on_click(() => this._select_category("store"));
-				tile.tag().classify("card-title").text("Store I/O");
-				const columns = tile.tag().classify("tile-columns");
-
-				const left = columns.tag().classify("tile-metrics");
-				const storeHits = store.hits || 0;
-				const storeMisses = store.misses || 0;
-				const storeTotal = storeHits + storeMisses;
-				const storeRatio = storeTotal > 0 ? ((storeHits / storeTotal) * 100).toFixed(1) + "%" : "-";
-				this._metric(left, storeRatio, "store hit ratio", true);
-				this._metric(left, Friendly.sep(storeHits), "hits");
-				this._metric(left, Friendly.sep(storeMisses), "misses");
-				this._metric(left, Friendly.sep(store.writes || 0), "writes");
-				this._metric(left, Friendly.sep(store.rejected_reads || 0), "rejected reads");
-				this._metric(left, Friendly.sep(store.rejected_writes || 0), "rejected writes");
-
-				const right = columns.tag().classify("tile-metrics");
-				const readRateMean = safe(store, "read.bytes.rate_mean") || 0;
-				const readRate1 = safe(store, "read.bytes.rate_1") || 0;
-				const readRate5 = safe(store, "read.bytes.rate_5") || 0;
-				const writeRateMean = safe(store, "write.bytes.rate_mean") || 0;
-				const writeRate1 = safe(store, "write.bytes.rate_1") || 0;
-				const writeRate5 = safe(store, "write.bytes.rate_5") || 0;
-				this._metric(right, Friendly.bytes(readRateMean) + "/s", "read rate (mean)", true);
-				this._metric(right, Friendly.bytes(readRate1) + "/s", "read rate (1m)");
-				this._metric(right, Friendly.bytes(readRate5) + "/s", "read rate (5m)");
-				this._metric(right, Friendly.bytes(writeRateMean) + "/s", "write rate (mean)");
-				this._metric(right, Friendly.bytes(writeRate1) + "/s", "write rate (1m)");
-				this._metric(right, Friendly.bytes(writeRate5) + "/s", "write rate (5m)");
-			}
+			const store = safe(stats, "cache.store") || {};
+			const tile = grid.tag().classify("card").classify("stats-tile").classify("stats-tile-detailed");
+			if (this._selected_category === "store") tile.classify("stats-tile-selected");
+			tile.on_click(() => this._select_category("store"));
+			tile.tag().classify("card-title").text("Store I/O");
+			const columns = tile.tag().classify("tile-columns");
+
+			const left = columns.tag().classify("tile-metrics");
+			const storeHits = store.hits || 0;
+			const storeMisses = store.misses || 0;
+			const storeTotal = storeHits + storeMisses;
+			const storeRatio = storeTotal > 0 ? ((storeHits / storeTotal) * 100).toFixed(1) + "%" : "-";
+			this._metric(left, storeRatio, "store hit ratio", true);
+			this._metric(left, Friendly.sep(storeHits), "hits");
+			this._metric(left, Friendly.sep(storeMisses), "misses");
+			this._metric(left, Friendly.sep(store.writes || 0), "writes");
+			this._metric(left, Friendly.sep(store.rejected_reads || 0), "rejected reads");
+			this._metric(left, Friendly.sep(store.rejected_writes || 0), "rejected writes");
+
+			const right = columns.tag().classify("tile-metrics");
+			const readRateMean = safe(store, "read.bytes.rate_mean") || 0;
+			const readRate1 = safe(store, "read.bytes.rate_1") || 0;
+			const readRate5 = safe(store, "read.bytes.rate_5") || 0;
+			const writeRateMean = safe(store, "write.bytes.rate_mean") || 0;
+			const writeRate1 = safe(store, "write.bytes.rate_1") || 0;
+			const writeRate5 = safe(store, "write.bytes.rate_5") || 0;
+			this._metric(right, Friendly.bytes(readRateMean) + "/s", "read rate (mean)", true);
+			this._metric(right, Friendly.bytes(readRate1) + "/s", "read rate (1m)");
+			this._metric(right, Friendly.bytes(readRate5) + "/s", "read rate (5m)");
+			this._metric(right, Friendly.bytes(writeRateMean) + "/s", "write rate (mean)");
+			this._metric(right, Friendly.bytes(writeRate1) + "/s", "write rate (1m)");
+			this._metric(right, Friendly.bytes(writeRate5) + "/s", "write rate (5m)");
 		}
 
 		// Hit/Miss tile
@@ -201,89 +198,83 @@ export class Page extends ZenPage
 
 		// HTTP Requests tile
 		{
-			const req = safe(stats, "requests");
-			if (req)
-			{
-				const tile = grid.tag().classify("card").classify("stats-tile");
-				tile.tag().classify("card-title").text("HTTP Requests");
-				const columns = tile.tag().classify("tile-columns");
+			const req = safe(stats, "requests") || {};
+			const tile = grid.tag().classify("card").classify("stats-tile");
+			tile.tag().classify("card-title").text("HTTP Requests");
+			const columns = tile.tag().classify("tile-columns");
 
-				const left = columns.tag().classify("tile-metrics");
-				const reqData = req.requests || req;
-				this._metric(left, Friendly.sep(reqData.count || 0), "total requests", true);
-				if (reqData.rate_mean > 0)
-				{
-					this._metric(left, Friendly.sep(reqData.rate_mean, 1) + "/s", "req/sec (mean)");
-				}
-				if (reqData.rate_1 > 0)
-				{
-					this._metric(left, Friendly.sep(reqData.rate_1, 1) + "/s", "req/sec (1m)");
-				}
-				if (reqData.rate_5 > 0)
-				{
-					this._metric(left, Friendly.sep(reqData.rate_5, 1) + "/s", "req/sec (5m)");
-				}
-				if (reqData.rate_15 > 0)
-				{
-					this._metric(left, Friendly.sep(reqData.rate_15, 1) + "/s", "req/sec (15m)");
-				}
-				const badRequests = safe(stats, "cache.badrequestcount") || 0;
-				this._metric(left, Friendly.sep(badRequests), "bad requests");
+			const left = columns.tag().classify("tile-metrics");
+			const reqData = req.requests || req;
+			this._metric(left, Friendly.sep(reqData.count || 0), "total requests", true);
+			if (reqData.rate_mean > 0)
+			{
+				this._metric(left, Friendly.sep(reqData.rate_mean, 1) + "/s", "req/sec (mean)");
+			}
+			if (reqData.rate_1 > 0)
+			{
+				this._metric(left, Friendly.sep(reqData.rate_1, 1) + "/s", "req/sec (1m)");
+			}
+			if (reqData.rate_5 > 0)
+			{
+				this._metric(left, Friendly.sep(reqData.rate_5, 1) + "/s", "req/sec (5m)");
+			}
+			if (reqData.rate_15 > 0)
+			{
+				this._metric(left, Friendly.sep(reqData.rate_15, 1) + "/s", "req/sec (15m)");
+			}
+			const badRequests = safe(stats, "cache.badrequestcount") || 0;
+			this._metric(left, Friendly.sep(badRequests), "bad requests");
 
-				const right = columns.tag().classify("tile-metrics");
-				this._metric(right, Friendly.duration(reqData.t_avg || 0), "avg latency", true);
-				if (reqData.t_p75)
-				{
-					this._metric(right, Friendly.duration(reqData.t_p75), "p75");
-				}
-				if (reqData.t_p95)
-				{
-					this._metric(right, Friendly.duration(reqData.t_p95), "p95");
-				}
-				if (reqData.t_p99)
-				{
-					this._metric(right, Friendly.duration(reqData.t_p99), "p99");
-				}
-				if (reqData.t_p999)
-				{
-					this._metric(right, Friendly.duration(reqData.t_p999), "p999");
-				}
-				if (reqData.t_max)
-				{
-					this._metric(right, Friendly.duration(reqData.t_max), "max");
-				}
+			const right = columns.tag().classify("tile-metrics");
+			this._metric(right, Friendly.duration(reqData.t_avg || 0), "avg latency", true);
+			if (reqData.t_p75)
+			{
+				this._metric(right, Friendly.duration(reqData.t_p75), "p75");
+			}
+			if (reqData.t_p95)
+			{
+				this._metric(right, Friendly.duration(reqData.t_p95), "p95");
+			}
+			if (reqData.t_p99)
+			{
+				this._metric(right, Friendly.duration(reqData.t_p99), "p99");
+			}
+			if (reqData.t_p999)
+			{
+				this._metric(right, Friendly.duration(reqData.t_p999), "p999");
+			}
+			if (reqData.t_max)
+			{
+				this._metric(right, Friendly.duration(reqData.t_max), "max");
 			}
 		}
 
 		// RPC tile
 		{
-			const rpc = safe(stats, "cache.rpc");
-			if (rpc)
-			{
-				const tile = grid.tag().classify("card").classify("stats-tile");
-				tile.tag().classify("card-title").text("RPC");
-				const columns = tile.tag().classify("tile-columns");
+			const rpc = safe(stats, "cache.rpc") || {};
+			const tile = grid.tag().classify("card").classify("stats-tile");
+			tile.tag().classify("card-title").text("RPC");
+			const columns = tile.tag().classify("tile-columns");
 
-				const left = columns.tag().classify("tile-metrics");
-				this._metric(left, Friendly.sep(rpc.count || 0), "rpc calls", true);
-				this._metric(left, Friendly.sep(rpc.ops || 0), "batch ops");
+			const left = columns.tag().classify("tile-metrics");
+			this._metric(left, Friendly.sep(rpc.count || 0), "rpc calls", true);
+			this._metric(left, Friendly.sep(rpc.ops || 0), "batch ops");
 
-				const right = columns.tag().classify("tile-metrics");
-				if (rpc.records)
-				{
-					this._metric(right, Friendly.sep(rpc.records.count || 0), "record calls");
-					this._metric(right, Friendly.sep(rpc.records.ops || 0), "record ops");
-				}
-				if (rpc.values)
-				{
-					this._metric(right, Friendly.sep(rpc.values.count || 0), "value calls");
-					this._metric(right, Friendly.sep(rpc.values.ops || 0), "value ops");
-				}
-				if (rpc.chunks)
-				{
-					this._metric(right, Friendly.sep(rpc.chunks.count || 0), "chunk calls");
-					this._metric(right, Friendly.sep(rpc.chunks.ops || 0), "chunk ops");
-				}
+			const right = columns.tag().classify("tile-metrics");
+			if (rpc.records)
+			{
+				this._metric(right, Friendly.sep(rpc.records.count || 0), "record calls");
+				this._metric(right, Friendly.sep(rpc.records.ops || 0), "record ops");
+			}
+			if (rpc.values)
+			{
+				this._metric(right, Friendly.sep(rpc.values.count || 0), "value calls");
+				this._metric(right, Friendly.sep(rpc.values.ops || 0), "value ops");
+			}
+			if (rpc.chunks)
+			{
+				this._metric(right, Friendly.sep(rpc.chunks.count || 0), "chunk calls");
+				this._metric(right, Friendly.sep(rpc.chunks.ops || 0), "chunk ops");
 			}
 		}
 
@@ -306,7 +297,7 @@ export class Page extends ZenPage
 			this._metric(right, safe(stats, "cid.size.large") != null ? Friendly.bytes(safe(stats, "cid.size.large")) : "-", "cid large");
 		}
 
-		// Upstream tile (only if upstream is active)
+		// Upstream tile (only shown when upstream is active)
 		{
 			const upstream = safe(stats, "upstream");
 			if (upstream)