X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/ed4389e99b60c9e2316312829ed5f105dd1cf3b7..ba244d0282e8dc6c21ebf6a509750717bae35783:/src/views/process-panel/process-resource-card.tsx

diff --git a/src/views/process-panel/process-resource-card.tsx b/src/views/process-panel/process-resource-card.tsx
index 88b8155b..b39f48ea 100644
--- a/src/views/process-panel/process-resource-card.tsx
+++ b/src/views/process-panel/process-resource-card.tsx
@@ -14,24 +14,21 @@ import {
     Tooltip,
     Typography,
     Grid,
-    CircularProgress,
 } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
 import {
     CloseIcon,
     MaximizeIcon,
+    MemoryIcon,
     UnMaximizeIcon,
-    ProcessIcon
 } from 'components/icon/icon';
 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
 import { connect } from 'react-redux';
 import { Process } from 'store/processes/process';
 import { NodeInstanceType } from 'store/process-panel/process-panel';
-import { DefaultView } from 'components/default-view/default-view';
 import { DetailsAttribute } from "components/details-attribute/details-attribute";
 import { formatFileSize } from "common/formatters";
-import { InputCollectionMount } from 'store/processes/processes-actions';
-import { MountKind, TemporaryDirectoryMount } from 'models/mount-types';
+import { MountKind } from 'models/mount-types';
 
 interface ProcessResourceCardDataProps {
     process: Process;
@@ -47,16 +44,26 @@ 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.greyL,
+    },
     content: {
         paddingTop: "0px",
-        maxHeight: `calc(100% - ${theme.spacing.unit * 4.5}px)`,
+        maxHeight: `calc(100% - ${theme.spacing.unit * 7.5}px)`,
         overflow: "auto"
     },
     sectionH3: {
-        margin: "0.5em"
+        margin: "0.5em",
+        color: theme.customs.colors.greyD,
+        fontSize: "0.8125rem",
+        textTransform: "uppercase",
     }
 });
 
@@ -64,9 +71,6 @@ type ProcessResourceCardProps = ProcessResourceCardDataProps & WithStyles<CssRul
 
 export const ProcessResourceCard = withStyles(styles)(connect()(
     ({ classes, nodeInfo, doHidePanel, doMaximizePanel, doUnMaximizePanel, panelMaximized, panelName, process, }: ProcessResourceCardProps) => {
-
-        const loading = false;
-
         let diskRequest = 0;
         if (process.container?.mounts) {
             for (const mnt in process.container.mounts) {
@@ -84,7 +88,7 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
                     content: classes.title,
                     avatar: classes.avatar,
                 }}
-                avatar={<ProcessIcon className={classes.iconHeader} />}
+                avatar={<MemoryIcon className={classes.iconHeader} />}
                 title={
                     <Typography noWrap variant='h6' color='inherit'>
                         Resources
@@ -109,32 +113,17 @@ 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)} />
+                                <DetailsAttribute label="RAM*" value={formatFileSize(process.container?.runtimeConstraints.ram)} />
                             </Grid>
                             <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 ?
-                                <Grid item xs={12}>
-                                    <DetailsAttribute label="Keep cache (RAM)" value={formatFileSize(process.container?.runtimeConstraints.keep_cache_ram)} />
-                                </Grid> : null}
-
-                            {process.container?.runtimeConstraints.keep_cache_disk &&
-                                process.container?.runtimeConstraints.keep_cache_disk > 0 ?
-                                <Grid item xs={12}>
-                                    <DetailsAttribute label="Keep cache (disk)" value={formatFileSize(process.container?.runtimeConstraints.keep_cache_disk)} />
-                                </Grid> : null}
 
                             {process.container?.runtimeConstraints.cuda &&
                                 process.container?.runtimeConstraints.cuda.device_count > 0 ?
@@ -149,19 +138,36 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
                                         <DetailsAttribute label="CUDA hardware capability" value={process.container?.runtimeConstraints.cuda.hardware_capability} />
                                     </Grid>
                                 </> : null}
+
+                            {process.container?.runtimeConstraints.keep_cache_ram &&
+                                process.container?.runtimeConstraints.keep_cache_ram > 0 ?
+                                <Grid item xs={12}>
+                                    <DetailsAttribute label="Keep cache (RAM)" value={formatFileSize(process.container?.runtimeConstraints.keep_cache_ram)} />
+                                </Grid> : null}
+
+                            {process.container?.runtimeConstraints.keep_cache_disk &&
+                                process.container?.runtimeConstraints.keep_cache_disk > 0 ?
+                                <Grid item xs={12}>
+                                    <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}
+
                         </Grid>
                     </Grid>
 
 
                     <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}>
@@ -177,33 +183,38 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
                                 </Grid>
 
                                 <Grid item xs={6}>
-                                    <DetailsAttribute label="Included scratch disk" value={formatFileSize(nodeInfo.IncludedScratch)} />
+                                    <DetailsAttribute label="Disk" value={formatFileSize(nodeInfo.IncludedScratch + nodeInfo.AddedScratch)} />
                                 </Grid>
 
                                 <Grid item xs={6}>
                                     <DetailsAttribute label="Preemptible" value={nodeInfo.Preemptible.toString()} />
                                 </Grid>
 
-                                <Grid item xs={6}>
-                                    <DetailsAttribute label="Added scratch disk" value={formatFileSize(nodeInfo.AddedScratch)} />
-                                </Grid>
-
-                                {nodeInfo.CUDA.DeviceCount > 0 &&
+                                {nodeInfo.CUDA && nodeInfo.CUDA.DeviceCount > 0 &&
                                     <>
                                         <Grid item xs={6}>
-                                            <DetailsAttribute label="CUDA devices" value={formatFileSize(nodeInfo.CUDA.DeviceCount)} />
+                                            <DetailsAttribute label="CUDA devices" value={nodeInfo.CUDA.DeviceCount} />
                                         </Grid>
+
                                         <Grid item xs={6}>
-                                            <DetailsAttribute label="CUDA driver version" value={formatFileSize(nodeInfo.CUDA.DriverVersion)} />
                                         </Grid>
+
+                                        <Grid item xs={6}>
+                                            <DetailsAttribute label="CUDA driver version" value={nodeInfo.CUDA.DriverVersion} />
+                                        </Grid>
+
+                                        <Grid item xs={6}>
+                                        </Grid>
+
                                         <Grid item xs={6}>
-                                            <DetailsAttribute label="CUDA hardware capability" value={formatFileSize(nodeInfo.CUDA.HardwareCapability)} />
+                                            <DetailsAttribute label="CUDA hardware capability" value={nodeInfo.CUDA.HardwareCapability} />
                                         </Grid>
                                     </>
                                 }
                             </Grid>}
                     </Grid>
                 </Grid>
+                <Typography>* RAM available to the program is limited to Requested RAM, not Instance RAM</Typography>
             </CardContent>
         </Card >;
     }