Apply new eslint rules; default to prettier for styling
This commit is contained in:
DaneEveritt
parent
f22cce8881
commit
dc84af9937
218 changed files with 3876 additions and 3564 deletions
|
|
@ -13,15 +13,18 @@ import isEqual from 'react-fast-compare';
|
|||
|
||||
// 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 => limit > 0 && (current / (limit * 1024 * 1024) >= 0.90);
|
||||
const isAlarmState = (current: number, limit: number): boolean => limit > 0 && current / (limit * 1024 * 1024) >= 0.9;
|
||||
|
||||
const Icon = memo(styled(FontAwesomeIcon)<{ $alarm: boolean }>`
|
||||
${props => props.$alarm ? tw`text-red-400` : tw`text-neutral-500`};
|
||||
`, isEqual);
|
||||
const Icon = memo(
|
||||
styled(FontAwesomeIcon)<{ $alarm: boolean }>`
|
||||
${(props) => (props.$alarm ? tw`text-red-400` : tw`text-neutral-500`)};
|
||||
`,
|
||||
isEqual
|
||||
);
|
||||
|
||||
const IconDescription = styled.p<{ $alarm: boolean }>`
|
||||
${tw`text-sm ml-2`};
|
||||
${props => props.$alarm ? tw`text-white` : tw`text-neutral-400`};
|
||||
${(props) => (props.$alarm ? tw`text-white` : tw`text-neutral-400`)};
|
||||
`;
|
||||
|
||||
const StatusIndicatorBox = styled(GreyRowBox)<{ $status: ServerPowerState | undefined }>`
|
||||
|
|
@ -31,7 +34,12 @@ const StatusIndicatorBox = styled(GreyRowBox)<{ $status: ServerPowerState | unde
|
|||
${tw`w-2 bg-red-500 absolute right-0 z-20 rounded-full m-1 opacity-50 transition-all duration-150`};
|
||||
height: calc(100% - 0.5rem);
|
||||
|
||||
${({ $status }) => (!$status || $status === 'offline') ? tw`bg-red-500` : ($status === 'running' ? tw`bg-green-500` : tw`bg-yellow-500`)};
|
||||
${({ $status }) =>
|
||||
!$status || $status === 'offline'
|
||||
? tw`bg-red-500`
|
||||
: $status === 'running'
|
||||
? tw`bg-green-500`
|
||||
: tw`bg-yellow-500`};
|
||||
}
|
||||
|
||||
&:hover .status-bar {
|
||||
|
|
@ -41,16 +49,17 @@ const StatusIndicatorBox = styled(GreyRowBox)<{ $status: ServerPowerState | unde
|
|||
|
||||
export default ({ server, className }: { server: Server; className?: string }) => {
|
||||
const interval = useRef<number>(null);
|
||||
const [ isSuspended, setIsSuspended ] = useState(server.status === 'suspended');
|
||||
const [ stats, setStats ] = useState<ServerStats | null>(null);
|
||||
const [isSuspended, setIsSuspended] = useState(server.status === 'suspended');
|
||||
const [stats, setStats] = useState<ServerStats | null>(null);
|
||||
|
||||
const getStats = () => getServerResourceUsage(server.uuid)
|
||||
.then(data => setStats(data))
|
||||
.catch(error => console.error(error));
|
||||
const getStats = () =>
|
||||
getServerResourceUsage(server.uuid)
|
||||
.then((data) => setStats(data))
|
||||
.catch((error) => console.error(error));
|
||||
|
||||
useEffect(() => {
|
||||
setIsSuspended(stats?.isSuspended || server.status === 'suspended');
|
||||
}, [ stats?.isSuspended, server.status ]);
|
||||
}, [stats?.isSuspended, server.status]);
|
||||
|
||||
useEffect(() => {
|
||||
// Don't waste a HTTP request if there is nothing important to show to the user because
|
||||
|
|
@ -65,11 +74,11 @@ export default ({ server, className }: { server: Server; className?: string }) =
|
|||
return () => {
|
||||
interval.current && clearInterval(interval.current);
|
||||
};
|
||||
}, [ isSuspended ]);
|
||||
}, [isSuspended]);
|
||||
|
||||
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.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);
|
||||
}
|
||||
|
|
@ -82,60 +91,57 @@ export default ({ server, className }: { server: Server; className?: string }) =
|
|||
<StatusIndicatorBox as={Link} to={`/server/${server.id}`} className={className} $status={stats?.status}>
|
||||
<div css={tw`flex items-center col-span-12 sm:col-span-5 lg:col-span-6`}>
|
||||
<div className={'icon'} css={tw`mr-4`}>
|
||||
<FontAwesomeIcon icon={faServer}/>
|
||||
<FontAwesomeIcon icon={faServer} />
|
||||
</div>
|
||||
<div>
|
||||
<p css={tw`text-lg break-words`}>{server.name}</p>
|
||||
{!!server.description &&
|
||||
<p css={tw`text-sm text-neutral-300 break-words line-clamp-2`}>{server.description}</p>
|
||||
}
|
||||
{!!server.description && (
|
||||
<p css={tw`text-sm text-neutral-300 break-words line-clamp-2`}>{server.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div css={tw`flex-1 ml-4 lg:block lg:col-span-2 hidden`}>
|
||||
<div css={tw`flex justify-center`}>
|
||||
<FontAwesomeIcon icon={faEthernet} css={tw`text-neutral-500`}/>
|
||||
<FontAwesomeIcon icon={faEthernet} css={tw`text-neutral-500`} />
|
||||
<p css={tw`text-sm text-neutral-400 ml-2`}>
|
||||
{
|
||||
server.allocations.filter(alloc => alloc.isDefault).map(allocation => (
|
||||
{server.allocations
|
||||
.filter((alloc) => alloc.isDefault)
|
||||
.map((allocation) => (
|
||||
<React.Fragment key={allocation.ip + allocation.port.toString()}>
|
||||
{allocation.alias || ip(allocation.ip)}:{allocation.port}
|
||||
</React.Fragment>
|
||||
))
|
||||
}
|
||||
))}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div css={tw`hidden col-span-7 lg:col-span-4 sm:flex items-baseline justify-center`}>
|
||||
{(!stats || isSuspended) ?
|
||||
isSuspended ?
|
||||
{!stats || isSuspended ? (
|
||||
isSuspended ? (
|
||||
<div css={tw`flex-1 text-center`}>
|
||||
<span css={tw`bg-red-500 rounded px-2 py-1 text-red-100 text-xs`}>
|
||||
{server.status === 'suspended' ? 'Suspended' : 'Connection Error'}
|
||||
</span>
|
||||
</div>
|
||||
:
|
||||
(server.isTransferring || server.status) ?
|
||||
<div css={tw`flex-1 text-center`}>
|
||||
<span css={tw`bg-neutral-500 rounded px-2 py-1 text-neutral-100 text-xs`}>
|
||||
{server.isTransferring ?
|
||||
'Transferring'
|
||||
:
|
||||
server.status === 'installing' ? 'Installing' : (
|
||||
server.status === 'restoring_backup' ?
|
||||
'Restoring Backup'
|
||||
:
|
||||
'Unavailable'
|
||||
)
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
:
|
||||
<Spinner size={'small'}/>
|
||||
:
|
||||
) : server.isTransferring || server.status ? (
|
||||
<div css={tw`flex-1 text-center`}>
|
||||
<span css={tw`bg-neutral-500 rounded px-2 py-1 text-neutral-100 text-xs`}>
|
||||
{server.isTransferring
|
||||
? 'Transferring'
|
||||
: server.status === 'installing'
|
||||
? 'Installing'
|
||||
: server.status === 'restoring_backup'
|
||||
? 'Restoring Backup'
|
||||
: 'Unavailable'}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<Spinner size={'small'} />
|
||||
)
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<div css={tw`flex-1 ml-4 sm:block hidden`}>
|
||||
<div css={tw`flex justify-center`}>
|
||||
<Icon icon={faMicrochip} $alarm={alarms.cpu}/>
|
||||
<Icon icon={faMicrochip} $alarm={alarms.cpu} />
|
||||
<IconDescription $alarm={alarms.cpu}>
|
||||
{stats.cpuUsagePercent.toFixed(2)} %
|
||||
</IconDescription>
|
||||
|
|
@ -144,7 +150,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
|
|||
</div>
|
||||
<div css={tw`flex-1 ml-4 sm:block hidden`}>
|
||||
<div css={tw`flex justify-center`}>
|
||||
<Icon icon={faMemory} $alarm={alarms.memory}/>
|
||||
<Icon icon={faMemory} $alarm={alarms.memory} />
|
||||
<IconDescription $alarm={alarms.memory}>
|
||||
{bytesToString(stats.memoryUsageInBytes)}
|
||||
</IconDescription>
|
||||
|
|
@ -153,7 +159,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
|
|||
</div>
|
||||
<div css={tw`flex-1 ml-4 sm:block hidden`}>
|
||||
<div css={tw`flex justify-center`}>
|
||||
<Icon icon={faHdd} $alarm={alarms.disk}/>
|
||||
<Icon icon={faHdd} $alarm={alarms.disk} />
|
||||
<IconDescription $alarm={alarms.disk}>
|
||||
{bytesToString(stats.diskUsageInBytes)}
|
||||
</IconDescription>
|
||||
|
|
@ -161,9 +167,9 @@ export default ({ server, className }: { server: Server; className?: string }) =
|
|||
<p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {diskLimit}</p>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<div className={'status-bar'}/>
|
||||
<div className={'status-bar'} />
|
||||
</StatusIndicatorBox>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Reference in a new issue