|
|
|
|
@ -1,16 +1,40 @@ |
|
|
|
|
import { useContext } from 'react'; |
|
|
|
|
import { List, ListItem, Divider, Box } from '@material-ui/core'; |
|
|
|
|
import { useState, useContext } from 'react'; |
|
|
|
|
import { |
|
|
|
|
List, |
|
|
|
|
ListItem, |
|
|
|
|
Divider, |
|
|
|
|
Box, |
|
|
|
|
IconButton, |
|
|
|
|
Button, |
|
|
|
|
Checkbox, |
|
|
|
|
Menu, |
|
|
|
|
MenuItem, |
|
|
|
|
Typography, |
|
|
|
|
} from '@material-ui/core'; |
|
|
|
|
import EditIcon from '@material-ui/icons/Edit'; |
|
|
|
|
import MoreVertIcon from '@material-ui/icons/MoreVert'; |
|
|
|
|
import CheckIcon from '@material-ui/icons/Check'; |
|
|
|
|
import { makeStyles } from '@material-ui/core/styles'; |
|
|
|
|
import { Panel } from './Panels'; |
|
|
|
|
import PeriodicFetch from '../lib/fetchers/periodicFetch'; |
|
|
|
|
import { HeaderText, BodyText } from './Text'; |
|
|
|
|
import { HOVER, DIVIDER } from '../lib/consts/DEFAULT_THEME'; |
|
|
|
|
import { |
|
|
|
|
HOVER, |
|
|
|
|
DIVIDER, |
|
|
|
|
TEXT, |
|
|
|
|
BLUE, |
|
|
|
|
RED, |
|
|
|
|
GREY, |
|
|
|
|
BLACK, |
|
|
|
|
} from '../lib/consts/DEFAULT_THEME'; |
|
|
|
|
import { AnvilContext } from './AnvilContext'; |
|
|
|
|
import serverState from '../lib/consts/SERVERS'; |
|
|
|
|
import Decorator, { Colours } from './Decorator'; |
|
|
|
|
import Spinner from './Spinner'; |
|
|
|
|
import hostsSanitizer from '../lib/sanitizers/hostsSanitizer'; |
|
|
|
|
|
|
|
|
|
import putJSON from '../lib/fetchers/putJSON'; |
|
|
|
|
|
|
|
|
|
const useStyles = makeStyles((theme) => ({ |
|
|
|
|
root: { |
|
|
|
|
width: '100%', |
|
|
|
|
@ -43,6 +67,43 @@ const useStyles = makeStyles((theme) => ({ |
|
|
|
|
hostBox: { |
|
|
|
|
paddingTop: 0, |
|
|
|
|
}, |
|
|
|
|
checkbox: { |
|
|
|
|
paddingTop: '.8em', |
|
|
|
|
}, |
|
|
|
|
menuItem: { |
|
|
|
|
backgroundColor: TEXT, |
|
|
|
|
paddingRight: '3em', |
|
|
|
|
'&:hover': { |
|
|
|
|
backgroundColor: TEXT, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
editButton: { |
|
|
|
|
borderRadius: 8, |
|
|
|
|
backgroundColor: GREY, |
|
|
|
|
'&:hover': { |
|
|
|
|
backgroundColor: TEXT, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
editButtonBox: { |
|
|
|
|
paddingTop: '.3em', |
|
|
|
|
}, |
|
|
|
|
dropdown: { |
|
|
|
|
paddingTop: '.8em', |
|
|
|
|
paddingBottom: '.8em', |
|
|
|
|
}, |
|
|
|
|
power: { |
|
|
|
|
color: BLACK, |
|
|
|
|
}, |
|
|
|
|
on: { |
|
|
|
|
color: BLUE, |
|
|
|
|
}, |
|
|
|
|
off: { |
|
|
|
|
color: RED, |
|
|
|
|
}, |
|
|
|
|
all: { |
|
|
|
|
paddingTop: '.5em', |
|
|
|
|
paddingLeft: '.3em', |
|
|
|
|
}, |
|
|
|
|
})); |
|
|
|
|
|
|
|
|
|
const selectDecorator = (state: string): Colours => { |
|
|
|
|
@ -58,7 +119,15 @@ const selectDecorator = (state: string): Colours => { |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
type ButtonLabels = 'on' | 'off'; |
|
|
|
|
|
|
|
|
|
const buttonLabels: ButtonLabels[] = ['on', 'off']; |
|
|
|
|
|
|
|
|
|
const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { |
|
|
|
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null); |
|
|
|
|
const [showCheckbox, setShowCheckbox] = useState<boolean>(false); |
|
|
|
|
const [allSelected, setAllSelected] = useState<boolean>(false); |
|
|
|
|
const [selected, setSelected] = useState<string[]>([]); |
|
|
|
|
const { uuid } = useContext(AnvilContext); |
|
|
|
|
const classes = useStyles(); |
|
|
|
|
|
|
|
|
|
@ -66,15 +135,113 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { |
|
|
|
|
`${process.env.NEXT_PUBLIC_API_URL}/get_servers?anvil_uuid=${uuid}`, |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => { |
|
|
|
|
setAnchorEl(event.currentTarget); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handlePower = (label: ButtonLabels) => { |
|
|
|
|
setAnchorEl(null); |
|
|
|
|
if (selected.length) { |
|
|
|
|
putJSON('/set_power', { |
|
|
|
|
server_uuid_list: selected, |
|
|
|
|
is_on: label === 'on', |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handleChange = (server_uuid: string): void => { |
|
|
|
|
const index = selected.indexOf(server_uuid); |
|
|
|
|
|
|
|
|
|
if (index === -1) selected.push(server_uuid); |
|
|
|
|
else selected.splice(index, 1); |
|
|
|
|
|
|
|
|
|
setSelected([...selected]); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const anvilIndex = anvil.findIndex((a) => a.anvil_uuid === uuid); |
|
|
|
|
|
|
|
|
|
const filteredHosts = hostsSanitizer(anvil[anvilIndex]?.hosts); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<Panel> |
|
|
|
|
<div className={classes.headerPadding}> |
|
|
|
|
<HeaderText text="Servers" /> |
|
|
|
|
</div> |
|
|
|
|
<Box className={classes.headerPadding} display="flex"> |
|
|
|
|
<Box flexGrow={1}> |
|
|
|
|
<HeaderText text="Servers" /> |
|
|
|
|
</Box> |
|
|
|
|
<Box className={classes.editButtonBox}> |
|
|
|
|
<IconButton |
|
|
|
|
className={classes.editButton} |
|
|
|
|
style={{ color: BLACK }} |
|
|
|
|
onClick={() => setShowCheckbox(!showCheckbox)} |
|
|
|
|
> |
|
|
|
|
{showCheckbox ? <CheckIcon /> : <EditIcon />} |
|
|
|
|
</IconButton> |
|
|
|
|
</Box> |
|
|
|
|
</Box> |
|
|
|
|
{showCheckbox && ( |
|
|
|
|
<> |
|
|
|
|
<Box className={classes.headerPadding} display="flex"> |
|
|
|
|
<Box flexGrow={1} className={classes.dropdown}> |
|
|
|
|
<Button |
|
|
|
|
variant="contained" |
|
|
|
|
startIcon={<MoreVertIcon />} |
|
|
|
|
onClick={handleClick} |
|
|
|
|
style={{ textTransform: 'none' }} |
|
|
|
|
> |
|
|
|
|
<Typography className={classes.power} variant="subtitle1"> |
|
|
|
|
Power |
|
|
|
|
</Typography> |
|
|
|
|
</Button> |
|
|
|
|
<Menu |
|
|
|
|
anchorEl={anchorEl} |
|
|
|
|
keepMounted |
|
|
|
|
open={Boolean(anchorEl)} |
|
|
|
|
onClose={() => setAnchorEl(null)} |
|
|
|
|
> |
|
|
|
|
{buttonLabels.map((label: ButtonLabels) => { |
|
|
|
|
return ( |
|
|
|
|
<MenuItem |
|
|
|
|
onClick={() => handlePower(label)} |
|
|
|
|
className={classes.menuItem} |
|
|
|
|
key={label} |
|
|
|
|
> |
|
|
|
|
<Typography |
|
|
|
|
className={classes[label]} |
|
|
|
|
variant="subtitle1" |
|
|
|
|
> |
|
|
|
|
{label.replace(/^[a-z]/, (c) => c.toUpperCase())} |
|
|
|
|
</Typography> |
|
|
|
|
</MenuItem> |
|
|
|
|
); |
|
|
|
|
})} |
|
|
|
|
</Menu> |
|
|
|
|
</Box> |
|
|
|
|
</Box> |
|
|
|
|
<Box display="flex"> |
|
|
|
|
<Box> |
|
|
|
|
<Checkbox |
|
|
|
|
style={{ color: TEXT }} |
|
|
|
|
color="secondary" |
|
|
|
|
checked={allSelected} |
|
|
|
|
onChange={() => { |
|
|
|
|
if (!allSelected) |
|
|
|
|
setSelected( |
|
|
|
|
data.servers.map( |
|
|
|
|
(server: AnvilServer) => server.server_uuid, |
|
|
|
|
), |
|
|
|
|
); |
|
|
|
|
else setSelected([]); |
|
|
|
|
|
|
|
|
|
setAllSelected(!allSelected); |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
</Box> |
|
|
|
|
<Box className={classes.all}> |
|
|
|
|
<BodyText text="All" /> |
|
|
|
|
</Box> |
|
|
|
|
</Box> |
|
|
|
|
</> |
|
|
|
|
)} |
|
|
|
|
{!isLoading ? ( |
|
|
|
|
<Box className={classes.root}> |
|
|
|
|
<List component="nav"> |
|
|
|
|
@ -88,6 +255,20 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { |
|
|
|
|
key={server.server_uuid} |
|
|
|
|
> |
|
|
|
|
<Box display="flex" flexDirection="row" width="100%"> |
|
|
|
|
{showCheckbox && ( |
|
|
|
|
<Box className={classes.checkbox}> |
|
|
|
|
<Checkbox |
|
|
|
|
style={{ color: TEXT }} |
|
|
|
|
color="secondary" |
|
|
|
|
checked={ |
|
|
|
|
selected.find( |
|
|
|
|
(s) => s === server.server_uuid, |
|
|
|
|
) !== undefined |
|
|
|
|
} |
|
|
|
|
onChange={() => handleChange(server.server_uuid)} |
|
|
|
|
/> |
|
|
|
|
</Box> |
|
|
|
|
)} |
|
|
|
|
<Box p={1}> |
|
|
|
|
<Decorator |
|
|
|
|
colour={selectDecorator(server.server_state)} |
|
|
|
|
|
つばめ
4 years ago
committed by
GitHub