Console fullscreen button

app/static/app/js/Console.jsx

@@ -20,12 +20,15 @@ class Console extends React.Component {
     }
 
     this.autoscroll = props.autoscroll === true;
+    this.showFullscreenButton = props.showFullscreenButton === true;
 
     this.setRef = this.setRef.bind(this);
     this.handleMouseOver = this.handleMouseOver.bind(this);
     this.handleMouseOut = this.handleMouseOut.bind(this);
     this.downloadTxt = this.downloadTxt.bind(this);
     this.copyTxt = this.copyTxt.bind(this);
+    this.enterFullscreen = this.enterFullscreen.bind(this);
+    this.exitFullscreen = this.exitFullscreen.bind(this);
   }
 
   componentDidMount(){
@@ -79,6 +82,19 @@ class Console extends React.Component {
     console.log("Output copied to clipboard");
   }
 
+  enterFullscreen(){
+    const consoleElem = this.$console.get(0);
+    if (consoleElem.requestFullscreen) {
+        consoleElem.requestFullscreen();
+    }
+  }
+
+  exitFullscreen(){
+    if (document.exitFullscreen){
+        document.exitFullscreen();
+    }
+  }
+
   tearDownDynamicSource(){
     if (this.sourceTimeout) clearTimeout(this.sourceTimeout);
     if (this.sourceRequest) this.sourceRequest.abort();
@@ -138,11 +154,17 @@ class Console extends React.Component {
             onMouseOver={this.handleMouseOver}
             onMouseOut={this.handleMouseOut}
             ref={this.setRef}
-            >{lines.map(line => {
+            ><a href="javascript:void(0);" onClick={this.exitFullscreen} className="exit-fullscreen btn btn-sm btn-primary" title="Toggle Fullscreen">
+                <i className="fa fa-expand"></i> Exit Fullscreen
+            </a>
+            {lines.map(line => {
             if (this.props.lang) return (<div key={i++} dangerouslySetInnerHTML={prettyLine(line)}></div>);
             else return line + "\n";
             })}
             {"\n"}
+            <a href="javascript:void(0);" onClick={this.exitFullscreen} className="exit-fullscreen btn btn-sm btn-primary" title="Toggle Fullscreen">
+                <i className="fa fa-expand"></i> Exit Fullscreen
+            </a>
         </pre>];
 
     if (this.props.showConsoleButtons){
@@ -153,6 +175,9 @@ class Console extends React.Component {
             <a href="javascript:void(0);" onClick={this.copyTxt} className="btn btn-sm btn-primary" title="Copy To Clipboard">
                 <i className="fa fa-clipboard"></i>
             </a>
+            <a href="javascript:void(0);" onClick={this.enterFullscreen} className="btn btn-sm btn-primary" title="Toggle Fullscreen">
+                <i className="fa fa-expand"></i>
+            </a>
         </div>);
     }
 

app/static/app/js/css/Console.scss

@@ -6,4 +6,17 @@
     a{
         margin-left: 4px;
     }
+}
+
+.console{
+    .exit-fullscreen{
+        display: none;
+    }
+}
+
+.console:fullscreen{
+    .exit-fullscreen{
+        display: block;
+        margin-bottom: 12px;
+    }
 }