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 * as classnames from "classnames";
  11 import { ArvadosTheme } from '~/common/custom-theme';
  12 import { MoreOptionsIcon } from '~/components/icon/icon';
  13 import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
  14 import { getBackgroundColorStatus } from '~/views/process-panel/process-panel-root';
  15 import { Process, getProcessStatus, getProcessRuntime } from '~/store/processes/process';
  16 import { msToTime } from '~/common/formatters';
  17
  18 export type CssRules = 'label' | 'value' | 'title' | 'content' | 'action' | 'options' | 'status' | 'rightSideHeader' | 'titleHeader'
  19     | 'header' | 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
  20
  21 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  22     label: {
  23         fontSize: '0.875rem',
  24     },
  25     value: {
  26         textTransform: 'none',
  27         fontSize: '0.875rem',
  28     },
  29     title: {
  30         overflow: 'hidden'
  31     },
  32     content: {
  33         paddingTop: theme.spacing.unit * 0.5,
  34         '&:last-child': {
  35             paddingBottom: 0
  36         }
  37     },
  38     action: {
  39         marginTop: 0
  40     },
  41     options: {
  42         width: theme.spacing.unit * 4,
  43         height: theme.spacing.unit * 4,
  44         color: theme.palette.common.white,
  45     },
  46     status: {
  47         paddingTop: theme.spacing.unit * 0.5,
  48         color: theme.palette.common.white,
  49     },
  50     rightSideHeader: {
  51         display: 'flex'
  52     },
  53     titleHeader: {
  54         color: theme.palette.common.white,
  55         fontWeight: 600
  56     },
  57     header: {
  58         paddingTop: 0,
  59         paddingBottom: 0,
  60     },
  61     headerActive: {
  62         backgroundColor: theme.customs.colors.blue500,
  63     },
  64     headerCompleted: {
  65         backgroundColor: theme.customs.colors.green700,
  66     },
  67     headerQueued: {
  68         backgroundColor: theme.customs.colors.grey500,
  69     },
  70     headerFailed: {
  71         backgroundColor: theme.customs.colors.red900,
  72     },
  73     headerCanceled: {
  74         backgroundColor: theme.customs.colors.red900,
  75     },
  76 });
  77
  78 export enum SubprocessesStatus {
  79     ACTIVE = 'Active',
  80     COMPLETED = 'Completed',
  81     QUEUED = 'Queued',
  82     FAILED = 'Failed',
  83     CANCELED = 'Canceled'
  84 }
  85
  86 export interface SubprocessItemProps {
  87     title: string;
  88     status: string;
  89     runtime?: string;
  90 }
  91
  92 export interface ProcessSubprocessesCardDataProps {
  93     onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
  94     subprocess: Process;
  95 }
  96
  97 type ProcessSubprocessesCardProps = ProcessSubprocessesCardDataProps & WithStyles<CssRules>;
  98
  99 export const ProcessSubprocessesCard = withStyles(styles)(
 100     ({ classes, onContextMenu, subprocess }: ProcessSubprocessesCardProps) => {
 101         return <Card>
 102             <CardHeader
 103                 className={classnames([classes.header, getBackgroundColorStatus(getProcessStatus(subprocess), classes)])}
 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={event => onContextMenu(event)}>
 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={msToTime(getProcessRuntime(subprocess))} />
 128             </CardContent>
 129         </Card>;
 130     });