Code Review / appc / cdt.git / blob
? search:
summary | shortlog | log | commit | commitdiff | review | tree
history | raw | HEAD
parameter-definition service- removed unused code
[appc/cdt.git] / src / app / vnfs / build-artifacts / reference-dataform / reference-dataform.component.html
1 <!--
2 ============LICENSE_START==========================================
3 ===================================================================
4 Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
5 ===================================================================
6
7 Unless otherwise specified, all software contained herein is licensed
8 under the Apache License, Version 2.0 (the License);
9 you may not use this software except in compliance with the License.
10 You may obtain a copy of the License at
11
12     http://www.apache.org/licenses/LICENSE-2.0
13
14 Unless required by applicable law or agreed to in writing, software
15 distributed under the License is distributed on an "AS IS" BASIS,
16 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17 See the License for the specific language governing permissions and
18 limitations under the License.
19
20 ============LICENSE_END============================================
21 -->
22
23 <simple-notifications [options]="options"></simple-notifications>
24 <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>
25 <form class="" novalidate #userForm="ngForm" (ngSubmit)="save(userForm.value,userForm.valid)">
26     <div class="card">
27
28         <div class="card-block" style="    border-top: 5px solid #6ab344; border-top-right-radius: 7px;border-top-left-radius: 7px;">
29             <div class="row" style="padding: 15px 25px">
30                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
31                     <label>Action*</label>
32                     <select class="form-control" required id="cmbAction" [(ngModel)]="referenceDataObject.action" (ngModelChange)="updateSessionValues($event,'action');actionChange($event,content,userForm);" #action="ngModel" name="action">
33                         <option [value]="actionType"
34                                 [ngClass]="{'selectedAction':selectedActions.indexOf(actionType)>-1}"
35                                 [selected]="referenceDataObject.action===actionType"
36                                 *ngFor="let actionType of actions ">{{actionType}}
37                         </option>
38                     </select>
39
40                 </div>
41                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
42                     <label>VNF Type* </label>
43                     <input type="text" readonly class="form-control" id="txtVnfType" required [(ngModel)]="referenceDataObject['scope']['vnf-type']" (ngModelChange)="updateSessionValues($event,'vnfType')" #vnftype="ngModel" name="vnftype">
44                     <span class="error-message" [hidden]="vnfParams?.vnfType || vnftype.valid || (vnftype.pristine && !userForm.submitted)">Required Field</span>
45                 </div>
46                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
47                     <label>VNFC Type</label>
48                     <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">
49                 </div>
50                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
51                     <label>Device Protocol*</label>
52                     <select class="form-control" required id="txtDeviceProtocol" [(ngModel)]="referenceDataObject['device-protocol']" (ngModelChange)="deviceProtocolChange()" #deviceProtocol="ngModel" name="deviceProtocol">
53                         <option [value]="device" [selected]="referenceDataObject.deviceProtocol===device"
54                                 *ngFor="let device of deviceProtocols">{{device}}
55                         </option>
56                     </select>
57
58                 </div>
59                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="isConfigScaleOut">
60                     <label>Template Identifier</label>
61                     <select class="form-control" required id="tempIdentifier" (ngModelChange)="dataModified();idChange($event,content,userForm)" [(ngModel)]="templateIdentifier" #deviceProtocol="ngModel" name="templateIdentifier">
62                         <option [value]="val" *ngFor="let val of referenceDataObject['template-id-list']">{{val}}
63                         </option>
64                     </select>
65                     <span class="error-message" [hidden]="deviceProtocol.valid || (deviceProtocol.pristine && !userForm.submitted)">Required Field</span>
66                 </div>
67
68                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="referenceDataObject['action']== 'ConfigScaleOut'" style="margin-top: 30px">
69                     <span *ngIf="referenceDataObject.action === 'ConfigScaleOut'">   <a style="    color: blue;"
70                     href="javascript:void(0)"
71                     (click)="showIdentifier()">Assign New Template Identifier</a></span>
72
73                 </div>
74             </div>
75             <div class="col-12" *ngIf="!(referenceDataObject.action === 'OpenStack Actions')">
76                 <div class="input-group">
77                     <input id="inputFile" class="file" #myInput type='file' (change)="fileChange($event)">
78                     <input [(ngModel)]="fileName" type="text" class="input-lg" disabled placeholder="Upload Reference File from PC" name="browse" style="width:80%">
79                     <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
80                     </button>
81                 </div>
82             </div>
83             <div class="col-12" *ngIf="referenceDataObject.action === 'OpenStack Actions'">
84                 <div class="input-group">
85                     <input id="excelInputFile" #myInput1 class="file" type="file" (change)="upload($event)">
86                     <input [(ngModel)]="uploadFileName" type="text" class="input-lg" disabled placeholder="Upload VM Capabilities File" name="uploadFileName" style="width:80%">
87                     <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
88                     </button>
89                 </div>
90             </div>
91         </div>
92         <div class="card-block" style="padding: 10px">
93             <div>
94                 <div class="create-wrapper" style="padding: 0px 25px">
95                     <div class="row" style="margin-bottom: 30px">
96                         <div class=" col-6">
97
98                         </div>
99                         <div class="text-right col-6">
100                             <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="submit">Download All To PC
101                             </button>&emsp;&emsp;
102                             <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
103                             </button>&emsp;&emsp;
104                         </div>
105                     </div>
106                     <div class="row">
107                         <div class="col-12">
108                             <div class="row" *ngIf="!(referenceDataObject.action === 'OpenStack Actions')">
109                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
110                                     <label>Template</label>
111                                     <select class="form-control" id="txtDeviceProtocol" [(ngModel)]="referenceDataObject['template']" #template="ngModel" name="template">
112                                         <option [value]="template" *ngFor="let template of deviceTemplates">
113                                             {{template}}
114                                         </option>
115                                     </select>
116                                 </div>
117                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
118                                     <label>User Name</label>
119                                     <input type="text" class="form-control" id="txtIpaddress" [(ngModel)]="referenceDataObject['user-name']" name="loginUserName">
120                                 </div>
121                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
122                                     <label>Port Number</label>
123                                     <input type="text" class="form-control" id="txtIpaddress" [(ngModel)]="referenceDataObject['port-number']" name="portNumber">
124                                 </div>
125                                 <div *ngIf="actionHealthCheck && referenceDataObject['device-protocol'] =='REST' " class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
126                                     <label>Context Url</label>
127                                     <input type="text" class="form-control" id="txtIpaddress" [(ngModel)]="referenceDataObject['url']" name="contextUrl">
128                                 </div>
129                             </div>
130                             <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;">
131                                 <div class="col-12">
132                                     <h5 style="margin-top: 0.5rem;font-family: Roboto"> VNFC Information
133                                         <span class="pull-right">
134                                             <i (click)="isCollapsedContent = !isCollapsedContent"
135                                                [ngClass]="{'fa-minus-circle':isCollapsedContent,'fa-plus-circle':!isCollapsedContent}"
136                                                class="fa" aria-hidden="true"></i>
137                                         </span>
138                                     </h5>
139                                 </div>
140                             </div>
141                             <div class="row" *ngIf="(( referenceDataObject.action =='ConfigScaleOut' ||referenceDataObject.action =='Configure'|| referenceDataObject.action =='' || referenceDataObject.action ==undefined ) && isCollapsedContent) ">
142                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
143                                     <label style="font-size:12px;">VNFC Type</label>
144                                     <input type="text" class="form-control" id="txtVnfcTypeInColl" [(ngModel)]="Sample['vnfc-type']" #vnfcType="ngModel" name="samplevnfcType">
145                                 </div>
146                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
147                                     <label style="font-size:12px">VNFC Function Code</label>
148                                     <input type="text" class="form-control" id="txtVnfcFunctionCode" [(ngModel)]="Sample['vnfc-function-code']" #vnfcFunctionCode="ngModel" name="samplevnfcFunctionCode">
149                                 </div>
150                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
151                                     <label style="font-size:12px;">IPAddress V4</label>
152                                     <select class="form-control" id="cmbIpAddedBoo" [(ngModel)]="Sample['ipaddress-v4-oam-vip']" name="sampleIpaddress">
153                                         <option [value]="hasIp" *ngFor="let hasIp of ipAddressBoolean">{{hasIp}}
154                                         </option>
155                                     </select>
156                                 </div>
157                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
158                                     <label style="font-size:12px;">Group Notation Type</label>
159                                     <select class="form-control" id="cmbGroupType" [(ngModel)]="Sample['group-notation-type']" name="sampleGroupNotation" (change)="resetGroupNotation()">
160                                         <option [value]="type" *ngFor="let type of groupAnotationType">{{type}}</option>
161                                     </select>
162                                 </div>
163                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
164                                     <label style="font-size:12px;">Group Notation Value</label>
165                                     <input type="text" class="form-control" [readonly]="disableGrpNotationValue" id="txtGroupValue" [(ngModel)]="Sample['group-notation-value']" name="sampleGroupValue">
166                                 </div>
167                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
168                                     <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
169                                     </button>
170                                 </div>
171                             </div>
172                             <hr>
173                             <div *ngIf="(referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action =='' )" class="row">
174                                 <div class="col-lg-2 col-md-2 hdden-sm-down">
175                                     <label style="margin-top: 17px;" class="headlinesInBold"> Number Of VM(s): </label>
176
177                                 </div>
178                                 <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6">
179                                     <div class="form-group">
180                                         <input type="text" placeholder="Number of VM(s)" class="form-control" id="txtVmnumber22" [(ngModel)]="refernceScopeObj.from" (ngModelChange)="numberValidation($event)" name="txtNumber23">
181                                     </div>
182                                 </div>
183                                 <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6 text-right">
184                                     <div class="form-group">
185                                         <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
186                                         </button>
187                                     </div>
188                                 </div>
189                             </div>
190                             <div *ngIf="referenceDataObject.vm?.length>0">
191                                 <div class="row" *ngFor="let noOfvm of referenceDataObject.vm  | vmFiltering:referenceDataObject?.action:templateIdentifier; trackBy:trackByFn;let j=index">
192                                     <div *ngIf="((referenceDataObject.action =='ConfigScaleOut' || referenceDataObject.action =='Configure'|| referenceDataObject.action =='' || referenceDataObject.action ==undefined ))" class="col-12">
193                                         <div class="row" *ngFor="let item of noOfvm.vnfc;trackBy:trackByFn, let i=index">
194                                             <div class="col-md-12" *ngIf="i==0">
195                                                 <h5 class="headlinesInBold">VM Number: {{j+1}}</h5>
196
197                                             </div>
198                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
199                                                 <label style="font-size:12px;">VNFC Instance No.</label>
200                                                 <input type="text" class="form-control" id="txtVmnumber" disabled='true' [(ngModel)]="item['vnfc-instance']" name="vmNumber{{j}}">
201                                             </div>
202                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
203                                                 <label style="font-size:12px;">VNFC Type</label>
204                                                 <input type="text" class="form-control" id="txtVnfcTypeInColl" required [(ngModel)]="item['vnfc-type']" #vnfcType{{j}}="ngModel" name="vnfcType{{j}}">
205                                                 <span class="error-message" [hidden]="vnfcType.valid || (vnfcType.pristine && !userForm.submitted)">Required Field</span>
206                                             </div>
207                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
208                                                 <label style="font-size:12px;">VNFC Function Code</label>
209                                                 <input type="text" class="form-control" id="txtVnfcFunctionCode" required [(ngModel)]="item['vnfc-function-code']" #vnfcFunctionCode="ngModel" name="vnfcFunctionCode{{j}}">
210                                                 <span class="error-message" [hidden]="vnfcFunctionCode.valid || (vnfcFunctionCode.pristine && !userForm.submitted)">Required Field</span>
211                                             </div>
212                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
213                                                 <label style="font-size:12px;">IPAddress V4</label>
214                                                 <select class="form-control" id="cmbIpAddress" [(ngModel)]="item['ipaddress-v4-oam-vip']" name="ipaddress{{j}}">
215                                                     <option [value]="hasIP" [selected]="item.ipAddressBoolean===hasIP"
216                                                             *ngFor="let hasIP of ipAddressBoolean">{{hasIP}}
217                                                     </option>
218                                                 </select>
219                                             </div>
220                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
221                                                 <label style="font-size:12px;">Group Notation Type</label>
222                                                 <select class="form-control" id="cmbGroupType" [(ngModel)]="item['group-notation-type']" name="selectedGroupType{{j}}">
223                                                     <option [value]="type" [selected]="item.groupNotationType===type"
224                                                             *ngFor="let type of groupAnotationType">{{type}}
225                                                     </option>
226                                                 </select>
227                                             </div>
228                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
229                                                 <label style="font-size:12px;">Group Notation Value</label>
230                                                 <input type="text" [readonly]="item['group-notation-type'] =='existing-group-name'" class="form-control" id="txtGroupValue" [(ngModel)]="item['group-notation-value']" name="selectedGroupValue{{j}}">
231                                             </div>
232                                             <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
233                                                 <div class="removevnfcClass" *ngIf="refernceScopeObj.sourceType !='vnfcType'">
234                                                     <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>
235                                                 </div>
236                                                 <div>
237                                                     <a *ngIf="(referenceDataObject.vm[j].vnfc.length-1) == i " [hidden]="true" role="button" (click)="addVnfcData(j)">Add VNFC
238                                                         Information</a>
239                                                 </div>
240                                             </div>
241                                         </div>
242                                     </div>
243                                 </div>
244                             </div>
245                         </div>
246                     </div>
247                     <div class="row" *ngIf="(referenceDataObject.action === 'OpenStack Actions')">
248                         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
249                             <div class="table-responsive" style="height:auto; overflow: auto;">
250                                 <table>
251                                     <thead>
252                                         <tr>
253                                             <td *ngFor="let item of firstArrayElement">
254                                                 <div>
255                                                     <h1 style="font-size: 110%"> {{item}} </h1>
256                                                 </div>
257                                             </td>
258                                         </tr>
259                                     </thead>
260                                     <tbody>
261                                         <tr *ngFor="let item of remUploadedDataArray; let i=index">
262                                             <td *ngFor="let subItem of item; let j=index">
263                                                 {{subItem}}
264                                             </td>
265                                         </tr>
266                                     </tbody>
267                                 </table>
268                             </div>
269                         </div>
270                     </div>
271                 </div>
272             </div>
273         </div>
274     </div>
275 </form>
276 <!-- Modal -->
277 <div id="messageModal" class="modal fade" role="dialog">
278     <div class="modal-dialog">
279         <!-- Modal content-->
280         <div class="modal-content">
281             <div class="modal-header">
282                 <button type="button" class="android-more-button mdl-button mdl-js-button mdl-button--accent" data-dismiss="modal">&times;
283                 </button>
284                 <h4 class="modal-title">Warning</h4>
285             </div>
286             <div class="modal-body">
287                 <div *ngIf="allowAction==false" class="alert  alert-danger">
288                     <b> Configure </b> action not yet saved
289                 </div>
290                 <div *ngIf="actionExist" class="alert  alert-danger">
291                     <b> {{referenceDataObject.action}}</b> already exists. Please continue...
292                 </div>
293             </div>
294             <div class="modal-footer">
295                 <button type="close" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" data-dismiss="modal">Close
296                 </button>
297             </div>
298         </div>
299     </div>
300 </div>
301 <div id="identifierModal" class="modal fade" role="dialog">
302     <div class="modal-dialog">
303         <!-- Modal content-->
304         <div class="modal-content">
305             <div class="modal-header">
306                 <button type="button" class="android-more-button mdl-button mdl-js-button mdl-button--accent" data-dismiss="modal">&times;
307                 </button>
308                 <h4 class="modal-title">Enter New Template Identifier</h4>
309             </div>
310             <div class="modal-body">
311                 <div>
312                     <div>
313                         <input pattern=".*[^ ].*" name="test" type="text" class="" [(ngModel)]="templateId" placeholder="identifier">
314                     </div>
315                 </div>
316             </div>
317             <div class="modal-footer">
318                 <div>
319                     <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" data-dismiss="modal" (click)="addToIdentDrp()">Add</button>
320                     <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="templateId=''" data-dismiss="modal">cancel</button>
321                 </div>
322             </div>
323         </div>
324     </div>
325 </div>
326 <ng-template #content let-c="close" let-d="dismiss">
327     <div class="modal-header">
328         <h6 class="modal-title">Save all changes for current action to APPC database.</h6>
329         <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
330             <span aria-hidden="true">&times;</span>
331         </button>
332     </div>
333     <div class="modal-body">
334         <p>Do you want to save the changes?</p>
335     </div>
336     <div class="modal-footer">
337         <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="c('no')">No
338         </button>
339         <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="c('yes')">Yes
340         </button>
341     </div>
342 </ng-template>
APPC Configuration Design Tool.