import * as React from 'react';
import AccessTime from '@material-ui/icons/AccessTime';
+import ArrowBack from '@material-ui/icons/ArrowBack';
import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
import BubbleChart from '@material-ui/icons/BubbleChart';
import Cached from '@material-ui/icons/Cached';
export const AddFavoriteIcon: IconType = (props) => <StarBorder {...props} />;
export const AdvancedIcon: IconType = (props) => <SettingsApplications {...props} />;
+export const BackIcon: IconType = (props) => <ArrowBack {...props} />;
export const CustomizeTableIcon: IconType = (props) => <Menu {...props} />;
export const CopyIcon: IconType = (props) => <ContentCopy {...props} />;
export const CollectionIcon: IconType = (props) => <LibraryBooks {...props} />;
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
+import { Link } from 'react-router-dom';
import {
StyleRulesCallback, WithStyles, withStyles, Card,
CardHeader, IconButton, CardContent, Grid, Typography, Tooltip
import { MoreOptionsIcon, ProcessIcon } from '~/components/icon/icon';
import { ArvadosTheme } from '~/common/custom-theme';
import { CodeSnippetDataProps } from '~/components/code-snippet/code-snippet';
+import { BackIcon } from '~/components/icon/icon';
-type CssRules = 'card' | 'iconHeader' | 'link';
+type CssRules = 'backLink' | 'backIcon' | 'card' | 'title' | 'iconHeader' | 'link';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ backLink: {
+ fontSize: '1rem',
+ fontWeight: 600,
+ display: 'flex',
+ alignItems: 'center',
+ textDecoration: 'none',
+ padding: theme.spacing.unit,
+ color: theme.palette.grey["700"],
+ },
+ backIcon: {
+ marginRight: theme.spacing.unit
+ },
card: {
width: '100%'
},
+ title: {
+ color: theme.palette.grey["700"]
+ },
iconHeader: {
fontSize: '1.875rem',
color: theme.customs.colors.green700
export const ProcessLogMainCard = withStyles(styles)(
({ classes, process, selectedFilter, filters, onChange, lines }: ProcessLogMainCardProps & WithStyles<CssRules>) =>
- <Card className={classes.card}>
- <CardHeader
- avatar={<ProcessIcon className={classes.iconHeader} />}
- action={
- <div>
- <IconButton aria-label="More options">
- <MoreOptionsIcon />
- </IconButton>
- </div>
- }
- title={
- <Tooltip title={process.containerRequest.name}>
- <Typography noWrap variant="title">
- {process.containerRequest.name}
- </Typography>
- </Tooltip>
- }
- subheader={process.containerRequest.description} />
- <CardContent>
- <Grid container spacing={24} alignItems='center'>
- <Grid item xs={6}>
- <ProcessLogForm selectedFilter={selectedFilter} filters={filters} onChange={onChange} />
- </Grid>
- <Grid item xs={6} className={classes.link}>
- <Typography component='div'>
- Container log for request {process.containerRequest.uuid}
- </Typography>
- </Grid>
- <Grid item xs={12}>
- <ProcessLogCodeSnippet lines={lines}/>
+ <Grid item xs={12}>
+ <Link to={`/processes/${process.containerRequest.uuid}`} className={classes.backLink}>
+ <BackIcon className={classes.backIcon}/> Back
+ </Link>
+ <Card className={classes.card}>
+ <CardHeader
+ avatar={<ProcessIcon className={classes.iconHeader} />}
+ action={
+ <div>
+ <IconButton aria-label="More options">
+ <MoreOptionsIcon />
+ </IconButton>
+ </div>
+ }
+ title={
+ <Tooltip title={process.containerRequest.name}>
+ <Typography noWrap variant="title" className={classes.title}>
+ {process.containerRequest.name}
+ </Typography>
+ </Tooltip>
+ }
+ subheader={process.containerRequest.description} />
+ <CardContent>
+ <Grid container spacing={24} alignItems='center'>
+ <Grid item xs={6}>
+ <ProcessLogForm selectedFilter={selectedFilter} filters={filters} onChange={onChange} />
+ </Grid>
+ <Grid item xs={6} className={classes.link}>
+ <Typography component='div'>
+ Container log for request {process.containerRequest.uuid}
+ </Typography>
+ </Grid>
+ <Grid item xs={12}>
+ <ProcessLogCodeSnippet lines={lines}/>
+ </Grid>
</Grid>
- </Grid>
- </CardContent>
- </Card>
+ </CardContent>
+ </Card>
+ </Grid>
);
\ No newline at end of file