19438: Styling adjustments

Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz@curii.com>

diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts
index df8486429cae280f6fc81d2c40404531c5ebb5a2..e819ab3ac999bd10cc068d1ad51af21bb0079aa0 100644 (file)
--- a/src/common/custom-theme.ts
+++ b/src/common/custom-theme.ts
@@ -12,26 +12,27 @@ import red from '@material-ui/core/colors/red';
 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';
@@ -41,148 +42,148 @@ const grey700 = grey['700'];
 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);

diff --git a/src/views/process-panel/process-resource-card.tsx b/src/views/process-panel/process-resource-card.tsx
index 88b8155b050b3d35fc1a6dab0a5c63b0226ad8d6..4ab8d860dcabea924a92d60d0cf496ce1d6f6255 100644 (file)
--- a/src/views/process-panel/process-resource-card.tsx
+++ b/src/views/process-panel/process-resource-card.tsx
@@ -47,16 +47,24 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     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
     }
 });
 
@@ -109,10 +117,10 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
             <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)} />
@@ -120,9 +128,6 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
                             <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 ?
@@ -136,6 +141,10 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
                                     <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 ?
                                 <>
@@ -154,14 +163,14 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
 
 
                     <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}>
@@ -193,9 +202,17 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
                                         <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>