summaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/drawingBoard/drawing-board-header
diff options
context:
space:
mode:
authorSonsino, Ofir (os0695) <os0695@intl.att.com>2018-07-10 15:57:37 +0300
committerSonsino, Ofir (os0695) <os0695@intl.att.com>2018-07-10 15:57:37 +0300
commitff76b5ed0aa91d5fdf9dc4f95e8b20f91ed9d072 (patch)
treeaae42404a93fdffdd16ff050eaa28129959f7577 /vid-webpack-master/src/app/drawingBoard/drawing-board-header
parentc72d565bb58226b20625b2bce5f0019046bee649 (diff)
New Angular UI from 1806
Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666 Issue-ID: VID-208 Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>
Diffstat (limited to 'vid-webpack-master/src/app/drawingBoard/drawing-board-header')
-rw-r--r--vid-webpack-master/src/app/drawingBoard/drawing-board-header/drawing-board-header.component.html33
-rw-r--r--vid-webpack-master/src/app/drawingBoard/drawing-board-header/drawing-board-header.component.scss95
-rw-r--r--vid-webpack-master/src/app/drawingBoard/drawing-board-header/drawing-board-header.component.ts119
-rw-r--r--vid-webpack-master/src/app/drawingBoard/drawing-board-header/tmp_instansiate_request.ts52
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"
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+