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 interface ProcessLogMainCardActionProps {
  57     onContextMenu: (event: React.MouseEvent<any>, process: Process) => void;
  58 }
  59
  60 export type ProcessLogMainCardProps = ProcessLogMainCardDataProps
  61     & ProcessLogMainCardActionProps
  62     & CodeSnippetDataProps
  63     & ProcessLogFormDataProps
  64     & ProcessLogFormActionProps;
  65
  66 export const ProcessLogMainCard = withStyles(styles)(
  67     ({ classes, process, selectedFilter, filters, onChange, lines, onContextMenu }: ProcessLogMainCardProps & WithStyles<CssRules>) =>
  68         <Grid item xs={12}>
  69             <Link to={`/processes/${process.containerRequest.uuid}`} className={classes.backLink}>
  70                 <BackIcon className={classes.backIcon} /> Back
  71             </Link>
  72             <Card className={classes.card}>
  73                 <CardHeader
  74                     avatar={<ProcessIcon className={classes.iconHeader} />}
  75                     action={
  76                         <Tooltip title="More options" disableFocusListener>
  77                             <IconButton onClick={event => onContextMenu(event, process)} aria-label="More options">
  78                                 <MoreOptionsIcon />
  79                             </IconButton>
  80                         </Tooltip>}
  81                     title={
  82                         <Tooltip title={process.containerRequest.name} placement="bottom-start">
  83                             <Typography noWrap variant="title" className={classes.title}>
  84                                 {process.containerRequest.name}
  85                             </Typography>
  86                         </Tooltip>}
  87                     subheader={process.containerRequest.description} />
  88                 <CardContent>
  89                     {lines.length > 0
  90                         ? < Grid
  91                             container
  92                             spacing={24}
  93                             direction='column'>
  94                             <Grid container item>
  95                                 <Grid item xs={6}>
  96                                     <ProcessLogForm selectedFilter={selectedFilter} filters={filters} onChange={onChange} />
  97                                 </Grid>
  98                                 <Grid item xs={6} className={classes.link}>
  99                                     <Typography component='div'>
 100                                         Go to Log collection
 101                                 </Typography>
 102                                 </Grid>
 103                             </Grid>
 104                             <Grid item xs>
 105                                 <ProcessLogCodeSnippet lines={lines} />
 106                             </Grid>
 107                         </Grid>
 108                         : <DefaultView
 109                             icon={ProcessIcon}
 110                             messages={['No logs yet']} />
 111                     }
 112                 </CardContent>
 113             </Card>
 114         </Grid >
 115 );