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, 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';
16 export type CssRules = 'label' | 'value' | 'title' | 'content' | 'action' | 'options' | 'status' | 'rightSideHeader' | 'titleHeader'
17 | 'header' | 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
19 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
24 textTransform: 'none',
31 paddingTop: theme.spacing.unit * 0.5,
40 width: theme.spacing.unit * 4,
41 height: theme.spacing.unit * 4,
42 color: theme.palette.common.white,
45 paddingTop: theme.spacing.unit * 0.5,
46 color: theme.palette.common.white,
52 color: theme.palette.common.white,
60 backgroundColor: theme.customs.colors.blue500,
63 backgroundColor: theme.customs.colors.green700,
66 backgroundColor: theme.customs.colors.grey500,
69 backgroundColor: theme.customs.colors.red900,
72 backgroundColor: theme.customs.colors.red900,
76 export interface ProcessSubprocessesCardDataProps {
77 onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
81 type ProcessSubprocessesCardProps = ProcessSubprocessesCardDataProps & WithStyles<CssRules>;
83 export const ProcessSubprocessesCard = withStyles(styles)(
84 ({ classes, onContextMenu, items }: ProcessSubprocessesCardProps) => {
87 className={classnames([classes.header, getBackgroundColorStatus(items.status, classes)])}
88 classes={{ content: classes.title, action: classes.action }}
90 <div className={classes.rightSideHeader}>
91 <Typography noWrap variant="body2" className={classes.status}>
95 className={classes.options}
96 aria-label="More options"
97 onClick={event => onContextMenu(event)}>
103 <Tooltip title={items.title}>
104 <Typography noWrap variant="body2" className={classes.titleHeader}>
109 <CardContent className={classes.content}>
110 <DetailsAttribute classLabel={classes.label} classValue={classes.value}
111 label='Runtime' value="0h 2m" />