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

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import {
   7     StyleRulesCallback, WithStyles, withStyles, Card,
   8     CardHeader, IconButton, CardContent, Grid, Chip, Typography, Tooltip
   9 } from '@material-ui/core';
  10 import { ArvadosTheme } from '~/common/custom-theme';
  11 import { MoreOptionsIcon, ProcessIcon } from '~/components/icon/icon';
  12 import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
  13
  14 type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'headerText' | 'link' | 'content' | 'title' | 'avatar';
  15
  16 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  17     card: {
  18         marginBottom: theme.spacing.unit * 2
  19     },
  20     iconHeader: {
  21         fontSize: '1.875rem',
  22         color: theme.customs.colors.green700,
  23     },
  24     avatar: {
  25         alignSelf: 'flex-start'
  26     },
  27     label: {
  28         display: 'flex',
  29         justifyContent: 'flex-end',
  30         fontSize: '0.875rem',
  31         marginRight: theme.spacing.unit * 3,
  32         paddingRight: theme.spacing.unit
  33     },
  34     value: {
  35         textTransform: 'none',
  36         fontSize: '0.875rem',
  37     },
  38     link: {
  39         fontSize: '0.875rem',
  40         color: theme.palette.primary.main,
  41         '&:hover': {
  42             cursor: 'pointer'
  43         }
  44     },
  45     chip: {
  46         height: theme.spacing.unit * 3,
  47         width: theme.spacing.unit * 12,
  48         backgroundColor: theme.customs.colors.green700,
  49         color: theme.palette.common.white,
  50         fontSize: '0.875rem',
  51         borderRadius: theme.spacing.unit * 0.625,
  52     },
  53     headerText: {
  54         fontSize: '0.875rem',
  55         marginLeft: theme.spacing.unit * 3,
  56     },
  57     content: {
  58         '&:last-child': {
  59             paddingBottom: theme.spacing.unit * 2,
  60             paddingTop: '0px'
  61         }
  62     },
  63     title: {
  64         overflow: 'hidden'
  65     }
  66 });
  67
  68 export interface ProcessInformationCardDataProps {
  69     item: any;
  70     onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
  71 }
  72
  73 type ProcessInformationCardProps = ProcessInformationCardDataProps & WithStyles<CssRules>;
  74
  75 export const ProcessInformationCard = withStyles(styles)(
  76     ({ classes, onContextMenu }: ProcessInformationCardProps) =>
  77         <Card className={classes.card}>
  78             <CardHeader
  79                 classes={{
  80                     content: classes.title,
  81                     avatar: classes.avatar
  82                 }}
  83                 avatar={<ProcessIcon className={classes.iconHeader} />}
  84                 action={
  85                     <div>
  86                         <Chip label="Complete" className={classes.chip} />
  87                         <IconButton
  88                             aria-label="More options"
  89                             onClick={event => onContextMenu(event)}>
  90                             <MoreOptionsIcon />
  91                         </IconButton>
  92                     </div>
  93                 }
  94                 title={
  95                     <Tooltip title="Pipeline template that generates a config file from a template">
  96                         <Typography noWrap variant="title">
  97                             Pipeline template that generates a config file from a template
  98                         </Typography>
  99                     </Tooltip>
 100                 }
 101                 subheader="(no-description)" />
 102             <CardContent className={classes.content}>
 103                 <Grid container>
 104                     <Grid item xs={6}>
 105                         <DetailsAttribute classLabel={classes.label} classValue={classes.value}
 106                             label='From' value="1:25 PM 3/23/2018" />
 107                         <DetailsAttribute classLabel={classes.label} classValue={classes.value}
 108                             label='To' value='1:25 PM 3/23/2018' />
 109                         <DetailsAttribute classLabel={classes.label} classValue={classes.link}
 110                             label='Workflow' value='FastQC MultiQC' />
 111                     </Grid>
 112                     <Grid item xs={6}>
 113                         <DetailsAttribute classLabel={classes.link} label='Outputs' />
 114                         <DetailsAttribute classLabel={classes.link} label='Inputs' />
 115                     </Grid>
 116                 </Grid>
 117             </CardContent>
 118         </Card>
 119 );