Gitiles
Code Review Sign In
gerrit.nordix.org / onap / policy / clamp / 7c7323d8ec54e65ac7a9a5e8c7cd8bdc755ea70a / . / ui-react / src / components / dialogs / OperationalPolicy / OperationalPolicy.js
blob: 7b4ed0f898f5533bb719bf760d850efe75fffd2a [file] [log] [blame]
sebdetc8d61302019-07-04 15:50:34 +0200[diff] [blame]1/*-
2 * ============LICENSE_START=======================================================
3 * ONAP CLAMP
4 * ================================================================================
5 * Copyright (C) 2019 AT&T Intellectual Property. All rights
6 * reserved.
7 * ================================================================================
8 * Licensed under the Apache License, Version 2.0 (the "License");
9 * you may not use this file 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 * ============LICENSE_END============================================
20 * ===================================================================
21 *
22 */
23
24import React from 'react'
25import Button from 'react-bootstrap/Button';
26import Modal from 'react-bootstrap/Modal';
27
28import './OperationalPolicy.css'
29
30class OperationalPolicy extends React.Component {
31
32 constructor(props, context) {
33 super(props, context);
34
35 this.handleShow = this.handleShow.bind(this);
36 this.handleClose = this.handleClose.bind(this);
37 this.initPolicySelect = this.initPolicySelect.bind(this);
38
39 this.allPolicies=[];
40 this.policy_ids=[];
41
42 this.state = {
43 show: false,
44 };
45 }
46
47 handleClose() {
48 this.setState({ show: false });
49 }
50
51 handleShow() {
52 this.setState({ show: true });
53 }
54
55 initPolicySelect() {
56 if (this.allPolicies['operational_policy'] === undefined || this.allPolicies['operational_policy'] === null) {
57 this.allPolicies = getOperationalPolicyProperty();
58 }
59 // Provision all policies ID first
60 if (policy_ids.length == 0 && this.allPolicies['operational_policy'] != undefined) {
61 $.each(this.allPolicies['operational_policy']['policies'], function() {
62 policy_ids.push(this['id']);
63 });
64 }
65 }
66
67 render() {
68 return (
69 <>
70 <Button variant="primary" onClick={this.handleShow}>
71 Launch demo modal
72 </Button>
73
74 <Modal size="lg" show={this.state.show} onHide={this.handleClose}>
75 <Modal.Header closeButton>
76 <Modal.Title>Modal heading</Modal.Title>
77 </Modal.Header>
78 <Modal.Body>
79 <div attribute-test="policywindowproperties" id="configure-widgets"
80 className="disabled-block-container">
81 <div attribute-test="policywindowpropertiesh" className="modal-header">
82 <button type="button" className="close" onClick="close(false)"
83 aria-hidden="true" style={{marginTop: '-3px'}}>&times;</button>
84 <h4>Operational Policy</h4>
85 </div>
86
87 <div className="modal-body">
88 <div attribute-test="policywindowpropertiesb" className="modal-body row">
89
90 <div className="panel panel-default col-sm-10 policyPanel">
91 <form id="operationalPolicyHeaderForm" className="form-horizontal">
92 <div className="form-group clearfix">
93 <label className="col-sm-2">Parent policy</label>
94 <div className="col-sm-3" style={{padding: '0px'}}>
95 <select type="text" id="trigger_policy" name="trigger_policy"
96 className="form-control" ng-init="initPolicySelect()"
97 ng-options="policy for policy in policy_ids track by policy">
98 <option value="">-- choose an option --</option>
99 </select>
100 </div>
101
102 <label htmlFor="timeout" className="col-sm-3"
103 style={{paddingLeft: '5px', paddingRight: '10px'}}>Overall
104 Time Limit</label>
105 <div className="col-sm-2" style={{paddingLeft: '0px'}}>
106 <input type="text" ng-pattern="/^[0-9]*$/" ng-model="number"
107 className="form-control" id="timeout" name="timeout"/>
108 </div>
109
110 <label htmlFor="abatement" className="col-sm-2">Abatement</label>
111 <div className="col-sm-2" style={{paddingLeft: '0px'}}>
112 <select className="form-control" id="abatement" name="abatement" onChange={this.handleChange}>
113 <option value="false">False</option>
114 <option value="true">True</option>
115 </select>
116 </div>
117 </div>
118 <div className="form-group clearfix row">
119 <label className="col-sm-4 control-label" htmlFor="clname">ControlLoopName</label>
120 <div className="col-sm-8">
121 <input type="text" className="form-control" name="controlLoopName"
122 readOnly="readonly" id="clname" ng-model="clname"/>
123 </div>
124 </div>
125 </form>
126 <div className="panel-heading" style={{backgroundColor: 'white'}}>
127 <ul id="nav_Tabs" className="nav nav-tabs">
128 <li>
129 <a id="add_one_more" href="#desc_tab">
130 <span
131 className="glyphicon glyphicon-plus" aria-hidden="true">
132 </span>
133 </a>
134 </li>
135 </ul>
136 </div>
137 <div className="panel-body">
138 <div className="tab-content">
139 <div id="properties_tab" className="tab-pane fade in active"></div>
140 </div>
141 </div>
142 </div>
143
144 <span id="formSpan" style={{display: 'none'}}>
145 <form className="policyProperties" className="form-horizontal"
146 style={{border:'2px dotted gray'}}
147 title="Operational Policy Properties">
148 <div className="form-group clearfix">
149 <label className="col-sm-4 control-label" htmlFor="id">ID</label>
150 <div className="col-sm-8">
151 <input type="text" className="form-control" name="id" id="id" ng-model="duplicated" ng-init="duplicated = false"
152 ng-keyup="updateTabLabel($event)" />
153 <span >ID must be unique</span>
154 </div>
155 </div>
156 <div className="form-group clearfix">
157 <label className="col-sm-4 control-label" htmlFor="recipe">Recipe</label>
158 <div className="col-sm-8">
159 <select className="form-control" name="recipe" id="recipe"
160 ng-model="recipe" ng-click="updateGuardRecipe($event)">
161 <option value="">-- choose an option --</option>
162 <option value="Restart">Restart</option>
163 <option value="Rebuild">Rebuild</option>
164 <option value="Migrate">Migrate</option>
165 <option value="Health-Check">Health-Check</option>
166 <option value="ModifyConfig">ModifyConfig</option>
167 <option value="VF Module Create">VF Module Create</option>
168 <option value="VF Module Delete">VF Module Delete</option>
169 <option value="Reroute">Reroute</option>
170 </select>
171 </div>
172 </div>
173 <div className="form-group clearfix">
174 <label htmlFor="retry" className="col-sm-4 control-label"> Retry</label>
175 <div className="col-sm-8">
176 <input type="text" maxLength="5" className="form-control" id="retry"
177 ng-pattern="/^[0-9]*$/" ng-model="number" name="retry">
178 </input>
179 </div>
180 </div>
181 <div className="form-group clearfix">
182 <label htmlFor="timeout" className="col-sm-4 control-label">
183 Timeout</label>
184 <div className="col-sm-8">
185 <input type="text" maxLength="5" className="form-control"
186 id="timeout" ng-pattern="/^[0-9]*$/" ng-model="number"
187 name="timeout"></input>
188 </div>
189 </div>
190
191 <div className="form-group clearfix">
192 <label htmlFor="actor" className="col-sm-4 control-label"> Actor</label>
193 <div className="col-sm-8">
194 <select className="form-control" id="actor" name="actor" ng-click="updateGuardActor($event)" ng-model="actor">
195 <option value="">-- choose an option --</option>
196 <option value="APPC">APPC</option>
197 <option value="SO">SO</option>
198 <option value="VFC">VFC</option>
199 <option value="SDNC">SDNC</option>°
200 <option value="SDNR">SDNR</option>°
201 </select>
202 </div>
203
204 <label htmlFor="payload" className="col-sm-4 control-label">
205 Payload (YAML)</label>
206 <div className="col-sm-8">
207 <textarea className="form-control" id="payload" name="payload"></textarea>
208 </div>
209 </div>
210 <div className="form-group clearfix">
211 <label htmlFor="success" className="col-sm-4 control-label">When
212 Success</label>
213 <div className="col-sm-8">
214 <select className="form-control" id="success" name="success"
215 ng-model="null_dump"
216 ng-options="policy for policy in policy_ids track by policy">
217 <option value="">-- choose an option --</option>
218 </select>
219 </div>
220 </div>
221 <div className="form-group clearfix">
222 <label htmlFor="failure" className="col-sm-4 control-label">When
223 Failure</label>
224 <div className="col-sm-8">
225 <select className="form-control" id="failure" name="failure"
226 ng-model="null_dump"
227 ng-options="policy for policy in policy_ids track by policy">
228 <option value="">-- choose an option --</option>
229 </select>
230
231 </div>
232 </div>
233 <div className="form-group clearfix">
234 <label htmlFor="failure_timeout" className="col-sm-4 control-label">When
235 Failure Timeout</label>
236 <div className="col-sm-8">
237 <select className="form-control" id="failure_timeout"
238 name="failure_timeout" ng-model="null_dump"
239 ng-options="policy for policy in policy_ids track by policy">
240 <option value="">-- choose an option --</option>
241 </select>
242 </div>
243 </div>
244 <div className="form-group clearfix">
245 <label htmlFor="failure_retries" className="col-sm-4 control-label">When
246 Failure Retries</label>
247 <div className="col-sm-8">
248 <select className="form-control" id="failure_retries"
249 name="failure_retries" ng-model="null_dump"
250 ng-options="policy for policy in policy_ids track by policy">
251 <option value="">-- choose an option --</option>
252 </select>
253 </div>
254 </div>
255 <div className="form-group clearfix">
256 <label htmlFor="failure_exception" className="col-sm-4 control-label">When
257 Failure Exception</label>
258 <div className="col-sm-8">
259 <select className="form-control" id="failure_exception"
260 name="failure_exception" ng-model="null_dump"
261 ng-options="policy for policy in policy_ids track by policy">
262 <option value="">-- choose an option --</option>
263 </select>
264 </div>
265 </div>
266 <div className="form-group clearfix">
267 <label htmlFor="failure_guard" className="col-sm-4 control-label">When
268 Failure Guard</label>
269 <div className="col-sm-8">
270 <select className="form-control" id="failure_guard"
271 name="failure_guard" ng-model="null_dump"
272 ng-options="policy for policy in policy_ids track by policy">
273 <option value="">-- choose an option --</option>
274 </select>
275 </div>
276 </div>
277 </form>
278 <form className="policyTarget" className="form-horizontal"
279 title="Operational Policy Target" style={{border: '2px dotted gray'}}>
280 <div className="form-group clearfix">
281 <label htmlFor="type" className="col-sm-4 control-label"> Target
282 Type</label>
283 <div className="col-sm-8">
284 <select className="form-control" name="type" id="type"
285 ng-click="initTargetResourceId($event)" ng-model="type">
286 <option value="">-- choose an option --</option>
287 <option value="VFMODULE">VFMODULE</option>
288 <option value="VM">VM</option>
289 <option value="VNF">VNF</option>
290 </select>
291 </div>
292 </div>
293 <div className="form-group clearfix">
294 <label htmlFor="resourceID" className="col-sm-4 control-label">
295 Target ResourceId</label>
296 <div className="col-sm-8">
297 <select className="form-control" name="resourceID" id="resourceID"
298 ng-click="changeTargetResourceId($event)"
299 ng-model="resourceId">
300 <option value="">-- choose an option --</option>
301 </select>
302 </div>
303 </div>
304 <div id="metadata">
305 <div className="form-group clearfix">
306 <label htmlFor="modelInvariantId" className="col-sm-4 control-label">
307 Model Invariant Id</label>
308 <div className="col-sm-8">
309 <input className="form-control" name="modelInvariantId"
310 id="modelInvariantId" readOnly/>
311 </div>
312 </div>
313 <div className="form-group clearfix">
314 <label htmlFor="modelVersionId" className="col-sm-4 control-label">
315 Model Version Id</label>
316 <div className="col-sm-8">
317 <input className="form-control" name="modelVersionId"
318 id="modelVersionId" readOnly/>
319 </div>
320 </div>
321 <div className="form-group clearfix">
322 <label htmlFor="modelName" className="col-sm-4 control-label">
323 Model Name</label>
324 <div className="col-sm-8">
325 <input className="form-control" name="modelName" id="modelName"
326 readOnly/>
327 </div>
328 </div>
329 <div className="form-group clearfix">
330 <label htmlFor="modelVersion" className="col-sm-4 control-label">
331 Model Version</label>
332 <div className="col-sm-8">
333 <input className="form-control" name="modelVersion"
334 id="modelVersion" readOnly/>
335 </div>
336 </div>
337 <div className="form-group clearfix">
338 <label htmlFor="modelCustomizationId" className="col-sm-4 control-label">
339 Model Customization Id</label>
340 <div className="col-sm-8">
341 <input className="form-control" name="modelCustomizationId"
342 id="modelCustomizationId" readOnly/>
343 </div>
344 </div>
345 </div>
346 </form>
347 <div className="form-group clearfix">
348 <label htmlFor="enableGuardPolicy" className="col-sm-4 control-label">
349 Enable Guard Policy</label>
350 <div className="col-sm-8">
351 <input type="checkbox" className="form-control"
352 name="enableGuardPolicy" id="enableGuardPolicy" />
353 </div>
354
355 <div className="col-sm-8">
356 <label htmlFor="guardPolicyType" className="col-sm-4 control-label">
357 Guard Policy Type</label> <select className="form-control"
358 name="guardPolicyType" id="guardPolicyType"
359 ng-click="changeGuardPolicyType()" ng-model="guardType">
360 <option value="GUARD_MIN_MAX">MinMax</option>
361 <option value="GUARD_YAML">FrequencyLimiter</option>
362 </select>
363 </div>
364 </div>
365 <form className="guardProperties" className="form-horizontal"
366 title="Guard policy associated" style={{border: '2px dotted gray'}}>
367
368 <div className="form-group clearfix withnote">
369 <label className="col-sm-4 control-label" htmlFor="id">Guard Policy ID</label>
370 <div className="col-sm-8">
371 <input type="text" className="form-control" name="id" id="id" ng-blur="changeGuardId()" ng-model="id"/>
372 </div>
373 </div>
374 <div>
375 <label className="form-group note">Note: Prefix will be added to Guard Policy ID automatically based on Guard Policy Type</label>
376 </div>
377 <div className="form-group clearfix">
378 <label className="col-sm-4 control-label" htmlFor="recipe">Recipe</label>
379 <div className="col-sm-8">
380 <input type="text" className="form-control" name="recipe"
381 readOnly="readonly" id="recipe"/>
382 </div>
383 </div>
384 <div className="form-group clearfix">
385 <label className="col-sm-4 control-label" htmlFor="clname">ControlLoopName</label>
386 <div className="col-sm-8">
387 <input type="text" className="form-control" name="clname"
388 readOnly="readonly" id="clname" ng-model="clname" />
389 </div>
390 </div>
391 <div className="form-group clearfix">
392 <label htmlFor="actor" className="col-sm-4 control-label">Actor</label>
393 <div className="col-sm-8">
394 <input type="text" className="form-control" name="actor"
395 readOnly="readonly" id="actor" />
396 </div>
397 </div>
398 <div className="form-group clearfix">
399
400 <label htmlFor="targets" className="col-sm-4 control-label">Guard
401 targets</label>
402 <div className="col-sm-8">
403 <input className="form-control" name="targets" id="targets" />
404 </div>
405 </div>
406
407 <div className="form-group clearfix" id="minMaxGuardPolicyDiv">
408 <label htmlFor="min" className="col-sm-4 control-label"> Min
409 Guard</label>
410 <div className="col-sm-8">
411 <input className="form-control" name="min" id="min" />
412 </div>
413 <label htmlFor="max" className="col-sm-4 control-label"> Max
414 Guard</label>
415 <div className="col-sm-8">
416 <input className="form-control" name="max" id="max" />
417 </div>
418 </div>
419 <div className="form-group clearfix"
420 id="frequencyLimiterGuardPolicyDiv" style={{display: 'none'}}>
421 <label htmlFor="limit" className="col-sm-4 control-label">Limit</label>
422 <div className="col-sm-8">
423 <input className="form-control" name="limit" id="limit" />
424 </div>
425 <label htmlFor="timeUnits" className="col-sm-4 control-label">Time Units</label>
426 <div className="col-sm-8">
427 <select className="form-control" name="timeUnits"
428 id="timeUnits">
429 <option value=""></option>
430 <option value="minute">minute</option>
431 <option value="hour">hour</option>
432 <option value="day">day</option>
433 <option value="week">week</option>
434 <option value="month">month</option>
435 <option value="year">year</option>
436 </select>
437 </div>
438 <label htmlFor="timeWindow" className="col-sm-4 control-label">Time Window</label>
439 <div className="col-sm-8">
440 <input className="form-control" name="timeWindow" id="timeWindow" />
441 </div>
442 </div>
443 <div className="form-group clearfix">
444 <label htmlFor="guardActiveStart" className="col-sm-4 control-label">
445 Guard Active Start</label>
446 <div className="col-sm-8">
447 <input className="form-control" name="guardActiveStart"
448 id="guardActiveStart" value="00:00:00Z"/>
449 </div>
450 <label htmlFor="guardActiveEnd" className="col-sm-4 control-label">
451 Guard Active End</label>
452 <div className="col-sm-8">
453 <input className="form-control" name="guardActiveEnd"
454 id="guardActiveEnd" value="00:00:01Z"/>
455 </div>
456 </div>
457
458 </form>
459
460 </span>
461 </div>
462 </div>
463
464 <div attribute-test="policywindowpropertiesf" className="modal-footer">
465 <button id="savePropsBtn" className="btn btn-primary" ng-disabled="duplicated">Close</button>
466 <button ng-click="close(true)" id="close_button"
467 className="btn btn-primary">Cancel</button>
468 </div>
469
470 </div>
471 </Modal.Body>
472 <Modal.Footer>
473 <Button variant="secondary" onClick={this.handleClose}>
474 Close
475 </Button>
476 <Button variant="primary" onClick={this.handleClose}>
477 Save Changes
478 </Button>
479 </Modal.Footer>
480 </Modal>
481 </>
482 );
483 }
484}
485
486export default OperationalPolicy;