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     Chip,
  17 } from '@material-ui/core';
  18 import { ArvadosTheme } from 'common/custom-theme';
  19 import { CloseIcon, MoreOptionsIcon, ProcessIcon } from 'components/icon/icon';
  20 import { Process, getProcessStatus, getProcessStatusColor } from 'store/processes/process';
  21 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
  22 import { ProcessDetailsAttributes } from './process-details-attributes';
  23 import { ContainerState } from 'models/container';
  24
  25 type CssRules = 'card' | 'content' | 'title' | 'header' | 'cancelButton' | 'chip' | 'avatar' | 'iconHeader';
  26
  27 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  28     card: {
  29         height: '100%'
  30     },
  31     header: {
  32         paddingTop: theme.spacing.unit,
  33         paddingBottom: theme.spacing.unit,
  34     },
  35     iconHeader: {
  36         fontSize: '1.875rem',
  37         color: theme.customs.colors.green700,
  38     },
  39     avatar: {
  40         alignSelf: 'flex-start',
  41         paddingTop: theme.spacing.unit * 0.5
  42     },
  43     content: {
  44         '&:last-child': {
  45             paddingBottom: theme.spacing.unit * 2,
  46         }
  47     },
  48     title: {
  49         overflow: 'hidden',
  50         paddingTop: theme.spacing.unit * 0.5
  51     },
  52     cancelButton: {
  53         paddingRight: theme.spacing.unit * 2,
  54         fontSize: '14px',
  55         color: theme.customs.colors.red900,
  56         "&:hover": {
  57             cursor: 'pointer'
  58         }
  59     },
  60     chip: {
  61         height: theme.spacing.unit * 3,
  62         width: theme.spacing.unit * 12,
  63         color: theme.palette.common.white,
  64         fontSize: '0.875rem',
  65         borderRadius: theme.spacing.unit * 0.625,
  66     },
  67 });
  68
  69 export interface ProcessDetailsCardDataProps {
  70     process: Process;
  71     cancelProcess: (uuid: string) => void;
  72     onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
  73 }
  74
  75 type ProcessDetailsCardProps = ProcessDetailsCardDataProps & WithStyles<CssRules, true> & MPVPanelProps;
  76
  77 export const ProcessDetailsCard = withStyles(styles, {withTheme: true})(
  78     ({ theme, cancelProcess, onContextMenu, classes, process, doHidePanel, panelName }: ProcessDetailsCardProps) => {
  79         return <Card className={classes.card}>
  80             <CardHeader
  81                 className={classes.header}
  82                 classes={{
  83                     content: classes.title,
  84                     avatar: classes.avatar,
  85                 }}
  86                 avatar={<ProcessIcon className={classes.iconHeader} />}
  87                 title={
  88                     <Tooltip title={process.containerRequest.name} placement="bottom-start">
  89                         <Typography noWrap variant='h6' color='inherit'>
  90                             {process.containerRequest.name}
  91                         </Typography>
  92                     </Tooltip>
  93                 }
  94                 subheader={
  95                     <Tooltip title={getDescription(process)} placement="bottom-start">
  96                         <Typography noWrap variant='body1' color='inherit'>
  97                             {getDescription(process)}
  98                         </Typography>
  99                     </Tooltip>}
 100                 action={
 101                     <div>
 102                         {process.container && process.container.state === ContainerState.RUNNING &&
 103                             <span className={classes.cancelButton} onClick={() => cancelProcess(process.containerRequest.uuid)}>Cancel</span>}
 104                         <Chip label={getProcessStatus(process)}
 105                             className={classes.chip}
 106                             style={{ backgroundColor: getProcessStatusColor(getProcessStatus(process), theme as ArvadosTheme) }} />
 107                         <Tooltip title="More options" disableFocusListener>
 108                             <IconButton
 109                                 aria-label="More options"
 110                                 onClick={event => onContextMenu(event)}>
 111                                 <MoreOptionsIcon />
 112                             </IconButton>
 113                         </Tooltip>
 114                         { doHidePanel &&
 115                         <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
 116                             <IconButton onClick={doHidePanel}><CloseIcon /></IconButton>
 117                         </Tooltip> }
 118                     </div>
 119                 } />
 120             <CardContent className={classes.content}>
 121                 <ProcessDetailsAttributes request={process.containerRequest} twoCol />
 122             </CardContent>
 123         </Card>;
 124     }
 125 );
 126
 127 const getDescription = (process: Process) =>
 128     process.containerRequest.description || '(no-description)';