New Angular UI from 1806

Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666
Issue-ID: VID-208
Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>

4 files changed, 299 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/drawingBoard/drawing-board-header/drawing-board-header.component.html b/vid-webpack-master/src/app/drawingBoard/drawing-board-header/drawing-board-header.component.html
new file mode 100644
index 000000000..7d0f7f456
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/drawing-board-header/drawing-board-header.component.html
@@ -0,0 +1,33 @@
+<div class="drawing-board-header">
+  <div class="left-header">
+    <span [attr.data-tests-id]="'backBtn'" class="icon-back" (click)="closePage()"></span>
+    <span [attr.data-tests-id]="'serviceInstance'" class="service-instance-label">Service instance:</span>
+    <span [attr.data-tests-id]="'serviceName'" class="service-instance-name">{{serviceName}}</span>
+    <span class="quantity-container" style="    padding: 10px;font-size: 13px;" tooltip="Number of services to instantiate including all their objects as defined below">
+      <span [attr.data-tests-id]="'quantityLabel'" class="quantity-label" >Scale Times:</span>
+      <span [attr.data-tests-id]="'servicesQuantity'" class="quantity" style="font-family: OpenSans-Semibold;font-size: 14px;"> {{numServicesToDeploy}} </span>
+    </span>
+    <span  class="service-instance-label">status:</span>
+    <span [attr.data-tests-id]="'serviceStatus'" class="status">{{status}}</span>
+  </div>
+  <div class="right-header">
+    <span class="menu-container">
+      <span [attr.data-tests-id]="'openMenuBtn'" class="icon-browse" (click)="onContextMenu($event)"></span>
+      <context-menu>
+        <ng-template contextMenuItem (execute)="editService()">
+          <div [attr.data-tests-id]="'context-menu-header-edit-item'">
+            <span class="icon-edit"></span>
+            Edit
+          </div>
+        </ng-template>
+        <ng-template contextMenuItem (execute)="closePage()">
+          <div [attr.data-tests-id]="'context-menu-header-delete-item'">
+            <span class="icon-trash"></span>
+            Delete
+          </div>
+        </ng-template>
+      </context-menu>
+    </span>
+    <button [disabled]="false" [attr.data-tests-id]="'deployBtn'" (click)="deployMacroservice()" class="deploy-btn">DEPLOY</button>
+  </div>
+</div>
diff --git a/vid-webpack-master/src/app/drawingBoard/drawing-board-header/drawing-board-header.component.scss b/vid-webpack-master/src/app/drawingBoard/drawing-board-header/drawing-board-header.component.scss
new file mode 100644
index 000000000..29b7711bc
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/drawing-board-header/drawing-board-header.component.scss
@@ -0,0 +1,95 @@
+.drawing-board-header {
+  height: 56px;
+  margin-bottom: 4px;
+  position: relative;
+  font-family: OpenSans-Regular;
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  box-shadow: 2px 2px 6px #D2D2D2;
+  color: #191919;
+  [class^="icon-"] {
+    height: 56px;
+    width: 56px;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    color: #5A5A5A;
+    cursor: pointer;
+    &:before {
+      font-size: 18px;
+      width: 100%;
+    }
+    &:hover:before {
+      color: #009FDB;
+    }
+  }
+  .left-header {
+    display: flex;
+    align-items: center;
+    .icon-back {
+      border-right: 1px solid #EAEAEA;
+      &:before {
+        content: "\e906";
+        font-size: 24px;
+      }
+    }
+    .service-instance-label {
+      padding: 0 5px;
+      font-family: OpenSans-Regular;
+      font-size: 13px;
+      color: #191919;
+    }
+    .service-instance-name {
+      padding-right: 20px;
+      color: #191919;
+      font-family: OpenSans-Semibold;
+      background-color: white;
+      font-size: 16px
+    }
+    .status {
+      font-family: OpenSans-Semibold;
+      line-height: 14px;
+      font-size: 14px;
+    }
+  }
+  .right-header {
+    display: flex;
+    align-items: center;
+    .quantity-container {
+      .quantity-label {
+        padding-left: 10px;
+        font-family: OpenSans-Semibold;
+        font-size: 12px;
+      }
+      .quantity {
+        padding: 5px 10px 5px 0;
+        font-family: OpenSans-Semibold;
+        font-size: 18px;
+      }
+    }
+    [class^="icon-"] {
+      border-left: 1px solid #EAEAEA;
+    }
+    .menu-container {
+      height: 100%;
+      display: flex;
+      background: none;
+      border: none;
+      padding: 0;
+      outline: none;
+    }
+    .icon-browse:before {
+      content: '\e924';
+      display: inline-block;
+      font-size: 24px;
+    }
+    .deploy-btn {
+      color: #FFFFFF ;
+      background: #009fdb;
+      width: 128px;
+      height: 100%;
+      border: none;
+    }
+  }
+}
diff --git a/vid-webpack-master/src/app/drawingBoard/drawing-board-header/drawing-board-header.component.ts b/vid-webpack-master/src/app/drawingBoard/drawing-board-header/drawing-board-header.component.ts
new file mode 100644
index 000000000..38284e214
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/drawing-board-header/drawing-board-header.component.ts
@@ -0,0 +1,119 @@
+import {Component, ViewChild} from '@angular/core';
+import {ContextMenuComponent, ContextMenuService} from 'ngx-contextmenu';
+import {DialogService} from 'ng2-bootstrap-modal';
+import {ServicePopupComponent} from '../../components/service-popup/service-popup.component';
+import {MsoService} from '../../services/msoService/mso.service'
+import * as _ from 'lodash';
+import {ActivatedRoute} from '@angular/router';
+import {ServiceInstance} from "../../shared/models/serviceInstance";
+import {OwningEntity} from "../../shared/models/owningEntity";
+import {MessageBoxData, ModalSize, ModalType} from "../../shared/components/messageBox/messageBox.data";
+import {MessageBoxService} from "../../shared/components/messageBox/messageBox.service";
+import {NgRedux} from "@angular-redux/store";
+import {AppState} from "../../store/reducers";
+import {IframeService} from "../../shared/utils/iframe.service";
+
+@Component({
+  selector: 'drawing-board-header',
+  providers: [MsoService],
+  templateUrl: './drawing-board-header.component.html',
+  styleUrls: ['./drawing-board-header.component.scss']
+})
+
+export class DrawingBoardHeader {
+  serviceName: string;
+  numServicesToDeploy: number;
+  status: string = 'Designing a new service';
+  serviceModelId: string;
+  parentElementClassName = 'content';
+
+  constructor(private _contextMenuService: ContextMenuService, private dialogService: DialogService,
+              private _iframeService : IframeService,
+              private route: ActivatedRoute, private msoService: MsoService,
+              private store: NgRedux<AppState>) {
+    this.route
+      .queryParams
+      .subscribe(params => {
+        this.serviceModelId = params['serviceModelId'];
+        if (_.has(this.store.getState().service.serviceHierarchy, this.serviceModelId)) {
+          this.setValuesFromStore();
+          this.store.subscribe(() => {
+            this.setValuesFromStore();
+          });
+        }
+      });
+  }
+
+
+  @ViewChild(ContextMenuComponent) public contextMenu: ContextMenuComponent;
+
+  public onContextMenu($event: MouseEvent, item: any): void {
+    this._contextMenuService.show.next({
+      contextMenu: this.contextMenu,
+      event: $event,
+      item: item,
+    });
+    $event.preventDefault();
+    $event.stopPropagation();
+  }
+
+  private setValuesFromStore() {
+    const serviceInstance = this.store.getState().service.serviceInstance[this.serviceModelId];
+    this.numServicesToDeploy = serviceInstance.bulkSize;
+    this.serviceName = serviceInstance.instanceName || '<Automatically Assigned>';
+
+  }
+
+  public editService(): void {
+    this._iframeService.addClassOpenModal(this.parentElementClassName);
+    this.dialogService.addDialog(ServicePopupComponent, {})
+
+  }
+
+
+  extractOwningEntityNameAccordingtoId(id:String): string {
+    let owningEntityName;
+    _.forEach(this.store.getState().service.categoryParameters.owningEntityList,function(owningEntity: OwningEntity) {
+      if (owningEntity.id === id) {
+        owningEntityName = owningEntity.name;
+
+      }})
+
+    return owningEntityName;
+  }
+
+  extractServiceFields(): any {
+    let instanceFields : ServiceInstance;
+    instanceFields = this.store.getState().service.serviceInstance[Object.keys(this.store.getState().service.serviceInstance)[0]];
+    instanceFields.subscriberName = this.store.getState().service.subscribers.find(sub => sub.id === instanceFields.globalSubscriberId).name;
+    instanceFields.owningEntityName = this.extractOwningEntityNameAccordingtoId(instanceFields.owningEntityId);
+    return instanceFields;
+  }
+
+  public deployMacroservice(): void {
+    var instanceFields = this.extractServiceFields();
+    instanceFields.rollbackOnFailure = instanceFields.rollbackOnFailure === 'true';
+    this.msoService.submitMsoTask(instanceFields).subscribe((result) => {
+      window.parent.postMessage("navigateToInstantiationStatus", '*');
+      })
+  }
+
+  closePage() {
+    let messageBoxData : MessageBoxData = new MessageBoxData(
+         "Delete Instantiation",  // modal title
+      "You are about to stop the instantiation process of this service. \nAll data will be lost. Are you sure you want to stop?",
+
+              ModalType.alert,
+              ModalSize.medium,
+             [
+      {text:"Stop Instantiation", size:"large",  callback: this.navigate.bind(this), closeModal:true},
+      {text:"Cancel", size:"medium", closeModal:true}
+    ]);
+
+    MessageBoxService.openModal.next(messageBoxData);
+  }
+
+  navigate(){
+    window.parent.postMessage("navigateTo", "*");
+  }
+}
diff --git a/vid-webpack-master/src/app/drawingBoard/drawing-board-header/tmp_instansiate_request.ts b/vid-webpack-master/src/app/drawingBoard/drawing-board-header/tmp_instansiate_request.ts
new file mode 100644
index 000000000..7accc3a9c
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/drawing-board-header/tmp_instansiate_request.ts
@@ -0,0 +1,52 @@
+export default
+  {
+    "modelInfo": {
+      "modelType": "service",
+      "modelInvariantId": "5d48acb5-097d-4982-aeb2-f4a3bd87d31b",
+      "modelVersionId": "3c40d244-808e-42ca-b09a-256d83d19d0a",
+      "modelName": "MOW AVPN vMX BV vPE 1 Service",
+      "modelVersion": "10.0"
+    },
+    "owningEntityId": "038d99af-0427-42c2-9d15-971b99b9b489",
+    "owningEntityName": "PACKET CORE",
+    "projectName": "{some project name}",
+    "globalSubscriberId": "{some subscriber id}",
+    "productFamilyId": "a9a77d5a-123e-4ca2-9eb9-0b015d2ee0fb",
+    "instanceName": "vPE_Service",
+    "subscriptionServiceType": "VMX",
+    "lcpCloudRegionId": "mdt1",
+    "tenantId": "88a6ca3ee0394ade9403f075db23167e",
+    "vnfs": [
+      {
+        "modelInfo": {
+          "modelName": "2016-73_MOW-AVPN-vPE-BV-L",
+          "modelVersionId": "7f40c192-f63c-463e-ba94-286933b895f8",
+          "modelCustomizationName": "2016-73_MOW-AVPN-vPE-BV-L 0",
+          "modelCustomizationId": "ab153b6e-c364-44c0-bef6-1f2982117f04"
+        },
+        "lcpCloudRegionId": "mdt1",
+        "tenantId": "88a6ca3ee0394ade9403f075db23167e",
+        "platformName": "test",
+        "productFamilyId": "a9a77d5a-123e-4ca2-9eb9-0b015d2ee0fb",
+        "instanceName": "vmxnjr001",
+        "instanceParams": [],
+        "vfModules": [
+          {
+            "modelInfo": {
+              "modelType": "vfModule",
+              "modelName": "201673MowAvpnVpeBvL..AVPN_base_vPE_BV..module-0",
+              "modelVersionId": "4c75f813-fa91-45a4-89d0-790ff5f1ae79",
+              "modelCustomizationId": "a25e8e8c-58b8-4eec-810c-97dcc1f5cb7f"
+            },
+            "instanceName": "vmxnjr001_AVPN_base_vPE_BV_base_001",
+            "instanceParams": [
+              {
+                "vmx_int_net_len": "24"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+