Merge pull request #215 from gnmyt/features/statistics

📈 Neue Statistik-Seite

client/package.json

@@ -11,13 +11,15 @@
  "@fortawesome/free-solid-svg-icons": "^6.3.0",
  "@fortawesome/react-fontawesome": "^0.2.0",
  "@vitejs/plugin-react": "^3.1.0",
+ "chart.js": "^4.2.1",
  "cron-parser": "^4.7.1",
  "i18next": "^22.4.10",
  "i18next-browser-languagedetector": "^7.0.1",
  "i18next-http-backend": "^2.1.1",
- "react-i18next": "^12.1.5",
  "react": "^18.2.0",
+ "react-chartjs-2": "^5.2.0",
  "react-dom": "^18.2.0",
+ "react-i18next": "^12.1.5",
  "sass": "^1.58.3",
  "vite": "^4.1.2",
  "vite-plugin-pwa": "^0.14.4"

client/public/locales/de.json

@@ -42,6 +42,7 @@
  "resume_tests": "Tests fortsetzen",
  "healthchecks": "Healthchecks",
  "language": "Sprache ändern",
+ "view": "Ansicht wechseln",
  "info": "Infos zum Projekt"
  },
  "options": {
@@ -98,7 +99,8 @@
  "healthchecks": "HealthChecks Integration",
  "healthchecks_url": "HealthChecks Server URL",
  "healthchecks_activated": "Die Healthchecks wurden deaktiviert",
- "language": "Sprache ändern"
+ "language": "Sprache ändern",
+ "view_title": "Ansicht wechseln"
  },
  "header": {
  "title": "Netzwerkanalyse",
@@ -107,7 +109,11 @@
  "new_update": "Update verfügbar",
  "paused": "Speedtests sind aktuell pausiert. Bitte setze sie fort, wenn du einen machen möchtest.",
  "running": "Es läuft bereits ein Speedtest. Bitte warte noch einen Moment.",
- "admin_login": "Admin-Login"
+ "admin_login": "Admin-Login",
+ "beta": {
+ "title": "Beta-Version",
+ "description": "Diese Funktion befindet sich noch in der Beta-Phase. Wenn du Fehler findest, melde sie bitte <Link>hier</Link>."
+ }
  },
  "latest": {
  "ping": "Ping",
@@ -171,6 +177,17 @@
  "custom": "Benutzerdefiniert",
  "average": "Durchschnitt",
  "auto": "Automatisiert"
+ },
+ "views": {
+ "list": "Test-Übersicht",
+ "statistic": "Test-Statistik"
+ },
+ "overview": {
+ "title": "Test-Übersicht der letzten {{amount}}",
+ "1": "24 Stunden",
+ "2": "2 Tage",
+ "3": "7 Tage",
+ "4": "30 Tage"
  }
  },
  "errors": {
@@ -181,6 +198,42 @@
  "no_route": "Der Test konnte nicht durchgeführt werden, da keine Route zum Host existierte",
  "connection_refused": "Der Test konnte nicht durchgeführt werden, da die Verbindung abgelehnt wurde",
  "timed_out": "Die Internetverbindung war in der Zeit des Tests instabil",
- "config": "Die Konfigurationsdatei konnte nicht geladen werden"
+ "config": "Die Konfigurationsdatei konnte nicht geladen werden",
+ "invalid_view": "Ungültige Ansicht"
+ },
+ "statistics": {
+ "overview": {
+ "total_title": "Insgesamte Tests",
+ "total_description": "Die Anzahl der ausgeführten Tests",
+ "failed_title": "Fehlgeschlagene Tests",
+ "failed_description": "Die Anzahl der fehlgeschlagenen Tests",
+ "average_title": "Durchschnittsdauer",
+ "average_description": "Die durchschnittliche Dauer der Tests"
+ },
+ "failed": {
+ "title": "Fehlgeschlagene Tests",
+ "success": "Erfolgreich",
+ "failed": "Fehlgeschlagen",
+ "label": "Tests"
+ },
+ "speed": {
+ "title": "Geschwindigkeit"
+ },
+ "manual": {
+ "title": "Manuelle Tests",
+ "yes": "Manuell erstellt",
+ "no": "Automatisch erstellt"
+ },
+ "duration": {
+ "title": "Testdauer",
+ "label": "Anzahl"
+ },
+ "values": {
+ "min": "Mindestens",
+ "max": "Höchstens",
+ "avg": "Durchschnitt",
+ "down": "Download-Werte",
+ "up": "Upload-Werte"
+ }
  }
 }

client/public/locales/en.json

