Merge pull request #469 from smiclea/cache-networks

Cache Wizard Instances and Wizard Networks calls

src/components/organisms/WizardPageContent/WizardPageContent.jsx

@@ -185,6 +185,7 @@ type Props = {
   onScheduleRemove: (scheudleId: string) => void,
   onContentRef: (ref: any) => void,
   onReloadOptionsClick: () => void,
+  onReloadNetworksClick: () => void,
 }
 type TimezoneValue = 'local' | 'utc'
 type State = {
@@ -286,15 +287,30 @@ class WizardPageContent extends React.Component<Props, State> {
     if (pageId === 'type') {
       title += ` ${this.props.type.charAt(0).toUpperCase() + this.props.type.substr(1)}`
     }
-
+    let optionsReload = {
+      label: 'Reload Options',
+      action: () => { this.props.onReloadOptionsClick() },
+      tip: 'Options may be cached by the UI. Here you can reload them from the API.',
+    }
+    let reloadPages = {
+      'source-options': optionsReload,
+      'dest-options': optionsReload,
+      networks: {
+        label: 'Reload Networks',
+        action: () => { this.props.onReloadNetworksClick() },
+        tip: 'Networks and instances info may be cached by the UI. Here you can reload them from the API.',
+      },
+    }
     return (
       <Header>
         <HeaderLabel data-test-id={`${testName}-header`}>{title}</HeaderLabel>
-        {pageId === 'source-options' || pageId === 'dest-options' ? (
+        {reloadPages[pageId] ? (
           <HeaderReload>
-            <HeaderReloadLabel onClick={() => { this.props.onReloadOptionsClick() }}>Reload Options</HeaderReloadLabel>
+            <HeaderReloadLabel onClick={() => { reloadPages[pageId].action() }}>
+              {reloadPages[pageId].label}
+            </HeaderReloadLabel>
             <InfoIcon
-              text="Options may be cached by the UI. Here you can reload them from the API."
+              text={reloadPages[pageId].tip}
               marginBottom={0}
               marginLeft={8}
               filled

src/components/pages/AssessmentDetailsPage/AssessmentDetailsPage.jsx

@@ -392,7 +392,7 @@ class AssessmentDetailsPage extends React.Component<Props, State> {
     networkStore.loadNetworks(localData.endpoint.id, {
       location: localData.locationName,
       resource_group: localData.resourceGroupName,
-    }, { useLocalStorage: true })
+    }, { cache: true })
   }
 
   loadInstancesDetails() {
@@ -403,7 +403,7 @@ class AssessmentDetailsPage extends React.Component<Props, State> {
     instanceStore.loadInstancesDetails({
       endpointId: this.getSourceEndpointId(),
       instancesInfo,
-      useLocalStorage: true,
+      cache: true,
       env: {
         location: localData.locationName,
         resource_group: localData.resourceGroupName,

src/components/pages/MigrationDetailsPage/MigrationDetailsPage.jsx

@@ -124,13 +124,13 @@ class MigrationDetailsPage extends React.Component<Props, State> {
 
     networkStore.loadNetworks(details.destination_endpoint_id, details.destination_environment, {
       quietError: true,
-      useLocalStorage: cache,
+      cache,
     })
     instanceStore.loadInstancesDetails({
       endpointId: details.origin_endpoint_id,
       // $FlowIgnore
       instancesInfo: details.instances.map(n => ({ instance_name: n })),
-      useLocalStorage: cache,
+      cache,
       quietError: false,
       env: details.source_environment,
     })

src/components/pages/ReplicaDetailsPage/ReplicaDetailsPage.jsx

@@ -163,13 +163,13 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
     this.loadIsEditable(details)
     networkStore.loadNetworks(details.destination_endpoint_id, details.destination_environment, {
       quietError: true,
-      useLocalStorage: cache,
+      cache,
     })
     instanceStore.loadInstancesDetails({
       endpointId: details.origin_endpoint_id,
       // $FlowIgnore
       instancesInfo: details.instances.map(n => ({ instance_name: n })),
-      useLocalStorage: cache,
+      cache,
       quietError: false,
       env: details.source_environment,
     })

src/components/pages/WizardPage/WizardPage.jsx

@@ -435,7 +435,12 @@ class WizardPage extends React.Component<Props, State> {
         if (!wizardStore.data.source) {
           return
         }
-        instanceStore.loadInstancesInChunks(wizardStore.data.source, this.instancesPerPage, false, wizardStore.data.sourceOptions)
+        instanceStore.loadInstancesInChunks({
+          endpoint: wizardStore.data.source,
+          vmsPerPage: this.instancesPerPage,
+          env: wizardStore.data.sourceOptions,
+          useCache: true,
+        })
         break
       }
       case 'target': {
@@ -452,22 +457,27 @@ class WizardPage extends React.Component<Props, State> {
         break
       }
       case 'networks':
-        if (wizardStore.data.source && wizardStore.data.selectedInstances) {
-          instanceStore.loadInstancesDetails({
-            endpointId: wizardStore.data.source.id,
-            instancesInfo: wizardStore.data.selectedInstances,
-            env: wizardStore.data.sourceOptions,
-          })
-        }
-        if (wizardStore.data.target) {
-          let id = wizardStore.data.target.id
-          networkStore.loadNetworks(id, wizardStore.data.destOptions)
-        }
+        this.loadNetworks(true)
         break
       default:
     }
   }
 
+  loadNetworks(cache: boolean) {
+    if (wizardStore.data.source && wizardStore.data.selectedInstances) {
+      instanceStore.loadInstancesDetails({
+        endpointId: wizardStore.data.source.id,
+        instancesInfo: wizardStore.data.selectedInstances,
+        env: wizardStore.data.sourceOptions,
+        cache,
+      })
+    }
+    if (wizardStore.data.target) {
+      let id = wizardStore.data.target.id
+      networkStore.loadNetworks(id, wizardStore.data.destOptions, { cache })
+    }
+  }
+
   async createMultiple() {
     let typeLabel = this.state.type.charAt(0).toUpperCase() + this.state.type.substr(1)
     notificationStore.alert(`Creating ${typeLabel}s ...`)
@@ -591,6 +601,7 @@ class WizardPage extends React.Component<Props, State> {
             onScheduleRemove={scheduleId => { this.handleScheduleRemove(scheduleId) }}
             onContentRef={ref => { this.contentRef = ref }}
             onReloadOptionsClick={() => { this.handleReloadOptionsClick() }}
+            onReloadNetworksClick={() => { this.loadNetworks(false) }}
           />}
         />
         <Modal

src/constants.js

@@ -98,20 +98,12 @@ export const migrationFields = [
 export const wizardPages = [
   { id: 'type', title: 'New', breadcrumb: 'Type' },
   { id: 'source', title: 'Select your source cloud', breadcrumb: 'Source Cloud' },
-  {
-    id: 'source-options',
-    title: 'Source options',
-    breadcrumb: 'Source Options',
-  },
+  { id: 'source-options', title: 'Source options', breadcrumb: 'Source Options' },
   { id: 'vms', title: 'Select instances', breadcrumb: 'Select VMs' },
   { id: 'target', title: 'Select your target cloud', breadcrumb: 'Target Cloud' },
   { id: 'dest-options', title: 'Target options', breadcrumb: 'Target Options' },
   { id: 'networks', title: 'Networks', breadcrumb: 'Networks' },
-  {
-    id: 'storage',
-    title: 'Storage Mapping',
-    breadcrumb: 'Storage',
-  },
+  { id: 'storage', title: 'Storage Mapping', breadcrumb: 'Storage' },
   { id: 'schedule', title: 'Schedule', breadcrumb: 'Schedule', excludeFrom: 'migration' },
   { id: 'summary', title: 'Summary', breadcrumb: 'Summary' },
 ]

src/sources/InstanceSource.js

@@ -27,6 +27,7 @@ class InstanceSource {
     cancelId?: string,
     searchText?: string,
     env?: any,
+    cache?: boolean
   ): Promise<Instance[]> {
     let url = `${servicesUrl.coriolis}/${Api.projectId}/endpoints/${endpointId}/instances`
     let queryParams: { [string]: string | number } = {}
@@ -61,7 +62,7 @@ class InstanceSource {
     let keys = Object.keys(queryParams)
     url = `${url}${keys.length > 0 ? '?' : ''}${keys.map(p => `${p}=${queryParams[p]}`).join('&')}`
 
-    let response = await Api.send({ url, cancelId })
+    let response = await Api.send({ url, cancelId, cache })
     return response.data.instances
   }
 

src/sources/NetworkSource.js

@@ -22,7 +22,7 @@ import { servicesUrl } from '../constants'
 class NetworkSource {
   async loadNetworks(enpointId: string, environment: ?{ [string]: mixed }, options?: {
     quietError?: boolean,
-    useLocalStorage?: boolean,
+    cache?: boolean,
   }): Promise<Network[]> {
     let url = `${servicesUrl.coriolis}/${Api.projectId}/endpoints/${enpointId}/networks`
     if (environment) {
@@ -31,7 +31,7 @@ class NetworkSource {
     let response = await Api.send({
       url,
       quietError: options && options.quietError,
-      cache: options && options.useLocalStorage,
+      cache: options && options.cache,
     })
     let networks: Network[] = response.data.networks.filter(n => n.name.indexOf('coriolis-migrnet') === -1)
     networks.sort((a, b) => a.name.localeCompare(b.name))

src/stores/InstanceStore.js

@@ -57,7 +57,16 @@ class InstanceStore {
   lastEndpointId: string
   reqId: number
 
-  @action async loadInstancesInChunks(endpoint: Endpoint, vmsPerPage?: number = 6, reload?: boolean, env?: any) {
+  @action async loadInstancesInChunks(options: {
+    endpoint: Endpoint,
+    vmsPerPage?: number,
+    reload?: boolean,
+    env?: any,
+    useCache?: boolean,
+  }) {
+    let { endpoint, vmsPerPage, reload, env, useCache } = options
+    vmsPerPage = vmsPerPage || 6
+
     ApiCaller.cancelRequests(`${endpoint.id}-chunk`)
 
     this.backgroundInstances = []
@@ -73,7 +82,7 @@ class InstanceStore {
 
     let loadNextChunk = async (lastEndpointId?: string) => {
       let currentEndpointId = endpoint.id
-      let instances = await InstanceSource.loadInstancesChunk(currentEndpointId, chunkCount, lastEndpointId, `${endpoint.id}-chunk`, undefined, env)
+      let instances = await InstanceSource.loadInstancesChunk(currentEndpointId, chunkCount, lastEndpointId, `${endpoint.id}-chunk`, undefined, env, useCache)
       if (currentEndpointId !== this.lastEndpointId) {
         return
       }
@@ -186,7 +195,7 @@ class InstanceStore {
     this.searchNotFound = false
     this.searchText = ''
     this.currentPage = 1
-    this.loadInstancesInChunks(endpoint, chunkSize, true, env)
+    this.loadInstancesInChunks({ endpoint, vmsPerPage: chunkSize, reload: true, env })
   }
 
   @action cancelIntancesChunksLoading() {
@@ -209,11 +218,11 @@ class InstanceStore {
   @action async loadInstancesDetails(opts: {
     endpointId: string,
     instancesInfo: Instance[],
-    useLocalStorage?: boolean,
+    cache?: boolean,
     quietError?: boolean,
     env?: any,
   }): Promise<void> {
-    let { endpointId, instancesInfo, useLocalStorage, quietError, env } = opts
+    let { endpointId, instancesInfo, cache, quietError, env } = opts
     // Use reqId to be able to uniquely identify the request so all but the latest request can be igonred and canceled
     this.reqId = !this.reqId ? 1 : this.reqId + 1
     InstanceSource.cancelInstancesDetailsRequests(this.reqId - 1)
@@ -232,7 +241,7 @@ class InstanceStore {
         try {
           let resp: { instance: Instance, reqId: number } =
             await InstanceSource.loadInstanceDetails(endpointId, instanceInfo.instance_name || instanceInfo.name,
-              this.reqId, quietError, env, useLocalStorage)
+              this.reqId, quietError, env, cache)
           if (resp.reqId !== this.reqId) {
             return
           }

src/stores/NetworkStore.js

@@ -25,7 +25,7 @@ class NetworkStore {
   cachedId: string = ''
 
   @action async loadNetworks(endpointId: string, environment: any, options?: {
-    useLocalStorage?: boolean,
+    cache?: boolean,
     quietError?: boolean,
   }) {
     this.loading = true