1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
7 StyleRulesCallback, WithStyles, withStyles, Card,
8 CardHeader, IconButton, CardContent, Grid, Chip, Typography, Tooltip
9 } from '@material-ui/core';
10 import * as classnames from "classnames";
11 import { ArvadosTheme } from '~/common/custom-theme';
12 import { MoreOptionsIcon, ProcessIcon } from '~/components/icon/icon';
13 import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
14 import { getBackgroundColorStatus } from '~/views/process-panel/process-panel';
15 import { SubprocessesStatus } from '~/views/process-panel/process-subprocesses';
17 type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'link' | 'content' | 'title' | 'avatar'
18 | 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
20 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
22 marginBottom: theme.spacing.unit * 2
26 color: theme.customs.colors.green700,
29 alignSelf: 'flex-start',
30 paddingTop: theme.spacing.unit * 0.5
34 justifyContent: 'flex-end',
36 marginRight: theme.spacing.unit * 3,
37 paddingRight: theme.spacing.unit
40 textTransform: 'none',
45 color: theme.palette.primary.main,
51 height: theme.spacing.unit * 3,
52 width: theme.spacing.unit * 12,
53 color: theme.palette.common.white,
55 borderRadius: theme.spacing.unit * 0.625,
59 paddingBottom: theme.spacing.unit * 2,
65 paddingTop: theme.spacing.unit * 0.5
68 backgroundColor: theme.customs.colors.blue500,
71 backgroundColor: theme.customs.colors.green700,
74 backgroundColor: theme.customs.colors.grey500,
77 backgroundColor: theme.customs.colors.red900,
80 backgroundColor: theme.customs.colors.red900,
84 export interface ProcessInformationCardDataProps {
86 onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
89 type ProcessInformationCardProps = ProcessInformationCardDataProps & WithStyles<CssRules>;
91 export const ProcessInformationCard = withStyles(styles)(
92 ({ classes, onContextMenu }: ProcessInformationCardProps) =>
93 <Card className={classes.card}>
96 content: classes.title,
97 avatar: classes.avatar
99 avatar={<ProcessIcon className={classes.iconHeader} />}
102 <Chip label={SubprocessesStatus.ACTIVE}
103 className={classnames([classes.chip, getBackgroundColorStatus(SubprocessesStatus.ACTIVE, classes)])} />
105 aria-label="More options"
106 onClick={event => onContextMenu(event)}>
112 <Tooltip title="Pipeline template that generates a config file from a template">
113 <Typography noWrap variant="title">
114 Pipeline template that generates a config file from a template
118 subheader="(no-description)" />
119 <CardContent className={classes.content}>
122 <DetailsAttribute classLabel={classes.label} classValue={classes.value}
123 label='From' value="1:25 PM 3/23/2018" />
124 <DetailsAttribute classLabel={classes.label} classValue={classes.value}
125 label='To' value='1:25 PM 3/23/2018' />
126 <DetailsAttribute classLabel={classes.label} classValue={classes.link}
127 label='Workflow' value='FastQC MultiQC' />
130 <DetailsAttribute classLabel={classes.link} label='Outputs' />
131 <DetailsAttribute classLabel={classes.link} label='Inputs' />