path: root/src/main/resources/META-INF/resources/designer/partials/portfolios/operational_policy_window.html

<!--
  ============LICENSE_START=======================================================
  ONAP CLAMP
  ================================================================================
  Copyright (C) 2017-2019 AT&T Intellectual Property. All rights
                              reserved.
  ================================================================================
  Licensed under the Apache License, Version 2.0 (the "License"); 
  you may not use this file except in compliance with the License. 
  You may obtain a copy of the License at
  
  http://www.apache.org/licenses/LICENSE-2.0
  
  Unless required by applicable law or agreed to in writing, software 
  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============================================
  ===================================================================
  
  -->


<style>
.disabled {
	background-color: #dddd;
}

label {
	text-align: right;
	vertical-align: middle;
}

.leftPolicyPanel {
	padding: 0 10px 0 0;
}

.idError {
	color: red;
	padding: 50px 0px;
	text-align: center;
	display: none;
}

.policyPanel {
	background-color: #f5f5f5;
	padding: 15px 5px 0 5px;
}

.form-group.clearfix {
	display: -webkit-flex;
	display: flex;
	align-items: center;
}

label {
	margin-bottom: 0px;
}

#policyTable {
	cursor: pointer;
	width: 100%;
}

#policyTable tr {
	border-bottom: 1px solid #ddd;
	border-collapse: collapse;
	text-align: left;
	font-size: 12px;
	font-weight: normal;
}

#policyTable td {
	padding: 8px 10px;
}

#policyTable tr.highlight {
	background-color: #f5f5f5;
	font-weight: bold;
	font-size: 13px;
}

#policyTableHolder {
	height: 200px;
	width: 100%;
	overflow: auto;
}
</style>


