From efcb17ca981309e65c34dfcfe3d3aadbfa09f2b9 Mon Sep 17 00:00:00 2001
From: theMackabu <theMackabu@gmail.com>
Date: Tue, 9 Jul 2024 00:01:38 -0700
Subject: [PATCH] implement charts

---
 src/webui/src/components/react/servers.tsx | 63 ++++++++++++++++++----
 src/webui/src/components/react/status.tsx  | 59 ++++++++++++--------
 2 files changed, 88 insertions(+), 34 deletions(-)

diff --git a/src/webui/src/components/react/servers.tsx b/src/webui/src/components/react/servers.tsx
index e65981c..286cb30 100644
--- a/src/webui/src/components/react/servers.tsx
+++ b/src/webui/src/components/react/servers.tsx
@@ -5,14 +5,16 @@ import Header from '@/components/react/header';
 import { version } from '../../../package.json';
 import { useArray, classNames, isVersionTooFar, startDuration } from '@/helpers';
 
-const getStatus = (remote: string, status: string) => {
+const getStatus = (remote: string, status: string): string => {
 	const badge = {
 		updated: 'bg-emerald-700/40 text-emerald-400',
 		behind: 'bg-gray-700/40 text-gray-400',
 		critical: 'bg-red-700/40 text-red-400'
 	};
 
-	if (isVersionTooFar(version, remote.slice(1))) {
+	if (remote == 'v0.0.0') {
+		return badge['behind'];
+	} else if (isVersionTooFar(version, remote.slice(1))) {
 		return badge['behind'];
 	} else if (remote == `v${version}`) {
 		return badge['updated'];
@@ -21,6 +23,45 @@ const getStatus = (remote: string, status: string) => {
 	}
 };
 
+const skeleton = {
+	os: { name: '' },
+	version: {
+		pkg: 'v0.0.0',
+		hash: 'none',
+		build_date: 'none',
+		target: ''
+	},
+	daemon: {
+		pid: 'none',
+		running: false,
+		uptime: 0,
+		process_count: 'none'
+	}
+};
+
+const getServerIcon = (base: string, distro: string): string => {
+	const distroList = [
+		'Alpine',
+		'Arch',
+		'Amazon',
+		'Macos',
+		'Linux',
+		'Fedora',
+		'Debian',
+		'CentOS',
+		'NixOS',
+		'FreeBSD',
+		'OracleLinux',
+		'Pop',
+		'Raspbian',
+		'Redhat',
+		'Ubuntu'
+	];
+
+	const isDistroKnown = distroList.includes(distro);
+	return `${base}/distro/${isDistroKnown ? distro : 'Unknown'}.svg`;
+};
+
 const Index = (props: { base: string }) => {
 	const items = useArray([]);
 
@@ -38,8 +79,11 @@ const Index = (props: { base: string }) => {
 		try {
 			const servers = await api.get(props.base + '/daemon/servers').json();
 			await servers.forEach(async (name) => {
-				const metrics = await api.get(props.base + `/remote/${name}/metrics`).json();
-				items.push({ ...metrics, name });
+				api
+					.get(props.base + `/remote/${name}/metrics`)
+					.json()
+					.then((metrics) => items.push({ ...metrics, name }))
+					.catch(() => items.push({ ...skeleton, name }));
 			});
 		} catch {}
 	}
@@ -108,10 +152,7 @@ const Index = (props: { base: string }) => {
 								onClick={() => (window.location.href = props.base + '/status/' + server.name)}>
 								<td className="py-4 pl-4 pr-8 sm:pl-6 lg:pl-8">
 									<div className="flex items-center gap-x-4">
-										<img
-											src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Fedora_logo.svg/1024px-Fedora_logo.svg.png"
-											className="h-8 w-8 rounded-full bg-gray-800"
-										/>
+										<img src={getServerIcon(props.base, server.os.name)} className="h-8 w-8 rounded-full bg-zinc-900" />
 										<div className="truncate text-sm font-medium leading-6 text-white">{server.name == 'local' ? 'Internal' : server.name}</div>
 									</div>
 								</td>
@@ -128,7 +169,7 @@ const Index = (props: { base: string }) => {
 								</td>
 								<td className="hidden py-4 pl-0 pr-4 sm:table-cell sm:pr-8">
 									<div className="font-mono text-sm leading-6 text-gray-400">
-										{server.version.target}_{server.version.build_date}
+										{server.version.target} {server.version.build_date}
 									</div>
 								</td>
 								<td className="hidden py-4 pl-0 pr-4 sm:table-cell sm:pr-8">
@@ -139,7 +180,7 @@ const Index = (props: { base: string }) => {
 								<td className="hidden py-4 pl-0 pr-8 text-sm leading-6 text-gray-400 md:table-cell lg:pr-20">{server.daemon.process_count}</td>
 								<td className="py-4 pl-0 pr-4 text-sm leading-6 sm:pr-8 lg:pr-20">
 									<div className="flex items-center justify-end gap-x-2 sm:justify-start">
-										<span className="text-gray-400 sm:hidden">{startDuration(server.daemon.uptime, false)}</span>
+										<span className="text-gray-400 sm:hidden">{server.daemon.uptime == 0 ? 'none' : startDuration(server.daemon.uptime, false)}</span>
 										<div className={classNames(badge[server.daemon.running ? 'online' : 'offline'], 'flex-none rounded-full p-1')}>
 											<div className="h-1.5 w-1.5 rounded-full bg-current" />
 										</div>
@@ -147,7 +188,7 @@ const Index = (props: { base: string }) => {
 									</div>
 								</td>
 								<td className="hidden py-4 pl-0 pr-4 text-right text-sm leading-6 text-gray-400 sm:table-cell sm:pr-6 lg:pr-8">
-									{startDuration(server.daemon.uptime, false)}
+									{server.daemon.uptime == 0 ? 'none' : startDuration(server.daemon.uptime, false)}
 								</td>
 							</tr>
 						))}
diff --git a/src/webui/src/components/react/status.tsx b/src/webui/src/components/react/status.tsx
index 84541b6..6b8ae4f 100644
--- a/src/webui/src/components/react/status.tsx
+++ b/src/webui/src/components/react/status.tsx
@@ -23,13 +23,14 @@ const Status = (props: { name: string; base: string }) => {
 	const memoryUsage = useArray([], bufferLength);
 	const cpuPercentage = useArray([], bufferLength);
 
+	const [item, setItem] = useState<any>();
 	const [loaded, setLoaded] = useState(false);
 	const [live, setLive] = useState<SSE | null>(null);
 
 	const options = {
 		responsive: true,
 		maintainAspectRatio: false,
-		animation: { duration: 0.5 },
+		animation: { duration: 0 },
 		layout: {
 			padding: {
 				left: 0,
@@ -121,6 +122,8 @@ const Status = (props: { name: string; base: string }) => {
 		source.onmessage = (event) => {
 			const data = JSON.parse(event.data);
 
+			setItem(data);
+
 			memoryUsage.pushMax(data.raw.memory_usage.rss);
 			cpuPercentage.pushMax(data.raw.cpu_percent + 1);
 
@@ -149,47 +152,57 @@ const Status = (props: { name: string; base: string }) => {
 		};
 	}, []);
 
-	const stats = [
-		{ name: 'Status', stat: 'Online' },
-		{ name: 'Proccess', stat: '3' },
-		{ name: 'Errors', stat: '10' },
-		{ name: 'Crashes', stat: '2' }
-	];
-
 	if (!loaded) {
 		return <Loader />;
 	} else {
+		const stats = [
+			{ name: 'Uptime', stat: startDuration(item.daemon.uptime, false) },
+			{ name: 'Count', stat: item.daemon.process_count },
+			{ name: 'Version', stat: item.version.pkg },
+			{ name: 'Process Id', stat: item.daemon.pid },
+			{ name: 'Build date', stat: item.version.build_date },
+			{ name: 'Hash', stat: item.version.hash.slice(0, 18) },
+			{ name: 'Platform', stat: `${item.os.name} ${item.os.version} (${item.os.arch})` },
+			{ name: 'Daemon', stat: item.daemon.daemon_type }
+		];
+
 		return (
 			<Fragment>
-				<h3 className="ml-8 mt-6 mb-5 text-2xl font-bold leading-6 text-zinc-200">Overview</h3>
-				<dl className="grid grid-cols-1 gap-5 sm:grid-cols-4 px-5">
-					{stats.map((item: any) => (
-						<div key={item.name} className="overflow-hidden rounded-lg bg-zinc-900/25 border border-zinc-800 px-4 py-5 shadow sm:p-6">
-							<dt className="truncate text-sm font-medium text-zinc-400">{item.name}</dt>
-							<dd className="mt-1 text-3xl font-semibold tracking-tight text-zinc-100">{item.stat}</dd>
-						</div>
-					))}
-				</dl>
-				<h3 className="ml-8 mt-8 mb-5 text-2xl font-bold leading-6 text-zinc-200">Metrics</h3>
-				<dl className="grid grid-cols-1 gap-5 sm:grid-cols-2 px-5">
-					<div className="overflow-hidden rounded-lg bg-zinc-900/25 border border-zinc-800 shadow">
+				<div className="absolute top-2 right-3 z-[200]">
+					<span className="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium text-white ring-1 ring-inset ring-zinc-800">
+						<svg viewBox="0 0 6 6" aria-hidden="true" className="h-1.5 w-1.5 fill-green-400">
+							<circle r={3} cx={3} cy={3} />
+						</svg>
+						{props.name != 'local' ? props.name : 'Internal'}
+					</span>
+				</div>
+				<dl className="mt-8 grid grid-cols-1 gap-5 sm:grid-cols-2 px-5">
+					<div className="overflow-hidden rounded-lg bg-zinc-900/20 border border-zinc-800 shadow">
 						<dt className="truncate text-sm font-bold text-zinc-400 pt-4 px-4">CPU Usage</dt>
 						<dt className="truncate text-xl font-bold text-zinc-100 p-1 px-4">
 							{cpuPercentage.value.slice(-1)[0].toFixed(2)}
 							<span className="text-base text-zinc-400">%</span>
 						</dt>
-						<dd className="mt-2 text-3xl font-semibold tracking-tight text-zinc-100 h-52" style={chartContainerStyle}>
+						<dd className="mt-2 text-3xl font-semibold tracking-tight text-zinc-100 h-96" style={chartContainerStyle}>
 							<Line data={cpuChart} options={options} />
 						</dd>
 					</div>
-					<div className="overflow-hidden rounded-lg bg-zinc-900/25 border border-zinc-800 shadow">
+					<div className="overflow-hidden rounded-lg bg-zinc-900/20 border border-zinc-800 shadow">
 						<dt className="truncate text-sm font-bold text-zinc-400 pt-4 px-4">Memory Usage</dt>
 						<dt className="truncate text-xl font-bold text-zinc-100 p-1 px-4">{bytesToSize(memoryUsage.value.slice(-1)[0], 2)}</dt>
-						<dd className="mt-2 text-3xl font-semibold tracking-tight text-zinc-100 h-52" style={chartContainerStyle}>
+						<dd className="mt-2 text-3xl font-semibold tracking-tight text-zinc-100 h-96" style={chartContainerStyle}>
 							<Line data={memoryChart} options={options} />
 						</dd>
 					</div>
 				</dl>
+				<dl className="mt-5 pb-5 grid grid-cols-2 gap-5 lg:grid-cols-4 px-5 h-3/10">
+					{stats.map((item: any) => (
+						<div key={item.name} className="overflow-hidden rounded-lg bg-zinc-900/20 border border-zinc-800 px-4 py-5 shadow sm:p-6">
+							<dt className="truncate text-sm font-medium text-zinc-400">{item.name}</dt>
+							<dd className="mt-1 text-2xl font-semibold tracking-tight text-zinc-100">{item.stat}</dd>
+						</div>
+					))}
+				</dl>
 			</Fragment>
 		);
 	}
-- 
GitLab