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