//
// 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 >
-);
+});