1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { Link } from 'react-router-dom';
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';
19 type CssRules = 'backLink' | 'backIcon' | 'card' | 'title' | 'iconHeader' | 'link';
21 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
27 textDecoration: 'none',
28 padding: theme.spacing.unit,
29 color: theme.palette.grey["700"],
32 marginRight: theme.spacing.unit
38 color: theme.palette.grey["700"]
42 color: theme.customs.colors.green700
45 alignSelf: 'flex-end',
51 interface ProcessLogMainCardDataProps {
55 export type ProcessLogMainCardProps = ProcessLogMainCardDataProps & CodeSnippetDataProps & ProcessLogFormDataProps & ProcessLogFormActionProps;
57 export const ProcessLogMainCard = withStyles(styles)(
58 ({ classes, process, selectedFilter, filters, onChange, lines }: ProcessLogMainCardProps & WithStyles<CssRules>) =>
60 <Link to={`/processes/${process.containerRequest.uuid}`} className={classes.backLink}>
61 <BackIcon className={classes.backIcon}/> Back
63 <Card className={classes.card}>
65 avatar={<ProcessIcon className={classes.iconHeader} />}
68 <IconButton aria-label="More options">
74 <Tooltip title={process.containerRequest.name}>
75 <Typography noWrap variant="title" className={classes.title}>
76 {process.containerRequest.name}
80 subheader={process.containerRequest.description} />
82 <Grid container spacing={24} alignItems='center'>
84 <ProcessLogForm selectedFilter={selectedFilter} filters={filters} onChange={onChange} />
86 <Grid item xs={6} className={classes.link}>
87 <Typography component='div'>
88 Container log for request {process.containerRequest.uuid}
92 <ProcessLogCodeSnippet lines={lines}/>