Apply new eslint rules; default to prettier for styling

This commit is contained in:
DaneEveritt 2022-06-26 15:13:52 -04:00
parent f22cce8881
commit dc84af9937
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
218 changed files with 3876 additions and 3564 deletions

View file

@ -19,7 +19,7 @@ import classNames from 'classnames';
type Stats = Record<'memory' | 'cpu' | 'disk' | 'uptime' | 'rx' | 'tx', number>;
const getBackgroundColor = (value: number, max: number | null): string | undefined => {
const delta = !max ? 0 : (value / max);
const delta = !max ? 0 : value / max;
if (delta > 0.8) {
if (delta > 0.9) {
@ -32,14 +32,14 @@ const getBackgroundColor = (value: number, max: number | null): string | undefin
};
const ServerDetailsBlock = ({ className }: { className?: string }) => {
const [ stats, setStats ] = useState<Stats>({ memory: 0, cpu: 0, disk: 0, uptime: 0, tx: 0, rx: 0 });
const [stats, setStats] = useState<Stats>({ memory: 0, cpu: 0, disk: 0, uptime: 0, tx: 0, rx: 0 });
const status = ServerContext.useStoreState(state => state.status.value);
const connected = ServerContext.useStoreState(state => state.socket.connected);
const instance = ServerContext.useStoreState(state => state.socket.instance);
const limits = ServerContext.useStoreState(state => state.server.data!.limits);
const allocation = ServerContext.useStoreState(state => {
const match = state.server.data!.allocations.find(allocation => allocation.isDefault);
const status = ServerContext.useStoreState((state) => state.status.value);
const connected = ServerContext.useStoreState((state) => state.socket.connected);
const instance = ServerContext.useStoreState((state) => state.socket.instance);
const limits = ServerContext.useStoreState((state) => state.server.data!.limits);
const allocation = ServerContext.useStoreState((state) => {
const match = state.server.data!.allocations.find((allocation) => allocation.isDefault);
return !match ? 'n/a' : `${match.alias || ip(match.ip)}:${match.port}`;
});
@ -50,7 +50,7 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
}
instance.send(SocketRequest.SEND_STATS);
}, [ instance, connected ]);
}, [instance, connected]);
useWebsocketEvent(SocketEvent.STATS, (data) => {
let stats: any = {};
@ -78,51 +78,42 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
<StatBlock
icon={faClock}
title={'Uptime'}
color={getBackgroundColor(status === 'running' ? 0 : (status !== 'offline' ? 9 : 10), 10)}
color={getBackgroundColor(status === 'running' ? 0 : status !== 'offline' ? 9 : 10, 10)}
>
{stats.uptime > 0 ?
<UptimeDuration uptime={stats.uptime / 1000}/>
:
'Offline'
}
{stats.uptime > 0 ? <UptimeDuration uptime={stats.uptime / 1000} /> : 'Offline'}
</StatBlock>
<StatBlock
icon={faMicrochip}
title={'CPU Load'}
color={getBackgroundColor(stats.cpu, limits.cpu)}
description={limits.cpu
? `This server is allowed to use up to ${limits.cpu}% of the host's available CPU resources.`
: 'No CPU limit has been configured for this server.'
description={
limits.cpu
? `This server is allowed to use up to ${limits.cpu}% of the host's available CPU resources.`
: 'No CPU limit has been configured for this server.'
}
>
{status === 'offline' ?
<span className={'text-gray-400'}>Offline</span>
:
`${stats.cpu.toFixed(2)}%`
}
{status === 'offline' ? <span className={'text-gray-400'}>Offline</span> : `${stats.cpu.toFixed(2)}%`}
</StatBlock>
<StatBlock
icon={faMemory}
title={'Memory'}
color={getBackgroundColor(stats.memory / 1024, limits.memory * 1024)}
description={limits.memory
? `This server is allowed to use up to ${bytesToString(mbToBytes(limits.memory))} of memory.`
: 'No memory limit has been configured for this server.'
description={
limits.memory
? `This server is allowed to use up to ${bytesToString(mbToBytes(limits.memory))} of memory.`
: 'No memory limit has been configured for this server.'
}
>
{status === 'offline' ?
<span className={'text-gray-400'}>Offline</span>
:
bytesToString(stats.memory)
}
{status === 'offline' ? <span className={'text-gray-400'}>Offline</span> : bytesToString(stats.memory)}
</StatBlock>
<StatBlock
icon={faHdd}
title={'Disk'}
color={getBackgroundColor(stats.disk / 1024, limits.disk * 1024)}
description={limits.disk
? `This server is allowed to use up to ${bytesToString(mbToBytes(limits.disk))} of disk space.`
: 'No disk space limit has been configured for this server.'
description={
limits.disk
? `This server is allowed to use up to ${bytesToString(mbToBytes(limits.disk))} of disk space.`
: 'No disk space limit has been configured for this server.'
}
>
{bytesToString(stats.disk)}
@ -132,22 +123,16 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
title={'Network (Inbound)'}
description={'The total amount of network traffic that your server has recieved since it was started.'}
>
{status === 'offline' ?
<span className={'text-gray-400'}>Offline</span>
:
bytesToString(stats.tx)
}
{status === 'offline' ? <span className={'text-gray-400'}>Offline</span> : bytesToString(stats.tx)}
</StatBlock>
<StatBlock
icon={faCloudUploadAlt}
title={'Network (Outbound)'}
description={'The total amount of traffic your server has sent across the internet since it was started.'}
>
{status === 'offline' ?
<span className={'text-gray-400'}>Offline</span>
:
bytesToString(stats.rx)
description={
'The total amount of traffic your server has sent across the internet since it was started.'
}
>
{status === 'offline' ? <span className={'text-gray-400'}>Offline</span> : bytesToString(stats.rx)}
</StatBlock>
</div>
);