Added NoVNC console page

config/paths.js

@@ -35,4 +35,5 @@ module.exports = {
   appVersionJs: resolveApp('src/version.js'),
   ownNodeModules: resolveApp('node_modules'),
   nodePaths: nodePaths,
+  novnc: resolveApp('node_modules/@novnc/novnc')
 }

config/webpack.config.dev.js

@@ -100,7 +100,7 @@ module.exports = {
       // Process JS with Babel.
       {
         test: /\.(js|jsx)$/,
-        include: paths.appSrc,
+        include: [paths.appSrc, paths.novnc],
         loader: 'babel',
         query: require('./babel.dev'),
       },

config/webpack.config.prod.js

@@ -96,7 +96,7 @@ module.exports = {
       // Process JS with Babel.
       {
         test: /\.(js|jsx)$/,
-        include: paths.appSrc,
+        include: [paths.appSrc, paths.novnc],
         loader: 'babel',
         query: require('./babel.prod'),
       },

package.json

@@ -69,6 +69,7 @@
   },
   "dependencies": {
     "babel-polyfill": "6.26.0",
+    "@patternfly/react-console": "1.10.22",
     "blob-util": "1.2.1",
     "bootstrap": "3.3.7",
     "bootstrap-select": "1.13.1",

src/actions/console.js

@@ -1,51 +1,113 @@
 import {
-  CHECK_CONSOLE_IN_USE,
+  OPEN_CONSOLE_MODAL,
+  SET_CONSOLE_NOVNC_STATUS,
+  SET_CONSOLE_TICKETS,
   DOWNLOAD_CONSOLE_VM,
-  SET_CONSOLE_IN_USE,
-  SET_CONSOLE_LOGON,
-} from '_/constants'
+  SET_ACTIVE_CONSOLE,
+  SET_NEW_CONSOLE_MODAL,
+  CLOSE_CONSOLE_MODAL,
+  SET_IN_USE_CONSOLE_MODAL_STATE,
+  SET_LOGON_CONSOLE_MODAL_STATE,
+} from '../constants'
 
-export function setConsoleInUse ({ vmId, consoleInUse }) {
+export function openConsoleModal ({ vmId, usbFilter, userId, consoleId, hasGuestAgent, openInPage, isNoVNC, modalId }) {
   return {
-    type: SET_CONSOLE_IN_USE,
+    type: OPEN_CONSOLE_MODAL,
     payload: {
       vmId,
-      consoleInUse,
+      usbFilter,
+      userId,
+      consoleId,
+      hasGuestAgent,
+      openInPage,
+      isNoVNC,
+      modalId,
     },
   }
 }
 
-export function setConsoleLogon ({ vmId, isLogon }) {
+export function setActiveConsole ({ vmId, consoleId }) {
   return {
-    type: SET_CONSOLE_LOGON,
+    type: SET_ACTIVE_CONSOLE,
     payload: {
       vmId,
-      isLogon,
+      consoleId,
     },
   }
 }
 
-export function checkConsoleInUse ({ vmId, usbFilter, userId, hasGuestAgent }) {
+export function downloadConsole ({ vmId, consoleId, usbFilter, hasGuestAgent, skipSSO, openInPage, isNoVNC, modalId }) {
   return {
-    type: CHECK_CONSOLE_IN_USE,
+    type: DOWNLOAD_CONSOLE_VM,
     payload: {
       vmId,
+      consoleId,
       usbFilter,
-      userId,
       hasGuestAgent,
+      skipSSO,
+      openInPage,
+      isNoVNC,
+      modalId,
     },
   }
 }
 
-export function downloadConsole ({ vmId, consoleId, usbFilter, hasGuestAgent, skipSSO }) {
+export function setConsoleTickets ({ vmId, proxyTicket, ticket }) {
   return {
-    type: DOWNLOAD_CONSOLE_VM,
+    type: SET_CONSOLE_TICKETS,
     payload: {
+      vmId,
+      proxyTicket,
+      ticket,
+    },
+  }
+}
+
+export function setConsoleStatus ({ vmId, status, reason }) {
+  return {
+    type: SET_CONSOLE_NOVNC_STATUS,
+    payload: {
+      vmId,
+      status,
+      reason,
+    },
+  }
+}
+
+export function setNewConsoleModal ({ modalId, vmId, consoleId }) {
+  return {
+    type: SET_NEW_CONSOLE_MODAL,
+    payload: {
+      modalId,
       vmId,
       consoleId,
-      usbFilter,
-      hasGuestAgent,
-      skipSSO,
+    },
+  }
+}
+
+export function closeConsoleModal ({ modalId }) {
+  return {
+    type: CLOSE_CONSOLE_MODAL,
+    payload: {
+      modalId,
+    },
+  }
+}
+
+export function setInUseConsoleModalState ({ modalId }) {
+  return {
+    type: SET_IN_USE_CONSOLE_MODAL_STATE,
+    payload: {
+      modalId,
+    },
+  }
+}
+
+export function setLogonConsoleModalState ({ modalId }) {
+  return {
+    type: SET_LOGON_CONSOLE_MODAL_STATE,
+    payload: {
+      modalId,
     },
   }
 }

src/actions/index.js

@@ -15,6 +15,7 @@ import {
   SET_USER_FILTER_PERMISSION,
   SET_USER_GROUPS,
   SET_USER_SESSION_TIMEOUT_INTERVAL,
+  SET_WEBSOCKET,
   SHOW_TOKEN_EXPIRED_MSG,
   START_SCHEDULER_FIXED_DELAY,
   STOP_SCHEDULER_FIXED_DELAY,
@@ -90,6 +91,15 @@ export function setUserSessionTimeoutInternal (userSessionTimeoutInterval) {
   }
 }
 
+export function setWebsocket (websocket) {
+  return {
+    type: SET_WEBSOCKET,
+    payload: {
+      websocket,
+    },
+  }
+}
+
 export function setAdministrator (administrator) {
   return {
     type: SET_ADMINISTRATOR,

src/components/Loader.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import style from './sharedStyle.css'
+
+export const SIZES = {
+  SMALL: 'SMALL',
+  LARGE: 'LARGE',
+}
+
+const Loader = ({ loaderText, size }) => {
+  let wh = 0
+  switch (size) {
+    case SIZES.SMALL:
+      wh = 30
+      break
+    case SIZES.LARGE:
+      wh = 100
+      break
+  }
+  return <div className={style['loaderBox']}>
+    <div style={{ height: wh, width: wh }} className={style['loader']} />
+    <div>{loaderText}</div>
+  </div>
+}
+
+Loader.propTypes = {
+  loaderText: PropTypes.string,
+  size: PropTypes.oneOf(Object.values(SIZES)),
+}
+
+export default Loader

src/components/PageRouter.js

@@ -77,7 +77,7 @@ class PageRouter extends React.Component {
     return (
       <div id='page-router'>
         <Breadcrumb branches={branches} />
-        <Toolbar>
+        <Toolbar isFullWidth={branch.route.isToolbarFullWidth}>
           {tools}
         </Toolbar>
         <div id='page-router-render-component'>

src/components/Pages/index.js

@@ -11,6 +11,7 @@ import { canUserUseAnyClusters } from '_/utils'
 import VmDialog from '../VmDialog'
 import VmsList from '../VmsList'
 import VmDetails from '../VmDetails'
+import VmConsole from '../VmConsole'
 import { default as LegacyVmDetails } from '../VmDetail'
 
 import { addUserMessage } from '_/actions'
@@ -150,9 +151,32 @@ const VmCreatePageConnected = connect(
   })
 )(VmCreatePage)
 
+class VmConsolePage extends React.Component {
+  render () {
+    const { vms, match } = this.props
+    if (match.params.id && vms.getIn(['vms', match.params.id])) {
+      return <VmConsole consoleId={match.params.console} vmId={match.params.id} />
+    }
+    return null
+  }
+}
+
+VmConsolePage.propTypes = {
+  match: RouterPropTypeShapes.match.isRequired,
+  vms: PropTypes.object.isRequired,
+}
+
+const VmConsolePageConnected = connect(
+  (state) => ({
+    vms: state.vms,
+  }),
+  (dispatch) => ({})
+)(VmConsolePage)
+
 export {
   PoolDetailsPageConnected as PoolDetailsPage,
   VmDetailsPageConnected as VmDetailsPage,
   VmCreatePageConnected as VmCreatePage,
+  VmConsolePageConnected as VmConsolePage,
   VmsPage,
 }

src/components/Toolbar/Toolbar.js

@@ -2,17 +2,17 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import style from './style.css'
 
-const Toolbar = ({ children }) => {
+const Toolbar = ({ children, isFullWidth }) => {
   let i = 0
   const actions = children.map((c) => {
-    return (<div key={'toolbar' + i++} className={`form-group toolbar-pf-view-selector ${style['actions-padding']}`}>{c}</div>)
+    return (<div key={'toolbar' + i++} className={`form-group toolbar-pf-view-selector ${style['actions-padding']} ${isFullWidth && style['full-width']}`}>{c}</div>)
   })
 
   return (<div className={`container-fluid ${style['toolbar']}`}>
     <div className='row toolbar-pf'>
       <div className='col-sm-12'>
         <div className='toolbar-pf-actions'>
-          <div className='toolbar-pf-action-right toolbar-pf-height-shim'>
+          <div className={`toolbar-pf-action-right toolbar-pf-height-shim ${isFullWidth && style['full-width']}`}>
             {actions}
           </div>
         </div>
@@ -23,6 +23,7 @@ const Toolbar = ({ children }) => {
 
 Toolbar.propTypes = {
   children: PropTypes.node.isRequired,
+  isFullWidth: PropTypes.bool,
 }
 
 export default Toolbar

src/components/Toolbar/index.js

@@ -2,8 +2,13 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
+import style from './style.css'
 import { RouterPropTypeShapes } from '_/propTypeShapes'
 import VmActions from '../VmActions'
+import VmConsoleSelector from '../VmConsole/VmConsoleSelector'
+import VmConsoleInstructionsModal from '../VmConsole/VmConsoleInstructionsModal'
+
+import { INIT_CONSOLE, DOWNLOAD_CONSOLE } from '_/constants'
 
 const VmDetailToolbar = ({ match, vms }) => {
   if (vms.getIn(['vms', match.params.id])) {
@@ -42,7 +47,42 @@ const PoolDetailToolbarConnected = connect(
   })
 )(PoolDetailToolbar)
 
+const VmConsoleToolbar = ({ match, vms, consoles }) => {
+  if (vms.getIn(['vms', match.params.id])) {
+    const consoleStatus = [INIT_CONSOLE, DOWNLOAD_CONSOLE]
+    return <div className={style['console-toolbar']}>
+      <div className={style['console-toolbar-actions']}>
+        <VmConsoleSelector
+          vmId={match.params.id}
+          consoleId={match.params.console}
+          isConsolePage
+        />
+        <VmConsoleInstructionsModal
+          disabled={!consoleStatus.includes(consoles.getIn(['vms', match.params.id, 'consoleStatus']))} />
+      </div>
+      <div className={style['console-toolbar-actions']}>
+        <div id='vm-console-toolbar-sendkeys' />
+      </div>
+    </div>
+  }
+  return <div />
+}
+
+VmConsoleToolbar.propTypes = {
+  vms: PropTypes.object.isRequired,
+  consoles: PropTypes.object.isRequired,
+  match: RouterPropTypeShapes.match.isRequired,
+}
+
+const VmConsoleToolbarConnected = connect(
+  (state) => ({
+    vms: state.vms,
+    consoles: state.consoles,
+  })
+)(VmConsoleToolbar)
+
 export {
   VmDetailToolbarConnected as VmDetailToolbar,
   PoolDetailToolbarConnected as PoolDetailToolbar,
+  VmConsoleToolbarConnected as VmConsoleToolbar,
 }

src/components/Toolbar/style.css

@@ -5,3 +5,19 @@
 .toolbar {
   width: 100%;
 }
+
+.full-width {
+  width: 100%;
+}
+
+.console-toolbar {
+  height: 30px;
+  display: flex;
+  font-size: 14px;
+  line-height: 1.8;
+  justify-content: space-between;
+}
+
+.console-toolbar-actions {
+  display: flex;
+}