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

Update server listing and associated logic to pull from the panel dynamiacally

Browse source
This commit is contained in:
Dane Everitt 2019-08-17 16:03:10 -07:00
parent 952dff854e
commit fb9c106448
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
26 changed files with 384 additions and 239 deletions
Download patch file Download diff file Expand all files Collapse all files

13
resources/scripts/api/getServers.ts Normal file
View file

@ -0,0 +1,13 @@
import { rawDataToServerObject, Server } from '@/api/server/getServer';
import http, { getPaginationSet, PaginatedResult } from '@/api/http';
export default (): Promise<PaginatedResult<Server>> => {
return new Promise((resolve, reject) => {
http.get(`/api/client`, { params: { include: [ 'allocation' ] } })
.then(({ data }) => resolve({
items: (data.data || []).map((datum: any) => rawDataToServerObject(datum.attributes)),
pagination: getPaginationSet(data.meta.pagination),
}))
.catch(reject);
});
};

27
resources/scripts/api/http.ts
View file

@ -1,9 +1,5 @@
import axios, { AxiosInstance } from 'axios';
// This token is set in the bootstrap.js file at the beginning of the request
// and is carried through from there.
// const token: string = '';
const http: AxiosInstance = axios.create({
headers: {
'X-Requested-With': 'XMLHttpRequest',
@ -41,3 +37,26 @@ export function httpErrorToHuman (error: any): string {
return error.message;
}
export interface PaginatedResult<T> {
items: T[];
pagination: PaginationDataSet;
}
interface PaginationDataSet {
total: number;
count: number;
perPage: number;
currentPage: number;
totalPages: number;
}
export function getPaginationSet (data: any): PaginationDataSet {
return {
total: data.total,
count: data.count,
perPage: data.per_page,
currentPage: data.current_page,
totalPages: data.total_pages,
};
}

2
resources/scripts/api/server/getServer.ts
View file

@ -4,6 +4,7 @@ export interface Allocation {
ip: string;
alias: string | null;
port: number;
default: boolean;
}
export interface Server {
@ -36,6 +37,7 @@ export const rawDataToServerObject = (data: any): Server => ({
ip: data.allocation.ip,
alias: null,
port: data.allocation.port,
default: true,
}],
limits: { ...data.limits },
featureLimits: { ...data.feature_limits },

29
resources/scripts/api/server/getServerResourceUsage.ts Normal file
View file

@ -0,0 +1,29 @@
import http from '@/api/http';
export type ServerPowerState = 'offline' | 'starting' | 'running' | 'stopping';
export interface ServerStats {
status: ServerPowerState;
isSuspended: boolean;
memoryUsageInBytes: number;
cpuUsagePercent: number;
diskUsageInBytes: number;
networkRxInBytes: number;
networkTxInBytes: number;
}
export default (server: string): Promise<ServerStats> => {
return new Promise((resolve, reject) => {
http.get(`/api/client/servers/${server}/resources`)
.then(({ data: { attributes } }) => resolve({
status: attributes.current_state,
isSuspended: attributes.is_suspended,
memoryUsageInBytes: attributes.resources.memory_bytes,
cpuUsagePercent: attributes.resources.cpu_absolute,
diskUsageInBytes: attributes.resources.disk_bytes,
networkRxInBytes: attributes.resources.network_rx_bytes,
networkTxInBytes: attributes.resources.network_tx_bytes,
}))
.catch(reject);
});
};

116
resources/scripts/components/dashboard/DashboardContainer.tsx
View file

@ -1,97 +1,35 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faServer } from '@fortawesome/free-solid-svg-icons/faServer';
import { faMicrochip } from '@fortawesome/free-solid-svg-icons/faMicrochip';
import { faMemory } from '@fortawesome/free-solid-svg-icons/faMemory';
import { faHdd } from '@fortawesome/free-solid-svg-icons/faHdd';
import { faEthernet } from '@fortawesome/free-solid-svg-icons/faEthernet';
import { Link } from 'react-router-dom';
import { Server } from '@/api/server/getServer';
import getServers from '@/api/getServers';
import ServerRow from '@/components/dashboard/ServerRow';
import Spinner from '@/components/elements/Spinner';
export default () => (
<div className={'my-10'}>
<Link to={'/server/e9d6c836'} className={'grey-row-box cursor-pointer'}>
<div className={'icon'}>
<FontAwesomeIcon icon={faServer}/>
</div>
<div className={'w-1/2 ml-4'}>
<p className={'text-lg'}>Party Parrots</p>
</div>
<div className={'flex flex-1 items-baseline justify-around'}>
<div className={'flex ml-4'}>
<FontAwesomeIcon icon={faEthernet} className={'text-neutral-500'}/>
<p className={'text-sm text-neutral-400 ml-2'}>
192.168.100.100:25565
</p>
</div>
<div className={'flex ml-4'}>
<FontAwesomeIcon icon={faMicrochip} className={'text-neutral-500'}/>
<p className={'text-sm text-neutral-400 ml-2'}>
34.6%
</p>
</div>
<div className={'ml-4'}>
<div className={'flex'}>
<FontAwesomeIcon icon={faMemory} className={'text-neutral-500'}/>
<p className={'text-sm text-neutral-400 ml-2'}>
2094 MB
</p>
</div>
<p className={'text-xs text-neutral-600 text-center mt-1'}>of 4096 MB</p>
</div>
<div className={'ml-4'}>
<div className={'flex'}>
<FontAwesomeIcon icon={faHdd} className={'text-neutral-500'}/>
<p className={'text-sm text-neutral-400 ml-2'}>
278 MB
</p>
</div>
<p className={'text-xs text-neutral-600 text-center mt-1'}>of 16 GB</p>
</div>
</div>
</Link>
<div className={'grey-row-box cursor-pointer mt-2'}>
<div className={'icon'}>
<FontAwesomeIcon icon={faServer}/>
</div>
<div className={'w-1/2 ml-4'}>
<p className={'text-lg'}>My Factions Server</p>
<p className={'text-neutral-400 text-xs mt-1'}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
</div>
<div className={'flex flex-1 items-baseline justify-around'}>
<div className={'flex ml-4'}>
<FontAwesomeIcon icon={faEthernet} className={'text-neutral-500'}/>
<p className={'text-sm text-neutral-400 ml-2'}>
192.168.202.10:34556
</p>
</div>
<div className={'flex ml-4'}>
<FontAwesomeIcon icon={faMicrochip} className={'text-red-400'}/>
<p className={'text-sm text-white ml-2'}>
98.2 %
</p>
</div>
<div className={'ml-4'}>
<div className={'flex'}>
<FontAwesomeIcon icon={faMemory} className={'text-neutral-500'}/>
<p className={'text-sm text-neutral-400 ml-2'}>
376 MB
</p>
</div>
<p className={'text-xs text-neutral-600 text-center mt-1'}>of 1024 MB</p>
</div>
<div className={'ml-4'}>
<div className={'flex'}>
<FontAwesomeIcon icon={faHdd} className={'text-neutral-500'}/>
<p className={'text-sm text-neutral-400 ml-2'}>
187 MB
</p>
</div>
<p className={'text-xs text-neutral-600 text-center mt-1'}>of 32 GB</p>
</div>
</div>
export default () => {
const [ servers, setServers ] = useState<null | Server[]>(null);
const loadServers = () => getServers().then(data => setServers(data.items));
useEffect(() => {
loadServers();
}, []);
if (servers === null) {
return <Spinner size={'large'} centered={true}/>;
}
return (
<div className={'my-10'}>
{
servers.map(server => (
<ServerRow key={server.uuid} server={server} className={'mt-2'}/>
))
}
</div>
</div>
);
);
};

135
resources/scripts/components/dashboard/ServerRow.tsx Normal file
View file

@ -0,0 +1,135 @@
import React, { useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faServer } from '@fortawesome/free-solid-svg-icons/faServer';
import { faEthernet } from '@fortawesome/free-solid-svg-icons/faEthernet';
import { faMicrochip } from '@fortawesome/free-solid-svg-icons/faMicrochip';
import { faMemory } from '@fortawesome/free-solid-svg-icons/faMemory';
import { faHdd } from '@fortawesome/free-solid-svg-icons/faHdd';
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 } from '@/helpers';
import classNames from 'classnames';
// 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 * 1000 * 1000;
return current / limitInBytes >= 0.90;
};
export default ({ server, className }: { server: Server; className: string | undefined }) => {
const [ stats, setStats ] = useState<ServerStats | null>(null);
const getStats = () => getServerResourceUsage(server.uuid).then(data => setStats(data));
useEffect(() => {
let interval: any = null;
getStats().then(() => {
interval = setInterval(() => getStats(), 20000);
});
return () => {
interval && clearInterval(interval);
};
}, []);
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);
}
return (
<Link to={`/server/${server.id}`} className={`grey-row-box cursor-pointer ${className}`}>
<div className={'icon'}>
<FontAwesomeIcon icon={faServer}/>
</div>
<div className={'flex-1 ml-4'}>
<p className={'text-lg'}>{server.name}</p>
</div>
<div className={'w-1/4 overflow-hidden'}>
<div className={'flex ml-4'}>
<FontAwesomeIcon icon={faEthernet} className={'text-neutral-500'}/>
<p className={'text-sm text-neutral-400 ml-2'}>
{
server.allocations.filter(alloc => alloc.default).map(allocation => (
<span key={allocation.ip + allocation.port.toString()}>{allocation.alias || allocation.ip}:{allocation.port}</span>
))
}
</p>
</div>
</div>
<div className={'w-1/3 flex items-baseline relative'}>
{!stats ?
<SpinnerOverlay size={'tiny'} visible={true} backgroundOpacity={0.25}/>
:
<React.Fragment>
<div className={'flex-1 flex ml-4 justify-center'}>
<FontAwesomeIcon
icon={faMicrochip}
className={classNames({
'text-neutral-500': !alarms.cpu,
'text-red-400': alarms.cpu,
})}
/>
<p
className={classNames('text-sm ml-2', {
'text-neutral-400': !alarms.cpu,
'text-white': alarms.cpu,
})}
>
{stats.cpuUsagePercent} %
</p>
</div>
<div className={'flex-1 ml-4'}>
<div className={'flex justify-center'}>
<FontAwesomeIcon
icon={faMemory}
className={classNames({
'text-neutral-500': !alarms.memory,
'text-red-400': alarms.memory,
})}
/>
<p
className={classNames('text-sm ml-2', {
'text-neutral-400': !alarms.memory,
'text-white': alarms.memory,
})}
>
{bytesToHuman(stats.memoryUsageInBytes)}
</p>
</div>
<p className={'text-xs text-neutral-600 text-center mt-1'}>of {bytesToHuman(server.limits.memory * 1000 * 1000)}</p>
</div>
<div className={'flex-1 ml-4'}>
<div className={'flex justify-center'}>
<FontAwesomeIcon
icon={faHdd}
className={classNames({
'text-neutral-500': !alarms.disk,
'text-red-400': alarms.disk,
})}
/>
<p
className={classNames('text-sm ml-2', {
'text-neutral-400': !alarms.disk,
'text-white': alarms.disk,
})}
>
{bytesToHuman(stats.diskUsageInBytes)}
</p>
</div>
<p className={'text-xs text-neutral-600 text-center mt-1'}>
of {bytesToHuman(server.limits.disk * 1000 * 1000)}
</p>
</div>
</React.Fragment>
}
</div>
</Link>
);
};

