Adding feature:  Replace vfmodule

Issue-ID: VID-603
Change-Id: I59068a0979d6fb733e4243c8f78921f396dc9d17
Signed-off-by: Einat Vinouze <einat.vinouze@intl.att.com>
Signed-off-by: Amichai Hemli <amichai.hemli@intl.att.com>
Signed-off-by: Ittay Stern <ittay.stern@att.com>
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.html b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.html
index 4680760..7a18bce 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.html
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.html
@@ -7,7 +7,7 @@
         [testId]="'backBtn'"
         [size]="'large'"
         [name]="'navigation-arrow-back'">
-              </svg-icon>
+      </svg-icon>
     </span>
 
     <div class="header-col middleDetails" style="padding-top: 7px;padding-left: 13px;line-height: 100%;" *ngIf="isServiceFailed">
@@ -38,10 +38,13 @@
     <span [attr.data-tests-id]="'isViewOnly-status-test'" class="service-instance-label purple">{{getModeName()}}</span>
   </div>
 
-
   <div class="right-header">
-    <span class="action-status-type-header delete" [attr.data-tests-id]="'delete-status-type-header'" *ngIf="isDeleted === true">Delete</span>
-    <span class="action-status-type-header resume" [attr.data-tests-id]="'resume-status-type-header'" *ngIf="isResume === true">Resume</span>
+    <span
+      *ngIf = "isUpgrade || isDeleted || isResume"
+      [ngClass] = "isDeleted===true ? 'action-status-type-header delete' : 'action-status-type-header resume'"
+      [attr.data-tests-id]="determineDataTestId()">
+      {{getAction()}}
+    </span>
     <span class="menu-container notShowOnViewMode notShowOnRetryMode">
       <span [attr.data-tests-id]="'openMenuBtn'" class="icon-browse" (click)="onContextMenu($event)"></span>
       <context-menu>
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts
index 51f9053..7923313 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts
@@ -39,12 +39,16 @@
   mode : DrawingBoardModes = DrawingBoardModes.CREATE;
   serviceOrchStatus: string;
   isDeleted: boolean = false;
+  isUpgrade: boolean = false;
   isResume: boolean = false;
   store : NgRedux<AppState>;
   drawingBoardPermissions : DrawingBoardPermissions;
   drawingBoardHeaderService : DrawingBoardHeaderService;
   isServiceFailed: boolean;
   serviceStatusMessage: string;
+  private readonly action: string;
+  private presentedAction: string;
+
   constructor(private _contextMenuService: ContextMenuService, private dialogService: DialogService,
               private _iframeService : IframeService,
               private route: ActivatedRoute, private msoService: MsoService,
@@ -68,6 +72,11 @@
           });
         }
       });
+    if (!_.isNil(this.store.getState().service.serviceInstance[this.serviceModelId].action)){
+      if (this.store.getState().service.serviceInstance[this.serviceModelId].action.includes("Upgrade")) {
+        this.isUpgrade = true;
+      }
+    }
   }
 
 
@@ -114,6 +123,7 @@
       this.serviceOrchStatus =  serviceInstance.orchStatus || "";
       this.isServiceFailed = serviceInstance.isFailed;
       this.serviceStatusMessage = serviceInstance.statusMessage;
+      this.isUpgrade = serviceInstance.isUpgraded;
     }
   }
 
@@ -131,12 +141,25 @@
     });
   }
 
+
+
   onDeleteUndoDeleteClick(){
     this.cancelResume(this.serviceModelId);
     this.isDeleted = !this.isDeleted;
     this._drawingBoardHeaderService.deleteService(this.serviceModelId, this.isDeleted)
   }
 
+  determineDataTestId() :string {
+    switch(true) {
+      case this.isResume:
+        return'resume-status-type-header';
+      case this.isDeleted:
+        return 'delete-status-type-header';
+      case this.isUpgrade:
+        return 'upgrade-status-type-header';
+    }
+  }
+
   onResumeUndoResumeClick(){
     this.cancelDelete(this.serviceModelId);
     this.isResume = !this.isResume;
@@ -174,9 +197,14 @@
       instanceFields.subscriberName = this.store.getState().service.subscribers.find(sub => sub.id === instanceFields.globalSubscriberId).name;
       instanceFields.owningEntityName = this.extractOwningEntityNameAccordingtoId(instanceFields.owningEntityId);
     }
-    return _.omit(instanceFields,'optionalGroupMembersMap');
+    return _.omit(instanceFields,['optionalGroupMembersMap', 'upgradedVFMSonsCounter', 'isUpgraded', 'latestAvailableVersion']);
   }
 
+  private getAction(): string {
+    if(!_.isNil(this.store.getState().service.serviceInstance[this.serviceModelId].action))
+      return this.store.getState().service.serviceInstance[this.serviceModelId].action.split('_').pop();
+    return;
+  }
 
   public deployService(): void {
       let instanceFields = this.extractServiceFields();
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.ts
index 7df2f3a..1b71d90 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.ts
@@ -36,6 +36,15 @@
     }
   }
 
+  upgradeService(serviceModelId: string, isUpgraded: boolean ) {
+    if(isUpgraded){
+      this.store.dispatch(addServiceAction(serviceModelId, ServiceInstanceActions.Upgrade));
+    }
+    else{
+      this.store.dispatch(addServiceAction(serviceModelId, ServiceInstanceActions.None));
+    }
+  }
+
   showAuditInfo(serviceModelId) : void {
     let instance: ServiceInstance = this.store.getState().service.serviceInstance[serviceModelId];
     let model =  new ServiceModel(this.store.getState().service.serviceHierarchy[serviceModelId]);