2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright (C) 2019 AT&T Intellectual Property. All rights
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
12 * http://www.apache.org/licenses/LICENSE-2.0
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 * ===================================================================
24 import React from 'react'
25 import Button from 'react-bootstrap/Button';
26 import Modal from 'react-bootstrap/Modal';
28 import './OperationalPolicy.css'
30 class OperationalPolicy extends React.Component {
32 constructor(props, context) {
33 super(props, context);
35 this.handleShow = this.handleShow.bind(this);
36 this.handleClose = this.handleClose.bind(this);
37 this.initPolicySelect = this.initPolicySelect.bind(this);
48 this.setState({ show: false });
52 this.setState({ show: true });
56 if (this.allPolicies['operational_policy'] === undefined || this.allPolicies['operational_policy'] === null) {
57 this.allPolicies = getOperationalPolicyProperty();
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']);
70 <Button variant="primary" onClick={this.handleShow}>
74 <Modal size="lg" show={this.state.show} onHide={this.handleClose}>
75 <Modal.Header closeButton>
76 <Modal.Title>Modal heading</Modal.Title>
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'}}>×</button>
84 <h4>Operational Policy</h4>
87 <div className="modal-body">
88 <div attribute-test="policywindowpropertiesb" className="modal-body row">
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>
102 <label htmlFor="timeout" className="col-sm-3"
103 style={{paddingLeft: '5px', paddingRight: '10px'}}>Overall
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"/>
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>
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"/>
126 <div className="panel-heading" style={{backgroundColor: 'white'}}>
127 <ul id="nav_Tabs" className="nav nav-tabs">
129 <a id="add_one_more" href="#desc_tab">
131 className="glyphicon glyphicon-plus" aria-hidden="true">
137 <div className="panel-body">
138 <div className="tab-content">
139 <div id="properties_tab" className="tab-pane fade in active"></div>
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>
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>
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">
181 <div className="form-group clearfix">
182 <label htmlFor="timeout" className="col-sm-4 control-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>
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>°
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>
210 <div className="form-group clearfix">
211 <label htmlFor="success" className="col-sm-4 control-label">When
213 <div className="col-sm-8">
214 <select className="form-control" id="success" name="success"
216 ng-options="policy for policy in policy_ids track by policy">
217 <option value="">-- choose an option --</option>
221 <div className="form-group clearfix">
222 <label htmlFor="failure" className="col-sm-4 control-label">When
224 <div className="col-sm-8">
225 <select className="form-control" id="failure" name="failure"
227 ng-options="policy for policy in policy_ids track by policy">
228 <option value="">-- choose an option --</option>
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>
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>
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>
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>
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
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>
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>
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/>
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/>
321 <div className="form-group clearfix">
322 <label htmlFor="modelName" className="col-sm-4 control-label">
324 <div className="col-sm-8">
325 <input className="form-control" name="modelName" id="modelName"
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/>
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/>
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" />
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>
365 <form className="guardProperties" className="form-horizontal"
366 title="Guard policy associated" style={{border: '2px dotted gray'}}>
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"/>
375 <label className="form-group note">Note: Prefix will be added to Guard Policy ID automatically based on Guard Policy Type</label>
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"/>
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" />
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" />
398 <div className="form-group clearfix">
400 <label htmlFor="targets" className="col-sm-4 control-label">Guard
402 <div className="col-sm-8">
403 <input className="form-control" name="targets" id="targets" />
407 <div className="form-group clearfix" id="minMaxGuardPolicyDiv">
408 <label htmlFor="min" className="col-sm-4 control-label"> Min
410 <div className="col-sm-8">
411 <input className="form-control" name="min" id="min" />
413 <label htmlFor="max" className="col-sm-4 control-label"> Max
415 <div className="col-sm-8">
416 <input className="form-control" name="max" id="max" />
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" />
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"
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>
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" />
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"/>
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"/>
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>
473 <Button variant="secondary" onClick={this.handleClose}>
476 <Button variant="primary" onClick={this.handleClose}>
486 export default OperationalPolicy;