From 28c5127e1f9a1c2a642f0c89ccaaf2500c108c4b Mon Sep 17 00:00:00 2001
From: Radoslaw Szwajkowski <rszwajko@redhat.com>
Date: Wed, 24 Nov 2021 17:29:16 +0100
Subject: [PATCH] [WIP] VM Details

---
 src/components/Grid/style.css                 |   4 +-
 src/components/VmDetails/BaseCard.js          |  47 ++-
 src/components/VmDetails/CardEditButton.js    |  14 +-
 .../DetailsCard/CloudInit/CloudInitForm.js    |  35 +--
 .../DetailsCard/CloudInit/SysprepForm.js      |  63 ++--
 .../VmDetails/cards/DetailsCard/FieldRow.js   |  21 +-
 .../VmDetails/cards/DetailsCard/index.js      |  45 +--
 .../VmDetails/cards/DetailsCard/style.css     |   4 +
 .../cards/DisksCard/DiskImageEditor.js        | 276 ++++++++----------
 .../VmDetails/cards/DisksCard/DiskListItem.js |  17 +-
 .../cards/DisksCard/DiskStateIcon.js          |  39 +--
 .../VmDetails/cards/DisksCard/index.js        |   6 +-
 .../VmDetails/cards/NicsCard/NicEditor.js     | 164 +++++------
 .../cards/NicsCard/NicLinkStateIcon.js        |  32 +-
 .../VmDetails/cards/NicsCard/NicListItem.js   |  14 +-
 .../VmDetails/cards/NicsCard/index.js         |   6 +-
 .../VmDetails/cards/OverviewCard/index.js     |  44 +--
 .../cards/SnapshotsCard/NewSnapshotModal.js   |  94 +++---
 .../cards/SnapshotsCard/SnapshotDetail.js     | 271 +++++++----------
 .../cards/SnapshotsCard/SnapshotItem.js       |  56 ++--
 .../VmDetails/cards/SnapshotsCard/index.js    |   3 +-
 .../cards/UtilizationCard/CpuCharts.js        |  30 +-
 .../cards/UtilizationCard/DiskCharts.js       |  47 ++-
 .../cards/UtilizationCard/MemoryCharts.js     |  47 ++-
 .../cards/UtilizationCard/NetworkingCharts.js |  30 +-
 .../cards/UtilizationCard/NoHistoricData.js   |   4 +-
 .../cards/UtilizationCard/NoLiveData.js       |   4 +-
 .../UtilizationCard/UtilizationCardData.js    |  25 ++
 .../VmDetails/cards/UtilizationCard/style.css |  35 +++
 src/components/VmDetails/index.js             |  11 +-
 src/components/VmDetails/style.css            |   7 +-
 31 files changed, 663 insertions(+), 832 deletions(-)
 create mode 100644 src/components/VmDetails/cards/UtilizationCard/UtilizationCardData.js

diff --git a/src/components/Grid/style.css b/src/components/Grid/style.css
index 37864c9fa7..ea1857cd30 100644
--- a/src/components/Grid/style.css
+++ b/src/components/Grid/style.css
@@ -17,8 +17,8 @@
   position: relative;
   width: 100%;
   min-height: 1px;
-  padding-right: 20px;
-  padding-left: 20px;
+  padding-right: 10px;
+  padding-left: 10px;
 
   flex: 1 1 0; /* grow shrink basis */
   max-width: 100%;
diff --git a/src/components/VmDetails/BaseCard.js b/src/components/VmDetails/BaseCard.js
index a4d9f3b0f2..95c4c34588 100644
--- a/src/components/VmDetails/BaseCard.js
+++ b/src/components/VmDetails/BaseCard.js
@@ -4,18 +4,16 @@ import {
   Badge,
   Button,
   Card,
-  CardHeading,
+  CardHeader,
   CardTitle,
   CardBody,
   CardFooter,
-  Icon,
-  noop,
-  excludeKeys,
-} from 'patternfly-react'
+} from '@patternfly/react-core'
 
 import style from './style.css'
 import CardEditButton from './CardEditButton'
 import { Tooltip } from '_/components/tooltips'
+import { CheckIcon, TimesIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 /**
  * Base VM details card.  Support common layouts and view vs edit modes.
@@ -76,7 +74,7 @@ class BaseCard extends React.Component {
   }
 
   renderChildren (childProps) {
-    const children = this.props.children || noop
+    const children = this.props.children || (() => {})
     return typeof children === 'function'
       ? children(childProps)
       : React.isValidElement(children)
@@ -87,7 +85,7 @@ class BaseCard extends React.Component {
   render () {
     const {
       title = undefined,
-      icon = undefined,
+      icon: TheIcon = undefined,
       itemCount = undefined,
       editMode = undefined,
       editable = true,
@@ -101,13 +99,18 @@ class BaseCard extends React.Component {
     const editing = editMode === undefined ? this.state.edit : editMode
     const hasHeading = !!title
     const hasBadge = itemCount !== undefined
-    const hasIcon = icon && icon.type && icon.name
 
     const RenderChildren = this.renderChildren
     return (
-      <Card className={`${style['base-card']} ${className}`} id={`${idPrefix}-card`} {...excludeKeys(this.props, this.propTypeKeys)}>
+      <Card className={`${style['base-card']} ${className}`} id={`${idPrefix}-card` } isCompact>
         {hasHeading && (
-          <CardHeading className={style['base-card-heading']}>
+          <CardHeader className={style['base-card-heading']}>
+
+            <CardTitle>
+              {TheIcon && <TheIcon className={style['base-card-title-icon']} />}
+              {title}
+              {hasBadge && <Badge isRead>{itemCount}</Badge>}
+            </CardTitle>
             <CardEditButton
               tooltip={editTooltip}
               editable={editable}
@@ -117,12 +120,7 @@ class BaseCard extends React.Component {
               id={`${idPrefix}-button-edit`}
               placement={editTooltipPlacement}
             />
-            <CardTitle>
-              {hasIcon && <Icon type={icon.type} name={icon.name} className={style['base-card-title-icon']} />}
-              {title}
-              {hasBadge && <Badge className={style['base-card-item-count-badge']}>{itemCount}</Badge>}
-            </CardTitle>
-          </CardHeading>
+          </CardHeader>
         )}
 
         <CardBody className={style['base-card-body']}>
@@ -143,10 +141,8 @@ class BaseCard extends React.Component {
 
         {editing && (
           <CardFooter className={style['base-card-footer']}>
-            <Button disabled={disableSaveButton} bsStyle='primary' onClick={this.clickSave} id={`${idPrefix}-button-save`}>
-              <Icon type='fa' name='check' />
-            </Button>
-            <Button onClick={this.clickCancel} id={`${idPrefix}-button-cancel`}><Icon type='pf' name='close' /></Button>
+            <Button isDisabled={disableSaveButton} onClick={this.clickSave} id={`${idPrefix}-button-save`} icon={<CheckIcon />}/>
+            <Button onClick={this.clickCancel} id={`${idPrefix}-button-cancel`} icon={<TimesIcon />} variant='link'/>
           </CardFooter>
         )}
       </Card>
@@ -155,10 +151,7 @@ class BaseCard extends React.Component {
 }
 BaseCard.propTypes = {
   title: PropTypes.string,
-  icon: PropTypes.shape({
-    type: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-  }),
+  icon: PropTypes.any,
   itemCount: PropTypes.number,
   idPrefix: PropTypes.string,
   className: PropTypes.string,
@@ -176,9 +169,9 @@ BaseCard.propTypes = {
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
 }
 BaseCard.defaultProps = {
-  onStartEdit: noop,
-  onCancel: noop,
-  onSave: noop,
+  onStartEdit: () => {},
+  onCancel: () => {},
+  onSave: () => {},
 }
 
 export default BaseCard
diff --git a/src/components/VmDetails/CardEditButton.js b/src/components/VmDetails/CardEditButton.js
index 4207c59190..eb63e00e41 100644
--- a/src/components/VmDetails/CardEditButton.js
+++ b/src/components/VmDetails/CardEditButton.js
@@ -1,9 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {
-  Icon,
-  noop,
-} from 'patternfly-react'
+
+import { PencilAltIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 import style from './style.css'
 
@@ -42,7 +40,7 @@ class CardEditButton extends React.Component {
     const { editEnabled } = this.state
 
     const classes = `${style['card-edit-button']} ${style[editEnabled ? 'card-edit-button-enabled' : 'card-edit-button-disabled']}`
-    const myClick = editEnabled ? noop : this.enableEditHandler
+    const myClick = editEnabled ? () => {} : this.enableEditHandler
 
     if (!editable && disableTooltip) {
       return (
@@ -52,7 +50,7 @@ class CardEditButton extends React.Component {
           id={`${id}-card-edit-button-tooltip`}
         >
           <a className={`${style['card-edit-button']} ${style['card-edit-button-disabled']}`} id={id}>
-            <Icon type='pf' name='edit' />
+            <PencilAltIcon/>
           </a>
         </Tooltip>
       )
@@ -64,7 +62,7 @@ class CardEditButton extends React.Component {
     return (
       <Tooltip id={`${id}-tooltip`} tooltip={tooltip} placement={placement}>
         <a id={id} className={classes} onClick={(e) => { e.preventDefault(); myClick() }}>
-          <Icon type='pf' name='edit' />
+          <PencilAltIcon/>
         </a>
       </Tooltip>
     )
@@ -82,7 +80,7 @@ CardEditButton.propTypes = {
 CardEditButton.defaultProps = {
   tooltip: '',
   editEnabled: false,
-  onClick: noop,
+  onClick: () => {},
 }
 
 export default CardEditButton
diff --git a/src/components/VmDetails/cards/DetailsCard/CloudInit/CloudInitForm.js b/src/components/VmDetails/cards/DetailsCard/CloudInit/CloudInitForm.js
index c5a6d73558..7453866363 100644
--- a/src/components/VmDetails/cards/DetailsCard/CloudInit/CloudInitForm.js
+++ b/src/components/VmDetails/cards/DetailsCard/CloudInit/CloudInitForm.js
@@ -1,10 +1,10 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import {
-  FormControl,
-  ControlLabel,
   FormGroup,
-} from 'patternfly-react'
+  TextArea,
+  TextInput,
+} from '@patternfly/react-core'
 import { MsgContext } from '_/intl'
 
 const CloudInitForm = ({ idPrefix, vm, onChange }) => {
@@ -13,24 +13,25 @@ const CloudInitForm = ({ idPrefix, vm, onChange }) => {
   const cloudInitSshAuthorizedKeys = vm.getIn(['cloudInit', 'sshAuthorizedKeys'])
   return (
     <>
-      <FormGroup controlId={`${idPrefix}-cloud-init-hostname`}>
-        <ControlLabel>
-          {msg.hostName()}
-        </ControlLabel>
-        <FormControl
-          type='text'
+      <FormGroup
+        label={msg.hostName()}
+        fieldId={`${idPrefix}-cloud-init-hostname`}
+      >
+        <TextInput
+          id={`${idPrefix}-cloud-init-hostname`}
+          type="text"
           value={cloudInitHostName}
-          onChange={e => onChange('cloudInitHostName', e.target.value)}
+          onChange={value => onChange('cloudInitHostName', value)}
         />
       </FormGroup>
-      <FormGroup controlId={`${idPrefix}-cloud-init-ssh`}>
-        <ControlLabel>
-          {msg.sshAuthorizedKeys()}
-        </ControlLabel>
-        <FormControl
-          componentClass='textarea'
+      <FormGroup
+        label={msg.sshAuthorizedKeys()}
+        fieldId={`${idPrefix}-cloud-init-ssh`}
+      >
+        <TextArea
+          id={`${idPrefix}-cloud-init-ssh`}
           value={cloudInitSshAuthorizedKeys}
-          onChange={e => onChange('cloudInitSshAuthorizedKeys', e.target.value)}
+          onChange={value => onChange('cloudInitSshAuthorizedKeys', value)}
         />
       </FormGroup>
     </>
diff --git a/src/components/VmDetails/cards/DetailsCard/CloudInit/SysprepForm.js b/src/components/VmDetails/cards/DetailsCard/CloudInit/SysprepForm.js
index d307d64dea..b682b978d6 100644
--- a/src/components/VmDetails/cards/DetailsCard/CloudInit/SysprepForm.js
+++ b/src/components/VmDetails/cards/DetailsCard/CloudInit/SysprepForm.js
@@ -2,10 +2,10 @@ import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import {
   Checkbox,
-  ControlLabel,
-  FormControl,
   FormGroup,
-} from 'patternfly-react'
+  TextArea,
+  TextInput,
+} from '@patternfly/react-core'
 import { MsgContext } from '_/intl'
 import SelectBox from '../../../../SelectBox'
 import timezones from '_/components/utils/timezones.json'
@@ -19,40 +19,41 @@ const SysprepForm = ({ idPrefix, vm, onChange, lastInitTimezone }) => {
 
   return (
     <>
-      <FormGroup controlId={`${idPrefix}-cloud-init-hostname`}>
-        <ControlLabel>
-          {msg.hostName()}
-        </ControlLabel>
-        <FormControl
+      <FormGroup
+        label={msg.hostName()}
+        fieldId={`${idPrefix}-sysprep-hostname`}
+      >
+        <TextInput
+          id={`${idPrefix}-sysprep-hostname`}
           type='text'
           value={cloudInitHostName}
-          onChange={e => onChange('cloudInitHostName', e.target.value)}
+          onChange={value => onChange('cloudInitHostName', value)}
         />
       </FormGroup>
-      <FormGroup controlId={`${idPrefix}-cloud-init-hostname`}>
-        <ControlLabel>
-          {msg.password()}
-        </ControlLabel>
-        <FormControl
+      <FormGroup
+        label={msg.password()}
+        fieldId={`${idPrefix}-sysprep-password`}
+      >
+        <TextInput
+          id={`${idPrefix}-sysprep-password`}
           type='password'
           value={cloudInitPassword}
-          onChange={e => onChange('cloudInitPassword', e.target.value)}
+          onChange={value => onChange('cloudInitPassword', value)}
         />
       </FormGroup>
 
       {/*  Configure Timezone checkbox */}
       <Checkbox
         id={`${idPrefix}-sysprep-timezone-config`}
