src/views/process-panel/process-subprocesses-card.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import {
   7     StyleRulesCallback, WithStyles, withStyles, Card,
   8     CardHeader, IconButton, CardContent, Typography, Tooltip
   9 } from '@material-ui/core';
  10 import { ArvadosTheme } from '~/common/custom-theme';
  11 import { MoreOptionsIcon } from '~/components/icon/icon';
  12 import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
  13 import { Process, getProcessStatus, getProcessRuntime } from '~/store/processes/process';
  14 import { formatTime } from '~/common/formatters';
  15 import { getProcessStatusColor } from '~/store/processes/process';
  16
  17 export type CssRules = 'label' | 'value' | 'title' | 'content' | 'action' | 'options' | 'status' | 'rightSideHeader' | 'titleHeader'
  18     | 'header' | 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
  19
  20 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  21     label: {
  22         fontSize: '0.875rem',
  23     },
  24     value: {
  25         textTransform: 'none',
  26         fontSize: '0.875rem',
  27     },
  28     title: {
  29         overflow: 'hidden'
  30     },
  31     content: {
  32         paddingTop: theme.spacing.unit * 0.5,
  33         '&:last-child': {
  34             paddingBottom: 0
  35         }
  36     },
  37     action: {
  38         marginTop: 0
  39     },
  40     options: {
  41         width: theme.spacing.unit * 4,
  42         height: theme.spacing.unit * 4,
  43         color: theme.palette.common.white,
  44     },
  45     status: {
  46         paddingTop: theme.spacing.unit * 0.5,
  47         color: theme.palette.common.white,
  48     },
  49     rightSideHeader: {
  50         display: 'flex'
  51     },
  52     titleHeader: {
  53         color: theme.palette.common.white,
  54         fontWeight: 600
  55     },
  56     header: {
  57         paddingTop: 0,
  58         paddingBottom: 0,
  59     },
  60     headerActive: {
  61         backgroundColor: theme.customs.colors.blue500,
  62     },
  63     headerCompleted: {
  64         backgroundColor: theme.customs.colors.green700,
  65     },
  66     headerQueued: {
  67         backgroundColor: theme.customs.colors.grey500,
  68     },
  69     headerFailed: {
  70         backgroundColor: theme.customs.colors.red900,
  71     },
  72     headerCanceled: {
  73         backgroundColor: theme.customs.colors.red900,
  74     },
  75 });
  76
  77 export enum SubprocessesStatus {
  78     ACTIVE = 'Active',
  79     COMPLETED = 'Completed',
  80     QUEUED = 'Queued',
  81     FAILED = 'Failed',
  82     CANCELED = 'Canceled'
  83 }
  84
  85 export interface SubprocessItemProps {
  86     title: string;
  87     status: string;
  88     runtime?: string;
  89 }
  90
  91 export interface ProcessSubprocessesCardDataProps {
  92     onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
  93     subprocess: Process;
  94 }
  95
  96 type ProcessSubprocessesCardProps = ProcessSubprocessesCardDataProps & WithStyles<CssRules>;
  97
  98 export const ProcessSubprocessesCard = withStyles(styles, { withTheme: true })(
  99     ({ classes, onContextMenu, subprocess, theme }: ProcessSubprocessesCardProps) => {
 100         return <Card>
 101             <CardHeader
 102                 className={classes.header}
 103                 style={{ backgroundColor: getProcessStatusColor(getProcessStatus(subprocess), theme as ArvadosTheme) }}
 104                 classes={{ content: classes.title, action: classes.action }}
 105                 action={
 106                     <div className={classes.rightSideHeader}>
 107                         <Typography noWrap variant="body2" className={classes.status}>
 108                             {getProcessStatus(subprocess)}
 109                         </Typography>
 110                         <IconButton
 111                             className={classes.options}
 112                             aria-label="More options"
 113                             onClick={onContextMenu}>
 114                             <MoreOptionsIcon />
 115                         </IconButton>
 116                     </div>
 117                 }
 118                 title={
 119                     <Tooltip title={subprocess.containerRequest.name}>
 120                         <Typography noWrap variant="body2" className={classes.titleHeader}>
 121                             {subprocess.containerRequest.name}
 122                         </Typography>
 123                     </Tooltip>
 124                 } />
 125             <CardContent className={classes.content}>
 126                 <DetailsAttribute classLabel={classes.label} classValue={classes.value}
 127                     label="Runtime" value={formatTime(getProcessRuntime(subprocess))} />
 128             </CardContent>
 129         </Card>;
 130     });