Merge pull request #717 from sjd78/enable-legacy-detail

Enable access to the pre-redesign VM detail page

src/components/DetailContainer.js

@@ -5,10 +5,8 @@ import sharedStyle from './sharedStyle.css'
 
 const DetailContainer = ({ children, ...props }) => {
   return (
-    <div className='detail-container'>
-      <div className={`container-fluid ${sharedStyle['move-left-detail']} ${sharedStyle['detail-z-index']}`} {...props}>
-        {children}
-      </div>
+    <div className={`container-fluid ${sharedStyle['move-left-detail']} ${sharedStyle['detail-z-index']}`} {...props}>
+      {children}
     </div>
   )
 }

src/components/Pages/index.js

@@ -6,6 +6,7 @@ import { RouterPropTypeShapes } from '../../propTypeShapes'
 import VmDialog from '../VmDialog'
 import VmsList from '../VmsList'
 import VmDetails from '../VmDetails'
+import { default as LegacyVmDetails } from '../VmDetail'
 
 import { selectVmDetail, selectPoolDetail, getIsoStorageDomains, getConsoleOptions } from '../../actions'
 
@@ -15,6 +16,60 @@ import { selectVmDetail, selectPoolDetail, getIsoStorageDomains, getConsoleOptio
 const VmsPage = () => {
   return <VmsList />
 }
+/**
+ * Route component (for PageRouter) to view a VM's details
+ */
+class LegacyVmDetailsPage extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      vmId: undefined,
+    }
+  }
+
+  static getDerivedStateFromProps (props, state) {
+    if (state.vmId !== props.match.params.id) {
+      const vmId = props.match.params.id
+
+      // Assume the VM is not in props.vms, was shallow fetched or is stale.
+      // Force a refresh when it is selected for viewing.
+      props.getConsoleOptions(vmId)
+      props.getVmById(vmId)
+      return { vmId }
+    }
+
+    return null
+  }
+
+  render () {
+    const { vms } = this.props
+    const { vmId } = this.state
+
+    if (vmId && vms.getIn(['vms', vmId])) {
+      return (<LegacyVmDetails vm={vms.getIn(['vms', vmId])} />)
+    }
+
+    // TODO: Add handling for if the fetch runs but fails (FETCH-FAIL), see issue #631
+    console.info(`LegacyVmDetailsPage: VM id cannot be found: ${vmId}`)
+    return null
+  }
+}
+LegacyVmDetailsPage.propTypes = {
+  vms: PropTypes.object.isRequired,
+  match: RouterPropTypeShapes.match.isRequired,
+
+  getVmById: PropTypes.func.isRequired,
+  getConsoleOptions: PropTypes.func.isRequired,
+}
+const LegacyVmDetailsPageConnected = connect(
+  (state) => ({
+    vms: state.vms,
+  }),
+  (dispatch) => ({
+    getVmById: (vmId) => dispatch(selectVmDetail({ vmId })),
+    getConsoleOptions: (vmId) => dispatch(getConsoleOptions({ vmId })),
+  })
+)(LegacyVmDetailsPage)
 
 /**
  * Route component (for PageRouter) to view a VM's details
@@ -207,6 +262,7 @@ const VmEditPageConnected = connect(
 
 export {
   PoolDetailsPageConnected as PoolDetailsPage,
+  LegacyVmDetailsPageConnected as LegacyVmDetailsPage,
   VmDetailsPageConnected as VmDetailsPage,
   VmCreatePageConnected as VmCreatePage,
   VmEditPageConnected as VmEditPage,

src/components/Toolbar/index.js

@@ -5,15 +5,17 @@ import { connect } from 'react-redux'
 import { RouterPropTypeShapes } from '../../propTypeShapes'
 import VmActions from '../VmActions'
 
-const VmDetailToolbar = ({ match, vms }) => {
+const VmDetailToolbar = ({ match, vms, includeLegacyDetails = false }) => {
   if (vms.getIn(['vms', match.params.id])) {
-    return (<VmActions vm={vms.getIn(['vms', match.params.id])} />)
+    return (<VmActions vm={vms.getIn(['vms', match.params.id])} includeLegacyDetails={includeLegacyDetails} />)
   }
   return null
 }
 
 VmDetailToolbar.propTypes = {
   vms: PropTypes.object.isRequired,
+  includeLegacyDetails: PropTypes.bool,
+
   match: RouterPropTypeShapes.match.isRequired,
 }
 

src/components/VmActions/index.js

@@ -2,9 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
 
 import style from './style.css'
 import { msg } from '../../intl'
+import { RouterPropTypeShapes } from '../../propTypeShapes'
 
 import {
   canRestart,
@@ -194,6 +196,8 @@ class VmActions extends React.Component {
       pool,
       isOnCard = false,
       onRemove,
+      includeLegacyDetails = false,
+      location,
     } = this.props
 
     const isPool = !!pool
@@ -206,10 +210,13 @@ class VmActions extends React.Component {
     if (isOnCard) {
       let filteredActions = actions.filter((action) => !action.actionDisabled).sort((a, b) => a.priority < b.priority ? 1 : 0)
       filteredActions = filteredActions.length === 0 ? [ actions[0] ] : filteredActions
-      return <div className={`actions-line card-pf-items text-center ${style['action-height']}`}><VmDropdownActions id={`${idPrefix}-actions`} actions={filteredActions} /></div>
+
+      return <div className={`actions-line card-pf-items text-center ${style['action-height']}`}>
+        <VmDropdownActions id={`${idPrefix}-actions`} actions={filteredActions} />
+      </div>
     }
 
-    // Actions for toolbars
+    // Actions for the Toolbar
     const removeConfirmation = (
       <ConfirmationModal
         title={msg.remove()}
@@ -221,7 +228,8 @@ class VmActions extends React.Component {
                 <Checkbox
                   checked={this.state.removePreserveDisks}
                   onClick={() => this.setState((s) => { return { removePreserveDisks: !s.removePreserveDisks } })}
-                  label={msg.preserveDisks()} />
+                  label={msg.preserveDisks()}
+                />
               </div>
             )}
           </div>
@@ -234,16 +242,44 @@ class VmActions extends React.Component {
       <div className={`actions-line ${style['left-padding']}`}>
         <EmptyAction state={status} isOnCard={isOnCard} />
 
-        {actions.map(action => <ActionButtonWraper {...action} />)}
+        {actions.map(action => <ActionButtonWraper key={action.id} {...action} />)}
 
         <span className={style['button-spacer']} />
+        {includeLegacyDetails && (
+          <LinkButton
+            isOnCard={isOnCard}
+            shortTitle='Legacy View'
+            tooltip='Legacy View'
+            to={`/vm-legacy/${vm.get('id')}`}
+            button='btn btn-default'
+            className={`pficon pficon-edit ${style['action-link']}`}
+            id={`action-${vm.get('name')}-edit`}
+          />
+        )}
 
-        <LinkButton isOnCard={isOnCard}
+        {location && /vm-legacy/.test(location.pathname) && (
+          <LinkButton
+            isOnCard={isOnCard}
+            shortTitle='View'
+            tooltip='View'
+            to={`/vm/${vm.get('id')}`}
+            button='btn btn-default'
+            className={`pficon pficon-edit ${style['action-link']}`}
+            id={`action-${vm.get('name')}-edit`}
+          />
+        )}
+
+        <LinkButton
+          isOnCard={isOnCard}
           shortTitle={msg.edit()}
-          tooltip={msg.editVm()} to={`/vm/${vm.get('id')}/edit`}
+          tooltip={msg.editVm()}
+          to={`/vm/${vm.get('id')}/edit`}
           button='btn btn-default'
           className={`pficon pficon-edit ${style['action-link']}`}
-          id={`action-${vm.get('name')}-edit`} />
+          id={`action-${vm.get('name')}-edit`}
+        />
+        <span className={style['button-spacer']} />
+
         <ActionButtonWraper
           confirmation={removeConfirmation}
           actionDisabled={isPool || !canRemove(status) || vm.getIn(['actionInProgress', 'remove'])}
@@ -260,6 +296,9 @@ VmActions.propTypes = {
   vm: PropTypes.object.isRequired,
   pool: PropTypes.object,
   isOnCard: PropTypes.bool,
+  includeLegacyDetails: PropTypes.bool,
+
+  location: RouterPropTypeShapes.location.isRequired,
 
   onShutdown: PropTypes.func.isRequired,
   onRestart: PropTypes.func.isRequired,
@@ -270,15 +309,17 @@ VmActions.propTypes = {
   onStartVm: PropTypes.func.isRequired,
 }
 
-export default connect(
-  (state) => ({ }),
-  (dispatch, { vm, pool }) => ({
-    onShutdown: () => dispatch(shutdownVm({ vmId: vm.get('id'), force: false })),
-    onRestart: () => dispatch(restartVm({ vmId: vm.get('id'), force: false })),
-    onForceShutdown: () => dispatch(shutdownVm({ vmId: vm.get('id'), force: true })),
-    onSuspend: () => dispatch(suspendVm({ vmId: vm.get('id') })),
-    onRemove: ({ preserveDisks, force }) => dispatch(removeVm({ vmId: vm.get('id'), force, preserveDisks })),
-    onStartPool: () => dispatch(startPool({ poolId: pool.get('id') })),
-    onStartVm: () => dispatch(startVm({ vmId: vm.get('id') })),
-  })
-)(VmActions)
+export default withRouter(
+  connect(
+    (state) => ({ }),
+    (dispatch, { vm, pool }) => ({
+      onShutdown: () => dispatch(shutdownVm({ vmId: vm.get('id'), force: false })),
+      onRestart: () => dispatch(restartVm({ vmId: vm.get('id'), force: false })),
+      onForceShutdown: () => dispatch(shutdownVm({ vmId: vm.get('id'), force: true })),
+      onSuspend: () => dispatch(suspendVm({ vmId: vm.get('id') })),
+      onRemove: ({ preserveDisks, force }) => dispatch(removeVm({ vmId: vm.get('id'), force, preserveDisks })),
+      onStartPool: () => dispatch(startPool({ poolId: pool.get('id') })),
+      onStartVm: () => dispatch(startVm({ vmId: vm.get('id') })),
+    })
+  )(VmActions)
+)

src/components/VmDetail/index.js

@@ -158,7 +158,7 @@ class VmDetail extends Component {
     }
 
     return (
-      <div className={style['main-container']} data-thisisvmdetail>
+      <div className={`detail-container ${style['main-container']}`} data-thisisvmdetail>
         <VmsListNavigation selectedVm={vm} expanded={this.state.vmsNavigationExpanded} toggleExpansion={this.toggleVmsNavExpansion} />
         <div className={style['vm-detail-main']} container='true'>
           <div className={this.state.vmsNavigationExpanded ? style['vms-nav-expanded'] : style['vms-nav-collapsed']}>

src/components/VmDialog/index.js

@@ -572,7 +572,7 @@ class VmDialog extends React.Component {
       : null
 
     return (
-      <DetailContainer>
+      <div className='detail-container'><DetailContainer>
         <h1 className={style['header']} id={`${idPrefix}-${isEdit ? 'edit' : 'create'}-title`}>
           <VmIcon icon={icon} missingIconClassName='pficon pficon-virtual-machine' />
           &nbsp;{dialogHeader}
@@ -783,7 +783,7 @@ class VmDialog extends React.Component {
           </div>
         </form>
 
-      </DetailContainer>
+      </DetailContainer></div>
     )
   }
 }

src/components/VmsListNavigation/index.js

@@ -41,7 +41,7 @@ const VmsListNavigation = ({ selectedVm, vms, expanded, toggleExpansion, loadAno
 
       return (
         <li role='presentation' className={style['item']} key={vm.get('id')}>
-          <Link to={`/vm/${vm.get('id')}`} className={style['item-link']}>
+          <Link to={`/vm-legacy/${vm.get('id')}`} className={style['item-link']}>
             <span className={style['item-text']} id={`${idPrefix}-item-${vm.get('name')}`}>{vm.get('name')}</span>
           </Link>
         </li>

src/routes.js

@@ -3,7 +3,7 @@ import React from 'react'
 import AddVmButton from './components/VmDialog/AddVmButton'
 import PageRouter from './components/PageRouter'
 import { VmDetailToolbar, PoolDetailToolbar } from './components/Toolbar'
-import { PoolDetailsPage, VmDetailsPage, VmEditPage, VmCreatePage, VmsPage } from './components/Pages'
+import { PoolDetailsPage, VmDetailsPage, VmEditPage, VmCreatePage, VmsPage, LegacyVmDetailsPage } from './components/Pages'
 
 import { msg } from './intl'
 
@@ -43,7 +43,7 @@ export default function getRoutes (vms) {
         path: '/vm/:id',
         title: (match, vms) => vms.getIn(['vms', match.params.id, 'name']) || match.params.id,
         component: VmDetailsPage,
-        toolbars: [(match) => (<VmDetailToolbar match={match} key='vmaction' />)],
+        toolbars: [(match) => (<VmDetailToolbar match={match} key='vmaction' includeLegacyDetails />)],
         routes: [
           {
             path: '/vm/:id/edit',
@@ -55,6 +55,13 @@ export default function getRoutes (vms) {
         ],
       },
 
+      {
+        path: '/vm-legacy/:id',
+        title: (match, vms) => vms.getIn(['vms', match.params.id, 'name']) || match.params.id,
+        component: LegacyVmDetailsPage,
+        toolbars: [(match) => (<VmDetailToolbar match={match} key='vmaction' />)],
+      },
+
       {
         path: '/pool/:id',
         title: (match, vms) => vms.getIn(['pools', match.params.id, 'name']) || match.params.id,