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