//
// SPDX-License-Identifier: AGPL-3.0
-import * as React from 'react';
+import 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';
+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 = 'backLink' | 'backIcon' | 'card' | 'title' | 'iconHeader' | 'link';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
backLink: {
- fontSize: '1rem',
+ fontSize: '14px',
fontWeight: 600,
display: 'flex',
alignItems: 'center',
color: theme.customs.colors.green700
},
link: {
- alignSelf: 'flex-end',
- textAlign: 'right'
+ fontSize: '0.875rem',
+ color: theme.palette.primary.main,
+ textAlign: 'right',
+ '&:hover': {
+ cursor: 'pointer'
+ }
}
});
export interface ProcessLogMainCardActionProps {
onContextMenu: (event: React.MouseEvent<any>, process: Process) => void;
+ navigateToLogCollection: (uuid: string) => void;
}
export type ProcessLogMainCardProps = ProcessLogMainCardDataProps
& ProcessLogFormActionProps;
export const ProcessLogMainCard = withStyles(styles)(
- ({ classes, process, selectedFilter, filters, onChange, lines, onContextMenu }: ProcessLogMainCardProps & WithStyles<CssRules>) =>
+ ({ 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
+ <BackIcon className={classes.backIcon} /> BACK
</Link>
<Card className={classes.card}>
<CardHeader
<ProcessLogForm selectedFilter={selectedFilter} filters={filters} onChange={onChange} />
</Grid>
<Grid item xs={6} className={classes.link}>
- <Typography component='div'>
+ <span onClick={() => navigateToLogCollection(process.containerRequest.logUuid!)}>
Go to Log collection
- </Typography>
+ </span>
</Grid>
</Grid>
<Grid item xs>