You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
1.6 KiB
72 lines
1.6 KiB
3 years ago
|
import * as prettyBytes from 'pretty-bytes';
|
||
|
import { makeStyles } from '@material-ui/core/styles';
|
||
|
import { Box } from '@material-ui/core';
|
||
|
import { InnerPanel, PanelHeader } from '../Panels';
|
||
|
import { BodyText } from '../Text';
|
||
|
|
||
|
const useStyles = makeStyles((theme) => ({
|
||
|
root: {
|
||
|
overflow: 'auto',
|
||
|
height: '100%',
|
||
|
paddingLeft: '.3em',
|
||
|
[theme.breakpoints.down('md')]: {
|
||
|
overflow: 'hidden',
|
||
|
},
|
||
|
},
|
||
|
state: {
|
||
|
paddingLeft: '.7em',
|
||
|
paddingRight: '.7em',
|
||
|
paddingTop: '1em',
|
||
|
},
|
||
|
bar: {
|
||
|
paddingLeft: '.7em',
|
||
|
paddingRight: '.7em',
|
||
|
},
|
||
|
header: {
|
||
|
paddingTop: '.3em',
|
||
|
paddingRight: '.7em',
|
||
|
},
|
||
|
label: {
|
||
|
paddingTop: '.3em',
|
||
|
},
|
||
|
decoratorBox: {
|
||
|
paddingRight: '.3em',
|
||
|
},
|
||
|
}));
|
||
|
|
||
|
const ResourceVolumes = ({
|
||
|
resource,
|
||
|
}: {
|
||
|
resource: AnvilReplicatedStorage;
|
||
|
}): JSX.Element => {
|
||
|
const classes = useStyles();
|
||
|
|
||
|
return (
|
||
|
<Box className={classes.root}>
|
||
|
{resource &&
|
||
|
resource.volumes.map((volume) => {
|
||
|
return (
|
||
|
<InnerPanel key={volume.drbd_device_minor}>
|
||
|
<PanelHeader>
|
||
|
<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>
|
||
|
</PanelHeader>
|
||
|
</InnerPanel>
|
||
|
);
|
||
|
})}
|
||
|
</Box>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default ResourceVolumes;
|