<div attribute-test="policywindowproperties" id="configure-widgets"
	class="disabled-block-container">
	<div attribute-test="policywindowpropertiesh" class="modal-header">
		<button type="button" class="close" ng-click="close(false)"
			aria-hidden="true" style="margin-top: -3px">&times;</button>
		<h4>Operational Policy</h4>
	</div>


	<div class="modal-body">
		<div attribute-test="policywindowpropertiesb" class="modal-body row">

			<div class="panel panel-default col-sm-10 policyPanel">
				<form id="operationalPolicyHeaderForm" class="form-horizontal">
						<div class="form-group clearfix">
							<label class="col-sm-2">Parent policy</label>
							<div class="col-sm-3" style="padding: 0px;">
								<select type="text" id="trigger_policy" name="trigger_policy"
									class="form-control" ng-model="null_dump"
									ng-init="initPolicySelect()"
									ng-options="policy for policy in policy_ids track by policy">
									<option value="">-- choose an option --</option>
									</select>
							</div>

							<label for="timeout" class="col-sm-3"
								style="padding-left: 5px; padding-right: 10px;">Overall
								Time Limit</label>
							<div class="col-sm-2" style="padding-left: 0px;">
								<input type="text" ng-pattern="/^[0-9]*$/" ng-model="number"
									class="form-control" id="timeout" name="timeout">
							</div>

							<label for="abatement" class="col-sm-2">Abatement</label>
							<div class="col-sm-2" style="padding-left: 0px;">
								<select class="form-control" id="abatement" name="abatement">
   									<option value="false" selected>False</option>
   									<option value="true">True</option>
								</select>
							</div>
						</div>
						<div class="form-group clearfix row">
   						    <label class="col-sm-4 control-label" for="clname">ControlLoopName</label>
						    <div class="col-sm-8">
							    <input type="text" class="form-control" name="controlLoopName"
								    readonly="readonly" id="clname" ng-model="clname"/>
						    </div>
						</div>
				</form>
				<div class="panel-heading" style="background-color: white;">
					<ul id="nav_Tabs" class="nav nav-tabs">
						<li class><a id="add_one_more" href="#desc_tab"><span
								class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></li>
					</ul>
				</div>
				<div class="panel-body">
					<div class="tab-content">
						<div id="properties_tab" class="tab-pane fade in active"></div>
					</div>
				</div>
			</div>

			<span id="formSpan" style="display: none">
				<form class="policyProperties" class="form-horizontal"
					style="border: 2px dotted gray;"
					title="Operational Policy Properties">

					<div class="form-group clearfix">
						<label class="col-sm-4 control-label" for="id">ID</label>
						<div class="col-sm-8">
							<input type="text" class="form-control" name="id" id="id"
								ng-keyup="updateTabLabel($event)" />
						</div>
					</div>
					<div class="form-group clearfix">
						<label class="col-sm-4 control-label" for="recipe">Recipe</label>
						<div class="col-sm-8">
							<select class="form-control" name="recipe" id="recipe"
								enableFilter="true"  ng-model="recipe" ng-click="updateGuardRecipe($event)">
								<option value="">-- choose an option --</option>
								<option value="Restart">Restart</option>
								<option value="Rebuild">Rebuild</option>
								<option value="Migrate">Migrate</option>
								<option value="Health-Check">Health-Check</option>
								<option value="ModifyConfig">ModifyConfig</option>
								<option value="VF Module Create">VF Module Create</option>
								<option value="VF Module Delete">VF Module Delete</option>
								<option value="Reroute">Reroute</option>
							</select>
						</div>
					</div>
					<div class="form-group clearfix">
						<label for="retry" class="col-sm-4 control-label"> Retry</label>
						<div class="col-sm-8">
							<input type="text" maxlength="5" class="form-control" id="retry"
								ng-pattern="/^[0-9]*$/" ng-model="number" name="retry">
							</input>
						</div>
					</div>
					<div class="form-group clearfix">
						<label for="timeout" class="col-sm-4 control-label">
							Timeout</label>
						<div class="col-sm-8">
							<input type="text" maxlength="5" class="form-control"
								id="timeout" ng-pattern="/^[0-9]*$/" ng-model="number"
								name="timeout"></input>
						</div>
					</div>

					<div class="form-group clearfix">
						<label for="actor" class="col-sm-4 control-label"> Actor</label>
						<div class="col-sm-8">
							<select class="form-control" id="actor" name="actor" ng-click="updateGuardActor($event)" ng-model="actor">
							    <option value="">-- choose an option --</option>
								<option value="APPC">APPC</option>
								<option value="SO">SO</option>
								<option value="VFC">VFC</option>
								<option value="SDNC">SDNC</option>°
								<option value="SDNR">SDNR</option>°
							</select>
						</div>

						<label for="payload" class="col-sm-4 control-label">
							Payload (YAML)</label>
						<div class="col-sm-8">
							<textarea class="form-control" id="payload" name="payload"></textarea>
						</div>
					</div>
					<div class="form-group clearfix">
						<label for="success" class="col-sm-4 control-label">When
							Success</label>
						<div class="col-sm-8">
							<select class="form-control" id="success" name="success"
								ng-model="null_dump"
								ng-options="policy for policy in policy_ids track by policy">
								<option value="">-- choose an option --</option>
								</select>
						</div>
					</div>
					<div class="form-group clearfix">
						<label for="failure" class="col-sm-4 control-label">When
							Failure</label>
						<div class="col-sm-8">
							<select class="form-control" id="failure" name="failure"
								ng-model="null_dump"
								ng-options="policy for policy in policy_ids track by policy">
								<option value="">-- choose an option --</option>
								</select>
						</div>
					</div>
					<div class="form-group clearfix">
						<label for="failure_timeout" class="col-sm-4 control-label">When
							Failure Timeout</label>
						<div class="col-sm-8">
							<select class="form-control" id="failure_timeout"
								name="failure_timeout" ng-model="null_dump"
								ng-options="policy for policy in policy_ids track by policy">
								<option value="">-- choose an option --</option>
								</select>
						</div>
					</div>
					<div class="form-group clearfix">
						<label for="failure_retries" class="col-sm-4 control-label">When
							Failure Retries</label>
						<div class="col-sm-8">
							<select class="form-control" id="failure_retries"
								name="failure_retries" ng-model="null_dump"
								ng-options="policy for policy in policy_ids track by policy">
								<option value="">-- choose an option --</option>
								</select>
						</div>
					</div>
					<div class="form-group clearfix">
						<label for="failure_exception" class="col-sm-4 control-label">When
							Failure Exception</label>
						<div class="col-sm-8">
							<select class="form-control" id="failure_exception"
								name="failure_exception" ng-model="null_dump"
								ng-options="policy for policy in policy_ids track by policy">
								<option value="">-- choose an option --</option>
								</select>
						</div>
					</div>
					<div class="form-group clearfix">
						<label for="failure_guard" class="col-sm-4 control-label">When
							Failure Guard</label>
						<div class="col-sm-8">
							<select class="form-control" id="failure_guard"
								name="failure_guard" ng-model="null_dump"
								ng-options="policy for policy in policy_ids track by policy">
								<option value="">-- choose an option --</option>
								</select>
						</div>
					</div>
				</form>
				<form class="policyTarget" class="form-horizontal"
					title="Operational Policy Target" style="border: 2px dotted gray;">
					<div class="form-group clearfix">
						<label for="type" class="col-sm-4 control-label"> Target
							Type</label>
						<div class="col-sm-8">
							<select class="form-control" name="type" id="type"
								ng-click="initTargetResourceId($event)" ng-model="type">
                						<option value="">-- choose an option --</option>                                                    
								<option value="VFModule">VFModule</option>
								<option value="VM">VM</option>
								<option value="VNF">VNF</option>
							</select>
						</div>
					</div>
					<div class="form-group clearfix">
						<label for="resourceId" class="col-sm-4 control-label">
							Target ResourceId</label>
						<div class="col-sm-8">
							<select class="form-control" name="resourceId" id="resourceId"
								enableFilter="true" ng-click="changeTargetResourceId($event)"
								ng-model="resourceId">
								<option value="">-- choose an option --</option>
							</select>
						</div>
					</div>
					<div id="metadata">
						<div class="form-group clearfix">
							<label for="modelInvariantId" class="col-sm-4 control-label">
								Model Invariant Id</label>
							<div class="col-sm-8">
								<input class="form-control" name="modelInvariantId"
									id="modelInvariantId" readonly />
							</div>
						</div>
						<div class="form-group clearfix">
							<label for="modelVersionId" class="col-sm-4 control-label">
								Model Version Id</label>
							<div class="col-sm-8">
								<input class="form-control" name="modelVersionId"
									id="modelVersionId" readonly />
							</div>
						</div>
						<div class="form-group clearfix">
							<label for="modelName" class="col-sm-4 control-label">
								Model Name</label>
							<div class="col-sm-8">
								<input class="form-control" name="modelName" id="modelName"
									readonly />
							</div>
						</div>
						<div class="form-group clearfix">
							<label for="modelVersion" class="col-sm-4 control-label">
								Model Version</label>
							<div class="col-sm-8">
								<input class="form-control" name="modelVersion"
									id="modelVersion" readonly />
							</div>
						</div>
						<div class="form-group clearfix">
							<label for="modelCustomizationId" class="col-sm-4 control-label">
								Model Customization Id</label>
							<div class="col-sm-8">
								<input class="form-control" name="modelCustomizationId"
									id="modelCustomizationId" readonly />
							</div>
						</div>
					</div>
				</form>
				<div class="form-group clearfix">
					<label for="enableGuardPolicy" class="col-sm-4 control-label">
						Enable Guard Policy</label>
					<div class="col-sm-8">
						<input type="checkbox" class="form-control"
							name="enableGuardPolicy" id="enableGuardPolicy">
					</div>

					<div class="col-sm-8">
						<label for="guardPolicyType" class="col-sm-4 control-label">
							Guard Policy Type</label> <select class="form-control"
							name="guardPolicyType" id="guardPolicyType"
							ng-change="changeGuardPolicyType()" ng-model="guardType">
							<option value="GUARD_MIN_MAX">MinMax</option>
							<option value="GUARD_YAML">FrequencyLimiter</option>
						</select>
					</div>
				</div>
				<form class="guardProperties" class="form-horizontal"
					title="Guard policy associated" style="border: 2px dotted gray;">

					<div class="form-group clearfix">
						<label class="col-sm-4 control-label" for="id">Guard Policy ID</label>
						<div class="col-sm-8">
							<input type="text" class="form-control" name="id" id="id" />
						</div>
					</div>
					<div class="form-group clearfix">
						<label class="col-sm-4 control-label" for="recipe">Recipe</label>
						<div class="col-sm-8">
							<input type="text" class="form-control" name="recipe"
								readonly="readonly" id="recipe"/>
						</div>
					</div>
					<div class="form-group clearfix">
						<label class="col-sm-4 control-label" for="clname">ControlLoopName</label>
						<div class="col-sm-8">
							<input type="text" class="form-control" name="clname"
								readonly="readonly" id="clname" ng-model="clname"/>
						</div>
					</div>
					<div class="form-group clearfix">
					    <label for="actor" class="col-sm-4 control-label">Actor</label>
						<div class="col-sm-8">
						    <input type="text" class="form-control" name="actor"
								readonly="readonly" id="actor" />
						</div>
					</div>
					<div class="form-group clearfix">

						<label for="targets" class="col-sm-4 control-label">Guard
							targets</label>
						<div class="col-sm-8">
							<input class="form-control" name="targets" id="targets" />
						</div>
					</div>

					<div class="form-group clearfix" id="minMaxGuardPolicyDiv">
						<label for="min" class="col-sm-4 control-label"> Min
							Guard</label>
						<div class="col-sm-8">
							<input class="form-control" name="min" id="min" />
						</div>
						<label for="max" class="col-sm-4 control-label"> Max
							Guard</label>
						<div class="col-sm-8">
							<input class="form-control" name="max" id="max" />
						</div>
					</div>
					<div class="form-group clearfix"
						id="frequencyLimiterGuardPolicyDiv" style="display: none">
						<label for="limit" class="col-sm-4 control-label">Limit</label>
						<div class="col-sm-8">
							<input class="form-control" name="limit" id="limit" />
						</div>
						<div class="col-sm-8">
							<select class="form-control" name="timeUnits"
								id="timeUnits">
								<option value=""></option>
								<option value="minute">minute</option>
								<option value="hour">hour</option>
								<option value="day">day</option>
								<option value="week">week</option>
								<option value="month">month</option>
								<option value="year">year</option>

							</select> <label for="timeWindow" class="col-sm-4 control-label">Time
								Window</label>
						</div>
						<div class="col-sm-8">
							<input class="form-control" name="timeWindow"
								id="timeWindow" />
						</div>
					</div>
					<div class="form-group clearfix">
						<label for="guardActiveStart" class="col-sm-4 control-label">
							Guard Active Start</label>
						<div class="col-sm-8">
							<input class="form-control" name="guardActiveStart"
								id="guardActiveStart" />
						</div>
						<label for="guardActiveEnd" class="col-sm-4 control-label">
							Guard Active End</label>
						<div class="col-sm-8">
							<input class="form-control" name="guardActiveEnd"
								id="guardActiveEnd" />
						</div>
					</div>

				</form>

			</span>
		</div>
	</div>

	<div attribute-test="policywindowpropertiesf" class="modal-footer">
		<button id="savePropsBtn" class="btn btn-primary">Close</button>
		<button ng-click="close(true)" id="close_button"
			class="btn btn-primary">Cancel</button>
	</div>

</div>