|
| 1 | +import React, { useCallback, useEffect, useState } from 'react'; |
| 2 | +import Chart, { ChartConfiguration } from 'chart.js'; |
| 3 | +import { ServerContext } from '@/state/server'; |
| 4 | +import { bytesToMegabytes } from '@/helpers'; |
| 5 | +import merge from 'lodash-es/merge'; |
| 6 | +import TitledGreyBox from '@/components/elements/TitledGreyBox'; |
| 7 | +import { faMemory } from '@fortawesome/free-solid-svg-icons/faMemory'; |
| 8 | +import { faMicrochip } from '@fortawesome/free-solid-svg-icons/faMicrochip'; |
| 9 | + |
| 10 | +const chartDefaults: ChartConfiguration = { |
| 11 | + type: 'line', |
| 12 | + options: { |
| 13 | + legend: { |
| 14 | + display: false, |
| 15 | + }, |
| 16 | + tooltips: { |
| 17 | + enabled: false, |
| 18 | + }, |
| 19 | + animation: { |
| 20 | + duration: 0, |
| 21 | + }, |
| 22 | + hover: { |
| 23 | + animationDuration: 0, |
| 24 | + }, |
| 25 | + elements: { |
| 26 | + point: { |
| 27 | + radius: 0, |
| 28 | + }, |
| 29 | + line: { |
| 30 | + tension: 0.1, |
| 31 | + backgroundColor: 'rgba(15, 178, 184, 0.45)', |
| 32 | + borderColor: '#32D0D9', |
| 33 | + }, |
| 34 | + }, |
| 35 | + scales: { |
| 36 | + xAxes: [ { |
| 37 | + ticks: { |
| 38 | + display: false, |
| 39 | + }, |
| 40 | + gridLines: { |
| 41 | + display: false, |
| 42 | + }, |
| 43 | + } ], |
| 44 | + yAxes: [ { |
| 45 | + gridLines: { |
| 46 | + drawTicks: false, |
| 47 | + color: 'rgba(229, 232, 235, 0.15)', |
| 48 | + zeroLineColor: 'rgba(15, 178, 184, 0.45)', |
| 49 | + zeroLineWidth: 3, |
| 50 | + }, |
| 51 | + ticks: { |
| 52 | + fontSize: 10, |
| 53 | + fontFamily: '"IBM Plex Mono", monospace', |
| 54 | + fontColor: 'rgb(229, 232, 235)', |
| 55 | + min: 0, |
| 56 | + beginAtZero: true, |
| 57 | + maxTicksLimit: 5, |
| 58 | + }, |
| 59 | + } ], |
| 60 | + }, |
| 61 | + responsiveAnimationDuration: 0, |
| 62 | + }, |
| 63 | +}; |
| 64 | + |
| 65 | +const createDefaultChart = (ctx: CanvasRenderingContext2D, options?: ChartConfiguration): Chart => new Chart(ctx, { |
| 66 | + ...merge({}, chartDefaults, options), |
| 67 | + data: { |
| 68 | + labels: Array(20).fill(''), |
| 69 | + datasets: [ |
| 70 | + { |
| 71 | + fill: true, |
| 72 | + data: Array(20).fill(0), |
| 73 | + }, |
| 74 | + ], |
| 75 | + }, |
| 76 | +}); |
| 77 | + |
| 78 | +export default () => { |
| 79 | + const { limits } = ServerContext.useStoreState(state => state.server.data!); |
| 80 | + const { connected, instance } = ServerContext.useStoreState(state => state.socket); |
| 81 | + |
| 82 | + const [ memory, setMemory ] = useState<Chart>(); |
| 83 | + const [ cpu, setCpu ] = useState<Chart>(); |
| 84 | + |
| 85 | + const memoryRef = useCallback<(node: HTMLCanvasElement | null) => void>(node => { |
| 86 | + if (!node) { |
| 87 | + return; |
| 88 | + } |
| 89 | + |
| 90 | + setMemory(createDefaultChart(node.getContext('2d')!, { |
| 91 | + options: { |
| 92 | + scales: { |
| 93 | + yAxes: [ { |
| 94 | + ticks: { |
| 95 | + callback: (value) => `${value}Mb `, |
| 96 | + suggestedMax: limits.memory, |
| 97 | + }, |
| 98 | + } ], |
| 99 | + }, |
| 100 | + }, |
| 101 | + })); |
| 102 | + }, []); |
| 103 | + |
| 104 | + const cpuRef = useCallback<(node: HTMLCanvasElement | null) => void>(node => { |
| 105 | + if (!node) { |
| 106 | + return; |
| 107 | + } |
| 108 | + |
| 109 | + setCpu(createDefaultChart(node.getContext('2d')!, { |
| 110 | + options: { |
| 111 | + scales: { |
| 112 | + yAxes: [ { |
| 113 | + ticks: { |
| 114 | + callback: (value) => `${value}% `, |
| 115 | + }, |
| 116 | + } ], |
| 117 | + }, |
| 118 | + }, |
| 119 | + })); |
| 120 | + }, []); |
| 121 | + |
| 122 | + const statsListener = (data: string) => { |
| 123 | + let stats: any = {}; |
| 124 | + try { |
| 125 | + stats = JSON.parse(data); |
| 126 | + } catch (e) { |
| 127 | + return; |
| 128 | + } |
| 129 | + |
| 130 | + if (memory && memory.data.datasets) { |
| 131 | + const data = memory.data.datasets[0].data!; |
| 132 | + |
| 133 | + data.push(bytesToMegabytes(stats.memory_bytes)); |
| 134 | + data.shift(); |
| 135 | + |
| 136 | + memory.update(); |
| 137 | + } |
| 138 | + |
| 139 | + if (cpu && cpu.data.datasets) { |
| 140 | + const data = cpu.data.datasets[0].data!; |
| 141 | + |
| 142 | + data.push(stats.cpu_absolute); |
| 143 | + data.shift(); |
| 144 | + |
| 145 | + cpu.update(); |
| 146 | + } |
| 147 | + }; |
| 148 | + |
| 149 | + useEffect(() => { |
| 150 | + if (!connected || !instance) { |
| 151 | + return; |
| 152 | + } |
| 153 | + |
| 154 | + instance.addListener('stats', statsListener); |
| 155 | + |
| 156 | + return () => { |
| 157 | + instance.removeListener('stats', statsListener); |
| 158 | + }; |
| 159 | + }, [ connected, memory, cpu ]); |
| 160 | + |
| 161 | + return ( |
| 162 | + <div className={'flex mt-4'}> |
| 163 | + <TitledGreyBox title={'Memory usage'} icon={faMemory} className={'flex-1 mr-2'}> |
| 164 | + <canvas id={'memory_chart'} ref={memoryRef} aria-label={'Server Memory Usage Graph'} role={'img'}/> |
| 165 | + </TitledGreyBox> |
| 166 | + <TitledGreyBox title={'CPU usage'} icon={faMicrochip} className={'flex-1 ml-2'}> |
| 167 | + <canvas id={'cpu_chart'} ref={cpuRef} aria-label={'Server CPU Usage Graph'} role={'img'}/> |
| 168 | + </TitledGreyBox> |
| 169 | + </div> |
| 170 | + ); |
| 171 | +}; |
0 commit comments