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

<!--
  ============LICENSE_START=======================================================
  ONAP CLAMP
  ================================================================================
  Copyright (C) 2017-2018 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>
#deletePolicy {
	height: 34px;
	background-color: #dddd;
}

.disabled {
	background-color: #dddd;
}

.fileUpload {
	position: relative;
	overflow: hidden;
	margin: 10px;
}

.fileUpload input.upload {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity = 0);
	float: left;
}

.fileDisplay {
	display: inline-block;
	overflow: hidden;
	float: right;
	margin-left: 0px;
	z-index: initial;
	text-align: center;
	margin-top: 17px;
}

.modelSearchBox {
	position: absolute;
	padding: 25px 12px;
}

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

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

#createNewPolicy {
	height: 34px;
	width: 120px; /*84*/
	background-color: #f2bfab;
}

.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;
}

#policySearch {
	height: 33px;
	font-size: 12px;
	padding: 2px 2px 2px 30px;
	margin-bottom: 5px;
	width: 100%;
}

#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>

<script type="text/javascript">
	function disablefile() {

		document.getElementById("fileUpload").disabled = true;

	}

	function disableSVN() {
		var selectLength = document.querySelectorAll(".disabled-block-container .tab-close-popup");
		if(selectLength && selectLength.length>0){
			for(var i = 0; i< selectLength.length ; i++){
				selectLength[i].disabled = true;
			}	
		}

		document.getElementById("schemaLocation").disabled = true;
		document.getElementById("userID").disabled = true;
		document.getElementById("password").disabled = true;

	}
</script>


