From 959127ac2caf788a0f5421c08e29bdec167ce6a2 Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Wed, 28 Feb 2024 15:50:57 +0100
Subject: [PATCH] Add support for sorting in peer table

---
 res/static/style/layout.css              |  4 +-
 svelte/src/admin_panel/Home.svelte       |  5 +-
 svelte/src/admin_panel/PeerTable.svelte  | 82 ++++++++++++++++++++----
 svelte/src/admin_panel/SortButton.svelte | 22 +++++++
 svelte/src/filesystem/Breadcrumbs.svelte | 15 ++---
 svelte/src/user_home/Transactions.svelte |  4 +-
 6 files changed, 107 insertions(+), 25 deletions(-)
 create mode 100644 svelte/src/admin_panel/SortButton.svelte

diff --git a/res/static/style/layout.css b/res/static/style/layout.css
index 576c917..32b8e0a 100644
--- a/res/static/style/layout.css
+++ b/res/static/style/layout.css
@@ -491,7 +491,7 @@ select {
 	border-radius: 6px;
 	margin: 3px;
 	background: var(--input_background);
-	padding: 5px 5px 5px 5px;
+	padding: 4px 5px;
 	overflow: hidden;
 	color: var(--input_text);
 	cursor: pointer;
@@ -538,7 +538,7 @@ input[type="color"]:active,
 select:active {
 	box-shadow: inset 4px 4px 6px var(--shadow_color);
 	/* Exactly 4px offset compared to the inactive padding to give a depth effect */
-	padding: 9px 1px 1px 9px;
+	padding: 8px 1px 0px 9px;
 }
 
 .button_highlight {
diff --git a/svelte/src/admin_panel/Home.svelte b/svelte/src/admin_panel/Home.svelte
index 204f997..12c59d7 100644
--- a/svelte/src/admin_panel/Home.svelte
+++ b/svelte/src/admin_panel/Home.svelte
@@ -211,10 +211,13 @@ onDestroy(() => {
 	</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>
diff --git a/svelte/src/admin_panel/PeerTable.svelte b/svelte/src/admin_panel/PeerTable.svelte
index b514b9e..35ebbf4 100644
--- a/svelte/src/admin_panel/PeerTable.svelte
+++ b/svelte/src/admin_panel/PeerTable.svelte
@@ -1,7 +1,49 @@
 <script>
 import { formatDataVolume } from "../util/Formatting.svelte";
+import SortButton from "./SortButton.svelte";
 
 export let peers = [];
+$: update_peers(peers)
+let update_peers = (peers) => {
+	for (let peer of peers) {
+		peer.avg_network_total = peer.avg_network_tx + peer.avg_network_rx
+	}
+
+	sort("")
+}
+
+let sort_field = "address"
+let asc = true
+let sort = (field) => {
+	if (field !== "" && field === sort_field) {
+		asc = !asc
+	}
+	if (field === "") {
+		field = sort_field
+	}
+	sort_field = field
+
+	console.log("sorting by", field, "asc", asc)
+	peers.sort((a, b) => {
+		if (typeof (a[field]) === "number") {
+			// Sort ints from high to low
+			if (asc) {
+				return a[field] - b[field]
+			} else {
+				return b[field] - a[field]
+			}
+		} else {
+			// Sort strings alphabetically
+			if (asc) {
+				return a[field].localeCompare(b[field])
+			} else {
+				return b[field].localeCompare(a[field])
+			}
+		}
+	})
+	peers = peers
+}
+
 
 </script>
 
@@ -9,15 +51,17 @@ export let peers = [];
 	<table>
 		<thead>
 			<tr>
-				<td>Address</td>
-				<td>Err</td>
-				<td>1m</td>
-				<td>5m</td>
-				<td>15m</td>
-				<td>Ping</td>
-				<td>Netload</td>
-				<td>Free</td>
-				<td>Min free</td>
+				<td><SortButton field="address" active_field={sort_field} asc={asc} sort_func={sort}>Address</SortButton></td>
+				<td><SortButton field="unreachable_count" active_field={sort_field} asc={asc} sort_func={sort}>Err</SortButton></td>
+				<td><SortButton field="load_1_min" active_field={sort_field} asc={asc} sort_func={sort}>1m</SortButton></td>
+				<td><SortButton field="load_5_min" active_field={sort_field} asc={asc} sort_func={sort}>5m</SortButton></td>
+				<td><SortButton field="load_15_min" active_field={sort_field} asc={asc} sort_func={sort}>15m</SortButton></td>
+				<td><SortButton field="latency" active_field={sort_field} asc={asc} sort_func={sort}>Ping</SortButton></td>
+				<td><SortButton field="avg_network_tx" active_field={sort_field} asc={asc} sort_func={sort}>TX</SortButton></td>
+				<td><SortButton field="avg_network_rx" active_field={sort_field} asc={asc} sort_func={sort}>RX</SortButton></td>
+				<td><SortButton field="avg_network_total" active_field={sort_field} asc={asc} sort_func={sort}>Tot</SortButton></td>
+				<td><SortButton field="free_space" active_field={sort_field} asc={asc} sort_func={sort}>Free</SortButton></td>
+				<td><SortButton field="min_free_space" active_field={sort_field} asc={asc} sort_func={sort}>Min free</SortButton></td>
 			</tr>
 		</thead>
 		<tbody>
@@ -33,7 +77,9 @@ export let peers = [];
 					<td>{peer.load_5_min.toFixed(1)}</td>
 					<td>{peer.load_15_min.toFixed(1)}</td>
 					<td>{(peer.latency/1000).toPrecision(3)}</td>
-					<td>{formatDataVolume(peer.avg_network_load, 4)}/s</td>
+					<td>{formatDataVolume(peer.avg_network_tx, 3)}/s</td>
+					<td>{formatDataVolume(peer.avg_network_rx, 3)}/s</td>
+					<td>{formatDataVolume(peer.avg_network_tx+peer.avg_network_rx, 3)}/s</td>
 					<td>{formatDataVolume(peer.free_space, 4)}</td>
 					<td>{formatDataVolume(peer.min_free_space, 3)}</td>
 				</tr>
@@ -46,7 +92,9 @@ export let peers = [];
 				<td>{peers.reduce((acc, val) => acc += val.load_5_min, 0).toFixed(1)}</td>
 				<td>{peers.reduce((acc, val) => acc += val.load_15_min, 0).toFixed(1)}</td>
 				<td>{(peers.reduce((acc, val) => acc += val.latency, 0)/1000).toFixed(0)}</td>
-				<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.avg_network_load, 0), 4)}/s</td>
+				<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.avg_network_tx, 0), 3)}/s</td>
+				<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.avg_network_rx, 0), 3)}/s</td>
+				<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.avg_network_tx+val.avg_network_rx, 0), 3)}/s</td>
 				<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.free_space, 0), 4)}</td>
 				<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.min_free_space, 0), 3)}</td>
 			</tr>