-        checked={enableInitTimezone}
-        onChange={e => onChange('enableInitTimezone', e.target.checked)}
-      >
-        {msg.sysPrepTimezoneConfigure()}
-      </Checkbox>
+        label={msg.sysPrepTimezoneConfigure()}
+        isChecked={enableInitTimezone}
+        onChange={checked => onChange('enableInitTimezone', checked)}
+      />
 
-      <FormGroup controlId={`${idPrefix}-cloud-init-timezone`}>
-        <ControlLabel>
-          {msg.timezone()}
-        </ControlLabel>
+      <FormGroup
+        label={msg.timezone()}
+        fieldId={`${idPrefix}-sysprep-timezone-select`}
+      >
         <SelectBox
           id={`${idPrefix}-sysprep-timezone-select`}
           items={timezones}
@@ -61,14 +62,14 @@ const SysprepForm = ({ idPrefix, vm, onChange, lastInitTimezone }) => {
           disabled={!enableInitTimezone}
         />
       </FormGroup>
-      <FormGroup controlId={`${idPrefix}-sysprep-custom-script`}>
-        <ControlLabel>
-          {msg.customScript()}
-        </ControlLabel>
-        <FormControl
-          componentClass='textarea'
+      <FormGroup
+        label={msg.customScript()}
+        fieldId={`${idPrefix}-sysprep-custom-script`}
+      >
+        <TextArea
+          id={`${idPrefix}-sysprep-custom-script`}
           value={cloudInitCustomScript}
-          onChange={e => onChange('cloudInitCustomScript', e.target.value)}
+          onChange={value => onChange('cloudInitCustomScript', value)}
         />
       </FormGroup>
     </>
diff --git a/src/components/VmDetails/cards/DetailsCard/FieldRow.js b/src/components/VmDetails/cards/DetailsCard/FieldRow.js
index a04bf3deea..c2c99dd14c 100644
--- a/src/components/VmDetails/cards/DetailsCard/FieldRow.js
+++ b/src/components/VmDetails/cards/DetailsCard/FieldRow.js
@@ -3,19 +3,16 @@ import PropTypes from 'prop-types'
 
 import { Col } from '_/components/Grid'
 import { InfoTooltip, Tooltip } from '_/components/tooltips'
-import { FormGroup, ControlLabel } from 'patternfly-react'
+import { FormGroup } from '@patternfly/react-core'
 import classnames from 'classnames'
 
 import style from './style.css'
 import gridStyle from '_/components/Grid/style.css'
 
-const FieldRow = ({ label, children, id, tooltip, tooltipPosition, validationState = null }) => (
-  <FormGroup
-    className={classnames(gridStyle['grid-row'], style['field-row'])}
-    validationState={validationState}
-  >
+const FieldRow = ({ label, children, id, tooltip, tooltipPosition, validationState = 'default' }) => (
+  <div className={classnames(gridStyle['grid-row'], style['field-row'])}>
     <Col cols={5} className={style['col-label']}>
-      <ControlLabel>{label}</ControlLabel>
+      {label}
       {tooltip && (
         <span className={style.tooltip}>
           <InfoTooltip
@@ -26,8 +23,12 @@ const FieldRow = ({ label, children, id, tooltip, tooltipPosition, validationSta
         </span>
       )}
     </Col>
-    <Col cols={7} className={style['col-data']} id={id}>{children}</Col>
-  </FormGroup>
+    <Col cols={7} className={style['col-data']} id={id}>
+      <FormGroup validated={validationState}>
+        {children}
+      </FormGroup>
+    </Col>
+  </div>
 )
 FieldRow.propTypes = {
   id: PropTypes.string.isRequired,
@@ -35,7 +36,7 @@ FieldRow.propTypes = {
   tooltip: PropTypes.oneOfType([Tooltip.propTypes.tooltip]),
   children: PropTypes.node.isRequired,
   tooltipPosition: Tooltip.propTypes.placement,
-  validationState: FormGroup.propTypes.validationState,
+  validationState: PropTypes.oneOf(['success', 'warning', 'error', 'default']),
 }
 
 export default FieldRow
diff --git a/src/components/VmDetails/cards/DetailsCard/index.js b/src/components/VmDetails/cards/DetailsCard/index.js
index 0cc19fd4d6..d6574e3eea 100644
--- a/src/components/VmDetails/cards/DetailsCard/index.js
+++ b/src/components/VmDetails/cards/DetailsCard/index.js
@@ -34,12 +34,13 @@ import {
 } from '_/components/utils'
 
 import {
-  ExpandCollapse,
-  FormControl,
-  Icon,
-} from 'patternfly-react'
+  Alert,
+  ExpandableSection,
+  NumberInput,
+  Switch,
+} from '@patternfly/react-core'
 
-import { Switch, Alert } from '@patternfly/react-core'
+import { OffIcon, OnIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 import SelectBox from '_/components/SelectBox'
 import BaseCard from '../../BaseCard'
@@ -880,13 +881,13 @@ class DetailsCard extends React.Component {
                         </FieldRow>
                         <FieldRow label={isOsWindows ? msg.sysprep() : msg.cloudInit()} id={`${idPrefix}-cloud-init`}>
                           <div className={style['cloud-init-field']}>
-                            {cloudInitEnabled ? <Icon type='pf' name='on' /> : <Icon type='pf' name='off' />}
+                            {cloudInitEnabled ? <OnIcon/> : <OffIcon/>}
                             {enumMsg('Switch', cloudInitEnabled ? 'on' : 'off', msg)}
                           </div>
                         </FieldRow>
                         <FieldRow label={msg.bootMenu()} id={`${idPrefix}-boot-menu-readonly`}>
                           <div className={style['boot-menu-field']}>
-                            {bootMenuEnabled ? <Icon type='pf' name='on' /> : <Icon type='pf' name='off' />}
+                            {bootMenuEnabled ? <OnIcon/> : <OffIcon/>}
                             {enumMsg('Switch', bootMenuEnabled ? 'on' : 'off', msg)}
                           </div>
                         </FieldRow>
@@ -913,14 +914,15 @@ class DetailsCard extends React.Component {
                           { !isFullEdit && vCpuCount }
                           { isFullEdit && (
                             <div>
-                              <FormControl
+                              <NumberInput
                                 id={`${idPrefix}-cpus-edit`}
-                                className={style['cpu-input']}
-                                type='number'
                                 min={1}
                                 max={MAX_VM_VCPU_EDIT}
                                 value={vCpuCount}
+                                widthChars={5}
                                 onChange={e => this.handleChange('cpu', e.target.value)}
+                                onPlus={() => this.handleChange('cpu', vCpuCount + 1)}
+                                onMinus={() => this.handleChange('cpu', vCpuCount - 1)}
                               />
                               { !vCpuCountIsValid && (
                                 <div className={style['cpu-input-error']}>
@@ -938,16 +940,15 @@ class DetailsCard extends React.Component {
                         <FieldRow label={msg.memory()} id={`${idPrefix}-memory`}>
                           { !isFullEdit && `${userFormatOfBytes(memorySize).str}` }
                           { isFullEdit && (
-                            <div>
-                              <FormControl
-                                id={`${idPrefix}-memory-edit`}
-                                className={style['memory-input']}
-                                type='number'
-                                value={(memorySize / (1024 ** 2))}
-                                onChange={e => this.handleChange('memory', e.target.value)}
-                              />
-                              MiB
-                            </div>
+                            <NumberInput
+                              id={`${idPrefix}-memory-edit`}
+                              value={(memorySize / (1024 ** 2))}
+                              onChange={e => this.handleChange('memory', e.target.value)}
+                              unit='MiB'
+                              widthChars={5}
+                              onPlus={() => this.handleChange('memory', (memorySize / (1024 ** 2)) + 1)}
+                              onMinus={() => this.handleChange('memory', (memorySize / (1024 ** 2)) - 1)}
+                            />
                           )}
                         </FieldRow>
                       </Grid>
@@ -957,7 +958,7 @@ class DetailsCard extends React.Component {
 
                 {/* Advanced options */}
                 { isFullEdit && (
-                  <ExpandCollapse id={`${idPrefix}-advanced-options`} textCollapsed={msg.advancedOptions()} textExpanded={msg.advancedOptions()}>
+                  <ExpandableSection id={`${idPrefix}-advanced-options`} toggleText={msg.advancedOptions()}>
                     <Grid className={style['details-container']}>
                       <Row>
                         {/* First column */}
@@ -1089,7 +1090,7 @@ class DetailsCard extends React.Component {
                         </Col>
                       </Row>
                     </Grid>
-                  </ExpandCollapse>
+                  </ExpandableSection>
                 ) }
 
                 { correlatedMessages && correlatedMessages.size > 0 && correlatedMessages.map((message, key) => (
diff --git a/src/components/VmDetails/cards/DetailsCard/style.css b/src/components/VmDetails/cards/DetailsCard/style.css
index f7fd69242f..9daeebea88 100644
--- a/src/components/VmDetails/cards/DetailsCard/style.css
+++ b/src/components/VmDetails/cards/DetailsCard/style.css
@@ -21,6 +21,10 @@
   margin-bottom: 0;
 }
 
+.field-row .col-label {
+  font-weight: 600;
+}
+
 .field-row-divide {
   margin-top: 20px;
   margin-bottom: 5px;
diff --git a/src/components/VmDetails/cards/DisksCard/DiskImageEditor.js b/src/components/VmDetails/cards/DisksCard/DiskImageEditor.js
index 93c03cde19..7a61ab7d59 100644
--- a/src/components/VmDetails/cards/DisksCard/DiskImageEditor.js
+++ b/src/components/VmDetails/cards/DisksCard/DiskImageEditor.js
@@ -7,23 +7,21 @@ import { createDiskTypeList, createStorageDomainList, isDiskNameValid } from '_/
 import { withMsg } from '_/intl'
 
 import {
+  Button,
   Checkbox,
-  Col,
-  ControlLabel,
   Form,
-  FormControl,
   FormGroup,
-  HelpBlock,
-} from 'patternfly-react'
-import {
-  Alert,
-  Button,
+  HelperText,
+  HelperTextItem,
   Modal,
   ModalVariant,
+  NumberInput,
+  TextInput,
 } from '@patternfly/react-core'
 import SelectBox from '_/components/SelectBox'
 import style from './style.css'
-import { Tooltip, InfoTooltip } from '_/components/tooltips'
+import { InfoTooltip } from '_/components/tooltips'
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 const DISK_DEFAULTS = {
   bootable: false,
@@ -31,17 +29,6 @@ const DISK_DEFAULTS = {
   provisionedSize: 1 * 1024 ** 3,
 }
 
-const LabelCol = ({ children, ...props }) => {
-  return (
-    <Col componentClass={ControlLabel} {...props}>
-      { children }
-    </Col>
-  )
-}
-LabelCol.propTypes = {
-  children: PropTypes.node.isRequired,
-}
-
 /**
  * Collect required information required to create a new or edit an existing Disk Image
  * for a VM.
@@ -255,7 +242,7 @@ class DiskImageEditor extends Component {
     this.close()
   }
 
-  changeAlias ({ target: { value } }) {
+  changeAlias (value) {
     this.setState(
       (state) => ({ values: { ...state.values, alias: value }, errors: { ...state.errors, alias: '' } }),
       () => {
@@ -264,16 +251,14 @@ class DiskImageEditor extends Component {
     this.changesMade = true
   }
 
-  changeSize ({ target: { value } }) {
+  changeSize (value) {
     if (isNumber(value) && value >= 0) {
       this.setState((state) => ({ values: { ...state.values, size: value } }))
       this.changesMade = true
     }
   }
 
-  changeBootable (event) {
-    const target = event.target
-    const bootable = target.type === 'checkbox' ? target.checked : target.value
+  changeBootable (bootable) {
     this.setState((state) => ({ values: { ...state.values, bootable } }))
     this.changesMade = true
   }
@@ -351,79 +336,62 @@ class DiskImageEditor extends Component {
           ]}
         >
           <Form
-            horizontal
-            onSubmit={e => { e.preventDefault() }}
+            isHorizontal
             id={`${idPrefix}-modal-form`}
           >
             {/* Alias */}
-            <FormGroup controlId={`${idPrefix}-alias`} validationState={this.state.errors.alias ? 'error' : null}>
-              <LabelCol sm={3}>
-                { msg.diskEditorAliasLabel() }
-              </LabelCol>
-              <Col sm={9}>
-                <FormControl
-                  type='text'
-                  defaultValue={this.state.values.alias}
-                  onChange={this.changeAlias}
-                />
-                {this.state.errors.alias && <HelpBlock>{this.state.errors.alias}</HelpBlock>}
-              </Col>
+            <FormGroup
+              label={ msg.diskEditorAliasLabel() }
+              fieldId={`${idPrefix}-alias`}
+              validated={this.state.errors.alias ? 'error' : null}
+              helperTextInvalid={this.state.errors.alias}
+              helperTextInvalidIcon={<ExclamationCircleIcon />}
+            >
+              <TextInput
+                id={`${idPrefix}-alias`}
+                type='text'
+                defaultValue={this.state.values.alias}
+                onChange={this.changeAlias}
+              />
             </FormGroup>
 
             {/* Size Display (for edit mode) */}
             { !createMode && (
-              <FormGroup controlId={`${idPrefix}-size`}>
-                <LabelCol sm={3}>
-                  { msg.diskEditorSizeEditLabel() }
-                  { !isImage &&
-                    <InfoTooltip id={`${idPrefix}-size-tooltip`} tooltip={msg.diskEditorSizeCantChangeHelp()} />
-                }
-                </LabelCol>
-                <Col sm={9}>
-                  <div id={`${idPrefix}-size`} className={style['editor-field-read-only']}>
-                    { diskSize / 1024 ** 3 }
-                  </div>
-                </Col>
+              <FormGroup
+                label={ msg.diskEditorSizeEditLabel() }
+                labelIcon={!isImage &&
+                  <InfoTooltip id={`${idPrefix}-size-tooltip`} tooltip={msg.diskEditorSizeCantChangeHelp()} />}
+                fieldId={`${idPrefix}-size`}
+              >
+                <div id={`${idPrefix}-size`} className={style['editor-field-read-only']}>
+                  { diskSize / 1024 ** 3 }
+                </div>
               </FormGroup>
             )}
 
             {/* Size Editor (initial size for create, expand by size for edit) */}
             { (createMode || isImage) && (
-              <FormGroup controlId={`${idPrefix}-size-edit`}>
-                <LabelCol sm={3}>
-                  { createMode && (
-                    <>
-                      {msg.diskEditorSizeLabel()}
-                      <InfoTooltip id={`${idPrefix}-size-edit-tooltip`} tooltip={msg.diskEditorSizeCreateInfoTooltip()} />
-                    </>
-                  )}
-                  { !createMode && msg.diskEditorResizeLabel() }
-                </LabelCol>
-                <Col sm={2}>
-                  { createMode && (
-                    <FormControl
-                      type='number'
-                      value={this.state.values.size}
-                      onChange={this.changeSize}
-                    />
-                  )}
-                  { !createMode && (
-                    <Tooltip id={`${idPrefix}-form-tooltip`} tooltip={msg.diskEditorResizeNote()} placement='right'>
-                      <FormControl
-                        type='number'
-                        value={this.state.values.size}
-                        onChange={this.changeSize}
-                      />
-                    </Tooltip>
-                  )}
-                </Col>
+              <FormGroup
+                label={createMode ? msg.diskEditorSizeLabel() : msg.diskEditorResizeLabel()}
+                labelIcon={createMode && <InfoTooltip id={`${idPrefix}-size-edit-tooltip`} tooltip={msg.diskEditorSizeCreateInfoTooltip()} />}
+                fieldId={`${idPrefix}-size-edit`}
+                helperText={!createMode && msg.diskEditorResizeNote()}
+              >
+                <NumberInput
+                  id={`${idPrefix}-size-edit`}
+                  value={this.state.values.size}
+                  onChange={({ target: { value } }) => this.changeSize(value)}
+                  onMinus={() => this.changeSize(this.state.values.size - 1)}
+                  onPlus={() => this.changeSize(this.state.values.size + 1)}
+                  min={0}
+                />
               </FormGroup>
             )}
 
             {/* Storage Domain */}
-            <FormGroup controlId={`${idPrefix}-storage-domain`}>
-              <LabelCol sm={3}>
-                { msg.diskEditorStorageDomainLabel() }
+            <FormGroup
+              label={ msg.diskEditorStorageDomainLabel() }
+              labelIcon={(
                 <InfoTooltip
                   id={`${idPrefix}-storage-domain-edit-tooltip`}
                   tooltip={
@@ -432,36 +400,36 @@ class DiskImageEditor extends Component {
                       : msg.diskEditorStorageDomainCantChangeHelp()
                   }
                 />
-              </LabelCol>
-              <Col sm={9}>
-                { createMode && (
-                  <SelectBox
-                    id={`${idPrefix}-storage-domain`}
-                    items={this.state.storageDomainSelectList}
-                    selected={this.state.values.storageDomain}
-                    onChange={this.changeStorageDomain}
-                  />
-                )}
-                { !createMode && !isDirectLUN && (
-                  <div id={`${idPrefix}-storage-domain`} className={style['editor-field-read-only']}>
-                    {
+              )}
+              fieldId={`${idPrefix}-storage-domain`}
+            >
+              { createMode && !isDirectLUN && (
+                <SelectBox
+                  id={`${idPrefix}-storage-domain`}
+                  items={this.state.storageDomainSelectList}
+                  selected={this.state.values.storageDomain}
+                  onChange={this.changeStorageDomain}
+                />
+              )}
+              { !createMode && !isDirectLUN && (
+                <div id={`${idPrefix}-storage-domain`} className={style['editor-field-read-only']}>
+                  {
                       this.props.storageDomains.getIn([this.state.values.storageDomain, 'name']) ||
                       msg.diskEditorStorageDomainNotAvailable()
                     }
-                  </div>
-                )}
-                { isDirectLUN && (
-                  <div id={`${idPrefix}-storage-domain`} className={style['editor-field-read-only']}>
-                    { msg.diskEditorStorageDomainNotAvailable() }
-                  </div>
-                )}
-              </Col>
+                </div>
+              )}
+              { isDirectLUN && (
+                <div id={`${idPrefix}-storage-domain`} className={style['editor-field-read-only']}>
+                  { msg.diskEditorStorageDomainNotAvailable() }
+                </div>
+              )}
             </FormGroup>
 
             {/* Disk Type (thin vs preallocated) */}
-            <FormGroup controlId={`${idPrefix}-format`}>
-              <LabelCol sm={3}>
-                { msg.diskEditorDiskTypeLabel() }
+            <FormGroup
+              label={ msg.diskEditorDiskTypeLabel() }
+              labelIcon={(
                 <InfoTooltip
                   id={`${idPrefix}-format-tooltip`}
                   tooltip={
@@ -470,63 +438,55 @@ class DiskImageEditor extends Component {
                       : msg.diskEditorDiskTypeCantChangeHelp()
                   }
                 />
-              </LabelCol>
-              <Col sm={9}>
-                { createMode && (
-                  <SelectBox
-                    id={`${idPrefix}-format`}
-                    items={DISK_TYPES}
-                    selected={this.state.values.diskType}
-                    onChange={this.changeDiskType}
-                  />
-                )}
-                { !createMode && !isDirectLUN && (
-                  <div id={`${idPrefix}-format`} className={style['editor-field-read-only']}>
-                    { this.state.values.diskType === 'pre' && msg.diskEditorDiskTypeOptionPre() }
-                    { this.state.values.diskType === 'thin' && msg.diskEditorDiskTypeOptionThin() }
-                  </div>
-                )}
-                { isDirectLUN && (
-                  <div id={`${idPrefix}-format`} className={style['editor-field-read-only']}>
-                    { msg.diskEditorDiskTypeNotAvailable() }
-                  </div>
-                )}
-              </Col>
+              )}
+              fieldId={`${idPrefix}-format`}
+            >
+              { createMode && !isDirectLUN && (
+                <SelectBox
+                  id={`${idPrefix}-format`}
+                  items={DISK_TYPES}
+                  selected={this.state.values.diskType}
+                  onChange={this.changeDiskType}
+                />
+              )}
+              { !createMode && !isDirectLUN && (
+                <div id={`${idPrefix}-format`} className={style['editor-field-read-only']}>
+                  { this.state.values.diskType === 'pre' && msg.diskEditorDiskTypeOptionPre() }
+                  { this.state.values.diskType === 'thin' && msg.diskEditorDiskTypeOptionThin() }
+                </div>
+              )}
+              { isDirectLUN && (
+                <div id={`${idPrefix}-format`} className={style['editor-field-read-only']}>
+                  { msg.diskEditorDiskTypeNotAvailable() }
+                </div>
+              )}
             </FormGroup>
 
             {/* Disk Bootable */}
-            <FormGroup controlId={`${idPrefix}-bootable`}>
-              <LabelCol sm={3}>
-                { msg.diskEditorBootableLabel() }
-                {!vmIsDown && (
-                  <InfoTooltip
-                    id={`${idPrefix}-bootable-edit-tooltip`}
-                    tooltip={msg.bootableEditTooltip()}
-                  />
-                )}
-              </LabelCol>
-              <Col sm={9}>
-                <Checkbox
-                  checked={this.state.values.bootable}
-                  onChange={this.changeBootable}
-                  id={`${idPrefix}-bootable`}
-                  disabled={!vmIsDown}
+            <FormGroup
+              label={ msg.diskEditorBootableLabel() }
+              labelIcon={!vmIsDown && (
+                <InfoTooltip
+                  id={`${idPrefix}-bootable-edit-tooltip`}
+                  tooltip={msg.bootableEditTooltip()}
                 />
-              </Col>
+              )}
+              fieldId={`${idPrefix}-bootable`}
+              helperText={showBootableChangeAlert && (
+                <HelperText>
+                  <HelperTextItem variant="warning" hasIcon>
+                    {msg.diskEditorBootableChangeMessage({ diskName: currentBootableDisk.get('name') }) }
+                  </HelperTextItem>
+                </HelperText>
+              )}
+            >
+              <Checkbox
+                isChecked={this.state.values.bootable}
+                onChange={this.changeBootable}
+                id={`${idPrefix}-bootable`}
+                isDisabled={!vmIsDown}
+              />
             </FormGroup>
-            { showBootableChangeAlert && (
-              <FormGroup controlId={`${idPrefix}-bootable`} className={style['editor-bootable-alert-container']}>
-                <Col sm={3} />
-                <Col sm={9}>
-                  <Alert
-                    className={style['editor-bootable-alert']}
-                    isInline
-                    variant='warning'
-                    title={msg.diskEditorBootableChangeMessage({ diskName: currentBootableDisk.get('name') })}
-                  />
-                </Col>
-              </FormGroup>
-            )}
           </Form>
         </Modal>
       </>
diff --git a/src/components/VmDetails/cards/DisksCard/DiskListItem.js b/src/components/VmDetails/cards/DisksCard/DiskListItem.js
index a48fc6e2b5..bdb576be0e 100644
--- a/src/components/VmDetails/cards/DisksCard/DiskListItem.js
+++ b/src/components/VmDetails/cards/DisksCard/DiskListItem.js
@@ -10,11 +10,12 @@ import { escapeHtml } from '../../../utils'
 import itemStyle from '../../itemListStyle.css'
 import style from './style.css'
 
-import { Icon, Label } from 'patternfly-react'
+import { Label } from '@patternfly/react-core'
 import DeleteConfirmationModal from '../../../VmModals/DeleteConfirmationModal'
 import DiskStateIcon from './DiskStateIcon'
 import DiskImageEditor from './DiskImageEditor'
 import { Tooltip } from '_/components/tooltips'
+import { PencilAltIcon, TrashIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 function isDiskBeingDeleted (diskId, pendingTasks) {
   return !!pendingTasks.find(
@@ -78,7 +79,7 @@ const DiskListItem = ({
           ({view.size.value} {view.size.unit})
         </span>
         { view.bootable && (
-          <Label id={`${idPrefix}-bootable`} className={style['disk-label']} bsStyle='info'>
+          <Label id={`${idPrefix}-bootable`} className={style['disk-label']} color="blue">
             { msg.diskLabelBootable() }
           </Label>
         )}
@@ -97,7 +98,7 @@ const DiskListItem = ({
               trigger={({ onClick }) => (
                 <Tooltip id={`${idPrefix}-action-edit-tooltip`} tooltip={msg.diskEditTooltip()}>
                   <a id={`${idPrefix}-action-edit`} className={itemStyle['item-action']} onClick={onClick} >
-                    <Icon type='pf' name='edit' />
+                    <PencilAltIcon/>
                   </a>
                 </Tooltip>
               )}
@@ -105,9 +106,7 @@ const DiskListItem = ({
           )}
           { !canEdit && (
             <Tooltip id={`${idPrefix}-action-edit-tooltip-disabled`} tooltip={msg.diskEditDisabledTooltip()}>
-              <Icon
-                type='pf'
-                name='edit'
+              <PencilAltIcon
                 id={`${idPrefix}-action-edit-disabled`}
                 className={`${itemStyle['item-action']} ${itemStyle['item-action-disabled']}`}
               />
@@ -122,7 +121,7 @@ const DiskListItem = ({
               trigger={({ onClick }) => (
                 <Tooltip id={`${idPrefix}-action-delete-tooltip`} tooltip={msg.diskDeleteTooltip()}>
                   <a id={`${idPrefix}-action-delete`} className={itemStyle['item-action']} onClick={onClick}>
-                    <Icon type='pf' name='delete' />
+                    <TrashIcon/>
                   </a>
                 </Tooltip>
               )}
@@ -139,9 +138,7 @@ const DiskListItem = ({
           )}
           { !canDelete && (
             <Tooltip id={`${idPrefix}-action-delete-tooltip-disabled`} tooltip={msg.diskDeleteDisabledTooltip()}>
-              <Icon
-                type='pf'
-                name='delete'
+              <TrashIcon
                 id={`${idPrefix}-action-delete-disabled`}
                 className={`${itemStyle['item-action']} ${itemStyle['item-action-disabled']}`}
               />
diff --git a/src/components/VmDetails/cards/DisksCard/DiskStateIcon.js b/src/components/VmDetails/cards/DisksCard/DiskStateIcon.js
index 9874860c8e..27e30b3245 100644
--- a/src/components/VmDetails/cards/DisksCard/DiskStateIcon.js
+++ b/src/components/VmDetails/cards/DisksCard/DiskStateIcon.js
@@ -1,48 +1,31 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 
-import { Icon } from 'patternfly-react'
-
 import { MsgContext } from '_/intl'
 import style from './style.css'
 import { Tooltip } from '_/components/tooltips'
+import { ArrowCircleUpIcon, ArrowCircleDownIcon, LockIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 const diskStateSettings = (msg) => ({
-  active: {
-    type: 'fa',
-    name: 'arrow-circle-o-up',
-    className: style['state-icon-active'],
-    tooltip: msg.diskTooltipStatusMessage({ statusInfo: msg.diskStateActiveTooltip() }),
-  },
-  inactive: {
-    type: 'fa',
-    name: 'arrow-circle-o-down',
-    className: style['state-icon-inactive'],
-    tooltip: msg.diskTooltipStatusMessage({ statusInfo: msg.diskStateInactiveTooltip() }),
-  },
-  locked: {
-    type: 'pf',
-    name: 'locked',
-    className: style['state-icon-locked'],
-    tooltip: msg.diskTooltipStatusMessage({ statusInfo: msg.diskStateLockedTooltip() }),
-  },
+  active: msg.diskTooltipStatusMessage({ statusInfo: msg.diskStateActiveTooltip() }),
+  inactive: msg.diskTooltipStatusMessage({ statusInfo: msg.diskStateInactiveTooltip() }),
+  locked: msg.diskTooltipStatusMessage({ statusInfo: msg.diskStateLockedTooltip() }),
 })
 
 const DiskStateIcon = ({ idPrefix, diskState, showTooltip = true }) => {
   const { msg } = useContext(MsgContext)
-  const diskInfo = diskStateSettings(msg)[diskState]
+  const id = `${idPrefix}-state-icon`
   const theIcon = (
-    <Icon
-      id={`${idPrefix}-state-icon`}
-      type={diskInfo.type}
-      name={diskInfo.name}
-      className={`${style['state-icon']} ${diskInfo.className}`}
-    />
+    <>
+      {diskState === 'active' && <ArrowCircleUpIcon id={id} className={`${style['state-icon']} ${style['state-icon-active']}`}/>}
+      {diskState === 'inactive' && <ArrowCircleDownIcon id={id} className={`${style['state-icon']} ${style['state-icon-inactive']}`}/>}
+      {diskState === 'locked' && <LockIcon id={id} className={`${style['state-icon']} ${style['state-icon-locked']}`}/>}
+    </>
   )
 
   if (showTooltip) {
     return (
-      <Tooltip id={`${idPrefix}-state-icon-tooltip`} tooltip={diskInfo.tooltip}>
+      <Tooltip id={`${idPrefix}-state-icon-tooltip`} tooltip={diskStateSettings(msg)[diskState]}>
         {theIcon}
       </Tooltip>
     )
diff --git a/src/components/VmDetails/cards/DisksCard/index.js b/src/components/VmDetails/cards/DisksCard/index.js
index 231a4b5e05..57ce838792 100644
--- a/src/components/VmDetails/cards/DisksCard/index.js
+++ b/src/components/VmDetails/cards/DisksCard/index.js
@@ -7,7 +7,6 @@ import { createDiskForVm, editDiskOnVm, removeDisk } from '_/actions'
 import { withMsg } from '_/intl'
 import { maskForElementId, suggestDiskName, sortDisksForDisplay } from '_/components/utils'
 
-import { Icon } from 'patternfly-react'
 import { Grid, Row, Col } from '_/components/Grid'
 import BaseCard from '../../BaseCard'
 import DiskImageEditor from './DiskImageEditor'
@@ -17,6 +16,7 @@ import itemStyle from '../../itemListStyle.css'
 import baseStyle from '../../style.css'
 import style from './style.css'
 import { localeCompare } from '_/helpers'
+import { PlusIcon, StorageDomainIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 function filterStorageDomains (vm, clusters, storageDomains) {
   const clusterId = vm.getIn(['cluster', 'id'])
@@ -129,7 +129,7 @@ class DisksCard extends React.Component {
     return (
       <BaseCard
         idPrefix={idPrefix}
-        icon={{ type: 'pf', name: 'storage-domain' }}
+        icon={StorageDomainIcon}
         title={msg.disks()}
         editTooltip={msg.edit()}
         itemCount={diskList.size}
@@ -154,7 +154,7 @@ class DisksCard extends React.Component {
                     trigger={({ onClick }) => (
                       <div className={itemStyle['create-block']}>
                         <a href='#' id={`${idPrefix}-new-disk-action`} onClick={onClick}>
-                          <Icon className={itemStyle['create-icon']} type='fa' name='plus' />
+                          <PlusIcon className={itemStyle['create-icon']}/>
                           <span className={itemStyle['create-text']} >{msg.diskActionCreateNew()}</span>
                         </a>
                       </div>
diff --git a/src/components/VmDetails/cards/NicsCard/NicEditor.js b/src/components/VmDetails/cards/NicsCard/NicEditor.js
index f3502540a5..b653e51592 100644
--- a/src/components/VmDetails/cards/NicsCard/NicEditor.js
+++ b/src/components/VmDetails/cards/NicsCard/NicEditor.js
@@ -2,18 +2,14 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
 import {
-  Col,
-  ControlLabel,
-  ExpandCollapse,
+  Button,
+  ExpandableSection,
   Form,
-  FormControl,
   FormGroup,
-  Radio,
-} from 'patternfly-react'
-import {
-  Button,
   Modal,
   ModalVariant,
+  TextInput,
+  Radio,
 } from '@patternfly/react-core'
 import SelectBox from '../../../SelectBox'
 import NicLinkStateIcon from './NicLinkStateIcon'
@@ -27,17 +23,6 @@ import { InfoTooltip } from '_/components/tooltips'
 const NIC_INTERFACE_DEFAULT = 'virtio'
 const NIC_INTERFACE_CANT_CHANGE = ['pci_passthrough']
 
-const LabelCol = ({ children, ...props }) => {
-  return (
-    <Col componentClass={ControlLabel} {...props}>
-      { children }
-    </Col>
-  )
-}
-LabelCol.propTypes = {
-  children: PropTypes.node.isRequired,
-}
-
 /**
  * Collect required information required to create a new NIC for a VM.
  *
@@ -124,7 +109,7 @@ class NicEditor extends Component {
     return nic
   }
 
-  changeName ({ target: { value } }) {
+  changeName (value) {
     this.setState((state) => ({ values: { ...state.values, name: value } }))
   }
 
@@ -202,88 +187,79 @@ class NicEditor extends Component {
           ]}
         >
           <Form
-            horizontal
-            onSubmit={e => { e.preventDefault() }}
+            isHorizontal
             id={`${modalId}-form`}
           >
-            <FormGroup controlId={`${modalId}-name`}>
-              <LabelCol sm={3}>
-                { msg.nicEditorNameLabel() }
-              </LabelCol>
-              <Col sm={9}>
-                <FormControl
-                  type='text'
-                  defaultValue={this.state.values.name}
-                  onChange={this.changeName}
-                />
-              </Col>
+            <FormGroup label={ msg.nicEditorNameLabel() } fieldId={`${modalId}-name`} >
+              <TextInput
+                id={`${modalId}-name`}
+                type='text'
+                value={this.state.values.name}
+                onChange={this.changeName}
+              />
             </FormGroup>
 
-            <FormGroup controlId={`${modalId}-vnic-profile`}>
-              <LabelCol sm={3}>
-                { msg.vnicProfile() }
-              </LabelCol>
-              <Col sm={9}>
-                <SelectBox
-                  id={`${modalId}-vnic-profile`}
-                  items={vnicList}
-                  selected={this.state.values.vnicProfileId}
-                  onChange={this.changeVnicProfile}
-                />
-              </Col>
+            <FormGroup fieldId={`${modalId}-vnic-profile`} label={ msg.vnicProfile() }>
+              <SelectBox
+                id={`${modalId}-vnic-profile`}
+                items={vnicList}
+                selected={this.state.values.vnicProfileId}
+                onChange={this.changeVnicProfile}
+              />
             </FormGroup>
 
-            <ExpandCollapse id='nic-edit-advanced-options' textCollapsed={msg.advancedOptions()} textExpanded={msg.advancedOptions()}>
-              <FormGroup controlId={`${modalId}-interface`}>
-                <LabelCol sm={3}>
-                  { msg.nicEditorInterfaceLabel() }
-                  { !canChangeInterface && (
-                    <InfoTooltip
-                      id={`${modalId}-interface-edit-tooltip`}
-                      tooltip={msg.nicEditorInterfaceCantEditHelp()}
-                    />
-                  )}
-                </LabelCol>
-                <Col sm={9}>
-                  { !canChangeInterface && (
-                    <div className={style['editor-value-text']} id={`${modalId}-interface`}>
-                      { nicInterface ? nicInterface.value : 'N/A' }
-                    </div>
-                  )}
-                  { canChangeInterface && (
-                    <SelectBox
-                      id={`${modalId}-interface`}
-                      items={NIC_INTERFACES}
-                      selected={this.state.values.interface}
-                      onChange={this.changeInterface}
-                    />
-                  )}
-                </Col>
+            <ExpandableSection id='nic-edit-advanced-options' toggleText={msg.advancedOptions()}>
+              <FormGroup
+                label={ msg.nicEditorInterfaceLabel() }
+                labelIcon={!canChangeInterface && (
+                  <InfoTooltip
+                    id={`${modalId}-interface-edit-tooltip`}
+                    tooltip={msg.nicEditorInterfaceCantEditHelp()}
+                  />
+                )}
+                fieldId={`${modalId}-interface`}
+              >
+                { !canChangeInterface && (
+                  <div className={style['editor-value-text']} id={`${modalId}-interface`}>
+                    { nicInterface ? nicInterface.value : 'N/A' }
+                  </div>
+                )}
+                { canChangeInterface && (
+                  <SelectBox
+                    id={`${modalId}-interface`}
+                    items={NIC_INTERFACES}
+                    selected={this.state.values.interface}
+                    onChange={this.changeInterface}
+                  />
+                )}
               </FormGroup>
-              <FormGroup controlId='nic-link-state-group'>
-                <LabelCol sm={3}>
-                  { msg.nicEditorLinkStateLabel() }
-                </LabelCol>
-                <Col sm={9}>
-                  <Radio
-                    id={`${modalId}-link-state-on`}
-                    name='nic-link-state-group'
-                    defaultChecked={this.state.values.linked}
-                    onChange={() => { this.changeLinked(true) }}
-                  >
-                    { msg.nicEditorLinkStateUp() } <NicLinkStateIcon linkState idSuffix='up' showTooltip={false} />
-                  </Radio>
-                  <Radio
-                    id={`${modalId}-link-state-off`}
-                    name='nic-link-state-group'
-                    defaultChecked={!this.state.values.linked}
-                    onChange={() => { this.changeLinked(false) }}
-                  >
-                    { msg.nicEditorLinkStateDown() } <NicLinkStateIcon idSuffix='down' showTooltip={false} />
-                  </Radio>
-                </Col>
+              <FormGroup fieldId='nic-link-state-group' label={ msg.nicEditorLinkStateLabel() }>
+                <Radio
+                  id={`${modalId}-link-state-on`}
+                  name='nic-link-state-group'
+                  isChecked={this.state.values.linked}
+                  onChange={() => { this.changeLinked(true) }}
+                  label={ (
+                    <>
+                      {msg.nicEditorLinkStateUp()}
+                      <NicLinkStateIcon linkState idSuffix='up' showTooltip={false} />
+                    </>
+                  ) }
+                />
+                <Radio
+                  id={`${modalId}-link-state-off`}
+                  name='nic-link-state-group'
+                  isChecked={!this.state.values.linked}
+                  onChange={() => { this.changeLinked(false) }}
+                  label={ (
+                    <>
+                      { msg.nicEditorLinkStateDown() }
+                      <NicLinkStateIcon idSuffix='down' showTooltip={false} />
+                    </>
+                  ) }
+                />
               </FormGroup>
-            </ExpandCollapse>
+            </ExpandableSection>
           </Form>
         </Modal>
       </>
diff --git a/src/components/VmDetails/cards/NicsCard/NicLinkStateIcon.js b/src/components/VmDetails/cards/NicsCard/NicLinkStateIcon.js
index aec6450fa0..a994da6324 100644
--- a/src/components/VmDetails/cards/NicsCard/NicLinkStateIcon.js
+++ b/src/components/VmDetails/cards/NicsCard/NicLinkStateIcon.js
@@ -1,42 +1,24 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 
-import { Icon } from 'patternfly-react'
-
 import { MsgContext } from '_/intl'
 import style from './style.css'
 import { Tooltip } from '_/components/tooltips'
-
-const nicLinkInfoSettings = (msg) => ({
-  true: {
-    type: 'fa',
-    name: 'arrow-circle-o-up',
-    className: style['link-icon-up'],
-    tooltip: msg.nicLinkStatusUp(),
-  },
-  false: {
-    type: 'fa',
-    name: 'arrow-circle-o-down',
-    className: style['link-icon-down'],
-    tooltip: msg.nicLinkStatusDown(),
-  },
-})
+import { ArrowCircleUpIcon, ArrowCircleDownIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 const NicLinkStateIcon = ({ linkState = false, showTooltip = true, idSuffix }) => {
   const { msg } = useContext(MsgContext)
-  const linkInfo = nicLinkInfoSettings(msg)[linkState]
+  const id = `nic-link-icon-${idSuffix || linkState}`
   const theIcon = (
-    <Icon
-      id={`nic-link-icon-${idSuffix || linkState}`}
-      type={linkInfo.type}
-      name={linkInfo.name}
-      className={`${style['link-icon']} ${linkInfo.className}`}
-    />
+    <>
+      {linkState && <ArrowCircleUpIcon id={id} className={`${style['link-icon']} ${style['link-icon-up']}`}/>}
+      {!linkState && <ArrowCircleDownIcon id={id} className={`${style['link-icon']} ${style['link-icon-down']}`}/>}
+    </>
   )
 
   if (showTooltip) {
     return (
-      <Tooltip id={`nic-link-icon-tooltip-${idSuffix || linkState}`} tooltip={linkInfo.tooltip}>
+      <Tooltip id={`nic-link-icon-tooltip-${idSuffix || linkState}`} tooltip={linkState ? msg.nicLinkStatusUp() : msg.nicLinkStatusDown() }>
         {theIcon}
       </Tooltip>
     )
diff --git a/src/components/VmDetails/cards/NicsCard/NicListItem.js b/src/components/VmDetails/cards/NicsCard/NicListItem.js
index 5eb01f123c..6bbb45eec1 100644
--- a/src/components/VmDetails/cards/NicsCard/NicListItem.js
+++ b/src/components/VmDetails/cards/NicsCard/NicListItem.js
@@ -6,13 +6,13 @@ import { escapeHtml } from '../../../utils'
 import itemStyle from '../../itemListStyle.css'
 import style from './style.css'
 
-import { Icon } from 'patternfly-react'
 import { Grid, Row, Col } from '_/components/Grid'
 import DeleteConfirmationModal from '../../../VmModals/DeleteConfirmationModal'
 import NicEditor from './NicEditor'
 import NicLinkStateIcon from './NicLinkStateIcon'
 import { Tooltip } from '_/components/tooltips'
 import EllipsisValue from '_/components/EllipsisValue'
+import { PencilAltIcon, TrashIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 /**
  * Render a single NIC in the list of Nics on the Nics Card.
@@ -88,7 +88,7 @@ const NicListItem = ({ idPrefix, nic, vmStatus, vnicProfileList, isEditing, onEd
               trigger={({ onClick }) => (
                 <Tooltip id={`${idPrefix}-edit-tooltip`} tooltip={msg.nicEditTooltip()}>
                   <a id={`${idPrefix}-edit-action`} className={itemStyle['item-action']} onClick={onClick}>
-                    <Icon type='pf' name='edit' />
+                    <PencilAltIcon/>
                   </a>
                 </Tooltip>
               )}
@@ -96,9 +96,7 @@ const NicListItem = ({ idPrefix, nic, vmStatus, vnicProfileList, isEditing, onEd
           )}
           { !canEdit && (
             <Tooltip id={`${idPrefix}-edit-tooltip-disabled`} tooltip={msg.nicEditDisabledTooltip()}>
-              <Icon
-                type='pf'
-                name='edit'
+              <PencilAltIcon
                 id={`${idPrefix}-edit-action-disabled`}
                 className={`${itemStyle['item-action']} ${itemStyle['item-action-disabled']}`}
               />
@@ -112,7 +110,7 @@ const NicListItem = ({ idPrefix, nic, vmStatus, vnicProfileList, isEditing, onEd
               trigger={({ onClick }) => (
                 <Tooltip id={`${idPrefix}-delete-tooltip`} tooltip={msg.nicDeleteTooltip()}>
                   <a id={`${idPrefix}-delete-action`} className={itemStyle['item-action']} onClick={onClick}>
-                    <Icon type='pf' name='delete' />
+                    <TrashIcon />
                   </a>
                 </Tooltip>
               )}
@@ -128,9 +126,7 @@ const NicListItem = ({ idPrefix, nic, vmStatus, vnicProfileList, isEditing, onEd
           )}
           { !canDelete && (
             <Tooltip id={`${idPrefix}-delete-tooltip-disabled`} tooltip={msg.nicDeleteDisabledTooltip()}>
-              <Icon
-                type='pf'
-                name='delete'
+              <TrashIcon
                 id={`${idPrefix}-delete-action-disabled`}
                 className={`${itemStyle['item-action']} ${itemStyle['item-action-disabled']}`}
               />
diff --git a/src/components/VmDetails/cards/NicsCard/index.js b/src/components/VmDetails/cards/NicsCard/index.js
index 6c2bc76713..73394fd6c8 100644
--- a/src/components/VmDetails/cards/NicsCard/index.js
+++ b/src/components/VmDetails/cards/NicsCard/index.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Icon } from 'patternfly-react'
 
 import { withMsg } from '_/intl'
 import { addVmNic, deleteVmNic, editVmNic } from '_/actions'
@@ -16,6 +15,7 @@ import style from './style.css'
 import NicEditor from './NicEditor'
 import NicListItem from './NicListItem'
 import { localeCompare } from '_/helpers'
+import { PlusIcon, NetworkIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 /*
  * Filter the set of vNIC profiles to display to the user such that:
@@ -128,7 +128,7 @@ class NicsCard extends React.Component {
 
     return (
       <BaseCard
-        icon={{ type: 'pf', name: 'network' }}
+        icon={NetworkIcon}
         title={msg.nic()}
         editTooltip={msg.edit()}
         editable={canEditTheCard}
@@ -152,7 +152,7 @@ class NicsCard extends React.Component {
                     trigger={({ onClick }) => (
                       <div className={itemStyle['create-block']}>
                         <a href='#' id={`${idPrefix}-new-button`} onClick={onClick}>
-                          <Icon className={itemStyle['create-icon']} type='fa' name='plus' />
+                          <PlusIcon className={itemStyle['create-icon']}/>
                           <span className={itemStyle['create-text']} >{msg.nicActionCreateNew()}</span>
                         </a>
                       </div>
diff --git a/src/components/VmDetails/cards/OverviewCard/index.js b/src/components/VmDetails/cards/OverviewCard/index.js
index e74e2ba650..425e1770a3 100644
--- a/src/components/VmDetails/cards/OverviewCard/index.js
+++ b/src/components/VmDetails/cards/OverviewCard/index.js
@@ -9,8 +9,13 @@ import { generateUnique, buildMessageFromRecord } from '_/helpers'
 import { formatUptimeDuration } from '_/utils'
 import { editVm } from '_/actions'
 
-import { FormControl, FormGroup, HelpBlock, Checkbox } from 'patternfly-react'
-import { Alert } from '@patternfly/react-core'
+import {
+  Alert,
+  Checkbox,
+  FormGroup,
+  TextArea,
+  TextInput,
+} from '@patternfly/react-core'
 
 import BaseCard from '../../BaseCard'
 import VmIcon from '../../../VmIcon'
@@ -240,17 +245,17 @@ class OverviewCard extends React.Component {
                   <div className={style['vm-name']}>
                     { !isEditing && <span id={`${idPrefix}-name`}>{vm.get('name')}</span> }
                     { isEditing && (
-                      <FormGroup controlId={`${idPrefix}-name-edit`} validationState={nameError ? 'error' : null}>
-                        <FormControl
+                      <FormGroup
+                        fieldId={`${idPrefix}-name-edit`}
+                        validated={nameError ? 'error' : null}
+                        helperTextInvalid={msg.pleaseEnterValidVmName()}
+                      >
+                        <TextInput
+                          id={`${idPrefix}-name-edit`}
                           type='text'
                           value={this.state.vm.get('name')}
-                          onChange={e => this.handleChange('name', e.target.value)}
+                          onChange={value => this.handleChange('name', value)}
                         />
-                        { nameError && (
-                          <HelpBlock>
-                            {msg.pleaseEnterValidVmName()}
-                          </HelpBlock>
-                        )}
                       </FormGroup>
                     )}
                     {
@@ -258,15 +263,13 @@ class OverviewCard extends React.Component {
                         <div className={style['vm-checkbox']}>
                           <Checkbox
                             id={`${idPrefix}-cloud-init`}
-                            checked={updateCloudInit}
-                            onChange={(e) => this.setState({ updateCloudInit: e.target.checked })}
-                            disabled={disableHostnameToggle}
-                          >
-                            { !disableHostnameToggle
+                            isChecked={updateCloudInit}
+                            onChange={value => this.setState({ updateCloudInit: value })}
+                            isDisabled={disableHostnameToggle}
+                            label={!disableHostnameToggle
                               ? msg.updateCloudInit()
-                              : msg.cannotUpdateCloudInitHostname()
-                          }
-                          </Checkbox>
+                              : msg.cannotUpdateCloudInitHostname()}
+                          />
                         </div>
                       )}
                   </div>
@@ -285,12 +288,11 @@ class OverviewCard extends React.Component {
                       <div id={`${idPrefix}-description`} className={style['vm-description']}>{vm.get('description')}</div>
                     }
                     { isEditing && (
-                      <FormControl
+                      <TextArea
                         id={`${idPrefix}-description-edit`}
-                        componentClass='textarea'
                         rows='5'
                         value={this.state.vm.get('description')}
-                        onChange={e => this.handleChange('description', e.target.value)}
+                        onChange={value => this.handleChange('description', value)}
                       />
                     )}
                   </div>
diff --git a/src/components/VmDetails/cards/SnapshotsCard/NewSnapshotModal.js b/src/components/VmDetails/cards/SnapshotsCard/NewSnapshotModal.js
index 7de4cd6596..0be0ba7afb 100644
--- a/src/components/VmDetails/cards/SnapshotsCard/NewSnapshotModal.js
+++ b/src/components/VmDetails/cards/SnapshotsCard/NewSnapshotModal.js
@@ -5,22 +5,18 @@ import { connect } from 'react-redux'
 import { addVmSnapshot } from './actions'
 
 import {
-  Col,
+  Button,
+  Checkbox,
   Form,
-  FormControl,
   FormGroup,
-  HelpBlock,
-  Checkbox,
-  Icon,
-  noop,
-} from 'patternfly-react'
-import {
-  Alert,
-  Button,
+  Hint,
+  HintBody,
   Modal,
   ModalVariant,
+  TextInput,
 } from '@patternfly/react-core'
 import { withMsg } from '_/intl'
+import { PlusIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 class NewSnapshotModal extends Component {
   constructor (props) {
@@ -46,12 +42,12 @@ class NewSnapshotModal extends Component {
     this.setState({ showModal: false, description: '', emptyDescription: false })
   }
 
-  handleDescriptionChange (e) {
-    this.setState({ description: e.target.value })
+  handleDescriptionChange (value) {
+    this.setState({ description: value })
   }
 
-  handleSaveMemoryChange (e) {
-    this.setState({ saveMemory: e.target.checked })
+  handleSaveMemoryChange (checked) {
+    this.setState({ saveMemory: checked })
   }
 
   handleSave (e) {
@@ -70,13 +66,12 @@ class NewSnapshotModal extends Component {
 
   render () {
     const { idPrefix, msg } = this.props
-
     const modalId = `${idPrefix}-modal`
 
     return (
       <div>
-        <a onClick={this.props.disabled ? noop : this.open} id={`${idPrefix}-button`} className={`${this.props.disabled && 'disabled'}`}>
-          <Icon type='fa' name='plus' />
+        <a onClick={this.props.disabled ? () => {} : this.open} id={`${idPrefix}-button`} className={`${this.props.disabled && 'disabled'}`}>
+          <PlusIcon/>
           { msg.createSnapshot() }
         </a>
 
@@ -102,49 +97,36 @@ class NewSnapshotModal extends Component {
 
           ]}
         >
-          <Form onSubmit={this.handleSave} horizontal>
-            <Col sm={12}>
-              <Alert
-                variant='info'
-                isInline
-                title={msg.details()}
-                style={{ 'margin-bottom': '10px' }}
-              >
+          <Form onSubmit={this.handleSave} isHorizontal>
+            <Hint >
+              <HintBody>
                 {msg.snapshotInfo() }
-              </Alert>
-            </Col>
-            <FormGroup bsClass='form-group col-sm-12 required' validationState={this.state.emptyDescription ? 'error' : null}>
-              <label className='col-sm-3 control-label'>
-                { msg.name() }
-              </label>
-              <div className='col-sm-9'>
-                <FormControl
-                  type='text'
-                  value={this.state.description}
-                  onChange={this.handleDescriptionChange}
-                  id={`${modalId}-description-edit`}
-                />
-                {
-                    this.state.emptyDescription && (
-                      <HelpBlock>
-                        {msg.emptySnapshotDescription()}
-                      </HelpBlock>
-                    )}
-              </div>
+              </HintBody>
+            </Hint>
+            <FormGroup
+              label={ msg.name() }
+              validated={this.state.emptyDescription ? 'error' : null}
+              helperTextInvalid={msg.emptySnapshotDescription()}
+              fieldId={`${modalId}-description-edit`}
+            >
+              <TextInput
+                type='text'
+                value={this.state.description}
+                onChange={this.handleDescriptionChange}
+                id={`${modalId}-description-edit`}
+              />
             </FormGroup>
             {
                 this.props.isVmRunning && (
-                  <FormGroup bsClass='form-group col-sm-12'>
-                    <label className='col-sm-3 control-label'>
-                      {msg.saveMemory()}
-                    </label>
-                    <div className='col-sm-9'>
-                      <Checkbox
-                        id={`${idPrefix}-snapshot-save-memory`}
-                        checked={this.state.saveMemory}
-                        onChange={this.handleSaveMemoryChange}
-                      />
-                    </div>
+                  <FormGroup
+                    label={msg.saveMemory()}
+                    fieldId={`${idPrefix}-snapshot-save-memory`}
+                  >
+                    <Checkbox
+                      id={`${idPrefix}-snapshot-save-memory`}
+                      isChecked={this.state.saveMemory}
+                      onChange={this.handleSaveMemoryChange}
+                    />
                   </FormGroup>
                 )}
           </Form>
diff --git a/src/components/VmDetails/cards/SnapshotsCard/SnapshotDetail.js b/src/components/VmDetails/cards/SnapshotsCard/SnapshotDetail.js
index affc547b2c..856a56d4c7 100644
--- a/src/components/VmDetails/cards/SnapshotsCard/SnapshotDetail.js
+++ b/src/components/VmDetails/cards/SnapshotsCard/SnapshotDetail.js
@@ -2,12 +2,10 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import {
+  Label,
+  LabelGroup,
   Popover,
-  Icon,
-  Button,
-  OverlayTrigger,
-  Tooltip,
-} from 'patternfly-react'
+} from '@patternfly/react-core'
 import Immutable from 'immutable'
 
 import style from './style.css'
@@ -18,12 +16,12 @@ import Selectors from '_/selectors'
 import { templateNameRenderer, getFormatedDateTime, userFormatOfBytes, localeCompare } from '_/helpers'
 import { getOsHumanName, sortDisksForDisplay } from '_/components/utils'
 
-import RestoreConfirmationModal from './RestoreConfirmationModal'
+import { OffIcon, RunningIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 const Status = ({ status, msg }) => {
   return status
-    ? <span className={style['status-icon']}><Icon type='pf' name='on-running' className={style.green} />{msg.on()}</span>
-    : <span className={style['status-icon']}><Icon type='pf' name='off' />{msg.off()}</span>
+    ? <span className={style['status-icon']}><RunningIcon className={style.green} />{msg.on()}</span>
+    : <span className={style['status-icon']}><OffIcon/>{msg.off()}</span>
 }
 
 Status.propTypes = {
@@ -35,17 +33,17 @@ const diskRender = (idPrefix, disk, index) => {
   const provSize = userFormatOfBytes(disk.get('provisionedSize'))
   const actSize = userFormatOfBytes(disk.get('actualSize'), provSize.suffix)
   return (
-    <div key={disk.get('id')} id={`${idPrefix}-${disk.get('name')}-${index}`}>
+    <Label key={disk.get('id')} id={`${idPrefix}-${disk.get('name')}-${index}`}>
       {`${disk.get('name')} (${actSize.str} used / ${provSize.str})`}
-    </div>
+    </Label>
   )
 }
 
 const nicRender = (idPrefix, nic) => {
   return (
-    <div key={nic.get('id')} id={`${idPrefix}-${nic.get('name')}`}>
+    <Label key={nic.get('id')} id={`${idPrefix}-${nic.get('name')}`}>
       {nic.get('name')}
-    </div>
+    </Label>
   )
 }
 
@@ -55,181 +53,106 @@ const statusMap = (msg) => ({
   ok: msg.ok(),
 })
 
-const SnapshotDetail = ({ snapshot, vmId, restoreDisabled, id, isPoolVm, msg, locale, ...otherProps }) => {
+const SnapshotDetail = ({ snapshot, vmId, restoreDisabled, id, isPoolVm, msg, locale, position, children }) => {
   const template = Selectors.getTemplateById(snapshot.getIn(['vm', 'template', 'id']))
   const time = getFormatedDateTime(snapshot.get('date'))
 
   const snapshotMemoryState = snapshot.get('persistMemoryState') && msg.memoryIncluded()
 
   const disksToRender = sortDisksForDisplay(snapshot.get('disks', Immutable.fromJS([])), locale)
-  const showMoreDisks = disksToRender.size > 2
-  const diskToShow = disksToRender.slice(0, 2)
-  const additionalDisk = disksToRender.slice(2)
 
   const nicsToRender = snapshot.get('nics', Immutable.fromJS([])).sort((a, b) => localeCompare(a.get('name'), b.get('name'), locale))
-  const showMoreNics = nicsToRender.size > 2
-  const nicsToShow = nicsToRender.slice(0, 2)
-  const additionalNics = nicsToRender.slice(2)
 
   return (
     <Popover
       id={id}
-      title={(
-        <div>
-          {snapshot.get('description')}
-          <button
-            id={`${id}-close`}
-            type='button'
-            className='close'
-            aria-label='Close'
-            onClick={() => document.body.click()}
-          >
-            <span aria-hidden='true'>&times;</span>
-          </button>
-        </div>
+      position={position}
+      headerContent={snapshot.get('description')}
+      hasAutoWidth
+      bodyContent={(
+        <>
+          <div className={style['snapshot-detail-container']}>
+            <dl className={style['snapshot-properties']}>
+              <dt>
+                {msg.created()}
+              </dt>
+              <dd id={`${id}-created`}>
+                {`${time.time} ${time.date}`}
+              </dd>
+              <dt>
+                {msg.operatingSystem()}
+              </dt>
+              <dd id={`${id}-os`}>
+                {getOsHumanName(snapshot.getIn(['vm', 'os', 'type']))}
+              </dd>
+              <dt>
+                {msg.memory()}
+              </dt>
+              <dd id={`${id}-memory`}>
+                {userFormatOfBytes(snapshot.getIn(['vm', 'memory', 'total'])).str} {snapshotMemoryState}
+              </dd>
+              <dt>
+                {msg.cpus()}
+              </dt>
+              <dd id={`${id}-cpus`}>
+                {snapshot.getIn(['vm', 'cpu', 'vCPUs'])}
+              </dd>
+              <dt>
+                {msg.status()}
+              </dt>
+              <dd id={`${id}-status`}>
+                {statusMap(msg)[snapshot.get('status')]}
+              </dd>
+            </dl>
+            <dl className={style['snapshot-properties']}>
+              <dt>
+                {msg.template()}
+              </dt>
+              <dd id={`${id}-template`}>
+                {template && templateNameRenderer(template)}
+              </dd>
+              <dt>
+                {msg.cdromBoot()}
+              </dt>
+              <dd id={`${id}-cdrom`}>
+                {snapshot.getIn(['vm', 'cdrom', 'file', 'id']) ? snapshot.getIn(['cdrom', 'file', 'id']) : msg.empty() }
+              </dd>
+              <dt>
+                {msg.nic()}
+              </dt>
+              <dd id={`${id}-nics`}>
+                { nicsToRender.size === 0 &&
+                  <div className={style['no-nics']} id={`${id}-no-nics`}>{msg.noNics()}</div>
+          }
+                { nicsToRender.size > 0 && (
+                  <LabelGroup isVertical numLabels={2}>
+                    {nicsToRender.map(nicRender.bind(null, `${id}-nics`))}
+                  </LabelGroup>
+                )}
+              </dd>
+              <dt>
+                {msg.bootMenu()}
+              </dt>
+              <dd id={`${id}-boot-menu`}>
+                <Status msg={msg} status={snapshot.getIn(['vm', 'bootMenuEnabled'])} />
+              </dd>
+              <dt>
+                {msg.disks()}
+              </dt>
+              <dd id={`${id}-disks`}>
+                { disksToRender.size === 0 && <div className={style['no-disks']} id={`${id}-no-disks`}>{msg.noDisks()}</div> }
+                { disksToRender.size > 0 && (
+                  <LabelGroup isVertical numLabels={2}>
+                    {disksToRender.map(diskRender.bind(null, `${id}-disks`))}
+                  </LabelGroup>
+                )}
+              </dd>
+            </dl>
+          </div>
+        </>
       )}
-      bsClass={`${style.popover} popover`}
-      {...otherProps}
     >
-      <div className={style['snapshot-detail-container']}>
-        <dl className={style['snapshot-properties']}>
-          <dt>
-            {msg.created()}
-          </dt>
-          <dd id={`${id}-created`}>
-            {`${time.time} ${time.date}`}
-          </dd>
-          <dt>
-            {msg.operatingSystem()}
-          </dt>
-          <dd id={`${id}-os`}>
-            {getOsHumanName(snapshot.getIn(['vm', 'os', 'type']))}
-          </dd>
-          <dt>
-            {msg.memory()}
-          </dt>
-          <dd id={`${id}-memory`}>
-            {userFormatOfBytes(snapshot.getIn(['vm', 'memory', 'total'])).str} {snapshotMemoryState}
-          </dd>
-          <dt>
-            {msg.cpus()}
-          </dt>
-          <dd id={`${id}-cpus`}>
-            {snapshot.getIn(['vm', 'cpu', 'vCPUs'])}
-          </dd>
-          <dt>
-            {msg.status()}
-          </dt>
-          <dd id={`${id}-status`}>
-            {statusMap(msg)[snapshot.get('status')]}
-          </dd>
-        </dl>
-        <dl className={style['snapshot-properties']}>
-          <dt>
-            {msg.template()}
-          </dt>
-          <dd id={`${id}-template`}>
-            {template && templateNameRenderer(template)}
-          </dd>
-          <dt>
-            {msg.cdromBoot()}
-          </dt>
-          <dd id={`${id}-cdrom`}>
-            {snapshot.getIn(['vm', 'cdrom', 'file', 'id']) ? snapshot.getIn(['cdrom', 'file', 'id']) : msg.empty() }
-          </dd>
-          <dt>
-            {msg.nic()}
-          </dt>
-          <dd id={`${id}-nics`}>
-            { nicsToRender.size === 0 &&
-              <div className={style['no-nics']} id={`${id}-no-nics`}>{msg.noNics()}</div>
-          }
-            { nicsToRender.size > 0 && (
-              <div className={style['snapshot-disk-list']}>
-                {nicsToShow && nicsToShow.map(nicRender.bind(null, `${id}-nics`))}
-                {
-              showMoreNics && (
-                <OverlayTrigger
-                  overlay={(
-                    <Tooltip id={`snapshot-nic-tooltip-${snapshot.get('id')}`}>
-                      {
-                    additionalNics && additionalNics.map(nicRender.bind(null, `${id}-nics`))
-                  }
-                    </Tooltip>
-                  )}
-                  placement='bottom'
-                  trigger='click'
-                  rootClose
-                  key='info'
-                >
-                  <a>Show more</a>
-                </OverlayTrigger>
-              )}
-              </div>
-            )}
-          </dd>
-          <dt>
-            {msg.bootMenu()}
-          </dt>
-          <dd id={`${id}-boot-menu`}>
-            <Status msg={msg} status={snapshot.getIn(['vm', 'bootMenuEnabled'])} />
-          </dd>
-          <dt>
-            {msg.disks()}
-          </dt>
-          <dd id={`${id}-disks`}>
-            { disksToRender.size === 0 &&
-              <div className={style['no-disks']} id={`${id}-no-disks`}>{msg.noDisks()}</div>
-          }
-            { disksToRender.size > 0 && (
-              <div className={style['snapshot-disk-list']}>
-                {diskToShow && diskToShow.map(diskRender.bind(null, `${id}-disks`))}
-                {
-              showMoreDisks && (
-                <OverlayTrigger
-                  overlay={(
-                    <Tooltip id={`snapshot-disk-tooltip-${snapshot.get('id')}`}>
-                      {
-                    additionalDisk && additionalDisk.map(diskRender.bind(null, `${id}-disks`))
-                  }
-                    </Tooltip>
-                  )}
-                  placement='bottom'
-                  trigger='click'
-                  rootClose
-                  key='info'
-                >
-                  <a>Show more</a>
-                </OverlayTrigger>
-              )}
-              </div>
-            )}
-          </dd>
-        </dl>
-      </div>
-      <div style={{ textAlign: 'left' }}>
-        <RestoreConfirmationModal
-          id={`${id}-restore-modal`}
-          snapshot={snapshot}
-          vmId={vmId}
-          msg={msg}
-          trigger={({ onClick }) => (
-            isPoolVm
-              ? (
-                <OverlayTrigger placement='top' overlay={<Tooltip id={`${id}-restore-tt`}>{ msg.vmPoolSnapshotRestoreUnavailable() }</Tooltip>}>
-                  <span>
-                    <Button bsStyle='default' id={`${id}-restore`} disabled style={{ pointerEvents: 'none' }}>{ msg.snapshotRestore() }</Button>
-                  </span>
-                </OverlayTrigger>
-              )
-              : (
-                <Button bsStyle='default' id={`${id}-restore`} onClick={onClick} disabled={restoreDisabled}>
-                  { msg.snapshotRestore() }
-                </Button>
-              )
-          )}
-        />
-      </div>
+      {children}
     </Popover>
   )
 }
@@ -242,6 +165,8 @@ SnapshotDetail.propTypes = {
   isPoolVm: PropTypes.bool,
   msg: PropTypes.object.isRequired,
   locale: PropTypes.string.isRequired,
+  position: PropTypes.oneOf(['auto', 'top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end', 'right-start', 'right-end']),
+  children: PropTypes.object,
 }
 
 export default withMsg(SnapshotDetail)
diff --git a/src/components/VmDetails/cards/SnapshotsCard/SnapshotItem.js b/src/components/VmDetails/cards/SnapshotsCard/SnapshotItem.js
index 38f89cdfe9..08810a287c 100644
--- a/src/components/VmDetails/cards/SnapshotsCard/SnapshotItem.js
+++ b/src/components/VmDetails/cards/SnapshotsCard/SnapshotItem.js
@@ -4,11 +4,8 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
 import {
-  Icon,
-  OverlayTrigger,
   Tooltip as PFTooltip,
-  noop,
-} from 'patternfly-react'
+} from '@patternfly/react-core'
 
 import style from './style.css'
 
@@ -20,13 +17,14 @@ import { deleteVmSnapshot } from './actions'
 import { formatHowLongAgo } from '_/utils/format'
 import { getMinimizedString, escapeHtml } from '../../../utils'
 import { Tooltip, InfoTooltip } from '_/components/tooltips'
+import { CheckCircleIcon, EyeIcon, LockIcon, PlayIcon, TrashIcon } from '@patternfly/react-icons/dist/esm/icons'
 const MAX_DESCRIPTION_SIZE = 50
 
 const SnapshotAction = ({ children, className, disabled, id, onClick }) => {
   return (
     <a
       id={id}
-      onClick={disabled ? noop : onClick}
+      onClick={disabled ? () => {} : onClick}
       className={`${className} ${disabled && 'disabled'}`}
     >
       {children}
@@ -41,15 +39,15 @@ SnapshotAction.propTypes = {
   onClick: PropTypes.func,
 }
 
-const StatusTooltip = ({ icon, text, id, placement }) => {
+const StatusTooltip = ({ icon: TheIcon, text, id, placement }) => {
   return (
-    <OverlayTrigger overlay={<PFTooltip id={id}>{text}</PFTooltip>} placement={placement} trigger={['hover', 'focus']}>
-      <a>{icon}</a>
-    </OverlayTrigger>
+    <PFTooltip id={id} content={text} position={placement}>
+      <a><TheIcon/></a>
+    </PFTooltip>
   )
 }
 StatusTooltip.propTypes = {
-  icon: PropTypes.node.isRequired,
+  icon: PropTypes.func.isRequired,
   text: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   placement: PropTypes.string.isRequired,
@@ -108,22 +106,16 @@ class SnapshotItem extends React.Component {
     if (!this.props.snapshot.get('isActive')) {
       // Info popover
       buttons.push(
-        <OverlayTrigger
-          overlay={(
-            <SnapshotDetail key='detail'
-              id={`${this.props.id}-info-popover`}
-              snapshot={this.props.snapshot}
-              vmId={this.props.vmId}
-              restoreDisabled={isRestoreDisabled}
-              isPoolVm={this.props.isPoolVm}
-              msg={msg}
-              locale={locale}
-            />
-          )}
-          placement={this.state.isMobile || this.state.isTablet ? 'top' : 'left'}
-          trigger='click'
-          rootClose
-          key='info'
+        <SnapshotDetail
+          key='detail'
+          id={`${this.props.id}-info-popover`}
+          snapshot={this.props.snapshot}
+          vmId={this.props.vmId}
+          restoreDisabled={isRestoreDisabled}
+          isPoolVm={this.props.isPoolVm}
+          msg={msg}
+          locale={locale}
+          position={this.state.isMobile || this.state.isTablet ? 'top' : 'left'}
         >
           <a id={`${this.props.id}-info`}>
             <InfoTooltip
@@ -131,7 +123,7 @@ class SnapshotItem extends React.Component {
               tooltip={msg.details()}
             />
           </a>
-        </OverlayTrigger>
+        </SnapshotDetail >
       )
 
       if (!this.props.hideActions) {
@@ -145,7 +137,7 @@ class SnapshotItem extends React.Component {
             trigger={({ onClick }) => (
               <SnapshotAction key='restore' id={`${this.props.id}-restore`} onClick={onClick} disabled={isRestoreDisabled}>
                 <Tooltip id={`${this.props.id}-restore-tt`} tooltip={msg.snapshotRestore()}>
-                  <Icon type='fa' name='play-circle' />
+                  <PlayIcon/>
                 </Tooltip>
               </SnapshotAction>
             )}
@@ -161,7 +153,7 @@ class SnapshotItem extends React.Component {
             trigger={({ onClick }) => (
               <SnapshotAction key='delete' id={`${this.props.id}-delete`} disabled={isActionsDisabled} onClick={onClick}>
                 <Tooltip id={`${this.props.id}-delete-tt`} tooltip={msg.snapshotDelete()}>
-                  <Icon type='pf' name='delete' />
+                  <TrashIcon/>
                 </Tooltip>
               </SnapshotAction>
             )}
@@ -184,13 +176,13 @@ class SnapshotItem extends React.Component {
       const status = `${msg.status()}:`
       switch (this.props.snapshot.get('status')) {
         case 'locked':
-          statusIcon = <StatusTooltip icon={<Icon type='pf' name='locked' />} text={`${status} ${msg.locked()}`} id={tooltipId} placement={tooltipPlacement} />
+          statusIcon = <StatusTooltip icon={LockIcon} text={`${status} ${msg.locked()}`} id={tooltipId} placement={tooltipPlacement} />
           break
         case 'in_preview':
-          statusIcon = <StatusTooltip icon={<Icon type='fa' name='eye' />} text={`${status} ${msg.inPreview()}`} id={tooltipId} placement={tooltipPlacement} />
+          statusIcon = <StatusTooltip icon={EyeIcon} text={`${status} ${msg.inPreview()}`} id={tooltipId} placement={tooltipPlacement} />
           break
         case 'ok':
-          statusIcon = <StatusTooltip icon={<Icon type='pf' name='ok' />} text={`${status} ${msg.ok()}`} id={tooltipId} placement={tooltipPlacement} />
+          statusIcon = <StatusTooltip icon={CheckCircleIcon} text={`${status} ${msg.ok()}`} id={tooltipId} placement={tooltipPlacement} />
           break
       }
     }
diff --git a/src/components/VmDetails/cards/SnapshotsCard/index.js b/src/components/VmDetails/cards/SnapshotsCard/index.js
index 46591fb7bc..e1fa5c56b2 100644
--- a/src/components/VmDetails/cards/SnapshotsCard/index.js
+++ b/src/components/VmDetails/cards/SnapshotsCard/index.js
@@ -9,6 +9,7 @@ import style from './style.css'
 import NewSnapshotModal from './NewSnapshotModal'
 import SnapshotItem from './SnapshotItem'
 import { PendingTaskTypes } from '_/reducers/pendingTasks'
+import { VirtualMachineIcon } from '@patternfly/react-icons/dist/esm/icons'
 
 const DOWN_STATUS = 'down'
 const RUNNING_STATUS = 'up'
@@ -80,7 +81,7 @@ const SnapshotsCard = ({ vm }) => {
 
   return (
     <BaseCard
-      icon={{ type: 'pf', name: 'virtual-machine' }}
+      icon={VirtualMachineIcon}
       title={msg.snapshot()}
       itemCount={snapshots.size}
       idPrefix={idPrefix}
diff --git a/src/components/VmDetails/cards/UtilizationCard/CpuCharts.js b/src/components/VmDetails/cards/UtilizationCard/CpuCharts.js
index 6026fcebdc..5df85687d7 100644
--- a/src/components/VmDetails/cards/UtilizationCard/CpuCharts.js
+++ b/src/components/VmDetails/cards/UtilizationCard/CpuCharts.js
@@ -1,15 +1,9 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import {
-  CardTitle,
+  Card,
   CardBody,
-  UtilizationCard,
-  UtilizationCardDetails,
-  UtilizationCardDetailsCount,
-  UtilizationCardDetailsDesc,
-  UtilizationCardDetailsLine1,
-  UtilizationCardDetailsLine2,
-} from 'patternfly-react'
+} from '@patternfly/react-core'
 import DonutChart from './UtilizationCharts/DonutChart'
 import AreaChart from './UtilizationCharts/AreaChart'
 
@@ -19,6 +13,7 @@ import style from './style.css'
 
 import NoHistoricData from './NoHistoricData'
 import NoLiveData from './NoLiveData'
+import UtilizationCardData from './UtilizationCardData'
 
 /**
  * Render current CPU % utilization as a donut chart and historic % utilization values
@@ -34,19 +29,18 @@ const CpuCharts = ({ cpuStats, isRunning, id, vcpus }) => {
   const history = ((cpuStats['usage.history'] && cpuStats['usage.history'].datum) || []).reverse()
 
   return (
-    <UtilizationCard className={style['chart-card']} id={id}>
-      <CardTitle>{msg.utilizationCardTitleCpu()}</CardTitle>
+    <Card className={style['chart-card']} id={id}>
       <CardBody>
+        {msg.utilizationCardTitleCpu()}
         { !isRunning && <NoLiveData id={`${id}-no-live-data`} /> }
         { isRunning && (
           <>
-            <UtilizationCardDetails>
-              <UtilizationCardDetailsCount id={`${id}-available`}>{cpuAvailable}%</UtilizationCardDetailsCount>
-              <UtilizationCardDetailsDesc>
-                <UtilizationCardDetailsLine1>{msg.utilizationCardAvailable()}</UtilizationCardDetailsLine1>
-                <UtilizationCardDetailsLine2 id={`${id}-total`}>{msg.utilizationCardOf100()}</UtilizationCardDetailsLine2>
-              </UtilizationCardDetailsDesc>
-            </UtilizationCardDetails>
+            <UtilizationCardData
+              available={`${cpuAvailable}%`}
+              line1={msg.utilizationCardAvailable()}
+              line2={msg.utilizationCardOf100()}
+              idPrefix={id}
+            />
 
             <DonutChart
               id={`${id}-donut-chart`}
@@ -77,7 +71,7 @@ const CpuCharts = ({ cpuStats, isRunning, id, vcpus }) => {
           </>
         )}
       </CardBody>
-    </UtilizationCard>
+    </Card>
   )
 }
 CpuCharts.propTypes = {
diff --git a/src/components/VmDetails/cards/UtilizationCard/DiskCharts.js b/src/components/VmDetails/cards/UtilizationCard/DiskCharts.js
index 76422dc05c..6dbf3ce467 100644
--- a/src/components/VmDetails/cards/UtilizationCard/DiskCharts.js
+++ b/src/components/VmDetails/cards/UtilizationCard/DiskCharts.js
@@ -1,15 +1,9 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import {
+  Card,
   CardBody,
-  CardTitle,
-  UtilizationCard,
-  UtilizationCardDetails,
-  UtilizationCardDetailsCount,
-  UtilizationCardDetailsDesc,
-  UtilizationCardDetailsLine1,
-  UtilizationCardDetailsLine2,
-} from 'patternfly-react'
+} from '@patternfly/react-core'
 import BarChart from './UtilizationCharts/BarChart'
 import DonutChart from './UtilizationCharts/DonutChart'
 
@@ -21,6 +15,7 @@ import style from './style.css'
 
 import NoHistoricData from './NoHistoricData'
 import NoLiveData from './NoLiveData'
+import UtilizationCardData from './UtilizationCardData'
 
 const EmptyBlock = () => (
   <div className={style['no-history-chart']} />
@@ -62,31 +57,27 @@ const DiskCharts = ({ vm, diskStats, isRunning, id, ...props }) => {
   const isVmWindows = isWindows(vm.getIn(['os', 'type']))
 
   return (
-    <UtilizationCard className={style['chart-card']} id={id}>
-      <CardTitle>{msg.utilizationCardTitleDisk()}</CardTitle>
+    <Card className={style['chart-card']} id={id}>
       <CardBody>
+        {msg.utilizationCardTitleDisk()}
         { vm.get('disks').size === 0 &&
           <NoLiveData id={`${id}-no-live-data`} message={msg.utilizationCardNoAttachedDisks()} />
         }
         { vm.get('disks').size > 0 && (
           <>
-            <UtilizationCardDetails>
-              <UtilizationCardDetailsCount id={`${id}-available`}>
-                {msg.utilizationCardUnitNumber({
-                  number: floor(availableFormated.number, availableMemoryPercision),
-                  storageUnits: availableFormated.suffix !== totalFormated.suffix && availableFormated.suffix,
-                })}
-              </UtilizationCardDetailsCount>
-              <UtilizationCardDetailsDesc>
-                <UtilizationCardDetailsLine1>{msg.utilizationCardUnallocated()}</UtilizationCardDetailsLine1>
-                <UtilizationCardDetailsLine2 id={`${id}-total`}>
-                  {msg.utilizationCardOfProvisioned({
-                    number: round(totalFormated.number, 1),
-                    storageUnits: totalFormated.suffix,
-                  })}
-                </UtilizationCardDetailsLine2>
-              </UtilizationCardDetailsDesc>
-            </UtilizationCardDetails>
+            <UtilizationCardData
+              available={msg.utilizationCardUnitNumber({
+                number: floor(availableFormated.number, availableMemoryPercision),
+                storageUnits: availableFormated.suffix !== totalFormated.suffix && availableFormated.suffix,
+              })}
+              line1={msg.utilizationCardUnallocated()}
+              line2={msg.utilizationCardOfProvisioned({
+                number: round(totalFormated.number, 1),
+                storageUnits: totalFormated.suffix,
+              })}
+              idPrefix={id}
+            />
+
             { !hasDiskDetails && (
               <DonutChart
                 id={`${id}-donut-chart`}
@@ -143,7 +134,7 @@ const DiskCharts = ({ vm, diskStats, isRunning, id, ...props }) => {
           </>
         )}
       </CardBody>
-    </UtilizationCard>
+    </Card>
   )
 }
 DiskCharts.propTypes = {
diff --git a/src/components/VmDetails/cards/UtilizationCard/MemoryCharts.js b/src/components/VmDetails/cards/UtilizationCard/MemoryCharts.js
index da8af844b8..bdfbae4439 100644
--- a/src/components/VmDetails/cards/UtilizationCard/MemoryCharts.js
+++ b/src/components/VmDetails/cards/UtilizationCard/MemoryCharts.js
@@ -1,15 +1,9 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import {
+  Card,
   CardBody,
-  CardTitle,
-  UtilizationCard,
-  UtilizationCardDetails,
-  UtilizationCardDetailsCount,
-  UtilizationCardDetailsDesc,
-  UtilizationCardDetailsLine1,
-  UtilizationCardDetailsLine2,
-} from 'patternfly-react'
+} from '@patternfly/react-core'
 import DonutChart from './UtilizationCharts/DonutChart'
 import AreaChart from './UtilizationCharts/AreaChart'
 import { MsgContext } from '_/intl'
@@ -20,6 +14,7 @@ import style from './style.css'
 
 import NoHistoricData from './NoHistoricData'
 import NoLiveData from './NoLiveData'
+import UtilizationCardData from './UtilizationCardData'
 
 /**
  * Render current Memory use (free vs available) as a donut chart and historic use values
@@ -47,29 +42,25 @@ const MemoryCharts = ({ memoryStats, isRunning, id }) => {
     : 2
 
   return (
-    <UtilizationCard className={style['chart-card']} id={id}>
-      <CardTitle>{msg.utilizationCardTitleMemory()}</CardTitle>
+    <Card className={style['chart-card']} id={id}>
       <CardBody>
+        {msg.utilizationCardTitleMemory()}
         { !isRunning && <NoLiveData id={`${id}-no-live-data`} /> }
         { isRunning && (
           <>
-            <UtilizationCardDetails>
-              <UtilizationCardDetailsCount id={`${id}-available`}>
-                {msg.utilizationCardUnitNumber({
-                  number: floor(availableFormated.number, availableMemoryPercision),
-                  storageUnits: availableFormated.suffix !== totalFormated.suffix && availableFormated.suffix,
-                })}
-              </UtilizationCardDetailsCount>
-              <UtilizationCardDetailsDesc>
-                <UtilizationCardDetailsLine1>{msg.utilizationCardAvailable()}</UtilizationCardDetailsLine1>
-                <UtilizationCardDetailsLine2 id={`${id}-total`}>
-                  {msg.utilizationCardOf({
-                    number: round(totalFormated.number, 0),
-                    storageUnits: totalFormated.suffix,
-                  })}
-                </UtilizationCardDetailsLine2>
-              </UtilizationCardDetailsDesc>
-            </UtilizationCardDetails>
+            <UtilizationCardData
+              available={msg.utilizationCardUnitNumber({
+                number: floor(availableFormated.number, availableMemoryPercision),
+                storageUnits: availableFormated.suffix !== totalFormated.suffix && availableFormated.suffix,
+              })}
+              line1={msg.utilizationCardAvailable()}
+              line2={msg.utilizationCardOf({
+                number: round(totalFormated.number, 0),
+                storageUnits: totalFormated.suffix,
+              })}
+              idPrefix={id}
+            />
+
             <DonutChart
               id={`${id}-donut-chart`}
               data={[
@@ -98,7 +89,7 @@ const MemoryCharts = ({ memoryStats, isRunning, id }) => {
           </>
         )}
       </CardBody>
-    </UtilizationCard>
+    </Card>
   )
 }
 MemoryCharts.propTypes = {
diff --git a/src/components/VmDetails/cards/UtilizationCard/NetworkingCharts.js b/src/components/VmDetails/cards/UtilizationCard/NetworkingCharts.js
index 860f234f3a..36a4937293 100644
--- a/src/components/VmDetails/cards/UtilizationCard/NetworkingCharts.js
+++ b/src/components/VmDetails/cards/UtilizationCard/NetworkingCharts.js
@@ -1,15 +1,9 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import {
-  CardTitle,
+  Card,
   CardBody,
-  UtilizationCard,
-  UtilizationCardDetails,
-  UtilizationCardDetailsCount,
-  UtilizationCardDetailsDesc,
-  UtilizationCardDetailsLine1,
-  UtilizationCardDetailsLine2,
-} from 'patternfly-react'
+} from '@patternfly/react-core'
 import DonutChart from './UtilizationCharts/DonutChart'
 import AreaChart from './UtilizationCharts/AreaChart'
 
@@ -19,6 +13,7 @@ import style from './style.css'
 
 import NoHistoricData from './NoHistoricData'
 import NoLiveData from './NoLiveData'
+import UtilizationCardData from './UtilizationCardData'
 
 /**
  * Render current Network % utilization as a donut chart and historic % utilization values
@@ -39,22 +34,21 @@ const NetworkingCharts = ({ netStats, isRunning, id }) => {
   const history = ((netStats['usage.history'] && netStats['usage.history'].datum) || []).reverse()
 
   return (
-    <UtilizationCard className={style['chart-card']} id={id}>
-      <CardTitle>{msg.utilizationCardTitleNetworking()}</CardTitle>
+    <Card className={style['chart-card']} id={id}>
       <CardBody>
+        {msg.utilizationCardTitleNetworking()}
         { !isRunning && <NoLiveData id={`${id}-no-live-data`} /> }
         { isRunning && !haveNetworkStats &&
           <NoLiveData id={`${id}-no-live-data`} message={msg.utilizationNoNetStats()} />
         }
         { isRunning && haveNetworkStats && (
           <>
-            <UtilizationCardDetails>
-              <UtilizationCardDetailsCount id={`${id}-available`}>{available}%</UtilizationCardDetailsCount>
-              <UtilizationCardDetailsDesc>
-                <UtilizationCardDetailsLine1>{msg.utilizationCardAvailable()}</UtilizationCardDetailsLine1>
-                <UtilizationCardDetailsLine2>{msg.utilizationCardOf100()}</UtilizationCardDetailsLine2>
-              </UtilizationCardDetailsDesc>
-            </UtilizationCardDetails>
+            <UtilizationCardData
+              available={`${available}%`}
+              line1={msg.utilizationCardAvailable()}
+              line2={msg.utilizationCardOf100()}
+              idPrefix={id}
+            />
             <DonutChart
               id={`${id}-donut-chart`}
               data={[
@@ -83,7 +77,7 @@ const NetworkingCharts = ({ netStats, isRunning, id }) => {
           </>
         )}
       </CardBody>
-    </UtilizationCard>
+    </Card>
   )
 }
 NetworkingCharts.propTypes = {
diff --git a/src/components/VmDetails/cards/UtilizationCard/NoHistoricData.js b/src/components/VmDetails/cards/UtilizationCard/NoHistoricData.js
index 913537580e..626daa9ea8 100644
--- a/src/components/VmDetails/cards/UtilizationCard/NoHistoricData.js
+++ b/src/components/VmDetails/cards/UtilizationCard/NoHistoricData.js
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
-import { Icon } from 'patternfly-react'
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/esm/icons'
 import { MsgContext } from '_/intl'
 
 import style from './style.css'
@@ -13,7 +13,7 @@ const NoHistoricData = ({ message, id }) => {
   return (
     <div className={style['no-history-chart']} id={id}>
       <div className={style['no-history-chart-icon']}>
-        <Icon type='pf' name='info' />
+        <InfoCircleIcon />
       </div>
       <div className={style['no-history-chart-message']}>
         { message || msg.utilizationNoHistoricData() }
diff --git a/src/components/VmDetails/cards/UtilizationCard/NoLiveData.js b/src/components/VmDetails/cards/UtilizationCard/NoLiveData.js
index c2f3bda29e..c56fbd3ef8 100644
--- a/src/components/VmDetails/cards/UtilizationCard/NoLiveData.js
+++ b/src/components/VmDetails/cards/UtilizationCard/NoLiveData.js
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
-import { Icon } from 'patternfly-react'
+import { ChartBarIcon } from '@patternfly/react-icons/dist/esm/icons'
 import { MsgContext } from '_/intl'
 
 import style from './style.css'
@@ -15,7 +15,7 @@ const NoLiveData = ({ title, message, id }) => {
   return (
     <div className={style['no-data-card-body']} id={id}>
       <div className={style['no-data-icon']}>
-        <Icon type='fa' name='bar-chart' />
+        <ChartBarIcon/>
       </div>
       <div className={style['no-data-title']}>
         { title || msg.utilizationNoDataAvailableTitle() }
diff --git a/src/components/VmDetails/cards/UtilizationCard/UtilizationCardData.js b/src/components/VmDetails/cards/UtilizationCard/UtilizationCardData.js
new file mode 100644
index 0000000000..e29bc388b2
--- /dev/null
+++ b/src/components/VmDetails/cards/UtilizationCard/UtilizationCardData.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import style from './style.css'
+
+const UtilizationCardData = ({ available, line1, line2, idPrefix }) => {
+  return (
+    <p className={style['utilization-card-details']}>
+      <span id={`${idPrefix}-available`} className={style['utilization-card-details-count']}>{available}</span>
+      <span className={style['utilization-card-details-description']}>
+        <span className={style['utilization-card-details-line-1']}>{line1}</span>
+        <span>{line2}</span>
+      </span>
+    </p>
+  )
+}
+
+UtilizationCardData.propTypes = {
+  idPrefix: PropTypes.string,
+  available: PropTypes.string,
+  line1: PropTypes.string,
+  line2: PropTypes.string,
+}
+
+export default UtilizationCardData
diff --git a/src/components/VmDetails/cards/UtilizationCard/style.css b/src/components/VmDetails/cards/UtilizationCard/style.css
index ea4599baf0..92435e7115 100644
--- a/src/components/VmDetails/cards/UtilizationCard/style.css
+++ b/src/components/VmDetails/cards/UtilizationCard/style.css
@@ -1,3 +1,38 @@
+.utilization-card-details {
+    border-bottom: 1px solid #d1d1d1;
+    display: table;
+    margin: 12px 0 15px;
+    padding: 0 0 15px;
+    width: 100%; 
+}
+
+.utilization-card-details-count {
+    font-size: 26px;
+    font-weight: 300;
+    margin-right: 10px;
+    float: left;
+    line-height: 1;
+}
+
+.utilization-card-details-description {
+    float: left;
+    line-height: 1;
+}
+
+.utilization-card-details-line-1 {
+    font-size: 10px;
+    margin-bottom: 2px;
+    display: block;
+}
+
+.chart-card :global(.pf-c-card__body) {
+  padding: 0;
+  flex-grow: 1;
+
+  display: flex;
+  flex-direction: column;
+}
+
 .utilization-card .chart-card {
   box-shadow: none;
   margin-left: -20px;
diff --git a/src/components/VmDetails/index.js b/src/components/VmDetails/index.js
index ae0c193771..c4519d34c4 100644
--- a/src/components/VmDetails/index.js
+++ b/src/components/VmDetails/index.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Card, CardBody } from 'patternfly-react'
-import { Alert } from '@patternfly/react-core'
+import { Hint, HintBody, Card, CardBody } from '@patternfly/react-core'
 import { withMsg } from '_/intl'
 
 import styles from './style.css'
@@ -62,9 +61,13 @@ class VmDetailsContainer extends React.Component {
         {vm.get('nextRunExists') && (
           <Row>
             <Col>
-              <Card>
+              <Card style={{ marginBottom: '20px' }}>
                 <CardBody>
-                  <Alert variant='info' isInline title={msg.vmHasPendingConfigurationChanges()}/>
+                  <Hint >
+                    <HintBody>
+                      {msg.vmHasPendingConfigurationChanges()}
+                    </HintBody>
+                  </Hint>
                 </CardBody>
               </Card>
             </Col>
diff --git a/src/components/VmDetails/style.css b/src/components/VmDetails/style.css
index 1358257816..97b03e7717 100644
--- a/src/components/VmDetails/style.css
+++ b/src/components/VmDetails/style.css
@@ -6,7 +6,6 @@
 /* ---> CardEditButton styles */
 .card-edit-button {
   float: right;
-  margin-top: 15px;
   width: 25px;
   height: 25px;
   border: none;
@@ -33,14 +32,17 @@
 }
 
 /* ---> BaseCard styles */
-.base-card {
+:global(.pf-c-card).base-card {
   display: flex;
   flex-direction: column;
+  margin-bottom: 20px;
 }
 
 .base-card-heading {
   flex-shrink: 0;
   margin-bottom: 0;
+  justify-content: space-between;
+  border-bottom: 1px solid #d1d1d1;
 }
 
 .base-card-title-icon {
@@ -54,6 +56,7 @@
 
 .base-card-body {
   flex: 1 0 0;
+  margin-top: 15px;
 }
 
 .base-card-footer {