src/views/process-panel/process-details-card.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import {
   7     StyleRulesCallback,
   8     WithStyles,
   9     withStyles,
  10     Card,
  11     CardHeader,
  12     IconButton,
  13     CardContent,
  14     Tooltip,
  15     Typography,
  16     Button,
  17 } from '@material-ui/core';
  18 import { ArvadosTheme } from 'common/custom-theme';
  19 import { CloseIcon, MoreOptionsIcon, ProcessIcon, StartIcon } from 'components/icon/icon';
  20 import { Process } from 'store/processes/process';
  21 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
  22 import { ProcessDetailsAttributes } from './process-details-attributes';
  23 import { ProcessStatus } from 'views-components/data-explorer/renderers';
  24 import { ContainerState } from 'models/container';
  25 import { ContainerRequestState } from 'models/container-request';
  26
  27 type CssRules = 'card' | 'content' | 'title' | 'header' | 'cancelButton' | 'avatar' | 'iconHeader' | 'runButton';
  28
  29 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  30     card: {
  31         height: '100%'
  32     },
  33     header: {
  34         paddingTop: theme.spacing.unit,
  35         paddingBottom: theme.spacing.unit,
  36     },
  37     iconHeader: {
  38         fontSize: '1.875rem',
  39         color: theme.customs.colors.greyL,
  40     },
  41     avatar: {
  42         alignSelf: 'flex-start',
  43         paddingTop: theme.spacing.unit * 0.5
  44     },
  45     content: {
  46         padding: theme.spacing.unit * 1.0,
  47         paddingTop: theme.spacing.unit * 0.5,
  48         '&:last-child': {
  49             paddingBottom: theme.spacing.unit * 1,
  50         }
  51     },
  52     title: {
  53         overflow: 'hidden',
  54         paddingTop: theme.spacing.unit * 0.5,
  55         color: theme.customs.colors.green700,
  56     },
  57     cancelButton: {
  58         paddingRight: theme.spacing.unit * 2,
  59         fontSize: '14px',
  60         color: theme.customs.colors.red900,
  61         "&:hover": {
  62             cursor: 'pointer'
  63         }
  64     },
  65     runButton: {
  66         padding: "0px 5px 0 0",
  67         marginRight: "5px",
  68     },
  69 });
  70
  71 export interface ProcessDetailsCardDataProps {
  72     process: Process;
  73     cancelProcess: (uuid: string) => void;
  74     startProcess: (uuid: string) => void;
  75     resumeOnHoldWorkflow: (uuid: string) => void;
  76     onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
  77 }
  78
  79 type ProcessDetailsCardProps = ProcessDetailsCardDataProps & WithStyles<CssRules> & MPVPanelProps;
  80
  81 export const ProcessDetailsCard = withStyles(styles)(
  82     ({ cancelProcess, startProcess, resumeOnHoldWorkflow, onContextMenu, classes, process, doHidePanel, panelName }: ProcessDetailsCardProps) => {
  83         let runAction: ((uuid: string) => void) | undefined = undefined;
  84         if (process.containerRequest.state === ContainerRequestState.UNCOMMITTED) {
  85             runAction = startProcess;
  86         } else if (process.containerRequest.state === ContainerRequestState.COMMITTED &&
  87                     process.containerRequest.priority === 0 &&
  88                     // Don't show run button when container is present & running or cancelled
  89                     !(process.container && (process.container.state === ContainerState.RUNNING ||
  90                                             process.container.state === ContainerState.CANCELLED))) {
  91             runAction = resumeOnHoldWorkflow;
  92         }
  93
  94         return <Card className={classes.card}>
  95             <CardHeader
  96                 className={classes.header}
  97                 classes={{
  98                     content: classes.title,
  99                     avatar: classes.avatar,
 100                 }}
 101                 avatar={<ProcessIcon className={classes.iconHeader} />}
 102                 title={
 103                     <Tooltip title={process.containerRequest.name} placement="bottom-start">
 104                         <Typography noWrap variant='h6'>
 105                             {process.containerRequest.name}
 106                         </Typography>
 107                     </Tooltip>
 108                 }
 109                 subheader={
 110                     <Tooltip title={getDescription(process)} placement="bottom-start">
 111                         <Typography noWrap variant='body1' color='inherit'>
 112                             {getDescription(process)}
 113                         </Typography>
 114                     </Tooltip>}
 115                 action={
 116                     <div>
 117                         {runAction !== undefined &&
 118                             <Button
 119                                 variant="contained"
 120                                 size="small"
 121                                 color="primary"
 122                                 className={classes.runButton}
 123                                 onClick={() => runAction && runAction(process.containerRequest.uuid)}>
 124                                 <StartIcon />
 125                                 Run
 126                             </Button>}
 127                         {process.container &&
 128                             (process.container.state === ContainerState.QUEUED ||
 129                             process.container.state === ContainerState.LOCKED ||
 130                             process.container.state === ContainerState.RUNNING) &&
 131                             process.containerRequest.priority !== null &&
 132                             process.containerRequest.priority > 0 &&
 133                             <span data-cy="process-cancel" className={classes.cancelButton} onClick={() => cancelProcess(process.containerRequest.uuid)}>Cancel</span>}
 134                         <ProcessStatus uuid={process.containerRequest.uuid} />
 135                         <Tooltip title="More options" disableFocusListener>
 136                             <IconButton
 137                                 aria-label="More options"
 138                                 onClick={event => onContextMenu(event)}>
 139                                 <MoreOptionsIcon />
 140                             </IconButton>
 141                         </Tooltip>
 142                         { doHidePanel &&
 143                         <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
 144                             <IconButton onClick={doHidePanel}><CloseIcon /></IconButton>
 145                         </Tooltip> }
 146                     </div>
 147                 } />
 148             <CardContent className={classes.content}>
 149                 <ProcessDetailsAttributes request={process.containerRequest} twoCol hideProcessPanelRedundantFields />
 150             </CardContent>
 151         </Card>;
 152     }
 153 );
 154
 155 const getDescription = (process: Process) =>
 156     process.containerRequest.description || '(no-description)';