<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="leftPolicyPanel">
				<div class="panel panel-default">
				<i class="glyphicon glyphicon-search modelSearchBox"></i>
				<input type="text" id="policySearch" onkeyup="searchPolicyList()"
						placeholder="Search ...">
					<div id="policyTableHolder">
						<table id="policyTable"></table>
					</div>
				</div>
				<div style="float: left">
				<button type="button" id="createNewPolicy" class="btn btn-sm">New Policy</button></span>
				</div>
				<div style="float: right">
				<button type="button" id="deletePolicy" class="btn btn-sm glyphicon glyphicon-trash" disabled></button></span>
				</div>
			<div id="repeatIdError" class="idError">Error: This Policy name is already taken.</div>
			<div id="newIdError" class="idError">Error: Please rename your new Policy.</div>
			<div id="spaceError" class="idError">Error: Spaces are not allowed in the ID.</div>
			</div>

		<div class="panel panel-default col-sm-9 policyPanel" style="display:none;">
				<form id="Timeoutform" class="form-horizontal">
					<div>
						<div class="form-group clearfix row">
							<label class="col-sm-2">Name</label>
							<div class="col-sm-3" style="padding: 0px;">
							<input type="text" id="pname" name="pname" maxlength="48" placeholder="Enter Unique Name" class="form-control">
							</div>

							<label class="col-sm-1">ID</label>
							<div class="col-sm-1" style="padding: 0px;">
							<input onkeydown="return false;" type="text" id="pid" name="pid" class="form-control" readonly>
							</div>

						<label for="userID" 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" maxlength="10" onkeypress="return isNumberKey(event)"
								class="form-control" id="timeout" name="timeout">
							</div>
						</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="saveProps" class="form-horizontal">
					<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"></select>
							</div>
						</div>
						<div class="form-group clearfix">
							<label for="maxRetries" class="col-sm-4 control-label">
								Max Retries</label>
							<div class="col-sm-8">
							<input type="text" maxlength="5" class="form-control" id="maxRetries"
								onkeypress="return isNumberKey(event)"
									name="maxRetries"> </input>
							</div>
						</div>
						<div class="form-group clearfix">
							<label for="retryTimeLimit" class="col-sm-4 control-label">
								Retry Time Limit</label>
							<div class="col-sm-8">
							<input type="text" maxlength="5" class="form-control" id="retryTimeLimit"
								onkeypress="return isNumberKey(event)"
									name="retryTimeLimit"></input>
							</div>
						</div>
						<div style="display: none;" class="form-group clearfix">
						<label for="_id" class="col-sm-4 control-label">
							PolicyID</label>
							<div class="col-sm-8">
							<input type="text" onkeydown="return false;"  class="form-control" id="_id"
								name="_id" value=""></input>
							</div>
						</div>
						<div class="form-group clearfix">
							<label for="parentPolicy" class="col-sm-4 control-label">
								Parent Policy</label>
							<div class="col-sm-8">
								<select class="form-control" id="parentPolicy"
								name="parentPolicy" enableFilter="true"><option value=""></option></select>
							</div>
						</div>
						<div class="form-group clearfix">
						<label for="parentPolicyConditions" class="col-sm-4 control-label">
							Parent Policy Conditions</label>
							<div class="col-sm-8">
								<select class="form-control" id="parentPolicyConditions"
									name="parentPolicyConditions" multiple></select>
							</div>
						</div>
						<div class="form-group clearfix">
							<label for="targetResourceId" class="col-sm-4 control-label">
								Target ResourceId</label>
							<div class="col-sm-8">
								<select class="form-control" name="targetResourceId" id="targetResourceId" enableFilter="true" onchange="changeTargetResourceIdOther();">
									<option value=""></option>
									<option value="Other:">Other:</option>
								</select>
							</div>
							<input type="text" style="display:none" class="form-control" id="targetResourceIdOther"
								name="targetResourceIdOther" value=""></input>
						</div>
					</div>
				</form>
			</span>
		</div>
	</div>

	<div attribute-test="policywindowpropertiesf" class="modal-footer">
		<!--<button ng-click="reset()" class="btn btn-primary" style="float:left">Reset</button>-->
		<button id="savePropsBtn" class="btn btn-primary">Close</button>
		<button ng-click="close(true)" id="close_button"
			class="btn btn-primary">Cancel</button>
	</div>

	<script>
	function changeTargetResourceIdOther() {
		if ($("#targetResourceId").val()==="Other:") {
			$("#targetResourceIdOther").show();
		} else {
			$("#targetResourceIdOther").hide();
			$("#targetResourceIdOther").val("");
		}
	}
		//Basically this method will add a new form. All forms share the same class. When you want one form to show(active form) the other forms get the 
		// css attribute display:none
		$("#add_one_more").click(function(event) {
			event.preventDefault();
			var num = add_one_more();
			setMultiSelect();
		});
		loadPropertyWindow("policy")
		
		// by default, parentPolicyConditions is disabled
		//$("#parentPolicyConditions").prop('disabled', 'disabled');
		var parent_policy={}
		var policy_ids={}
		var loadingId=false;
		var allPolicies={};
		var allPolIds=[];
		
		//Grab saved values for dropdowns
		var obj = elementMap[lastElementSelected];
		
		if (!($.isEmptyObject(obj))){
			allPolicies = jQuery.extend({}, obj);			
			for (var x in allPolicies){
				$("#policyTable").prepend("<tr><td>"+x+"</td></tr>");
				if (allPolicies[x][1]['value']){
					allPolIds.push(parseInt(allPolicies[x][1]['value']));
				}
			}
		}
		$("#pname").val('');		
		
		//load recipes for a chosen policy
		function disperseConfig(policyObj, id){
			parent_policy={};
			//remove old gui forms
			for (var i=1; i<($(".formId").length + 1); i++){
				$("#go_properties_tab"+i).parent().remove();
			}
			$(".formId").remove();
			
			if (policyObj !== undefined) {
				// Set all the Resource Invariant UUID in the target resource ID list (+Empty and other) 
				Object.keys(vf_Services["shared"]["byVf"]).forEach(function(key){
					$('#targetResourceId').append($('<option></option>').val(key).html(key));
				});

				var el = policyObj[id][3]['policyConfigurations']
				for (var i = 0; i < el.length; i++) {
					loadingId=true;
					var num = add_one_more();
					loadingId=false;
					for (var j = 0; j < el[i].length; j++) {
						if(el[i][j].hasOwnProperty("name")){
							$("#formId" + num + " #" + el[i][j].name).val(
									el[i][j].value);
							if(el[i][j].name==="_id")
								policy_ids["#formId" + num]=el[i][j].value
							if(el[i][j].name==='parentPolicy')
								parent_policy[num]=el[i][j].value 
							if(el[i][j].name==='recipe' && el[i][j].value.toString()!==''){
								$("#go_properties_tab"+num).text(el[i][j].value)
							}
							if(el[i][j].name==="targetResourceIdOther" && el[i][j].value.toString()!=='') {
								// Add the entry and set it
								$('#targetResourceId').append($('<option></option>').val($('#targetResourceIdOther').val()).html($('#targetResourceIdOther').val()));
								$('#targetResourceId').val($('#targetResourceIdOther').val());
							}
							
						}
					}
				}
				
				//Adding all the ids for parent policy options
				for(var i=1;i<=$(".formId").length;i++){
					for(k in policy_ids){
						if($("#formId"+i+" #_id").val()!==policy_ids[k].toString()  && $(k+" #recipe").val()!==undefined && $(k+" #recipe").val()!==""){
							$("#formId"+i+" #parentPolicy").append("<option value=\""+policy_ids[k]+"\">" +$(k+" #recipe").val()+"</option>");
						}
					}
				}
				
				for(k in parent_policy){
					$("#formId"+k+" #parentPolicy").val(parent_policy[k]);
					if($("#formId"+k+" #parentPolicy").val() ==""){
						$("#formId" +k+ " #parentPolicyConditions").multiselect("disable");
					} else {
						$("#formId" +k+ " #parentPolicyConditions").multiselect("enable");
					}
					// force the change event
					$("#formId"+k+" #parentPolicy").change();
				}
				
				// Now load all component with the right value defined in policyObj JSON
				for (headInd in policyObj[id]){
					if (!(policyObj[id][headInd].hasOwnProperty("policyConfigurations"))){
						$("#" + policyObj[id][headInd].name).val(policyObj[id][headInd].value);
					}
				}
			}

			setMultiSelect();
			
			if (readMOnly){
				$('select[multiple] option').each(function() {
		          var input = $('input[value="' + $(this).val() + '"]');
		          input.prop('disabled', true);
		          input.parent('li').addClass('disabled');
		        });
				$('input[value="multiselect-all"]').prop('disabled', true).parent('li').addClass('disabled');
			}
			
		}

			function addSelectListen(count) {
				var onSelectChange = function() {
					var opselected = this.selectedOptions[0].text;

					if (this.id == "recipe"){
						if(opselected!==""){
							var polCount = $(this).closest("[id^='formId']").attr("id").substring(6);
							$(this).closest(".policyPanel").find("#go_properties_tab"+polCount).text(opselected);
						} else {
							$(this).closest("[id^='go_properties_tab']").text("Policy");
						}
					}

					if (this.id=="parentPolicy"){
						var ppCond = $(this).closest("[id^='formId']").find("#parentPolicyConditions");
						if(opselected==""){
							ppCond.multiselect("clearSelection");
							ppCond.multiselect("disable");
						} else {
							ppCond.multiselect("enable");
						}
					}
				};						 
				$("#formId"+count+" select").each( function () {
					this.change = onSelectChange;
				});
			}

		
		//This is ensure there are no repeated keys in the map
		function noRepeats(form) {
			//triggered per policy.
			var select = {};
			for (var i = 0; i < form.length; i++) {
				if (select[form[i].name] === undefined)
					select[form[i].name] = []
				select[form[i].name].push(form[i].value);
			}
			var arr = []
			for (s in select) {
				var f = {}
				f.name = s
				f.value = select[s]
				arr.push(f)
			}
			return arr
		}
		
		$("#savePropsBtn").click(function(event) {
			if($("#targetResourceIdOther").is(":visible")) {
				$('#targetResourceId').append($('<option></option>').val($("#targetResourceIdOther").val()).html($("#targetResourceIdOther").val()))
				$("#targetResourceId").val($("#targetResourceIdOther").val());
			}
			$(".idError").hide();
			if ($("#policyTable .highlight td").html() !== $("#pname").val()){
				//repeated name
				if ($.inArray($("#pname").val(), Object.keys(allPolicies)) > -1){
					$("#repeatIdError").show();
					return;
				} else { //not repeated
					delete allPolicies[$("#policyTable .highlight td").html()];
				}
			}
			if ($("#pname").val().trim() == "New_Policy"){
				$("#newIdError").show();
				return;
			}
			
			//Saves edits
			/* if ($("#policyTable .highlight").length > 0){
				saveLastPolicyLocally($("#policyTable .highlight").attr("id"));
			} */
			startNextItem();
			
			//Removes outdated (deleted) policies by checking against left menu
			var finalSaveList = {};
			$("#policyTable td").each(function(){
				var tableVal = $(this).text();
				if (tableVal in allPolicies){
					finalSaveList[tableVal] = allPolicies[tableVal];
				}
			});

			saveProperties(finalSaveList);
			$("#close_button").click();
		})		

		function add_one_more() {
			$("#nav_Tabs li").removeClass("active");
			
			//FormSpan contains a block of the form that is not being displayed. We will create clones of that and add them to tabs
			var form = $($("#formSpan").children()[0]).clone()
			var count = 0;
			//Each new tab will have the formId class attached to it. This way we can track how many forms we currently have out there and assign listeners to them
			if ($(".formId").length > 0) {
				var greatest = 0;
				var s = $(".formId");
				for (var i = 0; i < s.length; i++) {
					if (parseInt($(s[i]).attr("id").substring(6)) > greatest) {
						greatest = parseInt($(s[i]).attr("id").substring(6))
					}
				}
				count = greatest + 1;
				$("#properties_tab").append(
						('<span class="formId" id="formId'+count+'"></span>'));
			} else {
				count++;
				$("#properties_tab").append(
						'<span class="formId" id="formId1"></span>');
			}
			
			//$(form).find("#policyName").val("Recipe "+makid(2))
			//TODO change up how we auto assign policyName. There could be the case where we do this and it will have repeats
			//alert($(form).find("#_id").val())
			//policyNameChangeListener(form)
			$("#add_one_more")
					.parent()
					.before(
							' <li class="active"><a id="go_properties_tab'+count+'">Policy</a><button id="tab_close'+count+'" type="button" class="close tab-close-popup" aria-hidden="true" style="margin-top: -30px;margin-right: 5px">&times;</button></li>');
			$("#formId" + count).append(form);
			$(".formId").not($("#formId" + count)).css("display", "none")
			addCustListen(count)
			//addTabListen(count)
			addSelectListen(count);
			// This is for when the process is not loading from map but being created
			if(!loadingId){
				var l=makeid()
				$(form).find("#_id").val(l)
				policy_ids["#formId" + count]=l
				var answers={}
				
				for(var i=1;i<=greatestIdNum();i++){
					if($("#formId"+i).length>0){
						answers["#formId"+i+" #parentPolicy"]=$("#formId"+i+" #parentPolicy").val();
						$("#formId"+i+" #parentPolicy").empty();
						
						for(k in policy_ids){
							if(($("#formId"+i+" #_id").val()!==policy_ids[k].toString()) && $(k+" #recipe").val()!==undefined && $(k+" #recipe").val()!==""){								
								$("#formId"+i+" #parentPolicy").append("<option value='"+policy_ids[k]+"'>"+$(k+" #recipe").val()+"</option>")
							}
						}
						$("#formId"+i+" #parentPolicy").prepend("<option value=''></option>")
					}
				}
				
				$("#formId"+count+" #parentPolicyConditions").multiselect("disable");
				
				//re-populate parent policy with chosen options
				for(k in answers){
					$(k).val(answers[k])
				}
			}
			
			return count;
		}
		
		function add_new_policy(issueNewNames) {	
			//remove old gui forms
			for (var i=1; i<($(".formId").length + 1); i++){
				$("#go_properties_tab"+i).parent().remove();
			}
			$(".formId").remove();
			
			//Reset headers
			//$("#pname").val("0");
			$("#pname").val("New_Policy");
			$("#timeout").val(defaults_props.policy.timeout);
			
			$("#add_one_more").click();
		}
		
	
		//listener will change the tab name to the recipe
 		function addTabListen(count){
			
			// disable parentPolicyConditions when a parentPolicy is not selected
			//don't think this is used..
			/* $("#formId"+count+" #parentPolicy").on("change",function(){
				if($("#formId"+count+" #parentPolicy").val().toString()==""){
					// deselect all options
					$("#formId"+count+" #parentPolicyConditions option:selected").prop("selected", false);
					// disable the select box
					$("#formId"+count+" #parentPolicyConditions").multiselect("disable");
					
				} else {
					$("#formId"+count+" #parentPolicyConditions").multiselect("enable");
					
				}
			}); */
		}
		
		function addCustListen(count) {			
			$('#go_properties_tab' + count).click(function(event) {
				$("#nav_Tabs li").removeClass("active");
				$(this).parent().addClass("active");
				$("#formId" + count).css("display", "")
				$(".formId").not($("#formId" + count)).css("display", "none")

			})
			$('#tab_close' + count).click(function(event) {
				if(document.getElementById("timeout").disabled){
					return false;
				}
				$(this).parent().remove();
				for(var i=1;i<=greatestIdNum();i++){
					if(	$("#formId"+i).length>0){
						if(i!==count ){
							if(	$("#formId"+i+" #parentPolicy").val()===$("#formId"+count+" #_id").val().toString())
								$("#formId"+i+" #parentPolicy").val("")
							$("#formId"+i+" #parentPolicy option[value='"+$("#formId"+count+" #_id").val().toString()+"']").remove();
						}
					}
				}
				delete policy_ids["#formId" + count + " #_id"]
				$("#formId" + count).remove();
			})
		}
		
		
		function greatestIdNum() {
			var greatest = 0;
			var s = $(".formId");
			for (var i = 0; i < s.length; i++) {
				if (parseInt($(s[i]).attr("id").substring(6)) > greatest) {
					greatest = parseInt($(s[i]).attr("id").substring(6))
				}
			}
			return greatest;
		}

		//Generate random id for each policy
		//Also made sure ids couldnt be repeated
		function makeid(num) {

			var text = "";
			var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
			if (num == null)
				num = 7;
			for (var i = 0; i < 7; i++)
				text += possible.charAt(Math.floor(Math.random()
						* possible.length));
			var hasValue = false;
			for (k in policy_ids) {
				if (text === policy_ids[k])
					hasValue = true
			}
			if (hasValue)
				return makeid(num);
			else
				return text
		}

		var ParentPolicy = function(id, name) {
			this.id = id
			this.name = name
		}

		//Policy table search filter
		function searchPolicyList() {
			var search = document.getElementById("policySearch");
			var row = document.getElementsByTagName("td");
			for (var i = 0; i < row.length; i++) {
				if (row[i].innerHTML.toUpperCase().indexOf(
						search.value.toUpperCase()) > -1) {
					row[i].style.display = "";
				} else {
					row[i].style.display = "none";
				}
			}
		}

		function saveLastPolicyLocally(lastPolicyId) {
			var polForm = []

			var properties = $(".saveProps").not("#formSpan .saveProps");
			var timeoutForm = $("#Timeoutform").serializeArray();

			for (var i = 0; i < timeoutForm.length; i++) {
				polForm.push(timeoutForm[i]);
			}

			var d = {}
			d["policyConfigurations"] = [];
			for (var i = 0; i < properties.length; i++) {
				var ser = $(properties[i]).serializeArray();
				var s = noRepeats(ser)
				d["policyConfigurations"].push(s);
			}
			polForm.push(d);
			allPolicies[lastPolicyId] = polForm;
		}
		
		function getNextId(){
			var newPolId;
			allPolIds.sort();
			if ((Math.min.apply(Math, allPolIds) == 0)
					&& (allPolIds.length > 0)) {
				loop1: 
					for (var i = 1; i < allPolIds.length; i++) {
						if ((allPolIds[i] - allPolIds[i - 1]) != 1) {
							newPolId = (allPolIds[i - 1] + 1);
							break loop1;
						};
					};
				if (!newPolId) {
					newPolId = (Math.max.apply(Math, allPolIds)) + 1;
				}
			} else {
				newPolId = 0;
			}
			allPolIds.push(newPolId);
			$("#pid").val(newPolId);
		}

		$("#deletePolicy").on('click', function() {
			$(".idError").hide();
			//delete policy id
			allPolIds.splice((allPolIds.indexOf(parseInt($("#pid").val()))),1);
			
			//delete policy name
			var deleteId = $("#policyTable .highlight td").html();
			delete allPolicies[deleteId];
			$("#policyTable .highlight").remove();
			$("#pname").val('');
			expandTable();
		});

		$('#policyTable').on('click', 'tr', function(event) {
			$(".idError").hide();
			//edited name
			if ($("#policyTable .highlight td").html() !== $("#pname").val()){
				//repeated name
				if ($.inArray($("#pname").val(), Object.keys(allPolicies)) > -1){
					$("#repeatIdError").show();
					return;
				} else { //not repeated
					$("#repeatIdError").hide();
					delete allPolicies[$("#policyTable .highlight td").html()];
				}
			}
			//if (parseInt($("#pname").val()) == 0){
			if ($("#pname").val().trim() == "New_Policy"){
				$("#newIdError").show();
				return;
			}
			if (!(readMOnly)){
				startNextItem();
			} else {
				if ($("#policyTable .highlight").length == 0){
					collapseTable();		
				}
			}
			$(this).addClass('highlight').siblings().removeClass('highlight');
			disperseConfig(allPolicies, $(this).find("td").html());
		});

		$('#createNewPolicy').on('click', function(){
			$(".idError").hide();
			//edited name
			if ($("#policyTable .highlight td").html() !== $("#pname").val()){
				//repeated name
				if ($.inArray($("#pname").val(), Object.keys(allPolicies)) > -1){
					$("#repeatIdError").show();
					return;
				} else { //not repeated
					$("#repeatIdError").hide();
					delete allPolicies[$("#policyTable .highlight td").html()];
				}
			}
			//if (parseInt($("#pname").val()) == 0){
			if ($("#pname").val().trim() == "New_Policy"){
				$("#newIdError").show();
				return;
			}
			startNextItem();
			add_new_policy();
			if (("#policyTable .highlight").length > 0){
				$('#policyTable tr.highlight').removeClass('highlight');
			}
            $("#policyTable").prepend("<tr class='highlight'><td>New_Policy</td></tr>");
            
            getNextId();
		});

		$('#pname').on('keypress', function(e){
			/* var newVal = $(this).val() + String.fromCharCode(e.which);
			if ((newVal>99) || (($(this).val().length>2) && e.keyCode != 46 && e.keyCode !=8)){
				e.preventDefault();
			} */
			if (e.keyCode == 32){
				$("#spaceError").show();
				e.preventDefault();
			}
		});
		
		function isNumberKey(event){
			var charCode = (event.which) ? event.which : event.keyCode
			if (charCode > 31 && (charCode < 48 || charCode > 57)){
				return false;
			}
			return true;
		}

		function startNextItem() {
			//save last item before transitioning
			var lastItem = $("#policyTable .highlight");
			if (lastItem.length > 0) {
				saveLastPolicyLocally($("#pname").val());
				//lastItem.attr("id", $("#pname").val()); 
				lastItem.find("td").html($("#pname").val());
			} else {
				collapseTable();
			}

			//allow deleting
			if ($("#deletePolicy").prop("disabled")) {
				$("#deletePolicy").prop("disabled", false);
			}
		}
		
		setASDCFields();
		
		//load metrics dropdown
		if (elementMap["global"]){
			for (var i = 0; i < (elementMap["global"].length); i++){
				if ((elementMap["global"][i]["name"]) == "actionSet"){
					var asSel = elementMap["global"][i]["value"];
					if (asSel == "vnfRecipe"){
						if (vf_Services["policy"][asSel]){
							$.each((vf_Services["policy"][asSel]), function(val, text) {
				                $('#recipe').append(
				                    $('<option></option>').val(val).html(text)
				                );
				            });
						}
						break;
					}
				};
			};
		};
		
		//Show table panel only
		function expandTable() {
			$(".policyPanel").css("display", "none");
			$(".leftPolicyPanel").removeClass("col-sm-3");
			$(".modelSearchBox").css("padding", "25px 12px");
			if (!($("#deletePolicy").prop("disabled"))) {
				$("#deletePolicy").prop("disabled", true);
			}
		}

		//Show both menus
		function collapseTable() {
			$(".leftPolicyPanel").addClass("col-sm-3");
			$(".modelSearchBox").css("padding", "10px 12px");
			$(".policyPanel").css("display", "unset");
		}
	</script>
</div>