X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/1d0297e01e0196d63b4fb42573e5bd6d1e1a31b9..d86374acae51a7706b55c1333491f297df173a0a:/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 79e600e7e0..d25d2a21f7 100644
--- a/src/views/process-panel/process-resource-card.tsx
+++ b/src/views/process-panel/process-resource-card.tsx
@@ -14,43 +14,72 @@ 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 { MountKind } from 'models/mount-types';
 
 interface ProcessResourceCardDataProps {
     process: Process;
     nodeInfo: NodeInstanceType | null;
 }
 
-type CssRules = "card" | "header" | "title" | "avatar" | "iconHeader" | "content";
+type CssRules = "card" | "header" | "title" | "avatar" | "iconHeader" | "content" | "sectionH3";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    card: {},
-    header: {},
-    title: {},
-    avatar: {},
-    iconHeader: {},
-    content: {}
+    card: {
+        height: '100%'
+    },
+    header: {
+        paddingBottom: "0px"
+    },
+    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 * 7.5}px)`,
+        overflow: "auto"
+    },
+    sectionH3: {
+        margin: "0.5em",
+        color: theme.customs.colors.greyD,
+        fontSize: "0.8125rem",
+        textTransform: "uppercase",
+    }
 });
 
 type ProcessResourceCardProps = ProcessResourceCardDataProps & WithStyles<CssRules> & MPVPanelProps;
 
 export const ProcessResourceCard = withStyles(styles)(connect()(
     ({ classes, nodeInfo, doHidePanel, doMaximizePanel, doUnMaximizePanel, panelMaximized, panelName, process, }: ProcessResourceCardProps) => {
-
-        const loading = nodeInfo === null;
+        let diskRequest = 0;
+        if (process.container?.mounts) {
+            for (const mnt in process.container.mounts) {
+                const mp = process.container.mounts[mnt];
+                if (mp.kind === MountKind.TEMPORARY_DIRECTORY) {
+                    diskRequest += mp.capacity;
+                }
+            }
+        }
 
         return <Card className={classes.card} data-cy="process-resources-card">
             <CardHeader
@@ -59,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
@@ -82,26 +111,110 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
                     </div>
                 } />
             <CardContent className={classes.content}>
-                <>
-                    {/* raw is undefined until params are loaded */}
-                    {loading && <Grid container item alignItems='center' justify='center'>
-                        <CircularProgress />
-                    </Grid>}
-                    {/* Once loaded, either raw or params may still be empty
-                      *   Raw when all params are empty
-                      *   Params when raw is provided by containerRequest properties but workflow mount is absent for preview
-                      */}
-                    {!loading &&
-                        <>
-                            <div>
-                                stuff
-                            </div>
-                        </>}
-                    {!loading && <Grid container item alignItems='center' justify='center'>
-                        <DefaultView messages={["No parameters found"]} />
-                    </Grid>}
-                </>
+                <Grid container>
+                    <Grid item xs={4}>
+                        <h3 className={classes.sectionH3}>Requested Resources</h3>
+                        <Grid container>
+                            <Grid item xs={12}>
+                                <DetailsAttribute label="Cores" value={process.container?.runtimeConstraints.vcpus} />
+                            </Grid>
+                            <Grid item xs={12}>
+                                <DetailsAttribute label="RAM" value={formatFileSize(process.container?.runtimeConstraints.ram)} />
+                            </Grid>
+                            <Grid item xs={12}>
+                                <DetailsAttribute label="Disk" value={formatFileSize(diskRequest)} />
+                            </Grid>
+
+                            {process.container?.runtimeConstraints.cuda &&
+                                process.container?.runtimeConstraints.cuda.device_count > 0 ?
+                                <>
+                                    <Grid item xs={12}>
+                                        <DetailsAttribute label="CUDA devices" value={process.container?.runtimeConstraints.cuda.device_count} />
+                                    </Grid>
+                                    <Grid item xs={12}>
+                                        <DetailsAttribute label="CUDA driver version" value={process.container?.runtimeConstraints.cuda.driver_version} />
+                                    </Grid>
+                                    <Grid item xs={12}>
+                                        <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>
+                        {nodeInfo === null ? <Grid item xs={8}>
+                            No instance type recorded
+                        </Grid>
+                            :
+                            <Grid container>
+                                <Grid item xs={6}>
+                                    <DetailsAttribute label="Cores" value={nodeInfo.VCPUs} />
+                                </Grid>
+
+                                <Grid item xs={6}>
+                                    <DetailsAttribute label="Provider type" value={nodeInfo.ProviderType} />
+                                </Grid>
+
+                                <Grid item xs={6}>
+                                    <DetailsAttribute label="RAM" value={formatFileSize(nodeInfo.RAM)} />
+                                </Grid>
+
+                                <Grid item xs={6}>
+                                    <DetailsAttribute label="Price" value={"$" + nodeInfo.Price.toString()} />
+                                </Grid>
+
+                                <Grid item xs={6}>
+                                    <DetailsAttribute label="Disk" value={formatFileSize(nodeInfo.IncludedScratch + nodeInfo.AddedScratch)} />
+                                </Grid>
+
+                                <Grid item xs={6}>
+                                    <DetailsAttribute label="Preemptible" value={nodeInfo.Preemptible.toString()} />
+                                </Grid>
+
+                                {nodeInfo.CUDA && nodeInfo.CUDA.DeviceCount > 0 &&
+                                    <>
+                                        <Grid item xs={6}>
+                                            <DetailsAttribute label="CUDA devices" value={nodeInfo.CUDA.DeviceCount} />
+                                        </Grid>
+
+                                        <Grid item xs={6}>
+                                        </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={nodeInfo.CUDA.HardwareCapability} />
+                                        </Grid>
+                                    </>
+                                }
+                            </Grid>}
+                    </Grid>
+                </Grid>
             </CardContent>
-        </Card>;
+        </Card >;
     }
 ));