seasharp/anvil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(striker-ui): migrate MUI v4->5 on Servers

Browse Source
This commit is contained in:
Tsu-ba-me 2022-01-07 19:58:48 -05:00
parent 61438a8de4
commit 3ca3df01af
2 changed files with 242 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

433
striker-ui/components/Servers.tsx
View File

@ -9,12 +9,12 @@ import {
Checkbox, Checkbox,
Menu, Menu,
MenuItem, MenuItem,
} from '@material-ui/core'; Typography,
import Typography from '@mui/material/Typography'; } from '@mui/material';
import EditIcon from '@material-ui/icons/Edit'; import EditIcon from '@mui/icons-material/Edit';
import MoreVertIcon from '@material-ui/icons/MoreVert'; import MoreVertIcon from '@mui/icons-material/MoreVert';
import CheckIcon from '@material-ui/icons/Check'; import CheckIcon from '@mui/icons-material/Check';
import { makeStyles } from '@material-ui/core/styles'; import { styled } from '@mui/material/styles';
import { Panel } from './Panels'; import { Panel } from './Panels';
import PeriodicFetch from '../lib/fetchers/periodicFetch'; import PeriodicFetch from '../lib/fetchers/periodicFetch';
import { HeaderText, BodyText } from './Text'; import { HeaderText, BodyText } from './Text';
@ -28,6 +28,7 @@ import {
BLACK, BLACK,
LARGE_MOBILE_BREAKPOINT, LARGE_MOBILE_BREAKPOINT,
} from '../lib/consts/DEFAULT_THEME'; } from '../lib/consts/DEFAULT_THEME';
import ICON_BUTTON_STYLE from '../lib/consts/ICON_BUTTON_STYLE';
import { AnvilContext } from './AnvilContext'; import { AnvilContext } from './AnvilContext';
import serverState from '../lib/consts/SERVERS'; import serverState from '../lib/consts/SERVERS';
import Decorator, { Colours } from './Decorator'; import Decorator, { Colours } from './Decorator';
@ -36,8 +37,29 @@ import hostsSanitizer from '../lib/sanitizers/hostsSanitizer';
import putFetch from '../lib/fetchers/putFetch'; import putFetch from '../lib/fetchers/putFetch';
const useStyles = makeStyles((theme) => ({ const PREFIX = 'Servers';
root: {
const classes = {
root: `${PREFIX}-root`,
divider: `${PREFIX}-divider`,
verticalDivider: `${PREFIX}-verticalDivider`,
button: `${PREFIX}-button`,
headerPadding: `${PREFIX}-headerPadding`,
hostsBox: `${PREFIX}-hostsBox`,
hostBox: `${PREFIX}-hostBox`,
checkbox: `${PREFIX}-checkbox`,
serverActionButton: `${PREFIX}-serverActionButton`,
editButton: `${PREFIX}-editButton`,
editButtonBox: `${PREFIX}-editButtonBox`,
dropdown: `${PREFIX}-dropdown`,
power: `${PREFIX}-power`,
on: `${PREFIX}-on`,
off: `${PREFIX}-off`,
all: `${PREFIX}-all`,
};
const StyledDiv = styled('div')(({ theme }) => ({
[`& .${classes.root}`]: {
width: '100%', width: '100%',
overflow: 'auto', overflow: 'auto',
height: '78vh', height: '78vh',
@ -47,63 +69,65 @@ const useStyles = makeStyles((theme) => ({
overflow: 'hidden', overflow: 'hidden',
}, },
}, },
divider: {
background: DIVIDER, [`& .${classes.divider}`]: {
backgroundColor: DIVIDER,
}, },
verticalDivider: {
[`& .${classes.verticalDivider}`]: {
height: '75%', height: '75%',
paddingTop: '1em', paddingTop: '1em',
}, },
button: {
[`& .${classes.button}`]: {
'&:hover': { '&:hover': {
backgroundColor: HOVER, backgroundColor: HOVER,
}, },
paddingLeft: 0, paddingLeft: 0,
}, },
headerPadding: {
[`& .${classes.headerPadding}`]: {
paddingLeft: '.3em', paddingLeft: '.3em',
}, },
hostsBox: {
[`& .${classes.hostsBox}`]: {
padding: '1em', padding: '1em',
paddingRight: 0, paddingRight: 0,
}, },
hostBox: {
[`& .${classes.hostBox}`]: {
paddingTop: 0, paddingTop: 0,
}, },
checkbox: {
[`& .${classes.checkbox}`]: {
paddingTop: '.8em', paddingTop: '.8em',
}, },
menuItem: {
backgroundColor: GREY, [`& .${classes.serverActionButton}`]: {
paddingRight: '3em', backgroundColor: TEXT,
color: BLACK,
textTransform: 'none',
'&:hover': { '&:hover': {
backgroundColor: GREY, backgroundColor: GREY,
}, },
}, },
editButton: {
borderRadius: 8, [`& .${classes.editButton}`]: ICON_BUTTON_STYLE,
backgroundColor: GREY,
'&:hover': { [`& .${classes.editButtonBox}`]: {
backgroundColor: GREY,
},
},
editButtonBox: {
paddingTop: '.3em', paddingTop: '.3em',
}, },
dropdown: {
[`& .${classes.dropdown}`]: {
paddingTop: '.8em', paddingTop: '.8em',
paddingBottom: '.8em', paddingBottom: '.8em',
}, },
power: {
[`& .${classes.power}`]: {
color: BLACK, color: BLACK,
}, },
on: {
color: BLUE, [`& .${classes.all}`]: {
},
off: {
color: RED,
},
all: {
paddingTop: '.5em', paddingTop: '.5em',
paddingLeft: '.3em', paddingLeft: '.3em',
}, },
@ -122,6 +146,24 @@ const selectDecorator = (state: string): Colours => {
} }
}; };
const ServerActionButtonMenuItem = styled(MenuItem)({
backgroundColor: GREY,
paddingRight: '3em',
'&:hover': {
backgroundColor: GREY,
},
});
const ServerActionButtonMenuItemLabel = styled(Typography)({
[`&.${classes.on}`]: {
color: BLUE,
},
[`&.${classes.off}`]: {
color: RED,
},
});
type ButtonLabels = 'on' | 'off'; type ButtonLabels = 'on' | 'off';
const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
@ -129,9 +171,10 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
const [showCheckbox, setShowCheckbox] = useState<boolean>(false); const [showCheckbox, setShowCheckbox] = useState<boolean>(false);
const [allSelected, setAllSelected] = useState<boolean>(false); const [allSelected, setAllSelected] = useState<boolean>(false);
const [selected, setSelected] = useState<string[]>([]); const [selected, setSelected] = useState<string[]>([]);
const buttonLabels = useRef<ButtonLabels[]>([]);
const { uuid } = useContext(AnvilContext); const { uuid } = useContext(AnvilContext);
const classes = useStyles();
const buttonLabels = useRef<ButtonLabels[]>([]);
const { data, isLoading } = PeriodicFetch<AnvilServers>( const { data, isLoading } = PeriodicFetch<AnvilServers>(
`${process.env.NEXT_PUBLIC_API_URL}/get_servers?anvil_uuid=${uuid}`, `${process.env.NEXT_PUBLIC_API_URL}/get_servers?anvil_uuid=${uuid}`,
@ -187,171 +230,173 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
return ( return (
<Panel> <Panel>
<Box className={classes.headerPadding} display="flex"> <StyledDiv>
<Box flexGrow={1}> <Box className={classes.headerPadding} display="flex">
<HeaderText text="Servers" /> <Box flexGrow={1}>
<HeaderText text="Servers" />
</Box>
<Box className={classes.editButtonBox}>
<IconButton
className={classes.editButton}
onClick={() => setShowCheckbox(!showCheckbox)}
>
{showCheckbox ? <CheckIcon /> : <EditIcon />}
</IconButton>
</Box>
</Box> </Box>
<Box className={classes.editButtonBox}> {showCheckbox && (
<IconButton <>
className={classes.editButton} <Box className={classes.headerPadding} display="flex">
style={{ color: BLACK }} <Box flexGrow={1} className={classes.dropdown}>
onClick={() => setShowCheckbox(!showCheckbox)} <Button
> variant="contained"
{showCheckbox ? <CheckIcon /> : <EditIcon />} startIcon={<MoreVertIcon />}
</IconButton> onClick={handleClick}
</Box> className={classes.serverActionButton}
</Box> >
{showCheckbox && ( <Typography className={classes.power} variant="subtitle1">
<> Power
<Box className={classes.headerPadding} display="flex"> </Typography>
<Box flexGrow={1} className={classes.dropdown}> </Button>
<Button <Menu
variant="contained" anchorEl={anchorEl}
startIcon={<MoreVertIcon />} keepMounted
onClick={handleClick} open={Boolean(anchorEl)}
style={{ textTransform: 'none' }} onClose={() => setAnchorEl(null)}
> >
<Typography className={classes.power} variant="subtitle1"> {buttonLabels.current.map((label: ButtonLabels) => {
Power return (
</Typography> <ServerActionButtonMenuItem
</Button> onClick={() => handlePower(label)}
<Menu key={label}
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={() => setAnchorEl(null)}
>
{buttonLabels.current.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())} <ServerActionButtonMenuItemLabel
</Typography> className={classes[label]}
</MenuItem> variant="subtitle1"
); >
})} {label.replace(/^[a-z]/, (c) => c.toUpperCase())}
</Menu> </ServerActionButtonMenuItemLabel>
</Box> </ServerActionButtonMenuItem>
</Box>
<Box display="flex">
<Box>
<Checkbox
style={{ color: TEXT }}
color="secondary"
checked={allSelected}
onChange={() => {
if (!allSelected) {
setButtons(data.servers);
setSelected(
data.servers.map(
(server: AnvilServer) => server.server_uuid,
),
); );
} else { })}
setButtons([]); </Menu>
setSelected([]); </Box>
} </Box>
<Box display="flex">
<Box>
<Checkbox
style={{ color: TEXT }}
color="secondary"
checked={allSelected}
onChange={() => {
if (!allSelected) {
setButtons(data.servers);
setSelected(
data.servers.map(
(server: AnvilServer) => server.server_uuid,
),
);
} else {
setButtons([]);
setSelected([]);
}
setAllSelected(!allSelected); setAllSelected(!allSelected);
}} }}
/> />
</Box>
<Box className={classes.all}>
<BodyText text="All" />
</Box>
</Box> </Box>
<Box className={classes.all}> </>
<BodyText text="All" /> )}
</Box> {!isLoading ? (
</Box> <Box className={classes.root}>
</> <List component="nav">
)} {data?.servers.map((server: AnvilServer) => {
{!isLoading ? ( return (
<Box className={classes.root}> <>
<List component="nav"> <ListItem
{data?.servers.map((server: AnvilServer) => { button
return ( className={classes.button}
<> key={server.server_uuid}
<ListItem component={showCheckbox ? 'div' : 'a'}
button href={`/server?uuid=${server.server_uuid}&server_name=${server.server_name}`}
className={classes.button} onClick={() => handleChange(server.server_uuid)}
key={server.server_uuid} >
component={showCheckbox ? 'div' : 'a'} <Box display="flex" flexDirection="row" width="100%">
href={`/server?uuid=${server.server_uuid}&server_name=${server.server_name}`} {showCheckbox && (
onClick={() => handleChange(server.server_uuid)} <Box className={classes.checkbox}>
> <Checkbox
<Box display="flex" flexDirection="row" width="100%"> style={{ color: TEXT }}
{showCheckbox && ( color="secondary"
<Box className={classes.checkbox}> checked={
<Checkbox selected.find(
style={{ color: TEXT }} (s) => s === server.server_uuid,
color="secondary" ) !== undefined
checked={ }
selected.find((s) => s === server.server_uuid) !== />
undefined </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}>
<Box p={1}> {server.server_state !== 'shut off' &&
<Decorator server.server_state !== 'crashed' &&
colour={selectDecorator(server.server_state)} filteredHosts.map(
/> (
host: AnvilStatusHost,
index: number,
): JSX.Element => (
<>
<Box
p={1}
key={host.host_uuid}
className={classes.hostBox}
>
<BodyText
text={host.host_name}
selected={
server.server_host_uuid ===
host.host_uuid
}
/>
</Box>
{index !== filteredHosts.length - 1 && (
<Divider
className={`${classes.divider} ${classes.verticalDivider}`}
orientation="vertical"
/>
)}
</>
),
)}
</Box>
</Box> </Box>
<Box p={1} flexGrow={1}> </ListItem>
<BodyText text={server.server_name} /> <Divider className={classes.divider} />
<BodyText </>
text={ );
serverState.get(server.server_state) || })}
'Not Available' </List>
} </Box>
/> ) : (
</Box> <Spinner />
<Box display="flex" className={classes.hostsBox}> )}
{server.server_state !== 'shut off' && </StyledDiv>
server.server_state !== 'crashed' &&
filteredHosts.map(
(
host: AnvilStatusHost,
index: number,
): JSX.Element => (
<>
<Box
p={1}
key={host.host_uuid}
className={classes.hostBox}
>
<BodyText
text={host.host_name}
selected={
server.server_host_uuid === host.host_uuid
}
/>
</Box>
{index !== filteredHosts.length - 1 && (
<Divider
className={`${classes.divider} ${classes.verticalDivider}`}
orientation="vertical"
/>
)}
</>
),
)}
</Box>
</Box>
</ListItem>
<Divider className={classes.divider} />
</>
);
})}
</List>
</Box>
) : (
<Spinner />
)}
</Panel> </Panel>
); );
}; };

6
striker-ui/lib/consts/ICON_BUTTON_STYLE.ts
View File

@ -1,10 +1,10 @@
import { BLACK, GREY, TEXT } from './DEFAULT_THEME'; import { BLACK, BORDER_RADIUS, GREY } from './DEFAULT_THEME';
const ICON_BUTTON_STYLE: Readonly<Record<string, unknown>> = { const ICON_BUTTON_STYLE: Readonly<Record<string, unknown>> = {
borderRadius: 8, borderRadius: BORDER_RADIUS,
backgroundColor: GREY, backgroundColor: GREY,
'&:hover': { '&:hover': {
backgroundColor: TEXT, backgroundColor: GREY,
}, },
color: BLACK, color: BLACK,
}; };