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, LinearProgress } from '@material-ui/core';
import { Grid } from '@material-ui/core';
import Panel from './Panel';
import AllocationBar from './AllocationBar';
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 => {
return (
@ -32,8 +17,13 @@ const CPU = (): JSX.Element => {
<BodyText text="Free: 6" />
</Grid>
<Grid item xs={10}>
<BorderLinearProgress variant="determinate" value={50} />
<LinearProgress variant="determinate" value={0} />
<AllocationBar allocated={50} />
</Grid>
<Grid item xs={5}>
<BodyText text="Total Cores: 9" />
</Grid>
<Grid item xs={12}>
<BodyText text="Threads: 16" />
</Grid>
</Grid>
</Panel>

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

@ -1,22 +1,7 @@
import { withStyles } from '@material-ui/core/styles';
import { Grid, LinearProgress } from '@material-ui/core';
import { Grid } from '@material-ui/core';
import Panel from './Panel';
import AllocationBar from './AllocationBar';
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 => {
return (
@ -26,14 +11,16 @@ const Memory = (): JSX.Element => {
<HeaderText text="Memory" />
</Grid>
<Grid item xs={3}>
<BodyText text="Allocated: 14GB" />
<BodyText text="Allocated: 14GiB" />
</Grid>
<Grid item xs={3}>
<BodyText text="Free: 50GB" />
<BodyText text="Free: 50GiB" />
</Grid>
<Grid item xs={10}>
<BorderLinearProgress variant="determinate" value={50} />
<LinearProgress variant="determinate" value={0} />
<AllocationBar allocated={30} />
</Grid>
<Grid item xs={6}>
<BodyText text="Total Memory: 64GiB" />
</Grid>
</Grid>
</Panel>