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

style(striker-ui): re-run prettier across all sources

Browse Source
main
Tsu-ba-me 3 years ago
parent 8c60aaaf5f
commit 072680f9b3
30 changed files with 512 additions and 588 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 110
      striker-ui/components/AnvilDrawer.tsx
  2. 16
      striker-ui/components/Anvils/Anvil.tsx
  3. 40
      striker-ui/components/Anvils/AnvilList.tsx
  4. 46
      striker-ui/components/Bars/AllocationBar.tsx
  5. 40
      striker-ui/components/Bars/ProgressBar.tsx
  6. 6
      striker-ui/components/Decorator.tsx
  7. 20
      striker-ui/components/Display/FullSize.tsx
  8. 12
      striker-ui/components/Domain.tsx
  9. 86
      striker-ui/components/FileSystem/FileSystemsHost.tsx
  10. 12
      striker-ui/components/Files/FileInfo.tsx
  11. 106
      striker-ui/components/Files/FileList.tsx
  12. 7
      striker-ui/components/Hosts/AnvilHost.tsx
  13. 11
      striker-ui/components/MessageBox.tsx
  14. 92
      striker-ui/components/Network/Network.tsx
  15. 6
      striker-ui/components/Panels/InnerPanel.tsx
  16. 14
      striker-ui/components/Panels/InnerPanelHeader.tsx
  17. 18
      striker-ui/components/Panels/Panel.tsx
  18. 116
      striker-ui/components/Resource/ResourceVolumes.tsx
  19. 14
      striker-ui/components/Resource/index.tsx
  20. 168
      striker-ui/components/Servers.tsx
  21. 73
      striker-ui/components/SharedStorage/SharedStorageHost.tsx
  22. 12
      striker-ui/components/Spinner.tsx
  23. 6
      striker-ui/components/Text/HeaderText.tsx
  24. 6
      striker-ui/lib/consts/UPLOAD_FILE_TYPES.ts
  25. 4
      striker-ui/lib/create_emotion_cache/createEmotionCache.ts
  26. 5
      striker-ui/lib/fetchers/fetchJSON.ts
  27. 5
      striker-ui/lib/fetchers/putFetch.ts
  28. 7
      striker-ui/lib/sanitizers/hostsSanitizer.ts
  29. 22
      striker-ui/pages/_app.tsx
  30. 20
      striker-ui/pages/file-manager/index.tsx

110
striker-ui/components/AnvilDrawer.tsx
Unescape View File

@ -45,63 +45,61 @@ interface DrawerProps {
setOpen: Dispatch<SetStateAction<boolean>>; setOpen: Dispatch<SetStateAction<boolean>>;
} }
const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => { const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => (
return ( <StyledDrawer
<StyledDrawer BackdropProps={{ invisible: true }}
BackdropProps={{ invisible: true }} anchor="left"
anchor="left" open={open}
open={open} onClose={() => setOpen(!open)}
onClose={() => setOpen(!open)} >
> <div role="presentation">
<div role="presentation"> <List className={classes.list}>
<List className={classes.list}> <ListItem button>
<ListItem button> <HeaderText text="Admin" />
<HeaderText text="Admin" /> </ListItem>
</ListItem> <Divider className={classes.divider} />
<Divider className={classes.divider} /> <ListItem button component="a" href="/index.html">
<ListItem button component="a" href="/index.html"> <Box display="flex" flexDirection="row" width="100%">
<Box display="flex" flexDirection="row" width="100%"> <Box className={classes.dashboardButton}>
<Box className={classes.dashboardButton}> <DashboardIcon className={classes.dashboardIcon} />
<DashboardIcon className={classes.dashboardIcon} /> </Box>
</Box> <Box flexGrow={1} className={classes.text}>
<Box flexGrow={1} className={classes.text}> <BodyText text="Dashboard" />
<BodyText text="Dashboard" />
</Box>
</Box> </Box>
</ListItem> </Box>
{ICONS.map( </ListItem>
(icon): JSX.Element => ( {ICONS.map(
<ListItem (icon): JSX.Element => (
button <ListItem
key={icon.image} button
component="a" key={icon.image}
href={ component="a"
icon.uri.search(/^https?:/) !== -1 href={
? icon.uri icon.uri.search(/^https?:/) !== -1
: `${process.env.NEXT_PUBLIC_API_URL}${icon.uri}` ? icon.uri
} : `${process.env.NEXT_PUBLIC_API_URL}${icon.uri}`
> }
<Box display="flex" flexDirection="row" width="100%"> >
<Box> <Box display="flex" flexDirection="row" width="100%">
<img <Box>
alt="" <img
key="icon" alt=""
src={icon.image} key="icon"
// eslint-disable-next-line react/jsx-props-no-spreading src={icon.image}
{...ICON_SIZE} // eslint-disable-next-line react/jsx-props-no-spreading
/> {...ICON_SIZE}
</Box> />
<Box flexGrow={1} className={classes.text}>
<BodyText text={icon.text} />
</Box>
</Box> </Box>
</ListItem> <Box flexGrow={1} className={classes.text}>
), <BodyText text={icon.text} />
)} </Box>
</List> </Box>
</div> </ListItem>
</StyledDrawer> ),
); )}
}; </List>
</div>
</StyledDrawer>
);
export default AnvilDrawer; export default AnvilDrawer;

