19687: Fixes log panel scrolling behavior in Safari.
[arvados-workbench2.git] / src / views / process-panel / process-log-card.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import React, { useState } from 'react';
6 import {
7     StyleRulesCallback,
8     WithStyles,
9     withStyles,
10     Card,
11     CardHeader,
12     IconButton,
13     CardContent,
14     Tooltip,
15     Grid,
16     Typography,
17 } from '@material-ui/core';
18 import { ArvadosTheme } from 'common/custom-theme';
19 import {
20     CloseIcon,
21     CollectionIcon,
22     CopyIcon,
23     LogIcon,
24     MaximizeIcon,
25     UnMaximizeIcon,
26     TextDecreaseIcon,
27     TextIncreaseIcon,
28     WordWrapOffIcon,
29     WordWrapOnIcon,
30 } from 'components/icon/icon';
31 import { Process } from 'store/processes/process';
32 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
33 import {
34     FilterOption,
35     ProcessLogForm
36 } from 'views/process-panel/process-log-form';
37 import { ProcessLogCodeSnippet } from 'views/process-panel/process-log-code-snippet';
38 import { DefaultView } from 'components/default-view/default-view';
39 import { CodeSnippetDataProps } from 'components/code-snippet/code-snippet';
40 import CopyToClipboard from 'react-copy-to-clipboard';
41
42 type CssRules = 'card' | 'content' | 'title' | 'iconHeader' | 'header' | 'root' | 'logViewer' | 'logViewerContainer';
43
44 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
45     card: {
46         height: '100%'
47     },
48     header: {
49         paddingTop: theme.spacing.unit,
50         paddingBottom: theme.spacing.unit,
51     },
52     content: {
53         padding: theme.spacing.unit * 0,
54         height: '100%',
55     },
56     logViewer: {
57         height: '100%',
58         overflowY: 'scroll', // Required for MacOS's Safari -- See #19687
59     },
60     logViewerContainer: {
61         height: '100%',
62     },
63     title: {
64         overflow: 'hidden',
65         paddingTop: theme.spacing.unit * 0.5
66     },
67     iconHeader: {
68         fontSize: '1.875rem',
69         color: theme.customs.colors.green700
70     },
71     root: {
72         height: '100%',
73     },
74 });
75
76 export interface ProcessLogsCardDataProps {
77     process: Process;
78     selectedFilter: FilterOption;
79     filters: FilterOption[];
80 }
81
82 export interface ProcessLogsCardActionProps {
83     onLogFilterChange: (filter: FilterOption) => void;
84     navigateToLog: (uuid: string) => void;
85     onCopy: (text: string) => void;
86 }
87
88 type ProcessLogsCardProps = ProcessLogsCardDataProps
89     & ProcessLogsCardActionProps
90     & CodeSnippetDataProps
91     & WithStyles<CssRules>
92     & MPVPanelProps;
93
94 export const ProcessLogsCard = withStyles(styles)(
95     ({ classes, process, filters, selectedFilter, lines,
96         onLogFilterChange, navigateToLog, onCopy,
97         doHidePanel, doMaximizePanel, doUnMaximizePanel, panelMaximized, panelName }: ProcessLogsCardProps) => {
98         const [wordWrap, setWordWrap] = useState<boolean>(true);
99         const [fontSize, setFontSize] = useState<number>(3);
100         const fontBaseSize = 10;
101         const fontStepSize = 1;
102
103         return <Grid item className={classes.root} xs={12}>
104             <Card className={classes.card}>
105                 <CardHeader className={classes.header}
106                     avatar={<LogIcon className={classes.iconHeader} />}
107                     action={<Grid container direction='row' alignItems='center'>
108                         <Grid item>
109                             <ProcessLogForm selectedFilter={selectedFilter}
110                                 filters={filters} onChange={onLogFilterChange} />
111                         </Grid>
112                         <Grid item>
113                             <Tooltip title="Decrease font size" disableFocusListener>
114                                 <IconButton onClick={() => fontSize > 1 && setFontSize(fontSize-1)}>
115                                     <TextDecreaseIcon />
116                                 </IconButton>
117                             </Tooltip>
118                         </Grid>
119                         <Grid item>
120                             <Tooltip title="Increase font size" disableFocusListener>
121                                 <IconButton onClick={() => fontSize < 5 && setFontSize(fontSize+1)}>
122                                     <TextIncreaseIcon />
123                                 </IconButton>
124                             </Tooltip>
125                         </Grid>
126                         <Grid item>
127                             <Tooltip title="Copy to clipboard" disableFocusListener>
128                                 <IconButton>
129                                     <CopyToClipboard text={lines.join()} onCopy={() => onCopy("Log copied to clipboard")}>
130                                         <CopyIcon />
131                                     </CopyToClipboard>
132                                 </IconButton>
133                             </Tooltip>
134                         </Grid>
135                         <Grid item>
136                             <Tooltip title={`${wordWrap ? 'Disable' : 'Enable'} word wrapping`} disableFocusListener>
137                                 <IconButton onClick={() => setWordWrap(!wordWrap)}>
138                                     {wordWrap ? <WordWrapOffIcon /> : <WordWrapOnIcon />}
139                                 </IconButton>
140                             </Tooltip>
141                         </Grid>
142                         <Grid item>
143                             <Tooltip title="Go to Log collection" disableFocusListener>
144                                 <IconButton onClick={() => navigateToLog(process.containerRequest.logUuid!)}>
145                                     <CollectionIcon />
146                                 </IconButton>
147                             </Tooltip>
148                         </Grid>
149                         { doUnMaximizePanel && panelMaximized &&
150                         <Tooltip title={`Unmaximize ${panelName || 'panel'}`} disableFocusListener>
151                             <IconButton onClick={doUnMaximizePanel}><UnMaximizeIcon /></IconButton>
152                         </Tooltip> }
153                         { doMaximizePanel && !panelMaximized &&
154                         <Tooltip title={`Maximize ${panelName || 'panel'}`} disableFocusListener>
155                             <IconButton onClick={doMaximizePanel}><MaximizeIcon /></IconButton>
156                         </Tooltip> }
157                         { doHidePanel &&
158                         <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
159                             <IconButton disabled={panelMaximized} onClick={doHidePanel}><CloseIcon /></IconButton>
160                         </Tooltip> }
161                     </Grid>}
162                     title={
163                         <Typography noWrap variant='h6' className={classes.title}>
164                             Logs
165                         </Typography>}
166                 />
167                 <CardContent className={classes.content}>
168                     {lines.length > 0
169                         ? < Grid
170                             className={classes.logViewerContainer}
171                             container
172                             spacing={24}
173                             direction='column'>
174                             <Grid className={classes.logViewer} item xs>
175                                 <ProcessLogCodeSnippet fontSize={fontBaseSize+(fontStepSize*fontSize)} wordWrap={wordWrap} lines={lines} />
176                             </Grid>
177                         </Grid>
178                         : <DefaultView
179                             icon={LogIcon}
180                             messages={['No logs yet']} />
181                     }
182                 </CardContent>
183             </Card>
184         </Grid >
185 });
186