small changes
[arvados-workbench2.git] / 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'| 'header';
18
19 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
20     label: {
21         fontSize: '0.875rem',
22     },
23     value: {
24         textTransform: 'none',
25         fontSize: '0.875rem',
26     },
27     title: {
28         overflow: 'hidden'
29     },
30     content: {
31         paddingTop: theme.spacing.unit * 0.5,
32         '&:last-child': {
33             paddingBottom: 0
34         }
35     },
36     action: {
37         marginTop: 0
38     },
39     options: {
40         width: theme.spacing.unit * 4,
41         height: theme.spacing.unit * 4,
42         color: theme.palette.common.white,
43     },
44     status: {
45         paddingTop: theme.spacing.unit * 0.5,
46         color: theme.palette.common.white,
47     },
48     rightSideHeader: {
49         display: 'flex'
50     },
51     titleHeader: {
52         color: theme.palette.common.white,
53         fontWeight: 600
54     },
55     header: {
56         paddingTop: 0,
57         paddingBottom: 0,
58     },
59 });
60
61 export enum SubprocessesStatus {
62     ACTIVE = 'Active',
63     COMPLETED = 'Completed',
64     QUEUED = 'Queued',
65     FAILED = 'Failed',
66     CANCELED = 'Canceled'
67 }
68
69 export interface SubprocessItemProps {
70     title: string;
71     status: string;
72     runtime?: string;
73 }
74
75 export interface ProcessSubprocessesCardDataProps {
76     onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
77     subprocess: Process;
78 }
79
80 type ProcessSubprocessesCardProps = ProcessSubprocessesCardDataProps & WithStyles<CssRules>;
81
82 export const ProcessSubprocessesCard = withStyles(styles, { withTheme: true })(
83     ({ classes, onContextMenu, subprocess, theme }: ProcessSubprocessesCardProps) => {
84         return <Card>
85             <CardHeader
86                 className={classes.header}
87                 style={{ backgroundColor: getProcessStatusColor(getProcessStatus(subprocess), theme as ArvadosTheme) }}
88                 classes={{ content: classes.title, action: classes.action }}
89                 action={
90                     <div className={classes.rightSideHeader}>
91                         <Typography noWrap variant="body2" className={classes.status}>
92                             {getProcessStatus(subprocess)}
93                         </Typography>
94                         <IconButton
95                             className={classes.options}
96                             aria-label="More options"
97                             onClick={onContextMenu}>
98                             <MoreOptionsIcon />
99                         </IconButton>
100                     </div>
101                 }
102                 title={
103                     <Tooltip title={subprocess.containerRequest.name}>
104                         <Typography noWrap variant="body2" className={classes.titleHeader}>
105                             {subprocess.containerRequest.name}
106                         </Typography>
107                     </Tooltip>
108                 } />
109             <CardContent className={classes.content}>
110                 <DetailsAttribute classLabel={classes.label} classValue={classes.value}
111                     label="Runtime" value={formatTime(getProcessRuntime(subprocess))} />
112             </CardContent>
113         </Card>;
114     });