Show OCI root disk message in replica details page

The message show in replica details page is a bit longer as it contains
an explanation.

This same message is now also available in the Wizard Storage screen in
the form of a tooltip next to the previous shorter variant of the
message.

src/components/molecules/MainDetailsTable/MainDetailsTable.jsx

@@ -14,7 +14,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 // @flow
 
-import React from 'react'
+import * as React from 'react'
 import styled from 'styled-components'
 import { Collapse } from 'react-collapse'
 
@@ -183,7 +183,7 @@ class MainDetailsTable extends React.Component<Props, State> {
     id: string,
     icon: 'instance' | 'network' | 'storage',
     sourceName: string,
-    destinationName: string,
+    destinationName: React.Node,
     sourceBody: string[],
     destinationBody: string[]
   ) {
@@ -225,12 +225,23 @@ class MainDetailsTable extends React.Component<Props, State> {
       let sourceName = disk.id
       let mappedDisk = storageMapping && storageMapping.disk_mappings &&
         storageMapping.disk_mappings.find(m => String(m.disk_id) === String(disk.id))
-      let destinationName: string = (
-        this.props.item && this.props.item.storage_mappings
-        && this.props.item.storage_mappings.default
-      ) || 'Default'
+      let destinationName: React.Node
+      let destinationKey: string
+
+      if (disk.disabled) {
+        destinationKey = disk.disabled.info || disk.disabled.message
+        destinationName = <span style={{ color: Palette.grayscale[5] }}>{destinationKey}</span>
+      } else {
+        destinationName = (
+          this.props.item && this.props.item.storage_mappings
+          && this.props.item.storage_mappings.default
+        ) || 'Default'
+        destinationKey = destinationName
+      }
+
       if (mappedDisk) {
         destinationName = mappedDisk.destination
+        destinationKey = destinationName
       }
       let getBody = (d: Disk): string[] => {
         let body: string[] = []
@@ -254,6 +265,7 @@ class MainDetailsTable extends React.Component<Props, State> {
         let transferDisk = transferResult.devices.disks.find(d => d.storage_backend_identifier === destinationName)
         if (transferDisk) {
           destinationName = transferDisk.name || transferDisk.id
+          destinationKey = destinationName
           destinationBody = getBody(transferDisk)
         }
       } else if (this.props.item && this.props.item.status === 'RUNNING' && this.props.item.type === 'migration') {
@@ -261,7 +273,7 @@ class MainDetailsTable extends React.Component<Props, State> {
       }
 
       rows.push(this.renderRow(
-        `${instance.instance_name || instance.name}-${sourceName}-${destinationName}`,
+        `${instance.instance_name || instance.name}-${sourceName}-${destinationKey}`,
         'storage',
         sourceName,
         destinationName,

src/components/organisms/WizardStorage/WizardStorage.jsx

@@ -21,6 +21,7 @@ import styled from 'styled-components'
 import AutocompleteDropdown from '../../molecules/AutocompleteDropdown'
 import Dropdown from '../../molecules/Dropdown'
 import FieldInput from '../../molecules/FieldInput'
+import InfoIcon from '../../atoms/InfoIcon'
 
 import Palette from '../../styleUtils/Palette'
 import StyleProps from '../../styleUtils/StyleProps'
@@ -182,7 +183,11 @@ class WizardStorage extends React.Component<Props> {
     type: 'backend' | 'disk'
   ) {
     if (disk.disabled && type === 'disk') {
-      return <DiskDisabledMessage>{disk.disabled}</DiskDisabledMessage>
+      return (
+        <DiskDisabledMessage>
+          {disk.disabled.message}{disk.disabled.info ? <InfoIcon text={disk.disabled.info} /> : null}
+        </DiskDisabledMessage>
+      )
     }
 
     return storageItems.length > 10 ? (

src/components/pages/ReplicaDetailsPage/ReplicaDetailsPage.jsx

@@ -90,10 +90,8 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
     document.title = 'Replica Details'
 
     let loadReplica = async () => {
-      await Promise.all([
-        this.loadReplicaWithInstances(this.props.match.params.id, true),
-        endpointStore.getEndpoints({ showLoading: true }),
-      ])
+      await endpointStore.getEndpoints({ showLoading: true })
+      await this.loadReplicaWithInstances(this.props.match.params.id, true)
       let details = replicaStore.replicaDetails
       if (!details) {
         return

src/plugins/endpoint/oci/InstanceInfoPlugin.js

@@ -20,7 +20,10 @@ export default class InstanceInfoPlugin {
   static parseInstance(instance: Instance): Instance {
     let rootDisk = instance.devices.disks[0]
     if (rootDisk) {
-      rootDisk.disabled = 'Storage types cannot be selected for root disks on OCI'
+      rootDisk.disabled = {
+        message: 'Storage types cannot be selected for root disks on OCI',
+        info: 'The storage type of the root disk on OCI depends on the launch mode of the new VM. Coriolis determines a launch mode depending on the source VM\'s firmware and the target environment configuration.',
+      }
     }
     return instance
   }

src/types/Instance.js

@@ -29,7 +29,10 @@ export type Disk = {
   format?: string,
   guest_device?: string,
   size_bytes?: number,
-  disabled?: string,
+  disabled?: {
+    message: string,
+    info?: string,
+  },
 }
 
 export type Instance = {