import React, { lazy, useEffect, useState } from 'react'; import { Helmet } from 'react-helmet'; import { ServerContext } from '@/state/server'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCircle, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons'; import { bytesToHuman, megabytesToHuman } from '@/helpers'; import SuspenseSpinner from '@/components/elements/SuspenseSpinner'; import TitledGreyBox from '@/components/elements/TitledGreyBox'; import Can from '@/components/elements/Can'; import PageContentBlock from '@/components/elements/PageContentBlock'; import ContentContainer from '@/components/elements/ContentContainer'; import tw from 'twin.macro'; import Button from '@/components/elements/Button'; import StopOrKillButton from '@/components/server/StopOrKillButton'; export type PowerAction = 'start' | 'stop' | 'restart' | 'kill'; const ChunkedConsole = lazy(() => import(/* webpackChunkName: "console" */'@/components/server/Console')); const ChunkedStatGraphs = lazy(() => import(/* webpackChunkName: "graphs" */'@/components/server/StatGraphs')); export default () => { const [ memory, setMemory ] = useState(0); const [ cpu, setCpu ] = useState(0); const [ disk, setDisk ] = useState(0); const server = ServerContext.useStoreState(state => state.server.data!); const status = ServerContext.useStoreState(state => state.status.value); const { connected, instance } = ServerContext.useStoreState(state => state.socket); const statsListener = (data: string) => { let stats: any = {}; try { stats = JSON.parse(data); } catch (e) { return; } setMemory(stats.memory_bytes); setCpu(stats.cpu_absolute); setDisk(stats.disk_bytes); }; const sendPowerCommand = (command: PowerAction) => { instance && instance.send('set state', command); }; useEffect(() => { if (!connected || !instance) { return; } instance.addListener('stats', statsListener); return () => { instance.removeListener('stats', statsListener); }; }, [ instance, connected ]); const disklimit = server.limits.disk ? megabytesToHuman(server.limits.disk) : 'Unlimited'; const memorylimit = server.limits.memory ? megabytesToHuman(server.limits.memory) : 'Unlimited'; return ( {server.name} | Console

 {status}

{cpu.toFixed(2)}%

{bytesToHuman(memory)} / {memorylimit}

 {bytesToHuman(disk)} / {disklimit}

{!server.isInstalling ?
sendPowerCommand(action)}/>
:

This server is currently running its installation process and most actions are unavailable.

}
); };