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============================================
-->
<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">
*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">
+ <input type="text" readonly 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">
+ <input type="text" class="form-control" readonly id="txtVnfcType" [(ngModel)]="referenceDataObject.scope['vnfc-type']" (blur)="setVnfcType($event.target.value)" (ngModelChange)="updateSessionValues($event,'vnfcType')" #vnfcType="ngModel" name="vnfcType">
</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">
+ <select class="form-control" required id="txtDeviceProtocol" [(ngModel)]="referenceDataObject['device-protocol']" (ngModelChange)="deviceProtocolChange()" #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="isConfigScaleOut">
<label>Template Identifier</label>
- <select class="form-control" required id="tempIdentifier" (ngModelChange)="dataModified()" [(ngModel)]="templateIdentifier" #deviceProtocol="ngModel" name="templateIdentifier">
+ <select class="form-control" required id="tempIdentifier" (ngModelChange)="dataModified();idChange($event,content,userForm)" [(ngModel)]="templateIdentifier" #deviceProtocol="ngModel" name="templateIdentifier">
<option [value]="val" *ngFor="let val of referenceDataObject['template-id-list']">{{val}}
</option>
</select>
</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>
+ <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>
+ <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>
+ <label style="font-size:12px;">IPAddress V4</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>
<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">
</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 class="row" *ngFor="let noOfvm of referenceDataObject.vm | vmFiltering:referenceDataObject?.action:templateIdentifier; trackBy:trackByFn;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="row" *ngFor="let item of noOfvm.vnfc;trackBy:trackByFn, 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}}">
+ <label style="font-size:12px;">VNFC Type</label>
+ <input type="text" class="form-control" id="txtVnfcTypeInColl" required [(ngModel)]="item['vnfc-type']" #vnfcType{{j}}="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>
+ <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>
+ <label style="font-size:12px;">IPAddress V4</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}}
</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}}">
+ <input type="text" [readonly]="item['group-notation-type'] =='existing-group-name'" 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>
+ <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,templateIdentifier)">Remove Vm</a>
</div>
<div>
<a *ngIf="(referenceDataObject.vm[j].vnfc.length-1) == i " [hidden]="true" role="button" (click)="addVnfcData(j)">Add VNFC
<div>
<input pattern=".*[^ ].*" 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>
+ <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" data-dismiss="modal" (click)="addToIdentDrp()">Add</button>
+ <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="templateId=''" data-dismiss="modal">cancel</button>
+ </div>
</div>
</div>
</div>