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 React from 'react';
   6 import {
   7     StyleRulesCallback,
   8     WithStyles,
   9     withStyles,
  10     Card,
  11     CardHeader,
  12     IconButton,
  13     CardContent,
  14     Grid,
  15     Typography,
  16     Tooltip
  17 } from '@material-ui/core';
  18 import { Process } from 'store/processes/process';
  19 import { ProcessLogCodeSnippet } from 'views/process-log-panel/process-log-code-snippet';
  20 import {
  21     ProcessLogForm,
  22     ProcessLogFormDataProps,
  23     ProcessLogFormActionProps
  24 } from 'views/process-log-panel/process-log-form';
  25 import { MoreOptionsIcon, LogIcon } from 'components/icon/icon';
  26 import { ArvadosTheme } from 'common/custom-theme';
  27 import { CodeSnippetDataProps } from 'components/code-snippet/code-snippet';
  28 import { DefaultView } from 'components/default-view/default-view';
  29
  30 type CssRules = 'backLink' | 'backIcon' | 'card' | 'title' | 'iconHeader' | 'link';
  31
  32 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  33     backLink: {
  34         fontSize: '14px',
  35         fontWeight: 600,
  36         display: 'flex',
  37         alignItems: 'center',
  38         textDecoration: 'none',
  39         padding: theme.spacing.unit,
  40         color: theme.palette.grey["700"],
  41     },
  42     backIcon: {
  43         marginRight: theme.spacing.unit
  44     },
  45     card: {
  46         width: '100%'
  47     },
  48     title: {
  49         color: theme.palette.grey["700"]
  50     },
  51     iconHeader: {
  52         fontSize: '1.875rem',
  53         color: theme.customs.colors.green700
  54     },
  55     link: {
  56         fontSize: '0.875rem',
  57         color: theme.palette.primary.main,
  58         textAlign: 'right',
  59         '&:hover': {
  60             cursor: 'pointer'
  61         }
  62     }
  63 });
  64
  65 interface ProcessLogMainCardDataProps {
  66     process: Process;
  67 }
  68
  69 export interface ProcessLogMainCardActionProps {
  70     onContextMenu: (event: React.MouseEvent<any>, process: Process) => void;
  71     navigateToLogCollection: (uuid: string) => void;
  72 }
  73
  74 export type ProcessLogMainCardProps = ProcessLogMainCardDataProps
  75     & ProcessLogMainCardActionProps
  76     & CodeSnippetDataProps
  77     & ProcessLogFormDataProps
  78     & ProcessLogFormActionProps;
  79
  80 export const ProcessLogMainCard = withStyles(styles)(
  81     ({ classes, process, selectedFilter, filters, onChange, lines, onContextMenu, navigateToLogCollection }: ProcessLogMainCardProps & WithStyles<CssRules>) =>
  82         <Grid item xs={12}>
  83             <Card className={classes.card}>
  84                 <CardHeader
  85                     avatar={<LogIcon className={classes.iconHeader} />}
  86                     action={
  87                         <Tooltip title="More options" disableFocusListener>
  88                             <IconButton onClick={event => onContextMenu(event, process)} aria-label="More options">
  89                                 <MoreOptionsIcon />
  90                             </IconButton>
  91                         </Tooltip>}
  92                     title={
  93                         <Typography noWrap variant='h6' className={classes.title}>
  94                             Logs for {process.containerRequest.name}
  95                         </Typography>}
  96                 />
  97                 <CardContent>
  98                     {lines.length > 0
  99                         ? < Grid
 100                             container
 101                             spacing={24}
 102                             direction='column'>
 103                             <Grid container item>
 104                                 <Grid item xs={6}>
 105                                     <ProcessLogForm selectedFilter={selectedFilter} filters={filters} onChange={onChange} />
 106                                 </Grid>
 107                                 <Grid item xs={6} className={classes.link}>
 108                                     <span onClick={() => navigateToLogCollection(process.containerRequest.logUuid!)}>
 109                                         Go to Log collection
 110                                     </span>
 111                                 </Grid>
 112                             </Grid>
 113                             <Grid item xs>
 114                                 <ProcessLogCodeSnippet lines={lines} />
 115                             </Grid>
 116                         </Grid>
 117                         : <DefaultView
 118                             icon={LogIcon}
 119                             messages={['No logs yet']} />
 120                     }
 121                 </CardContent>
 122             </Card>
 123         </Grid >
 124 );