1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React from 'react';
15 } from '@material-ui/core';
16 import { ArvadosTheme } from 'common/custom-theme';
17 import { CloseIcon } from 'components/icon/icon';
18 import { Process } from 'store/processes/process';
19 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
20 import { ProcessDetailsAttributes } from './process-details-attributes';
22 type CssRules = 'card' | 'content' | 'title' | 'header';
24 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
29 paddingTop: theme.spacing.unit,
30 paddingBottom: theme.spacing.unit,
34 paddingBottom: theme.spacing.unit * 2,
39 paddingTop: theme.spacing.unit * 0.5
43 export interface ProcessDetailsCardDataProps {
47 type ProcessDetailsCardProps = ProcessDetailsCardDataProps & WithStyles<CssRules> & MPVPanelProps;
49 export const ProcessDetailsCard = withStyles(styles)(
50 ({ classes, process, doHidePanel, panelName }: ProcessDetailsCardProps) => {
51 return <Card className={classes.card}>
53 className={classes.header}
55 content: classes.title,
58 action={ doHidePanel &&
59 <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
60 <IconButton onClick={doHidePanel}><CloseIcon /></IconButton>
62 <CardContent className={classes.content}>
63 <ProcessDetailsAttributes item={process.containerRequest} twoCol />