Cache Wizard Instances and Wizard Networks calls

The calls made for Instances and Networks pages in the Wizard are now
cached for 30 minutes.

Cache can be refreshed in both pages using their refresh buttons.

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 = {
@@ -296,15 +297,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

@@ -394,7 +394,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() {
@@ -405,7 +405,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

@@ -125,13 +125,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

@@ -164,13 +164,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

@@ -438,7 +438,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': {
@@ -455,22 +460,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 ...`)
@@ -594,6 +604,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

@@ -83,20 +83,12 @@ export const executionOptions = [
 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