src/views/process-panel/process-information-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, WithStyles, withStyles, Card,
   8     CardHeader, IconButton, CardContent, Grid, Chip, Typography, Tooltip
   9 } from '@material-ui/core';
  10 import { ArvadosTheme } from 'common/custom-theme';
  11 import { CloseIcon, MoreOptionsIcon, ProcessIcon } from 'components/icon/icon';
  12 import { DetailsAttribute } from 'components/details-attribute/details-attribute';
  13 import { Process } from 'store/processes/process';
  14 import { getProcessStatus, getProcessStatusColor } from 'store/processes/process';
  15 import { formatDate } from 'common/formatters';
  16 import classNames from 'classnames';
  17 import { ContainerState } from 'models/container';
  18 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
  19
  20 type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'link' | 'content' | 'title' | 'avatar' | 'cancelButton' | 'header';
  21
  22 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  23     card: {
  24         height: '100%'
  25     },
  26     header: {
  27         paddingTop: theme.spacing.unit,
  28         paddingBottom: theme.spacing.unit,
  29     },
  30     iconHeader: {
  31         fontSize: '1.875rem',
  32         color: theme.customs.colors.green700,
  33     },
  34     avatar: {
  35         alignSelf: 'flex-start',
  36         paddingTop: theme.spacing.unit * 0.5
  37     },
  38     label: {
  39         display: 'flex',
  40         justifyContent: 'flex-end',
  41         fontSize: '0.875rem',
  42         marginRight: theme.spacing.unit * 3,
  43         paddingRight: theme.spacing.unit
  44     },
  45     value: {
  46         textTransform: 'none',
  47         fontSize: '0.875rem',
  48     },
  49     link: {
  50         fontSize: '0.875rem',
  51         color: theme.palette.primary.main,
  52         '&:hover': {
  53             cursor: 'pointer'
  54         }
  55     },
  56     chip: {
  57         height: theme.spacing.unit * 3,
  58         width: theme.spacing.unit * 12,
  59         color: theme.palette.common.white,
  60         fontSize: '0.875rem',
  61         borderRadius: theme.spacing.unit * 0.625,
  62     },
  63     content: {
  64         '&:last-child': {
  65             paddingBottom: theme.spacing.unit * 2,
  66         }
  67     },
  68     title: {
  69         overflow: 'hidden',
  70         paddingTop: theme.spacing.unit * 0.5
  71     },
  72     cancelButton: {
  73         paddingRight: theme.spacing.unit * 2,
  74         fontSize: '14px',
  75         color: theme.customs.colors.red900,
  76         "&:hover": {
  77             cursor: 'pointer'
  78         }
  79     }
  80 });
  81
  82 export interface ProcessInformationCardDataProps {
  83     process: Process;
  84     onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
  85     openProcessInputDialog: (uuid: string) => void;
  86     navigateToOutput: (uuid: string) => void;
  87     openWorkflow: (uuid: string) => void;
  88     cancelProcess: (uuid: string) => void;
  89 }
  90
  91 type ProcessInformationCardProps = ProcessInformationCardDataProps & WithStyles<CssRules, true> & MPVPanelProps;
  92
  93 export const ProcessInformationCard = withStyles(styles, { withTheme: true })(
  94     ({ classes, process, onContextMenu, theme, openProcessInputDialog, navigateToOutput, openWorkflow, cancelProcess, doHidePanel, panelName }: ProcessInformationCardProps) => {
  95         const { container } = process;
  96         const startedAt = container ? formatDate(container.startedAt) : 'N/A';
  97         const finishedAt = container ? formatDate(container.finishedAt) : 'N/A';
  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                 action={
 107                     <div>
 108                         {process.container && process.container.state === ContainerState.RUNNING &&
 109                             <span className={classes.cancelButton} onClick={() => cancelProcess(process.containerRequest.uuid)}>Cancel</span>}
 110                         <Chip label={getProcessStatus(process)}
 111                             className={classes.chip}
 112                             style={{ backgroundColor: getProcessStatusColor(getProcessStatus(process), theme as ArvadosTheme) }} />
 113                         <Tooltip title="More options" disableFocusListener>
 114                             <IconButton
 115                                 aria-label="More options"
 116                                 onClick={event => onContextMenu(event)}>
 117                                 <MoreOptionsIcon />
 118                             </IconButton>
 119                         </Tooltip>
 120                         { doHidePanel &&
 121                         <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
 122                             <IconButton onClick={doHidePanel}><CloseIcon /></IconButton>
 123                         </Tooltip> }
 124                     </div>
 125                 }
 126                 title={
 127                     <Tooltip title={process.containerRequest.name} placement="bottom-start">
 128                         <Typography noWrap variant='h6' color='inherit'>
 129                             {process.containerRequest.name}
 130                         </Typography>
 131                     </Tooltip>
 132                 }
 133                 subheader={
 134                     <Tooltip title={getDescription(process)} placement="bottom-start">
 135                         <Typography noWrap variant='body1' color='inherit'>
 136                             {getDescription(process)}
 137                         </Typography>
 138                     </Tooltip>} />
 139             <CardContent className={classes.content}>
 140                 <Grid container>
 141                     <Grid item xs={6}>
 142                         <DetailsAttribute classLabel={classes.label} classValue={classes.value}
 143                             label='From'
 144                             value={startedAt} />
 145                         <DetailsAttribute classLabel={classes.label} classValue={classes.value}
 146                             label='To'
 147                             value={finishedAt} />
 148                         {process.containerRequest.properties.workflowUuid &&
 149                             <span onClick={() => openWorkflow(process.containerRequest.properties.workflowUuid)}>
 150                                 <DetailsAttribute classLabel={classes.label} classValue={classNames(classes.value, classes.link)}
 151                                     label='Workflow' value={process.containerRequest.properties.workflowName} />
 152                             </span>}
 153                     </Grid>
 154                     <Grid item xs={6}>
 155                         <span onClick={() => navigateToOutput(process.containerRequest.outputUuid!)}>
 156                             <DetailsAttribute classLabel={classes.link} label='Outputs' />
 157                         </span>
 158                         <span onClick={() => openProcessInputDialog(process.containerRequest.uuid)}>
 159                             <DetailsAttribute classLabel={classes.link} label='Inputs' />
 160                         </span>
 161                     </Grid>
 162                 </Grid>
 163             </CardContent>
 164         </Card>;
 165     }
 166 );
 167
 168 const getDescription = (process: Process) =>
 169     process.containerRequest.description || '(no-description)';