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

95 lines
3.4 KiB
TypeScript
Raw Normal View History

import React, { useEffect, useRef } from 'react';
import { ServerContext } from '@/state/server';
import { SocketEvent } from '@/components/server/events';
import useWebsocketEvent from '@/plugins/useWebsocketEvent';
import { Line } from 'react-chartjs-2';
import { useChart, useChartTickLabel } from '@/components/server/console/chart';
import { hexToRgba } from '@/lib/helpers';
import { bytesToString } from '@/lib/formatters';
import { CloudDownloadIcon, CloudUploadIcon } from '@heroicons/react/solid';
import { theme } from 'twin.macro';
import ChartBlock from '@/components/server/console/ChartBlock';
import Tooltip from '@/components/elements/tooltip/Tooltip';
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 cpu = useChartTickLabel('CPU', limits.cpu, '%', 2);
2022-10-09 22:09:24 +00:00
const memory = useChartTickLabel('Memory', limits.memory, 'MiB');
const network = useChart('Network', {
sets: 2,
options: {
scales: {
y: {
ticks: {
callback(value) {
return bytesToString(typeof value === 'string' ? parseInt(value, 10) : value);
},
},
},
},
},
callback(opts, index) {
return {
...opts,
label: !index ? 'Network In' : 'Network Out',
borderColor: !index ? theme('colors.cyan.400') : theme('colors.yellow.400'),
backgroundColor: hexToRgba(!index ? theme('colors.cyan.700') : theme('colors.yellow.700'), 0.5),
};
},
});
useEffect(() => {
if (status === 'offline') {
cpu.clear();
memory.clear();
network.clear();
}
}, [status]);
useWebsocketEvent(SocketEvent.STATS, (data: string) => {
let values: any = {};
try {
values = JSON.parse(data);
} catch (e) {
return;
}
cpu.push(values.cpu_absolute);
memory.push(Math.floor(values.memory_bytes / 1024 / 1024));
network.push([
previous.current.tx < 0 ? 0 : Math.max(0, values.network.tx_bytes - previous.current.tx),
previous.current.rx < 0 ? 0 : Math.max(0, values.network.rx_bytes - previous.current.rx),
]);
previous.current = { tx: values.network.tx_bytes, rx: values.network.rx_bytes };
});
return (
<>
<ChartBlock title={'CPU Load'}>
<Line {...cpu.props} />
</ChartBlock>
<ChartBlock title={'Memory'}>
<Line {...memory.props} />
</ChartBlock>
<ChartBlock
title={'Network'}
legend={
<>
<Tooltip arrow content={'Inbound'}>
<CloudDownloadIcon className={'mr-2 w-4 h-4 text-yellow-400'} />
</Tooltip>
<Tooltip arrow content={'Outbound'}>
<CloudUploadIcon className={'w-4 h-4 text-cyan-400'} />
</Tooltip>
</>
}
>
<Line {...network.props} />
</ChartBlock>
</>
);
};