src/views/process-log-panel/process-log-main-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 { Link } from 'react-router-dom';
   7 import {
   8     StyleRulesCallback, WithStyles, withStyles, Card,
   9     CardHeader, IconButton, CardContent, Grid, Typography, Tooltip
  10 } from '@material-ui/core';
  11 import { Process } from '~/store/processes/process';
  12 import { ProcessLogCodeSnippet } from '~/views/process-log-panel/process-log-code-snippet';
  13 import { ProcessLogForm, ProcessLogFormDataProps, ProcessLogFormActionProps } from '~/views/process-log-panel/process-log-form';
  14 import { MoreOptionsIcon, ProcessIcon } from '~/components/icon/icon';
  15 import { ArvadosTheme } from '~/common/custom-theme';
  16 import { CodeSnippetDataProps } from '~/components/code-snippet/code-snippet';
  17 import { BackIcon } from '~/components/icon/icon';
  18
  19 type CssRules = 'backLink' | 'backIcon' | 'card' | 'title' | 'iconHeader' | 'link';
  20
  21 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  22     backLink: {
  23         fontSize: '1rem',
  24         fontWeight: 600,
  25         display: 'flex',
  26         alignItems: 'center',
  27         textDecoration: 'none',
  28         padding: theme.spacing.unit,
  29         color: theme.palette.grey["700"],
  30     },
  31     backIcon: {
  32         marginRight: theme.spacing.unit
  33     },
  34     card: {
  35         width: '100%'
  36     },
  37     title: {
  38         color: theme.palette.grey["700"]
  39     },
  40     iconHeader: {
  41         fontSize: '1.875rem',
  42         color: theme.customs.colors.green700
  43     },
  44     link: {
  45         alignSelf: 'flex-end',
  46         textAlign: 'right'
  47     }
  48 });
  49
  50
  51 interface ProcessLogMainCardDataProps {
  52     process: Process;
  53 }
  54
  55 export type ProcessLogMainCardProps = ProcessLogMainCardDataProps & CodeSnippetDataProps & ProcessLogFormDataProps & ProcessLogFormActionProps;
  56
  57 export const ProcessLogMainCard = withStyles(styles)(
  58     ({ classes, process, selectedFilter, filters, onChange, lines }: ProcessLogMainCardProps & WithStyles<CssRules>) =>
  59         <Grid item xs={12}>
  60             <Link to={`/processes/${process.containerRequest.uuid}`} className={classes.backLink}>
  61                 <BackIcon className={classes.backIcon}/> Back
  62             </Link>
  63             <Card className={classes.card}>
  64                 <CardHeader
  65                     avatar={<ProcessIcon className={classes.iconHeader} />}
  66                     action={
  67                         <div>
  68                             <IconButton aria-label="More options">
  69                                 <MoreOptionsIcon />
  70                             </IconButton>
  71                         </div>
  72                     }
  73                     title={
  74                         <Tooltip title={process.containerRequest.name}>
  75                             <Typography noWrap variant="title" className={classes.title}>
  76                                 {process.containerRequest.name}
  77                             </Typography>
  78                         </Tooltip>
  79                     }
  80                     subheader={process.containerRequest.description} />
  81                 <CardContent>
  82                     <Grid container spacing={24} alignItems='center'>
  83                         <Grid item xs={6}>
  84                             <ProcessLogForm selectedFilter={selectedFilter} filters={filters} onChange={onChange} />
  85                         </Grid>
  86                         <Grid item xs={6} className={classes.link}>
  87                             <Typography component='div'>
  88                                 Container log for request {process.containerRequest.uuid}
  89                             </Typography>
  90                         </Grid>
  91                         <Grid item xs={12}>
  92                             <ProcessLogCodeSnippet lines={lines}/>
  93                         </Grid>
  94                     </Grid>
  95                 </CardContent>
  96             </Card>
  97         </Grid>
  98 );