@@ -57,10 +105,20 @@ export let peers = [];
 				<td>{(peers.reduce((acc, val) => acc += val.load_5_min, 0) / peers.length).toFixed(1)}</td>
 				<td>{(peers.reduce((acc, val) => acc += val.load_15_min, 0) / peers.length).toFixed(1)}</td>
 				<td>{(peers.reduce((acc, val) => acc += val.latency, 0) / 1000 / peers.length).toFixed(0)}</td>
-				<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.avg_network_load, 0) / peers.length, 4)}/s</td>
+				<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.avg_network_tx, 0) / peers.length, 3)}/s</td>
+				<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.avg_network_rx, 0) / peers.length, 3)}/s</td>
+				<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.avg_network_tx+val.avg_network_rx, 3) / peers.length, 4)}/s</td>
 				<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.free_space, 0) / peers.length, 4)}</td>
 				<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.min_free_space, 0) / peers.length, 3)}</td>
 			</tr>
 		</tbody>
 	</table>
 </div>
+
+<style>
+.table_scroll {
+	max-width: 1200px;
+	margin: auto;
+	text-align: initial;
+}
+</style>
diff --git a/svelte/src/admin_panel/SortButton.svelte b/svelte/src/admin_panel/SortButton.svelte
new file mode 100644
index 0000000..7666729
--- /dev/null
+++ b/svelte/src/admin_panel/SortButton.svelte
@@ -0,0 +1,22 @@
+<script>
+export let field = ""
+export let active_field = ""
+export let asc = true
+export let sort_func
+</script>
+
+<button class:button_highlight={active_field === field} on:click={() => sort_func(field)}>
+	{#if asc}
+		↓
+	{:else}
+		↑
+	{/if}
+	<slot></slot>
+</button>
+
+<style>
+button {
+	margin: 0;
+	line-height: 1.2em;
+}
+</style>
diff --git a/svelte/src/filesystem/Breadcrumbs.svelte b/svelte/src/filesystem/Breadcrumbs.svelte
index ce12635..505d307 100644
--- a/svelte/src/filesystem/Breadcrumbs.svelte
+++ b/svelte/src/filesystem/Breadcrumbs.svelte
@@ -17,7 +17,7 @@ export let fs_navigator
 			{#if shared}
 				<i class="icon small">share</i>
 			{/if}
-			<div class="node_name" class:nopad={shared} class:base={state.base_index === i}>
+			<div class="node_name" class:base={state.base_index === i}>
 				{node.name}
 			</div>
 		</a>
@@ -38,23 +38,22 @@ export let fs_navigator
 .breadcrumb {
 	min-width: 1em;
 	text-align: center;
-	line-height: 1em;
 	word-break: break-all;
-	display: flex;
+	display: inline-flex;
 	flex-direction: row;
+	line-height: 1em;
 }
 .node_name {
-	margin: 2px;
+	/* This padding makes sure that characters which extend below the
+	line-height do not get cut off */
+	padding: 4px 2px;
 	max-width: 20vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.node_name.base {
+.base {
 	/* The base name uses all available space */
 	max-width: unset;
 }
-.nopad {
-	margin-left: 0;
-}
 </style>
diff --git a/svelte/src/user_home/Transactions.svelte b/svelte/src/user_home/Transactions.svelte
index 6cb22d7..b584078 100644
--- a/svelte/src/user_home/Transactions.svelte
+++ b/svelte/src/user_home/Transactions.svelte
@@ -104,8 +104,8 @@ onMount(() => {
 
 		€ 8 / 30.4375 = € 0.2628 per day<br/>
 
-		Similarly the subscription charge of €2 per month is also charged at € 2
-		/ 30.4375 = € 0.065708 per day.
+		Similarly the subscription charge of €2 per month is also charged at € 1
+		/ 30.4375 = € 0.032854 per day.
 	</p>
 
 	<h3>{month_str}</h3>