diff options
Diffstat (limited to 'vid-webpack-master/src/app/drawingBoard/drawing-board-header')
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" + } + ] + } + ] + } + ] + } + |