16
striker-ui/components/Anvils/Anvil.tsx
Unescape View File

@ -1,15 +1,11 @@
import { BodyText } from '../Text'; import { BodyText } from '../Text';
import anvilState from '../../lib/consts/ANVILS'; import anvilState from '../../lib/consts/ANVILS';
const Anvil = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => { const Anvil = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => (
return ( <>
<> <BodyText text={anvil.anvil_name} />
<BodyText text={anvil.anvil_name} /> <BodyText text={anvilState.get(anvil.anvil_state) || 'State unavailable'} />
<BodyText </>
text={anvilState.get(anvil.anvil_state) || 'State unavailable'} );
/>
</>
);
};
export default Anvil; export default Anvil;

40
striker-ui/components/Anvils/AnvilList.tsx
Unescape View File

@ -75,28 +75,26 @@ const AnvilList = ({ list }: { list: AnvilListItem[] }): JSX.Element => {
className={classes.root} className={classes.root}
aria-label="mailbox folders" aria-label="mailbox folders"
> >
{sortAnvils(list).map((anvil) => { {sortAnvils(list).map((anvil) => (
return ( <>
<> <Divider className={classes.divider} />
<Divider className={classes.divider} /> <ListItem
<ListItem button
button className={classes.button}
className={classes.button} key={anvil.anvil_uuid}
key={anvil.anvil_uuid} onClick={() => setAnvilUuid(anvil.anvil_uuid)}
onClick={() => setAnvilUuid(anvil.anvil_uuid)} >
> <Box display="flex" flexDirection="row" width="100%">
<Box display="flex" flexDirection="row" width="100%"> <Box p={1}>
<Box p={1}> <Decorator colour={selectDecorator(anvil.anvil_state)} />
<Decorator colour={selectDecorator(anvil.anvil_state)} />
</Box>
<Box p={1} flexGrow={1} className={classes.anvil}>
<Anvil anvil={anvil} />
</Box>
</Box> </Box>
</ListItem> <Box p={1} flexGrow={1} className={classes.anvil}>
</> <Anvil anvil={anvil} />
); </Box>
})} </Box>
</ListItem>
</>
))}
</List> </List>
</StyledDiv> </StyledDiv>
); );

46
striker-ui/components/Bars/AllocationBar.tsx
Unescape View File

