// 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
} from '@material-ui/core';
import { Process } from '~/store/processes/process';
+import { ProcessLogCodeSnippet } from '~/views/process-log-panel/process-log-code-snippet';
import { ProcessLogForm, ProcessLogFormDataProps, ProcessLogFormActionProps } from '~/views/process-log-panel/process-log-form';
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 = 'root' | 'card' | 'iconHeader';
+type CssRules = 'backLink' | 'backIcon' | 'card' | 'title' | 'iconHeader' | 'link';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- root: {
-
+ 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
+ },
+ link: {
+ fontSize: '0.875rem',
+ color: theme.palette.primary.main,
+ textAlign: 'right',
+ '&:hover': {
+ cursor: 'pointer'
+ }
}
});
process: Process;
}
-export type ProcessLogMainCardProps = ProcessLogMainCardDataProps & ProcessLogFormDataProps & ProcessLogFormActionProps;
+export interface ProcessLogMainCardActionProps {
+ onContextMenu: (event: React.MouseEvent<any>, process: Process) => void;
+ navigateToLogCollection: (uuid: string) => void;
+}
+
+export type ProcessLogMainCardProps = ProcessLogMainCardDataProps
+ & ProcessLogMainCardActionProps
+ & CodeSnippetDataProps
+ & ProcessLogFormDataProps
+ & ProcessLogFormActionProps;
export const ProcessLogMainCard = withStyles(styles)(
- ({ classes, process, selectedFilter, filters, onChange }: 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}>
- Container log for request ardev-xvhdp-q3uqbfxeb6w64pm
- </Grid>
- <Grid item xs={12}>
- {/* add snippet */}
- </Grid>
- </Grid>
- </CardContent>
- </Card>
+ ({ classes, process, selectedFilter, filters, onChange, lines, onContextMenu, navigateToLogCollection }: 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='h6' 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}>
+ <span onClick={() => navigateToLogCollection(process.containerRequest.logUuid!)}>
+ Go to Log collection
+ </span>
+ </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