Use stored VM info for completed `transfers/deployments` when source VMs are removed

Signed-off-by: Mihaela Balutoiu <mbalutoiu@cloudbasesolutions.com>

src/components/smart/DeploymentDetailsPage/DeploymentDetailsPage.tsx

@@ -61,6 +61,7 @@ type State = {
   pausePolling: boolean;
   initialLoading: boolean;
   deploying: boolean;
+  dbInstancesDetails: any[];
 };
 @observer
 class DeploymentDetailsPage extends React.Component<Props, State> {
@@ -73,6 +74,7 @@ class DeploymentDetailsPage extends React.Component<Props, State> {
     pausePolling: false,
     initialLoading: true,
     deploying: false,
+    dbInstancesDetails: [],
   };
 
   stopPolling: boolean | null = null;
@@ -135,6 +137,14 @@ class DeploymentDetailsPage extends React.Component<Props, State> {
     return image;
   }
 
+  hasStoredVmInfo(info: any): boolean {
+    return (
+      info &&
+      Object.keys(info).length > 0 &&
+      Object.values(info).some((vmData: any) => vmData.export_info)
+    );
+  }
+
   async loadDeploymentAndPollData() {
     const loadDeployment = async () => {
       await endpointStore.getEndpoints({ showLoading: true });
@@ -250,14 +260,39 @@ class DeploymentDetailsPage extends React.Component<Props, State> {
       },
     );
 
-    instanceStore.loadInstancesDetails({
-      endpointId: details.origin_endpoint_id,
-      instances: details.instances.map(n => ({ id: n })),
-      cache: options.cache,
-      quietError: false,
-      env: details.source_environment,
-      targetProvider: targetEndpoint?.type,
+    if (this.hasStoredVmInfo(details.info)) {
+      this.populateInstanceStoreFromDeploymentInfo(details.info);
+    } else {
+      instanceStore.loadInstancesDetails({
+        endpointId: details.origin_endpoint_id,
+        instances: details.instances.map(n => ({ id: n })),
+        cache: options.cache,
+        quietError: false,
+        env: details.source_environment,
+        targetProvider: targetEndpoint?.type,
+      });
+    }
+  }
+
+  populateInstanceStoreFromDeploymentInfo(deploymentInfo: any) {
+    const instancesDetails = Object.keys(deploymentInfo).map(vmName => {
+      const vmData = deploymentInfo[vmName];
+      const exportInfo = vmData.export_info || {};
+
+      return {
+        id: exportInfo.id || vmName,
+        name: exportInfo.name || vmName,
+        instance_name: exportInfo.instance_name || vmName,
+        firmware_type: exportInfo.firmware_type,
+        num_cpu: exportInfo.num_cpu,
+        memory_mb: exportInfo.memory_mb,
+        os_type: exportInfo.os_type,
+        flavor_name: exportInfo.flavor_name,
+        devices: exportInfo.devices || {},
+      };
     });
+
+    this.setState({ dbInstancesDetails: instancesDetails });
   }
 
   handleUserItemClick(item: { value: string }) {
@@ -547,7 +582,9 @@ class DeploymentDetailsPage extends React.Component<Props, State> {
             <DeploymentDetailsContent
               item={deploymentStore.deploymentDetails}
               itemId={this.props.match.params.id}
-              instancesDetails={instanceStore.instancesDetails}
+              instancesDetails={
+                this.state.dbInstancesDetails || instanceStore.instancesDetails
+              }
               instancesDetailsLoading={
                 instanceStore.loadingInstancesDetails ||
                 endpointStore.storageLoading ||

src/components/smart/TransferDetailsPage/TransferDetailsPage.tsx

@@ -76,6 +76,7 @@ type State = {
   initialLoading: boolean;
   deploying: boolean;
   executing: boolean;
+  dbInstancesDetails: any[];
 };
 @observer
 class TransferDetailsPage extends React.Component<Props, State> {
@@ -95,6 +96,7 @@ class TransferDetailsPage extends React.Component<Props, State> {
     initialLoading: true,
     deploying: false,
     executing: false,
+    dbInstancesDetails: [],
   };
 
   stopPolling: boolean | null = null;
@@ -239,6 +241,14 @@ class TransferDetailsPage extends React.Component<Props, State> {
     return image;
   }
 
+  hasStoredVmInfo(info: any): boolean {
+    return (
+      info &&
+      Object.keys(info).length > 0 &&
+      Object.values(info).some((vmData: any) => vmData.export_info)
+    );
+  }
+
   async loadIsEditable(transferDetails: TransferItemDetails) {
     const targetEndpointId = transferDetails.destination_endpoint_id;
     const sourceEndpointId = transferDetails.origin_endpoint_id;
@@ -317,17 +327,43 @@ class TransferDetailsPage extends React.Component<Props, State> {
       );
     }
 
-    instanceStore.loadInstancesDetails({
-      endpointId: transfer.origin_endpoint_id,
-      instances: transfer.instances.map(n => ({ id: n })),
-      cache: options.cache,
-      quietError: false,
-      env: transfer.source_environment,
-      targetProvider: targetEndpoint?.type,
-    });
+    if (this.hasStoredVmInfo(transfer.info)) {
+      this.populateInstanceStoreFromTransferInfo(transfer.info);
+    } else {
+      instanceStore.loadInstancesDetails({
+        endpointId: transfer.origin_endpoint_id,
+        instances: transfer.instances.map(n => ({ id: n })),
+        cache: options.cache,
+        quietError: false,
+        env: transfer.source_environment,
+        targetProvider: targetEndpoint?.type,
+      });
+    }
+
     return transfer;
   }
 
+  populateInstanceStoreFromTransferInfo(transferInfo: any) {
+    const instancesDetails = Object.keys(transferInfo).map(vmName => {
+      const vmData = transferInfo[vmName];
+      const exportInfo = vmData.export_info || {};
+
+      return {
+        id: exportInfo.id || vmName,
+        name: exportInfo.name || vmName,
+        instance_name: exportInfo.instance_name || vmName,
+        firmware_type: exportInfo.firmware_type,
+        num_cpu: exportInfo.num_cpu,
+        memory_mb: exportInfo.memory_mb,
+        os_type: exportInfo.os_type,
+        flavor_name: exportInfo.flavor_name,
+        devices: exportInfo.devices || {},
+      };
+    });
+
+    this.setState({ dbInstancesDetails: instancesDetails });
+  }
+
   isExecuteDisabled() {
     const transfer = this.transfer;
     if (!transfer) {
@@ -757,7 +793,9 @@ class TransferDetailsPage extends React.Component<Props, State> {
             <TransferDetailsContent
               item={transfer}
               itemId={this.transferId}
-              instancesDetails={instanceStore.instancesDetails}
+              instancesDetails={
+                this.state.dbInstancesDetails || instanceStore.instancesDetails
+              }
               instancesDetailsLoading={
                 instanceStore.loadingInstancesDetails ||
                 endpointStore.storageLoading ||