feat(VncConsole): Introduce VncConsole component

package.json

@@ -78,6 +78,7 @@
     "lerna-semantic-release": "^9.1.0",
     "lint-staged": "^7.0.4",
     "lodash": "^4.17.0",
+    "mutation-observer": "^1.0.3",
     "node-sass": "^4.8.3",
     "npmlog": "^4.1.2",
     "prettier": "^1.11.1",
@@ -162,7 +163,7 @@
       "\\.(css)$": "<rootDir>/packages/react-styles/jest-transform.js"
     },
     "transformIgnorePatterns": [
-      "node_modules/(?!@patternfly)"
+      "node_modules/(?!@patternfly|@novnc)"
     ],
     "roots": [
       "<rootDir>/packages",

packages/react-console/less/console.less

@@ -3,13 +3,3 @@
 */
 @import 'serial-console';
 @import 'vnc-console';
-
-.console-actions-pf {
-  float: right;
-  position: relative;
-  top: -2em;
-}
-
-.console-actions-buttons-pf {
-  margin-left: 5px;
-}

packages/react-console/less/serial-console.less

@@ -52,3 +52,13 @@
   padding-right: 0px;
   padding-left: 0px;
 }
+
+.console-actions-pf {
+  float: right;
+  position: relative;
+  top: -2em;
+}
+
+.console-actions-buttons-pf {
+  margin-left: 5px;
+}

packages/react-console/less/vnc-console.less

@@ -1,8 +1,20 @@
 .vnc-console {
+  padding-right: 0px;
+  padding-left: 0px;
+
   .vnc-console-connecting {
     background-color: @color-pf-green;
   }
   .vnc-console-disconnected {
     background-color: @color-pf-red;
   }
+  .toolbar-pf {
+    border-bottom: none;
+  }
+  .toolbar-pf-results {
+    padding-top: 10px;
+  }
+  .toolbar-pf-action-right .dropdown-menu {
+    min-width: 102px; /* avoid overflow if DropdownButton is used under Toolbar.RightContent */
+  }
 }

packages/react-console/package.json

@@ -37,7 +37,7 @@
     "@novnc/novnc": "^1.0.0",
     "classnames": "^2.2.5",
     "patternfly": "^3.51.0",
-    "patternfly-react": "^2.3.4",
+    "patternfly-react": "^2.10.0",
     "xterm": "^3.3.0"
   },
   "peerDependencies": {

packages/react-console/sass/_serial-console.scss

@@ -52,3 +52,13 @@
   padding-right: 0;
   padding-left: 0;
 }
+
+.console-actions-pf {
+  float: right;
+  position: relative;
+  top: -2em;
+}
+
+.console-actions-buttons-pf {
+  margin-left: 5px;
+}

packages/react-console/sass/_vnc-console.scss

@@ -6,4 +6,8 @@
   .vnc-console-disconnected {
     background-color: $color-pf-red;
   }
+
+  .toolbar-pf-action-right .dropdown-menu {
+    min-width: 102px;
+  }
 }

packages/react-console/sass/console.scss

@@ -17,12 +17,3 @@
 /**
   Styling shared by both VncConsole and SerialConsole.
 */
-.console-actions-pf {
-  float: right;
-  position: relative;
-  top: -2em;
-}
-
-.console-actions-buttons-pf {
-  margin-left: 5px;
-}

packages/react-console/src/VncConsole/VncActions.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DropdownButton, MenuItem, noop } from 'patternfly-react';
+
+const VncActions = ({ textSendShortcut, textCtrlAltDel, onCtrlAltDel }) => (
+  <DropdownButton
+    bsStyle="default"
+    title={textSendShortcut}
+    id="console-send-shortcut"
+    onClick={noop}
+  >
+    <MenuItem eventKey="1" onClick={onCtrlAltDel}>
+      {textCtrlAltDel}
+    </MenuItem>
+  </DropdownButton>
+);
+
+VncActions.propTypes = {
+  onCtrlAltDel: PropTypes.func,
+
+  textCtrlAltDel: PropTypes.string,
+  textSendShortcut: PropTypes.string
+};
+
+VncActions.defaultProps = {
+  onCtrlAltDel: noop,
+
+  textCtrlAltDel: 'Ctrl+Alt+Del',
+  textSendShortcut: 'Send Key'
+};
+
+export default VncActions;

