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

178 lines
7.2 KiB
TypeScript
Raw Normal View History

import React, { lazy, useEffect, useState } from 'react';
import { ServerContext } from '@/state/server';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faServer } from '@fortawesome/free-solid-svg-icons/faServer';
import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle';
import classNames from 'classnames';
import { faMemory } from '@fortawesome/free-solid-svg-icons/faMemory';
import { faMicrochip } from '@fortawesome/free-solid-svg-icons/faMicrochip';
import { faHdd } from '@fortawesome/free-solid-svg-icons/faHdd';
import { bytesToHuman } 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';
2019-09-28 20:29:49 +00:00
type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
2019-10-12 22:29:45 +00:00
const ChunkedConsole = lazy(() => import(/* webpackChunkName: "console" */'@/components/server/Console'));
const ChunkedStatGraphs = lazy(() => import(/* webpackChunkName: "graphs" */'@/components/server/StatGraphs'));
2019-09-28 20:29:49 +00:00
const StopOrKillButton = ({ onPress }: { onPress: (action: PowerAction) => void }) => {
const [ clicked, setClicked ] = useState(false);
const status = ServerContext.useStoreState(state => state.status.value);
useEffect(() => {
setClicked(state => [ 'stopping' ].indexOf(status) < 0 ? false : state);
}, [ status ]);
return (
<button
className={'btn btn-red btn-xs'}
disabled={status === 'offline'}
onClick={e => {
e.preventDefault();
onPress(clicked ? 'kill' : 'stop');
setClicked(true);
}}
>
{clicked ? 'Kill' : 'Stop'}
</button>
);
};
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);
};
2019-09-28 20:29:49 +00:00
const sendPowerCommand = (command: PowerAction) => {
2019-09-18 06:12:38 +00:00
instance && instance.send('set state', command);
};
useEffect(() => {
if (!connected || !instance) {
return;
}
instance.addListener('stats', statsListener);
return () => {
instance.removeListener('stats', statsListener);
};
2019-12-07 19:11:40 +00:00
}, [ instance, connected ]);
return (
<PageContentBlock className={'flex'}>
2019-12-23 05:22:08 +00:00
<div className={'w-1/4'}>
<TitledGreyBox title={server.name} icon={faServer}>
<p className={'text-xs uppercase'}>
<FontAwesomeIcon
icon={faCircle}
fixedWidth={true}
className={classNames('mr-1', {
'text-red-500': status === 'offline',
'text-yellow-500': [ 'running', 'offline' ].indexOf(status) < 0,
'text-green-500': status === 'running',
})}
/>
&nbsp;{status}
</p>
<p className={'text-xs mt-2'}>
<FontAwesomeIcon
icon={faMicrochip}
fixedWidth={true}
className={'mr-1'}
/>
&nbsp;{cpu.toFixed(2)} %
</p>
<p className={'text-xs mt-2'}>
<FontAwesomeIcon
icon={faMemory}
fixedWidth={true}
className={'mr-1'}
/>
&nbsp;{bytesToHuman(memory)}
<span className={'text-neutral-500'}> / {server.limits.memory} MB</span>
</p>
<p className={'text-xs mt-2'}>
<FontAwesomeIcon
icon={faHdd}
fixedWidth={true}
className={'mr-1'}
/>
&nbsp;{bytesToHuman(disk)}
<span className={'text-neutral-500'}> / {server.limits.disk} MB</span>
</p>
</TitledGreyBox>
{!server.isInstalling ?
<Can action={[ 'control.start', 'control.stop', 'control.restart' ]} matchAny={true}>
<div className={'grey-box justify-center'}>
<Can action={'control.start'}>
<button
className={'btn btn-secondary btn-green btn-xs mr-2'}
disabled={status !== 'offline'}
onClick={e => {
e.preventDefault();
sendPowerCommand('start');
}}
>
Start
</button>
</Can>
<Can action={'control.restart'}>
<button
className={'btn btn-secondary btn-primary btn-xs mr-2'}
onClick={e => {
e.preventDefault();
sendPowerCommand('restart');
}}
>
Restart
</button>
</Can>
<Can action={'control.stop'}>
<StopOrKillButton onPress={action => sendPowerCommand(action)}/>
</Can>
</div>
</Can>
:
<div className={'mt-4 rounded bg-yellow-500 p-3'}>
<ContentContainer>
<p className={'text-sm text-yellow-900'}>
This server is currently running its installation process and most actions are
unavailable.
</p>
</ContentContainer>
</div>
}
</div>
<div className={'flex-1 ml-4'}>
<SuspenseSpinner>
<ChunkedConsole/>
2019-12-07 19:11:40 +00:00
<ChunkedStatGraphs/>
</SuspenseSpinner>
</div>
</PageContentBlock>
);
};