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 {
   7     StyleRulesCallback, WithStyles, withStyles, Card,
   8     CardHeader, IconButton, CardContent, Grid, Typography, Tooltip
   9 } from '@material-ui/core';
  10 import { Process } from '~/store/processes/process';
  11 import { ProcessLogForm, ProcessLogFormDataProps, ProcessLogFormActionProps } from '~/views/process-log-panel/process-log-form';
  12 import { MoreOptionsIcon, ProcessIcon } from '~/components/icon/icon';
  13 import { ArvadosTheme } from '~/common/custom-theme';
  14
  15 type CssRules = 'root' | 'card' | 'iconHeader';
  16
  17 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  18     root: {
  19
  20     },
  21     card: {
  22         width: '100%'
  23     },
  24     iconHeader: {
  25         fontSize: '1.875rem',
  26         color: theme.customs.colors.green700
  27     }
  28 });
  29
  30
  31 interface ProcessLogMainCardDataProps {
  32     process: Process;
  33 }
  34
  35 export type ProcessLogMainCardProps = ProcessLogMainCardDataProps & ProcessLogFormDataProps & ProcessLogFormActionProps;
  36
  37 export const ProcessLogMainCard = withStyles(styles)(
  38     ({ classes, process, selectedFilter, filters, onChange }: ProcessLogMainCardProps & WithStyles<CssRules>) =>
  39         <Card className={classes.card}>
  40             <CardHeader
  41                 avatar={<ProcessIcon className={classes.iconHeader} />}
  42                 action={
  43                     <div>
  44                         <IconButton aria-label="More options">
  45                             <MoreOptionsIcon />
  46                         </IconButton>
  47                     </div>
  48                 }
  49                 title={
  50                     <Tooltip title={process.containerRequest.name}>
  51                         <Typography noWrap variant="title">
  52                             {process.containerRequest.name}
  53                         </Typography>
  54                     </Tooltip>
  55                 }
  56                 subheader={process.containerRequest.description} />
  57             <CardContent>
  58                 <Grid container spacing={24} alignItems='center'>
  59                     <Grid item xs={6}>
  60                         <ProcessLogForm selectedFilter={selectedFilter} filters={filters} onChange={onChange} />
  61                     </Grid>
  62                     <Grid item xs={6}>
  63                         Container log for request ardev-xvhdp-q3uqbfxeb6w64pm
  64                     </Grid>
  65                     <Grid item xs={12}>
  66                         {/* add snippet */}
  67                     </Grid>
  68                 </Grid>
  69             </CardContent>
  70         </Card>
  71 );