diff options
Diffstat (limited to 'src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html')
| -rw-r--r-- | src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html | 78 |
1 files changed, 52 insertions, 26 deletions
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 index 302fd60..5aeb7ff 100644 --- a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html +++ b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html @@ -16,11 +16,13 @@ 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. + ============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> +<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"> @@ -28,7 +30,8 @@ limitations under the License. <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"> + <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" @@ -39,16 +42,20 @@ limitations under the License. </div> <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12"> <label>VNF Type* </label> - <input type="text" readonly 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" readonly id="txtVnfcType" [(ngModel)]="referenceDataObject.scope['vnfc-type']" (blur)="setVnfcType($event.target.value)" (ngModelChange)="updateSessionValues($event,'vnfcType')" #vnfcType="ngModel" name="vnfcType"> + <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> @@ -57,7 +64,8 @@ limitations under the License. </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> @@ -74,16 +82,20 @@ limitations under the License. <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 + <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 + <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> @@ -98,7 +110,8 @@ limitations under the License. <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 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> @@ -126,7 +139,8 @@ limitations under the License. <input type="text" class="form-control" id="txtIpaddress" [(ngModel)]="referenceDataObject['url']" name="contextUrl"> </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="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"> @@ -139,12 +153,13 @@ limitations under the License. </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> - <input type="text" class="form-control" id="txtVnfcFunctionCode" [(ngModel)]="Sample['vnfc-function-code']" #vnfcFunctionCode="ngModel" name="samplevnfcFunctionCode"> + <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> @@ -161,33 +176,39 @@ limitations under the License. </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" [readonly]="disableGrpNotationValue" id="txtGroupValue" [(ngModel)]="Sample['group-notation-value']" name="sampleGroupValue"> + <input type="text" class="form-control" [readonly]="disableGrpNotationValue" 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 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 *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"> + <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 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 *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> @@ -198,12 +219,14 @@ limitations under the License. </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}}"> + <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}}"> + <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"> @@ -228,7 +251,8 @@ limitations under the License. </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,templateIdentifier)">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 @@ -313,8 +337,10 @@ limitations under the License. </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> + <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> |