import teal from '@material-ui/core/colors/teal';
export interface ArvadosThemeOptions extends ThemeOptions {
- customs: any;
+ customs: any;
}
export interface ArvadosTheme extends Theme {
- customs: {
- colors: Colors;
- };
+ customs: {
+ colors: Colors;
+ };
}
interface Colors {
- green700: string;
- yellow100: string;
- yellow700: string;
- yellow900: string;
- red100: string;
- red900: string;
- blue500: string;
- grey500: string;
- purple: string;
- orange: string;
+ green700: string;
+ yellow100: string;
+ yellow700: string;
+ yellow900: string;
+ red100: string;
+ red900: string;
+ blue500: string;
+ grey500: string;
+ grey700: string;
+ purple: string;
+ orange: string;
}
const arvadosPurple = '#361336';
const grey900 = grey['900'];
export const themeOptions: ArvadosThemeOptions = {
- typography: {
- useNextVariants: true,
- },
- customs: {
- colors: {
- green700: green['700'],
- yellow100: yellow['100'],
- yellow700: yellow['700'],
- yellow900: yellow['900'],
- red100: red['100'],
- red900: red['900'],
- blue500: blue['500'],
- grey500: grey500,
- purple: arvadosPurple,
- orange: '#f0ad4e',
- },
- },
- overrides: {
- MuiTypography: {
- body1: {
- fontSize: '0.8125rem',
- },
- },
- MuiAppBar: {
- colorPrimary: {
- backgroundColor: arvadosPurple,
- },
- },
- MuiTabs: {
- root: {
- color: grey600,
- },
- indicator: {
- backgroundColor: arvadosPurple,
- },
- },
- MuiTab: {
- root: {
- '&$selected': {
- fontWeight: 700,
- color: arvadosPurple,
+ typography: {
+ useNextVariants: true,
+ },
+ customs: {
+ colors: {
+ green700: green['700'],
+ yellow100: yellow['100'],
+ yellow700: yellow['700'],
+ yellow900: yellow['900'],
+ red100: red['100'],
+ red900: red['900'],
+ blue500: blue['500'],
+ grey500: grey500,
+ purple: arvadosPurple,
+ orange: '#f0ad4e',
},
- },
- },
- MuiList: {
- root: {
- color: grey900,
- },
- },
- MuiListItemText: {
- root: {
- padding: 0,
- },
- },
- MuiListItemIcon: {
- root: {
- fontSize: '1.25rem',
- },
- },
- MuiCardHeader: {
- avatar: {
- display: 'flex',
- alignItems: 'center',
- },
- title: {
- color: grey700,
- fontSize: '1.25rem',
- },
},
- MuiExpansionPanel: {
- expanded: {
- marginTop: '8px',
- },
- },
- MuiExpansionPanelDetails: {
- root: {
- marginBottom: 0,
- paddingBottom: '4px',
- },
- },
- MuiExpansionPanelSummary: {
- content: {
- '&$expanded': {
- margin: 0,
- },
- color: grey700,
- fontSize: '1.25rem',
- margin: 0,
- },
- expanded: {},
- },
- MuiMenuItem: {
- root: {
- padding: '8px 16px',
- },
- },
- MuiInput: {
- root: {
- fontSize: '0.875rem',
- },
- underline: {
- '&:after': {
- borderBottomColor: arvadosPurple,
- },
- '&:hover:not($disabled):not($focused):not($error):before': {
- borderBottom: '1px solid inherit',
- },
- },
- },
- MuiFormLabel: {
- root: {
- fontSize: '0.875rem',
- '&$focused': {
- '&$focused:not($error)': {
- color: arvadosPurple,
- },
- },
- },
- },
- MuiStepIcon: {
- root: {
- '&$active': {
- color: arvadosPurple,
+ overrides: {
+ MuiTypography: {
+ body1: {
+ fontSize: '0.8125rem',
+ },
+ },
+ MuiAppBar: {
+ colorPrimary: {
+ backgroundColor: arvadosPurple,
+ },
},
- '&$completed': {
- color: 'inherited',
+ MuiTabs: {
+ root: {
+ color: grey600,
+ },
+ indicator: {
+ backgroundColor: arvadosPurple,
+ },
+ },
+ MuiTab: {
+ root: {
+ '&$selected': {
+ fontWeight: 700,
+ color: arvadosPurple,
+ },
+ },
+ },
+ MuiList: {
+ root: {
+ color: grey900,
+ },
+ },
+ MuiListItemText: {
+ root: {
+ padding: 0,
+ },
+ },
+ MuiListItemIcon: {
+ root: {
+ fontSize: '1.25rem',
+ },
+ },
+ MuiCardHeader: {
+ avatar: {
+ display: 'flex',
+ alignItems: 'center',
+ },
+ title: {
+ color: grey700,
+ fontSize: '1.25rem',
+ },
+ },
+ MuiExpansionPanel: {
+ expanded: {
+ marginTop: '8px',
+ },
+ },
+ MuiExpansionPanelDetails: {
+ root: {
+ marginBottom: 0,
+ paddingBottom: '4px',
+ },
+ },
+ MuiExpansionPanelSummary: {
+ content: {
+ '&$expanded': {
+ margin: 0,
+ },
+ color: grey700,
+ fontSize: '1.25rem',
+ margin: 0,
+ },
+ expanded: {},
+ },
+ MuiMenuItem: {
+ root: {
+ padding: '8px 16px',
+ },
+ },
+ MuiInput: {
+ root: {
+ fontSize: '0.875rem',
+ },
+ underline: {
+ '&:after': {
+ borderBottomColor: arvadosPurple,
+ },
+ '&:hover:not($disabled):not($focused):not($error):before': {
+ borderBottom: '1px solid inherit',
+ },
+ },
+ },
+ MuiFormLabel: {
+ root: {
+ fontSize: '0.875rem',
+ '&$focused': {
+ '&$focused:not($error)': {
+ color: arvadosPurple,
+ },
+ },
+ },
+ },
+ MuiStepIcon: {
+ root: {
+ '&$active': {
+ color: arvadosPurple,
+ },
+ '&$completed': {
+ color: 'inherited',
+ },
+ },
},
- },
},
- },
- mixins: {
- toolbar: {
- minHeight: '48px',
+ mixins: {
+ toolbar: {
+ minHeight: '48px',
+ },
},
- },
- palette: {
- primary: {
- main: teal.A700,
- dark: teal.A400,
- contrastText: '#fff',
+ palette: {
+ primary: {
+ main: teal.A700,
+ dark: teal.A400,
+ contrastText: '#fff',
+ },
},
- },
};
export const CustomTheme = createMuiTheme(themeOptions);
header: {
paddingBottom: "0px"
},
- title: {},
- avatar: {},
- iconHeader: {},
+ title: {
+ paddingTop: theme.spacing.unit * 0.5
+ },
+ avatar: {
+ paddingTop: theme.spacing.unit * 0.5
+ },
+ iconHeader: {
+ fontSize: '1.875rem',
+ color: theme.customs.colors.green700,
+ },
content: {
paddingTop: "0px",
maxHeight: `calc(100% - ${theme.spacing.unit * 4.5}px)`,
overflow: "auto"
},
sectionH3: {
- margin: "0.5em"
+ margin: "0.5em",
+ color: theme.customs.colors.grey700
}
});
<CardContent className={classes.content}>
<Grid container>
<Grid item xs={4}>
- <h3 className={classes.sectionH3}>Requested resources</h3>
+ <h3 className={classes.sectionH3}>Requested Resources</h3>
<Grid container>
<Grid item xs={12}>
- <DetailsAttribute label="cores" value={process.container?.runtimeConstraints.vcpus} />
+ <DetailsAttribute label="Cores" value={process.container?.runtimeConstraints.vcpus} />
</Grid>
<Grid item xs={12}>
<DetailsAttribute label="RAM" value={formatFileSize(process.container?.runtimeConstraints.ram)} />
<Grid item xs={12}>
<DetailsAttribute label="Disk" value={formatFileSize(diskRequest)} />
</Grid>
- <Grid item xs={12}>
- <DetailsAttribute label="API access" value={process.container?.runtimeConstraints.API.toString()} />
- </Grid>
{process.container?.runtimeConstraints.keep_cache_ram &&
process.container?.runtimeConstraints.keep_cache_ram > 0 ?
<DetailsAttribute label="Keep cache (disk)" value={formatFileSize(process.container?.runtimeConstraints.keep_cache_disk)} />
</Grid> : null}
+ {process.container?.runtimeConstraints.API ? <Grid item xs={12}>
+ <DetailsAttribute label="API access" value={process.container?.runtimeConstraints.API.toString()} />
+ </Grid> : null}
+
{process.container?.runtimeConstraints.cuda &&
process.container?.runtimeConstraints.cuda.device_count > 0 ?
<>
<Grid item xs={8}>
- <h3 className={classes.sectionH3}>Assigned instance type</h3>
+ <h3 className={classes.sectionH3}>Assigned Instance Type</h3>
{nodeInfo === null ? <Grid item xs={8}>
No instance type recorded
</Grid>
:
<Grid container>
<Grid item xs={6}>
- <DetailsAttribute label="cores" value={nodeInfo.VCPUs} />
+ <DetailsAttribute label="Cores" value={nodeInfo.VCPUs} />
</Grid>
<Grid item xs={6}>
<Grid item xs={6}>
<DetailsAttribute label="CUDA devices" value={formatFileSize(nodeInfo.CUDA.DeviceCount)} />
</Grid>
+
+ <Grid item xs={6}>
+ </Grid>
+
<Grid item xs={6}>
<DetailsAttribute label="CUDA driver version" value={formatFileSize(nodeInfo.CUDA.DriverVersion)} />
</Grid>
+
+ <Grid item xs={6}>
+ </Grid>
+
<Grid item xs={6}>
<DetailsAttribute label="CUDA hardware capability" value={formatFileSize(nodeInfo.CUDA.HardwareCapability)} />
</Grid>