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

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

@ -1,15 +1,11 @@
import { BodyText } from '../Text';
import anvilState from '../../lib/consts/ANVILS';
const Anvil = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
return (
<>
<BodyText text={anvil.anvil_name} />
<BodyText
text={anvilState.get(anvil.anvil_state) || 'State unavailable'}
/>
</>
);
};
const Anvil = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => (
<>
<BodyText text={anvil.anvil_name} />
<BodyText text={anvilState.get(anvil.anvil_state) || 'State unavailable'} />
</>
);
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}
aria-label="mailbox folders"
>
{sortAnvils(list).map((anvil) => {
return (
<>
<Divider className={classes.divider} />
<ListItem
button
className={classes.button}
key={anvil.anvil_uuid}
onClick={() => setAnvilUuid(anvil.anvil_uuid)}
>
<Box display="flex" flexDirection="row" width="100%">
<Box p={1}>
<Decorator colour={selectDecorator(anvil.anvil_state)} />
</Box>
<Box p={1} flexGrow={1} className={classes.anvil}>
<Anvil anvil={anvil} />
</Box>
{sortAnvils(list).map((anvil) => (
<>
<Divider className={classes.divider} />
<ListItem
button
className={classes.button}
key={anvil.anvil_uuid}
onClick={() => setAnvilUuid(anvil.anvil_uuid)}
>
<Box display="flex" flexDirection="row" width="100%">
<Box p={1}>
<Decorator colour={selectDecorator(anvil.anvil_state)} />
</Box>
</ListItem>
</>
);
})}
<Box p={1} flexGrow={1} className={classes.anvil}>
<Anvil anvil={anvil} />
</Box>
</Box>
</ListItem>
</>
))}
</List>
</StyledDiv>
);

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

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

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

@ -32,26 +32,24 @@ const ProgressBar = ({
progressPercentage,
}: {
progressPercentage: number;
}): JSX.Element => {
return (
<StyledDiv>
<BorderLinearProgress
classes={{
bar:
progressPercentage < completed
? classes.barInProgress
: classes.barOk,
}}
variant="determinate"
value={progressPercentage}
/>
<LinearProgress
className={classes.underline}
variant="determinate"
value={0}
/>
</StyledDiv>
);
};
}): JSX.Element => (
<StyledDiv>
<BorderLinearProgress
classes={{
bar:
progressPercentage < completed
? classes.barInProgress
: classes.barOk,
}}
variant="determinate"
value={progressPercentage}
/>
<LinearProgress
className={classes.underline}
variant="determinate"
value={0}
/>
</StyledDiv>
);
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';
const Decorator = ({ colour }: { colour: Colours }): JSX.Element => {
return <StyledDiv className={classes[colour]} />;
};
const Decorator = ({ colour }: { colour: Colours }): JSX.Element => (
<StyledDiv className={classes[colour]} />
);
export default Decorator;

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

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

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

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

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

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

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

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

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

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

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

