diff options
author | Skip Wonnell <skip@att.com> | 2018-03-01 08:30:15 -0600 |
---|---|---|
committer | Skip Wonnell <skip@att.com> | 2018-03-01 08:33:56 -0600 |
commit | 2c977e2b66ced314a4f51121801f62fe5c3c05e4 (patch) | |
tree | d93b360d7a6502a6aff1f30ba7f96c3e14f8911c /src/app/vnfs/build-artifacts/reference-dataform | |
parent | 912f105d12fe6f8dc3a2d409938c87016204debe (diff) |
Initial seed code contribution for CDT
Issue-ID: APPC-682
Change-Id: I0331ffce2a430195c29d0d1b2295966f9eb28699
Signed-off-by: Skip Wonnell <skip@att.com>
Diffstat (limited to 'src/app/vnfs/build-artifacts/reference-dataform')
4 files changed, 1800 insertions, 0 deletions
diff --git a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.css b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.css new file mode 100644 index 0000000..1b4c470 --- /dev/null +++ b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.css @@ -0,0 +1,137 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2018 AT&T Intellectual Property. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. + +ECOMP is a trademark and service mark of AT&T Intellectual Property. +============LICENSE_END============================================ +*/ + +.form-group { + padding: 5px +} + +.panel { + margin-top: 20px; +} + +.form-control { + width: 100%; +} + +.panel-header { + padding: 20px 0px; +} + +.container { + border-radius: 0.375rem; + transition: all 0.3s ease; + padding: 40px; +} + +.container2 { + box-shadow: -4px 14px 20px 0px rgba(46, 61, 73, 0.15); + border-radius: 0.375rem; + transition: all 0.3s ease; + padding: 10px; + margin-top: 57px; +} + +.error-message { + color: red; +} + +.create-wrapper { + text-align: left; +} + +.removevnfcClass { + text-align: right; +} + +.form-custom-group { + margin-bottom: 0; + vertical-align: middle; +} + +.side-by-side { + position: relative; +} + +.sidebtn { + position: absolute; + left: 26.5em; + top: 0em; +} + +.clear-control { + margin: 40px 20px; + display: inherit; +} + +.short-column { + width: 100px; +} + +.long-column { + width: 200px; +} + +th, +td { + min-width: 150px; +} + +.headlinesInBold { + font-weight: bold; +} + +.titleCustom { + padding-left: 25px; + overflow: visible; +} + +.anchorHover { + cursor: pointer; +} + +.custom-btn { + margin-top: 20px; + margin-bottom: 10px; +} + +.clear-btn { + margin-top: 23px; +} + +.col-md-button { + margin: auto; + margin-right: 20px; + text-align: center; + margin-bottom: 15px; +} + +.selectedAction { + /* change here */ + font-weight: bold; + color: #1A86E4 +} + +.file { + visibility: hidden; + position: absolute; +}
\ No newline at end of file diff --git a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html new file mode 100644 index 0000000..d38620a --- /dev/null +++ b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html @@ -0,0 +1,354 @@ +<!-- +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2018 AT&T Intellectual Property. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. + +ECOMP is a trademark and service mark of AT&T Intellectual Property. +============LICENSE_END============================================ +--> + +<simple-notifications [options]="options"></simple-notifications> +<ng-progress [positionUsing]="'marginLeft'" [minimum]="0.15" [maximum]="1" [speed]="200" [showSpinner]="false" [direction]="'leftToRightIncreased'" [color]="'#6ab344'" + [trickleSpeed]="250" [thick]="true" [ease]="'linear'"></ng-progress> +<form class="" novalidate #userForm="ngForm" (ngSubmit)="save(userForm.value,userForm.valid)"> + <div class="card"> + + <div class="card-block" style=" border-top: 5px solid #6ab344; border-top-right-radius: 7px;border-top-left-radius: 7px;"> + <div class="row" style="padding: 15px 25px"> + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> + <label>Action*</label> + <select class="form-control" required id="cmbAction" [(ngModel)]="referenceDataObject.action" (ngModelChange)="updateSessionValues($event,'action');actionChange($event,content,userForm);" + #action="ngModel" name="action"> + <option [value]="actionType" + [ngClass]="{'selectedAction':selectedActions.indexOf(actionType)>-1}" + [selected]="referenceDataObject.action===actionType" + *ngFor="let actionType of actions ">{{actionType}} + </option> + </select> + + </div> + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> + <label>VNF Type* </label> + <input type="text" [readonly]="updateParams !='undefined' || vnfParams?.vnfType " class="form-control" id="txtVnfType" required [(ngModel)]="referenceDataObject['scope']['vnf-type']" + (ngModelChange)="updateSessionValues($event,'vnfType')" #vnftype="ngModel" name="vnftype"> + <span class="error-message" [hidden]="vnfParams?.vnfType || vnftype.valid || (vnftype.pristine && !userForm.submitted)">Required Field</span> + </div> + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> + <label>VNFC Type</label> + <input type="text" class="form-control" [disabled]="nonConfigureAction || updateParams !='undefined' || vnfParams?.vnfType" id="txtVnfcType" [(ngModel)]="referenceDataObject.scope['vnfc-type']" + (blur)="setVnfcType($event.target.value)" (ngModelChange)="updateSessionValues($event,'vnfcType')" #vnfcType="ngModel" name="vnfcType" + disabled="disabled"> + </div> + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> + <label>Device Protocol*</label> + <select class="form-control" required id="txtDeviceProtocol" [(ngModel)]="referenceDataObject['device-protocol']" #deviceProtocol="ngModel" name="deviceProtocol"> + <option [value]="device" [selected]="referenceDataObject.deviceProtocol===device" + *ngFor="let device of deviceProtocols">{{device}} + </option> + </select> + + </div> + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="referenceDataObject['action']== 'ConfigScaleOut'"> + <label>Template Identifier</label> + <select class="form-control" required id="tempIdentifier" (ngModelChange)="dataModified()" [(ngModel)]="templateIdentifier" #deviceProtocol="ngModel" name="templateIdentifier"> + <option [value]="val" *ngFor="let val of referenceDataObject['template-id-list']">{{val}} + </option> + </select> + <span class="error-message" [hidden]="deviceProtocol.valid || (deviceProtocol.pristine && !userForm.submitted)">Required Field</span> + </div> + + <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="referenceDataObject['action']== 'ConfigScaleOut'" style="margin-top: 30px"> + <span *ngIf="referenceDataObject.action === 'ConfigScaleOut'"> <a style=" color: blue;" + href="javascript:void(0)" + (click)="showIdentifier()">Assign New Template Identifier</a></span> + + </div> + </div> + <div class="col-12" *ngIf="!(referenceDataObject.action === 'OpenStack Actions')"> + <div class="input-group"> + <input id="inputFile" class="file" #myInput type='file' (change)="fileChange($event)"> + <input [(ngModel)]="fileName" type="text" class="input-lg" disabled placeholder="Upload Reference File from PC" name="browse" style="width:80%"> + <button (click)="browseOption($event)" class="browse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary input-lg" type="button">Upload Reference File + </button> + </div> + </div> + <div class="col-12" *ngIf="referenceDataObject.action === 'OpenStack Actions'"> + <div class="input-group"> + <input id="excelInputFile" #myInput1 class="file" type="file" (change)="upload($event)"> + <input [(ngModel)]="uploadFileName" type="text" class="input-lg" disabled placeholder="Upload VM Capabilities File" name="uploadFileName" style="width:80%"> + <button (click)="excelBrowseOption($event)" class="browse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary input-lg" + type="button">Upload VM Capabilities File + </button> + </div> + </div> + </div> + <div class="card-block" style="padding: 10px"> + <div> + <div class="create-wrapper" style="padding: 0px 25px"> + <div class="row" style="margin-bottom: 30px"> + <div class=" col-6"> + + </div> + <div class="text-right col-6"> + <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="submit">Download All To PC + </button>   + <button id="saveToAppc" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="button" (click)="saveToAppc(userForm.valid, userForm)">Save All to APPC + </button>   + </div> + </div> + <div class="row"> + <div class="col-12"> + <div class="row" *ngIf="!(referenceDataObject.action === 'OpenStack Actions')"> + <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12"> + <label>Template</label> + <select class="form-control" id="txtDeviceProtocol" [(ngModel)]="referenceDataObject['template']" #template="ngModel" name="template"> + <option [value]="template" *ngFor="let template of deviceTemplates"> + {{template}} + </option> + </select> + </div> + <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12"> + <label>User Name</label> + <input type="text" class="form-control" id="txtIpaddress" [(ngModel)]="referenceDataObject['user-name']" name="loginUserName"> + </div> + <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12"> + <label>Port Number</label> + <input type="text" class="form-control" id="txtIpaddress" [(ngModel)]="referenceDataObject['port-number']" name="portNumber"> + </div> + <div *ngIf="actionHealthCheck && referenceDataObject['device-protocol'] =='REST' " class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> + <label>Context Url</label> + <input type="text" class="form-control" id="txtIpaddress" [(ngModel)]="referenceDataObject['context-url']" name="portNumber"> + </div> + </div> + <div class="card-block" *ngIf="(referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action =='' || referenceDataObject.action ==undefined)" + style="border-top: 5px solid #6ab344;border-top-right-radius: 7px;border-top-left-radius: 7px;"> + <div class="col-12"> + <h5 style="margin-top: 0.5rem;font-family: Roboto"> VNFC Information + <span class="pull-right"> + <i (click)="isCollapsedContent = !isCollapsedContent" + [ngClass]="{'fa-minus-circle':isCollapsedContent,'fa-plus-circle':!isCollapsedContent}" + class="fa" aria-hidden="true"></i> + </span> + </h5> + </div> + </div> + <div class="row" *ngIf="(( referenceDataObject.action =='ConfigScaleOut' ||referenceDataObject.action =='Configure'|| referenceDataObject.action =='' || referenceDataObject.action ==undefined ) && isCollapsedContent) "> + <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12"> + <label style="font-size:12px;">VNFC Type*</label> + <input type="text" class="form-control" id="txtVnfcTypeInColl" [(ngModel)]="Sample['vnfc-type']" #vnfcType="ngModel" name="samplevnfcType"> + </div> + <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12"> + <label style="font-size:12px">VNFC Function Code*</label> + <input type="text" class="form-control" id="txtVnfcFunctionCode" [(ngModel)]="Sample['vnfc-function-code']" #vnfcFunctionCode="ngModel" name="samplevnfcFunctionCode"> + </div> + <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12"> + <label style="font-size:12px;">IPAddress V4 OAM VIP</label> + <select class="form-control" id="cmbIpAddedBoo" [(ngModel)]="Sample['ipaddress-v4-oam-vip']" name="sampleIpaddress"> + <option [value]="hasIp" *ngFor="let hasIp of ipAddressBoolean">{{hasIp}} + </option> + </select> + </div> + <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12"> + <label style="font-size:12px;">Group Notation Type</label> + <select class="form-control" id="cmbGroupType" [(ngModel)]="Sample['group-notation-type']" name="sampleGroupNotation"> + <option [value]="type" *ngFor="let type of groupAnotationType">{{type}}</option> + </select> + </div> + <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12"> + <label style="font-size:12px;">Group Notation Value</label> + <input type="text" class="form-control" id="txtGroupValue" [(ngModel)]="Sample['group-notation-value']" name="sampleGroupValue"> + </div> + <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12"> + <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent clear-btn" (click)="clearVnfcData()">Clear VNFC Info + </button> + </div> + </div> + <hr> + <div *ngIf="(referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action =='' )" class="row"> + <div class="col-lg-2 col-md-2 hdden-sm-down"> + <label style="margin-top: 17px;" class="headlinesInBold"> Number Of VM(s): </label> + </div> + <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6"> + <div class="form-group"> + <input type="text" placeholder="Number of VM(s)" class="form-control" id="txtVmnumber22" [(ngModel)]="refernceScopeObj.from" (ngModelChange)="numberValidation($event)" + name="txtNumber23"> + </div> + </div> + <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6 text-right"> + <div class="form-group"> + <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="button" [disabled]="!refernceScopeObj.from || !numberOfVmTest" + (click)="addVms()">Add VM Information + </button> + </div> + </div> + </div> + <div *ngIf="referenceDataObject.vm?.length>0"> + <div class="row" *ngFor="let noOfvm of referenceDataObject.vm | vmFiltering:referenceDataObject?.action:templateIdentifier; let j=index"> + <div *ngIf="((referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action =='' || referenceDataObject.action ==undefined ))" + class="col-12"> + <div class="row" *ngFor="let item of noOfvm.vnfc; let i=index"> + <div class="col-md-12" *ngIf="i==0"> + <h5 class="headlinesInBold">VM Number: {{j+1}}</h5> + </div> + <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12"> + <label style="font-size:12px;">VNFC Instance No.</label> + <input type="text" class="form-control" id="txtVmnumber" disabled='true' [(ngModel)]="item['vnfc-instance']" name="vmNumber{{j}}"> + </div> + <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12"> + <label style="font-size:12px;">VNFC Type*</label> + <input type="text" class="form-control" id="txtVnfcTypeInColl" required [(ngModel)]="item['vnfc-type']" #vnfcType="ngModel" name="vnfcType{{j}}"> + <span class="error-message" [hidden]="vnfcType.valid || (vnfcType.pristine && !userForm.submitted)">Required Field</span> + </div> + <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12"> + <label style="font-size:12px;">VNFC Function Code*</label> + <input type="text" class="form-control" id="txtVnfcFunctionCode" required [(ngModel)]="item['vnfc-function-code']" #vnfcFunctionCode="ngModel" name="vnfcFunctionCode{{j}}"> + <span class="error-message" [hidden]="vnfcFunctionCode.valid || (vnfcFunctionCode.pristine && !userForm.submitted)">Required Field</span> + </div> + <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12"> + <label style="font-size:12px;">IPAddress V4 OAM VIP</label> + <select class="form-control" id="cmbIpAddress" [(ngModel)]="item['ipaddress-v4-oam-vip']" name="ipaddress{{j}}"> + <option [value]="hasIP" [selected]="item.ipAddressBoolean===hasIP" + *ngFor="let hasIP of ipAddressBoolean">{{hasIP}} + </option> + </select> + </div> + <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12"> + <label style="font-size:12px;">Group Notation Type</label> + <select class="form-control" id="cmbGroupType" [(ngModel)]="item['group-notation-type']" name="selectedGroupType{{j}}"> + <option [value]="type" [selected]="item.groupNotationType===type" + *ngFor="let type of groupAnotationType">{{type}} + </option> + </select> + </div> + <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12"> + <label style="font-size:12px;">Group Notation Value</label> + <input type="text" class="form-control" id="txtGroupValue" [(ngModel)]="item['group-notation-value']" name="selectedGroupValue{{j}}"> + </div> + <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> + <div class="removevnfcClass" *ngIf="refernceScopeObj.sourceType !='vnfcType'"> + <a role="button" style="color: white" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="removeFeature(j,i)">Remove Vm</a> + </div> + <div> + <a *ngIf="(referenceDataObject.vm[j].vnfc.length-1) == i " [hidden]="true" role="button" (click)="addVnfcData(j)">Add VNFC + Information</a> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="row" *ngIf="(referenceDataObject.action === 'OpenStack Actions')"> + <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> + <div class="table-responsive" style="height:auto; overflow: auto;"> + <table> + <thead> + <tr> + <td *ngFor="let item of firstArrayElement"> + <div> + <h1 style="font-size: 110%"> {{item}} </h1> + </div> + </td> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of remUploadedDataArray; let i=index"> + <td *ngFor="let subItem of item; let j=index"> + {{subItem}} + </td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </div> + </div> + </div> + </div> +</form> +<!-- Modal --> +<div id="messageModal" class="modal fade" role="dialog"> + <div class="modal-dialog"> + <!-- Modal content--> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="android-more-button mdl-button mdl-js-button mdl-button--accent" data-dismiss="modal">× + </button> + <h4 class="modal-title">Warning</h4> + </div> + <div class="modal-body"> + <div *ngIf="allowAction==false" class="alert alert-danger"> + <b> Configure </b> action not yet saved + </div> + <div *ngIf="actionExist" class="alert alert-danger"> + <b> {{referenceDataObject.action}}</b> already exists. Please continue... + </div> + </div> + <div class="modal-footer"> + <button type="close" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" data-dismiss="modal">Close + </button> + </div> + </div> + </div> +</div> +<div id="identifierModal" class="modal fade" role="dialog"> + <div class="modal-dialog"> + <!-- Modal content--> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="android-more-button mdl-button mdl-js-button mdl-button--accent" data-dismiss="modal">× + </button> + <h4 class="modal-title">Enter New Template Identifier</h4> + </div> + <div class="modal-body"> + <div> + <div> + <input name="test" type="text" class="" [(ngModel)]="templateId" placeholder="identifier"> + </div> + <div> + <button style="padding: 10px" class="btn btn-primary" data-dismiss="modal" (click)="addToIdentDrp()">submit + </button> + <button style="padding: 10px" class="btn btn-primary" (click)="templateId=''" data-dismiss="modal">cancel + </button> + </div> + </div> + </div> + <div class="modal-footer"> + + </div> + </div> + </div> +</div> +<ng-template #content let-c="close" let-d="dismiss"> + <div class="modal-header"> + <h6 class="modal-title">Save all changes for current action to APPC database.</h6> + <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + <p>Do you want to save the changes?</p> + </div> + <div class="modal-footer"> + <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="c('no')">No + </button> + <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="c('yes')">Yes + </button> + </div> +</ng-template>
\ No newline at end of file diff --git a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.spec.ts b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.spec.ts new file mode 100644 index 0000000..67ba8f5 --- /dev/null +++ b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.spec.ts @@ -0,0 +1,67 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2018 AT&T Intellectual Property. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. + +ECOMP is a trademark and service mark of AT&T Intellectual Property. +============LICENSE_END============================================ +*/ + +/* tslint:disable:no-unused-variable */ +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; +import {NO_ERRORS_SCHEMA} from '@angular/core'; +import {ReferenceDataformComponent} from './reference-dataform.component'; +import {FormsModule} from '@angular/forms'; +import { NotificationService } from '../../../shared/services/notification.service'; +import { ParamShareService } from '../../..//shared/services/paramShare.service'; +import { MappingEditorService } from '../../..//shared/services/mapping-editor.service'; +import {DialogService} from 'ng2-bootstrap-modal'; +import {RouterTestingModule} from '@angular/router/testing'; +import { HttpUtilService } from '../../../shared/services/httpUtil/http-util.service'; +import { NgModule } from '@angular/core'; +import { NgProgress } from 'ngx-progressbar'; +import { HttpModule } from '@angular/http'; +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; +import { SharedModule } from '../../../shared/shared.module'; + + +describe('ReferenceDataformComponent', () => { + let component: ReferenceDataformComponent; + let fixture: ComponentFixture<ReferenceDataformComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ReferenceDataformComponent], + schemas: [NO_ERRORS_SCHEMA], + imports: [FormsModule, RouterTestingModule,HttpModule,NgbModule.forRoot()], + providers: [NgProgress, ParamShareService, DialogService, NotificationService, HttpUtilService, MappingEditorService] + + }) + .compileComponents(); + })); + + beforeEach(() => { + + fixture = TestBed.createComponent(ReferenceDataformComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create reference component', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.ts b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.ts new file mode 100644 index 0000000..c66a003 --- /dev/null +++ b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.ts @@ -0,0 +1,1242 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2018 AT&T Intellectual Property. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. + +ECOMP is a trademark and service mark of AT&T Intellectual Property. +============LICENSE_END============================================ +*/ +import * as XLSX from 'xlsx'; +import * as _ from 'underscore'; +import { ActivatedRoute, Router } from '@angular/router'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { BuildDesignComponent } from '../build-artifacts.component'; +import { HttpUtilService } from '../../../shared/services/httpUtil/http-util.service'; +import { Location } from '@angular/common'; +import { MappingEditorService } from '../../..//shared/services/mapping-editor.service'; +import { ModalComponent } from '../../../shared/modal/modal.component'; +import { NotificationService } from '../../../shared/services/notification.service'; +import { NotificationsService } from 'angular2-notifications'; +import { ParamShareService } from '../../..//shared/services/paramShare.service'; +import { environment } from '../../../../environments/environment'; +import { saveAs } from 'file-saver'; +import { NgProgress } from 'ngx-progressbar'; + + +declare var $: any; +type AOA = Array<Array<any>>; + +@Component({ + selector: 'reference-dataform', + templateUrl: './reference-dataform.component.html', + styleUrls: ['./reference-dataform.component.css'] +}) +export class ReferenceDataformComponent implements OnInit { + @ViewChild(ModalComponent) modalComponent: ModalComponent; + public showUploadStatus: boolean = false; + public fileUploaded: boolean = false; + public uploadedData: any; + public statusMsg: string; + public uploadStatus: boolean = false; + public isCollapsedContent: boolean = true; + public vnfcCollLength: number = 0; + public vfncCollection = []; + public userForm: any; + public actionType: any; + numberTest: RegExp = /^[^.a-z]+$/; + public numberOfVmTest: boolean = true; + public tempAllData = []; + public noRefData = false; + public disableRetrieve = false; + public getRefStatus = false; + public uploadStatusError: boolean; + public showUploadErrorStatus: boolean; + public noData: string; + selectedActions = []; + public appData = { reference: {}, template: { templateData: {}, nameValueData: {} }, pd: {} }; + public downloadData = { + reference: {}, + template: { templateData: {}, nameValueData: {}, templateFileName: '', nameValueFileName: '' }, + pd: { pdData: '', pdFileName: '' } + }; + fileName: any; + public uploadFileName: any; + public addVmClickedFlag: boolean = false; + public getExcelUploadStatus: boolean = false; + public uploadedDataArray: any; + public actionFlag = false; + currentAction: any; + oldAction: any; + nonConfigureAction: any; + templateId; + templateIdentifier; + public actionLevels = [ + 'vnfc', 'vnf' + ]; + + identifierDrp: any; + identifierDrpValues: any = []; + //settings for the notifications. + options = { + timeOut: 1000, + showProgressBar: true, + pauseOnHover: true, + clickToClose: true, + maxLength: 200 + }; + //initializing this object to contain all the parameters to be captured + public referenceDataObject = { + action: '', + 'action-level': 'vnf', + scope: { 'vnf-type': '', 'vnfc-type': '' }, + 'template': 'Y', + vm: [], + 'device-protocol': '', + 'user-name': '', + 'port-number': '', + 'artifact-list': [] + }; + public refernceScopeObj = { sourceType: '', from: '', to: '' }; + public actions = ['', 'Configure', 'ConfigModify', 'ConfigBackup', 'ConfigRestore', 'GetRunningConfig', 'HealthCheck', 'StartApplication', 'StopApplication', 'QuiesceTraffic', 'ResumeTraffic', 'UpgradeBackout', 'UpgradeBackup', 'UpgradePostCheck', 'UpgradePreCheck', 'UpgradeSoftware', 'OpenStack Actions', 'ConfigScaleOut']; + public groupAnotationValue = ['', 'Pair']; + public groupAnotationType = ['', 'first-vnfc-name', 'fixed-value', 'relative-value']; + public deviceProtocols = ['', 'ANSIBLE', 'CHEF', 'NETCONF-XML', 'REST', 'CLI', 'RESTCONF']; + public deviceTemplates = ['', 'Y', 'N']; + public sourceTypeColl = ['', 'vnfType', 'vnfcType']; + public ipAddressBoolean = ['', 'Y', 'N']; + public Sample: any = { + 'vnfc-instance': '1', + 'vnfc-function-code': '', + 'ipaddress-v4-oam-vip': '', + 'group-notation-type': '', + 'group-notation-value': '' + }; + hideModal: boolean = false; + public self: any; + public uploadTypes = [{ + value: 'Reference Data', + display: 'Sample Json Param File' + }, + { + value: 'Mapping Data', + display: 'Sample Json Param File' + } + ]; + public selectedUploadType: string = this.uploadTypes[0].value; + public vnfcTypeData: string = ''; + public title: string; + public allowAction: boolean = true; + public actionExist: boolean = false; + public disableVnftype: boolean = false; + public otherActions: boolean = false; + public actionHealthCheck: boolean = false; + public actionChanged: boolean = false; + public initialAction: string = ''; + public noCacheData: boolean; + public updateParams: any; + public vnfParams: any; + public firstArrayElement = []; + public remUploadedDataArray = []; + + constructor (private buildDesignComponent: BuildDesignComponent, private httpUtils: HttpUtilService, private route: Router, private location: Location, private activeRoutes: ActivatedRoute, private notificationService: NotificationService, + private paramShareService: ParamShareService, private mappingEditorService: MappingEditorService, private modalService: NgbModal, private nService: NotificationsService, private ngProgress: NgProgress) { + } + + ngOnInit() { + this.self = this; + let path = this.location.path; + this.title = 'Reference Data'; + this.referenceDataObject = { + action: '', + 'action-level': 'vnf', + scope: { 'vnf-type': '', 'vnfc-type': '' }, + 'template': 'Y', + vm: [], + 'device-protocol': '', + 'user-name': '', + 'port-number': '', + 'artifact-list': [] + }; + this.updateParams = sessionStorage.getItem('updateParams'); + let cacheData = this.mappingEditorService.referenceNameObjects; + if (cacheData != undefined && cacheData != null && cacheData.length > 0) { + this.tempAllData = cacheData; + if (this.mappingEditorService.latestAction != undefined) { + this.referenceDataObject = this.mappingEditorService.latestAction; + //this.referenceDataObject['template-id-list'] = this.mappingEditorService.identifier + //use these commented objects to be used in template and pd pages + //this.templateIdentifier = this.mappingEditorService.identifier + this.refernceScopeObj.sourceType = this.referenceDataObject['scopeType']; + this.oldAction = this.referenceDataObject.action; + this.populateExistinAction(this.referenceDataObject.action); + } + } else if (this.updateParams != 'undefined') { + this.getArtifact(); + } + var appData = this.mappingEditorService.appDataObject; + if (appData != null || appData != undefined) this.appData = appData; + var downloadData = this.mappingEditorService.downloadDataObject; + if (downloadData != null || downloadData != undefined) this.downloadData = downloadData; + this.vnfParams = JSON.parse(sessionStorage.getItem('vnfParams')); + if (this.vnfParams && this.vnfParams.vnfType) { + this.referenceDataObject['scope']['vnf-type'] = this.vnfParams.vnfType; + } + if (this.vnfParams && this.vnfParams.vnfcType) { + this.referenceDataObject['scope']['vnfc-type'] = this.vnfParams.vnfcType; + } + this.uploadedDataArray = []; + this.remUploadedDataArray = []; + this.firstArrayElement = []; + this.uploadFileName = ''; + this.templateIdentifier = this.mappingEditorService.identifier + //this.tempAllData = []; + } + + //to retrive the data from appc and assign it to the vaiables, if no data display the message reterived from the API + getArtifact() { + try { + let payload = JSON.parse(sessionStorage.getItem('updateParams')); + payload['userID'] = localStorage['userId']; + payload = JSON.stringify(payload); + let data = { + 'input': { + 'design-request': { + 'request-id': localStorage['apiToken'], + 'action': 'getArtifact', + 'payload': payload + } + } + }; + this.ngProgress.start(); + this.httpUtils.post({ + url: environment.getDesigns, + data: data + }).subscribe(resp => { + if (resp.output.data.block != undefined) { + this.nService.success('Status', 'data fetched '); + let artifactInfo = JSON.parse(resp.output.data.block).artifactInfo[0]; + let reference_data = JSON.parse(artifactInfo['artifact-content'])['reference_data'][0]; + this.referenceDataObject = reference_data; + console.log('reference data obj==' + JSON.stringify(this.referenceDataObject)); + this.refernceScopeObj.sourceType = this.referenceDataObject['scopeType']; + this.mappingEditorService.getReferenceList().push(JSON.parse(artifactInfo['artifact-content'])); + this.tempAllData = JSON.parse(artifactInfo['artifact-content'])['reference_data']; + this.oldAction = this.referenceDataObject.action; + if (this.referenceDataObject.action === 'OpenStack Actions') { + this.deviceProtocols = ['', 'OpenStack']; + this.buildDesignComponent.tabs = [ + { + + name: 'Reference Data', + url: 'references', + }]; + } + else { + this.buildDesignComponent.tabs = [ + { + name: 'Reference Data', + url: 'references', + }, { + name: 'Template', + url: 'templates/myTemplates', + }, { + name: 'Parameter Definition', + url: 'parameterDefinitions/create' + }/*, { + name: "Test", + url: 'test', + }*/ + ]; + } + console.log('tempalldata===' + JSON.stringify(this.tempAllData)); + } else { + this.nService.success('Status', 'Sorry !!! I dont have any artifact Named : ' + (JSON.parse(payload))['artifact-name']); + } + this.ngProgress.done(); + }); + } + catch (e) { + this.nService.warn('status', 'error while reteriving artifact'); + } + setTimeout(() => { + this.ngProgress.done(); + }, 3500); + } + + //reinitializing the required values + ngOnDestroy() { + let referenceObject = this.prepareReferenceObject(); + this.mappingEditorService.changeNavAppData(this.appData); + this.mappingEditorService.changeNavDownloadData(this.downloadData); + this.uploadedDataArray = []; + this.remUploadedDataArray = []; + this.firstArrayElement = []; + this.uploadFileName = ''; + // this.tempAllData = []; + console.log('temp all data===' + JSON.stringify(this.tempAllData)); + } + + numberValidation(event: any) { + // console.log(this.numberTest.test(event)); + if (this.numberTest.test(event) && event != 0) { + this.numberOfVmTest = true; + } + else { + this.numberOfVmTest = false; + } + } + + updateSessionValues(event: any, type: string) { + if (type === 'action') { + sessionStorage.setItem('action', event); + } + if (type === 'vnfType') { + sessionStorage.setItem('vnfType', event); + } + } + + checkConfigure(data) { + if (data == null) { + return; + } + if (this.fileUploaded && this.actionType == 'update') { + let refObject = this.uploadedData.find(obj => { + return obj.action == data; + }); + this.referenceDataObject = JSON.parse(JSON.stringify(refObject)); + if (data == 'HealthCheck') { + //show additional fileds user name port number and others + this.actionHealthCheck = true; + } else { + this.actionHealthCheck = false; + if (data == 'StartApplication' || data == 'StopApplication') { + this.disableVnftype = true; + } else { + + this.otherActions = true; + } + } + return; + } + this.buildDesignComponent.updateAccessUpdatePages(data, this.mappingEditorService.getReferenceList()); + let configureObject = _.find(this.tempAllData, function (obj) { + return obj['action'] == 'Configure'; + }); + if (data != 'Configure') { + if (!configureObject) { + this.allowAction = false; + $('#messageModal').modal(); + } else { + this.allowAction = true; + } + if (this.referenceDataObject.action == 'Configure') { + this.allowAction = true; + } + } + //dont allow any action second time + let y = _.find(this.tempAllData, function (obj) { + return obj['action'] == data; + }); + if (y) { + this.actionExist = true; + $('#messageModal').modal(); + } else { + this.actionExist = false; + } + //populate configure values for other actions + if (data != 'Configure' && configureObject != undefined) { + if (data == 'HealthCheck') { + //show additional fileds user name port number and others + this.actionHealthCheck = true; + } else { + this.actionHealthCheck = false; + if (data == 'StartApplication' || data == 'StopApplication') { + this.disableVnftype = true; + } else { + this.otherActions = true; + } + } + this.referenceDataObject.scope['vnf-type'] = configureObject['scope']['vnf-type']; + this.referenceDataObject.scope['vnfc-type'] = configureObject['scope']['vnfc-type']; + this.referenceDataObject['device-protocol'] = configureObject['device-protocol']; + this.refernceScopeObj['sourceType'] = configureObject['scopeType']; + } else { + this.actionHealthCheck = false; + this.otherActions = false; + this.disableVnftype = false; + } + //set default values for further actions + } + + addVnfcData(vmNumber: number) { + var newObj = { + 'vnfc-instance': this.referenceDataObject.vm[vmNumber].vnfc.length + 1, + 'vnfc-type': this.vnfcTypeData, + 'vnfc-function-code': '', + 'ipaddress-v4-oam-vip': '', + 'group-notation-type': '', + 'group-notation-value': '' + }; + this.referenceDataObject.vm[vmNumber].vnfc.push(newObj); + } + + //to remove the VM's created by the user + removeFeature(vmNumber: any, index: any) { + this.referenceDataObject.vm.splice(vmNumber, 1); + } + + //add new VM's to the configure + addVms() { + let arr = []; + var vnfcObj = JSON.parse(JSON.stringify(this.Sample)); + let mberOFVm = Number(this.refernceScopeObj.from); + let arrlength = this.referenceDataObject.vm.length; + mberOFVm = arrlength + mberOFVm; + for (var i = (arrlength); i < mberOFVm; i++) { + if (this.referenceDataObject.action == 'ConfigScaleOut') { + arr.push({ 'template-id': this.templateIdentifier, 'vm-instance': (i + 1), vnfc: [Object.assign({}, this.Sample)] }); + } else { + arr.push({ 'vm-instance': (i + 1), vnfc: [Object.assign({}, this.Sample)] }); + } + + } + //this.referenceDataObject.vm.splice(arrlength, 0, ...arr); + this.referenceDataObject.vm = this.referenceDataObject.vm.concat(arr); //splice(arrlength, 0, ...arr); + } + + //Reference object to create reference data + prepareReferenceObject() { + // console.log("this temp all data before=="+ JSON.stringify(this.tempAllData)) + + this.referenceDataObject['artifact-list'] = []; + let scopeName = ''; + //if only vnf is there + if (this.referenceDataObject.scope['vnfc-type'] == '' || this.referenceDataObject.scope['vnfc-type'] == null || this.referenceDataObject.scope['vnfc-type'] == 'null') { + scopeName = this.referenceDataObject.scope['vnf-type']; + this.referenceDataObject.scope['vnfc-type'] = ''; + this.referenceDataObject['action-level'] = 'vnf'; + this.referenceDataObject['scopeType'] = 'vnf-type'; + } + //if VNFC is entered set action level & Scope type to VNFC for configure and configure modify, and default the values to vnf and vnf type for all other actions + else { + scopeName = this.referenceDataObject.scope['vnfc-type']; + if (this.referenceDataObject.action == 'Configure' || this.referenceDataObject.action == 'ConfigModify') { + this.referenceDataObject['action-level'] = 'vnfc'; + this.referenceDataObject['scopeType'] = 'vnfc-type'; + } else { + this.referenceDataObject['action-level'] = 'vnf'; + this.referenceDataObject['scopeType'] = 'vnf-type'; + } + } + //replacing / with _ and removing spaces in the scopeName + if (scopeName) { + scopeName = scopeName.replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, ''); + } + //marking the extension based on the device-protocol selected by the user + let extension = 'json'; + if (this.referenceDataObject['device-protocol'] == 'ANSIBLE' || this.referenceDataObject['device-protocol'] == 'CHEF' || this.referenceDataObject['device-protocol'] == 'CLI') { + extension = 'json'; + } else if (this.referenceDataObject['device-protocol'] == 'NETCONF-XML' || this.referenceDataObject['device-protocol'] == 'REST') { + extension = 'xml'; + } + //preparing the artifact list array file names along with extension + let config_template_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V.' + extension; + let pd_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V.yaml'; + let reference_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V.json'; + + let configTemplate = { + 'artifact-name': 'template_' + config_template_fileName, + 'artifact-type': 'config_template' + }; + + let pdTemplate = { + 'artifact-name': 'pd_' + pd_fileName, + 'artifact-type': 'parameter_definitions' + }; + if (this.referenceDataObject.action != 'ConfigScaleOut') { + + this.referenceDataObject['artifact-list'].push(configTemplate, + pdTemplate + ); + + } else { + let identifiers = this.referenceDataObject['template-id-list']; + if (identifiers) { + + + for (var x = 0; x < identifiers.length; x++) { + pd_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V_' + identifiers[x] + '.yaml'; + config_template_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V_' + identifiers[x] + '.' + extension; + + configTemplate = { + 'artifact-name': 'template_' + config_template_fileName, + 'artifact-type': 'config_template' + }; + pdTemplate = { + 'artifact-name': 'pd_' + pd_fileName, + 'artifact-type': 'parameter_definitions' + }; + this.referenceDataObject['artifact-list'].push(configTemplate, + pdTemplate + ); + } + } + + } + + if (this.referenceDataObject.scope['vnfc-type'] === '') { + this.referenceDataObject.scope['vnfc-type'] = ''; + } + if (this.referenceDataObject.action === 'OpenStack Actions') { + this.referenceDataObject['template'] = 'N'; + this.referenceDataObject['artifact-list'] = []; + } + let newObj = $.extend(true, {}, this.referenceDataObject); + let action = this.referenceDataObject.action; + let configureObject = (newObj.action == 'Configure'); + let ConfigScaleOut = (newObj.action == 'ConfigScaleOut'); + //delete VM's if selected action is configure. + if (!ConfigScaleOut && !configureObject && this.tempAllData.length != 0) { + // delete newObj.vm + newObj.vm = []; + //this.tempAllData.push(newObj); + } else { + if (ConfigScaleOut) { + + + // //add template identifier + // for(let x=0;x<newObj.vm.length;x++){ + // let vmObj= newObj.vm[x] + // vmObj['template-id'] = this.templateIdentifier + // } + } else { + delete newObj['template-id-list']; + } + } + //remove artifact list if template is N + if (this.referenceDataObject.template == 'N') { + } + let actionObjIndex = this.tempAllData.findIndex(obj => { + return obj['action'] == action; + }); + if (newObj.action != 'HealthCheck') { + delete newObj['context-url']; + } + if (actionObjIndex > -1) { + this.tempAllData[actionObjIndex] = newObj; + this.mappingEditorService.saveLatestAction(this.tempAllData[actionObjIndex]); + this.mappingEditorService.saveLatestIdentifier(this.templateIdentifier); + } else { + if (newObj.action != '') { + this.tempAllData.push(newObj); + this.mappingEditorService.saveLatestAction(newObj); + this.mappingEditorService.saveLatestIdentifier(this.templateIdentifier); + } + } + //Creating all action block to allow mulitple actions at once + let allAction = { + action: 'AllAction', + 'action-level': 'vnf', + scope: newObj.scope, + 'artifact-list': [{ + 'artifact-name': 'reference_AllAction' + '_' + scopeName + '_' + '0.0.1V.json', + 'artifact-type': 'reference_template' + }] + }; + let allActionIndex = this.tempAllData.findIndex(obj => { + return obj['action'] == 'AllAction'; + }); + if (allActionIndex > -1) { + this.tempAllData[allActionIndex] = allAction; + } else { + this.tempAllData.push(allAction); + } + console.log('This uploaded array===' + JSON.stringify(this.uploadedDataArray)); + if (this.uploadedDataArray && this.uploadedDataArray != undefined && this.uploadedDataArray.length != 0) { + /*for (var i = 0; i < this.uploadedDataArray.length; i++) { + var actionData = this.uploadedDataArray[i][0]; + // console.log("Action data=="+ actionData); + for (var j = 0; j < this.tempAllData.length; j++) { + //console.log("Actions from temp all data=="+ this.tempAllData[j].action) + //console.log("Matched=="+ (actionData === this.tempAllData[j].action)) + if (actionData === this.tempAllData[j].action) { + this.tempAllData.splice(j,1); + + } + } + }*/ + if (this.tempAllData && this.tempAllData != undefined) { + for (var i = 0; i < this.tempAllData.length; i++) { + // alert(this.checkIfelementExistsInArray(this.tempAllData[i].action,this.actions)) + var result = false; + + if (this.tempAllData[i].action === 'AllAction') { + result = true; + } + else { + result = this.checkIfelementExistsInArray(this.tempAllData[i].action, this.actions); + } + if (!result) { + console.log('Removing VM action==' + this.tempAllData[i].action); + this.tempAllData.splice(i, 1); + i = i - 1; + } + + } + } + this.addVmCapabilitiesData(); + } + // console.log("this temp all data after=="+ JSON.stringify(this.tempAllData)) + //console.log("temp all data from save to appc=="+JSON.stringify(this.tempAllData)) + this.mappingEditorService.getReferenceList().push(JSON.parse(JSON.stringify(this.referenceDataObject))); + this.buildDesignComponent.updateAccessUpdatePages(this.referenceDataObject.action, this.mappingEditorService.getReferenceList()); + this.mappingEditorService.changeNav(this.tempAllData); + return { totlaRefDtaa: this.tempAllData, scopeName: scopeName }; + } + + public checkIfelementExistsInArray(element, array) { + //console.log("Element==" + element) + var result: boolean = false; + + array.forEach(function (item) { + // console.log("Item==" + item) + if (element === item) { + console.log('Element==' + element + 'Item==' + item); + result = true; + } + } + ); + return result; + } + + upload(evt: any) { + /* console.log("This uploaded array==" + JSON.stringify(this.uploadedDataArray)) + // console.log("This template data before==" + JSON.stringify(this.tempAllData)) + if (this.uploadedDataArray && this.uploadedDataArray != undefined && this.uploadedDataArray.length!=0) { + /* for (var i = 0; i < this.uploadedDataArray.length; i++) { + var action = this.uploadedDataArray[i][0]; + for (var j = 0; j < this.tempAllData.length; j++) { + if (action === this.tempAllData[j].action) { + this.tempAllData.splice(j); + console.log("This template data===" + this.tempAllData[j]); + } + } + } + if (this.tempAllData && this.tempAllData != undefined) { + for (var i = 0; i < this.tempAllData.length; i++) { + // alert(this.checkIfelementExistsInArray(this.tempAllData[i].action,this.actions)) + var result = this.checkIfelementExistsInArray(this.tempAllData[i].action, this.actions); + if (this.tempAllData[i].action === "AllAction") result = true; + if (!result) { + console.log("Removing VM action==" + this.tempAllData[i].action) + this.tempAllData.splice(i, 1); + } + + } + } + } + // console.log("This template data after==" + JSON.stringify(this.tempAllData)) + /* wire up file reader */ + const target: DataTransfer = <DataTransfer>(evt.target); + + //console.log("filename========" + evt.target.files[0].name) + this.uploadFileName = evt.target.files[0].name; + var fileExtension = this.uploadFileName.substr(this.uploadFileName.lastIndexOf('.') + 1); + if (target.files.length != 1) { + throw new Error('Cannot upload multiple files on the entry'); + } + if (fileExtension.toUpperCase() === 'XLS' || fileExtension.toUpperCase() === 'XLSX') { + const reader = new FileReader(); + reader.onload = (e: any) => { + /* read workbook */ + const bstr = e.target.result; + // console.log("print 1---" + bstr); + const wb = XLSX.read(bstr, { type: 'binary' }); + // console.log("print 2---" + JSON.stringify(wb)); + /* grab first sheet */ + const wsname = wb.SheetNames[0]; + // console.log("Name:---" + wsname); + const ws = wb.Sheets[wsname]; + + /* save data */ + + let arrData = (<AOA>(XLSX.utils.sheet_to_json(ws, { header: 1 }))); + //console.log("row======" + (XLSX.utils.sheet_to_json(ws, { header: 1 })).toString()) + // console.log("Array data---" + JSON.stringify(arrData)); + this.uploadedDataArray = arrData; + this.firstArrayElement = arrData[0]; + var remUploadedDataArray = arrData; + remUploadedDataArray.shift(); + this.remUploadedDataArray = remUploadedDataArray; + if (arrData != null) { + this.getExcelUploadStatus = true; + this.nService.success('Success', 'Vm capabilities data uploaded successfully'); + + } + else { + this.nService.success('Error', 'Empty Vm capabilities file uploaded'); + } + }; + reader.readAsBinaryString(target.files[0]); + console.log('TARGET files---' + JSON.stringify(evt.target)); + } + else { + this.nService.error('Error', 'Incorrect VM capabilities file uploaded'); + } + + } + + addVmCapabilitiesData() { + for (var i = 0; i < this.uploadedDataArray.length; i++) { + var vnfcFuncCodeArray = []; + var data = this.uploadedDataArray[i]; + // console.log("Data is "+ JSON.stringify(data)) + //console.log("Data length: "+ data.length) + for (var j = 1; j < data.length; j++) { + // console.log("Data " +j +" is "+ JSON.stringify(data[j])) + if (data[j] != undefined) { + if (data[j].toUpperCase() === 'Y') { + vnfcFuncCodeArray.push(this.firstArrayElement[j]); + //vnfcFuncCodeArray.push({name:this.firstArrayElement[j]}); + } + } + } + var action = this.uploadedDataArray[i][0]; + if (action && action != undefined) { + var json = { + 'action': action, + 'action-level': 'vm', + 'scope': { + 'vnf-type': this.referenceDataObject['scope']['vnf-type'], //need to confirm what should be this value + 'vnfc-type': null + }, + 'vnfc-function-code-list': vnfcFuncCodeArray, + 'template': 'N', + 'device-protocol': 'OS' + }; + + this.tempAllData.push(json); + } + + } + } + + //download template + save(form: any, isValid: boolean) { + if (this.referenceDataObject.action === '') { + this.nService.error('Error', 'Select a valid Action'); + return; + } + if (this.referenceDataObject['device-protocol'] === '') { + this.nService.error('Error', 'Select a valid Device protocol'); + return; + } + + if (isValid) { + let referenceObject = this.prepareReferenceObject(); + let theJSON = JSON.stringify({ 'reference_data': this.tempAllData }, null, '\t'); + let uri = 'data:application/json;charset=UTF-8,' + encodeURIComponent(theJSON); + this.downloadData.reference = theJSON; + this.validateTempAllData(); + var blob = new Blob([theJSON], { + type: 'text/plain' + }); + let fileName = 'reference_AllAction_' + referenceObject.scopeName + '_' + '0.0.1V.json'; + saveAs(blob, fileName); + var templateData = JSON.stringify(this.downloadData.template.templateData); + var nameValueData = JSON.stringify(this.downloadData.template.nameValueData); + var pdData = this.downloadData.pd.pdData; + if (templateData != '{}' && templateData != null && templateData != undefined) this.downloadTemplate(); + if (nameValueData != '{}' && nameValueData != null && nameValueData != undefined) this.downloadNameValue(); + if (pdData != '' && pdData != null && pdData != undefined) this.downloadPd(); + } + } + + downloadTemplate() { + var fileName = this.downloadData.template.templateFileName; + var theJSON = this.downloadData.template.templateData; + if (fileName != null || fileName != '') { + var fileExtensionArr = fileName.split('.'); + var blob = new Blob([theJSON], { + type: 'text/' + fileExtensionArr[1] + }); + saveAs(blob, fileName); + } + } + + downloadNameValue() { + var fileName = this.downloadData.template.nameValueFileName; + var theJSON = this.downloadData.template.nameValueData; + var blob = new Blob([theJSON], { + type: 'text/json' + }); + + saveAs(blob, fileName); + } + + downloadPd() { + let fileName = this.downloadData.pd.pdFileName; + let theJSON = this.downloadData.pd.pdData; + var blob = new Blob([theJSON], { + type: 'text/plain' + }); + + saveAs(blob, fileName); + } + + saveToAppc(valid, form) { + if (this.referenceDataObject.action === '') { + this.nService.error('Error', 'Select a valid Action'); + return; + } + if (this.referenceDataObject['device-protocol'] === '') { + this.nService.error('Error', 'Select a valid Device protocol'); + return; + } + + try { + form._submitted = true; + if (valid) { + + let referenceObject = this.prepareReferenceObject(); + console.log('##########'); + + console.log(referenceObject); + this.validateTempAllData(); + let theJSON = JSON.stringify(this.tempAllData, null, '\t'); + let fileName = 'reference_AllAction_' + referenceObject.scopeName + '_' + '0.0.1V.json'; + this.uploadArtifact(JSON.stringify({ reference_data: this.tempAllData }), this.tempAllData[this.tempAllData.length - 1], fileName); + var templateData = JSON.stringify(this.appData.template.templateData); + var nameValueData = JSON.stringify(this.appData.template.nameValueData); + var pdData = JSON.stringify(this.appData.pd); + if (templateData != '{}' && templateData != null && templateData != undefined) this.saveTemp(); + if (nameValueData != '{}' && nameValueData != null && nameValueData != undefined) this.saveNameValue(); + if (pdData != '{}' && pdData != null && pdData != undefined) this.savePd(); + if (this.actionChanged) { + this.referenceDataObject.action = this.currentAction; + this.populateExistinAction(this.referenceDataObject.action); + this.actionChanged = false; + } + } + } + catch (e) { + this.nService.warn('status', 'unable to save the artifact'); + } + } + + validateTempAllData() { + if (this.tempAllData) { + var updatedData = []; + this.tempAllData.forEach(data => { + if (data.action) { + updatedData.push(data); + } + }); + this.tempAllData = updatedData; + } + } + + appendSlashes(artifactData) { + return artifactData.replace(/"/g, '\\"'); + } + + uploadArtifact(artifactData, dataJson, fileName) { + let data = []; + let slashedPayload = this.appendSlashes(artifactData); + let newPyaload = '{"userID": "' + localStorage['userId'] + '","vnf-type" : "' + dataJson['scope']['vnf-type'] + '","action" : "AllAction","artifact-name" : "' + fileName + '","artifact-type" : "APPC-CONFIG","artifact-version" : "0.1","artifact-contents" :" ' + slashedPayload + '"}'; + let payload = { + 'input': { + 'design-request': { + 'request-id': localStorage['apiToken'], + 'action': 'uploadArtifact', + 'payload': newPyaload, + } + } + }; + this.ngProgress.start(); + this.httpUtils.post({ + url: environment.getDesigns, + data: payload + }).subscribe((resp) => { + if (resp != null && resp.output.status.code == '400') { + window.scrollTo(0, 0); + this.nService.success('Status', 'successfully uploaded the Reference Data'); + } else { + this.nService.warn('Status', 'Error while saving Reference Data'); + } + this.uploadStatusError = false; + this.getRefStatus = false; + this.ngProgress.done(); + }, (err) => { + this.nService.error('Status', 'Error Connecting to the APPC Network'); + window.scrollTo(0, 0); + }); + this.appData.reference = payload; + setTimeout(() => { + this.ngProgress.done(); + }, 3500); + } + + retriveFromAppc() { + if (sessionStorage.getItem('updateParams') != 'undefined') { + this.getArtifact(); + this.noCacheData = false; + } else { + this.noCacheData = true; + } + } + + cloneMessage(servermessage) { + var clone = {}; + for (var key in servermessage) { + if (servermessage.hasOwnProperty(key)) //ensure not adding inherited props + clone[key] = servermessage[key]; + } + return clone; + } + + public showUpload() { + this.selectedUploadType = this.uploadTypes[0].value; + }; + + public fileChange(input) { + this.fileName = input.target.files[0].name.replace(/C:\\fakepath\\/i, ''); + this.fileUploaded = true; + this.disableRetrieve = true; + if (input.target.files && input.target.files[0]) { + // Create the file reader + let reader = new FileReader(); + this.readFile(input.target.files[0], reader, (result) => { + // After the callback fires do: + if ('Reference Data' === this.selectedUploadType) { + try { + let obj: any; + let jsonObject = (JSON.parse(result))['reference_data']; + this.uploadedData = JSON.parse(JSON.stringify(jsonObject)); + this.tempAllData = JSON.parse(JSON.stringify(jsonObject)); + this.notificationService.notifySuccessMessage('Reference Data file successfully uploaded..'); + if (jsonObject instanceof Array) { + this.referenceDataObject = jsonObject[0]; + jsonObject.forEach(obj => { + this.selectedActions.push(obj.action); + }); + } else { + this.referenceDataObject = jsonObject; + this.selectedActions.push(jsonObject.action); + } + if (this.referenceDataObject.action === 'OpenStack Actions') { + this.deviceProtocols = ['', 'OpenStack']; + this.buildDesignComponent.tabs = [ + { + type: 'dropdown', + name: 'Reference Data', + url: 'references', + }]; + } + else { + this.buildDesignComponent.tabs = [ + { + name: 'Reference Data', + url: 'references', + }, { + name: 'Template', + url: 'templates/myTemplates', + }, { + name: 'Parameter Definition', + url: 'parameterDefinitions/create' + } /*, { + name: "Test", + url: 'test', + }*/ + ]; + } + if (this.referenceDataObject.template == null) { + this.referenceDataObject.template = 'Y'; + } + if (this.referenceDataObject['action-level'] == null) { + this.referenceDataObject['action-level'] = 'VNF'; + } + } catch (e) { + this.nService.error('Error', 'Incorrect file format'); + } + } + this.hideModal = true; + }); + } else { + this.notificationService.notifyErrorMessage('Failed to read file..'); + } + + } + + public readFile(file, reader, callback) { + // Set a callback funtion to fire after the file is fully loaded + reader.onload = () => { + // callback with the results + callback(reader.result); + }; + this.notificationService.notifySuccessMessage('Uploading File ' + file.name + ':' + file.type + ':' + file.size); + // Read the file + reader.readAsText(file, 'UTF-8'); + } + + fileChangeEvent(fileInput: any) { + let obj: any = fileInput.target.files; + } + + clearVnfcData() { + this.Sample = { + 'vnfc-instance': '1', + 'vnfc-function-code': '', + 'ipaddress-v4-oam-vip': '', + 'group-notation-type': '', + 'group-notation-value': '' + }; + } + + setVmInstance(index) { + this.referenceDataObject.vm[index]['vm-instance'] = index + 1; + } + + setVnfcType(str: String) { + this.Sample['vnfc-type'] = str; + } + + getChange(value: String) { + if (value === 'vnfType') { + this.referenceDataObject.scope['vnfc-type'] = ''; + } + } + + resetForm() { + this.referenceDataObject['action-level'] = 'vnf'; + this.referenceDataObject.template = 'Y'; + this.referenceDataObject['device-protocol'] = ''; + this.referenceDataObject['user-name'] = ''; + this.referenceDataObject['port-number'] = ''; + this.refernceScopeObj.sourceType = ''; + this.Sample['vnfc-type'] = ''; + } + + populateExistinAction(data) { + let existAction = this.tempAllData.findIndex(obj => { + return obj.action == data; + }); + if (existAction > -1) { + let obj = $.extend(true, {}, this.tempAllData[existAction]); + this.referenceDataObject = obj; + this.referenceDataObject.scope['vnf-type'] = obj['scope']['vnf-type']; + this.referenceDataObject.scope['vnfc-type'] = obj['scope']['vnfc-type']; + this.referenceDataObject['device-protocol'] = obj['device-protocol']; + this.refernceScopeObj['sourceType'] = obj['scopeType']; + } else { + this.resetForm(); + this.referenceDataObject.action = data; + } + //# iof healthCeck change deviceprotocol drp vaues + if (data == 'HealthCheck') { + this.deviceProtocols = ['', 'ANSIBLE', 'CHEF', 'REST']; + this.actionHealthCheck = true; + } else if (data == 'UpgradeBackout' || data == 'ResumeTraffic' || data == 'QuiesceTraffic' || data == 'UpgradeBackup' || data == 'UpgradePostCheck' || data == 'UpgradePreCheck' || data == 'UpgradeSoftware' || data == 'ConfigBackup' || data == 'ConfigRestore' || data == 'StartApplication' || data == 'StopApplication') { + this.deviceProtocols = ['', 'CHEF', 'ANSIBLE']; + } else if (data == 'OpenStack Actions') { + this.deviceProtocols = ['', 'OpenStack']; + } else if (data == 'ConfigScaleOut' || data == 'Configure' || data == 'ConfigModify') { + this.deviceProtocols = ['', 'CHEF', 'ANSIBLE', 'NETCONF']; + } else if (data == 'GetRunningConfig') { + this.deviceProtocols = ['', 'NETCONF']; + } else { + this.deviceProtocols = ['', 'ANSIBLE', 'CHEF', 'NETCONF-XML', 'REST', 'RESTCONF', 'CLI']; + this.actionHealthCheck = false; + } + } + + //Modal pop up for action change with values entered. + actionChange(data, content, userForm) { + // this.actionChanged = true; + if (data == null) { + return; + } + if ((userForm.valid) && this.oldAction != '' && this.oldAction != undefined) { + this.actionChanged = true; + this.modalService.open(content).result.then(res => { + if (res == 'yes') { + this.currentAction = this.referenceDataObject.action; + this.referenceDataObject.action = this.oldAction; + $('#saveToAppc').click();//make sure the save all is done before the tempall obj is saved form the API + this.oldAction = this.referenceDataObject.action + ''; + if (this.oldAction === 'OpenStack Actions') { + + this.uploadedDataArray = []; + this.remUploadedDataArray = []; + this.firstArrayElement = []; + this.uploadFileName = ''; + //this.tempAllData = []; + } + this.clearCache(); + } else { + this.populateExistinAction(data); + this.oldAction = this.referenceDataObject.action + ''; + this.clearCache(); + } + }); + } else { + this.oldAction = this.referenceDataObject.action + ''; + this.populateExistinAction(data); + } + + + if (data == 'OpenStack Actions') { + this.buildDesignComponent.tabs = [ + { + type: 'dropdown', + name: 'Reference Data', + url: 'references', + }]; + } + else { + this.buildDesignComponent.tabs = [ + { + name: 'Reference Data', + url: 'references', + }, { + name: 'Template', + url: 'templates/myTemplates', + }, { + name: 'Parameter Definition', + url: 'parameterDefinitions/create' + }/*, { + name: "Test", + url: 'test', + }*/ + ]; + } + if (data == 'Configure' || data == 'ConfigModify') { + this.nonConfigureAction = false; + } else { + this.nonConfigureAction = true; + } + } + + clearCache() { + // get the value and save the userid and persist it. + this.mappingEditorService.setTemplateMappingDataFromStore(undefined); + localStorage['paramsContent'] = '{}'; + this.mappingEditorService.setParamContent(undefined); + this.paramShareService.setSessionParamData(undefined); + this.appData = { reference: {}, template: { templateData: {}, nameValueData: {} }, pd: {} }; + this.downloadData = { + reference: {}, + template: { templateData: {}, nameValueData: {}, templateFileName: '', nameValueFileName: '' }, + pd: { pdData: '', pdFileName: '' } + }; + } + + saveTemp() { + this + .httpUtils + .post( + { url: environment.getDesigns, data: this.appData.template.templateData }) + .subscribe(resp => { + if (resp.output.status.code === '400' && resp.output.status.message === 'success') { + this.nService.success('Status', 'Successfully uploaded the Template Data'); + } + if (resp.output.status.code === '401') { + this.nService.warn('Status', 'Error in saving the Template to Appc'); + + } + }, + (err) => this.nService.error('Status', 'Error Connecting to the APPC Network')); + } + + saveNameValue() { + this + .httpUtils + .post( + { + url: environment.getDesigns, data: this.appData.template.nameValueData + }) + .subscribe(resp => { + if (resp.output.status.code === '400' && resp.output.status.message === 'success') { + this.nService.success('Status', 'Successfully uploaded the Name Value Pairs'); + } + if (resp.output.status.code === '401') { + this.nService.warn('Status', 'Error in saving the Name value pairs to Appc'); + } + }, + error => { + this.nService.error('Status', 'Error Connecting to the APPC Network'); + return false; + }); + } + + savePd() { + this + .httpUtils + .post( + { + url: environment.getDesigns, data: this.appData.pd + }) + .subscribe(resp => { + if (resp.output.status.code === '400' && resp.output.status.message === 'success') { + this.nService.success('Status', 'Successfully uploaded PD file'); + } + if (resp.output.status.code === '401') { + this.nService.warn('Status', 'Error in saving the PD to Appc'); + } + }, + error => { + this.nService.error('Status', 'Error Connecting to the APPC Network'); + return false; + }); + } + + openModel(toShow: any, message: any, title: any) { + this.modalComponent.isShow = toShow; + this.modalComponent.message = message; + this.modalComponent.title = title; + } + + browseOption() { + $('#inputFile').trigger('click'); + } + + excelBrowseOption() { + $('#excelInputFile').trigger('click'); + } + + showIdentifier() { + $('#identifierModal').modal(); + } + + addToIdentDrp() { + if (!(this.referenceDataObject['template-id-list'])) { + this.referenceDataObject['template-id-list'] = []; + } + this.referenceDataObject['template-id-list'].push(this.templateId); + // this.referenceDataObject['template-id-list'] = this.identifierDrpValues + //this.identifierDrp = "" + } + + resetVms() { + this.referenceDataObject.vm = []; + } + + dataModified() { + this.referenceDataObject.vm = this.referenceDataObject.vm; + } +}
\ No newline at end of file |