16068: Merge process info card and process details card.

[arvados-workbench2.git] / src / views / process-panel / process-details-card.tsx

diff --git a/src/views/process-panel/process-details-card.tsx b/src/views/process-panel/process-details-card.tsx
index d3349c3ae8d79ea62d7dcb052ab6852bd8d43f4b..5cca904a0d53382672f1ef5183e27a182aff6069 100644 (file)
--- a/src/views/process-panel/process-details-card.tsx
+++ b/src/views/process-panel/process-details-card.tsx
@@ -12,14 +12,17 @@ import {
     IconButton,
     CardContent,
     Tooltip,
+    Typography,
+    Chip,
 } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
-import { CloseIcon } from 'components/icon/icon';
-import { Process } from 'store/processes/process';
+import { CloseIcon, MoreOptionsIcon, ProcessIcon } from 'components/icon/icon';
+import { Process, getProcessStatus, getProcessStatusColor } from 'store/processes/process';
 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
 import { ProcessDetailsAttributes } from './process-details-attributes';
+import { ContainerState } from 'models/container';
 
-type CssRules = 'card' | 'content' | 'title' | 'header';
+type CssRules = 'card' | 'content' | 'title' | 'header' | 'cancelButton' | 'chip' | 'avatar' | 'iconHeader';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     card: {
@@ -29,6 +32,14 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         paddingTop: theme.spacing.unit,
         paddingBottom: theme.spacing.unit,
     },
+    iconHeader: {
+        fontSize: '1.875rem',
+        color: theme.customs.colors.green700,
+    },
+    avatar: {
+        alignSelf: 'flex-start',
+        paddingTop: theme.spacing.unit * 0.5
+    },
     content: {
         '&:last-child': {
             paddingBottom: theme.spacing.unit * 2,
@@ -38,31 +49,80 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         overflow: 'hidden',
         paddingTop: theme.spacing.unit * 0.5
     },
+    cancelButton: {
+        paddingRight: theme.spacing.unit * 2,
+        fontSize: '14px',
+        color: theme.customs.colors.red900,
+        "&:hover": {
+            cursor: 'pointer'
+        }
+    },
+    chip: {
+        height: theme.spacing.unit * 3,
+        width: theme.spacing.unit * 12,
+        color: theme.palette.common.white,
+        fontSize: '0.875rem',
+        borderRadius: theme.spacing.unit * 0.625,
+    },
 });
 
 export interface ProcessDetailsCardDataProps {
     process: Process;
+    cancelProcess: (uuid: string) => void;
+    onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
-type ProcessDetailsCardProps = ProcessDetailsCardDataProps & WithStyles<CssRules> & MPVPanelProps;
+type ProcessDetailsCardProps = ProcessDetailsCardDataProps & WithStyles<CssRules, true> & MPVPanelProps;
 
-export const ProcessDetailsCard = withStyles(styles)(
-    ({ classes, process, doHidePanel, panelName }: ProcessDetailsCardProps) => {
+export const ProcessDetailsCard = withStyles(styles, {withTheme: true})(
+    ({ theme, cancelProcess, onContextMenu, classes, process, doHidePanel, panelName }: ProcessDetailsCardProps) => {
         return <Card className={classes.card}>
             <CardHeader
                 className={classes.header}
                 classes={{
                     content: classes.title,
+                    avatar: classes.avatar,
                 }}
-                title='Details'
-                action={ doHidePanel &&
+                avatar={<ProcessIcon className={classes.iconHeader} />}
+                title={
+                    <Tooltip title={process.containerRequest.name} placement="bottom-start">
+                        <Typography noWrap variant='h6' color='inherit'>
+                            {process.containerRequest.name}
+                        </Typography>
+                    </Tooltip>
+                }
+                subheader={
+                    <Tooltip title={getDescription(process)} placement="bottom-start">
+                        <Typography noWrap variant='body1' color='inherit'>
+                            {getDescription(process)}
+                        </Typography>
+                    </Tooltip>}
+                action={
+                    <div>
+                        {process.container && process.container.state === ContainerState.RUNNING &&
+                            <span className={classes.cancelButton} onClick={() => cancelProcess(process.containerRequest.uuid)}>Cancel</span>}
+                        <Chip label={getProcessStatus(process)}
+                            className={classes.chip}
+                            style={{ backgroundColor: getProcessStatusColor(getProcessStatus(process), theme as ArvadosTheme) }} />
+                        <Tooltip title="More options" disableFocusListener>
+                            <IconButton
+                                aria-label="More options"
+                                onClick={event => onContextMenu(event)}>
+                                <MoreOptionsIcon />
+                            </IconButton>
+                        </Tooltip>
+                        { doHidePanel &&
                         <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
                             <IconButton onClick={doHidePanel}><CloseIcon /></IconButton>
-                        </Tooltip> } />
+                        </Tooltip> }
+                    </div>
+                } />
             <CardContent className={classes.content}>
-                <ProcessDetailsAttributes item={process.containerRequest} twoCol />
+                <ProcessDetailsAttributes request={process.containerRequest} twoCol />
             </CardContent>
         </Card>;
     }
 );
 
+const getDescription = (process: Process) =>
+    process.containerRequest.description || '(no-description)';