From cf0494d29cbd0fe760eb2c6abe90f7c115e318bf Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Mon, 22 Apr 2024 22:57:18 +0200
Subject: [PATCH] Rearrange admin panel to reduce clutter

---
 svelte/src/admin_panel/Home.svelte | 110 +++++++++++++++--------------
 svelte/src/util/Formatting.svelte  |   2 +-
 2 files changed, 58 insertions(+), 54 deletions(-)

diff --git a/svelte/src/admin_panel/Home.svelte b/svelte/src/admin_panel/Home.svelte
index a3c9e12..93d49cd 100644
--- a/svelte/src/admin_panel/Home.svelte
+++ b/svelte/src/admin_panel/Home.svelte
@@ -203,6 +203,7 @@ onDestroy(() => {
 </a>
 
 <section>
+	<h3>Process stats</h3>
 	<table>
 		<tr>
 			<td>DB Time</td>
@@ -214,63 +215,56 @@ onDestroy(() => {
 		</tr>
 	</table>
 
-	<h3>Cache nodes</h3>
-</section>
-	<PeerTable peers={status.peers.reduce((acc, val) => {if (val.role === "cache") {acc.push(val)}; return acc}, [])}/>
-<section>
-	<h3>Storage nodes</h3>
-</section>
-	<PeerTable peers={status.peers.reduce((acc, val) => {if (val.role === "storage") {acc.push(val)}; return acc}, [])}/>
-<section>
-
 	<h3>Pixelstore stats</h3>
-	<table>
-		<thead>
-			<tr>
-				<td>Source</td>
-				<td>Reads</td>
-				<td>Reads %</td>
-				<td>Reads / s</td>
-				<td>Total size</td>
-				<td>Size %</td>
-				<td>Size / s</td>
-			</tr>
-		</thead>
-		<tbody>
-			<tr>
-				<td>Local cache</td>
-				<td>{status.local_reads}</td>
-				<td>{((status.local_reads / total_reads) * 100).toPrecision(3)}%</td>
-				<td>{status.local_reads_per_sec.toPrecision(4)}/s</td>
-				<td>{formatDataVolume(status.local_read_size, 4)}</td>
-				<td>{((status.local_read_size / total_read_size) * 100).toPrecision(3)}%</td>
-				<td>{formatDataVolume(status.local_read_size_per_sec, 4)}/s</td>
-			</tr>
-			<tr>
-				<td>Neighbour</td>
-				<td>{status.neighbour_reads}</td>
-				<td>{((status.neighbour_reads / total_reads) * 100).toPrecision(3)}%</td>
-				<td>{status.neighbour_reads_per_sec.toPrecision(4)}/s</td>
-				<td>{formatDataVolume(status.neighbour_read_size, 4)}</td>
-				<td>{((status.neighbour_read_size / total_read_size) * 100).toPrecision(3)}%</td>
-				<td>{formatDataVolume(status.neighbour_read_size_per_sec, 4)}/s</td>
-			</tr>
-			<tr>
-				<td>Reed-solomon</td>
-				<td>{status.remote_reads}</td>
-				<td>{((status.remote_reads / total_reads) * 100).toPrecision(3)}%</td>
-				<td>{status.remote_reads_per_sec.toPrecision(4)}/s</td>
-				<td>{formatDataVolume(status.remote_read_size, 4)}</td>
-				<td>{((status.remote_read_size / total_read_size) * 100).toPrecision(3)}%</td>
-				<td>{formatDataVolume(status.remote_read_size_per_sec, 4)}/s</td>
-			</tr>
-		</tbody>
-	</table>
+	<div class="table_scroll">
+		<table>
+			<thead>
+				<tr>
+					<td>Source</td>
+					<td>Reads</td>
+					<td>Reads %</td>
+					<td>Reads / s</td>
+					<td>Total size</td>
+					<td>Size %</td>
+					<td>Size / s</td>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>Local cache</td>
+					<td>{status.local_reads}</td>
+					<td>{((status.local_reads / total_reads) * 100).toPrecision(3)}%</td>
+					<td>{status.local_reads_per_sec.toPrecision(4)}/s</td>
+					<td>{formatDataVolume(status.local_read_size, 4)}</td>
+					<td>{((status.local_read_size / total_read_size) * 100).toPrecision(3)}%</td>
+					<td>{formatDataVolume(status.local_read_size_per_sec, 4)}/s</td>
+				</tr>
+				<tr>
+					<td>Neighbour</td>
+					<td>{status.neighbour_reads}</td>
+					<td>{((status.neighbour_reads / total_reads) * 100).toPrecision(3)}%</td>
+					<td>{status.neighbour_reads_per_sec.toPrecision(4)}/s</td>
+					<td>{formatDataVolume(status.neighbour_read_size, 4)}</td>
+					<td>{((status.neighbour_read_size / total_read_size) * 100).toPrecision(3)}%</td>
+					<td>{formatDataVolume(status.neighbour_read_size_per_sec, 4)}/s</td>
+				</tr>
+				<tr>
+					<td>Reed-solomon</td>
+					<td>{status.remote_reads}</td>
+					<td>{((status.remote_reads / total_reads) * 100).toPrecision(3)}%</td>
+					<td>{status.remote_reads_per_sec.toPrecision(4)}/s</td>
+					<td>{formatDataVolume(status.remote_read_size, 4)}</td>
+					<td>{((status.remote_read_size / total_read_size) * 100).toPrecision(3)}%</td>
+					<td>{formatDataVolume(status.remote_read_size_per_sec, 4)}/s</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
 	<p>
-		Cache threshold: {status.cache_threshold.toFixed(3)}
+		Cache threshold: {formatDataVolume(status.cache_threshold, 4)}
 	</p>
 
-	<h3>Socket statistics</h3>
+	<h3>Socket stats</h3>
 	<table>
 		<thead>
 			<tr>
@@ -295,6 +289,16 @@ onDestroy(() => {
 			</tr>
 		</tbody>
 	</table>
+
+	<h3>Cache nodes</h3>
+</section>
+	<PeerTable peers={status.peers.reduce((acc, val) => {if (val.role === "cache") {acc.push(val)}; return acc}, [])}/>
+<section>
+	<h3>Storage nodes</h3>
+</section>
+	<PeerTable peers={status.peers.reduce((acc, val) => {if (val.role === "storage") {acc.push(val)}; return acc}, [])}/>
+<section>
+
 	<h3>Query statistics</h3>
 	<div class="table_scroll" style="text-align: left;">
 		<table>
diff --git a/svelte/src/util/Formatting.svelte b/svelte/src/util/Formatting.svelte
index 19489cb..96fcdcb 100644
--- a/svelte/src/util/Formatting.svelte
+++ b/svelte/src/util/Formatting.svelte
@@ -28,7 +28,7 @@ export const formatDataVolume = (amt, precision) => {
 	} else if (amt >= 1e3-1) {
 		return (amt/1e3).toPrecision(precision) + " kB";
 	}
-	return amt + " B"
+	return amt.toPrecision(precision) + " B"
 }
 export const formatDataVolumeBits = (amt, precision) => {
 	amt = amt*8