Visualization of the VF Module Sequencing

Issue-ID: VID-860

In this user story, we plan to allow the user to visually see the sequence numbers when a VF module is added from the left panel of the drawing board onto the right one. Note: The idea that the sequence change when a VF Module is dragged up and down is not part of the scope of this story - we will deliver that separately. This is only about the default sequencing that the drawing board renders when a new VF module is created into the 'instance' part of the drawing board from the 'model' part of the drawing board.

Signed-off-by: ikram <ikram@research.att.com>
Change-Id: Iadd5cef1012f8ef5c670bbd2c46950680a9e6b0e

2 files changed, 20 insertions, 7 deletions

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 0ebee903c..59905bd75 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
@@ -36,6 +36,19 @@
           <div class="failed-msg" [attr.data-tests-id]="'failed-error-message'" *ngIf="node?.data?.isFailed">Failed
           </div>
         </custom-popover>
+        <div *ngIf= "node?.data?.type == 'VFmodule'" class="instance-type" style="position: relative;border: 1px solid #D2D2CD;">
+          <div *ngIf="node?.data?.action == 'Create' && node?.data?.type == 'VFmodule'" class="notShowOnViewMode notShowOnCreateMode newIcon"></div>
+          <div><span title="{{node.data.position}}"
+                     [attr.data-tests-id]="'node-position-indicator'">{{node?.data?.position}}</span></div>
+          <div *ngIf="isLinkedInstance(node?.data)">
+            <custom-icon
+              [ngClass]="'link'"
+              class="icon-link"
+              [size]="'small'"
+              [name]="'link'">
+            </custom-icon>
+          </div>
+        </div>
         <div class="instance-type" style="position: relative;border: 1px solid #D2D2CD;">
           <div *ngIf="node?.data?.action == 'Create'" class="notShowOnViewMode notShowOnCreateMode newIcon"></div>
           <div><span title="{{node.data.type}}"
@@ -67,11 +80,11 @@
           <span>Limit</span><span>{{node?.data?.limitMembers}}</span>
         </div>
         <div class="model-actions notShowOnViewMode" *ngIf="isPaused(node)" style="border-right: none;">
-              <custom-icon
-                [size]="'large'"
-                [name]="'pause-upon-completion'"
-                [testId]="'pause-upon-completion'">
-              </custom-icon>
+          <custom-icon
+            [size]="'large'"
+            [name]="'pause-upon-completion'"
+            [testId]="'pause-upon-completion'">
+          </custom-icon>
         </div>
         <div class="model-actions notShowOnViewMode">
           <span class="icon-browse"
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.ts
index 607519ab3..f7bf35abd 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vfModule/vfModule.model.info.ts
@@ -99,7 +99,7 @@ export class VFModuleModelInfo implements ILevelNodeInfo {
     newVfModule.isFailed = _.isNil(instance.isFailed) ? false : instance.isFailed;
     newVfModule.statusMessage = !_.isNil(instance.statusMessage) ? instance.statusMessage : "";
     newVfModule.pauseInstantiation = instance.pauseInstantiation;
-
+    newVfModule.position = instance.position;
     newVfModule = this._sharedTreeService.addingStatusProperty(newVfModule);
     return newVfModule;
   }
@@ -424,7 +424,7 @@ export class VFModuleModelInfo implements ILevelNodeInfo {
   }
 
   updatePosition(that, node, instanceId, parentStoreKey): void {
-    that.store.dispatch(updateVFModulePosition(node, instanceId, parentStoreKey));
+    this._store.dispatch(updateVFModulePosition(node, instanceId, parentStoreKey));
   }