Show network name in Replica details mapping

Previously a network ID was shown instead.

This is done by retrieving the destination endpoint's networks and
matching them with replica's network mapping.

src/components/molecules/MainDetailsTable/MainDetailsTable.jsx

@@ -25,6 +25,7 @@ import StyleProps from '../../styleUtils/StyleProps'
 
 import type { MainItem } from '../../../types/MainItem'
 import type { Instance, Nic, Disk } from '../../../types/Instance'
+import type { Network } from '../../../types/Network'
 
 import instanceIcon from './images/instance.svg'
 import networkIcon from './images/network.svg'
@@ -136,6 +137,7 @@ const ArrowIcon = styled.div`
 type Props = {
   item: ?MainItem,
   instancesDetails: Instance[],
+  networks?: Network[],
 }
 type State = {
   openedRows: string[],
@@ -292,10 +294,15 @@ class MainDetailsTable extends React.Component<Props, State> {
         let sourceBody = getBody(nic)
         let destinationBody = []
 
-        let destinationNetworkName = String(destinationNetworkMap[nic.network_name])
+        let destinationNetworkId = String(destinationNetworkMap[nic.network_name])
+        let destinationNetworkName = destinationNetworkId
+        let destinationNetwork = this.props.networks && this.props.networks.find(n => n.id === destinationNetworkId)
+        if (destinationNetwork) {
+          destinationNetworkName = destinationNetwork.name
+        }
         if (transferResult) {
           let destinationNic = transferResult.devices.nics
-            .find(n => n.network_id === destinationNetworkName || n.network_name === destinationNetworkName)
+            .find(n => n.network_id === destinationNetworkId || n.network_name === destinationNetworkId)
           if (destinationNic) {
             destinationNetworkName = destinationNic.network_name
             destinationBody = getBody(destinationNic)

src/components/organisms/MainDetails/MainDetails.jsx

@@ -28,6 +28,7 @@ import CopyMultilineValue from '../../atoms/CopyMultilineValue'
 import type { Instance } from '../../../types/Instance'
 import type { MainItem } from '../../../types/MainItem'
 import type { Endpoint } from '../../../types/Endpoint'
+import type { Network } from '../../../types/Network'
 import StyleProps from '../../styleUtils/StyleProps'
 import Palette from '../../styleUtils/Palette'
 import DateUtils from '../../../utils/DateUtils'
@@ -113,6 +114,7 @@ type Props = {
   instancesDetails: Instance[],
   instancesDetailsLoading: boolean,
   endpoints: Endpoint[],
+  networks?: Network[],
   bottomControls: React.Node,
   loading: boolean,
 }
@@ -194,7 +196,7 @@ class MainDetails extends React.Component<Props> {
       return this.renderValue(DateUtils.getLocalTime(lastExecution.updated_at || lastExecution.created_at).format('YYYY-MM-DD HH:mm:ss'))
     }
 
-    return <Value>-</Value>
+    return null
   }
 
   renderValue(value: string, dateTestId?: string) {
@@ -282,6 +284,8 @@ class MainDetails extends React.Component<Props> {
     const destinationEndpoint = this.getDestinationEndpoint()
 
     const propertyNames = this.props.item && this.props.item.destination_environment ? Object.keys(this.props.item.destination_environment).filter(k => k !== 'description' && k !== 'network_map') : []
+    const lastUpdated = this.renderLastExecutionTime()
+
 
     return (
       <ColumnsLayout>
@@ -310,21 +314,25 @@ class MainDetails extends React.Component<Props> {
               {this.props.item && this.props.item.created_at ? this.renderValue(DateUtils.getLocalTime(this.props.item.created_at).format('YYYY-MM-DD HH:mm:ss'), 'created') : <Value>-</Value>}
             </Field>
           </Row>
-          <Row>
-            <Field>
-              <Label>Description</Label>
-              {this.props.item && this.props.item.destination_environment
-                && this.props.item.destination_environment.description
-                ? <CopyMultilineValue value={this.props.item.destination_environment.description} data-test-id="mainDetails-description" />
-                : <Value>-</Value>}
-            </Field>
-          </Row>
-          <Row>
-            <Field>
-              <Label>Last Updated</Label>
-              <Value data-test-id="mainDetails-updated">{this.renderLastExecutionTime()}</Value>
-            </Field>
-          </Row>
+          {this.props.item && this.props.item.destination_environment
+            && this.props.item.destination_environment.description
+            ? (
+              <Row >
+                <Field>
+                  <Label>Description</Label>
+                  <CopyMultilineValue value={this.props.item.destination_environment.description} data-test-id="mainDetails-description" />
+                </Field>
+              </Row>
+            )
+            : null}
+          {lastUpdated ? (
+            <Row>
+              <Field>
+                <Label>Last Updated</Label>
+                <Value data-test-id="mainDetails-updated">{lastUpdated}</Value>
+              </Field>
+            </Row>
+          ) : null}
         </Column>
         <Column width="9.5%">
           <Arrow />
@@ -383,6 +391,7 @@ class MainDetails extends React.Component<Props> {
           <MainDetailsTable
             item={this.props.item}
             instancesDetails={this.props.instancesDetails}
+            networks={this.props.networks}
           />
         )}
         {this.renderLoading()}

src/components/organisms/ReplicaDetailsContent/ReplicaDetailsContent.jsx

@@ -28,6 +28,7 @@ import type { Instance } from '../../../types/Instance'
 import type { MainItem } from '../../../types/MainItem'
 import type { Endpoint } from '../../../types/Endpoint'
 import type { Execution } from '../../../types/Execution'
+import type { Network } from '../../../types/Network'
 import type { Schedule as ScheduleType } from '../../../types/Schedule'
 import StyleProps from '../../styleUtils/StyleProps'
 
@@ -72,6 +73,7 @@ type TimezoneValue = 'utc' | 'local'
 type Props = {
   item: ?MainItem,
   endpoints: Endpoint[],
+  networks: Network[],
   instancesDetails: Instance[],
   instancesDetailsLoading: boolean,
   scheduleStore: typeof scheduleStore,
@@ -161,6 +163,7 @@ class ReplicaDetailsContent extends React.Component<Props, State> {
         instancesDetailsLoading={this.props.instancesDetailsLoading}
         loading={this.props.detailsLoading}
         endpoints={this.props.endpoints}
+        networks={this.props.networks}
         bottomControls={this.renderBottomControls()}
         data-test-id="rdContent-mainDetails"
       />

src/components/pages/AssessmentDetailsPage/AssessmentDetailsPage.jsx

@@ -383,7 +383,7 @@ class AssessmentDetailsPage extends React.Component<Props, State> {
     networkStore.loadNetworks(localData.endpoint.id, {
       location: localData.locationName,
       resource_group: localData.resourceGroupName,
-    }, true)
+    }, { useLocalStorage: true })
   }
 
   loadInstancesDetails() {

src/components/pages/ReplicaDetailsPage/ReplicaDetailsPage.jsx

@@ -37,6 +37,7 @@ import userStore from '../../../stores/UserStore'
 import endpointStore from '../../../stores/EndpointStore'
 import scheduleStore from '../../../stores/ScheduleStore'
 import instanceStore from '../../../stores/InstanceStore'
+import networkStore from '../../../stores/NetworkStore'
 import { requestPollTimeout } from '../../../config'
 
 import replicaImage from './images/replica.svg'
@@ -93,14 +94,20 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
 
   loadReplicaWithInstances(replicaId: string) {
     replicaStore.getReplica(replicaId).then(() => {
-      if (replicaStore.replicaDetails) {
-        instanceStore.loadInstancesDetails(
-          replicaStore.replicaDetails.origin_endpoint_id,
-          // $FlowIgnore
-          replicaStore.replicaDetails.instances.map(n => { return { instance_name: n } }),
-          false, true
-        )
+      let details = replicaStore.replicaDetails
+      if (!details) {
+        return
       }
+      networkStore.loadNetworks(details.destination_endpoint_id, details.destination_environment, {
+        useLocalStorage: true,
+        quietError: true,
+      })
+      instanceStore.loadInstancesDetails(
+        details.origin_endpoint_id,
+        // $FlowIgnore
+        details.instances.map(n => { return { instance_name: n } }),
+        false, true
+      )
     })
   }
 
@@ -282,6 +289,7 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
             instancesDetailsLoading={instanceStore.loadingInstancesDetails}
             endpoints={endpointStore.endpoints}
             scheduleStore={scheduleStore}
+            networks={networkStore.networks}
             detailsLoading={replicaStore.detailsLoading || endpointStore.loading}
             executionsLoading={replicaStore.executionsLoading}
             page={this.props.match.params.page || ''}

src/sources/NetworkSource.js

@@ -20,13 +20,14 @@ import type { Network } from '../types/Network'
 import { servicesUrl } from '../config'
 
 class NetworkSource {
-  static loadNetworks(enpointId: string, environment: ?{ [string]: mixed }): Promise<Network[]> {
+  static loadNetworks(enpointId: string, environment: ?{ [string]: mixed }, options?: {
+    quietError?: boolean,
+  }): Promise<Network[]> {
     let url = `${servicesUrl.coriolis}/${Api.projectId}/endpoints/${enpointId}/networks`
     if (environment) {
       url = `${url}?env=${btoa(JSON.stringify(environment))}`
     }
-
-    return Api.get(url).then(response => {
+    return Api.send({ url, quietError: options && options.quietError }).then(response => {
       let networks = response.data.networks.filter(n => n.name.indexOf('coriolis-migrnet') === -1)
       networks.sort((a, b) => a.name.localeCompare(b.name))
       return networks

src/stores/NetworkStore.js

@@ -45,7 +45,10 @@ class NetworkStore {
 
   cachedId: string = ''
 
-  @action loadNetworks(endpointId: string, environment: ?{ [string]: mixed }, useLocalStorage?: boolean): Promise<void> {
+  @action loadNetworks(endpointId: string, environment: any, options?: {
+    useLocalStorage?: boolean,
+    quietError?: boolean,
+  }): Promise<void> {
     let id = `${endpointId}-${btoa(JSON.stringify(environment))}`
     if (this.cachedId === id) {
       return Promise.resolve()
@@ -53,7 +56,7 @@ class NetworkStore {
 
     this.loading = true
 
-    if (useLocalStorage) {
+    if (options && options.useLocalStorage) {
       let networkStorage = NetworkLocalStorage.loadNetworksFromStorage(id)
       if (networkStorage) {
         this.loading = false
@@ -63,7 +66,7 @@ class NetworkStore {
       }
     }
 
-    return NetworkSource.loadNetworks(endpointId, environment).then((networks: Network[]) => {
+    return NetworkSource.loadNetworks(endpointId, environment, options).then((networks: Network[]) => {
       this.loading = false
       this.networks = networks
       this.cachedId = id