@ -39,29 +39,27 @@ const StyledDiv = styled('div')(() => ({
const breakpointWarning = 70; const breakpointWarning = 70;
const breakpointAlert = 90; const breakpointAlert = 90;
const AllocationBar = ({ allocated }: { allocated: number }): JSX.Element => { const AllocationBar = ({ allocated }: { allocated: number }): JSX.Element => (
return ( <StyledDiv>
<StyledDiv> <BorderLinearProgress
<BorderLinearProgress classes={{
classes={{ bar:
bar: /* eslint-disable no-nested-ternary */
/* eslint-disable no-nested-ternary */ allocated > breakpointWarning
allocated > breakpointWarning ? allocated > breakpointAlert
? allocated > breakpointAlert ? classes.barAlert
? classes.barAlert : classes.barWarning
: classes.barWarning : classes.barOk,
: classes.barOk, }}
}} variant="determinate"
variant="determinate" value={allocated}
value={allocated} />
/> <LinearProgress
<LinearProgress className={classes.underline}
className={classes.underline} variant="determinate"
variant="determinate" value={0}
value={0} />
/> </StyledDiv>
</StyledDiv> );
);
};
export default AllocationBar; export default AllocationBar;

40
striker-ui/components/Bars/ProgressBar.tsx
Unescape View File

@ -32,26 +32,24 @@ const ProgressBar = ({
progressPercentage, progressPercentage,
}: { }: {
progressPercentage: number; progressPercentage: number;
}): JSX.Element => { }): JSX.Element => (
return ( <StyledDiv>
<StyledDiv> <BorderLinearProgress
<BorderLinearProgress classes={{
classes={{ bar:
bar: progressPercentage < completed
progressPercentage < completed ? classes.barInProgress
? classes.barInProgress : classes.barOk,
: classes.barOk, }}
}} variant="determinate"
variant="determinate" value={progressPercentage}
value={progressPercentage} />
/> <LinearProgress
<LinearProgress className={classes.underline}
className={classes.underline} variant="determinate"
variant="determinate" value={0}
value={0} />
/> </StyledDiv>
</StyledDiv> );
);
};
export default ProgressBar; export default ProgressBar;

6
striker-ui/components/Decorator.tsx
Unescape View File

@ -40,8 +40,8 @@ const StyledDiv = styled('div')(() => ({
export type Colours = 'ok' | 'off' | 'error' | 'warning'; export type Colours = 'ok' | 'off' | 'error' | 'warning';
const Decorator = ({ colour }: { colour: Colours }): JSX.Element => { const Decorator = ({ colour }: { colour: Colours }): JSX.Element => (
return <StyledDiv className={classes[colour]} />; <StyledDiv className={classes[colour]} />
}; );
export default Decorator; export default Decorator;

20
striker-ui/components/Display/FullSize.tsx
Unescape View File

@ -219,17 +219,15 @@ const FullSize = ({
open={Boolean(anchorEl)} open={Boolean(anchorEl)}
onClose={() => setAnchorEl(null)} onClose={() => setAnchorEl(null)}
> >
{keyCombinations.map(({ keys, scans }) => { {keyCombinations.map(({ keys, scans }) => (
return ( <MenuItem
<MenuItem onClick={() => handleSendKeys(scans)}
onClick={() => handleSendKeys(scans)} className={classes.keysItem}
className={classes.keysItem} key={keys}
key={keys} >
> <Typography variant="subtitle1">{keys}</Typography>
<Typography variant="subtitle1">{keys}</Typography> </MenuItem>
</MenuItem> ))}
);
})}
</Menu> </Menu>
</Box> </Box>
</Box> </Box>

12
striker-ui/components/Domain.tsx
Unescape View File

@ -1,12 +1,10 @@
import { Panel } from './Panels'; import { Panel } from './Panels';
import { HeaderText } from './Text'; import { HeaderText } from './Text';
const Domain = (): JSX.Element => { const Domain = (): JSX.Element => (
return ( <Panel>
<Panel> <HeaderText text="Domain Settings" />
<HeaderText text="Domain Settings" /> </Panel>
</Panel> );
);
};
export default Domain; export default Domain;

86
striker-ui/components/FileSystem/FileSystemsHost.tsx
Unescape View File

@ -34,56 +34,54 @@ const SharedStorageHost = ({
host, host,
}: { }: {
host: AnvilFileSystemHost; host: AnvilFileSystemHost;
}): JSX.Element => { }): JSX.Element => (
return ( <StyledDiv>
<StyledDiv> <Box display="flex" width="100%" className={classes.fs}>
<Box display="flex" width="100%" className={classes.fs}> <Box flexGrow={1}>
<Box flexGrow={1}> <BodyText text={host.host_name || 'Not Available'} />
<BodyText text={host.host_name || 'Not Available'} />
</Box>
<Box className={classes.decoratorBox}>
<Decorator colour={host.is_mounted ? 'ok' : 'error'} />
</Box>
<Box>
<BodyText text={host.is_mounted ? 'Mounted' : 'Not Mounted'} />
</Box>
</Box> </Box>
{host.is_mounted && ( <Box className={classes.decoratorBox}>
<> <Decorator colour={host.is_mounted ? 'ok' : 'error'} />
<Box display="flex" width="100%" className={classes.fs}> </Box>
<Box flexGrow={1}> <Box>
<BodyText <BodyText text={host.is_mounted ? 'Mounted' : 'Not Mounted'} />
text={`Used: ${prettyBytes.default(host.total - host.free, { </Box>
binary: true, </Box>
})}`} {host.is_mounted && (
/> <>
</Box> <Box display="flex" width="100%" className={classes.fs}>
<Box> <Box flexGrow={1}>
<BodyText <BodyText
text={`Free: ${prettyBytes.default(host.free, { text={`Used: ${prettyBytes.default(host.total - host.free, {
binary: true, binary: true,
})}`} })}`}
/> />
</Box>
</Box>
<Box display="flex" width="100%" className={classes.bar}>
<Box flexGrow={1}>
<AllocationBar
allocated={((host.total - host.free) / host.total) * 100}
/>
</Box>
</Box> </Box>
<Box display="flex" justifyContent="center" width="100%"> <Box>
<BodyText <BodyText
text={`Total Storage: ${prettyBytes.default(host.total, { text={`Free: ${prettyBytes.default(host.free, {
binary: true, binary: true,
})}`} })}`}
/> />
</Box> </Box>
</> </Box>
)} <Box display="flex" width="100%" className={classes.bar}>
</StyledDiv> <Box flexGrow={1}>
); <AllocationBar
}; allocated={((host.total - host.free) / host.total) * 100}
/>
</Box>
</Box>
<Box display="flex" justifyContent="center" width="100%">
<BodyText
text={`Total Storage: ${prettyBytes.default(host.total, {
binary: true,
})}`}
/>
</Box>
</>
)}
</StyledDiv>
);
export default SharedStorageHost; export default SharedStorageHost;

12
striker-ui/components/Files/FileInfo.tsx
Unescape View File

@ -117,13 +117,11 @@ const FileInfo = (
}} }}
> >
{UPLOAD_FILE_TYPES_ARRAY.map( {UPLOAD_FILE_TYPES_ARRAY.map(
([fileTypeKey, [, fileTypeDisplayString]]) => { ([fileTypeKey, [, fileTypeDisplayString]]) => (
return ( <StyledMenuItem key={fileTypeKey} value={fileTypeKey}>
<StyledMenuItem key={fileTypeKey} value={fileTypeKey}> {fileTypeDisplayString}
{fileTypeDisplayString} </StyledMenuItem>
</StyledMenuItem> ),
);
},
)} )}
</StyledSelect> </StyledSelect>
</FormControl> </FormControl>

106
striker-ui/components/Files/FileList.tsx
Unescape View File

@ -10,56 +10,26 @@ type FileListProps = {
filesOverview: FileOverviewMetadata[]; filesOverview: FileOverviewMetadata[];
}; };
const FileList = ({ filesOverview }: FileListProps): JSX.Element => { const FileList = ({ filesOverview }: FileListProps): JSX.Element => (
return ( <List>
<List> {filesOverview.map(
{filesOverview.map( ({ fileChecksum, fileName, fileSizeInBytes, fileType, fileUUID }) => {
({ fileChecksum, fileName, fileSizeInBytes, fileType, fileUUID }) => { const fileSize: string = prettyBytes.default(fileSizeInBytes, {
const fileSize: string = prettyBytes.default(fileSizeInBytes, { binary: true,
binary: true, });
});
return ( return (
<ListItem key={fileUUID} sx={{ padding: '.6em 0' }}> <ListItem key={fileUUID} sx={{ padding: '.6em 0' }}>
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
flexDirection: { xs: 'column', md: 'row' }, flexDirection: { xs: 'column', md: 'row' },
width: '100%', width: '100%',
}} }}
> >
<Box sx={{ flexGrow: 1 }}> <Box sx={{ flexGrow: 1 }}>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
}}
>
<BodyText
sx={{
fontFamily: 'Source Code Pro',
fontWeight: 400,
}}
text={fileName}
/>
<Divider
flexItem
orientation="vertical"
sx={{
backgroundColor: DIVIDER,
marginLeft: '.5em',
marginRight: '.5em',
}}
/>
<BodyText
text={UPLOAD_FILE_TYPES.get(fileType)?.[1] ?? ''}
/>
</Box>
<BodyText text={fileSize} />
</Box>
<Box <Box
sx={{ sx={{
alignItems: 'center',
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
}} }}
@ -69,16 +39,42 @@ const FileList = ({ filesOverview }: FileListProps): JSX.Element => {
fontFamily: 'Source Code Pro', fontFamily: 'Source Code Pro',
fontWeight: 400, fontWeight: 400,
}} }}
text={fileChecksum} text={fileName}
/>
<Divider
flexItem
orientation="vertical"
sx={{
backgroundColor: DIVIDER,
marginLeft: '.5em',
marginRight: '.5em',
}}
/> />
<BodyText text={UPLOAD_FILE_TYPES.get(fileType)?.[1] ?? ''} />
</Box> </Box>
<BodyText text={fileSize} />
</Box> </Box>
</ListItem> <Box
); sx={{
}, alignItems: 'center',
)} display: 'flex',
</List> flexDirection: 'row',
); }}
}; >
<BodyText
sx={{
fontFamily: 'Source Code Pro',
fontWeight: 400,
}}
text={fileChecksum}
/>
</Box>
</Box>
</ListItem>
);
},
)}
</List>
);
export default FileList; export default FileList;

