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>

5 files changed, 49 insertions, 14 deletions

diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts
index 6be5036b2..0e2d8e276 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts
@@ -28,6 +28,7 @@ import {ComponentInfoService} from "../component-info/component-info.service";
 import {ComponentInfoModel} from "../component-info/component-info-model";
 import {ObjectToModelTreeService} from "../objectsToTree/objectToModelTree/objectToModelTree.service";
 import {DrawingBoardModes} from "../drawing-board.modes";
+import {ServiceInstanceActions} from "../../../shared/models/serviceInstanceActions";
 
 @Component({
   selector: 'drawing-board-tree',
@@ -203,6 +204,24 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit {
     return false;
   }
 
+
+
+  isUpgraded(node: ITreeNode): boolean {
+    return this.isLabeledAsAction(node, "Upgrade");
+  }
+
+  isDeleted(node: ITreeNode): boolean {
+    return this.isLabeledAsAction(node, "Delete");
+  }
+
+  private isLabeledAsAction(node: ITreeNode, action) {
+    let nodeAction = node.data.action.split('_').pop();
+    if (!_.isNil(nodeAction)) {
+      return nodeAction === action;
+    }
+    return false;
+  }
+
   public selectNode(node: ITreeNode): void {
     node.expand();
     this._sharedTreeService.setSelectedVNF(node);
@@ -220,6 +239,13 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit {
     this.tree.treeModel.getNodeById(id).parent.expand();
   }
 
+  getcontextMenuOptionLabel(contextMenuOption: TreeNodeContextMenuModel): string{
+    let optionLabel = contextMenuOption.label;
+    if(contextMenuOption.label === ServiceInstanceActions.Upgrade) {
+      return optionLabel.concat(" to V" + this._store.getState().service.serviceInstance[this.serviceModelId].latestAvailableVersion);
+    }
+    return optionLabel;
+  }
 }
 
 
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.html b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.html
index e1d88a696..8db53e808 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.html
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.html
@@ -78,12 +78,12 @@
               <div [attr.data-tests-id]="contextMenuOption.dataTestId">
                 <div style="float: left;margin-top: 3px;">
                   <svg-icon
-                    [ngClass]="contextMenuOption.iconClass"
                     class="icon-edit"
+                    [ngClass]="contextMenuOption.iconClass"
                     [size]="'small'"
                     [name]="contextMenuOption.iconClass">
                 </svg-icon></div>
-                <div style="padding-left: 25px;">{{contextMenuOption.label}}</div>
+                <div style="padding-left: 25px;">{{getcontextMenuOptionLabel(contextMenuOption)}}</div>
               </div>
             </ng-template>
           </context-menu>
@@ -100,16 +100,17 @@
                 [size]="'medium'"
                 [name]="'alert-triangle-o'">
               </svg-icon>
-            </span>
+          </span>
           <span *ngIf="drawingBoardTreeService.isVFModuleMissingData(node, serviceModelId)" class="icon-alert"
                 tooltip="{{ missingDataTooltip }}" tooltipPlacement="left"
                 [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName+'-alert-icon'"></span>
         </div>
 
         <div class="action-status">
-          <span class="action-status-type delete" [attr.data-tests-id]="'delete-status-type'" [ngStyle]="{ 'opacity': node.data.action.split('_').pop() !== 'Delete' ? '0' : '1'}">Delete</span>
+          <span
+            [ngClass]="isUpgraded(node)?'action-status-type upgrade':'action-status-type delete'"
+            [attr.data-tests-id]="isUpgraded(node)?'action-status-type':'delete-status-type'" [ngStyle]="{ 'opacity': isUpgraded(node) || isDeleted(node) ? '1' : '0'}">{{isUpgraded(node)?"Upgrade":"Delete"}}</span>
         </div>
-
       </div>
     </ng-template>
   </tree-root>
@@ -117,3 +118,4 @@
 
 
 
+
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.scss b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.scss
index e08e69e2e..b774e03b6 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.scss
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.scss
@@ -341,15 +341,21 @@ drawing-board-tree {
                   line-height: 42px;
                   width: 95px;
                   min-width: 95px;
-                  .action-status-type.delete {
+                  .action-status-type {
                     background: transparent;
                     font-family: OpenSans-SemiBold;
                     font-size: 12px;
-                    color: red;
                     border-radius: 50px;
                     border: 1px solid gray;
-                    padding: 5px 20px;
+                    padding: 5px 17px;
+                    &.delete {
+                      color: red;
+                    }
+                    &.upgrade{
+                      color: #009FDB;
+                    }
                   }
+
                 }
 
                 .model-info.rightBorder {
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.spec.ts
index b804342c6..e5979f7ed 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.spec.ts
@@ -1,8 +1,5 @@
-import {TestBed, getTestBed} from '@angular/core/testing';
-import {
-  HttpClientTestingModule,
-  HttpTestingController
-} from '@angular/common/http/testing';
+import {getTestBed, TestBed} from '@angular/core/testing';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
 import {NgRedux} from "@angular-redux/store";
 import {DrawingBoardTreeService, TreeNodeContextMenuModel} from "./drawing-board-tree.service";
 import {ITreeNode} from "angular-tree-component/dist/defs/api";
@@ -74,10 +71,12 @@ describe('Drawing board tree Service', () => {
       new TreeNodeContextMenuModel('addGroupMember', 'context-menu-addGroupMember', 'Add group members', 'plus'),
       new TreeNodeContextMenuModel('delete', 'context-menu-delete', 'Delete', 'trash-o'),
       new TreeNodeContextMenuModel('remove', 'context-menu-remove', 'Remove', 'trash-o'),
+      new TreeNodeContextMenuModel('upgrade', 'context-menu-upgrade', 'Upgrade', 'upgrade'),
       new TreeNodeContextMenuModel('undoDelete', 'context-menu-undoDelete', 'Undo Delete', 'undo-delete'),
+      new TreeNodeContextMenuModel('undoUpgrade', 'context-menu-undoUpgrade', 'Undo Upgrade', 'undo-delete'),
       new TreeNodeContextMenuModel('changeAssociations', 'context-menu-changeAssociations', 'Change Associations', 'edit-file-o')
     ];
-    expect(options.length).toEqual(8);
+    expect(options.length).toEqual(10);
     expect(options).toEqual(expected);
   });
 
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.ts
index acf622463..28b6e51b1 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.ts
@@ -42,7 +42,9 @@ export class  DrawingBoardTreeService {
       new TreeNodeContextMenuModel('addGroupMember', 'context-menu-addGroupMember', 'Add group members', 'plus'),
       new TreeNodeContextMenuModel('delete', 'context-menu-delete', 'Delete', 'trash-o'),
       new TreeNodeContextMenuModel('remove', 'context-menu-remove', 'Remove', 'trash-o'),
+      new TreeNodeContextMenuModel('upgrade', 'context-menu-upgrade', 'Upgrade', 'upgrade'),
       new TreeNodeContextMenuModel('undoDelete', 'context-menu-undoDelete', 'Undo Delete', 'undo-delete'),
+      new TreeNodeContextMenuModel('undoUpgrade', 'context-menu-undoUpgrade', 'Undo Upgrade', 'undo-delete'),
       new TreeNodeContextMenuModel('changeAssociations', 'context-menu-changeAssociations', 'Change Associations', 'edit-file-o')
     ];
   }