|
|
@ -1,20 +1,30 @@ |
|
|
|
import { Box } from '@material-ui/core'; |
|
|
|
import { Box } from '@mui/material'; |
|
|
|
import { makeStyles } from '@material-ui/core/styles'; |
|
|
|
import { styled } from '@mui/material/styles'; |
|
|
|
import * as prettyBytes from 'pretty-bytes'; |
|
|
|
import * as prettyBytes from 'pretty-bytes'; |
|
|
|
import { AllocationBar } from '../Bars'; |
|
|
|
import { AllocationBar } from '../Bars'; |
|
|
|
import { BodyText } from '../Text'; |
|
|
|
import { BodyText } from '../Text'; |
|
|
|
|
|
|
|
|
|
|
|
const useStyles = makeStyles(() => ({ |
|
|
|
const PREFIX = 'SharedStorageHost'; |
|
|
|
fs: { |
|
|
|
|
|
|
|
|
|
|
|
const classes = { |
|
|
|
|
|
|
|
fs: `${PREFIX}-fs`, |
|
|
|
|
|
|
|
bar: `${PREFIX}-bar`, |
|
|
|
|
|
|
|
decoratorBox: `${PREFIX}-decoratorBox`, |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const StyledDiv = styled('div')(() => ({ |
|
|
|
|
|
|
|
[`& .${classes.fs}`]: { |
|
|
|
paddingLeft: '.7em', |
|
|
|
paddingLeft: '.7em', |
|
|
|
paddingRight: '.7em', |
|
|
|
paddingRight: '.7em', |
|
|
|
paddingTop: '1.2em', |
|
|
|
paddingTop: '1.2em', |
|
|
|
}, |
|
|
|
}, |
|
|
|
bar: { |
|
|
|
|
|
|
|
|
|
|
|
[`& .${classes.bar}`]: { |
|
|
|
paddingLeft: '.7em', |
|
|
|
paddingLeft: '.7em', |
|
|
|
paddingRight: '.7em', |
|
|
|
paddingRight: '.7em', |
|
|
|
}, |
|
|
|
}, |
|
|
|
decoratorBox: { |
|
|
|
|
|
|
|
|
|
|
|
[`& .${classes.decoratorBox}`]: { |
|
|
|
paddingRight: '.3em', |
|
|
|
paddingRight: '.3em', |
|
|
|
}, |
|
|
|
}, |
|
|
|
})); |
|
|
|
})); |
|
|
@ -24,9 +34,8 @@ const SharedStorageHost = ({ |
|
|
|
}: { |
|
|
|
}: { |
|
|
|
group: AnvilSharedStorageGroup; |
|
|
|
group: AnvilSharedStorageGroup; |
|
|
|
}): JSX.Element => { |
|
|
|
}): JSX.Element => { |
|
|
|
const classes = useStyles(); |
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<StyledDiv> |
|
|
|
<Box display="flex" width="100%" className={classes.fs}> |
|
|
|
<Box display="flex" width="100%" className={classes.fs}> |
|
|
|
<Box flexGrow={1}> |
|
|
|
<Box flexGrow={1}> |
|
|
|
<BodyText |
|
|
|
<BodyText |
|
|
@ -67,7 +76,7 @@ const SharedStorageHost = ({ |
|
|
|
)}`}
|
|
|
|
)}`}
|
|
|
|
/> |
|
|
|
/> |
|
|
|
</Box> |
|
|
|
</Box> |
|
|
|
</> |
|
|
|
</StyledDiv> |
|
|
|
); |
|
|
|
); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|