7
striker-ui/components/Hosts/AnvilHost.tsx
Unescape View File

@ -86,10 +86,10 @@ const AnvilHost = ({
<StyledBox> <StyledBox>
{hosts && {hosts &&
hosts.map( hosts.map(
(host): JSX.Element => { (host): JSX.Element =>
// Temporary fix: avoid crash when encounter undefined host entry by returning a blank element. // Temporary fix: avoid crash when encounter undefined host entry by returning a blank element.
// TODO: figure out why there are undefined host entries. // TODO: figure out why there are undefined host entries.
return host ? ( host ? (
<InnerPanel key={host.host_uuid}> <InnerPanel key={host.host_uuid}>
<InnerPanelHeader> <InnerPanelHeader>
<Box display="flex" width="100%" className={classes.header}> <Box display="flex" width="100%" className={classes.header}>
@ -169,8 +169,7 @@ const AnvilHost = ({
</InnerPanel> </InnerPanel>
) : ( ) : (
<></> <></>
); ),
},
)} )}
</StyledBox> </StyledBox>
); );

11
striker-ui/components/MessageBox.tsx
Unescape View File

@ -64,9 +64,8 @@ const StyledBox = styled(Box)({
}); });
const MessageBox = ({ type, text }: MessageBoxProps): JSX.Element => { const MessageBox = ({ type, text }: MessageBoxProps): JSX.Element => {
const buildMessageBoxClasses = (messageBoxType: MessageBoxType) => { const buildMessageBoxClasses = (messageBoxType: MessageBoxType) =>
return MESSAGE_BOX_CLASSES[messageBoxType]; MESSAGE_BOX_CLASSES[messageBoxType];
};
const buildMessageIcon = (messageBoxType: MessageBoxType) => { const buildMessageIcon = (messageBoxType: MessageBoxType) => {
let messageIcon; let messageIcon;
@ -85,9 +84,9 @@ const MessageBox = ({ type, text }: MessageBoxProps): JSX.Element => {
return messageIcon; return messageIcon;
}; };
const buildMessage = (message: string, messageBoxType: MessageBoxType) => { const buildMessage = (message: string, messageBoxType: MessageBoxType) => (
return <BodyText inverted={messageBoxType === 'info'} text={message} />; <BodyText inverted={messageBoxType === 'info'} text={message} />
}; );
return ( return (
<StyledBox className={buildMessageBoxClasses(type)}> <StyledBox className={buildMessageBoxClasses(type)}>

92
striker-ui/components/Network/Network.tsx
Unescape View File

@ -81,55 +81,53 @@ const Network = (): JSX.Element => {
{!isLoading ? ( {!isLoading ? (
<Box className={classes.container}> <Box className={classes.container}>
{data && {data &&
processed.bonds.map((bond: ProcessedBond) => { processed.bonds.map((bond: ProcessedBond) => (
return ( <>
<> <Box
<Box display="flex"
display="flex" flexDirection="row"
flexDirection="row" width="100%"
width="100%" className={classes.root}
className={classes.root} >
> <Box p={1} className={classes.noPaddingLeft}>
<Box p={1} className={classes.noPaddingLeft}> <Decorator colour={selectDecorator(bond.bond_state)} />
<Decorator colour={selectDecorator(bond.bond_state)} /> </Box>
</Box> <Box p={1} flexGrow={1} className={classes.noPaddingLeft}>
<Box p={1} flexGrow={1} className={classes.noPaddingLeft}> <BodyText text={bond.bond_name} />
<BodyText text={bond.bond_name} /> <BodyText text={`${bond.bond_speed}Mbps`} />
<BodyText text={`${bond.bond_speed}Mbps`} /> </Box>
</Box> <Box display="flex" style={{ paddingTop: '.5em' }}>
<Box display="flex" style={{ paddingTop: '.5em' }}> {bond.hosts.map(
{bond.hosts.map( (host, index: number): JSX.Element => (
(host, index: number): JSX.Element => ( <>
<> <Box
<Box p={1}
p={1} key={host.host_name}
key={host.host_name} style={{ paddingTop: 0, paddingBottom: 0 }}
style={{ paddingTop: 0, paddingBottom: 0 }} >
> <Box>
<Box> <BodyText
<BodyText text={host.host_name}
text={host.host_name} selected={false}
selected={false}
/>
<BodyText text={host.link.link_name} />
</Box>
</Box>
{index !== bond.hosts.length - 1 && (
<Divider
className={`${classes.divider} ${classes.verticalDivider}`}
orientation="vertical"
flexItem
/> />
)} <BodyText text={host.link.link_name} />
</> </Box>
), </Box>
)} {index !== bond.hosts.length - 1 && (
</Box> <Divider
className={`${classes.divider} ${classes.verticalDivider}`}
orientation="vertical"
flexItem
/>
)}
</>
),
)}
</Box> </Box>
<Divider className={classes.divider} /> </Box>
</> <Divider className={classes.divider} />
); </>
})} ))}
</Box> </Box>
) : ( ) : (
<Spinner /> <Spinner />

6
striker-ui/components/Panels/InnerPanel.tsx
Unescape View File

@ -18,8 +18,8 @@ type Props = {
children: ReactNode; children: ReactNode;
}; };
const InnerPanel = ({ children }: Props): JSX.Element => { const InnerPanel = ({ children }: Props): JSX.Element => (
return <StyledBox>{children}</StyledBox>; <StyledBox>{children}</StyledBox>
}; );
export default InnerPanel; export default InnerPanel;

14
striker-ui/components/Panels/InnerPanelHeader.tsx
Unescape View File

@ -32,13 +32,11 @@ type Props = {
children: ReactNode; children: ReactNode;
}; };
const InnerPanelHeader = ({ children }: Props): JSX.Element => { const InnerPanelHeader = ({ children }: Props): JSX.Element => (
return ( <StyledBox>
<StyledBox> <div className={classes.header} />
<div className={classes.header} /> {children}
{children} </StyledBox>
</StyledBox> );
);
};
export default InnerPanelHeader; export default InnerPanelHeader;

18
striker-ui/components/Panels/Panel.tsx
Unescape View File

@ -71,15 +71,13 @@ const styledScrollbars = (
/> />
); );
const Panel = ({ children }: PanelProps): JSX.Element => { const Panel = ({ children }: PanelProps): JSX.Element => (
return ( <StyledDiv>
<StyledDiv> {styledScrollbars}
{styledScrollbars} <div className={`${classes.square} ${classes.topSquare}`} />
<div className={`${classes.square} ${classes.topSquare}`} /> <div className={`${classes.square} ${classes.bottomSquare}`} />
<div className={`${classes.square} ${classes.bottomSquare}`} /> <div className={classes.paper}>{children}</div>
<div className={classes.paper}>{children}</div> </StyledDiv>
</StyledDiv> );
);
};
export default Panel; export default Panel;

116
striker-ui/components/Resource/ResourceVolumes.tsx
Unescape View File

@ -71,75 +71,59 @@ const ResourceVolumes = ({
resource, resource,
}: { }: {
resource: AnvilReplicatedStorage; resource: AnvilReplicatedStorage;
}): JSX.Element => { }): JSX.Element => (
return ( <StyledBox>
<StyledBox> {resource &&
{resource && resource.volumes.map((volume) => (
resource.volumes.map((volume) => { <InnerPanel key={volume.drbd_device_minor}>
return ( <InnerPanelHeader>
<InnerPanel key={volume.drbd_device_minor}> <Box display="flex" width="100%" className={classes.header}>
<InnerPanelHeader> <Box flexGrow={1}>
<Box display="flex" width="100%" className={classes.header}> <BodyText text={`Volume: ${volume.number}`} />
<Box flexGrow={1}> </Box>
<BodyText text={`Volume: ${volume.number}`} /> <Box>
<BodyText
text={`Size: ${prettyBytes.default(volume.size, {
binary: true,
})}`}
/>
</Box>
</Box>
</InnerPanelHeader>
{volume.connections.map(
(connection, index): JSX.Element => (
<>
<Box
key={connection.fencing}
display="flex"
width="100%"
className={classes.connection}
>
<Box className={classes.decoratorBox}>
<Decorator
colour={selectDecorator(connection.connection_state)}
/>
</Box> </Box>
<Box> <Box>
<BodyText <Box display="flex" width="100%">
text={`Size: ${prettyBytes.default(volume.size, { <BodyText text={connection.targets[0].target_name} />
binary: true, <InsertLinkIcon style={{ color: DIVIDER }} />
})}`} <BodyText text={connection.targets[1].target_name} />
/> </Box>
<Box display="flex" justifyContent="center" width="100%">
<BodyText text={connection.connection_state} />
</Box>
</Box> </Box>
</Box> </Box>
</InnerPanelHeader> {volume.connections.length - 1 !== index ? (
{volume.connections.map( <Divider className={classes.divider} />
(connection, index): JSX.Element => { ) : null}
return ( </>
<> ),
<Box )}
key={connection.fencing} </InnerPanel>
display="flex" ))}
width="100%" </StyledBox>
className={classes.connection} );
>
<Box className={classes.decoratorBox}>
<Decorator
colour={selectDecorator(
connection.connection_state,
)}
/>
</Box>
<Box>
<Box display="flex" width="100%">
<BodyText
text={connection.targets[0].target_name}
/>
<InsertLinkIcon style={{ color: DIVIDER }} />
<BodyText
text={connection.targets[1].target_name}
/>
</Box>
<Box
display="flex"
justifyContent="center"
width="100%"
>
<BodyText text={connection.connection_state} />
</Box>
</Box>
</Box>
{volume.connections.length - 1 !== index ? (
<Divider className={classes.divider} />
) : null}
</>
);
},
)}
</InnerPanel>
);
})}
</StyledBox>
);
};
export default ResourceVolumes; export default ResourceVolumes;

14
striker-ui/components/Resource/index.tsx
Unescape View File

@ -6,13 +6,11 @@ const Resource = ({
resource, resource,
}: { }: {
resource: AnvilReplicatedStorage; resource: AnvilReplicatedStorage;
}): JSX.Element => { }): JSX.Element => (
return ( <Panel>
<Panel> <HeaderText text={`Resource: ${resource.resource_name}`} />
<HeaderText text={`Resource: ${resource.resource_name}`} /> <ResourceVolumes resource={resource} />
<ResourceVolumes resource={resource} /> </Panel>
</Panel> );
);
};
export default Resource; export default Resource;

168
striker-ui/components/Servers.tsx
Unescape View File

@ -261,21 +261,19 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
open={Boolean(anchorEl)} open={Boolean(anchorEl)}
onClose={() => setAnchorEl(null)} onClose={() => setAnchorEl(null)}
> >
{buttonLabels.current.map((label: ButtonLabels) => { {buttonLabels.current.map((label: ButtonLabels) => (
return ( <ServerActionButtonMenuItem
<ServerActionButtonMenuItem onClick={() => handlePower(label)}
onClick={() => handlePower(label)} key={label}
key={label} >
<ServerActionButtonMenuItemLabel
className={classes[label]}
variant="subtitle1"
> >
<ServerActionButtonMenuItemLabel {label.replace(/^[a-z]/, (c) => c.toUpperCase())}
className={classes[label]} </ServerActionButtonMenuItemLabel>
variant="subtitle1" </ServerActionButtonMenuItem>
> ))}
{label.replace(/^[a-z]/, (c) => c.toUpperCase())}
</ServerActionButtonMenuItemLabel>
</ServerActionButtonMenuItem>
);
})}
</Menu> </Menu>
</Box> </Box>
</Box> </Box>
@ -311,83 +309,79 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
{!isLoading ? ( {!isLoading ? (
<Box className={classes.root}> <Box className={classes.root}>
<List component="nav"> <List component="nav">
{data?.servers.map((server: AnvilServer) => { {data?.servers.map((server: AnvilServer) => (
return ( <>
<> <ListItem
<ListItem button
button className={classes.button}
className={classes.button} key={server.server_uuid}
key={server.server_uuid} component={showCheckbox ? 'div' : 'a'}
component={showCheckbox ? 'div' : '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)}
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((s) => s === server.server_uuid) !==
selected.find( undefined
(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}> )}
{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>
) : ( ) : (

73
striker-ui/components/SharedStorage/SharedStorageHost.tsx
Unescape View File

@ -33,51 +33,46 @@ const SharedStorageHost = ({
group, group,
}: { }: {
group: AnvilSharedStorageGroup; group: AnvilSharedStorageGroup;
}): JSX.Element => { }): JSX.Element => (
return ( <StyledDiv>
<StyledDiv> <Box display="flex" width="100%" className={classes.fs}>
<Box display="flex" width="100%" className={classes.fs}> <Box flexGrow={1}>
<Box flexGrow={1}>
<BodyText
text={`Used: ${prettyBytes.default(
group.storage_group_total - group.storage_group_free,
{
binary: true,
},
)}`}
/>
</Box>
<Box>
<BodyText
text={`Free: ${prettyBytes.default(group.storage_group_free, {
binary: true,
})}`}
/>
</Box>
</Box>
<Box display="flex" width="100%" className={classes.bar}>
<Box flexGrow={1}>
<AllocationBar
allocated={
((group.storage_group_total - group.storage_group_free) /
group.storage_group_total) *
100
}
/>
</Box>
</Box>
<Box display="flex" justifyContent="center" width="100%">
<BodyText <BodyText
text={`Total Storage: ${prettyBytes.default( text={`Used: ${prettyBytes.default(
group.storage_group_total, group.storage_group_total - group.storage_group_free,
{ {
binary: true, binary: true,
}, },
)}`} )}`}
/> />
</Box> </Box>
</StyledDiv> <Box>
); <BodyText
}; text={`Free: ${prettyBytes.default(group.storage_group_free, {
binary: true,
})}`}
/>
</Box>
</Box>
<Box display="flex" width="100%" className={classes.bar}>
<Box flexGrow={1}>
<AllocationBar
allocated={
((group.storage_group_total - group.storage_group_free) /
group.storage_group_total) *
100
}
/>
</Box>
</Box>
<Box display="flex" justifyContent="center" width="100%">
<BodyText
text={`Total Storage: ${prettyBytes.default(group.storage_group_total, {
binary: true,
})}`}
/>
</Box>
</StyledDiv>
);
export default SharedStorageHost; export default SharedStorageHost;

12
striker-ui/components/Spinner.tsx
Unescape View File

@ -19,12 +19,10 @@ const StyledDiv = styled('div')(() => ({
}, },
})); }));
const Spinner = (): JSX.Element => { const Spinner = (): JSX.Element => (
return ( <StyledDiv>
<StyledDiv> <CircularProgress variant="indeterminate" className={classes.spinner} />
<CircularProgress variant="indeterminate" className={classes.spinner} /> </StyledDiv>
</StyledDiv> );
);
};
export default Spinner; export default Spinner;

6
striker-ui/components/Text/HeaderText.tsx
Unescape View File

@ -6,8 +6,8 @@ const WhiteTypography = styled(Typography)({
color: TEXT, color: TEXT,
}); });
const HeaderText = ({ text }: { text: string }): JSX.Element => { const HeaderText = ({ text }: { text: string }): JSX.Element => (
return <WhiteTypography variant="h4">{text}</WhiteTypography>; <WhiteTypography variant="h4">{text}</WhiteTypography>
}; );
export default HeaderText; export default HeaderText;

6
striker-ui/lib/consts/UPLOAD_FILE_TYPES.ts
Unescape View File

@ -5,7 +5,5 @@ export const UPLOAD_FILE_TYPES_ARRAY: ReadonlyArray<
['other', ['text/plain', 'Other file type']], ['other', ['text/plain', 'Other file type']],
['script', ['text/plain', 'Script (program)']], ['script', ['text/plain', 'Script (program)']],
]; ];
export const UPLOAD_FILE_TYPES: ReadonlyMap< export const UPLOAD_FILE_TYPES: ReadonlyMap<FileType, [string, string]> =
FileType, new Map(UPLOAD_FILE_TYPES_ARRAY);
[string, string]
> = new Map(UPLOAD_FILE_TYPES_ARRAY);

4
striker-ui/lib/create_emotion_cache/createEmotionCache.ts vendored
Unescape View File

@ -1,8 +1,6 @@
import { EmotionCache } from '@emotion/react'; import { EmotionCache } from '@emotion/react';
import createCache from '@emotion/cache'; import createCache from '@emotion/cache';
const createEmotionCache = (): EmotionCache => { const createEmotionCache = (): EmotionCache => createCache({ key: 'css' });
return createCache({ key: 'css' });
};
export default createEmotionCache; export default createEmotionCache;

5
striker-ui/lib/fetchers/fetchJSON.ts
Unescape View File

@ -1,5 +1,4 @@
const fetchJSON = <T>(...args: [RequestInfo, RequestInit?]): Promise<T> => { const fetchJSON = <T>(...args: [RequestInfo, RequestInit?]): Promise<T> =>
return fetch(...args).then((response: Response) => response.json()); fetch(...args).then((response: Response) => response.json());
};
export default fetchJSON; export default fetchJSON;

5
striker-ui/lib/fetchers/putFetch.ts
Unescape View File

@ -1,12 +1,11 @@
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
const putFetch = <T>(uri: string, data: T): Promise<any> => { const putFetch = <T>(uri: string, data: T): Promise<any> =>
return fetch(uri, { fetch(uri, {
method: 'PUT', method: 'PUT',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
body: JSON.stringify(data), body: JSON.stringify(data),
}); });
};
export default putFetch; export default putFetch;

7
striker-ui/lib/sanitizers/hostsSanitizer.ts
Unescape View File

@ -1,7 +1,4 @@
const hostsSanitizer = ( const hostsSanitizer = (data: Array<AnvilStatusHost>): Array<AnvilStatusHost> =>
data: Array<AnvilStatusHost>, data?.filter((host) => host.host_uuid);
): Array<AnvilStatusHost> => {
return data?.filter((host) => host.host_uuid);
};
export default hostsSanitizer; export default hostsSanitizer;

22
striker-ui/pages/_app.tsx
Unescape View File

@ -17,17 +17,15 @@ const App = ({
Component, Component,
emotionCache = clientSideEmotionCache, emotionCache = clientSideEmotionCache,
pageProps, pageProps,
}: MyAppProps): JSX.Element => { }: MyAppProps): JSX.Element => (
return ( <CacheProvider value={emotionCache}>
<CacheProvider value={emotionCache}> <ThemeProvider theme={theme}>
<ThemeProvider theme={theme}> <Component
<Component // eslint-disable-next-line react/jsx-props-no-spreading
// eslint-disable-next-line react/jsx-props-no-spreading {...pageProps}
{...pageProps} />
/> </ThemeProvider>
</ThemeProvider> </CacheProvider>
</CacheProvider> );
);
};
export default App; export default App;

20
striker-ui/pages/file-manager/index.tsx
Unescape View File

@ -3,16 +3,14 @@ import Head from 'next/head';
import Files from '../../components/Files'; import Files from '../../components/Files';
import Header from '../../components/Header'; import Header from '../../components/Header';
const FileManager = (): JSX.Element => { const FileManager = (): JSX.Element => (
return ( <>
<> <Head>
<Head> <title>File Manager</title>
<title>File Manager</title> </Head>
</Head> <Header />
<Header /> <Files />
<Files /> </>
</> );
);
};
export default FileManager; export default FileManager;

Write Preview
Loading…
Cancel
Save