misc_pterodactyl-panel/resources/scripts/components/server/StatGraphs.tsx

171 lines
6 KiB
TypeScript
Raw Normal View History

import React, { useCallback, useRef, useState } from 'react';
import Chart, { ChartConfiguration } from 'chart.js';
import { ServerContext } from '@/state/server';
import merge from 'deepmerge';
import TitledGreyBox from '@/components/elements/TitledGreyBox';
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): ChartConfiguration => ({
type: 'line',
options: {
legend: {
display: false,
},
tooltips: {
enabled: false,
},
animation: {
duration: 0,
},
elements: {
point: {
radius: 0,
},
line: {
tension: 0.3,
backgroundColor: 'rgba(15, 178, 184, 0.45)',
borderColor: '#32D0D9',
},
},
scales: {
xAxes: [ {
ticks: {
display: false,
},
gridLines: {
display: false,
},
} ],
yAxes: [ {
gridLines: {
drawTicks: false,
color: 'rgba(229, 232, 235, 0.15)',
zeroLineColor: 'rgba(15, 178, 184, 0.45)',
zeroLineWidth: 3,
},
2020-07-05 05:36:28 +00:00
ticks: merge(ticks || {}, {
fontSize: 10,
fontFamily: '"IBM Plex Mono", monospace',
fontColor: 'rgb(229, 232, 235)',
min: 0,
beginAtZero: true,
maxTicksLimit: 5,
2020-07-05 05:36:28 +00:00
}),
} ],
},
},
data: {
labels: Array(20).fill(''),
datasets: [
{
fill: true,
data: Array(20).fill(0),
},
],
},
});
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 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 = {};
try {
stats = JSON.parse(data);
} catch (e) {
return;
}
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);
previous.current = { tx: stats.network.tx_bytes, rx: stats.network.rx_bytes };
});
return (
<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>
);
};