Introduce VmConsoles component (#115)

Introduce VmConsoles component

- Add "@patternfly/react-console" peer dependency
- Upgrade patternfly-react to latest 2.24.6

Author: mareklibra

config/jest.config.js

@@ -23,6 +23,7 @@ module.exports = {
       transform: {
         '\\.js$': `${paths.config}/jest.transform.babel.js`,
       },
+      transformIgnorePatterns: ['node_modules/(?!(@novnc))'],
       setupFiles: [`${paths.src}/jest/setupTest.js`],
       snapshotSerializers: ['enzyme-to-json/serializer'],
     },

package.json

@@ -31,6 +31,7 @@
     "coveralls": "shx cat coverage/lcov.info | coveralls"
   },
   "peerDependencies": {
+    "@patternfly/react-console": "1.8.1",
     "patternfly-react": "2.x",
     "prop-types": "15.x",
     "react": "16.3.x",
@@ -44,6 +45,7 @@
     "@babel/polyfill": "7.x",
     "@babel/preset-env": "7.x",
     "@babel/preset-react": "7.x",
+    "@patternfly/react-console": "1.8.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.x",
     "babel-jest": "23.x",

sass/_components.scss

@@ -9,3 +9,4 @@
 @import './components/NetworksTab';
 @import './components/StorageTab';
 @import './components/VmStatus';
+@import './components/VmConsoles';

sass/components/_VmConsoles.scss

@@ -0,0 +1,4 @@
+.vnc-console .toolbar-pf-action-right { /* TODO: This fix should go to patternfly-react */
+  padding-bottom: 12px !important;
+  margin-top: -14px !important;
+}

src/components/VmConsoles/SerialConsoleConnector.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { AccessConsoles, SerialConsole } from '@patternfly/react-console';
+
+const { CONNECTED, DISCONNECTED, LOADING } = AccessConsoles.constants;
+
+const { debug, info, error } = console;
+
+/**
+ * Kubevirt serial console is accessed via WebSocket proxy in k8s API.
+ * Protocol used is "plain.kubevirt.io", means binary and single channel - forwarding of unix socket only (see subresource.go in kubevirt).
+ */
+class SerialConsoleConnector extends React.Component {
+  state = {
+    status: LOADING,
+    passKeys: false,
+  };
+
+  onBackendDisconnected = event => {
+    debug('Backend has disconnected');
+    if (this.childSerialconsole) {
+      this.childSerialconsole.onConnectionClosed('Reason for disconnect provided by backend.');
+    }
+
+    if (event) {
+      info('Serial console connection closed, reason: ', event.reason);
+    }
+
+    this.ws && this.ws.destroy && this.ws.destroy();
+
+    this.setState({
+      passKeys: false,
+      status: DISCONNECTED, // will close the terminal window
+    });
+  };
+
+  onConnect = () => {
+    debug('SerialConsoleConnector.onConnect(), ', this.state);
+    const { vmi, host, path, WSFactory } = this.props;
+
+    if (this.ws) {
+      this.ws.destroy();
+      this.setState({
+        status: LOADING,
+      });
+    }
+
+    const options = {
+      host,
+      path,
+      reconnect: false,
+      jsonParse: false,
+      subprotocols: ['plain.kubevirt.io'],
+    };
+
+    this.ws = new WSFactory(`${vmi.metadata.name}-serial`, options)
+      .onmessage(this.onDataFromBackend)
+      .onopen(this.setConnected)
+      .onclose(this.onBackendDisconnected)
+      .onerror(event => {
+        error('WS error received: ', event);
+      });
+  };
+
+  onData = data => {
+    debug('UI terminal component produced data, i.e. a key was pressed, pass it to backend. [', data, ']');
+    this.ws && this.ws.send(new Blob([data]));
+    // data are resent back from backend so _will_ pass through onDataFromBackend
+  };
+
+  onDataFromBackend = data => {
+    // plain.kubevirt.io is binary and single-channel protocol
+    debug('Backend sent data, pass them to the UI component. [', data, ']');
+    if (this.childSerialconsole) {
+      const reader = new FileReader();
+      reader.addEventListener('loadend', e => {
+        // Blob to text transformation ...
+        const target = e.target || e.srcElement;
+        const text = target.result;
+        this.childSerialconsole.onDataReceived(text);
+      });
+      reader.readAsText(data);
+    }
+  };
+
+  onDisconnect = () => {
+    // disconnection initiated by UI component
+    this.onBackendDisconnected();
+  };
+
+  onResize = (rows, cols) => {
+    debug(
+      'UI has been resized, pass this info to backend. [',
+      rows,
+      ', ',
+      cols,
+      ']. Ignoring since recently not supported by backend.',
+      this
+    );
+  };
+
+  setConnected = () => {
+    this.setState({
+      status: CONNECTED,
+      passKeys: true,
+    });
+  };
+
+  /*
+        autoFit={this.props.autoFit}
+        cols={this.props.cols}
+        rows={this.props.rows}
+ */
+  render() {
+    return (
+      <SerialConsole
+        onConnect={this.onConnect}
+        onDisconnect={this.onDisconnect}
+        onResize={this.onResize}
+        onData={this.onData}
+        id="serial-console-todo"
+        status={this.state.status}
+        ref={c => {
+          this.childSerialconsole = c;
+        }}
+      />
+    );
+  }
+}
+SerialConsoleConnector.propTypes = {
+  vmi: PropTypes.object.isRequired,
+  host: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+
+  WSFactory: PropTypes.func.isRequired, // reference to OKD utility
+};
+
+export default SerialConsoleConnector;

src/components/VmConsoles/VmConsoles.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { AccessConsoles, VncConsole } from '@patternfly/react-console';
+import { Button } from 'patternfly-react';
+
+import { isVmiRunning, isVmStarting } from '../VmStatus';
+import SerialConsoleConnector from './SerialConsoleConnector';
+
+const { VNC_CONSOLE_TYPE, SERIAL_CONSOLE_TYPE } = AccessConsoles.constants;
+
+const VmIsDown = ({ vm, onStartVm }) => {
+  const action = (
+    <Button bsStyle="link" onClick={onStartVm}>
+      start
+    </Button>
+  );
+
+  return (
+    <div className="co-m-pane__body">
+      <div className="vm-consoles-loading">This Virtual Machine is down. Please {action} it to access its console.</div>
+    </div>
+  );
+};
+VmIsDown.propTypes = {
+  vm: PropTypes.object.isRequired,
+  onStartVm: PropTypes.func.isRequired,
+};
+
+const VmIsStarting = ({ LoadingComponent }) => (
+  <div className="co-m-pane__body">
+    <div className="vm-consoles-loading">
+      <LoadingComponent />
+      This Virtual Machine is still starting up. The console will be available soon.
+    </div>
+  </div>
+);
+VmIsStarting.propTypes = {
+  LoadingComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+};
+
+/**
+ * Actual component for consoles.
+ */
+export const VmConsoles = ({
+  vm,
+  vmi,
+  onStartVm,
+  getVncConnectionDetails,
+  getSerialConsoleConnectionDetails,
+  WSFactory,
+  LoadingComponent,
+}) => {
+  if (!isVmiRunning(vmi)) {
+    return isVmStarting(vm, vmi) ? (
+      <VmIsStarting LoadingComponent={LoadingComponent} />
+    ) : (
+      <VmIsDown vm={vm} onStartVm={onStartVm} />
+    );
+  }
+
+  const vncConDetails = getVncConnectionDetails(vmi);
+  const serialConDetails = getSerialConsoleConnectionDetails(vmi);
+  return (
+    <div className="co-m-pane__body">
+      <AccessConsoles preselectedType={VNC_CONSOLE_TYPE}>
+        <SerialConsoleConnector type={SERIAL_CONSOLE_TYPE} WSFactory={WSFactory} {...serialConDetails} />
+        <VncConsole {...vncConDetails} />
+      </AccessConsoles>
+    </div>
+  );
+};
+VmConsoles.propTypes = {
+  vm: PropTypes.object.isRequired,
+  vmi: PropTypes.object,
+
+  getVncConnectionDetails: PropTypes.func.isRequired,
+  getSerialConsoleConnectionDetails: PropTypes.func.isRequired,
+  onStartVm: PropTypes.func.isRequired,
+
+  LoadingComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+  WSFactory: PropTypes.func.isRequired,
+};
+VmConsoles.defaultProps = {
+  vmi: undefined,
+};

src/components/VmConsoles/fixtures/SerialConsoleConnector.fixture.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const dummyFixture = {
+  vmi: {},
+  host: 'dummy.host',
+  path: 'dummy.path',
+  WSFactory: () => {},
+};
+
+export default {
+  component: ({ text }) => <div>{text}</div> /* eslint-disable-line react/prop-types */,
+  props: {
+    text: 'SerialConsoleConnector skipped due to complexity',
+  },
+};

src/components/VmConsoles/fixtures/VmConsoles.fixture.js

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import { helpers } from 'patternfly-react';
+import { VmConsoles } from '../index';
+
+const LoadingComponent = () => <div className="dummy-loading-component" />;
+
+const vmiStarting = {
+  metadata: {
+    name: 'my-vm',
+  },
+  status: {
+    phase: 'Scheduling',
+  },
+};
+
+const vmiRunning = {
+  metadata: {
+    name: 'my-vm',
+  },
+  status: {
+    phase: 'Running',
+  },
+};
+
+const vmOff = {
+  metadata: {
+    name: 'my-vm',
+  },
+  spec: {
+    running: false,
+  },
+};
+
+const vmRunning = {
+  metadata: {
+    name: 'my-vm',
+  },
+  spec: {
+    running: true,
+  },
+};
+
+export const downVmProps = {
+  vm: vmOff,
+  vmi: undefined,
+
+  getVncConnectionDetails: helpers.noop,
+  getSerialConsoleConnectionDetails: helpers.noop,
+  onStartVm: helpers.noop,
+  WSFactory: helpers.noop,
+  LoadingComponent,
+};
+
+export const startingVmProps = {
+  vm: vmRunning,
+  vmi: vmiStarting,
+
+  getVncConnectionDetails: helpers.noop,
+  getSerialConsoleConnectionDetails: helpers.noop,
+  onStartVm: helpers.noop,
+  WSFactory: helpers.noop,
+  LoadingComponent,
+};
+
+export const runningVmProps = {
+  vm: vmRunning,
+  vmi: vmiRunning,
+
+  onStartVm: helpers.noop,
+  WSFactory: helpers.noop,
+  LoadingComponent,
+};
+
+export default [
+  {
+    component: VmConsoles,
+    props: downVmProps,
+  },
+  {
+    component: VmConsoles,
+    props: startingVmProps,
+  },
+];

src/components/VmConsoles/index.js

@@ -0,0 +1 @@
+export * from './VmConsoles';

src/components/VmConsoles/tests/SerialConsoleConnector.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import SerialConsoleConnector from '../SerialConsoleConnector';
+import { dummyFixture } from '../fixtures/SerialConsoleConnector.fixture';
+
+describe('<SerialConsoleConnector />', () => {
+  it('renders correctly - dummy shallow test only', () => {
+    const component = shallow(<SerialConsoleConnector {...dummyFixture} />);
+    expect(component).toMatchSnapshot();
+  });
+});