import LinkOutlined from '@material-ui/icons/LinkOutlined';
import RemoveRedEye from '@material-ui/icons/RemoveRedEye';
import Computer from '@material-ui/icons/Computer';
+import WrapText from '@material-ui/icons/WrapText';
// Import FontAwesome icons
import { library } from '@fortawesome/fontawesome-svg-core';
export const CanWriteIcon: IconType = (props) => <Edit {...props} />;
export const CanManageIcon: IconType = (props) => <Computer {...props} />;
export const AddUserIcon: IconType = (props) => <PersonAdd {...props} />;
+export const WordWrapIcon: IconType = (props) => <WrapText {...props} />;
//
// SPDX-License-Identifier: AGPL-3.0
-import React from 'react';
+import React, { useState } from 'react';
import {
StyleRulesCallback,
WithStyles,
CloseIcon,
CollectionIcon,
LogIcon,
- MaximizeIcon
+ MaximizeIcon,
+ WordWrapIcon
} from 'components/icon/icon';
import { Process } from 'store/processes/process';
import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
export const ProcessLogsCard = withStyles(styles)(
({ classes, process, filters, selectedFilter, lines, onLogFilterChange, navigateToLog,
- doHidePanel, doMaximizePanel, panelMaximized, panelName }: ProcessLogsCardProps) =>
- <Grid item className={classes.root} xs={12}>
+ doHidePanel, doMaximizePanel, panelMaximized, panelName }: ProcessLogsCardProps) => {
+ const [wordWrapToggle, setWordWrapToggle] = useState<boolean>(true);
+ return <Grid item className={classes.root} xs={12}>
<Card className={classes.card}>
<CardHeader className={classes.header}
avatar={<LogIcon className={classes.iconHeader} />}
<ProcessLogForm selectedFilter={selectedFilter}
filters={filters} onChange={onLogFilterChange} />
</Grid>
+ <Grid item>
+ <Tooltip title="Toggle word wrapping" disableFocusListener>
+ <IconButton onClick={() => setWordWrapToggle(!wordWrapToggle)}>
+ <WordWrapIcon />
+ </IconButton>
+ </Tooltip>
+ </Grid>
<Grid item>
<Tooltip title="Go to Log collection" disableFocusListener>
<IconButton onClick={() => navigateToLog(process.containerRequest.logUuid!)}>
spacing={24}
direction='column'>
<Grid className={classes.logViewer} item xs>
- <ProcessLogCodeSnippet lines={lines} />
+ <ProcessLogCodeSnippet wordWrap={wordWrapToggle} lines={lines} />
</Grid>
</Grid>
: <DefaultView
</CardContent>
</Card>
</Grid >
-);
+});
import grey from '@material-ui/core/colors/grey';
import { ArvadosTheme } from 'common/custom-theme';
-type CssRules = 'codeSnippet' | 'codeSnippetContainer';
+type CssRules = 'wordWrap' | 'codeSnippetContainer';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- codeSnippet: {
+ wordWrap: {
+ whiteSpace: 'pre-wrap',
},
codeSnippetContainer: {
height: `calc(100% - ${theme.spacing.unit * 4}px)`, // so that horizontal scollbar is visible
interface ProcessLogCodeSnippetProps {
lines: string[];
+ wordWrap?: boolean;
}
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.wordWrap ? props.classes.wordWrap : undefined}
containerClassName={props.classes.codeSnippetContainer} />
</MuiThemeProvider>);
\ No newline at end of file