import React, { useEffect, useRef, useState } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faServer, faEthernet, faMicrochip, faMemory, faHdd } from '@fortawesome/free-solid-svg-icons'; import { Link } from 'react-router-dom'; import { Server } from '@/api/server/getServer'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import getServerResourceUsage, { ServerStats } from '@/api/server/getServerResourceUsage'; import { bytesToHuman, megabytesToHuman } from '@/helpers'; import tw from 'twin.macro'; import GreyRowBox from '@/components/elements/GreyRowBox'; // Determines if the current value is in an alarm threshold so we can show it in red rather // than the more faded default style. const isAlarmState = (current: number, limit: number): boolean => { const limitInBytes = limit * 1024 * 1024; return current / limitInBytes >= 0.90; }; export default ({ server }: { server: Server }) => { const interval = useRef(null); const [ stats, setStats ] = useState(null); const [ statsError, setStatsError ] = useState(false); const getStats = () => { setStatsError(false); return getServerResourceUsage(server.uuid) .then(data => setStats(data)) .catch(error => { setStatsError(true); console.error(error); }); }; useEffect(() => { getStats().then(() => { // @ts-ignore interval.current = setInterval(() => getStats(), 20000); }); return () => { interval.current && clearInterval(interval.current); }; }, []); const alarms = { cpu: false, memory: false, disk: false }; if (stats) { alarms.cpu = server.limits.cpu === 0 ? false : (stats.cpuUsagePercent >= (server.limits.cpu * 0.9)); alarms.memory = isAlarmState(stats.memoryUsageInBytes, server.limits.memory); alarms.disk = server.limits.disk === 0 ? false : isAlarmState(stats.diskUsageInBytes, server.limits.disk); } const disklimit = server.limits.disk !== 0 ? megabytesToHuman(server.limits.disk) : 'Unlimited'; const memorylimit = server.limits.memory !== 0 ? megabytesToHuman(server.limits.memory) : 'Unlimited'; return (

{server.name}

{ server.allocations.filter(alloc => alloc.isDefault).map(allocation => ( {allocation.alias || allocation.ip}:{allocation.port} )) }

{!stats ? !statsError ? : server.isInstalling ?
Installing
:
{server.isSuspended ? 'Suspended' : 'Connection Error'}
:

{stats.cpuUsagePercent} %

{bytesToHuman(stats.memoryUsageInBytes)}

of {memorylimit}

{bytesToHuman(stats.diskUsageInBytes)}

of {disklimit}

}
); };