Make Logs view optional

src/player.jsx

@@ -947,7 +947,9 @@ export class Player extends React.Component {
             }
 
             /* Send packet ts to the top */
+            if (this.props.logsEnabled) {
                 this.props.onTsChange(this.pkt.pos);
+            }
             this.setState({currentTsPost: parseInt(this.pkt.pos)});
 
             /* Output the packet */

src/recordings.jsx

@@ -402,9 +402,11 @@ class Recording extends React.Component {
         this.goBackToList = this.goBackToList.bind(this);
         this.handleTsChange = this.handleTsChange.bind(this);
         this.handleLogTsChange = this.handleLogTsChange.bind(this);
+        this.handleLogsClick = this.handleLogsClick.bind(this);
         this.state = {
             curTs: null,
             logsTs: null,
+            logsEnabled: false,
         };
     }
 
@@ -416,6 +418,10 @@ class Recording extends React.Component {
         this.setState({logsTs: ts});
     }
 
+    handleLogsClick() {
+        this.setState({logsEnabled: !this.state.logsEnabled});
+    }
+
     goBackToList() {
         if (cockpit.location.path[0]) {
             if ("search_rec" in cockpit.location.options) {
@@ -439,7 +445,8 @@ class Recording extends React.Component {
                     logsTs={this.logsTs}
                     search={this.props.search}
                     onTsChange={this.handleTsChange}
-                    recording={r} />);
+                    recording={r}
+                    logsEnabled={this.state.logsEnabled} />);
 
             return (
                 <React.Fragment>
@@ -451,16 +458,20 @@ class Recording extends React.Component {
                                     <li className="active">{_("Session")}</li>
                                 </ol>
                             </div>
-                        </div>
                             {player}
                         </div>
-                    <div className="container-fluid">
                         <div className="row">
                             <div className="col-md-12">
-                                <Logs recording={this.props.recording} curTs={this.state.curTs}
-                                        jumpToTs={this.handleLogTsChange} />
+                                <button className="btn btn-default" style={{"float":"left"}} onClick={this.handleLogsClick}>{_("Logs View")}</button>
                             </div>
                         </div>
+                        {this.state.logsEnabled === true &&
+                        <div className="row">
+                            <div className="col-md-12">
+                                <Logs recording={this.props.recording} curTs={this.state.curTs} jumpToTs={this.handleLogTsChange} />
+                            </div>
+                        </div>
+                        }
                     </div>
                 </React.Fragment>
             );