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