Network usage page

Levminer · Nov 1, 2023 · cafedbe · cafedbe
1 parent 514366e
commit cafedbe
Show file tree

Hide file tree

Showing 8 changed files with 228 additions and 39 deletions.
diff --git a/core/Classes/HardwareInfo.cs b/core/Classes/HardwareInfo.cs
@@ -381,11 +381,17 @@ public void GetInfo() {
 					}
 
 					// Load
-					if (sensor[j].SensorType == SensorType.Load) {
+					if (sensor[j].SensorType == SensorType.Data) {
 						// find interface by name and overwrite value
 						for (int k = 0; k < API.System.Network.Interfaces.Count; k++) {
 							if (API.System.Network.Interfaces[k].Name == computerHardware[i].Name) {
-								API.System.Network.Interfaces[k].Load = (float)Math.Round((float)sensor[j].Value);
+								if (sensor[j].Name.Contains("Download")) {
+									API.System.Network.Interfaces[k].DownloadData = (float)Math.Round((float)sensor[j].Value, 1);
+								}
+
+								if (sensor[j].Name.Contains("Upload")) {
+									API.System.Network.Interfaces[k].UploadData = (float)Math.Round((float)sensor[j].Value, 1);
+								}
 							}
 						}
 					}

diff --git a/core/Classes/Interfaces.cs b/core/Classes/Interfaces.cs
@@ -116,7 +116,11 @@ public string Speed {
 		get; set;
 	}
 
-	public float Load {
+	public float UploadData {
+		get; set;
+	} = new();
+
+	public float DownloadData {
 		get; set;
 	} = new();
 

diff --git a/core/MainWindow.xaml b/core/MainWindow.xaml
@@ -57,6 +57,11 @@
 						<ImageIcon Source="Assets/Icons/gpu.svg" />
 					</NavigationViewItem.Icon>
 				</NavigationViewItem>
+				<NavigationViewItem Content="Network" Tag="network">
+					<NavigationViewItem.Icon>
+						<FontIcon Glyph="&#xE839;" />
+					</NavigationViewItem.Icon>
+				</NavigationViewItem>
 				<NavigationViewItem Content="System" Tag="system">
 					<NavigationViewItem.Icon>
 						<ImageIcon Source="Assets/Icons/system.svg" />

diff --git a/interface/layout/app.svelte b/interface/layout/app.svelte
@@ -21,6 +21,10 @@
 				<Route path="/gpu"><GPU /></Route>
 			</Boundary>
 
+			<Boundary onError={console.error}>
+				<Route path="/network"><Network /></Route>
+			</Boundary>
+
 			<Boundary onError={console.error}>
 				<Route path="/system"><System /></Route>
 			</Boundary>
@@ -48,6 +52,7 @@
 	// @ts-ignore
 	import { Boundary } from "@crownframework/svelte-error-boundary"
 	import { setHardwareInfo } from "../stores/hardwareInfo"
+	import Network from "../pages/network.svelte"
 
 	onMount(() => {
 		// Navigate to the home page on load (webview bug)
@@ -79,7 +84,6 @@
 
 		// @ts-ignore - Receive navigation info
 		window.chrome.webview.addEventListener("message", (arg: { data: Message }) => {
-			console.log(arg.data)
 			if (arg.data.name === "navigation") {
 				if (arg.data.content === "home") {
 					router.goto("/")
@@ -158,6 +162,13 @@
 						fan: Math.round(input.gpu.fan.reduce((a, b) => a + b.value, 0)),
 						memory: parseFloat(input.gpu.memory[0].value.toFixed(1)),
 					},
+
+					network: input.system.network.interfaces.map((int) => {
+						return {
+							throughputUpload: parseFloat((int.throughputUpload / 1_048_576).toFixed(2)),
+							throughputDownload: parseFloat((int.throughputDownload / 1_048_576).toFixed(2)),
+						}
+					}),
 				}
 
 				if (date.getTime() < new Date().getTime()) {
@@ -270,6 +281,27 @@
 								).toFixed(1),
 							),
 						},
+
+						network: input.system.network.interfaces.map((item, i) => {
+							let throughputDownload = parseFloat(
+								(
+									$hardwareStatistics.seconds.map((sensor) => sensor.network[i]).reduce((a, b) => a + b.throughputDownload, 0) /
+									$hardwareStatistics.seconds.length
+								).toFixed(2),
+							)
+
+							let throughputUpload = parseFloat(
+								(
+									$hardwareStatistics.seconds.map((sensor) => sensor.network[i]).reduce((a, b) => a + b.throughputUpload, 0) /
+									$hardwareStatistics.seconds.length
+								).toFixed(2),
+							)
+
+							return {
+								throughputUpload,
+								throughputDownload,
+							}
+						}),
 					}
 
 					// Update 60s timer

diff --git a/interface/layout/types.d.ts b/interface/layout/types.d.ts
@@ -75,6 +75,10 @@ declare global {
 		gateway: string
 		dns: string
 		speed: string
+		throughputDownload: number
+		throughputUpload: number
+		downloadData: number
+		uploadData: number
 	}
 
 	interface HardwareInfo {
@@ -161,6 +165,11 @@ declare global {
 			physicalUsage: number
 			virtualUsage: number
 		}
+
+		network: {
+			throughputDownload: number
+			throughputUpload: number
+		}[]
 	}
 
 	interface HardwareStatistics {

diff --git a/interface/pages/network.svelte b/interface/pages/network.svelte
@@ -0,0 +1,166 @@
+<div class="transparent-900 m-10 mx-auto w-11/12 rounded-xl sm:m-3 sm:w-full">
+	<div class="mx-10 flex flex-col gap-5 pb-10 pt-10">
+		<div class="flex w-full flex-row items-start justify-start gap-5">
+			<!-- interface info -->
+			<div class="transparent-800 w-3/5 rounded-xl p-10 text-left">
+				<div class="flex items-baseline gap-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						><rect x="9" y="2" width="6" height="6" /><rect x="16" y="16" width="6" height="6" /><rect
+							x="2"
+							y="16"
+							width="6"
+							height="6"
+						/><path d="M5 16v-4h14v4" /><path d="M12 12V8" /></svg
+					>
+					<h2>Interfaces</h2>
+				</div>
+				{#each $hardwareInfo.system.network.interfaces as { name, description, ipAddress, mask, gateway, dns, speed, macAddress }}
+					<div class="mt-5 select-text">
+						<h3>Name: {name}</h3>
+						<h3>Description: {description}</h3>
+						<h3>Address: {ipAddress} ({mask})</h3>
+						<h3>Gateway: {gateway} ({dns})</h3>
+						<h3>Speed: {speed} Mbit/s</h3>
+					</div>
+				{/each}
+			</div>
+
+			<!-- network usage -->
+			<div class="transparent-800 w-2/5 rounded-xl p-10">
+				<div class="mb-5 flex items-baseline gap-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						class="lucide lucide-pie-chart"><path d="M21.21 15.89A10 10 0 1 1 8 2.83" /><path d="M22 12A10 10 0 0 0 12 2v10z" /></svg
+					>
+					<h2>Data usage</h2>
+				</div>
+				{#each $hardwareInfo.system.network.interfaces as { name, downloadData, uploadData }}
+					<div class="mt-5 select-text">
+						<h3>Name: {name}</h3>
+						<h3>Downloaded data: {downloadData} GB</h3>
+						<h3>Uploaded data: {uploadData} GB</h3>
+					</div>
+				{/each}
+			</div>
+		</div>
+
+		<div class="flex w-full flex-row justify-start gap-5 sm:flex-wrap">
+			<!-- network usage -->
+			{#each $hardwareInfo.system.network.interfaces as item, i}
+				<div class="transparent-800 w-1/2 rounded-xl p-10 text-left sm:w-full">
+					<div class="mb-5 flex items-baseline justify-between">
+						<div class="flex items-baseline gap-3">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="lucide lucide-download"
+								><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line
+									x1="12"
+									x2="12"
+									y1="15"
+									y2="3"
+								/></svg
+							>
+							<h2>{item.name} Download speed</h2>
+						</div>
+						<div>
+							<h5 class="cursor-pointer" on:click={() => (minutes = !minutes)}>{minutes ? "Last 60 minutes" : "Last 60 seconds"}</h5>
+						</div>
+					</div>
+					<div>
+						<LineChart
+							statistics={minutes
+								? $hardwareStatistics.minutes.map((value) => value.network[i].throughputDownload)
+								: $hardwareStatistics.seconds.map((value) => value.network[i].throughputDownload)}
+							type={"Download speed"}
+							unit={" MB/s"}
+							color={"#00bbf9"}
+							time={minutes ? "m" : "s"}
+							zero={true}
+						/>
+					</div>
+				</div>
+			{/each}
+		</div>
+
+		<div class="flex w-full flex-row justify-start gap-5 sm:flex-wrap">
+			<!-- network usage -->
+			{#each $hardwareInfo.system.network.interfaces as item, i}
+				<div class="transparent-800 w-1/2 rounded-xl p-10 text-left sm:w-full">
+					<div class="mb-5 flex items-baseline justify-between">
+						<div class="flex items-baseline gap-3">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="lucide lucide-upload"
+								><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="17 8 12 3 7 8" /><line
+									x1="12"
+									x2="12"
+									y1="3"
+									y2="15"
+								/></svg
+							>
+							<h2>{item.name} Upload speed</h2>
+						</div>
+						<div>
+							<h5 class="cursor-pointer" on:click={() => (minutes = !minutes)}>{minutes ? "Last 60 minutes" : "Last 60 seconds"}</h5>
+						</div>
+					</div>
+					<div>
+						<LineChart
+							statistics={minutes
+								? $hardwareStatistics.minutes.map((value) => value.network[i].throughputUpload)
+								: $hardwareStatistics.seconds.map((value) => value.network[i].throughputUpload)}
+							type={"Upload speed"}
+							unit={" MB/s"}
+							color={"#00bbf9"}
+							time={minutes ? "m" : "s"}
+							zero={true}
+						/>
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<script lang="ts">
+	import TemperatureChart from "../components/multiLineChart.svelte"
+	import LineChart from "../components/lineChart.svelte"
+	import UsageChart from "../components/usageChart.svelte"
+	import { hardwareStatistics } from "../stores/hardwareStatistics"
+	import { hardwareInfo } from "../stores/hardwareInfo"
+
+	let minutes = false
+</script>
diff --git a/interface/pages/system.svelte b/interface/pages/system.svelte
@@ -22,7 +22,7 @@
 
 			<div class="flex items-baseline gap-5 sm:flex-wrap">
 				<!-- Monitors -->
-				<div class="transparent-800 w-1/2 rounded-xl p-10 sm:w-full">
+				<div class="transparent-800 w-full rounded-xl p-10 sm:w-full">
 					<div class="flex items-baseline gap-3">
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -51,39 +51,6 @@
 						</div>
 					{/each}
 				</div>
-
-				<!-- Interfaces -->
-				<div class="transparent-800 w-1/2 rounded-xl p-10 sm:w-full">
-					<div class="flex items-baseline gap-3">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="24"
-							height="24"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							><rect x="9" y="2" width="6" height="6" /><rect x="16" y="16" width="6" height="6" /><rect
-								x="2"
-								y="16"
-								width="6"
-								height="6"
-							/><path d="M5 16v-4h14v4" /><path d="M12 12V8" /></svg
-						>
-						<h2>Interfaces</h2>
-					</div>
-					{#each $hardwareInfo.system.network.interfaces as { name, description, ipAddress, mask, gateway, dns, speed, macAddress }}
-						<div class="mt-5 select-text">
-							<h3>Name: {name}</h3>
-							<h3>Description: {description}</h3>
-							<h3>Address: {ipAddress} ({mask})</h3>
-							<h3>Gateway: {gateway} ({dns})</h3>
-							<h3>Speed: {speed} Mbit/s</h3>
-						</div>
-					{/each}
-				</div>
 			</div>
 		</div>
 

diff --git a/interface/stores/hardwareStatistics.ts b/interface/stores/hardwareStatistics.ts
@@ -8,7 +8,7 @@ const defaultHardwareStatistics: HardwareStatistics = {
 export const hardwareStatistics = writable<HardwareStatistics>(sessionStorage.hardwareStatistics ? JSON.parse(sessionStorage.hardwareStatistics) : defaultHardwareStatistics)
 
 hardwareStatistics.subscribe((data) => {
-	// console.log("HardwareStatistics changed: ", data)
+	console.log("HardwareStatistics changed: ", data)
 
 	sessionStorage.setItem("hardwareStatistics", JSON.stringify(data))
 })