// 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';
+import { DefaultView } from '~/components/default-view/default-view';
-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
process: Process;
}
-export type ProcessLogMainCardProps = ProcessLogMainCardDataProps & CodeSnippetDataProps & ProcessLogFormDataProps & ProcessLogFormActionProps;
+export interface ProcessLogMainCardActionProps {
+ onContextMenu: (event: React.MouseEvent<any>, process: Process) => void;
+}
+
+export type ProcessLogMainCardProps = ProcessLogMainCardDataProps
+ & ProcessLogMainCardActionProps
+ & CodeSnippetDataProps
+ & ProcessLogFormDataProps
+ & ProcessLogFormActionProps;
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>
- </Grid>
- </CardContent>
- </Card>
+ ({ classes, process, selectedFilter, filters, onChange, lines, onContextMenu }: ProcessLogMainCardProps & WithStyles<CssRules>) =>
+ <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={
+ <Tooltip title="More options" disableFocusListener>
+ <IconButton onClick={event => onContextMenu(event, process)} aria-label="More options">
+ <MoreOptionsIcon />
+ </IconButton>
+ </Tooltip>}
+ title={
+ <Tooltip title={process.containerRequest.name} placement="bottom-start">
+ <Typography noWrap variant="title" className={classes.title}>
+ {process.containerRequest.name}
+ </Typography>
+ </Tooltip>}
+ subheader={process.containerRequest.description} />
+ <CardContent>
+ {lines.length > 0
+ ? < Grid
+ container
+ spacing={24}
+ direction='column'>
+ <Grid container item>
+ <Grid item xs={6}>
+ <ProcessLogForm selectedFilter={selectedFilter} filters={filters} onChange={onChange} />
+ </Grid>
+ <Grid item xs={6} className={classes.link}>
+ <Typography component='div'>
+ Go to Log collection
+ </Typography>
+ </Grid>
+ </Grid>
+ <Grid item xs>
+ <ProcessLogCodeSnippet lines={lines} />
+ </Grid>
+ </Grid>
+ : <DefaultView
+ icon={ProcessIcon}
+ messages={['No logs yet']} />
+ }
+ </CardContent>
+ </Card>
+ </Grid >
);
\ No newline at end of file