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' | 'header';
  23
  24 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  25     card: {
  26         height: '100%'
  27     },
  28     header: {
  29         paddingTop: theme.spacing.unit,
  30         paddingBottom: theme.spacing.unit,
  31     },
  32     content: {
  33         '&:last-child': {
  34             paddingBottom: theme.spacing.unit * 2,
  35         }
  36     },
  37     title: {
  38         overflow: 'hidden',
  39         paddingTop: theme.spacing.unit * 0.5
  40     },
  41 });
  42
  43 export interface ProcessDetailsCardDataProps {
  44     process: Process;
  45 }
  46
  47 type ProcessDetailsCardProps = ProcessDetailsCardDataProps & WithStyles<CssRules> & MPVPanelProps;
  48
  49 export const ProcessDetailsCard = withStyles(styles)(
  50     ({ classes, process, doHidePanel, panelName }: ProcessDetailsCardProps) => {
  51         return <Card className={classes.card}>
  52             <CardHeader
  53                 className={classes.header}
  54                 classes={{
  55                     content: classes.title,
  56                 }}
  57                 title='Details'
  58                 action={ doHidePanel &&
  59                         <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
  60                             <IconButton onClick={doHidePanel}><CloseIcon /></IconButton>
  61                         </Tooltip> } />
  62             <CardContent className={classes.content}>
  63                 <ProcessDetailsAttributes item={process.containerRequest} twoCol />
  64             </CardContent>
  65         </Card>;
  66     }
  67 );
  68