Create NetworkSpeedsPanel

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

client/App.jsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { createTheme, CssBaseline, ThemeProvider, Typography, useMediaQuery } from '@mui/material';
 import { Box } from '@mui/system';
-import ChartsPage from './pages/Charts';
+import PanelsPage from './pages/Panels';
 import { getStats } from './api';
 
 export function App() {
@@ -30,7 +30,7 @@ export function App() {
     <React.StrictMode>
       <ThemeProvider theme={theme}>
         <CssBaseline />
-        <ChartsPage stats={stats} />
+        <PanelsPage stats={stats} />
       </ThemeProvider>
     </React.StrictMode>
   );

client/modules/panels/Chart.jsx

@@ -0,0 +1,3 @@
+export default function Chart({ children }) {
+
+}

client/modules/panels/NetworkSpeedsPanel.jsx

@@ -0,0 +1,41 @@
+import { Line } from "react-chartjs-2";
+import Panel from "./Panel";
+
+export default function NetworkSpeedsPanel({ stats }) {
+  const statsByDate = _.orderBy(stats, 'asc');
+  const metricsNames = ['download', 'upload'];
+
+  const dates = _.map(statsByDate, 'date');
+
+  const download = {
+    label: 'Download',
+    data: _.map(statsByDate, 'metrics.download'),
+    fill: false,
+    borderColor: '#4caf50',
+    tension: 0.1,
+  };
+
+  const upload = {
+    label: 'Upload',
+    data: _.map(statsByDate, 'metrics.upload'),
+    fill: false,
+    borderColor: '#f50057',
+    tension: 0.1,
+  };
+
+  const data = {
+    labels: dates,
+    datasets: [
+      download,
+      upload,
+    ],
+  };
+
+  return (
+    <Panel title="Speeds">
+      <Line
+        data={data}
+      />
+    </Panel>
+  );
+}

client/modules/panels/Panel.jsx

@@ -0,0 +1,32 @@
+import { AppBar, Card, CardContent, Divider, Toolbar, Typography } from "@mui/material";
+import { Box } from "@mui/system";
+
+export default function Panel({ title, children }) {
+  return (
+    <Card variant="outlined">
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
+            bgcolor: 'background.paper',
+            color: 'text.secondary',
+            '& svg': {
+              m: 1.5,
+            },
+            '& hr': {
+              mx: 0.5,
+            },
+            paddingX: (theme) => theme.spacing(2),
+            paddingY: (theme) => theme.spacing(1),
+          }}
+        >
+          <Typography>{title}</Typography>
+        </Box>
+        <CardContent sx={{ flex: '1 0 auto' }}>
+          {children}
+        </CardContent>
+      </Box>
+    </Card>
+  );
+}

client/pages/Panels.jsx

@@ -0,0 +1,13 @@
+import { Line } from 'react-chartjs-2';
+import _ from 'lodash';
+
+import { Container } from '@mui/material';
+import NetworkSpeedChart from '../modules/panels/NetworkSpeedsPanel';
+
+export default function PanelsPage({ stats }) {
+  return (
+    <Container>
+      <NetworkSpeedChart stats={stats} />
+    </Container>
+  );
+}

src/modules/stats/networkStats.repository.js

@@ -2,9 +2,11 @@ const _ = require('lodash');
 
 const formatOneNetworkStat = ({ id, download, upload, ping, created_at }) => ({
   id,
-  download,
-  upload,
-  ping,
+  metrics: {
+    download,
+    upload,
+    ping,
+  },
   date: created_at,
 });
 

src/modules/stats/stats.routes.js

@@ -6,16 +6,16 @@ const { monitorNetworkStats, getStats } = require('./stats.usecases');
 module.exports = async (instance) => {
   const networkStatsRepository = getNetworkStatsRepository({ knex: instance.knex });
 
-  monitorNetworkStats({
-    options: {
-      interval: config.get('monitoring.interval'),
-    },
-    onData: (data) => {
-      instance.log.debug(data, 'New network stats');
-      networkStatsRepository.insertOne({ data });
-    },
-    onWarning: instance.log.warn,
-  });
+  // monitorNetworkStats({
+  //   options: {
+  //     interval: config.get('monitoring.interval'),
+  //   },
+  //   onData: (data) => {
+  //     instance.log.debug(data, 'New network stats');
+  //     networkStatsRepository.insertOne({ data });
+  //   },
+  //   onWarning: instance.log.warn,
+  // });
 
   instance.route(getStatsRoute({ instance, networkStatsRepository }));
 };