Fix bugs and comments in VNC Console

scripts/start.js

@@ -8,8 +8,6 @@ var webpack = require('webpack');
 var WebpackDevServer = require('webpack-dev-server');
 var historyApiFallback = require('connect-history-api-fallback');
 var httpProxyMiddleware = require('http-proxy-middleware');
-var http = require('http');
-var httpProxy = require('http-proxy');
 var execSync = require('child_process').execSync;
 var opn = require('opn');
 var detect = require('detect-port');

src/components/Pages/index.js

@@ -155,7 +155,7 @@ 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_id} vmId={match.params.id} />
+      return <VmConsole consoleId={match.params.console} vmId={match.params.id} />
     }
     return null
   }

src/components/Toolbar/index.js

@@ -53,12 +53,12 @@ const VmConsoleToolbar = ({ match, vms, consoles }) => {
       <div className={style['console-toolbar-actions']}>
         <VmConsoleSelector
           vmId={match.params.id}
-          consoleId={match.params.console_id}
+          consoleId={match.params.console}
           isConsolePage
         />
         <VmConsoleSettingsModal
           vm={vms.getIn(['vms', match.params.id])}
-          consoleId={match.params.console_id}
+          consoleId={match.params.console}
           disabled={consoles.getIn(['vms', match.params.id, 'consoleStatus']) !== INIT_CONSOLE} />
       </div>
       <div className={style['console-toolbar-actions']}>

src/components/VmActions/Action.js

@@ -114,7 +114,7 @@ const ActionButtonWraper = (props) => {
       disabled={actionDisabled}
     >
       { items.filter(i => i !== null).map(item => {
-        return <MenuItemAction {...item} />
+        return <MenuItemAction key={item.id} {...item} />
       }) }
     </DropdownButton>
   }

src/components/VmActions/index.js

@@ -49,14 +49,6 @@ EmptyAction.propTypes = {
   isOnCard: PropTypes.bool.isRequired,
 }
 
-function reshapeArray (resArray, current) {
-  if (current.constructor === Array) {
-    return resArray.concat(current)
-  }
-  resArray.push(current)
-  return resArray
-}
-
 class VmDropdownActions extends React.Component {
   render () {
     const { actions, id } = this.props
@@ -76,12 +68,11 @@ class VmDropdownActions extends React.Component {
           onClick={actionsCopy[0].onClick}
           id={id}
         >
-          { actionsCopy.slice(1).map(action => {
+          { [].concat(...actionsCopy.slice(1).map(action => {
             return action.items && action.items.length > 0
               ? action.items.filter(a => a !== null).map(a => <MenuItemAction key={a.shortTitle} {...a} />)
               : <MenuItemAction key={action.shortTitle} {...action} />
-          }).reduce(reshapeArray, [])
-          }
+          }))}
         </SplitButton>
       </Action>
     )

src/components/VmConsole/VmConsoleSelector.js

@@ -13,63 +13,66 @@ import { getRDP } from '_/actions'
 import { isWindows } from '_/helpers'
 import style from './style.css'
 
-class VmConsoleSelector extends React.Component {
-  render () {
-    const { vmId, vms, consoles, config, consoleId, isConsolePage, onRDP } = this.props
-    let actions = vms.getIn(['vms', vmId, 'consoles'])
-    if (actions.size === 0) {
-      return <div />
-    }
-    const activeConsole = consoleId === 'rdp'
-      ? msg.rdpConsole()
-      : consoles.getIn(['vms', vmId, 'consoleStatus']) === DOWNLOAD_CONSOLE
-        ? msg[actions.find((a) => a.get('id') === consoleId).get('protocol') + 'Console']()
-        : msg.vncConsoleBrowser()
-    const vnc = actions.find((a) => a.get('protocol') === 'vnc')
-    const consoleItems = actions.map(action =>
-      <MenuItemAction
-        id={action.get('id')}
-        key={action.get('id')}
-        confirmation={<ConsoleConfirmationModal isConsolePage={isConsolePage} vm={vms.getIn(['vms', vmId])} consoleId={action.get('id')} onClose={() => {}} />}
-        shortTitle={msg[action.get('protocol') + 'Console']()}
-        icon={<Icon name='external-link' />}
-      />
-    ).toJS()
+const RDP_ID = 'rdp'
+
+const VmConsoleSelector = ({ vmId, vms, consoles, config, consoleId, isConsolePage, onRDP }) => {
+  let actions = vms.getIn(['vms', vmId, 'consoles'])
+  if (actions.size === 0) {
+    return <div />
+  }
+
+  const vnc = actions.find((a) => a.get('protocol') === 'vnc')
 
-    const hasRdp = isWindows(vms.getIn(['vms', vmId, 'os', 'type']))
+  const consoleItems = actions.map(action =>
+    <MenuItemAction
+      id={action.get('id')}
+      key={action.get('id')}
+      confirmation={<ConsoleConfirmationModal isConsolePage={isConsolePage} vm={vms.getIn(['vms', vmId])} consoleId={action.get('id')} onClose={() => {}} />}
+      shortTitle={msg[action.get('protocol') + 'Console']()}
+      icon={<Icon name='external-link' />}
+    />
+  ).toJS()
 
-    if (hasRdp) {
-      const domain = config.get('domain')
-      const username = config.getIn([ 'user', 'name' ])
-      consoleItems.push(<MenuItem
-        key='rdp'
-        onClick={(e) => { e.preventDefault(); onRDP({ domain, username }) }}
-      >
-        {msg.rdpConsole()} <Icon name='external-link' />
-      </MenuItem>)
-    }
+  const hasRdp = isWindows(vms.getIn(['vms', vmId, 'os', 'type']))
 
-    if (vnc.size) {
-      consoleItems.push(
-        <MenuItemAction
-          id={`${vnc.get('id')}_browser`}
-          key={`${vnc.get('id')}_browser`}
-          confirmation={<ConsoleConfirmationModal isConsolePage={isConsolePage} isNoVNC vm={vms.getIn(['vms', vmId])} consoleId={vnc.get('id')} onClose={() => {}} />}
-          shortTitle={msg.vncConsoleBrowser()}
-        />
-      )
-    }
-    return <div className={style['console-dropdown-box']}>
-      <span className={style['console-dropdown-label']}>{`${msg.console()}:`}</span>
-      <DropdownButton
-        title={activeConsole}
-        bsStyle='default'
-        id='console-selector'
-      >
-        { consoleItems }
-      </DropdownButton>
-    </div>
+  if (hasRdp) {
+    const domain = config.get('domain')
+    const username = config.getIn([ 'user', 'name' ])
+    consoleItems.push(<MenuItem
+      key={RDP_ID}
+      onClick={(e) => { e.preventDefault(); onRDP({ domain, username }) }}
+    >
+      {msg.rdpConsole()} <Icon name='external-link' />
+    </MenuItem>)
   }
+
+  if (vnc.size) {
+    consoleItems.push(
+      <MenuItemAction
+        id={`${vnc.get('id')}_browser`}
+        key={`${vnc.get('id')}_browser`}
+        confirmation={<ConsoleConfirmationModal isConsolePage={isConsolePage} isNoVNC vm={vms.getIn(['vms', vmId])} consoleId={vnc.get('id')} onClose={() => {}} />}
+        shortTitle={msg.vncConsoleBrowser()}
+      />
+    )
+  }
+
+  const activeConsole = consoleId === RDP_ID
+    ? msg.rdpConsole()
+    : consoles.getIn(['vms', vmId, 'consoleStatus']) === DOWNLOAD_CONSOLE
+      ? msg[actions.find((a) => a.get('id') === consoleId).get('protocol') + 'Console']()
+      : msg.vncConsoleBrowser()
+
+  return <div className={style['console-dropdown-box']}>
+    <span className={style['console-dropdown-label']}>{`${msg.console()}:`}</span>
+    <DropdownButton
+      title={activeConsole}
+      bsStyle='default'
+      id='console-selector'
+    >
+      { consoleItems }
+    </DropdownButton>
+  </div>
 }
 
 VmConsoleSelector.propTypes = {

src/components/VmConsole/index.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 
 import style from './style.css'
-import VncConsole from './VncConsole'
+import VncConsole from '_/react-console'
 import { setConsoleStatus, getRDP } from '_/actions'
 import ConsoleConfirmationModal from '../VmActions/ConsoleConfirmationModal'
 import { INIT_CONSOLE, DOWNLOAD_CONSOLE, DISCONNECTED_CONSOLE } from '_/constants'
@@ -61,35 +61,50 @@ class VmConsole extends React.Component {
   render () {
     const { vmId, config, consoleId, vms, onDisconnected } = this.props
     const websocket = config.get('websocket')
+    const vmConsole = this.props.consoles.getIn(['vms', vmId])
     if (consoleId === RDP_ID) {
-      return <InfoPageContainer icon={downloadIcon} mainText={msg.downloadedRDPFile()} secondaryText={msg.downloadedRDP()} />
+      return <InfoPageContainer
+        icon={downloadIcon}
+        mainText={msg.downloadedRDPFile()}
+        secondaryText={msg.downloadedRDP()}
+      />
     }
     const currentConsole = vms.getIn(['vms', vmId, 'consoles']).find(c => c.get('id') === consoleId)
     if (this.state.isFirstRun) {
       return <div>
         <Loader loaderText='Loading' size={SIZES.SMALL} />
-        <ConsoleConfirmationModal isConsolePage isNoVNC vm={vms.getIn(['vms', vmId])} consoleId={consoleId} onClose={() => this.setState({ isFirstRun: false })} show />
+        <ConsoleConfirmationModal
+          vm={vms.getIn(['vms', vmId])}
+          consoleId={consoleId}
+          onClose={() => this.setState({ isFirstRun: false })}
+          isConsolePage
+          isNoVNC
+          show
+        />
       </div>
     }
-    const proxyTicket = this.props.consoles.getIn(['vms', vmId, 'proxyTicket'])
-    const ticket = this.props.consoles.getIn(['vms', vmId, 'ticket'])
-    switch (this.props.consoles.getIn(['vms', vmId, 'consoleStatus'])) {
+    const proxyTicket = vmConsole && vmConsole.get('proxyTicket')
+    const ticket = vmConsole && vmConsole.get('ticket')
+    switch (vmConsole && vmConsole.get('consoleStatus')) {
       case INIT_CONSOLE:
         if (ticket !== undefined && websocket !== null) {
           return <VncConsole
             encrypt
             resizeSession
             scaleViewport
             textConnecting={<Loader loaderText='Connecting' size={SIZES.SMALL} />}
+            textDisconnect={msg.disconnect()}
+            textSendShortcut={msg.sendShortcutKey()}
+            textCtrlAltDel={msg.sendCtrlAltDel()}
             credentials={{ password: ticket.value }}
             path={proxyTicket}
             host={websocket.get('host')}
             port={websocket.get('port')}
-            portalToolbarTo='vm-console-toolbar-sendkeys'
+            toolbarContainer='vm-console-toolbar-sendkeys'
             onDisconnected={onDisconnected}
           />
         }
-        return null
+        break
       case DOWNLOAD_CONSOLE:
         return <InfoPageContainer icon={downloadIcon} mainText={msg.downloadedVVFile()} secondaryText={msg[`downloaded${currentConsole.get('protocol').toUpperCase()}`]()} />
       case DISCONNECTED_CONSOLE:
@@ -100,7 +115,9 @@ class VmConsole extends React.Component {
           secondaryComponent={<Button bsStyle='primary' onClick={() => this.setState({ isFirstRun: true })}>{ msg.connect() }</Button>}
         />
     }
-    return null
+    return <div>
+      <Loader loaderText={msg.loadingTripleDot()} size={SIZES.SMALL} />
+    </div>
   }
 }
 

src/components/VmConsole/style.css

@@ -72,26 +72,3 @@
     font-size: 15px;
     margin-top: 20px;
 }
-
-.loaderBox {
-    width: 100%;
-    text-align: center;
-    align-content: center;
-    margin-top: 60px;
-}
-
-.loader {
-    border: 6px solid #e3e3e3; /* Light grey */
-    border-top: 6px solid #292e34; /* Blue */
-    border-radius: 50%;
-    width: 30px;
-    height: 30px;
-    animation: spin 2s linear infinite;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}

src/components/VmDetails/cards/DetailsCard/style.css

@@ -24,26 +24,6 @@
   padding-right: 15px;
 }
 
-/*
- * For the console field
- */
-.console-list-active {
-  color: black;
-}
-
-.console-list-inactive {
-  color: #888888;
-}
-
-.console-link {
-  padding-right: 5px;
-}
-
-.console-link + .console-link {
-  padding-left: 5px;
-  border-left: 1px solid rgba(0, 0, 0, 0.2);
-}
-
 /*
  * For cloud-init and boot-menu on/off icons
  */

src/components/VmsList/Vms.js

@@ -9,6 +9,7 @@ import Pool from './Pool'
 import ScrollPositionHistory from '../ScrollPositionHistory'
 import { getByPage } from '_/actions'
 import InfiniteScroll from 'react-infinite-scroller'
+import Loader, { SIZES } from '../Loader'
 
 /**
  * Use Patternfly 'Single Select Card View' pattern to show every VM and Pool
@@ -47,7 +48,7 @@ class Vms extends React.Component {
       <InfiniteScroll
         loadMore={this.loadMore}
         hasMore={vms.get('notAllPagesLoaded')}
-        loader={<div key='infinite-scroll-loader' className={style['loaderBox']}><div className={style['loader']} /></div>}
+        loader={<Loader key='infinite-scroll-loader' size={SIZES.LARGE} />}
         useWindow={false}
       >
         <ScrollPositionHistory uniquePrefix='vms-list' scrollContainerSelector='#page-router-render-component'>

src/components/VmsList/style.css

@@ -46,28 +46,6 @@
     color: black;
 }
 
-.loaderBox {
-    width: 100%;
-    text-align: center;
-    align-content: center;
-}
-
-.loader {
-    border: 12px solid #f3f3f3; /* Light grey */
-    border-top: 12px solid #292e34; /* Blue */
-    border-radius: 50%;
-    width: 100px;
-    height: 100px;
-    animation: spin 2s linear infinite;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
 .card-icon {
     text-align: center;
     height: 134px;

src/intl/messages.js

@@ -91,6 +91,7 @@ export const messages: { [messageId: string]: MessageType } = {
   delete: 'Delete',
   description: 'Description',
   details: 'Details',
+  disconnect: { message: 'Disconnect', description: 'Text for disconnect button in noVNC console' },
   disconectedConsole: 'Disconnected from Console',
   disconectedConsoleInfo: 'The console has been diconnected. Press the \'Connect\' button to reconnect the console.',
   diskActionCreateNew: 'Create Disk',
@@ -404,6 +405,8 @@ export const messages: { [messageId: string]: MessageType } = {
   secondDevice: 'Second Device',
   secondDeviceTooltip: 'Second device in order.',
   secondsShort: 's',
+  sendShortcutKey: 'Send Key',
+  sendCtrlAltDel: 'Ctrl+Alt+Del',
   shutdown: 'Shutdown',
   shutdownVm: 'Shutdown the VM',
   shutdownVmQuestion: 'Are you sure you want to Shutdown the VM?',