Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Show network usage on the server console view

Browse source
This commit is contained in:
DaneEveritt 2022-05-13 23:00:59 -04:00
parent 8791d681bc
commit 62b178ed02
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
5 changed files with 106 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.babel-plugin-macrosrc.js
View file

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

1
CHANGELOG.md
View file

@ -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.

29
resources/scripts/components/server/ServerDetailsBlock.tsx
View file

@ -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>
);
};

117
resources/scripts/components/server/StatGraphs.tsx
View file

@ -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
},
});
type ChartState = [ (node: HTMLCanvasElement | null) => void, Chart | undefined ];
/**
* Creates an element ref and a chart instance.
*/
const useChart = (options?: Chart.TickOptions): ChartState => {
const [ chart, setChart ] = useState<Chart>();
const ref = useCallback<(node: HTMLCanvasElement | null) => void>(node => {
if (!node) return;
const chart = new Chart(node.getContext('2d')!, chartDefaults(options));
setChart(chart);
}, []);
return [ ref, chart ];
};
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 [ memory, setMemory ] = useState<Chart>();
const [ cpu, setCpu ] = useState<Chart>();
const memoryRef = useCallback<(node: HTMLCanvasElement | null) => void>(node => {
if (!node) {
return;
}
setMemory(
new Chart(node.getContext('2d')!, chartDefaults({
callback: (value) => `${value}Mb `,
suggestedMax: limits.memory,
})),
);
}, []);
const cpuRef = useCallback<(node: HTMLCanvasElement | null) => void>(node => {
if (!node) {
return;
}
setCpu(
new Chart(node.getContext('2d')!, chartDefaults({
callback: (value) => `${value}% `,
suggestedMax: limits.cpu,
})),
);
}, []);
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,29 +114,17 @@ export default () => {
return;
}
if (memory && memory.data.datasets) {
const data = memory.data.datasets[0].data!;
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);
data.push(bytesToMegabytes(stats.memory_bytes));
data.shift();
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`}>
<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'}
@ -146,9 +138,7 @@ export default () => {
</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`}>
<TitledGreyBox title={'CPU usage'} icon={faMicrochip}>
{status !== 'offline' ?
<canvas id={'cpu_chart'} ref={cpuRef} aria-label={'Server CPU Usage Graph'} role={'img'}/>
:
@ -157,7 +147,24 @@ export default () => {
</p>
}
</TitledGreyBox>
</div>
<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>
);
};

2
resources/scripts/helpers.ts
View file

@ -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 {