Add appropriate scenario icon to Replicas/Deployments List pages.

Signed-off-by: Nashwan Azhari <nazhari@cloudbasesolutions.com>

src/@types/MainItem.ts

@@ -94,6 +94,7 @@ type BaseItem = {
 
 export type ReplicaItem = BaseItem & {
   type: "replica";
+  scenario?: string;
 };
 
 export type UserScriptData = {
@@ -118,7 +119,8 @@ export type MigrationItemOptions = MigrationItem & {
 
 export type DeploymentItem = BaseItem & {
   type: "deployment";
-  replica_id?: string;
+  replica_id: string;
+  replica_scenario: string;
 };
 
 export type DeploymentItemOptions = DeploymentItem & {

src/components/modules/TransferModule/TransferListItem/TransferListItem.tsx

@@ -109,7 +109,7 @@ type Props = {
   item: TransferItem;
   onClick: () => void;
   selected: boolean;
-  image: string;
+  getListItemImage: (item: TransferItem) => string;
   showScheduleIcon?: boolean;
   endpointType: (endpointId: string) => string;
   getUserName: (userId: string) => string | undefined;
@@ -122,6 +122,25 @@ class TransferListItem extends React.Component<Props> {
     return this.props.item.last_execution_status;
   }
 
+  getReplicaScenarioType() {
+    let scenario = "";
+    switch(this.props.item.type) {
+      case "replica":
+        scenario = this.props.item.scenario;
+        break;
+      case "deployment":
+        scenario = this.props.item.replica_scenario;
+        break;
+      case "migration":
+        if (this.props.item.replica_id) {
+          scenario = "replica";
+        }
+        break;
+      default:
+    }
+    return scenario;
+  }
+
   renderCreationDate() {
     return (
       <Column
@@ -196,7 +215,7 @@ class TransferListItem extends React.Component<Props> {
           onChange={this.props.onSelectedChange}
         />
         <Content onClick={this.props.onClick}>
-          <Image image={this.props.image} />
+          <Image image={this.props.getListItemImage(this.props.item)} />
           <Title>
             <TitleLabel>{getTransferItemTitle(this.props.item)}</TitleLabel>
             <StatusWrapper>

src/components/smart/DeploymentsPage/DeploymentsPage.tsx

@@ -34,7 +34,8 @@ import { DeploymentItem } from "@src/@types/MainItem";
 import userStore from "@src/stores/UserStore";
 import TransferListItem from "@src/components/modules/TransferModule/TransferListItem";
 import deploymentLargeImage from "./images/deployment-large.svg";
-import deploymentItemImage from "./images/deployment.svg";
+import replicaDeploymentItemImage from "./images/replica-deployment.svg";
+import liveMigrationDeploymentItemImage from "./images/live-migration-deployment.svg"
 
 const Wrapper = styled.div<any>``;
 
@@ -97,6 +98,19 @@ class DeploymentsPage extends React.Component<{ history: any }, State> {
     return deployment ? deployment.last_execution_status : "";
   }
 
+  getDeploymentReplicaType(deploymentId: string): string {
+    const deployment = deploymentStore.deployments.find(m => m.id === deploymentId);
+    return deployment ? deployment.replica_scenario_type : "";
+  }
+
+  getDeploymentItemImage(item: DeploymentItem): string {
+    let image = replicaDeploymentItemImage;
+    if (item.replica_scenario_type === "live_migration") {
+      image = liveMigrationDeploymentItemImage;
+    }
+    return image;
+ }
+
   handleProjectChange() {
     endpointStore.getEndpoints({ showLoading: true });
     deploymentStore.getDeployments({ showLoading: true });
@@ -286,7 +300,9 @@ class DeploymentsPage extends React.Component<{ history: any }, State> {
               renderItemComponent={options => (
                 <TransferListItem
                   {...options}
-                  image={deploymentItemImage}
+                  getListItemImage={item => {
+                    return this.getDeploymentItemImage(item);
+                  }}
                   endpointType={id => {
                     const endpoint = this.getEndpoint(id);
                     if (endpoint) {
@@ -305,7 +321,7 @@ class DeploymentsPage extends React.Component<{ history: any }, State> {
               )}
               emptyListImage={deploymentLargeImage}
               emptyListMessage="It seems like you don't have any Deployments in this project."
-              emptyListExtraMessage="A Coriolis Deployment is a full virtual machine deployment between two cloud endpoints."
+              emptyListExtraMessage="A Coriolis Deployment is a deployment of a Replica between two cloud endpoints."
               emptyListButtonLabel="Create a Deployment"
               onEmptyListButtonClick={() => {
                 this.handleEmptyListButtonClick();

src/components/smart/MigrationsPage/MigrationsPage.tsx

@@ -286,7 +286,7 @@ class MigrationsPage extends React.Component<{ history: any }, State> {
               renderItemComponent={options => (
                 <TransferListItem
                   {...options}
-                  image={migrationItemImage}
+                  getListItemImage={item => migrationItemImage}
                   endpointType={id => {
                     const endpoint = this.getEndpoint(id);
                     if (endpoint) {

src/components/smart/ReplicasPage/ReplicasPage.tsx

@@ -45,6 +45,7 @@ import userStore from "@src/stores/UserStore";
 import TransferListItem from "@src/components/modules/TransferModule/TransferListItem";
 import replicaLargeImage from "./images/replica-large.svg";
 import replicaItemImage from "./images/replica.svg";
+import liveMigrationItemImage from "./images/live-migration.svg";
 
 const Wrapper = styled.div<any>``;
 
@@ -118,6 +119,14 @@ class ReplicasPage extends React.Component<{ history: any }, State> {
     return replica?.last_execution_status || "";
   }
 
+  getReplicaItemImage(item: ReplicaItem): string {
+    let image = replicaItemImage;
+    if (item.scenario === "live_migration") {
+      image = liveMigrationItemImage;
+    }
+    return image;
+ }
+
   handleProjectChange() {
     replicaStore.getReplicas();
     endpointStore.getEndpoints({ showLoading: true });
@@ -441,7 +450,9 @@ class ReplicasPage extends React.Component<{ history: any }, State> {
               renderItemComponent={options => (
                 <TransferListItem
                   {...options}
-                  image={replicaItemImage}
+                  getListItemImage={item => {
+                    return this.getReplicaItemImage(item);
+                  }}
                   showScheduleIcon={this.isReplicaScheduled(options.item.id)}
                   endpointType={id => {
                     const endpoint = this.getEndpoint(id);
@@ -461,7 +472,7 @@ class ReplicasPage extends React.Component<{ history: any }, State> {
               )}
               emptyListImage={replicaLargeImage}
               emptyListMessage="It seems like you don't have any Replicas in this project."
-              emptyListExtraMessage="The Coriolis Replica is obtained by replicating incrementally the virtual machines data from the source cloud endpoint to the target."
+              emptyListExtraMessage="A Coriolis Replica is obtained by replicating incrementally the virtual machines data from the source cloud endpoint to the target."
               emptyListButtonLabel="Create a Replica"
               onEmptyListButtonClick={() => {
                 this.handleEmptyListButtonClick();