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

Add support for showing usage graphs on the console page

Browse source
This commit is contained in:
Dane Everitt 2019-09-29 13:23:15 -07:00
parent c66d2cd123
commit 29834a33f8
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
7 changed files with 292 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,19 +4,16 @@ 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 styled from 'styled-components';
import { faMemory } from '@fortawesome/free-solid-svg-icons/faMemory';
import { faMicrochip } from '@fortawesome/free-solid-svg-icons/faMicrochip';
import { bytesToHuman } from '@/helpers';
import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
import TitledGreyBox from '@/components/elements/TitledGreyBox';
type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
const GreyBox = styled.div`
${tw`mt-4 shadow-md bg-neutral-700 rounded p-3 flex text-xs`}
`;
const ChunkedConsole = lazy(() => import('@/components/server/Console'));
const ChunkedStatGraphs = lazy(() => import('@/components/server/StatGraphs'));
const StopOrKillButton = ({ onPress }: { onPress: (action: PowerAction) => void }) => {
const [ clicked, setClicked ] = useState(false);
@ -80,46 +77,39 @@ export default () => {
return (
<div className={'my-10 flex'}>
<div className={'flex-1 ml-4'}>
<div className={'rounded shadow-md bg-neutral-700'}>
<div className={'bg-neutral-900 rounded-t p-3 border-b border-black'}>
<p className={'text-sm uppercase'}>
<FontAwesomeIcon icon={faServer} className={'mr-1 text-neutral-300'}/> {server.name}
</p>
</div>
<div className={'p-3'}>
<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={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={faMicrochip}
fixedWidth={true}
className={'mr-1'}
/>
&nbsp;{cpu.toFixed(2)} %
</p>
</div>
</div>
<GreyBox className={'justify-center'}>
<div className={'w-1/4 ml-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={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={faMicrochip}
fixedWidth={true}
className={'mr-1'}
/>
&nbsp;{cpu.toFixed(2)} %
</p>
</TitledGreyBox>
<div className={'grey-box justify-center'}>
<button
className={'btn btn-secondary btn-xs mr-2'}
disabled={status !== 'offline'}
@ -140,13 +130,14 @@ export default () => {
Restart
</button>
<StopOrKillButton onPress={action => sendPowerCommand(action)}/>
</GreyBox>
</div>
<SuspenseSpinner>
<div className={'mx-4 w-3/4 mr-4'}>
<ChunkedConsole/>
</div>
</SuspenseSpinner>
</div>
<div className={'flex-1 mx-4 mr-4'}>
<SuspenseSpinner>
<ChunkedConsole/>
{status !== 'offline' && <ChunkedStatGraphs/>}
</SuspenseSpinner>
</div>
</div>
);
};