@ -86,10 +86,10 @@ const AnvilHost = ({
<StyledBox>
{hosts &&
hosts.map(
(host): JSX.Element => {
(host): JSX.Element =>
// Temporary fix: avoid crash when encounter undefined host entry by returning a blank element.
// TODO: figure out why there are undefined host entries.
return host ? (
host ? (
<InnerPanel key={host.host_uuid}>
<InnerPanelHeader>
<Box display="flex" width="100%" className={classes.header}>
@ -169,8 +169,7 @@ const AnvilHost = ({
</InnerPanel>
) : (
<></>
);
},
),
)}
</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 buildMessageBoxClasses = (messageBoxType: MessageBoxType) => {
return MESSAGE_BOX_CLASSES[messageBoxType];
};
const buildMessageBoxClasses = (messageBoxType: MessageBoxType) =>
MESSAGE_BOX_CLASSES[messageBoxType];
const buildMessageIcon = (messageBoxType: MessageBoxType) => {
let messageIcon;
@ -85,9 +84,9 @@ const MessageBox = ({ type, text }: MessageBoxProps): JSX.Element => {
return messageIcon;
};
const buildMessage = (message: string, messageBoxType: MessageBoxType) => {
return <BodyText inverted={messageBoxType === 'info'} text={message} />;
};
const buildMessage = (message: string, messageBoxType: MessageBoxType) => (
<BodyText inverted={messageBoxType === 'info'} text={message} />
);
return (
<StyledBox className={buildMessageBoxClasses(type)}>

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

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

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

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

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

@ -32,13 +32,11 @@ type Props = {
children: ReactNode;
};
const InnerPanelHeader = ({ children }: Props): JSX.Element => {
return (
<StyledBox>
<div className={classes.header} />
{children}
</StyledBox>
);
};
const InnerPanelHeader = ({ children }: Props): JSX.Element => (
<StyledBox>
<div className={classes.header} />
{children}
</StyledBox>
);
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 => {
return (
<StyledDiv>
{styledScrollbars}
<div className={`${classes.square} ${classes.topSquare}`} />
<div className={`${classes.square} ${classes.bottomSquare}`} />
<div className={classes.paper}>{children}</div>
</StyledDiv>
);
};
const Panel = ({ children }: PanelProps): JSX.Element => (
<StyledDiv>
{styledScrollbars}
<div className={`${classes.square} ${classes.topSquare}`} />
<div className={`${classes.square} ${classes.bottomSquare}`} />
<div className={classes.paper}>{children}</div>
</StyledDiv>
);
export default Panel;

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

@ -71,75 +71,59 @@ const ResourceVolumes = ({
resource,
}: {
resource: AnvilReplicatedStorage;
}): JSX.Element => {
return (
<StyledBox>
{resource &&
resource.volumes.map((volume) => {
return (
<InnerPanel key={volume.drbd_device_minor}>
<InnerPanelHeader>
<Box display="flex" width="100%" className={classes.header}>
<Box flexGrow={1}>
<BodyText text={`Volume: ${volume.number}`} />
}): JSX.Element => (
<StyledBox>
{resource &&
resource.volumes.map((volume) => (
<InnerPanel key={volume.drbd_device_minor}>
<InnerPanelHeader>
<Box display="flex" width="100%" className={classes.header}>
<Box flexGrow={1}>
<BodyText text={`Volume: ${volume.number}`} />
</Box>
<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>
<BodyText
text={`Size: ${prettyBytes.default(volume.size, {
binary: true,
})}`}
/>
<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>
</InnerPanelHeader>
{volume.connections.map(
(connection, index): JSX.Element => {
return (
<>
<Box
key={connection.fencing}
display="flex"
width="100%"
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>
);
};
{volume.connections.length - 1 !== index ? (
<Divider className={classes.divider} />
) : null}
</>
),
)}
</InnerPanel>
))}
</StyledBox>
);
export default ResourceVolumes;

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

@ -6,13 +6,11 @@ const Resource = ({
resource,
}: {
resource: AnvilReplicatedStorage;
}): JSX.Element => {
return (
<Panel>
<HeaderText text={`Resource: ${resource.resource_name}`} />
<ResourceVolumes resource={resource} />
</Panel>
);
};
}): JSX.Element => (
<Panel>
<HeaderText text={`Resource: ${resource.resource_name}`} />
<ResourceVolumes resource={resource} />
</Panel>
);
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)}
onClose={() => setAnchorEl(null)}
>
{buttonLabels.current.map((label: ButtonLabels) => {
return (
<ServerActionButtonMenuItem
onClick={() => handlePower(label)}
key={label}
{buttonLabels.current.map((label: ButtonLabels) => (
<ServerActionButtonMenuItem
onClick={() => handlePower(label)}
key={label}
>
<ServerActionButtonMenuItemLabel
className={classes[label]}
variant="subtitle1"
>
<ServerActionButtonMenuItemLabel
className={classes[label]}
variant="subtitle1"
>
{label.replace(/^[a-z]/, (c) => c.toUpperCase())}
</ServerActionButtonMenuItemLabel>
</ServerActionButtonMenuItem>
);
})}
{label.replace(/^[a-z]/, (c) => c.toUpperCase())}
</ServerActionButtonMenuItemLabel>
</ServerActionButtonMenuItem>
))}
</Menu>
</Box>
</Box>
@ -311,83 +309,79 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
{!isLoading ? (
<Box className={classes.root}>
<List component="nav">
{data?.servers.map((server: AnvilServer) => {
return (
<>
<ListItem
button
className={classes.button}
key={server.server_uuid}
component={showCheckbox ? 'div' : 'a'}
href={`/server?uuid=${server.server_uuid}&server_name=${server.server_name}`}
onClick={() => handleChange(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
}
/>
</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'
{data?.servers.map((server: AnvilServer) => (
<>
<ListItem
button
className={classes.button}
key={server.server_uuid}
component={showCheckbox ? 'div' : 'a'}
href={`/server?uuid=${server.server_uuid}&server_name=${server.server_name}`}
onClick={() => handleChange(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
}
/>
</Box>
<Box display="flex" className={classes.hostsBox}>
{server.server_state !== 'shut off' &&
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 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 display="flex" className={classes.hostsBox}>
{server.server_state !== 'shut off' &&
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>
</ListItem>
<Divider className={classes.divider} />
</>
);
})}
</Box>
</ListItem>
<Divider className={classes.divider} />
</>
))}
</List>
</Box>
) : (

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

@ -33,51 +33,46 @@ const SharedStorageHost = ({
group,
}: {
group: AnvilSharedStorageGroup;
}): JSX.Element => {
return (
<StyledDiv>
<Box display="flex" width="100%" className={classes.fs}>
<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%">
}): JSX.Element => (
<StyledDiv>
<Box display="flex" width="100%" className={classes.fs}>
<Box flexGrow={1}>
<BodyText
text={`Total Storage: ${prettyBytes.default(
group.storage_group_total,
text={`Used: ${prettyBytes.default(
group.storage_group_total - group.storage_group_free,
{
binary: true,
},
)}`}
/>
</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;

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

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

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

@ -6,8 +6,8 @@ const WhiteTypography = styled(Typography)({
color: TEXT,
});
const HeaderText = ({ text }: { text: string }): JSX.Element => {
return <WhiteTypography variant="h4">{text}</WhiteTypography>;
};
const HeaderText = ({ text }: { text: string }): JSX.Element => (
<WhiteTypography variant="h4">{text}</WhiteTypography>
);
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']],
['script', ['text/plain', 'Script (program)']],
];
export const UPLOAD_FILE_TYPES: ReadonlyMap<
FileType,
[string, string]
> = new Map(UPLOAD_FILE_TYPES_ARRAY);
export const UPLOAD_FILE_TYPES: ReadonlyMap<FileType, [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 createCache from '@emotion/cache';
const createEmotionCache = (): EmotionCache => {
return createCache({ key: 'css' });
};
const createEmotionCache = (): EmotionCache => createCache({ key: 'css' });
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> => {
return fetch(...args).then((response: Response) => response.json());
};
const fetchJSON = <T>(...args: [RequestInfo, RequestInit?]): Promise<T> =>
fetch(...args).then((response: Response) => response.json());
export default fetchJSON;

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

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

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

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

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

@ -17,17 +17,15 @@ const App = ({
Component,
emotionCache = clientSideEmotionCache,
pageProps,
}: MyAppProps): JSX.Element => {
return (
<CacheProvider value={emotionCache}>
<ThemeProvider theme={theme}>
<Component
// eslint-disable-next-line react/jsx-props-no-spreading
{...pageProps}
/>
</ThemeProvider>
</CacheProvider>
);
};
}: MyAppProps): JSX.Element => (
<CacheProvider value={emotionCache}>
<ThemeProvider theme={theme}>
<Component
// eslint-disable-next-line react/jsx-props-no-spreading
{...pageProps}
/>
</ThemeProvider>
</CacheProvider>
);
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 Header from '../../components/Header';
const FileManager = (): JSX.Element => {
return (
<>
<Head>
<title>File Manager</title>
</Head>
<Header />
<Files />
</>
);
};
const FileManager = (): JSX.Element => (
<>
<Head>
<title>File Manager</title>
</Head>
<Header />
<Files />
</>
);
export default FileManager;

Write Preview
Loading…
Cancel
Save