Move Javascript code 27/82927/3
authorsebdet <sebastien.determe@intl.att.com>
Thu, 21 Mar 2019 12:56:08 +0000 (13:56 +0100)
committersebdet <sebastien.determe@intl.att.com>
Fri, 29 Mar 2019 09:22:53 +0000 (10:22 +0100)
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>
src/main/resources/META-INF/resources/designer/partials/portfolios/PolicyWindow_properties.html [deleted file]
src/main/resources/META-INF/resources/designer/partials/portfolios/operational_policy_window.html [new file with mode: 0644]
src/main/resources/META-INF/resources/designer/scripts/OperationalPolicyCtrl.js
src/main/resources/META-INF/resources/designer/scripts/app.js

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 (file)
index 203b3cd..0000000
+++ /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 (file)
index 0000000..320b86f
--- /dev/null
@@ -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>
index 8e0319c..d607a49 100644 (file)
@@ -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
index 9ba7b82..8f98f70 100644 (file)
@@ -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