packages/react-console/src/VncConsole/VncActions.test.js

@@ -0,0 +1,48 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import VncActions from './VncActions';
+
+test('placeholder render test', () => {
+  const view = shallow(<VncActions />);
+  expect(view).toMatchSnapshot();
+});
+
+test('VncActions renders correctly component hierarchy', () => {
+  const view = shallow(
+    <VncActions
+      textSendShortcut="My Send Shortcut description"
+      textCtrlAltDel="foobar"
+      onCtrlAltDel={jest.fn()}
+    />
+  );
+  expect(view).toMatchSnapshot();
+});
+
+test('VncActions renders correctly html', () => {
+  const view = shallow(
+    <VncActions
+      textSendShortcut="My Send Shortcut description"
+      textCtrlAltDel="foobar"
+      onCtrlAltDel={jest.fn()}
+    />
+  );
+  expect(view.html()).toMatchSnapshot();
+});
+
+test('VncActions calls ctrl+alt+del action', () => {
+  const onCtrlAltDel = jest.fn();
+
+  const wrapper = mount(
+    <VncActions
+      textSendShortcut="My Send Shortcut description"
+      textCtrlAltDel="CtrlAltDel"
+      onCtrlAltDel={onCtrlAltDel}
+    />
+  );
+
+  const button = wrapper.find('a[role="menuitem"]');
+  expect(button).toHaveLength(1);
+  button.simulate('click');
+  expect(onCtrlAltDel).toHaveBeenCalledTimes(1);
+});

packages/react-console/src/VncConsole/VncConsole.js

@@ -1,11 +1,196 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
-const propTypes = {};
-const defaultProps = {};
+import * as NovncLog from '@novnc/novnc/core/util/logging';
+import RFB from '@novnc/novnc/core/rfb';
 
-const VncConsole = () => <div>VncConsole</div>;
+import classNames from 'classnames';
+import { Toolbar, noop } from 'patternfly-react';
 
