feat(xo-web/console): display zoom percentage

CHANGELOG.unreleased.md

@@ -18,6 +18,7 @@
 - [XOA/License] Ability to change the license assigned to an object already licensed (e.g. expired licenses) (PR [#7390](https://github.com/vatesfr/xen-orchestra/pull/7390))
 - [User] Show authentication tokens last use datetime and IP address (PR [#7479](https://github.com/vatesfr/xen-orchestra/pull/7479))
 - Use [ISO 8601 format](https://en.wikipedia.org/wiki/ISO_8601) for numeric datetimes (PR [#7484](https://github.com/vatesfr/xen-orchestra/pull/7484))
+- [Console] In VM and Host Console tab, display console's zoom percentage (PR [#7452](https://github.com/vatesfr/xen-orchestra/pull/7452))
 
 ### Bug fixes
 

packages/xo-web/src/xo-app/host/tab-console.js

@@ -13,6 +13,8 @@ import { Container, Row, Col } from 'grid'
 import { CpuSparkLines, MemorySparkLines, NetworkSparkLines, LoadSparkLines } from 'xo-sparklines'
 
 export default class extends Component {
+  state = { scale: 1 }
+
   _sendCtrlAltDel = () => {
     this.refs.noVnc.sendCtrlAltDel()
   }
@@ -31,8 +33,14 @@ export default class extends Component {
 
   _getClipboardContent = () => this.refs.clipboard && this.refs.clipboard.value
 
+  _onChangeScaleValue = event => {
+    const value = event.target.value
+    this.setState({ scale: value / 100 })
+  }
+
   render() {
     const { vmController, statsOverview } = this.props
+    const { scale } = this.state
 
     return (
       <Container>
@@ -54,7 +62,7 @@ export default class extends Component {
         )}
         <br />
         <Row>
-          <Col mediumSize={10}>
+          <Col mediumSize={7}>
             <div className='input-group'>
               <input type='text' className='form-control' ref='clipboard' onChange={this._setRemoteClipboard} />
               <span className='input-group-btn'>
@@ -71,10 +79,33 @@ export default class extends Component {
               <Icon icon='vm-keyboard' /> {_('ctrlAltDelButtonLabel')}
             </Button>
           </Col>
+          <Col mediumSize={2}>
+            <input
+              className='form-control'
+              max={3}
+              min={0.1}
+              type='range'
+              onChange={this.linkState('scale')}
+              step={0.1}
+              value={scale}
+            />
+          </Col>
+          <Col mediumSize={1}>
+            <input
+              className='form-control'
+              onChange={this._onChangeScaleValue}
+              step='1'
+              type='number'
+              value={Math.round(this.state.scale * 100)}
+              min={1}
+              max={300}
+            />
+          </Col>
         </Row>
         <Row className='console'>
           <Col>
             <NoVnc
+              scale={scale}
               ref='noVnc'
               url={resolveUrl(`consoles/${vmController.id}`)}
               onClipboardChange={this._getRemoteClipboard}

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

@@ -117,6 +117,11 @@ export default class TabConsole extends Component {
     window.location = `rdp://${formatHostname(this.props.vm.mainIpAddress)}`
   }
 
+  _onChangeScaleValue = event => {
+    const value = event.target.value
+    this.setState({ scale: value / 100 })
+  }
+
   render() {
     const { statsOverview, vm } = this.props
     const { minimalLayout, scale } = this.state
@@ -222,15 +227,30 @@ export default class TabConsole extends Component {
             </div>
           </Col>
           <Col mediumSize={2} className='hidden-lg-down'>
-            <input
-              className='form-control'
-              max={3}
-              min={0.1}
-              onChange={this.linkState('scale')}
-              step={0.1}
-              type='range'
-              value={scale}
-            />
+            <Row>
+              <Col mediumSize={8}>
+                <input
+                  className='form-control'
+                  max={3}
+                  min={0.1}
+                  onChange={this.linkState('scale')}
+                  step={0.1}
+                  type='range'
+                  value={scale}
+                />
+              </Col>
+              <Col mediumSize={4}>
+                <input
+                  className='form-control'
+                  onChange={this._onChangeScaleValue}
+                  step='1'
+                  type='number'
+                  value={Math.round(this.state.scale * 100)}
+                  min={1}
+                  max={300}
+                />
+              </Col>
+            </Row>
           </Col>
           <Col mediumSize={1}>
             <Tooltip content={minimalLayout ? _('showHeaderTooltip') : _('hideHeaderTooltip')}>