lines: string[];
className?: string;
apiResponse?: boolean;
+ containerClassName?: string;
}
type CodeSnippetProps = CodeSnippetDataProps & WithStyles<CssRules>;
export const CodeSnippet = withStyles(styles)(
- ({ classes, lines, className, apiResponse }: CodeSnippetProps) =>
+ ({ classes, lines, className, containerClassName, apiResponse }: CodeSnippetProps) =>
<Typography
- component="div"
- className={classNames(classes.root, className)}>
- {
- lines.map((line: string, index: number) => {
+ component="div"
+ className={classNames(classes.root, containerClassName, className)}>
+ { lines.map((line: string, index: number) => {
return <Typography key={index} className={apiResponse ? classes.space : className} component="pre">{line}</Typography>;
- })
- }
+ }) }
</Typography>
);
\ No newline at end of file
},
content: {
overflow: 'auto',
+ height: '100%',
},
});
}
}, [panelRef]);
- return <Grid item {...props}>
+ return <Grid item style={{height: '100%'}} {...props}>
<span ref={panelRef} /> {/* Element to scroll to when the panel is selected */}
<Paper style={{height: '100%'}} elevation={panelIlluminated ? 8 : 0}>
{ forwardProps
import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
import { ProcessDetailsAttributes } from './process-details-attributes';
-type CssRules = 'card' | 'content' | 'title';
+type CssRules = 'card' | 'content' | 'title' | 'header';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
card: {
height: '100%'
},
+ header: {
+ paddingTop: theme.spacing.unit,
+ paddingBottom: theme.spacing.unit,
+ },
content: {
'&:last-child': {
paddingBottom: theme.spacing.unit * 2,
({ classes, process, doHidePanel, panelName }: ProcessDetailsCardProps) => {
return <Card className={classes.card}>
<CardHeader
+ className={classes.header}
classes={{
content: classes.title,
}}
import { ContainerState } from 'models/container';
import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
-type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'link' | 'content' | 'title' | 'avatar' | 'cancelButton';
+type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'link' | 'content' | 'title' | 'avatar' | 'cancelButton' | 'header';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
card: {
height: '100%'
},
+ header: {
+ paddingTop: theme.spacing.unit,
+ paddingBottom: theme.spacing.unit,
+ },
iconHeader: {
fontSize: '1.875rem',
color: theme.customs.colors.green700,
const finishedAt = container ? formatDate(container.finishedAt) : 'N/A';
return <Card className={classes.card}>
<CardHeader
+ className={classes.header}
classes={{
content: classes.title,
avatar: classes.avatar
import { DefaultView } from 'components/default-view/default-view';
import { CodeSnippetDataProps } from 'components/code-snippet/code-snippet';
-type CssRules = 'card' | 'content' | 'title' | 'iconHeader';
+type CssRules = 'card' | 'content' | 'title' | 'iconHeader' | 'header' | 'root' | 'logViewer' | 'logViewerContainer';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
card: {
height: '100%'
},
+ header: {
+ paddingTop: theme.spacing.unit,
+ paddingBottom: theme.spacing.unit,
+ },
content: {
- '&:last-child': {
- paddingBottom: theme.spacing.unit * 2,
- }
+ padding: theme.spacing.unit * 0,
+ height: '100%',
+ },
+ logViewer: {
+ height: '100%',
+ },
+ logViewerContainer: {
+ height: '100%',
},
title: {
overflow: 'hidden',
fontSize: '1.875rem',
color: theme.customs.colors.green700
},
+ root: {
+ height: '100%',
+ },
});
export interface ProcessLogsCardDataProps {
export const ProcessLogsCard = withStyles(styles)(
({ classes, process, filters, selectedFilter, lines, onLogFilterChange, navigateToLog,
doHidePanel, doMaximizePanel, panelMaximized, panelName }: ProcessLogsCardProps) =>
- <Grid item xs={12}>
+ <Grid item className={classes.root} xs={12}>
<Card className={classes.card}>
- <CardHeader
+ <CardHeader className={classes.header}
avatar={<LogIcon className={classes.iconHeader} />}
action={<Grid container direction='row' alignItems='center'>
<Grid item>
<CardContent className={classes.content}>
{lines.length > 0
? < Grid
+ className={classes.logViewerContainer}
container
spacing={24}
direction='column'>
- <Grid item xs>
+ <Grid className={classes.logViewer} item xs>
<ProcessLogCodeSnippet lines={lines} />
</Grid>
</Grid>
import { MuiThemeProvider, createMuiTheme, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core/styles';
import { CodeSnippet } from 'components/code-snippet/code-snippet';
import grey from '@material-ui/core/colors/grey';
+import { ArvadosTheme } from 'common/custom-theme';
-type CssRules = 'codeSnippet';
+type CssRules = 'codeSnippet' | 'codeSnippetContainer';
-const styles: StyleRulesCallback<CssRules> = () => ({
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
codeSnippet: {
- maxHeight: '550px',
- }
+ },
+ codeSnippetContainer: {
+ height: `calc(100% - ${theme.spacing.unit * 4}px)`, // so that horizontal scollbar is visible
+ },
});
const theme = createMuiTheme({
export const ProcessLogCodeSnippet = withStyles(styles)(
(props: ProcessLogCodeSnippetProps & WithStyles<CssRules>) =>
<MuiThemeProvider theme={theme}>
- <CodeSnippet lines={props.lines} className={props.classes.codeSnippet} />
+ <CodeSnippet lines={props.lines} className={props.classes.codeSnippet}
+ containerClassName={props.classes.codeSnippetContainer} />
</MuiThemeProvider>);
\ No newline at end of file
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
width: '100%',
+ height: '100%',
},
});