|
|
@ -248,84 +248,81 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { |
|
|
|
{!isLoading ? ( |
|
|
|
{!isLoading ? ( |
|
|
|
<Box className={classes.root}> |
|
|
|
<Box className={classes.root}> |
|
|
|
<List component="nav"> |
|
|
|
<List component="nav"> |
|
|
|
{data && |
|
|
|
{data?.servers.map((server: AnvilServer) => { |
|
|
|
data.servers.map((server: AnvilServer) => { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
<ListItem |
|
|
|
<ListItem |
|
|
|
button |
|
|
|
button |
|
|
|
className={classes.button} |
|
|
|
className={classes.button} |
|
|
|
key={server.server_uuid} |
|
|
|
key={server.server_uuid} |
|
|
|
component={showCheckbox ? 'div' : 'a'} |
|
|
|
component="a" |
|
|
|
href={`/server?uuid=${server.server_uuid}&server_name=${server.server_name}`} |
|
|
|
href={`/server?uuid=${server.server_uuid}&server_name=${server.server_name}`} |
|
|
|
onClick={() => handleChange(server.server_uuid)} |
|
|
|
> |
|
|
|
> |
|
|
|
<Box display="flex" flexDirection="row" width="100%"> |
|
|
|
<Box display="flex" flexDirection="row" width="100%"> |
|
|
|
{showCheckbox && ( |
|
|
|
{showCheckbox && ( |
|
|
|
<Box className={classes.checkbox}> |
|
|
|
<Box className={classes.checkbox}> |
|
|
|
<Checkbox |
|
|
|
<Checkbox |
|
|
|
style={{ color: TEXT }} |
|
|
|
style={{ color: TEXT }} |
|
|
|
color="secondary" |
|
|
|
color="secondary" |
|
|
|
checked={ |
|
|
|
checked={ |
|
|
|
selected.find( |
|
|
|
selected.find((s) => s === server.server_uuid) !== |
|
|
|
(s) => s === server.server_uuid, |
|
|
|
undefined |
|
|
|
) !== undefined |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
onChange={() => handleChange(server.server_uuid)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Box> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
<Box p={1}> |
|
|
|
|
|
|
|
<Decorator |
|
|
|
|
|
|
|
colour={selectDecorator(server.server_state)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Box> |
|
|
|
|
|
|
|
<Box p={1} flexGrow={1}> |
|
|
|
|
|
|
|
<BodyText text={server.server_name} /> |
|
|
|
|
|
|
|
<BodyText |
|
|
|
|
|
|
|
text={ |
|
|
|
|
|
|
|
serverState.get(server.server_state) || |
|
|
|
|
|
|
|
'Not Available' |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
/> |
|
|
|
/> |
|
|
|
</Box> |
|
|
|
</Box> |
|
|
|
<Box display="flex" className={classes.hostsBox}> |
|
|
|
)} |
|
|
|
{server.server_state !== 'shut off' && |
|
|
|
<Box p={1}> |
|
|
|
server.server_state !== 'crashed' && |
|
|
|
<Decorator |
|
|
|
filteredHosts.map( |
|
|
|
colour={selectDecorator(server.server_state)} |
|
|
|
( |
|
|
|
/> |
|
|
|
host: AnvilStatusHost, |
|
|
|
</Box> |
|
|
|
index: number, |
|
|
|
<Box p={1} flexGrow={1}> |
|
|
|
): JSX.Element => ( |
|
|
|
<BodyText text={server.server_name} /> |
|
|
|
<> |
|
|
|
<BodyText |
|
|
|
<Box |
|
|
|
text={ |
|
|
|
p={1} |
|
|
|
serverState.get(server.server_state) || |
|
|
|
key={host.host_uuid} |
|
|
|
'Not Available' |
|
|
|
className={classes.hostBox} |
|
|
|
} |
|
|
|
> |
|
|
|
/> |
|
|
|
<BodyText |
|
|
|
</Box> |
|
|
|
text={host.host_name} |
|
|
|
<Box display="flex" className={classes.hostsBox}> |
|
|
|
selected={ |
|
|
|
{server.server_state !== 'shut off' && |
|
|
|
server.server_host_uuid === |
|
|
|
server.server_state !== 'crashed' && |
|
|
|
host.host_uuid |
|
|
|
filteredHosts.map( |
|
|
|
} |
|
|
|
( |
|
|
|
/> |
|
|
|
host: AnvilStatusHost, |
|
|
|
</Box> |
|
|
|
index: number, |
|
|
|
{index !== filteredHosts.length - 1 && ( |
|
|
|
): JSX.Element => ( |
|
|
|
<Divider |
|
|
|
<> |
|
|
|
className={`${classes.divider} ${classes.verticalDivider}`} |
|
|
|
<Box |
|
|
|
orientation="vertical" |
|
|
|
p={1} |
|
|
|
/> |
|
|
|
key={host.host_uuid} |
|
|
|
)} |
|
|
|
className={classes.hostBox} |
|
|
|
</> |
|
|
|
> |
|
|
|
), |
|
|
|
<BodyText |
|
|
|
)} |
|
|
|
text={host.host_name} |
|
|
|
</Box> |
|
|
|
selected={ |
|
|
|
|
|
|
|
server.server_host_uuid === host.host_uuid |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Box> |
|
|
|
|
|
|
|
{index !== filteredHosts.length - 1 && ( |
|
|
|
|
|
|
|
<Divider |
|
|
|
|
|
|
|
className={`${classes.divider} ${classes.verticalDivider}`} |
|
|
|
|
|
|
|
orientation="vertical" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</> |
|
|
|
|
|
|
|
), |
|
|
|
|
|
|
|
)} |
|
|
|
</Box> |
|
|
|
</Box> |
|
|
|
</ListItem> |
|
|
|
</Box> |
|
|
|
<Divider className={classes.divider} /> |
|
|
|
</ListItem> |
|
|
|
</> |
|
|
|
<Divider className={classes.divider} /> |
|
|
|
); |
|
|
|
</> |
|
|
|
})} |
|
|
|
); |
|
|
|
|
|
|
|
})} |
|
|
|
</List> |
|
|
|
</List> |
|
|
|
</Box> |
|
|
|
</Box> |
|
|
|
) : ( |
|
|
|
) : ( |
|
|
|