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 } from '@material-ui/core';
  17 import { ArvadosTheme } from 'common/custom-theme';
  18 import { CloseIcon, MoreOptionsIcon, ProcessIcon, StartIcon } from 'components/icon/icon';
  19 import { Process } from 'store/processes/process';
  20 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
  21 import { ProcessDetailsAttributes } from './process-details-attributes';
  22 import { ProcessStatus } from 'views-components/data-explorer/renderers';
  23 import { ContainerState } from 'models/container';
  24 import { ContainerRequestState } from 'models/container-request';
  25
  26 type CssRules = 'card' | 'content' | 'title' | 'header' | 'cancelButton' | 'avatar' | 'iconHeader';
  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     cancelButton: {
  57         paddingRight: theme.spacing.unit * 2,
  58         fontSize: '14px',
  59         color: theme.customs.colors.red900,
  60         "&:hover": {
  61             cursor: 'pointer'
  62         }
  63     },
  64 });
  65
  66 export interface ProcessDetailsCardDataProps {
  67     process: Process;
  68     cancelProcess: (uuid: string) => void;
  69     startProcess: (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, onContextMenu, classes, process, doHidePanel, panelName }: ProcessDetailsCardProps) => {
  77         return <Card className={classes.card}>
  78             <CardHeader
  79                 className={classes.header}
  80                 classes={{
  81                     content: classes.title,
  82                     avatar: classes.avatar,
  83                 }}
  84                 avatar={<ProcessIcon className={classes.iconHeader} />}
  85                 title={
  86                     <Tooltip title={process.containerRequest.name} placement="bottom-start">
  87                         <Typography noWrap variant='h6'>
  88                             {process.containerRequest.name}
  89                         </Typography>
  90                     </Tooltip>
  91                 }
  92                 subheader={
  93                     <Tooltip title={getDescription(process)} placement="bottom-start">
  94                         <Typography noWrap variant='body1' color='inherit'>
  95                             {getDescription(process)}
  96                         </Typography>
  97                     </Tooltip>}
  98                 action={
  99                     <div>
 100                         {process.containerRequest.state === ContainerRequestState.UNCOMMITTED &&
 101                             <Tooltip title="Start Process" disableFocusListener>
 102                                 <IconButton
 103                                     aria-label="Start Process"
 104                                     onClick={event => startProcess(process.containerRequest.uuid)}>
 105                                     <StartIcon />
 106                                 </IconButton>
 107                             </Tooltip>}
 108                         {process.container && process.container.state === ContainerState.RUNNING &&
 109                             <span className={classes.cancelButton} onClick={() => cancelProcess(process.containerRequest.uuid)}>Cancel</span>}
 110                         <ProcessStatus uuid={process.containerRequest.uuid} />
 111                         <Tooltip title="More options" disableFocusListener>
 112                             <IconButton
 113                                 aria-label="More options"
 114                                 onClick={event => onContextMenu(event)}>
 115                                 <MoreOptionsIcon />
 116                             </IconButton>
 117                         </Tooltip>
 118                         { doHidePanel &&
 119                         <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
 120                             <IconButton onClick={doHidePanel}><CloseIcon /></IconButton>
 121                         </Tooltip> }
 122                     </div>
 123                 } />
 124             <CardContent className={classes.content}>
 125                 <ProcessDetailsAttributes request={process.containerRequest} twoCol hideProcessPanelRedundantFields />
 126             </CardContent>
 127         </Card>;
 128     }
 129 );
 130
 131 const getDescription = (process: Process) =>
 132     process.containerRequest.description || '(no-description)';