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