@@ -42,6 +42,7 @@
  "resume_tests": "Resume tests",
  "healthchecks": "Healthchecks",
  "language": "Change language",
+ "view": "Switch view",
  "info": "About the project"
  },
  "options": {
@@ -98,7 +99,8 @@
  "healthchecks": "HealthChecks Integration",
  "healthchecks_url": "HealthChecks Server URL",
  "healthchecks_activated": "The health checks have been disabled",
- "language": "Change language"
+ "language": "Change language",
+ "view_title": "Switch view"
  },
  "header": {
  "title": "Network Analysis",
@@ -107,7 +109,11 @@
  "new_update": "Update available",
  "paused": "Speedtests are currently paused. Please continue them if you want to do one.",
  "running": "A speedtest is already running. Please wait a moment.",
- "admin_login": "Admin Login"
+ "admin_login": "Admin Login",
+ "beta": {
+ "title": "Beta Version",
+ "description": "This feature is still in beta. If you find any bugs, please report them <Link>here</Link>."
+ }
  },
  "latest": {
  "ping": "Ping",
@@ -171,6 +177,17 @@
  "custom": "Custom",
  "average": "Average",
  "auto": "Automated"
+ },
+ "views": {
+ "list": "Test Overview",
+ "statistic": "Test statistics"
+ },
+ "overview": {
+ "title": "Test overview of the last {{amount}}",
+ "1": "24 hours",
+ "2": "2 days",
+ "3": "7 days",
+ "4": "30 days"
  }
  },
  "errors": {
@@ -181,6 +198,42 @@
  "no_route": "The test could not be performed because there was no route to the host",
  "connection_refused": "The test could not be performed because the connection was rejected",
  "timed_out": "Internet connection was unstable during the time of the test",
- "config": "The configuration file could not be loaded"
+ "config": "The configuration file could not be loaded",
+ "invalid_view": "Invalid view"
+ },
+ "statistics": {
+ "overview": {
+ "total_title": "Total tests",
+ "total_description": "The number of executed tests",
+ "failed_title": "Failed tests",
+ "failed_description": "The number of failed tests",
+ "average_title": "Average duration",
+ "average_description": "The average duration of the tests"
+ },
+ "failed": {
+ "title": "Failed tests",
+ "success": "Successful",
+ "failed": "Failed",
+ "label": "Tests"
+ },
+ "speed": {
+ "title": "Speed"
+ },
+ "manual": {
+ "title": "Manual tests",
+ "yes": "Created manually",
+ "no": "Created automatically"
+ },
+ "duration": {
+ "title": "Test duration",
+ "label": "Amount"
+ },
+ "values": {
+ "min": "Minimum",
+ "max": "Maximum",
+ "avg": "Average",
+ "down": "Download values",
+ "up": "Upload values"
+ }
  }
-}
+}

client/src/App.jsx

@@ -5,11 +5,25 @@ import {SpeedtestProvider} from "./common/contexts/Speedtests";
 import {ConfigProvider} from "./common/contexts/Config";
 import {StatusProvider} from "./common/contexts/Status";
 import {InputDialogProvider} from "@/common/contexts/InputDialog/InputDialog";
-import {useState} from "react";
+import {useContext, useState} from "react";
 import i18n from './i18n';
 import Loading from "@/pages/Loading";
 import "@/common/styles/spinner.sass";
 import Error from "@/pages/Error";
+import {ViewContext, ViewProvider} from "@/common/contexts/View";
+import Statistics from "@/pages/Statistics";
+import {t} from "i18next";
+
+const MainContent = () => {
+ const [view] = useContext(ViewContext);
+ return (
+ <main>
+ {view === 0 && <Home/>}
+ {view === 1 && <Statistics/>}
+ {view !== 0 && view !== 1 && <Error text={t("errors.invalid_view")} disableReload={true}/>}
+ </main>
+ );
+}
 
 const App = () => {
  const [translationsLoaded, setTranslationsLoaded] = useState(false);
@@ -24,14 +38,14 @@ const App = () => {
  {translationError && <Error text="Failed to load translations"/>}
  {translationsLoaded && !translationError && <SpeedtestProvider>
  <InputDialogProvider>
- <ConfigProvider>
- <StatusProvider>
- <HeaderComponent/>
- <main>
- <Home/>
- </main>
- </StatusProvider>
- </ConfigProvider>
+ <ViewProvider>
+ <ConfigProvider>
+ <StatusProvider>
+  <HeaderComponent/>
+ <MainContent/>
+ </StatusProvider>
+ </ConfigProvider>
+ </ViewProvider>
  </InputDialogProvider>
  </SpeedtestProvider>}
  </>