You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
158 lines
4.5 KiB
158 lines
4.5 KiB
import { Box, Switch } from '@material-ui/core'; |
|
import { makeStyles } from '@material-ui/core/styles'; |
|
import { InnerPanel, PanelHeader } from '../Panels'; |
|
import { ProgressBar } from '../Bars'; |
|
import { BodyText } from '../Text'; |
|
import Decorator, { Colours } from '../Decorator'; |
|
import HOST_STATUS from '../../lib/consts/NODES'; |
|
|
|
import putJSON from '../../lib/fetchers/putJSON'; |
|
|
|
const useStyles = makeStyles((theme) => ({ |
|
root: { |
|
overflow: 'auto', |
|
height: '28vh', |
|
paddingLeft: '.3em', |
|
[theme.breakpoints.down('md')]: { |
|
height: '100%', |
|
overflow: 'hidden', |
|
}, |
|
}, |
|
state: { |
|
paddingLeft: '.7em', |
|
paddingRight: '.7em', |
|
paddingTop: '1em', |
|
}, |
|
bar: { |
|
paddingLeft: '.7em', |
|
paddingRight: '.7em', |
|
}, |
|
header: { |
|
paddingTop: '.3em', |
|
paddingRight: '.7em', |
|
}, |
|
label: { |
|
paddingTop: '.3em', |
|
}, |
|
decoratorBox: { |
|
paddingRight: '.3em', |
|
}, |
|
})); |
|
|
|
const selectStateMessage = (regex: RegExp, message: string): string => { |
|
const msg = regex.exec(message); |
|
|
|
if (msg) { |
|
return HOST_STATUS.get(msg[0]) || 'Error code not recognized'; |
|
} |
|
return 'Error code not found'; |
|
}; |
|
|
|
const selectDecorator = (state: string): Colours => { |
|
switch (state) { |
|
case 'ready': |
|
return 'ok'; |
|
case 'off': |
|
return 'off'; |
|
case 'accessible': |
|
case 'on': |
|
return 'warning'; |
|
default: |
|
return 'error'; |
|
} |
|
}; |
|
|
|
const AnvilHost = ({ |
|
hosts, |
|
}: { |
|
hosts: Array<AnvilStatusHost>; |
|
}): JSX.Element => { |
|
const classes = useStyles(); |
|
const stateRegex = /^[a-zA-Z]/; |
|
const messageRegex = /^(message_[0-9]+)/; |
|
|
|
return ( |
|
<Box className={classes.root}> |
|
{hosts && |
|
hosts.map( |
|
(host): JSX.Element => { |
|
return ( |
|
<InnerPanel key={host.host_uuid}> |
|
<PanelHeader> |
|
<Box display="flex" width="100%" className={classes.header}> |
|
<Box flexGrow={1}> |
|
<BodyText text={host.host_name} /> |
|
</Box> |
|
<Box className={classes.decoratorBox}> |
|
<Decorator colour={selectDecorator(host.state)} /> |
|
</Box> |
|
<Box> |
|
<BodyText |
|
text={ |
|
host?.state?.replace(stateRegex, (c) => |
|
c.toUpperCase(), |
|
) || 'Not Available' |
|
} |
|
/> |
|
</Box> |
|
</Box> |
|
</PanelHeader> |
|
<Box display="flex" className={classes.state}> |
|
<Box className={classes.label}> |
|
<BodyText text="Power: " /> |
|
</Box> |
|
<Box flexGrow={1}> |
|
<Switch |
|
checked={host.state === 'ready'} |
|
onChange={() => |
|
putJSON('/set_power', { |
|
host_uuid: host.host_uuid, |
|
is_on: !(host.state === 'ready'), |
|
}) |
|
} |
|
/> |
|
</Box> |
|
<Box className={classes.label}> |
|
<BodyText text="Member: " /> |
|
</Box> |
|
<Box> |
|
<Switch |
|
checked={host.state === 'ready'} |
|
disabled={!host.removable} |
|
onChange={() => |
|
putJSON('/set_membership', { |
|
host_uuid: host.host_uuid, |
|
is_member: !(host.state === 'ready'), |
|
}) |
|
} |
|
/> |
|
</Box> |
|
</Box> |
|
{host.state !== 'ready' && ( |
|
<> |
|
<Box display="flex" width="100%" className={classes.state}> |
|
<Box> |
|
<BodyText |
|
text={selectStateMessage( |
|
messageRegex, |
|
host.state_message, |
|
)} |
|
/> |
|
</Box> |
|
</Box> |
|
<Box display="flex" width="100%" className={classes.bar}> |
|
<Box flexGrow={1}> |
|
<ProgressBar progressPercentage={host.state_percent} /> |
|
</Box> |
|
</Box> |
|
</> |
|
)} |
|
</InnerPanel> |
|
); |
|
}, |
|
)} |
|
</Box> |
|
); |
|
}; |
|
|
|
export default AnvilHost;
|
|
|