StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Get server console page rendering (mostly) correctly

Browse source
This commit is contained in:
Dane Everitt 2020-07-04 15:40:41 -07:00
parent 43ff67238c
commit 1e163aa792
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
18 changed files with 140 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

100
resources/scripts/components/server/ServerConsole.tsx
View file

@ -13,35 +13,15 @@ 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';
type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
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'));
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);
@ -81,17 +61,17 @@ export default () => {
};
}, [ instance, connected ]);
const disklimit = server.limits.disk != 0 ? bytesToHuman(server.limits.disk * 1000 * 1000) : "Unlimited";
const memorylimit = server.limits.memory != 0 ? bytesToHuman(server.limits.memory * 1000 * 1000) : "Unlimited";
const disklimit = server.limits.disk ? bytesToHuman(server.limits.disk * 1000 * 1000) : 'Unlimited';
const memorylimit = server.limits.memory ? bytesToHuman(server.limits.memory * 1000 * 1000) : 'Unlimited';
return (
<PageContentBlock className={'flex'}>
<div className={'w-1/4'}>
<PageContentBlock css={tw`flex`}>
<div css={tw`w-1/4`}>
<TitledGreyBox title={server.name} icon={faServer}>
<p className={'text-xs uppercase'}>
<p css={tw`text-xs uppercase`}>
<FontAwesomeIcon
icon={faCircle}
fixedWidth={true}
fixedWidth
className={classNames('mr-1', {
'text-red-500': status === 'offline',
'text-yellow-500': [ 'running', 'offline' ].indexOf(status) < 0,
@ -100,39 +80,27 @@ export default () => {
/>
&nbsp;{status}
</p>
<p className={'text-xs mt-2'}>
<FontAwesomeIcon
icon={faMicrochip}
fixedWidth={true}
className={'mr-1'}
/>
&nbsp;{cpu.toFixed(2)} %
<p css={tw`text-xs mt-2`}>
<FontAwesomeIcon icon={faMicrochip} fixedWidth css={tw`mr-1`}/> {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'}> / {memorylimit}</span>
</p>
<p className={'text-xs mt-2'}>
<FontAwesomeIcon
icon={faHdd}
fixedWidth={true}
className={'mr-1'}
/>
&nbsp;{bytesToHuman(disk)}
<span className={'text-neutral-500'}> / {disklimit}</span>
<p css={tw`text-xs mt-2`}>
<FontAwesomeIcon icon={faMemory} fixedWidth css={tw`mr-1`}/> {bytesToHuman(memory)}
<span css={tw`text-neutral-500`}> / {memorylimit}</span>
</p>
<p css={tw`text-xs mt-2`}>
<FontAwesomeIcon icon={faHdd} fixedWidth css={tw`mr-1`}/>&nbsp;{bytesToHuman(disk)}
<span css={tw`text-neutral-500`}> / {disklimit}</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', 'control.stop', 'control.restart' ]} matchAny>
<div css={tw`shadow-md bg-neutral-700 rounded p-3 flex text-xs mt-4 justify-center`}>
<Can action={'control.start'}>
<button
className={'btn btn-secondary btn-green btn-xs mr-2'}
<Button
size={'xsmall'}
color={'green'}
isSecondary
css={tw`mr-2`}
disabled={status !== 'offline'}
onClick={e => {
e.preventDefault();
@ -140,18 +108,20 @@ export default () => {
}}
>
Start
</button>
</Button>
</Can>
<Can action={'control.restart'}>
<button
className={'btn btn-secondary btn-primary btn-xs mr-2'}
<Button
size={'xsmall'}
isSecondary
css={tw`mr-2`}
onClick={e => {
e.preventDefault();
sendPowerCommand('restart');
}}
>
Restart
</button>
</Button>
</Can>
<Can action={'control.stop'}>
<StopOrKillButton onPress={action => sendPowerCommand(action)}/>
@ -159,9 +129,9 @@ export default () => {
</div>
</Can>
:
<div className={'mt-4 rounded bg-yellow-500 p-3'}>
<div css={tw`mt-4 rounded bg-yellow-500 p-3`}>
<ContentContainer>
<p className={'text-sm text-yellow-900'}>
<p css={tw`text-sm text-yellow-900`}>
This server is currently running its installation process and most actions are
unavailable.
</p>
@ -169,7 +139,7 @@ export default () => {
</div>
}
</div>
<div className={'flex-1 ml-4'}>
<div css={tw`flex-1 ml-4`}>
<SuspenseSpinner>
<ChunkedConsole/>
<ChunkedStatGraphs/>