Merge "Rework the submit operation"
[clamp.git] / src / main / resources / META-INF / resources / designer / partials / portfolios / PolicyWindow_properties.html
index 4f7a77d..203b3cd 100644 (file)
@@ -2,7 +2,7 @@
   ============LICENSE_START=======================================================
   ONAP CLAMP
   ================================================================================
-  Copyright (C) 2017 AT&T Intellectual Property. All rights
+  Copyright (C) 2017-2018 AT&T Intellectual Property. All rights
                               reserved.
   ================================================================================
   Licensed under the Apache License, Version 2.0 (the "License"); 
   limitations under the License.
   ============LICENSE_END============================================
   ===================================================================
-  ECOMP is a trademark and service mark of AT&T Intellectual Property.
+  
   -->
 
 
 <style>
-#deletePolicy{
-       height:34px;
-       background-color:#dddd;
-}
-
-.disabled{
+.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;
+label {
+       text-align: right;
+       vertical-align: middle;
 }
 
-.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{
+.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;
+.idError {
+       color: red;
+       padding: 50px 0px;
+       text-align: center;
+       display: none;
 }
 
-.policyPanel{
+.policyPanel {
        background-color: #f5f5f5;
        padding: 15px 5px 0 5px;
 }
 
-.form-group.clearfix{
-       display:-webkit-flex; 
-       display: flex; 
+.form-group.clearfix {
+       display: -webkit-flex;
+       display: flex;
        align-items: center;
 }
 
-label{
-       margin-bottom:0px; 
+label {
+       margin-bottom: 0px;
 }
 
-#policySearch{
-       height: 33px;
-       font-size: 12px;
-       padding: 2px 2px 2px 30px;
-       margin-bottom: 5px;
-       width:100%;
-}
-#policyTable{
+#policyTable {
        cursor: pointer;
-       width:100%;
+       width: 100%;
 }
 
-#policyTable tr{
+#policyTable tr {
        border-bottom: 1px solid #ddd;
        border-collapse: collapse;
        text-align: left;
@@ -122,187 +71,306 @@ label{
        font-weight: normal;
 }
 
-#policyTable td{
+#policyTable td {
        padding: 8px 10px;
 }
 
-#policyTable tr.highlight{
+#policyTable tr.highlight {
        background-color: #f5f5f5;
        font-weight: bold;
        font-size: 13px;
 }
 
-#policyTableHolder{
-       height:200px; 
-       width: 100%; 
-       overflow:auto;
+#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="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>
+
+
        <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 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 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 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>
-                                               
-                                               <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>
+                               </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>
-                       </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 class="panel-body">
+                                       <div class="tab-content">
+                                               <div id="properties_tab" class="tab-pane fade in active"></div>
+                                       </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>
+
+                       <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>
-                                       <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 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>
-                                       <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 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>
-                                       <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 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>
-                                       <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 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>                  
-                                       <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 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>
-                               </div>
-                       </form>
-               </span>
-       </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 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();
                });
-               loadPropertyWindow("policy")
                
                // by default, parentPolicyConditions is disabled
                //$("#parentPolicyConditions").prop('disabled', 'disabled');
@@ -313,8 +381,9 @@ label{
                var allPolIds=[];
                
                //Grab saved values for dropdowns
-               var obj = elementMap[lastElementSelected];
-               
+               var obj = getOperationalPolicyProperty();
+               var loadPolicy;
+               console.log("lastElementSelected :"+ lastElementSelected);
                if (!($.isEmptyObject(obj))){
                        allPolicies = jQuery.extend({}, obj);                   
                        for (var x in allPolicies){
@@ -322,12 +391,23 @@ label{
                                if (allPolicies[x][1]['value']){
                                        allPolIds.push(parseInt(allPolicies[x][1]['value']));
                                }
+                               console.log("policies found :"+ x);
+                               loadPolicy = x;
                        }
                }
-               $("#pname").val('');            
                
+               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++){
@@ -335,23 +415,33 @@ label{
                        }
                        $(".formId").remove();
                        
-                       if (policyObj !== undefined) {
+                       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")
+                                                       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();
                                                }
                                        }
                                }
@@ -376,16 +466,17 @@ label{
                                        $("#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 (readOnly||readMOnly){
+                       if (readMOnly){
                                $('select[multiple] option').each(function() {
                          var input = $('input[value="' + $(this).val() + '"]');
                          input.prop('disabled', true);
@@ -445,21 +536,14 @@ label{
                }
                
                $("#savePropsBtn").click(function(event) {
-                       $(".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;
+                       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"));
@@ -467,19 +551,24 @@ label{
                        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);
                        });
-                       
-                       saveProperties(finalSaveList);
+                       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
@@ -514,7 +603,7 @@ label{
                        $("#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){
@@ -547,42 +636,9 @@ label{
                        
                        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");
@@ -649,21 +705,8 @@ label{
                        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) {
+                       console.log("last policy id is:" + lastPolicyId);
                        var polForm = []
 
                        var properties = $(".saveProps").not("#formSpan .saveProps");
@@ -681,100 +724,29 @@ label{
                                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;
+                       for (var x in allPolicies){
+                               if (x !== lastPolicyId) {
+                                       delete allPolicies[x];
+                                       console.log("remove old policy"+ x);
                                }
-                       } 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();
-               });
+                       allPolicies[lastPolicyId] = polForm;
+               }
 
                $('#policyTable').on('click', 'tr', function(event) {
+                       
+                       console.log("click on policyTable");
                        $(".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 (!(readOnly||readMOnly)){
+
+                       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);
@@ -796,39 +768,47 @@ label{
                }
 
                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());
-                       } else {
-                               collapseTable();
                        }
+               }
 
-                       //allow deleting
-                       if ($("#deletePolicy").prop("disabled")) {
-                               $("#deletePolicy").prop("disabled", false);
+               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();
                }
-               
-               setASDCFields();
-               
+               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"]){
+               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;
-                                       } else if (asSel == "enbRecipe"){
+                                       if (asSel == "vnfRecipe" && vf_Services !== null && vf_Services !== undefined){
                                                if (vf_Services["policy"][asSel]){
                                                        $.each((vf_Services["policy"][asSel]), function(val, text) {
                                                $('#recipe').append(
@@ -841,22 +821,6 @@ label{
                                };
                        };
                };
-               
-               //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>