-VncConsole.propTypes = propTypes;
-VncConsole.defaultProps = defaultProps;
+import VncActions from './VncActions';
+
+const CONNECTING = 'connecting';
+const CONNECTED = 'connected';
+const DISCONNECTED = 'disconnected';
+
+/* eslint no-console: ["warn", { allow: ["error"] }] */
+
+class VncConsole extends React.Component {
+  state = { status: CONNECTING };
+
+  componentDidMount() {
+    const {
+      host,
+      port,
+      path,
+      encrypt,
+      resizeSession,
+      viewOnly,
+      shared,
+      credentials,
+      repeaterID,
+      vncLogging,
+      onInitFailed
+    } = this.props;
+
+    NovncLog.init_logging(vncLogging);
+    try {
+      const protocol = encrypt ? 'wss' : 'ws';
+      const url = `${protocol}://${host}:${port}/${path}`;
+
+      const options = {
+        repeaterID,
+        shared,
+        credentials
+      };
+
+      this.rfb = new RFB(this.novncElem, url, options);
+      this.rfb.addEventListener('connect', this.onConnected);
+      this.rfb.addEventListener('disconnect', this.onDisconnected);
+      this.rfb.addEventListener('securityfailure', this.onSecurityFailure);
+      this.rfb.viewOnly = viewOnly;
+      this.rfb.scaleViewport = false; // if the remote session is smaller than HTML container, the view will be centered
+      this.rfb.resizeSession = resizeSession;
+    } catch (e) {
+      onInitFailed && onInitFailed(e);
+      this.rfb = undefined;
+    }
+  }
+
+  onConnected = () => {
+    this.setState({ status: CONNECTED });
+  };
+
+  onCtrlAltDel = e => {
+    if (this.rfb) {
+      this.rfb.sendCtrlAltDel();
+      this.focusVnc(e);
+    }
+  };
+
+  onDisconnected = e => {
+    this.setState({ status: DISCONNECTED });
+    this.props.onDisconnected(e);
+  };
+
+  onSecurityFailure = e => {
+    this.setState({ status: DISCONNECTED });
+    this.props.onSecurityFailure(e);
+  };
+
+  setNovncElem = e => {
+    this.novncElem = e;
+  };
+
+  focusVnc = e => {
+    if (e && e.target && e.target.blur) {
+      e.target.blur();
+    }
+    this.novncElem && this.novncElem.focus();
+  };
+
+  render() {
+    const {
+      textDisconnected,
+      textConnecting,
+      textSendShortcut,
+      textCtrlAltDel
+    } = this.props;
+
+    let status = null;
+    let rightContent = null;
+    switch (this.state.status) {
+      case CONNECTED:
+        rightContent = (
+          <Toolbar.RightContent>
+            <VncActions
+              onCtrlAltDel={this.onCtrlAltDel}
+              textSendShortcut={textSendShortcut}
+              textCtrlAltDel={textCtrlAltDel}
+            />
+          </Toolbar.RightContent>
+        );
+        break;
+      case DISCONNECTED:
+        status = (
+          <div className="vnc-console-disconnected">{textDisconnected}</div>
+        );
+        break;
+      case CONNECTING:
+      default:
+        status = <div className="vnc-console-connecting">{textConnecting}</div>;
+    }
+
+    if (!this.novncStaticComponent) {
+      // create just once
+      this.novncStaticComponent = <div ref={this.setNovncElem} />;
+    }
+
+    return (
+      <Toolbar className={classNames('vnc-console', this.props.topClassName)}>
+        {this.props.children}
+        {rightContent}
+        <Toolbar.Results>
+          {status}
+          {this.novncStaticComponent}
+        </Toolbar.Results>
+      </Toolbar>
+    );
+  }
+}
+
+VncConsole.propTypes = {
+  children: PropTypes.node /** Children nodes */,
+
+  host: PropTypes.string.isRequired /** FQDN or IP to connect to */,
+  port: PropTypes.string /** TCP Port */,
+  path: PropTypes.string /** host:port/path */,
+  encrypt:
+    PropTypes.bool /** For all following, see: https://github.com/novnc/noVNC/blob/master/docs/API.md */,
+  resizeSession:
+    PropTypes.bool /** Change remote session size according to local HTML container */,
+  viewOnly: PropTypes.bool,
+  shared: PropTypes.bool,
+  credentials:
+    PropTypes.object /** { username: '', password: '', target: ''} */,
+  repeaterID: PropTypes.string,
+  vncLogging: PropTypes.string /** log-level for noVNC */,
+
+  topClassName: PropTypes.string /** Enable customization */,
+
+  onDisconnected: PropTypes.func /** Callback. VNC server disconnected. */,
+  onInitFailed: PropTypes.func /** Initialization of RFB failed */,
+  onSecurityFailure: PropTypes.func /** Handshake failed */,
+
+  textConnecting: PropTypes.string /** For localization */,
+  textDisconnected: PropTypes.string,
+  textSendShortcut: PropTypes.string,
+  textCtrlAltDel: PropTypes.string
+};
+
+VncConsole.defaultProps = {
+  children: null,
+
+  port: '80',
+  path: '',
+  encrypt: false,
+  resizeSession: true,
+  viewOnly: false,
+  shared: false,
+  credentials: undefined,
+  repeaterID: '',
+  vncLogging: 'warn',
+
+  topClassName: '',
+
+  onDisconnected: noop,
+  onInitFailed: noop,
+  onSecurityFailure: noop,
+
+  textConnecting: 'Connecting',
+  textDisconnected: 'Disconnected',
+  textSendShortcut: undefined /** Default value defined in VncActions */,
+  textCtrlAltDel: undefined /** Default value defined in VncActions */
+};
 
 export default VncConsole;