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, StopIcon } 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 import classNames from 'classnames';
  27
  28 type CssRules = 'card' | 'content' | 'title' | 'header' | 'cancelButton' | 'avatar' | 'iconHeader' | 'actionButton';
  29
  30 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  31     card: {
  32         height: '100%'
  33     },
  34     header: {
  35         paddingTop: theme.spacing.unit,
  36         paddingBottom: theme.spacing.unit,
  37     },
  38     iconHeader: {
  39         fontSize: '1.875rem',
  40         color: theme.customs.colors.greyL,
  41     },
  42     avatar: {
  43         alignSelf: 'flex-start',
  44         paddingTop: theme.spacing.unit * 0.5
  45     },
  46     content: {
  47         padding: theme.spacing.unit * 1.0,
  48         paddingTop: theme.spacing.unit * 0.5,
  49         '&:last-child': {
  50             paddingBottom: theme.spacing.unit * 1,
  51         }
  52     },
  53     title: {
  54         overflow: 'hidden',
  55         paddingTop: theme.spacing.unit * 0.5,
  56         color: theme.customs.colors.green700,
  57     },
  58     actionButton: {
  59         padding: "0px 5px 0 0",
  60         marginRight: "5px",
  61         fontSize: '0.78rem',
  62     },
  63     cancelButton: {
  64         color: theme.customs.colors.red900,
  65         borderColor: theme.customs.colors.red900,
  66         '&:hover': {
  67             borderColor: theme.customs.colors.red900,
  68         },
  69         '& svg': {
  70             fontSize: '22px',
  71         },
  72     },
  73 });
  74
  75 export interface ProcessDetailsCardDataProps {
  76     process: Process;
  77     cancelProcess: (uuid: string) => void;
  78     startProcess: (uuid: string) => void;
  79     resumeOnHoldWorkflow: (uuid: string) => void;
  80     onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
  81 }
  82
  83 type ProcessDetailsCardProps = ProcessDetailsCardDataProps & WithStyles<CssRules> & MPVPanelProps;
  84
  85 export const ProcessDetailsCard = withStyles(styles)(
  86     ({ cancelProcess, startProcess, resumeOnHoldWorkflow, onContextMenu, classes, process, doHidePanel, panelName }: ProcessDetailsCardProps) => {
  87         let runAction: ((uuid: string) => void) | undefined = undefined;
  88         if (process.containerRequest.state === ContainerRequestState.UNCOMMITTED) {
  89             runAction = startProcess;
  90         } else if (process.containerRequest.state === ContainerRequestState.COMMITTED &&
  91                     process.containerRequest.priority === 0 &&
  92                     // Don't show run button when container is present & running or cancelled
  93                     !(process.container && (process.container.state === ContainerState.RUNNING ||
  94                                             process.container.state === ContainerState.CANCELLED))) {
  95             runAction = resumeOnHoldWorkflow;
  96         }
  97
  98         return <Card className={classes.card}>
  99             <CardHeader
 100                 className={classes.header}
 101                 classes={{
 102                     content: classes.title,
 103                     avatar: classes.avatar,
 104                 }}
 105                 avatar={<ProcessIcon className={classes.iconHeader} />}
 106                 title={
 107                     <Tooltip title={process.containerRequest.name} placement="bottom-start">
 108                         <Typography noWrap variant='h6'>
 109                             {process.containerRequest.name}
 110                         </Typography>
 111                     </Tooltip>
 112                 }
 113                 subheader={
 114                     <Tooltip title={getDescription(process)} placement="bottom-start">
 115                         <Typography noWrap variant='body1' color='inherit'>
 116                             {getDescription(process)}
 117                         </Typography>
 118                     </Tooltip>}
 119                 action={
 120                     <div>
 121                         {runAction !== undefined &&
 122                             <Button
 123                                 data-cy="process-run-button"
 124                                 variant="contained"
 125                                 size="small"
 126                                 color="primary"
 127                                 className={classes.actionButton}
 128                                 onClick={() => runAction && runAction(process.containerRequest.uuid)}>
 129                                 <StartIcon />
 130                                 Run
 131                             </Button>}
 132                         {process.container &&
 133                             (process.container.state === ContainerState.QUEUED ||
 134                             process.container.state === ContainerState.LOCKED ||
 135                             process.container.state === ContainerState.RUNNING) &&
 136                             process.containerRequest.priority !== null &&
 137                             process.containerRequest.priority > 0 &&
 138                             <Button
 139                                 data-cy="process-cancel-button"
 140                                 variant="outlined"
 141                                 size="small"
 142                                 color="primary"
 143                                 className={classNames(classes.actionButton, classes.cancelButton)}
 144                                 onClick={() => cancelProcess(process.containerRequest.uuid)}>
 145                                 <StopIcon />
 146                                 Cancel
 147                             </Button>}
 148                         <ProcessStatus uuid={process.containerRequest.uuid} />
 149                         <Tooltip title="More options" disableFocusListener>
 150                             <IconButton
 151                                 aria-label="More options"
 152                                 onClick={event => onContextMenu(event)}>
 153                                 <MoreOptionsIcon />
 154                             </IconButton>
 155                         </Tooltip>
 156                         { doHidePanel &&
 157                         <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
 158                             <IconButton onClick={doHidePanel}><CloseIcon /></IconButton>
 159                         </Tooltip> }
 160                     </div>
 161                 } />
 162             <CardContent className={classes.content}>
 163                 <ProcessDetailsAttributes request={process.containerRequest} twoCol hideProcessPanelRedundantFields />
 164             </CardContent>
 165         </Card>;
 166     }
 167 );
 168
 169 const getDescription = (process: Process) =>
 170     process.containerRequest.description || '(no-description)';