feat(vm/console): hide header and resize console (#1410)

Fix #1268

src/common/intl/messages.js

@@ -484,6 +484,8 @@ var messages = {
   ctrlAltDelButtonLabel: 'Ctrl+Alt+Del',
   tipLabel: 'Tip:',
   tipConsoleLabel: 'non-US keyboard could have issues with console: switch your own layout to US.',
+  hideHeaderTooltip: 'Hide infos',
+  showHeaderTooltip: 'Show infos',
 
   // ----- VM disk tab -----
   vdiAction: 'Action',

src/common/react-novnc.js

@@ -102,6 +102,14 @@ export default class NoVnc extends Component {
     this._clean()
   }
 
+  componentWillReceiveProps (props) {
+    const rfb = this._rfb
+    if (rfb && this.props.scale !== props.scale) {
+      rfb.get_display().set_scale(props.scale || 1)
+      rfb.get_mouse().set_scale(props.scale || 1)
+    }
+  }
+
   _focus = () => {
     const rfb = this._rfb
     if (rfb) {

src/xo-app/page/index.js

@@ -7,6 +7,7 @@ import styles from './index.css'
 
 const Page = ({
   children,
+  collapsedHeader,
   formatTitle,
   header,
   intl,
@@ -16,9 +17,9 @@ const Page = ({
   return (
     <DocumentTitle title={formatTitle ? formatMessage(messages[title]) : title}>
       <div className={styles.container}>
-        <nav className={'page-header ' + styles.header}>
+        {!collapsedHeader && <nav className={'page-header ' + styles.header}>
           {header}
-        </nav>
+        </nav>}
         <div className={styles.content}>
           {children}
         </div>
@@ -29,6 +30,7 @@ const Page = ({
 
 Page.propTypes = {
   children: React.PropTypes.node,
+  collapsedHeader: React.PropTypes.bool,
   formatTitle: React.PropTypes.bool,
   header: React.PropTypes.node,
   title: React.PropTypes.string

src/xo-app/vm/index.js

@@ -1,5 +1,6 @@
 import _ from 'intl'
 import assign from 'lodash/assign'
+import BaseComponent from 'base-component'
 import forEach from 'lodash/forEach'
 import Icon from 'icon'
 import isEmpty from 'lodash/isEmpty'
@@ -8,7 +9,7 @@ import map from 'lodash/map'
 import { NavLink, NavTabs } from 'nav'
 import Page from '../page'
 import pick from 'lodash/pick'
-import React, { cloneElement, Component } from 'react'
+import React, { cloneElement } from 'react'
 import VmActionBar from './action-bar'
 import { Select, Text } from 'editable'
 import {
@@ -113,7 +114,7 @@ const isRunning = vm => vm && vm.power_state === 'Running'
     }
   }
 })
-export default class Vm extends Component {
+export default class Vm extends BaseComponent {
   static contextTypes = {
     router: React.PropTypes.object
   }
@@ -243,6 +244,8 @@ export default class Vm extends Component {
     </Container>
   }
 
+  _toggleHeader = () => this.setState({ collapsedHeader: !this.state.collapsedHeader })
+
   render () {
     const { container, vm } = this.props
 
@@ -262,8 +265,8 @@ export default class Vm extends Component {
     ]), pick(this.state, [
       'statsOverview'
     ]))
-    return <Page header={this.header()} title={`${vm.name_label}${container ? ` (${container.name_label})` : ''}`}>
-      {cloneElement(this.props.children, childProps)}
+    return <Page header={this.header()} collapsedHeader={this.state.collapsedHeader} title={`${vm.name_label}${container ? ` (${container.name_label})` : ''}`}>
+      {cloneElement(this.props.children, { ...childProps, toggleHeader: this._toggleHeader })}
     </Page>
   }
 }

src/xo-app/vm/tab-console.js

@@ -7,6 +7,8 @@ import invoke from 'invoke'
 import IsoDevice from 'iso-device'
 import NoVnc from 'react-novnc'
 import React from 'react'
+import Tooltip from 'tooltip'
+import { Button } from 'react-bootstrap-4/lib'
 import { resolveUrl } from 'xo'
 import { Container, Row, Col } from 'grid'
 import {
@@ -36,11 +38,20 @@ export default class TabConsole extends Component {
   _getClipboardContent = () =>
     this.refs.clipboard && this.refs.clipboard.value
 
+  _toggleMinimalLayout = () => {
+    this.props.toggleHeader()
+    this.setState({ minimalLayout: !this.state.minimalLayout })
+  }
+
   render () {
     const {
       statsOverview,
       vm
     } = this.props
+    const {
+      minimalLayout,
+      scale
+    } = this.state
 
     if (vm.power_state !== 'Running') {
       return (
@@ -50,7 +61,7 @@ export default class TabConsole extends Component {
 
     return (
       <Container>
-        {statsOverview && <Row className='text-xs-center'>
+        {!minimalLayout && statsOverview && <Row className='text-xs-center'>
           <Col mediumSize={3}>
             <p>
               <Icon icon='cpu' size={2} />
@@ -81,10 +92,10 @@ export default class TabConsole extends Component {
           </Col>
         </Row>}
         <Row>
-          <Col mediumSize={5}>
+          <Col mediumSize={3}>
             <IsoDevice vm={vm} />
           </Col>
-          <Col mediumSize={5}>
+          <Col mediumSize={3}>
             <div className='input-group'>
               <input type='text' className='form-control' ref='clipboard' onChange={this._setRemoteClipboard} />
               <span className='input-group-btn'>
@@ -104,11 +115,34 @@ export default class TabConsole extends Component {
               <Icon icon='vm-keyboard' /> {_('ctrlAltDelButtonLabel')}
             </button>
           </Col>
+          <Col mediumSize={3}>
+            <input
+              className='form-control'
+              max={3}
+              min={0.1}
+              onChange={this.linkState('scale')}
+              step={0.1}
+              type='range'
+              value={scale}
+            />
+          </Col>
+          <Col mediumSize={1}>
+            <Tooltip content={minimalLayout ? _('showHeaderTooltip') : _('hideHeaderTooltip')}>
+              <Button bsStyle='secondary' onClick={this._toggleMinimalLayout}>
+                <Icon icon={minimalLayout ? 'caret' : 'caret-up'} />
+              </Button>
+            </Tooltip>
+          </Col>
         </Row>
         <Row className='console'>
           <Col>
-            <NoVnc ref='noVnc' url={resolveUrl(`consoles/${vm.id}`)} onClipboardChange={this._getRemoteClipboard} />
-            <p><em><Icon icon='info' /> {_('tipLabel')} {_('tipConsoleLabel')}</em></p>
+            <NoVnc
+              onClipboardChange={this._getRemoteClipboard}
+              ref='noVnc'
+              scale={scale}
+              url={resolveUrl(`consoles/${vm.id}`)}
+            />
+            {!minimalLayout && <p><em><Icon icon='info' /> {_('tipLabel')} {_('tipConsoleLabel')}</em></p>}
           </Col>
         </Row>
       </Container>