Move Javascript code

Move js code outstide of the html page so that we can debug  it

Issue-ID: CLAMP-330
Change-Id: Iba5a61f7a001f0bd73f99b340380b5d6a1383831
Signed-off-by: sebdet <sebastien.determe@intl.att.com>

4 files changed, 851 insertions, 868 deletions

diff --git a/src/main/resources/META-INF/resources/designer/partials/portfolios/PolicyWindow_properties.html b/src/main/resources/META-INF/resources/designer/partials/portfolios/PolicyWindow_properties.html
deleted file mode 100644
index 203b3cd5..00000000
--- a/src/main/resources/META-INF/resources/designer/partials/portfolios/PolicyWindow_properties.html
+++ /dev/null
@@ -1,826 +0,0 @@
-<!--
-  ============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>
-.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="leftPolicyPanel" style="display: none;">
-				<div class="panel panel-default">
-					<div id="policyTableHolder">
-						<table id="policyTable"></table>
-					</div>
-				</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">
-				<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="actor" class="col-sm-4 control-label"> Actor</label>
-							<div class="col-sm-8">
-								<select class="form-control" id="actor" name="actor"></select>
-							</div>
-
-							<label for="payload" class="col-sm-4 control-label">
-								Payload (YAML)</label>
-							<div class="col-sm-8">
-								<textarea class="form-control" id="recipePayload" name=recipePayload></textarea>
-							</div>
-						</div>
-						<div class="form-group clearfix">
-							<label for="targetType" class="col-sm-4 control-label">
-								Target Type</label>
-							<div class="col-sm-8">
-								<select class="form-control" name="recipeLevel" id="recipeLevel">
-								</select>
-							</div>
-
-							<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 style="border: 2px dotted gray;">
-							<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"
-										onchange="changeGuardPolicyType();">
-										<option value="GUARD_MIN_MAX">MinMax</option>
-										<option value="GUARD_YAML">FrequencyLimiter</option>
-									</select>
-								</div>
-								<label for="guardTargets" class="col-sm-4 control-label">Guard
-									targets</label>
-								<div class="col-sm-8">
-									<input class="form-control" name="guardTargets"
-										id="guardTargets" />
-								</div>
-							</div>
-
-							<div class="form-group clearfix" id="minMaxGuardPolicyDiv">
-								<label for="minGuard" class="col-sm-4 control-label">
-									Min Guard</label>
-								<div class="col-sm-8">
-									<input class="form-control" name="minGuard" id="minGuard" />
-								</div>
-								<label for="maxGuard" class="col-sm-4 control-label">
-									Max Guard</label>
-								<div class="col-sm-8">
-									<input class="form-control" name="maxGuard" id="maxGuard" />
-								</div>
-							</div>
-							<div class="form-group clearfix"
-								id="frequencyLimiterGuardPolicyDiv" style="display: none">
-								<label for="limitGuard" class="col-sm-4 control-label">Limit</label>
-								<div class="col-sm-8">
-									<input class="form-control" name="limitGuard" id="limitGuard" />
-								</div>
-								<div class="col-sm-8">
-									<select class="form-control" name="timeUnitsGuard"
-										id="timeUnitsGuard" /> <label for="timeWindowGuard"
-										class="col-sm-4 control-label">Time Window</label>
-								</div>
-								<div class="col-sm-8">
-									<input class="form-control" name="timeWindowGuard"
-										id="timeWindowGuard" />
-								</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>
-						</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>
-
-	<script>
-		function getAllFormId() {
-			return Array.from(document.getElementsByClassName("formId"));
-		}
-
-		function searchActiveFormId() {
-			var formArray = getAllFormId();
-			for (var i=0, max=formArray.length; i < max; i++) {
-				
-				console.log("Search active FormId, current element "+formArray[i].id);
-				if (formArray[i].style.display !== "none") {
-					console.log("Active form is:"+formArray[i].id);
-					return formArray[i];
-				}
-			}
-			console.log("No active formId found !");
-		}
-
-		function initTargetResourceId() {
-			if (vf_Services !== null && vf_Services !== 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));
-			});
-			}
-		}
-		
-		function changeTargetResourceIdOther() {
-			var formItemActive = searchActiveFormId();
-			if ($("#"+formItemActive.id+" #targetResourceId").val()==="Other:") {
-				$("#"+formItemActive.id+" #targetResourceIdOther").show();
-			} else {
-				$("#"+formItemActive.id+" #targetResourceIdOther").hide();
-				$("#"+formItemActive.id+" #targetResourceIdOther").val("");
-			}
-		}
-
-		function changeGuardPolicyType() {
-			var formItemActive = searchActiveFormId();
-			if ($("#"+formItemActive.id+" #guardPolicyType").val()==="GUARD_MIN_MAX") {
-				$("#"+formItemActive.id+" #minMaxGuardPolicyDiv").show();
-				$("#"+formItemActive.id+" #frequencyLimiterGuardPolicyDiv").hide();
-			} else if ($("#"+formItemActive.id+" #guardPolicyType").val()==="GUARD_YAML") {
-				$("#"+formItemActive.id+" #minMaxGuardPolicyDiv").hide();
-				$("#"+formItemActive.id+" #frequencyLimiterGuardPolicyDiv").show();
-			}
-		}
-		//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) {
-			console.log("add one more");
-			event.preventDefault();
-			var num = add_one_more();
-			setMultiSelect();
-		});
-		
-		// 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 = getOperationalPolicyProperty();
-		var loadPolicy;
-		console.log("lastElementSelected :"+ 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']));
-				}
-				console.log("policies found :"+ x);
-				loadPolicy = x;
-			}
-		}
-		
-		if (loadPolicy !== undefined && loadPolicy !== null) {
-			// load properties
-			console.log("load properties");
-			disperseConfig(allPolicies,loadPolicy);
-		} else  {
-			console.log("create new policy");
-			add_new_policy();
-		}		
-
-		//load recipes for a chosen policy
-		function disperseConfig(policyObj, id){
-			console.log("disperseConfig with id:" + 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 && policyObj[id] !== undefined) {
-				var el = policyObj[id][3]['policyConfigurations']
-				for (var i = 0; i < el.length; i++) {
-					loadingId=true;
-					var num = add_one_more();
-					console.log("number is=:" + num);
-					loadingId=false;
-					for (var j = 0; j < el[i].length; j++) {
-						console.log("attr:" + el[i][j].name + "; value is:" + el[i][j].value);
-						if(el[i][j].hasOwnProperty("name")){
-							$("#formId" + num + " #" + el[i][j].name).val(
-									el[i][j].value);
-							if(el[i][j].name==="_id") {
-								console.log("formId num:" + num + "; value is:" + el[i][j].value);
-								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
-								$("#formId" + num + " #targetResourceId").append($('<option></option>').val($("#formId" + num + " #targetResourceIdOther").val()).html($("#formId" + num + " #targetResourceIdOther").val()));
-								$("#formId" + num + " #targetResourceId").val($("#formId" + num + " #targetResourceIdOther").val());
-							}
-							changeGuardPolicyType();
-						}
-					}
-				}
-				
-				//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) {
-			console.log("save properties triggered");
-			if($("#targetResourceIdOther").is(":visible")) {
-				$('#targetResourceId').append($('<option></option>').val($("#targetResourceIdOther").val()).html($("#targetResourceIdOther").val()))
-				$("#targetResourceId").val($("#targetResourceIdOther").val());
-			}
-			$(".idError").hide();
-
-			console.log("save properties triggered2");
-			//Saves edits
-			/* if ($("#policyTable .highlight").length > 0){
-				saveLastPolicyLocally($("#policyTable .highlight").attr("id"));
-			} */
-			startNextItem();
-			
-			//Removes outdated (deleted) policies by checking against left menu
-			console.log("get all policies");
-			var finalSaveList = {};
-			$("#policyTable td").each(function(){
-				console.log("enter policy table each loop");
-				var tableVal = $(this).text();
-				if (tableVal in allPolicies){
-					finalSaveList[tableVal] = allPolicies[tableVal];
-				}
-				console.log("save properties; add tableVal to policies: "+ tableVal);
-			});
-			var scope = angular.element(document.getElementById('formSpan')).scope();
-			scope.submitForm(finalSaveList);
-			$("#close_button").click();
-		})		
-
-		function add_one_more() {
-			console.log("add one more");
-			setPolicyOptions();
-			$("#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)
-
-			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 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
-		}
-
-		function saveLastPolicyLocally(lastPolicyId) {
-			console.log("last policy id is:" + 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);
-		
-			for (var x in allPolicies){
-				if (x !== lastPolicyId) {
-					delete allPolicies[x];
-					console.log("remove old policy"+ x);
-				}
-			}
-			
-			allPolicies[lastPolicyId] = polForm;
-		}
-
-		$('#policyTable').on('click', 'tr', function(event) {
-			
-			console.log("click on policyTable");
-			$(".idError").hide();
-
-			if (!(readMOnly)){
-				startNextItem();
-			}
-			$(this).addClass('highlight').siblings().removeClass('highlight');
-			disperseConfig(allPolicies, $(this).find("td").html());
-		});
-
-
-		$('#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() {
-			console.log("start next Item, policyname is:" + $("#pname").val());
-			//save last item before transitioning
-			var lastItem = $("#policyTable .highlight");
-			console.log("start next Item, lastitem is:" + lastItem);
-			if (lastItem.length > 0) {
-				console.log("start next Item length > 0");
-				saveLastPolicyLocally($("#pname").val());
-				//lastItem.attr("id", $("#pname").val()); 
-				lastItem.find("td").html($("#pname").val());
-			}
-		}
-
-		function add_new_policy(issueNewNames) {	
-			console.log("add new policy");
-			//remove old gui forms
-			for (var i=1; i<($(".formId").length + 1); i++){
-				$("#go_properties_tab"+i).parent().remove();
-			}
-			$(".formId").remove();
-			$("#pname").val("New_Policy");
-			$("#timeout").val(getOperationalPolicyProperty().timeout);
-
-			$("#add_one_more").click();
-		}
-		console.log("start next Item on 796");
-		startNextItem();
-
-		if (("#policyTable .highlight").length > 0){
-			$('#policyTable tr.highlight').removeClass('highlight');
-		}
-        $("#policyTable").prepend("<tr class='highlight'><td>New_Policy</td></tr>");
-
-		$("#pid").val(0);
-
-		initTargetResourceId();
-		//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" && vf_Services !== null && vf_Services !== undefined){
-						if (vf_Services["policy"][asSel]){
-							$.each((vf_Services["policy"][asSel]), function(val, text) {
-				                $('#recipe').append(
-				                    $('<option></option>').val(val).html(text)
-				                );
-				            });
-						}
-						break;
-					}
-				};
-			};
-		};
-
-	</script>
-</div>
diff --git a/src/main/resources/META-INF/resources/designer/partials/portfolios/operational_policy_window.html b/src/main/resources/META-INF/resources/designer/partials/portfolios/operational_policy_window.html
new file mode 100644
index 00000000..320b86fe
--- /dev/null
+++ b/src/main/resources/META-INF/resources/designer/partials/portfolios/operational_policy_window.html
@@ -0,0 +1,319 @@
+<!--
+  ============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>
+.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="leftPolicyPanel" style="display: none;">
+				<div class="panel panel-default">
+					<div id="policyTableHolder">
+						<table id="policyTable"></table>
+					</div>
+				</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">
+				<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"
+									ng-keypress="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" ng-keypress="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" ng-keypress="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="actor" class="col-sm-4 control-label"> Actor</label>
+							<div class="col-sm-8">
+								<select class="form-control" id="actor" name="actor"></select>
+							</div>
+
+							<label for="payload" class="col-sm-4 control-label">
+								Payload (YAML)</label>
+							<div class="col-sm-8">
+								<textarea class="form-control" id="recipePayload" name=recipePayload></textarea>
+							</div>
+						</div>
+						<div class="form-group clearfix">
+							<label for="targetType" class="col-sm-4 control-label">
+								Target Type</label>
+							<div class="col-sm-8">
+								<select class="form-control" name="recipeLevel" id="recipeLevel">
+								</select>
+							</div>
+
+							<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"
+									ng-change="changeTargetResourceIdOther()" ng-model="targetResource" >
+									<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 style="border: 2px dotted gray;">
+							<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>
+								<label for="guardTargets" class="col-sm-4 control-label">Guard
+									targets</label>
+								<div class="col-sm-8">
+									<input class="form-control" name="guardTargets"
+										id="guardTargets" />
+								</div>
+							</div>
+
+							<div class="form-group clearfix" id="minMaxGuardPolicyDiv">
+								<label for="minGuard" class="col-sm-4 control-label">
+									Min Guard</label>
+								<div class="col-sm-8">
+									<input class="form-control" name="minGuard" id="minGuard" />
+								</div>
+								<label for="maxGuard" class="col-sm-4 control-label">
+									Max Guard</label>
+								<div class="col-sm-8">
+									<input class="form-control" name="maxGuard" id="maxGuard" />
+								</div>
+							</div>
+							<div class="form-group clearfix"
+								id="frequencyLimiterGuardPolicyDiv" style="display: none">
+								<label for="limitGuard" class="col-sm-4 control-label">Limit</label>
+								<div class="col-sm-8">
+									<input class="form-control" name="limitGuard" id="limitGuard" />
+								</div>
+								<div class="col-sm-8">
+									<select class="form-control" name="timeUnitsGuard"
+										id="timeUnitsGuard" /> <label for="timeWindowGuard"
+										class="col-sm-4 control-label">Time Window</label>
+								</div>
+								<div class="col-sm-8">
+									<input class="form-control" name="timeWindowGuard"
+										id="timeWindowGuard" />
+								</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>
+						</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>
diff --git a/src/main/resources/META-INF/resources/designer/scripts/OperationalPolicyCtrl.js b/src/main/resources/META-INF/resources/designer/scripts/OperationalPolicyCtrl.js
index 8e0319c1..d607a49d 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/OperationalPolicyCtrl.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/OperationalPolicyCtrl.js
@@ -24,44 +24,534 @@ app
 .controller(
 'operationalPolicyCtrl',
 [
-'$scope',
-'$rootScope',
-'$uibModalInstance',
-'data',
-'operationalPolicyService',
-'dialogs',
-function($scope, $rootScope, $uibModalInstance, data, operationalPolicyService, 
-         dialogs) {
-	console.log("//////operationalPolicyCtrl");
-	// Below code is added to get the policyNames
-	var policies = getOperationalPolicyProperty();
-	for ( var obj in policies) {
-			if (!($.isEmptyObject(obj))) {
-				allPolicies = jQuery.extend({}, obj);
-				$scope.policyNames = [];
-				for ( var policy in allPolicies) {
-					$scope.policyNames.push(policy);
-				}
-			}
-	}
-	setTimeout(function() {
-		console.log("setTimeout");
-		setMultiSelect();
-	}, 100);
-	$scope.close = function() {
-		console.log("close");
-		$uibModalInstance.close("closed");
-	};
-
-	$scope.submitForm = function(obj) {
-		var operationalPolicies = getOperationalPolicies();
-		if (obj !== null) {
-			operationalPolicies[0]["configurationsJson"] = obj;
-		}
-		operationalPolicyService.saveOpPolicyProperties(operationalPolicies).then(function(pars) {
- 			updateOpPolicyProperties(operationalPolicies);
- 		}, function(data) {
- 		});
-     };
-
-} ]);
\ No newline at end of file
+    '$scope',
+    '$rootScope',
+    '$uibModalInstance',
+    'data',
+    'operationalPolicyService',
+    'dialogs',
+    function($scope, $rootScope, $uibModalInstance, data, operationalPolicyService, dialogs) {
+
+	    console.log("//////operationalPolicyCtrl");
+	    var parent_policy = {}
+	    var policy_ids = {}
+	    var loadingId = false;
+	    var allPolicies = {};
+	    var allPolIds = [];
+	    
+	    $scope.guardType="GUARD_MIN_MAX";
+	    $scope.targetResource="";
+	    function getAllFormId() {
+
+		    return Array.from(document.getElementsByClassName("formId"));
+	    }
+	    function searchActiveFormId() {
+
+		    var formArray = getAllFormId();
+		    for (var i = 0, max = formArray.length; i < max; i++) {
+			    console.log("Search active FormId, current element " + formArray[i].id);
+			    if (formArray[i].style.display !== "none") {
+				    console.log("Active form is:" + formArray[i].id);
+				    return formArray[i];
+			    }
+		    }
+		    console.log("No active formId found !");
+	    }
+	    function initTargetResourceId() {
+
+		    if (vf_Services !== null && vf_Services !== 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));
+			    });
+		    }
+	    }
+	    // load recipes for a chosen policy
+	    function disperseConfig(policyObj, id) {
+
+		    console.log("disperseConfig with id:" + 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 && policyObj[id] !== undefined) {
+			    var el = policyObj[id][3]['policyConfigurations']
+			    for (var i = 0; i < el.length; i++) {
+				    loadingId = true;
+				    var num = add_one_more();
+				    console.log("number is=:" + num);
+				    loadingId = false;
+				    for (var j = 0; j < el[i].length; j++) {
+					    console.log("attr:" + el[i][j].name + "; value is:" + el[i][j].value);
+					    if (el[i][j].hasOwnProperty("name")) {
+						    $("#formId" + num + " #" + el[i][j].name).val(el[i][j].value);
+						    if (el[i][j].name === "_id") {
+							    console.log("formId num:" + num + "; value is:" + el[i][j].value);
+							    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
+							    $("#formId" + num + " #targetResourceId").append(
+							    $('<option></option>').val($("#formId" + num + " #targetResourceIdOther").val()).html(
+							    $("#formId" + num + " #targetResourceIdOther").val()));
+							    $("#formId" + num + " #targetResourceId").val(
+							    $("#formId" + num + " #targetResourceIdOther").val());
+						    }
+						    $scope.changeGuardPolicyType();
+					    }
+				    }
+			    }
+			    // 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
+	    }
+	    function add_one_more() {
+
+		    console.log("add one more");
+		    setPolicyOptions();
+		    $("#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)
+		    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 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
+	    // }
+	    function saveLastPolicyLocally(lastPolicyId) {
+
+		    console.log("last policy id is:" + 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);
+		    for ( var x in allPolicies) {
+			    if (x !== lastPolicyId) {
+				    delete allPolicies[x];
+				    console.log("remove old policy" + x);
+			    }
+		    }
+		    allPolicies[lastPolicyId] = polForm;
+	    }
+	    function startNextItem() {
+
+		    console.log("start next Item, policyname is:" + $("#pname").val());
+		    // save last item before transitioning
+		    var lastItem = $("#policyTable .highlight");
+		    console.log("start next Item, lastitem is:" + lastItem);
+		    if (lastItem.length > 0) {
+			    console.log("start next Item length > 0");
+			    saveLastPolicyLocally($("#pname").val());
+			    // lastItem.attr("id", $("#pname").val());
+			    lastItem.find("td").html($("#pname").val());
+		    }
+	    }
+	    function add_new_policy(issueNewNames) {
+
+		    console.log("add new policy");
+		    // remove old gui forms
+		    for (var i = 1; i < ($(".formId").length + 1); i++) {
+			    $("#go_properties_tab" + i).parent().remove();
+		    }
+		    $(".formId").remove();
+		    $("#pname").val("New_Policy");
+		    $("#timeout").val(getOperationalPolicyProperty().timeout);
+		    $("#add_one_more").click();
+	    }
+	    $scope.changeTargetResourceIdOther = function() {
+
+		    var formItemActive = searchActiveFormId();
+		    if (formItemActive === undefined)
+			    return;
+		    if ($("#" + formItemActive.id + " #targetResourceId").val() === "Other:") {
+			    $("#" + formItemActive.id + " #targetResourceIdOther").show();
+		    } else {
+			    $("#" + formItemActive.id + " #targetResourceIdOther").hide();
+			    $("#" + formItemActive.id + " #targetResourceIdOther").val("");
+		    }
+	    }
+	    $scope.changeGuardPolicyType = function() {
+
+		    var formItemActive = searchActiveFormId();
+		    if (formItemActive === undefined)
+			    return;
+		    if ($("#" + formItemActive.id + " #guardPolicyType").val() === "GUARD_MIN_MAX") {
+			    $("#" + formItemActive.id + " #minMaxGuardPolicyDiv").show();
+			    $("#" + formItemActive.id + " #frequencyLimiterGuardPolicyDiv").hide();
+		    } else if ($("#" + formItemActive.id + " #guardPolicyType").val() === "GUARD_YAML") {
+			    $("#" + formItemActive.id + " #minMaxGuardPolicyDiv").hide();
+			    $("#" + formItemActive.id + " #frequencyLimiterGuardPolicyDiv").show();
+		    }
+	    }
+	    $scope.init = function() {
+
+		    $(function() {
+
+			    $("#add_one_more").click(function(event) {
+
+				    console.log("add one more");
+				    event.preventDefault();
+				    var num = add_one_more();
+				    setMultiSelect();
+			    });
+			    var obj = getOperationalPolicyProperty();
+			    var loadPolicy;
+			    console.log("lastElementSelected :" + 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']));
+					    }
+					    console.log("policies found :" + x);
+					    loadPolicy = x;
+				    }
+			    }
+			    if (loadPolicy !== undefined && loadPolicy !== null) {
+				    // load properties
+				    console.log("load properties");
+				    disperseConfig(allPolicies, loadPolicy);
+			    } else {
+				    console.log("create new policy");
+				    add_new_policy();
+			    }
+			    $("#savePropsBtn").click(
+			    function(event) {
+
+				    console.log("save properties triggered");
+				    if ($("#targetResourceIdOther").is(":visible")) {
+					    $('#targetResourceId').append(
+					    $('<option></option>').val($("#targetResourceIdOther").val()).html(
+					    $("#targetResourceIdOther").val()))
+					    $("#targetResourceId").val($("#targetResourceIdOther").val());
+				    }
+				    $(".idError").hide();
+				    console.log("save properties triggered2");
+				    startNextItem();
+				    console.log("get all policies");
+				    var finalSaveList = {};
+				    $("#policyTable td").each(function() {
+
+					    console.log("enter policy table each loop");
+					    var tableVal = $(this).text();
+					    if (tableVal in allPolicies) {
+						    finalSaveList[tableVal] = allPolicies[tableVal];
+					    }
+					    console.log("save properties; add tableVal to policies: " + tableVal);
+				    });
+				    var scope = angular.element(document.getElementById('formSpan')).scope();
+				    scope.submitForm(finalSaveList);
+				    $("#close_button").click();
+			    });
+			    $('#policyTable').on('click', 'tr', function(event) {
+
+				    console.log("click on policyTable");
+				    $(".idError").hide();
+				    if (!(readMOnly)) {
+					    startNextItem();
+				    }
+				    $(this).addClass('highlight').siblings().removeClass('highlight');
+				    disperseConfig(allPolicies, $(this).find("td").html());
+			    });
+			    $('#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();
+				    }
+			    });
+			    console.log("start next Item on 796");
+			    startNextItem();
+			    if (("#policyTable .highlight").length > 0) {
+				    $('#policyTable tr.highlight').removeClass('highlight');
+			    }
+			    $("#policyTable").prepend("<tr class='highlight'><td>New_Policy</td></tr>");
+			    $("#pid").val(0);
+			    initTargetResourceId();
+			    // 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" && vf_Services !== null && vf_Services !== undefined) {
+							    if (vf_Services["policy"][asSel]) {
+								    $.each((vf_Services["policy"][asSel]), function(val, text) {
+
+									    $('#recipe').append($('<option></option>').val(val).html(text));
+								    });
+							    }
+							    break;
+						    }
+					    }
+				    }
+			    }
+		    });
+	    }
+	    $scope.init();
+	    $scope.isNumberKey = function(event) {
+
+		    var charCode = (event.which) ? event.which : event.keyCode
+		    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
+			    return false;
+		    }
+		    return true;
+	    }
+//	    setTimeout(function() {
+//
+//		    console.log("setTimeout");
+//		    setMultiSelect();
+//	    }, 100);
+	    $scope.close = function() {
+
+		    console.log("close");
+		    $uibModalInstance.close("closed");
+	    };
+	    $scope.submitForm = function(obj) {
+
+		    var operationalPolicies = JSON.parse(JSON.stringify(getOperationalPolicies()));
+		    if (obj !== null) {
+			    operationalPolicies[0]["configurationsJson"] = obj;
+		    }
+		    operationalPolicyService.saveOpPolicyProperties(operationalPolicies).then(function(pars) {
+
+			    updateOpPolicyProperties(operationalPolicies);
+		    }, function(data) {
+
+		    });
+	    };
+    } ]);
\ No newline at end of file
diff --git a/src/main/resources/META-INF/resources/designer/scripts/app.js b/src/main/resources/META-INF/resources/designer/scripts/app.js
index 9ba7b82c..8f98f708 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/app.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/app.js
@@ -625,7 +625,7 @@ function($scope, $rootScope, $timeout, dialogs) {
 	    $scope.PolicyWindow = function(policy) {
 
 		    var dlg = dialogs.create(
-		    'partials/portfolios/PolicyWindow_properties.html',
+		    'partials/portfolios/operational_policy_window.html',
 		    'operationalPolicyCtrl', {
 		        closable : true,
 		        draggable : true