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 import { DefaultView } from '~/components/default-view/default-view';
  19
  20 type CssRules = 'backLink' | 'backIcon' | 'card' | 'title' | 'iconHeader' | 'link';
  21
  22 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  23     backLink: {
  24         fontSize: '1rem',
  25         fontWeight: 600,
  26         display: 'flex',
  27         alignItems: 'center',
  28         textDecoration: 'none',
  29         padding: theme.spacing.unit,
  30         color: theme.palette.grey["700"],
  31     },
  32     backIcon: {
  33         marginRight: theme.spacing.unit
  34     },
  35     card: {
  36         width: '100%'
  37     },
  38     title: {
  39         color: theme.palette.grey["700"]
  40     },
  41     iconHeader: {
  42         fontSize: '1.875rem',
  43         color: theme.customs.colors.green700
  44     },
  45     link: {
  46         alignSelf: 'flex-end',
  47         textAlign: 'right'
  48     }
  49 });
  50
  51
  52 interface ProcessLogMainCardDataProps {
  53     process: Process;
  54 }
  55
  56 export type ProcessLogMainCardProps = ProcessLogMainCardDataProps & CodeSnippetDataProps & ProcessLogFormDataProps & ProcessLogFormActionProps;
  57
  58 export const ProcessLogMainCard = withStyles(styles)(
  59     ({ classes, process, selectedFilter, filters, onChange, lines }: ProcessLogMainCardProps & WithStyles<CssRules>) =>
  60         <Grid item xs={12}>
  61             <Link to={`/processes/${process.containerRequest.uuid}`} className={classes.backLink}>
  62                 <BackIcon className={classes.backIcon} /> Back
  63             </Link>
  64             <Card className={classes.card}>
  65                 <CardHeader
  66                     avatar={<ProcessIcon className={classes.iconHeader} />}
  67                     action={
  68                         <div>
  69                             <IconButton aria-label="More options">
  70                                 <Tooltip title="More options">
  71                                     <MoreOptionsIcon />
  72                                 </Tooltip>
  73                             </IconButton>
  74                         </div>
  75                     }
  76                     title={
  77                         <Tooltip title={process.containerRequest.name} placement="bottom-start">
  78                             <Typography noWrap variant="title" className={classes.title}>
  79                                 {process.containerRequest.name}
  80                             </Typography>
  81                         </Tooltip>
  82                     }
  83                     subheader={process.containerRequest.description} />
  84                 <CardContent>
  85                     {lines.length > 0
  86                         ? < Grid container spacing={24} alignItems='center'>
  87                             <Grid item xs={6}>
  88                                 <ProcessLogForm selectedFilter={selectedFilter} filters={filters} onChange={onChange} />
  89                             </Grid>
  90                             <Grid item xs={6} className={classes.link}>
  91                                 <Typography component='div'>
  92                                     Go to Log collection
  93                                 </Typography>
  94                             </Grid>
  95                             <Grid item xs={12}>
  96                                 <ProcessLogCodeSnippet lines={lines} />
  97                             </Grid>
  98                         </Grid>
  99                         : <DefaultView
 100                             icon={ProcessIcon}
 101                             messages={['No logs yet']} />
 102                     }
 103                 </CardContent>
 104             </Card>
 105         </Grid >
 106 );