Show network usage on the server console view

Author: DaneEveritt

.babel-plugin-macrosrc.js

@@ -5,7 +5,7 @@ module.exports = {
     },
     styledComponents: {
         pure: true,
-        displayName: false,
-        fileName: false,
+        displayName: true,
+        fileName: true,
     },
 };

CHANGELOG.md

@@ -31,6 +31,7 @@ using these eggs should be updated to account for the new format.
 * Adds support for naming docker image values in an Egg to improve front-end display capabilities.
 * Adds command to return the configuration for a specific node in both YAML and JSON format (`php artisan p:node:configuration`).
 * Adds command to return a list of all nodes available on the Panel in both table and JSON format (`php artisan p:node:list`).
+* Adds server network (inbound/outbound) usage graphs to the console screen.
 
 ### Removed
 * Removes Google Analytics from the front end code.

resources/scripts/components/server/ServerDetailsBlock.tsx

@@ -1,20 +1,24 @@
 import React, { useEffect, useState } from 'react';
 import tw, { TwStyle } from 'twin.macro';
-import { faCircle, faEthernet, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons';
+import {
+    faArrowCircleDown,
+    faArrowCircleUp,
+    faCircle,
+    faEthernet,
+    faHdd,
+    faMemory,
+    faMicrochip,
+    faServer,
+} from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { bytesToHuman, megabytesToHuman, formatIp } from '@/helpers';
+import { bytesToHuman, formatIp, megabytesToHuman } from '@/helpers';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import { ServerContext } from '@/state/server';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 import { SocketEvent, SocketRequest } from '@/components/server/events';
 import UptimeDuration from '@/components/server/UptimeDuration';
 
-interface Stats {
-    memory: number;
-    cpu: number;
-    disk: number;
-    uptime: number;
-}
+type Stats = Record<'memory' | 'cpu' | 'disk' | 'uptime' | 'rx' | 'tx', number>;
 
 function statusToColor (status: string | null, installing: boolean): TwStyle {
     if (installing) {
@@ -32,7 +36,7 @@ function statusToColor (status: string | null, installing: boolean): TwStyle {
 }
 
 const ServerDetailsBlock = () => {
-    const [ stats, setStats ] = useState<Stats>({ memory: 0, cpu: 0, disk: 0, uptime: 0 });
+    const [ stats, setStats ] = useState<Stats>({ memory: 0, cpu: 0, disk: 0, uptime: 0, tx: 0, rx: 0 });
 
     const status = ServerContext.useStoreState(state => state.status.value);
     const connected = ServerContext.useStoreState(state => state.socket.connected);
@@ -50,6 +54,8 @@ const ServerDetailsBlock = () => {
             memory: stats.memory_bytes,
             cpu: stats.cpu_absolute,
             disk: stats.disk_bytes,
+            tx: stats.network.tx_bytes,
+            rx: stats.network.rx_bytes,
             uptime: stats.uptime || 0,
         });
     };
@@ -115,6 +121,11 @@ const ServerDetailsBlock = () => {
                 <FontAwesomeIcon icon={faHdd} fixedWidth css={tw`mr-1`}/>&nbsp;{bytesToHuman(stats.disk)}
                 <span css={tw`text-neutral-500`}> / {diskLimit}</span>
             </p>
+            <p css={tw`text-xs mt-2`}>
+                <FontAwesomeIcon icon={faEthernet} fixedWidth css={tw`mr-1`}/>
+                <FontAwesomeIcon icon={faArrowCircleUp} fixedWidth css={tw`mr-1`}/>{bytesToHuman(stats.tx)}
+                <FontAwesomeIcon icon={faArrowCircleDown} fixedWidth css={tw`mx-1`}/>{bytesToHuman(stats.rx)}
+            </p>
         </TitledGreyBox>
     );
 };

resources/scripts/components/server/StatGraphs.tsx

@@ -1,15 +1,14 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import Chart, { ChartConfiguration } from 'chart.js';
 import { ServerContext } from '@/state/server';
-import { bytesToMegabytes } from '@/helpers';
 import merge from 'deepmerge';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
-import { faMemory, faMicrochip } from '@fortawesome/free-solid-svg-icons';
+import { faEthernet, faMemory, faMicrochip } from '@fortawesome/free-solid-svg-icons';
 import tw from 'twin.macro';
 import { SocketEvent } from '@/components/server/events';
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
 
-const chartDefaults = (ticks?: Chart.TickOptions | undefined): ChartConfiguration => ({
+const chartDefaults = (ticks?: Chart.TickOptions): ChartConfiguration => ({
     type: 'line',
     options: {
         legend: {
@@ -69,38 +68,43 @@ const chartDefaults = (ticks?: Chart.TickOptions | undefined): ChartConfiguratio
     },
 });
 
-export default () => {
-    const status = ServerContext.useStoreState(state => state.status.value);
-    const limits = ServerContext.useStoreState(state => state.server.data!.limits);
+type ChartState = [ (node: HTMLCanvasElement | null) => void, Chart | undefined ];
 
-    const [ memory, setMemory ] = useState<Chart>();
-    const [ cpu, setCpu ] = useState<Chart>();
+/**
+ * Creates an element ref and a chart instance.
+ */
+const useChart = (options?: Chart.TickOptions): ChartState => {
+    const [ chart, setChart ] = useState<Chart>();
 
-    const memoryRef = useCallback<(node: HTMLCanvasElement | null) => void>(node => {
-        if (!node) {
-            return;
-        }
+    const ref = useCallback<(node: HTMLCanvasElement | null) => void>(node => {
+        if (!node) return;
+
+        const chart = new Chart(node.getContext('2d')!, chartDefaults(options));
 
-        setMemory(
-            new Chart(node.getContext('2d')!, chartDefaults({
-                callback: (value) => `${value}Mb  `,
-                suggestedMax: limits.memory,
-            })),
-        );
+        setChart(chart);
     }, []);
 
-    const cpuRef = useCallback<(node: HTMLCanvasElement | null) => void>(node => {
-        if (!node) {
-            return;
-        }
+    return [ ref, chart ];
+};
 
-        setCpu(
-            new Chart(node.getContext('2d')!, chartDefaults({
-                callback: (value) => `${value}%  `,
-                suggestedMax: limits.cpu,
-            })),
-        );
-    }, []);
+const updateChartDataset = (chart: Chart | null | undefined, value: Chart.ChartPoint & number): void => {
+    if (!chart || !chart.data?.datasets) return;
+
+    const data = chart.data.datasets[0].data!;
+    data.push(value);
+    data.shift();
+    chart.update({ lazy: true });
+};
+
+export default () => {
+    const status = ServerContext.useStoreState(state => state.status.value);
+    const limits = ServerContext.useStoreState(state => state.server.data!.limits);
+
+    const previous = useRef<Record<'tx' | 'rx', number>>({ tx: -1, rx: -1 });
+    const [ cpuRef, cpu ] = useChart({ callback: (value) => `${value}%  `, suggestedMax: limits.cpu });
+    const [ memoryRef, memory ] = useChart({ callback: (value) => `${value}Mb  `, suggestedMax: limits.memory });
+    const [ txRef, tx ] = useChart({ callback: (value) => `${value}Kb/s  ` });
+    const [ rxRef, rx ] = useChart({ callback: (value) => `${value}Kb/s  ` });
 
     useWebsocketEvent(SocketEvent.STATS, (data: string) => {
         let stats: any = {};
@@ -110,54 +114,57 @@ export default () => {
             return;
         }
 
-        if (memory && memory.data.datasets) {
-            const data = memory.data.datasets[0].data!;
-
-            data.push(bytesToMegabytes(stats.memory_bytes));
-            data.shift();
+        updateChartDataset(cpu, stats.cpu_absolute);
+        updateChartDataset(memory, Math.floor(stats.memory_bytes / 1024 / 1024));
+        updateChartDataset(tx, previous.current.tx < 0 ? 0 : Math.max(0, stats.network.tx_bytes - previous.current.tx) / 1024);
+        updateChartDataset(rx, previous.current.rx < 0 ? 0 : Math.max(0, stats.network.rx_bytes - previous.current.rx) / 1024);
 
-            memory.update({ lazy: true });
-        }
-
-        if (cpu && cpu.data.datasets) {
-            const data = cpu.data.datasets[0].data!;
-
-            data.push(stats.cpu_absolute);
-            data.shift();
-
-            cpu.update({ lazy: true });
-        }
+        previous.current = { tx: stats.network.tx_bytes, rx: stats.network.rx_bytes };
     });
 
     return (
-        <div css={tw`flex flex-wrap mt-4`}>
-            <div css={tw`w-full sm:w-1/2`}>
-                <TitledGreyBox title={'Memory usage'} icon={faMemory} css={tw`mr-0 sm:mr-4`}>
-                    {status !== 'offline' ?
-                        <canvas
-                            id={'memory_chart'}
-                            ref={memoryRef}
-                            aria-label={'Server Memory Usage Graph'}
-                            role={'img'}
-                        />
-                        :
-                        <p css={tw`text-xs text-neutral-400 text-center p-3`}>
-                            Server is offline.
-                        </p>
-                    }
-                </TitledGreyBox>
-            </div>
-            <div css={tw`w-full sm:w-1/2 mt-4 sm:mt-0`}>
-                <TitledGreyBox title={'CPU usage'} icon={faMicrochip} css={tw`ml-0 sm:ml-4`}>
-                    {status !== 'offline' ?
-                        <canvas id={'cpu_chart'} ref={cpuRef} aria-label={'Server CPU Usage Graph'} role={'img'}/>
-                        :
-                        <p css={tw`text-xs text-neutral-400 text-center p-3`}>
-                            Server is offline.
-                        </p>
-                    }
-                </TitledGreyBox>
-            </div>
+        <div css={tw`mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4`}>
+            <TitledGreyBox title={'Memory usage'} icon={faMemory}>
+                {status !== 'offline' ?
+                    <canvas
+                        id={'memory_chart'}
+                        ref={memoryRef}
+                        aria-label={'Server Memory Usage Graph'}
+                        role={'img'}
+                    />
+                    :
+                    <p css={tw`text-xs text-neutral-400 text-center p-3`}>
+                        Server is offline.
+                    </p>
+                }
+            </TitledGreyBox>
+            <TitledGreyBox title={'CPU usage'} icon={faMicrochip}>
+                {status !== 'offline' ?
+                    <canvas id={'cpu_chart'} ref={cpuRef} aria-label={'Server CPU Usage Graph'} role={'img'}/>
+                    :
+                    <p css={tw`text-xs text-neutral-400 text-center p-3`}>
+                        Server is offline.
+                    </p>
+                }
+            </TitledGreyBox>
+            <TitledGreyBox title={'Inbound Data'} icon={faEthernet}>
+                {status !== 'offline' ?
+                    <canvas id={'rx_chart'} ref={rxRef} aria-label={'Server Inbound Data'} role={'img'}/>
+                    :
+                    <p css={tw`text-xs text-neutral-400 text-center p-3`}>
+                        Server is offline.
+                    </p>
+                }
+            </TitledGreyBox>
+            <TitledGreyBox title={'Outbound Data'} icon={faEthernet}>
+                {status !== 'offline' ?
+                    <canvas id={'tx_chart'} ref={txRef} aria-label={'Server Outbound Data'} role={'img'}/>
+                    :
+                    <p css={tw`text-xs text-neutral-400 text-center p-3`}>
+                        Server is offline.
+                    </p>
+                }
+            </TitledGreyBox>
         </div>
     );
 };

resources/scripts/helpers.ts

@@ -1,5 +1,3 @@
-export const bytesToMegabytes = (bytes: number) => Math.floor(bytes / 1024 / 1024);
-
 export const megabytesToBytes = (mb: number) => Math.floor(mb * 1024 * 1024);
 
 export function bytesToHuman (bytes: number): string {