2
resources/scripts/components/dashboard/forms/UpdateEmailAddressForm.tsx
View file

@ -53,7 +53,7 @@ export default () => {
{
({ isSubmitting, isValid }) => (
<React.Fragment>
<SpinnerOverlay large={true} visible={isSubmitting}/>
<SpinnerOverlay size={'large'} visible={isSubmitting}/>
<Form className={'m-0'}>
<Field
id={'current_email'}

2
resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx
View file

@ -56,7 +56,7 @@ export default () => {
{
({ isSubmitting, isValid }) => (
<React.Fragment>
<SpinnerOverlay large={true} visible={isSubmitting}/>
<SpinnerOverlay size={'large'} visible={isSubmitting}/>
<Form className={'m-0'}>
<Field
id={'current_password'}

2
resources/scripts/components/elements/Modal.tsx
View file

@ -61,7 +61,7 @@ export default (props: Props) => {
className={'absolute w-full h-full rounded flex items-center justify-center'}
style={{ background: 'hsla(211, 10%, 53%, 0.25)' }}
>
<Spinner large={false}/>
<Spinner/>
</div>
}
<div className={'modal-content p-6'}>

16
resources/scripts/components/elements/Spinner.tsx
View file

@ -1,11 +1,19 @@
import React from 'react';
import classNames from 'classnames';
export default ({ large, centered }: { large?: boolean; centered?: boolean }) => (
export type SpinnerSize = 'large' | 'normal' | 'tiny';
export default ({ size, centered }: { size?: SpinnerSize; centered?: boolean }) => (
centered ?
<div className={classNames('flex justify-center', { 'm-20': large, 'm-6': !large })}>
<div className={classNames('spinner-circle spinner-white', { 'spinner-lg': large })}/>
<div className={classNames('flex justify-center', { 'm-20': size === 'large', 'm-6': size !== 'large' })}>
<div className={classNames('spinner-circle spinner-white', {
'spinner-lg': size === 'large',
'spinner-sm': size === 'tiny',
})}/>
</div>
:
<div className={classNames('spinner-circle spinner-white', { 'spinner-lg': large })}/>
<div className={classNames('spinner-circle spinner-white', {
'spinner-lg': size === 'large',
'spinner-sm': size === 'tiny',
})}/>
);

15
resources/scripts/components/elements/SpinnerOverlay.tsx
View file

@ -1,18 +1,25 @@
import React from 'react';
import classNames from 'classnames';
import { CSSTransition } from 'react-transition-group';
import Spinner from '@/components/elements/Spinner';
import Spinner, { SpinnerSize } from '@/components/elements/Spinner';
export default ({ large, fixed, visible }: { visible: boolean; fixed?: boolean; large?: boolean }) => (
interface Props {
visible: boolean;
fixed?: boolean;
size?: SpinnerSize;
backgroundOpacity?: number;
}
export default ({ size, fixed, visible, backgroundOpacity }: Props) => (
<CSSTransition timeout={150} classNames={'fade'} in={visible} unmountOnExit={true}>
<div
className={classNames('z-50 pin-t pin-l flex items-center justify-center w-full h-full rounded', {
absolute: !fixed,
fixed: fixed,
})}
style={{ background: 'rgba(0, 0, 0, 0.45)' }}
style={{ background: `rgba(0, 0, 0, ${backgroundOpacity || 0.45})` }}
>
<Spinner large={large}/>
<Spinner size={size}/>
</div>
</CSSTransition>
);

2
resources/scripts/components/server/Console.tsx
View file

@ -91,7 +91,7 @@ class Console extends React.PureComponent<Readonly<Props>> {
render () {
return (
<div className={'text-xs font-mono relative'}>
<SpinnerOverlay visible={!this.props.connected} large={true}/>
<SpinnerOverlay visible={!this.props.connected} size={'large'}/>
<div
className={'rounded-t p-2 bg-black overflow-scroll w-full'}
style={{

2
resources/scripts/components/server/databases/DatabasesContainer.tsx
View file

@ -38,7 +38,7 @@ export default () => {
<div className={'my-10 mb-6'}>
<FlashMessageRender byKey={'databases'}/>
{loading ?
<Spinner large={true} centered={true}/>
<Spinner size={'large'} centered={true}/>
:
<CSSTransition classNames={'fade'} timeout={250}>
<React.Fragment>

2
resources/scripts/components/server/files/FileDropdownMenu.tsx
View file

@ -109,7 +109,7 @@ export default ({ uuid }: { uuid: string }) => {
setMenuVisible(false);
}}
/>
<SpinnerOverlay visible={showSpinner} fixed={true} large={true}/>
<SpinnerOverlay visible={showSpinner} fixed={true} size={'large'}/>
</div>
<CSSTransition timeout={250} in={menuVisible} unmountOnExit={true} classNames={'fade'}>
<div

2
resources/scripts/components/server/files/FileManagerContainer.tsx
View file

@ -70,7 +70,7 @@ export default () => {
</div>
{
loading ?
<Spinner large={true} centered={true}/>
<Spinner size={'large'} centered={true}/>
:
!files.length ?
<p className={'text-sm text-neutral-600 text-center'}>

4
resources/scripts/helpers.ts
View file

@ -1,4 +1,8 @@
export function bytesToHuman (bytes: number): string {
if (bytes === 0) {
return '0 kB';
}
const i = Math.floor(Math.log(bytes) / Math.log(1000));
// @ts-ignore

2
resources/scripts/routers/ServerRouter.tsx
View file

@ -43,7 +43,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
<div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
{!server ?
<div className={'flex justify-center m-20'}>
<Spinner large={true}/>
<Spinner size={'large'}/>
</div>
:
<React.Fragment>