src/views/process-panel/process-details-card.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import {
   7     StyleRulesCallback,
   8     WithStyles,
   9     withStyles,
  10     Card,
  11     CardHeader,
  12     IconButton,
  13     CardContent,
  14     Tooltip,
  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';
  21
  22 type CssRules = 'card' | 'content' | 'title';
  23
  24 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  25     card: {
  26         height: '100%'
  27     },
  28     content: {
  29         '&:last-child': {
  30             paddingBottom: theme.spacing.unit * 2,
  31         }
  32     },
  33     title: {
  34         overflow: 'hidden',
  35         paddingTop: theme.spacing.unit * 0.5
  36     },
  37 });
  38
  39 export interface ProcessDetailsCardDataProps {
  40     process: Process;
  41 }
  42
  43 type ProcessDetailsCardProps = ProcessDetailsCardDataProps & WithStyles<CssRules> & MPVPanelProps;
  44
  45 export const ProcessDetailsCard = withStyles(styles)(
  46     ({ classes, process, doHidePanel, panelName }: ProcessDetailsCardProps) => {
  47         return <Card className={classes.card}>
  48             <CardHeader
  49                 classes={{
  50                     content: classes.title,
  51                 }}
  52                 title='Details'
  53                 action={ doHidePanel &&
  54                         <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
  55                             <IconButton onClick={doHidePanel}><CloseIcon /></IconButton>
  56                         </Tooltip> } />
  57             <CardContent className={classes.content}>
  58                 <ProcessDetailsAttributes item={process.containerRequest} twoCol />
  59             </CardContent>
  60         </Card>;
  61     }
  62 );
  63