Dont display server usage as red if unlimited; closes #2417
This commit is contained in:
Dane Everitt
parent
bcbd2c4996
commit
fe849789a2
1 changed files with 29 additions and 50 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useEffect, useRef, useState } from 'react';
|
import React, { memo, useEffect, useRef, useState } from 'react';
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
import { faEthernet, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons';
|
import { faEthernet, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
|
@ -8,14 +8,29 @@ import { bytesToHuman, megabytesToHuman } from '@/helpers';
|
||||||
import tw from 'twin.macro';
|
import tw from 'twin.macro';
|
||||||
import GreyRowBox from '@/components/elements/GreyRowBox';
|
import GreyRowBox from '@/components/elements/GreyRowBox';
|
||||||
import Spinner from '@/components/elements/Spinner';
|
import Spinner from '@/components/elements/Spinner';
|
||||||
|
import styled from 'styled-components/macro';
|
||||||
|
import { IconProp } from '@fortawesome/fontawesome-svg-core';
|
||||||
|
import isEqual from 'react-fast-compare';
|
||||||
|
|
||||||
// Determines if the current value is in an alarm threshold so we can show it in red rather
|
// Determines if the current value is in an alarm threshold so we can show it in red rather
|
||||||
// than the more faded default style.
|
// than the more faded default style.
|
||||||
const isAlarmState = (current: number, limit: number): boolean => {
|
const isAlarmState = (current: number, limit: number): boolean => limit > 0 && (current / (limit * 1024 * 1024) >= 0.90);
|
||||||
const limitInBytes = limit * 1024 * 1024;
|
|
||||||
|
|
||||||
return current / limitInBytes >= 0.90;
|
interface IconProps {
|
||||||
};
|
icon: IconProp;
|
||||||
|
usage: number;
|
||||||
|
limit: string;
|
||||||
|
isAlarm: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
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`};
|
||||||
|
`;
|
||||||
|
|
||||||
export default ({ server, className }: { server: Server; className?: string }) => {
|
export default ({ server, className }: { server: Server; className?: string }) => {
|
||||||
const interval = useRef<number>(null);
|
const interval = useRef<number>(null);
|
||||||
|
|
@ -96,62 +111,26 @@ export default ({ server, className }: { server: Server; className?: string }) =
|
||||||
:
|
:
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<div css={tw`flex-1 flex md:ml-4 sm:flex hidden justify-center`}>
|
<div css={tw`flex-1 flex md:ml-4 sm:flex hidden justify-center`}>
|
||||||
<FontAwesomeIcon
|
<Icon icon={faMicrochip} $alarm={alarms.cpu}/>
|
||||||
icon={faMicrochip}
|
<IconDescription $alarm={alarms.cpu}>
|
||||||
css={[
|
|
||||||
!alarms.cpu && tw`text-neutral-500`,
|
|
||||||
alarms.cpu && tw`text-red-400`,
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<p
|
|
||||||
css={[
|
|
||||||
tw`text-sm ml-2`,
|
|
||||||
!alarms.cpu && tw`text-neutral-400`,
|
|
||||||
alarms.cpu && tw`text-white`,
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{stats.cpuUsagePercent} %
|
{stats.cpuUsagePercent} %
|
||||||
</p>
|
</IconDescription>
|
||||||
</div>
|
</div>
|
||||||
<div css={tw`flex-1 ml-4 sm:block hidden`}>
|
<div css={tw`flex-1 ml-4 sm:block hidden`}>
|
||||||
<div css={tw`flex justify-center`}>
|
<div css={tw`flex justify-center`}>
|
||||||
<FontAwesomeIcon
|
<Icon icon={faMemory} $alarm={alarms.memory}/>
|
||||||
icon={faMemory}
|
<IconDescription $alarm={alarms.memory}>
|
||||||
css={[
|
|
||||||
!alarms.memory && tw`text-neutral-500`,
|
|
||||||
alarms.memory && tw`text-red-400`,
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<p
|
|
||||||
css={[
|
|
||||||
tw`text-sm ml-2`,
|
|
||||||
!alarms.memory && tw`text-neutral-400`,
|
|
||||||
alarms.memory && tw`text-white`,
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{bytesToHuman(stats.memoryUsageInBytes)}
|
{bytesToHuman(stats.memoryUsageInBytes)}
|
||||||
</p>
|
</IconDescription>
|
||||||
</div>
|
</div>
|
||||||
<p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {memorylimit}</p>
|
<p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {memorylimit}</p>
|
||||||
</div>
|
</div>
|
||||||
<div css={tw`flex-1 ml-4 sm:block hidden`}>
|
<div css={tw`flex-1 ml-4 sm:block hidden`}>
|
||||||
<div css={tw`flex justify-center`}>
|
<div css={tw`flex justify-center`}>
|
||||||
<FontAwesomeIcon
|
<Icon icon={faHdd} $alarm={alarms.disk}/>
|
||||||
icon={faHdd}
|
<IconDescription $alarm={alarms.disk}>
|
||||||
css={[
|
|
||||||
!alarms.disk && tw`text-neutral-500`,
|
|
||||||
alarms.disk && tw`text-red-400`,
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<p
|
|
||||||
css={[
|
|
||||||
tw`text-sm ml-2`,
|
|
||||||
!alarms.disk && tw`text-neutral-400`,
|
|
||||||
alarms.disk && tw`text-white`,
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{bytesToHuman(stats.diskUsageInBytes)}
|
{bytesToHuman(stats.diskUsageInBytes)}
|
||||||
</p>
|
</IconDescription>
|
||||||
</div>
|
</div>
|
||||||
<p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {disklimit}</p>
|
<p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {disklimit}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue