Prepare a system stats global state for future "new version banner"

OpenStickCommunity · Dec 27, 2024 · 73a4694 · 73a4694
1 parent fcca934
commit 73a4694
Show file tree

Hide file tree

Showing 3 changed files with 202 additions and 130 deletions.
diff --git a/www/src/Pages/HomePage.jsx b/www/src/Pages/HomePage.jsx
diff --git a/www/src/Pages/HomePage.tsx b/www/src/Pages/HomePage.tsx
@@ -0,0 +1,95 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ProgressBar } from 'react-bootstrap';
+
+import useSystemStats from '../Store/useSystemStats';
+import Section from '../Components/Section';
+
+export default function HomePage() {
+	const { t } = useTranslation('');
+	const {
+		latestVersion,
+		latestDownloadUrl,
+		currentVersion,
+		boardConfigProperties,
+		memoryReport,
+		getSystemStats,
+		loading,
+	} = useSystemStats();
+
+	useEffect(() => {
+		getSystemStats();
+	}, []);
+
+	if (loading) {
+		return (
+			<div className="d-flex justify-content-center align-items-center loading">
+				<div className="spinner-border" role="status">
+					<span className="visually-hidden">{t('Common:loading-text')}</span>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div>
+			<h1>{t('HomePage:header-text')}</h1>
+			<p>{t('HomePage:sub-header-text')}</p>
+			<Section title={t('HomePage:system-stats-header-text')}>
+				<div>
+					<strong className="system-text">{t('HomePage:version-text')}</strong>
+					<div className="system-text">{`${boardConfigProperties.label} (${boardConfigProperties.fileName}.uf2)`}</div>
+					<div className="system-text">
+						{t('HomePage:current-text', { version: currentVersion })}
+					</div>
+					<div className="system-text">
+						{t('HomePage:latest-text', { version: latestVersion })}
+					</div>
+					{currentVersion !== latestVersion && (
+						<div className="mt-3 mb-3">
+							<a
+								target="_blank"
+								rel="noreferrer"
+								href={latestDownloadUrl}
+								className="btn btn-primary"
+							>
+								{t('HomePage:get-update-text')}
+							</a>
+						</div>
+					)}
+
+					<strong className="system-text">
+						{t('HomePage:memory-header-text')}
+					</strong>
+					<div className="system-text">
+						{t('HomePage:memory-flash-text')}: {memoryReport.usedFlash} /{' '}
+						{memoryReport.totalFlash} ({memoryReport.percentageFlash}%)
+					</div>
+					<div className="system-text">
+						{t('HomePage:memory-heap-text')}: {memoryReport.usedHeap} /{' '}
+						{memoryReport.totalHeap} ({memoryReport.percentageHeap}%)
+					</div>
+					<div className="system-text">
+						{t('HomePage:memory-static-allocations-text')}:{' '}
+						{memoryReport.staticAllocs}
+					</div>
+
+					<ProgressBar
+						className="my-1 system-text w-50"
+						now={memoryReport.percentageFlash}
+						label={`${t('HomePage:memory-flash-text')} ${
+							memoryReport.percentageFlash
+						}%`}
+					/>
+					<ProgressBar
+						className="my-1 system-text w-50"
+						now={memoryReport.percentageHeap}
+						label={`${t('HomePage:memory-heap-text')} ${
+							memoryReport.percentageHeap
+						}%`}
+					/>
+				</div>
+			</Section>
+		</div>
+	);
+}
diff --git a/www/src/Store/useSystemStats.ts b/www/src/Store/useSystemStats.ts
@@ -0,0 +1,107 @@
+import { create } from 'zustand';
+import { baseUrl } from '../Services/WebApi';
+
+const percentage = (x, y) => parseFloat(((x / y) * 100).toFixed(2));
+const toKB = (x) => parseFloat((x / 1024).toFixed(2));
+
+type State = {
+	latestVersion: string;
+	latestDownloadUrl: string;
+	currentVersion: string;
+	boardConfigProperties: {
+		label: string;
+		fileName: string;
+	};
+	memoryReport: {
+		totalFlash: number;
+		usedFlash: number;
+		staticAllocs: number;
+		totalHeap: number;
+		usedHeap: number;
+		percentageFlash: number;
+		percentageHeap: number;
+	};
+	loading: boolean;
+	error: boolean;
+};
+
+type Actions = {
+	getSystemStats: () => void;
+};
+
+const INITIAL_STATE: State = {
+	latestVersion: '',
+	latestDownloadUrl: '',
+	currentVersion: '',
+	boardConfigProperties: {
+		label: '',
+		fileName: '',
+	},
+	memoryReport: {
+		totalFlash: 0,
+		usedFlash: 0,
+		staticAllocs: 0,
+		totalHeap: 0,
+		usedHeap: 0,
+		percentageFlash: 0,
+		percentageHeap: 0,
+	},
+	loading: false,
+	error: false,
+};
+
+const useSystemStats = create<State & Actions>()((set) => ({
+	...INITIAL_STATE,
+	getSystemStats: async () => {
+		set({ loading: true });
+
+		try {
+			const [firmwareVersion, memoryReport, latestRelease] = await Promise.all([
+				fetch(`${baseUrl}/api/getFirmwareVersion`).then((res) => res.json()),
+				fetch(`${baseUrl}/api/getMemoryReport`).then((res) => res.json()),
+				fetch(
+					'https://api.github.com/repos/OpenStickCommunity/GP2040-CE/releases/latest',
+				).then((res) => res.json()),
+			]);
+			const latestDownloadUrl =
+				latestRelease.assets?.find(
+					({ name }) =>
+						name
+							?.substring(name.lastIndexOf('_') + 1)
+							?.replace('.uf2', '')
+							?.toLowerCase() === firmwareVersion.boardConfig.toLowerCase(),
+				)?.browser_download_url ||
+				`https://github.com/OpenStickCommunity/GP2040-CE/releases/tag/${latestRelease.data.tag_name}`;
+
+			set({
+				currentVersion: firmwareVersion.version,
+				latestVersion: latestRelease.tag_name,
+				latestDownloadUrl,
+				boardConfigProperties: {
+					label: firmwareVersion.boardConfigLabel,
+					fileName: firmwareVersion.boardConfigFileName,
+				},
+				memoryReport: {
+					totalFlash: toKB(memoryReport.totalFlash),
+					usedFlash: toKB(memoryReport.usedFlash),
+					staticAllocs: toKB(memoryReport.staticAllocs),
+					totalHeap: toKB(memoryReport.totalHeap),
+					usedHeap: toKB(memoryReport.usedHeap),
+					percentageFlash: percentage(
+						memoryReport.usedFlash,
+						memoryReport.totalFlash,
+					),
+					percentageHeap: percentage(
+						memoryReport.usedHeap,
+						memoryReport.totalHeap,
+					),
+				},
+				loading: false,
+			});
+		} catch (error) {
+			set({ error: true, loading: false });
+		}
+	},
+}));
+
+export default useSystemStats;