Make Replica/Deployment Details content header pill scenario-appropriate.

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

src/components/smart/DeploymentDetailsPage/DeploymentDetailsPage.tsx

@@ -101,6 +101,15 @@ class DeploymentDetailsPage extends React.Component<Props, State> {
     return deploymentStore.deploymentDetails?.last_execution_status;
   }
 
+  getReplicaTypePillShouldRed(): bool {
+    let should_red = true;
+    let scenario = this.deployment?.replica_scenario_type;
+    if (scenario && scenario === "live_migration") {
+      should_red = false;
+    }
+    return should_red;
+  }
+
   async loadDeploymentAndPollData() {
     const loadDeployment = async () => {
       await endpointStore.getEndpoints({ showLoading: true });
@@ -484,7 +493,8 @@ class DeploymentDetailsPage extends React.Component<Props, State> {
               backLink="/deployments"
               typeImage={deploymentImage}
               dropdownActions={dropdownActions}
-              primaryInfoPill
+              alertInfoPill={this.getReplicaTypePillShouldRed()}
+              primaryInfoPill={!this.getReplicaTypePillShouldRed()}
             />
           }
           contentComponent={

src/components/smart/ReplicaDetailsPage/ReplicaDetailsPage.tsx

@@ -206,7 +206,7 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
     return this.getLastExecution()?.status;
   }
 
-  getReplicaItemType() {
+  getReplicaItemType(): string {
     let item_type = "replica";
     let scenario = this.replica?.scenario;
     if (scenario && scenario === "live_migration") {
@@ -215,7 +215,16 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
     return item_type;
   }
 
-  getReplicaImageType() {
+  getReplicaTypePillShouldRed(): bool {
+    let should_red = true;
+    let scenario = this.replica?.scenario;
+    if (scenario && scenario === "live_migration") {
+      should_red = false;
+    }
+    return should_red;
+  }
+
+  getReplicaScenarioTypeImage(): string {
     let image = replicaImage;
     let scenario = this.replica?.scenario;
     if (scenario && scenario === "live_migration") {
@@ -727,8 +736,9 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
               itemDescription={replica?.description}
               dropdownActions={dropdownActions}
               backLink="/replicas"
-              typeImage={this.getReplicaImageType()}
-              alertInfoPill
+              typeImage={this.getReplicaScenarioTypeImage()}
+              alertInfoPill={this.getReplicaTypePillShouldRed()}
+              primaryInfoPill={!this.getReplicaTypePillShouldRed()}
             />
           }
           contentComponent={