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

feat: add an allocation bar component

Browse Source
This commit is contained in:
Josue 2021-03-10 12:06:52 -05:00 committed by Tsu-ba-me
parent 5e066070e9
commit a3c93bf393
3 changed files with 45 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
striker-ui/components/AllocationBar.tsx Normal file
View File

@ -0,0 +1,28 @@
import { withStyles } from '@material-ui/core/styles';
import { LinearProgress } from '@material-ui/core';
import { PURPLE_OFF, RED_ON } from '../lib/consts/DEFAULT_THEME';
const BorderLinearProgress = withStyles({
root: {
height: 10,
borderRadius: 5,
},
colorPrimary: {
backgroundColor: PURPLE_OFF,
},
bar: {
borderRadius: 5,
backgroundColor: RED_ON,
},
})(LinearProgress);
const AllocationBar = ({ allocated }: { allocated: number }): JSX.Element => {
return (
<>
<BorderLinearProgress variant="determinate" value={allocated} />
<LinearProgress variant="determinate" value={0} />
</>
);
};
export default AllocationBar;

28
striker-ui/components/CPU.tsx
View File

@ -1,22 +1,7 @@
import { withStyles } from '@material-ui/core/styles'; import { Grid } from '@material-ui/core';
import { Grid, LinearProgress } from '@material-ui/core';
import Panel from './Panel'; import Panel from './Panel';
import AllocationBar from './AllocationBar';
import { HeaderText, BodyText } from './Text'; import { HeaderText, BodyText } from './Text';
import { PURPLE_OFF, RED_ON } from '../lib/consts/DEFAULT_THEME';
const BorderLinearProgress = withStyles({
root: {
height: 10,
borderRadius: 5,
},
colorPrimary: {
backgroundColor: PURPLE_OFF,
},
bar: {
borderRadius: 5,
backgroundColor: RED_ON,
},
})(LinearProgress);
const CPU = (): JSX.Element => { const CPU = (): JSX.Element => {
return ( return (
@ -32,8 +17,13 @@ const CPU = (): JSX.Element => {
<BodyText text="Free: 6" /> <BodyText text="Free: 6" />
</Grid> </Grid>
<Grid item xs={10}> <Grid item xs={10}>
<BorderLinearProgress variant="determinate" value={50} /> <AllocationBar allocated={50} />
<LinearProgress variant="determinate" value={0} /> </Grid>
<Grid item xs={5}>
<BodyText text="Total Cores: 9" />
</Grid>
<Grid item xs={12}>
<BodyText text="Threads: 16" />
</Grid> </Grid>
</Grid> </Grid>
</Panel> </Panel>

29
striker-ui/components/Memory.tsx
View File

@ -1,22 +1,7 @@
import { withStyles } from '@material-ui/core/styles'; import { Grid } from '@material-ui/core';
import { Grid, LinearProgress } from '@material-ui/core';
import Panel from './Panel'; import Panel from './Panel';
import AllocationBar from './AllocationBar';
import { HeaderText, BodyText } from './Text'; import { HeaderText, BodyText } from './Text';
import { PURPLE_OFF, RED_ON } from '../lib/consts/DEFAULT_THEME';
const BorderLinearProgress = withStyles({
root: {
height: 10,
borderRadius: 5,
},
colorPrimary: {
backgroundColor: PURPLE_OFF,
},
bar: {
borderRadius: 5,
backgroundColor: RED_ON,
},
})(LinearProgress);
const Memory = (): JSX.Element => { const Memory = (): JSX.Element => {
return ( return (
@ -26,14 +11,16 @@ const Memory = (): JSX.Element => {
<HeaderText text="Memory" /> <HeaderText text="Memory" />
</Grid> </Grid>
<Grid item xs={3}> <Grid item xs={3}>
<BodyText text="Allocated: 14GB" /> <BodyText text="Allocated: 14GiB" />
</Grid> </Grid>
<Grid item xs={3}> <Grid item xs={3}>
<BodyText text="Free: 50GB" /> <BodyText text="Free: 50GiB" />
</Grid> </Grid>
<Grid item xs={10}> <Grid item xs={10}>
<BorderLinearProgress variant="determinate" value={50} /> <AllocationBar allocated={30} />
<LinearProgress variant="determinate" value={0} /> </Grid>
<Grid item xs={6}>
<BodyText text="Total Memory: 64GiB" />
</Grid> </Grid>
</Grid> </Grid>
</Panel> </Panel>