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

   1 <!--
   2   ============LICENSE_START=======================================================
   3   ONAP CLAMP
   4   ================================================================================
   5   Copyright (C) 2017-2018 AT&T Intellectual Property. All rights
   6                               reserved.
   7   ================================================================================
   8   Licensed under the Apache License, Version 2.0 (the "License");
   9   you may not use this file except in compliance with the License.
  10   You may obtain a copy of the License at
  11
  12   http://www.apache.org/licenses/LICENSE-2.0
  13
  14   Unless required by applicable law or agreed to in writing, software
  15   distributed under the License is distributed on an "AS IS" BASIS,
  16   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17   See the License for the specific language governing permissions and
  18   limitations under the License.
  19   ============LICENSE_END============================================
  20   ===================================================================
  21
  22   -->
  23
  24
  25 <style>
  26 #deletePolicy {
  27         height: 34px;
  28         background-color: #dddd;
  29 }
  30
  31 .disabled {
  32         background-color: #dddd;
  33 }
  34
  35 .modelSearchBox {
  36         position: absolute;
  37         padding: 25px 12px;
  38 }
  39
  40 label {
  41         text-align: right;
  42         vertical-align: middle;
  43 }
  44
  45 .leftPolicyPanel {
  46         padding: 0 10px 0 0;
  47 }
  48
  49 #createNewPolicy {
  50         height: 34px;
  51         width: 120px; /*84*/
  52         background-color: #f2bfab;
  53 }
  54
  55 .idError {
  56         color: red;
  57         padding: 50px 0px;
  58         text-align: center;
  59         display: none;
  60 }
  61
  62 .policyPanel {
  63         background-color: #f5f5f5;
  64         padding: 15px 5px 0 5px;
  65 }
  66
  67 .form-group.clearfix {
  68         display: -webkit-flex;
  69         display: flex;
  70         align-items: center;
  71 }
  72
  73 label {
  74         margin-bottom: 0px;
  75 }
  76
  77 #policySearch {
  78         height: 33px;
  79         font-size: 12px;
  80         padding: 2px 2px 2px 30px;
  81         margin-bottom: 5px;
  82         width: 100%;
  83 }
  84
  85 #policyTable {
  86         cursor: pointer;
  87         width: 100%;
  88 }
  89
  90 #policyTable tr {
  91         border-bottom: 1px solid #ddd;
  92         border-collapse: collapse;
  93         text-align: left;
  94         font-size: 12px;
  95         font-weight: normal;
  96 }
  97
  98 #policyTable td {
  99         padding: 8px 10px;
 100 }
 101
 102 #policyTable tr.highlight {
 103         background-color: #f5f5f5;
 104         font-weight: bold;
 105         font-size: 13px;
 106 }
 107
 108 #policyTableHolder {
 109         height: 200px;
 110         width: 100%;
 111         overflow: auto;
 112 }
 113 </style>
 114
 115
 116 <div attribute-test="policywindowproperties" id="configure-widgets"
 117         class="disabled-block-container">
 118         <div attribute-test="policywindowpropertiesh" class="modal-header">
 119                 <button type="button" class="close" ng-click="close(false)"
 120                         aria-hidden="true" style="margin-top: -3px">&times;</button>
 121                 <h4>Operational Policy</h4>
 122         </div>
 123
 124
 125         <div class="modal-body">
 126                 <div attribute-test="policywindowpropertiesb" class="modal-body row">
 127
 128                         <div class="leftPolicyPanel">
 129                                 <div class="panel panel-default">
 130                                         <i class="glyphicon glyphicon-search modelSearchBox"></i> <input
 131                                                 type="text" id="policySearch" onkeyup="searchPolicyList()"
 132                                                 placeholder="Search ...">
 133                                         <div id="policyTableHolder">
 134                                                 <table id="policyTable"></table>
 135                                         </div>
 136                                 </div>
 137                                 <div style="float: left">
 138                                         <button type="button" id="createNewPolicy" class="btn btn-sm">New
 139                                                 Policy</button>
 140                                         </span>
 141                                 </div>
 142                                 <div style="float: right">
 143                                         <button type="button" id="deletePolicy"
 144                                                 class="btn btn-sm glyphicon glyphicon-trash" disabled></button>
 145                                         </span>
 146                                 </div>
 147                                 <div id="repeatIdError" class="idError">Error: This Policy
 148                                         name is already taken.</div>
 149                                 <div id="newIdError" class="idError">Error: Please rename your
 150                                         new Policy.</div>
 151                                 <div id="spaceError" class="idError">Error: Spaces are not
 152                                         allowed in the ID.</div>
 153                         </div>
 154
 155                         <div class="panel panel-default col-sm-9 policyPanel"
 156                                 style="display: none;">
 157                                 <form id="Timeoutform" class="form-horizontal">
 158                                         <div>
 159                                                 <div class="form-group clearfix row">
 160                                                         <label class="col-sm-2">Name</label>
 161                                                         <div class="col-sm-3" style="padding: 0px;">
 162                                                                 <input type="text" id="pname" name="pname" maxlength="48"
 163                                                                         placeholder="Enter Unique Name" class="form-control">
 164                                                         </div>
 165
 166                                                         <label class="col-sm-1">ID</label>
 167                                                         <div class="col-sm-1" style="padding: 0px;">
 168                                                                 <input onkeydown="return false;" type="text" id="pid" name="pid"
 169                                                                         class="form-control" readonly>
 170                                                         </div>
 171
 172                                                         <label for="userID" class="col-sm-3"
 173                                                                 style="padding-left: 5px; padding-right: 10px;">Overall
 174                                                                 Time Limit</label>
 175                                                         <div class="col-sm-2" style="padding-left: 0px;">
 176                                                                 <input type="text" maxlength="10"
 177                                                                         onkeypress="return isNumberKey(event)" class="form-control"
 178                                                                         id="timeout" name="timeout">
 179                                                         </div>
 180                                                 </div>
 181                                         </div>
 182                                 </form>
 183                                 <div class="panel-heading" style="background-color: white;">
 184                                         <ul id="nav_Tabs" class="nav nav-tabs">
 185                                                 <li class><a id="add_one_more" href="#desc_tab"><span
 186                                                                 class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></li>
 187                                         </ul>
 188                                 </div>
 189                                 <div class="panel-body">
 190                                         <div class="tab-content">
 191                                                 <div id="properties_tab" class="tab-pane fade in active"></div>
 192                                         </div>
 193                                 </div>
 194                         </div>
 195
 196                         <span id="formSpan" style="display: none">
 197                                 <form class="saveProps" class="form-horizontal">
 198                                         <div>
 199                                                 <div class="form-group clearfix">
 200                                                         <label class="col-sm-4 control-label" for="recipe">Recipe</label>
 201                                                         <div class="col-sm-8">
 202                                                                 <select class="form-control" name="recipe" id="recipe"
 203                                                                         enableFilter="true"></select>
 204                                                         </div>
 205                                                 </div>
 206                                                 <div class="form-group clearfix">
 207                                                         <label for="maxRetries" class="col-sm-4 control-label">
 208                                                                 Max Retries</label>
 209                                                         <div class="col-sm-8">
 210                                                                 <input type="text" maxlength="5" class="form-control"
 211                                                                         id="maxRetries" onkeypress="return isNumberKey(event)"
 212                                                                         name="maxRetries"> </input>
 213                                                         </div>
 214                                                 </div>
 215                                                 <div class="form-group clearfix">
 216                                                         <label for="retryTimeLimit" class="col-sm-4 control-label">
 217                                                                 Retry Time Limit</label>
 218                                                         <div class="col-sm-8">
 219                                                                 <input type="text" maxlength="5" class="form-control"
 220                                                                         id="retryTimeLimit" onkeypress="return isNumberKey(event)"
 221                                                                         name="retryTimeLimit"></input>
 222                                                         </div>
 223                                                 </div>
 224                                                 <div style="display: none;" class="form-group clearfix">
 225                                                         <label for="_id" class="col-sm-4 control-label"> PolicyID</label>
 226                                                         <div class="col-sm-8">
 227                                                                 <input type="text" onkeydown="return false;"
 228                                                                         class="form-control" id="_id" name="_id" value=""></input>
 229                                                         </div>
 230                                                 </div>
 231                                                 <div class="form-group clearfix">
 232                                                         <label for="parentPolicy" class="col-sm-4 control-label">
 233                                                                 Parent Policy</label>
 234                                                         <div class="col-sm-8">
 235                                                                 <select class="form-control" id="parentPolicy"
 236                                                                         name="parentPolicy" enableFilter="true"><option
 237                                                                                 value=""></option></select>
 238                                                         </div>
 239                                                 </div>
 240                                                 <div class="form-group clearfix">
 241                                                         <label for="parentPolicyConditions"
 242                                                                 class="col-sm-4 control-label"> Parent Policy Conditions</label>
 243                                                         <div class="col-sm-8">
 244                                                                 <select class="form-control" id="parentPolicyConditions"
 245                                                                         name="parentPolicyConditions" multiple></select>
 246                                                         </div>
 247                                                 </div>
 248                                                 <div class="form-group clearfix">
 249
 250                                                         <label for="actor" class="col-sm-4 control-label"> Actor</label>
 251                                                         <div class="col-sm-8">
 252                                                                 <select class="form-control" id="actor" name="actor"></select>
 253                                                         </div>
 254
 255                                                         <label for="payload" class="col-sm-4 control-label">
 256                                                                 Payload</label>
 257                                                         <div class="col-sm-8">
 258                                                                 <textarea class="form-control" id="recipeInput" name=recipeInput></textarea>
 259                                                         </div>
 260                                                 </div>
 261                                                 <div class="form-group clearfix">
 262                                                         <label for="targetType" class="col-sm-4 control-label">
 263                                                                 Target Type</label>
 264                                                         <div class="col-sm-8">
 265                                                                 <select class="form-control" name="recipeLevel" id="recipeLevel">
 266                                                                 </select>
 267                                                         </div>
 268
 269                                                         <label for="targetResourceId" class="col-sm-4 control-label">
 270                                                                 Target ResourceId</label>
 271                                                         <div class="col-sm-8">
 272                                                                 <select class="form-control" name="targetResourceId"
 273                                                                         id="targetResourceId" enableFilter="true"
 274                                                                         onchange="changeTargetResourceIdOther();">
 275                                                                         <option value=""></option>
 276                                                                         <option value="Other:">Other:</option>
 277                                                                 </select>
 278                                                         </div>
 279                                                         <input type="text" style="display: none" class="form-control"
 280                                                                 id="targetResourceIdOther" name="targetResourceIdOther" value=""></input>
 281                                                 </div>
 282                                                 <div style="border: 2px dotted gray;">
 283                                                         <div class="form-group clearfix">
 284                                                                 <label for="enableGuardPolicy" class="col-sm-4 control-label">
 285                                                                         Enable Guard Policy</label>
 286                                                                 <div class="col-sm-8">
 287                                                                         <input type="checkbox" class="form-control"
 288                                                                                 name="enableGuardPolicy" id="enableGuardPolicy">
 289                                                                 </div>
 290                                                                 <div class="col-sm-8">
 291                                                                         <label for="guardPolicyType" class="col-sm-4 control-label">
 292                                                                                 Guard Policy Type</label>
 293                                                                                 <select class="form-control"
 294                                                                                 name="guardPolicyType" id="guardPolicyType"
 295                                                                                 onchange="changeGuardPolicyType();">
 296                                                                                 <option value="MinMax">MinMax</option>
 297                                                                                 <option value="FrequencyLimiter">FrequencyLimiter</option>
 298                                                                         </select>
 299                                                                 </div>
 300                                                                 <label for="guardTargets" class="col-sm-4 control-label">Guard
 301                                                                         targets</label>
 302                                                                 <div class="col-sm-8">
 303                                                                         <input class="form-control" name="guardTargets"
 304                                                                                 id="guardTargets" />
 305                                                                 </div>
 306                                                         </div>
 307
 308                                                         <div class="form-group clearfix" id="minMaxGuardPolicyDiv">
 309                                                                 <label for="minGuard" class="col-sm-4 control-label">
 310                                                                         Min Guard</label>
 311                                                                 <div class="col-sm-8">
 312                                                                         <input class="form-control" name="minGuard" id="minGuard" />
 313                                                                 </div>
 314                                                                 <label for="maxGuard" class="col-sm-4 control-label">
 315                                                                         Max Guard</label>
 316                                                                 <div class="col-sm-8">
 317                                                                         <input class="form-control" name="maxGuard" id="maxGuard" />
 318                                                                 </div>
 319                                                         </div>
 320                                                         <div class="form-group clearfix"
 321                                                                 id="frequencyLimiterGuardPolicyDiv" style="display: none">
 322                                                                 <label for="limitGuard" class="col-sm-4 control-label">Limit</label>
 323                                                                 <div class="col-sm-8">
 324                                                                         <input class="form-control" name="limitGuard" id="limitGuard" />
 325                                                                 </div>
 326                                                                 <div class="col-sm-8">
 327                                                                         <select class="form-control" name="timeUnitsGuard"
 328                                                                                 id="timeUnitsGuard" /> <label for="timeWindowGuard"
 329                                                                                 class="col-sm-4 control-label">Time Window</label>
 330                                                                 </div>
 331                                                                 <div class="col-sm-8">
 332                                                                         <input class="form-control" name="timeWindowGuard"
 333                                                                                 id="timeWindowGuard" />
 334                                                                 </div>
 335                                                         </div>
 336                                                         <div class="form-group clearfix">
 337                                                                 <label for="guardActiveStart" class="col-sm-4 control-label">
 338                                                                         Guard Active Start</label>
 339                                                                 <div class="col-sm-8">
 340                                                                         <input class="form-control" name="guardActiveStart"
 341                                                                                 id="guardActiveStart" />
 342                                                                 </div>
 343                                                                 <label for="guardActiveEnd" class="col-sm-4 control-label">
 344                                                                         Guard Active End</label>
 345                                                                 <div class="col-sm-8">
 346                                                                         <input class="form-control" name="guardActiveEnd"
 347                                                                                 id="guardActiveEnd" />
 348                                                                 </div>
 349                                                         </div>
 350                                                 </div>
 351                                         </div>
 352                                 </form>
 353                         </span>
 354                 </div>
 355         </div>
 356
 357         <div attribute-test="policywindowpropertiesf" class="modal-footer">
 358                 <!--<button ng-click="reset()" class="btn btn-primary" style="float:left">Reset</button>-->
 359                 <button id="savePropsBtn" class="btn btn-primary">Close</button>
 360                 <button ng-click="close(true)" id="close_button"
 361                         class="btn btn-primary">Cancel</button>
 362         </div>
 363
 364         <script>
 365
 366         function initTargetResourceId() {
 367                 // Set all the Resource Invariant UUID in the target resource ID list (+Empty and other)
 368                 Object.keys(vf_Services["shared"]["byVf"]).forEach(function(key){
 369                         $('#targetResourceId').append($('<option></option>').val(key).html(key));
 370                 });
 371         }
 372
 373         function changeTargetResourceIdOther() {
 374                 if ($("#targetResourceId").val()==="Other:") {
 375                         $("#targetResourceIdOther").show();
 376                 } else {
 377                         $("#targetResourceIdOther").hide();
 378                         $("#targetResourceIdOther").val("");
 379                 }
 380         }
 381
 382         function changeGuardPolicyType() {
 383                 console.log("executing GuardPolicyType")
 384                 console.log("GuardPolicyType value:"+$("#guardPolicyType").val())
 385                 if ($("#guardPolicyType").val()==="MinMax") {
 386                         console.log("executing GuardPolicyType")
 387                         $("#minMaxGuardPolicyDiv").show();
 388                         $("#frequencyLimiterGuardPolicyDiv").hide();
 389                 } else if ($("#guardPolicyType").val()==="FrequencyLimiter") {
 390                         console.log("executing GuardPolicyType")
 391                         $("#minMaxGuardPolicyDiv").hide();
 392                         $("#frequencyLimiterGuardPolicyDiv").show();
 393                 }
 394         }
 395                 //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
 396                 // css attribute display:none
 397                 $("#add_one_more").click(function(event) {
 398                         event.preventDefault();
 399                         var num = add_one_more();
 400                         setMultiSelect();
 401                 });
 402                 loadPropertyWindow("policy")
 403
 404                 // by default, parentPolicyConditions is disabled
 405                 //$("#parentPolicyConditions").prop('disabled', 'disabled');
 406                 var parent_policy={}
 407                 var policy_ids={}
 408                 var loadingId=false;
 409                 var allPolicies={};
 410                 var allPolIds=[];
 411
 412                 //Grab saved values for dropdowns
 413                 var obj = elementMap[lastElementSelected];
 414
 415                 if (!($.isEmptyObject(obj))){
 416                         allPolicies = jQuery.extend({}, obj);
 417                         for (var x in allPolicies){
 418                                 $("#policyTable").prepend("<tr><td>"+x+"</td></tr>");
 419                                 if (allPolicies[x][1]['value']){
 420                                         allPolIds.push(parseInt(allPolicies[x][1]['value']));
 421                                 }
 422                         }
 423                 }
 424                 $("#pname").val('');
 425
 426                 //load recipes for a chosen policy
 427                 function disperseConfig(policyObj, id){
 428                         parent_policy={};
 429                         //remove old gui forms
 430                         for (var i=1; i<($(".formId").length + 1); i++){
 431                                 $("#go_properties_tab"+i).parent().remove();
 432                         }
 433                         $(".formId").remove();
 434
 435                         if (policyObj !== undefined) {
 436                                 var el = policyObj[id][3]['policyConfigurations']
 437                                 for (var i = 0; i < el.length; i++) {
 438                                         loadingId=true;
 439                                         var num = add_one_more();
 440                                         loadingId=false;
 441                                         for (var j = 0; j < el[i].length; j++) {
 442                                                 if(el[i][j].hasOwnProperty("name")){
 443                                                         $("#formId" + num + " #" + el[i][j].name).val(
 444                                                                         el[i][j].value);
 445                                                         if(el[i][j].name==="_id")
 446                                                                 policy_ids["#formId" + num]=el[i][j].value
 447                                                         if(el[i][j].name==='parentPolicy')
 448                                                                 parent_policy[num]=el[i][j].value
 449                                                         if(el[i][j].name==='recipe' && el[i][j].value.toString()!==''){
 450                                                                 $("#go_properties_tab"+num).text(el[i][j].value)
 451                                                         }
 452                                                         if(el[i][j].name==="targetResourceIdOther" && el[i][j].value.toString()!=='') {
 453                                                                 // Add the entry and set it
 454                                                                 $('#targetResourceId').append($('<option></option>').val($('#targetResourceIdOther').val()).html($('#targetResourceIdOther').val()));
 455                                                                 $('#targetResourceId').val($('#targetResourceIdOther').val());
 456                                                         }
 457
 458                                                 }
 459                                         }
 460                                 }
 461
 462                                 //Adding all the ids for parent policy options
 463                                 for(var i=1;i<=$(".formId").length;i++){
 464                                         for(k in policy_ids){
 465                                                 if($("#formId"+i+" #_id").val()!==policy_ids[k].toString()  && $(k+" #recipe").val()!==undefined && $(k+" #recipe").val()!==""){
 466                                                         $("#formId"+i+" #parentPolicy").append("<option value=\""+policy_ids[k]+"\">" +$(k+" #recipe").val()+"</option>");
 467                                                 }
 468                                         }
 469                                 }
 470
 471                                 for(k in parent_policy){
 472                                         $("#formId"+k+" #parentPolicy").val(parent_policy[k]);
 473                                         if($("#formId"+k+" #parentPolicy").val() ==""){
 474                                                 $("#formId" +k+ " #parentPolicyConditions").multiselect("disable");
 475                                         } else {
 476                                                 $("#formId" +k+ " #parentPolicyConditions").multiselect("enable");
 477                                         }
 478                                         // force the change event
 479                                         $("#formId"+k+" #parentPolicy").change();
 480                                 }
 481
 482                                 // Now load all component with the right value defined in policyObj JSON
 483                                 for (headInd in policyObj[id]){
 484                                         if (!(policyObj[id][headInd].hasOwnProperty("policyConfigurations"))){
 485                                                 $("#" + policyObj[id][headInd].name).val(policyObj[id][headInd].value);
 486                                         }
 487                                 }
 488                         }
 489
 490                         setMultiSelect();
 491
 492                         if (readMOnly){
 493                                 $('select[multiple] option').each(function() {
 494                           var input = $('input[value="' + $(this).val() + '"]');
 495                           input.prop('disabled', true);
 496                           input.parent('li').addClass('disabled');
 497                         });
 498                                 $('input[value="multiselect-all"]').prop('disabled', true).parent('li').addClass('disabled');
 499                         }
 500                         changeGuardPolicyType();
 501                 }
 502
 503                         function addSelectListen(count) {
 504                                 var onSelectChange = function() {
 505                                         var opselected = this.selectedOptions[0].text;
 506
 507                                         if (this.id == "recipe"){
 508                                                 if(opselected!==""){
 509                                                         var polCount = $(this).closest("[id^='formId']").attr("id").substring(6);
 510                                                         $(this).closest(".policyPanel").find("#go_properties_tab"+polCount).text(opselected);
 511                                                 } else {
 512                                                         $(this).closest("[id^='go_properties_tab']").text("Policy");
 513                                                 }
 514                                         }
 515
 516                                         if (this.id=="parentPolicy"){
 517                                                 var ppCond = $(this).closest("[id^='formId']").find("#parentPolicyConditions");
 518                                                 if(opselected==""){
 519                                                         ppCond.multiselect("clearSelection");
 520                                                         ppCond.multiselect("disable");
 521                                                 } else {
 522                                                         ppCond.multiselect("enable");
 523                                                 }
 524                                         }
 525                                 };
 526                                 $("#formId"+count+" select").each( function () {
 527                                         this.change = onSelectChange;
 528                                 });
 529                         }
 530
 531
 532                 //This is ensure there are no repeated keys in the map
 533                 function noRepeats(form) {
 534                         //triggered per policy.
 535                         var select = {};
 536                         for (var i = 0; i < form.length; i++) {
 537                                 if (select[form[i].name] === undefined)
 538                                         select[form[i].name] = []
 539                                 select[form[i].name].push(form[i].value);
 540                         }
 541                         var arr = []
 542                         for (s in select) {
 543                                 var f = {}
 544                                 f.name = s
 545                                 f.value = select[s]
 546                                 arr.push(f)
 547                         }
 548                         return arr
 549                 }
 550
 551                 $("#savePropsBtn").click(function(event) {
 552                         if($("#targetResourceIdOther").is(":visible")) {
 553                                 $('#targetResourceId').append($('<option></option>').val($("#targetResourceIdOther").val()).html($("#targetResourceIdOther").val()))
 554                                 $("#targetResourceId").val($("#targetResourceIdOther").val());
 555                         }
 556                         $(".idError").hide();
 557                         if ($("#policyTable .highlight td").html() !== $("#pname").val()){
 558                                 //repeated name
 559                                 if ($.inArray($("#pname").val(), Object.keys(allPolicies)) > -1){
 560                                         $("#repeatIdError").show();
 561                                         return;
 562                                 } else { //not repeated
 563                                         delete allPolicies[$("#policyTable .highlight td").html()];
 564                                 }
 565                         }
 566                         if ($("#pname").val().trim() == "New_Policy"){
 567                                 $("#newIdError").show();
 568                                 return;
 569                         }
 570
 571                         //Saves edits
 572                         /* if ($("#policyTable .highlight").length > 0){
 573                                 saveLastPolicyLocally($("#policyTable .highlight").attr("id"));
 574                         } */
 575                         startNextItem();
 576
 577                         //Removes outdated (deleted) policies by checking against left menu
 578                         var finalSaveList = {};
 579                         $("#policyTable td").each(function(){
 580                                 var tableVal = $(this).text();
 581                                 if (tableVal in allPolicies){
 582                                         finalSaveList[tableVal] = allPolicies[tableVal];
 583                                 }
 584                         });
 585
 586                         saveProperties(finalSaveList);
 587                         $("#close_button").click();
 588                 })
 589
 590                 function add_one_more() {
 591                         $("#nav_Tabs li").removeClass("active");
 592
 593                         //FormSpan contains a block of the form that is not being displayed. We will create clones of that and add them to tabs
 594                         var form = $($("#formSpan").children()[0]).clone()
 595                         var count = 0;
 596                         //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
 597                         if ($(".formId").length > 0) {
 598                                 var greatest = 0;
 599                                 var s = $(".formId");
 600                                 for (var i = 0; i < s.length; i++) {
 601                                         if (parseInt($(s[i]).attr("id").substring(6)) > greatest) {
 602                                                 greatest = parseInt($(s[i]).attr("id").substring(6))
 603                                         }
 604                                 }
 605                                 count = greatest + 1;
 606                                 $("#properties_tab").append(
 607                                                 ('<span class="formId" id="formId'+count+'"></span>'));
 608                         } else {
 609                                 count++;
 610                                 $("#properties_tab").append(
 611                                                 '<span class="formId" id="formId1"></span>');
 612                         }
 613
 614                         //$(form).find("#policyName").val("Recipe "+makid(2))
 615                         //TODO change up how we auto assign policyName. There could be the case where we do this and it will have repeats
 616                         //alert($(form).find("#_id").val())
 617                         //policyNameChangeListener(form)
 618                         $("#add_one_more")
 619                                         .parent()
 620                                         .before(
 621                                                         ' <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>');
 622                         $("#formId" + count).append(form);
 623                         $(".formId").not($("#formId" + count)).css("display", "none")
 624                         addCustListen(count)
 625
 626                         addSelectListen(count);
 627                         // This is for when the process is not loading from map but being created
 628                         if(!loadingId){
 629                                 var l=makeid()
 630                                 $(form).find("#_id").val(l)
 631                                 policy_ids["#formId" + count]=l
 632                                 var answers={}
 633
 634                                 for(var i=1;i<=greatestIdNum();i++){
 635                                         if($("#formId"+i).length>0){
 636                                                 answers["#formId"+i+" #parentPolicy"]=$("#formId"+i+" #parentPolicy").val();
 637                                                 $("#formId"+i+" #parentPolicy").empty();
 638
 639                                                 for(k in policy_ids){
 640                                                         if(($("#formId"+i+" #_id").val()!==policy_ids[k].toString()) && $(k+" #recipe").val()!==undefined && $(k+" #recipe").val()!==""){
 641                                                                 $("#formId"+i+" #parentPolicy").append("<option value='"+policy_ids[k]+"'>"+$(k+" #recipe").val()+"</option>")
 642                                                         }
 643                                                 }
 644                                                 $("#formId"+i+" #parentPolicy").prepend("<option value=''></option>")
 645                                         }
 646                                 }
 647
 648                                 $("#formId"+count+" #parentPolicyConditions").multiselect("disable");
 649
 650                                 //re-populate parent policy with chosen options
 651                                 for(k in answers){
 652                                         $(k).val(answers[k])
 653                                 }
 654                         }
 655
 656                         return count;
 657                 }
 658
 659                 function add_new_policy(issueNewNames) {
 660                         //remove old gui forms
 661                         for (var i=1; i<($(".formId").length + 1); i++){
 662                                 $("#go_properties_tab"+i).parent().remove();
 663                         }
 664                         $(".formId").remove();
 665
 666                         //Reset headers
 667                         //$("#pname").val("0");
 668                         $("#pname").val("New_Policy");
 669                         $("#timeout").val(defaults_props.policy.timeout);
 670
 671                         $("#add_one_more").click();
 672                 }
 673
 674                 function addCustListen(count) {
 675                         $('#go_properties_tab' + count).click(function(event) {
 676                                 $("#nav_Tabs li").removeClass("active");
 677                                 $(this).parent().addClass("active");
 678                                 $("#formId" + count).css("display", "")
 679                                 $(".formId").not($("#formId" + count)).css("display", "none")
 680
 681                         })
 682                         $('#tab_close' + count).click(function(event) {
 683                                 if(document.getElementById("timeout").disabled){
 684                                         return false;
 685                                 }
 686                                 $(this).parent().remove();
 687                                 for(var i=1;i<=greatestIdNum();i++){
 688                                         if(     $("#formId"+i).length>0){
 689                                                 if(i!==count ){
 690                                                         if(     $("#formId"+i+" #parentPolicy").val()===$("#formId"+count+" #_id").val().toString())
 691                                                                 $("#formId"+i+" #parentPolicy").val("")
 692                                                         $("#formId"+i+" #parentPolicy option[value='"+$("#formId"+count+" #_id").val().toString()+"']").remove();
 693                                                 }
 694                                         }
 695                                 }
 696                                 delete policy_ids["#formId" + count + " #_id"]
 697                                 $("#formId" + count).remove();
 698                         })
 699                 }
 700
 701
 702                 function greatestIdNum() {
 703                         var greatest = 0;
 704                         var s = $(".formId");
 705                         for (var i = 0; i < s.length; i++) {
 706                                 if (parseInt($(s[i]).attr("id").substring(6)) > greatest) {
 707                                         greatest = parseInt($(s[i]).attr("id").substring(6))
 708                                 }
 709                         }
 710                         return greatest;
 711                 }
 712
 713                 //Generate random id for each policy
 714                 //Also made sure ids couldnt be repeated
 715                 function makeid(num) {
 716
 717                         var text = "";
 718                         var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 719                         if (num == null)
 720                                 num = 7;
 721                         for (var i = 0; i < 7; i++)
 722                                 text += possible.charAt(Math.floor(Math.random()
 723                                                 * possible.length));
 724                         var hasValue = false;
 725                         for (k in policy_ids) {
 726                                 if (text === policy_ids[k])
 727                                         hasValue = true
 728                         }
 729                         if (hasValue)
 730                                 return makeid(num);
 731                         else
 732                                 return text
 733                 }
 734
 735                 var ParentPolicy = function(id, name) {
 736                         this.id = id
 737                         this.name = name
 738                 }
 739
 740                 //Policy table search filter
 741                 function searchPolicyList() {
 742                         var search = document.getElementById("policySearch");
 743                         var row = document.getElementsByTagName("td");
 744                         for (var i = 0; i < row.length; i++) {
 745                                 if (row[i].innerHTML.toUpperCase().indexOf(
 746                                                 search.value.toUpperCase()) > -1) {
 747                                         row[i].style.display = "";
 748                                 } else {
 749                                         row[i].style.display = "none";
 750                                 }
 751                         }
 752                 }
 753
 754                 function saveLastPolicyLocally(lastPolicyId) {
 755                         var polForm = []
 756
 757                         var properties = $(".saveProps").not("#formSpan .saveProps");
 758                         var timeoutForm = $("#Timeoutform").serializeArray();
 759
 760                         for (var i = 0; i < timeoutForm.length; i++) {
 761                                 polForm.push(timeoutForm[i]);
 762                         }
 763
 764                         var d = {}
 765                         d["policyConfigurations"] = [];
 766                         for (var i = 0; i < properties.length; i++) {
 767                                 var ser = $(properties[i]).serializeArray();
 768                                 var s = noRepeats(ser)
 769                                 d["policyConfigurations"].push(s);
 770                         }
 771                         polForm.push(d);
 772                         allPolicies[lastPolicyId] = polForm;
 773                 }
 774
 775                 function getNextId(){
 776                         var newPolId;
 777                         allPolIds.sort();
 778                         if ((Math.min.apply(Math, allPolIds) == 0)
 779                                         && (allPolIds.length > 0)) {
 780                                 loop1:
 781                                         for (var i = 1; i < allPolIds.length; i++) {
 782                                                 if ((allPolIds[i] - allPolIds[i - 1]) != 1) {
 783                                                         newPolId = (allPolIds[i - 1] + 1);
 784                                                         break loop1;
 785                                                 };
 786                                         };
 787                                 if (!newPolId) {
 788                                         newPolId = (Math.max.apply(Math, allPolIds)) + 1;
 789                                 }
 790                         } else {
 791                                 newPolId = 0;
 792                         }
 793                         allPolIds.push(newPolId);
 794                         $("#pid").val(newPolId);
 795                 }
 796
 797                 $("#deletePolicy").on('click', function() {
 798                         $(".idError").hide();
 799                         //delete policy id
 800                         allPolIds.splice((allPolIds.indexOf(parseInt($("#pid").val()))),1);
 801
 802                         //delete policy name
 803                         var deleteId = $("#policyTable .highlight td").html();
 804                         delete allPolicies[deleteId];
 805                         $("#policyTable .highlight").remove();
 806                         $("#pname").val('');
 807                         expandTable();
 808                 });
 809
 810                 $('#policyTable').on('click', 'tr', function(event) {
 811                         $(".idError").hide();
 812                         //edited name
 813                         if ($("#policyTable .highlight td").html() !== $("#pname").val()){
 814                                 //repeated name
 815                                 if ($.inArray($("#pname").val(), Object.keys(allPolicies)) > -1){
 816                                         $("#repeatIdError").show();
 817                                         return;
 818                                 } else { //not repeated
 819                                         $("#repeatIdError").hide();
 820                                         delete allPolicies[$("#policyTable .highlight td").html()];
 821                                 }
 822                         }
 823                         //if (parseInt($("#pname").val()) == 0){
 824                         if ($("#pname").val().trim() == "New_Policy"){
 825                                 $("#newIdError").show();
 826                                 return;
 827                         }
 828                         if (!(readMOnly)){
 829                                 startNextItem();
 830                         } else {
 831                                 if ($("#policyTable .highlight").length == 0){
 832                                         collapseTable();
 833                                 }
 834                         }
 835                         $(this).addClass('highlight').siblings().removeClass('highlight');
 836                         disperseConfig(allPolicies, $(this).find("td").html());
 837                 });
 838
 839                 $('#createNewPolicy').on('click', function(){
 840                         $(".idError").hide();
 841                         //edited name
 842                         if ($("#policyTable .highlight td").html() !== $("#pname").val()){
 843                                 //repeated name
 844                                 if ($.inArray($("#pname").val(), Object.keys(allPolicies)) > -1){
 845                                         $("#repeatIdError").show();
 846                                         return;
 847                                 } else { //not repeated
 848                                         $("#repeatIdError").hide();
 849                                         delete allPolicies[$("#policyTable .highlight td").html()];
 850                                 }
 851                         }
 852                         //if (parseInt($("#pname").val()) == 0){
 853                         if ($("#pname").val().trim() == "New_Policy"){
 854                                 $("#newIdError").show();
 855                                 return;
 856                         }
 857                         startNextItem();
 858                         add_new_policy();
 859                         if (("#policyTable .highlight").length > 0){
 860                                 $('#policyTable tr.highlight').removeClass('highlight');
 861                         }
 862             $("#policyTable").prepend("<tr class='highlight'><td>New_Policy</td></tr>");
 863
 864             getNextId();
 865                 });
 866
 867                 $('#pname').on('keypress', function(e){
 868                         /* var newVal = $(this).val() + String.fromCharCode(e.which);
 869                         if ((newVal>99) || (($(this).val().length>2) && e.keyCode != 46 && e.keyCode !=8)){
 870                                 e.preventDefault();
 871                         } */
 872                         if (e.keyCode == 32){
 873                                 $("#spaceError").show();
 874                                 e.preventDefault();
 875                         }
 876                 });
 877
 878                 function isNumberKey(event){
 879                         var charCode = (event.which) ? event.which : event.keyCode
 880                         if (charCode > 31 && (charCode < 48 || charCode > 57)){
 881                                 return false;
 882                         }
 883                         return true;
 884                 }
 885
 886                 function startNextItem() {
 887                         //save last item before transitioning
 888                         var lastItem = $("#policyTable .highlight");
 889                         if (lastItem.length > 0) {
 890                                 saveLastPolicyLocally($("#pname").val());
 891                                 //lastItem.attr("id", $("#pname").val());
 892                                 lastItem.find("td").html($("#pname").val());
 893                         } else {
 894                                 collapseTable();
 895                         }
 896
 897                         //allow deleting
 898                         if ($("#deletePolicy").prop("disabled")) {
 899                                 $("#deletePolicy").prop("disabled", false);
 900                         }
 901                 }
 902
 903                 setASDCFields();
 904                 initTargetResourceId();
 905
 906                 //load metrics dropdown
 907                 if (elementMap["global"]){
 908                         for (var i = 0; i < (elementMap["global"].length); i++){
 909                                 if ((elementMap["global"][i]["name"]) == "actionSet"){
 910                                         var asSel = elementMap["global"][i]["value"];
 911                                         if (asSel == "vnfRecipe"){
 912                                                 if (vf_Services["policy"][asSel]){
 913                                                         $.each((vf_Services["policy"][asSel]), function(val, text) {
 914                                                 $('#recipe').append(
 915                                                     $('<option></option>').val(val).html(text)
 916                                                 );
 917                                             });
 918                                                 }
 919                                                 break;
 920                                         }
 921                                 };
 922                         };
 923                 };
 924                 //Show table panel only
 925                 function expandTable() {
 926                         $(".policyPanel").css("display", "none");
 927                         $(".leftPolicyPanel").removeClass("col-sm-3");
 928                         $(".modelSearchBox").css("padding", "25px 12px");
 929                         if (!($("#deletePolicy").prop("disabled"))) {
 930                                 $("#deletePolicy").prop("disabled", true);
 931                         }
 932                 }
 933
 934                 //Show both menus
 935                 function collapseTable() {
 936                         $(".leftPolicyPanel").addClass("col-sm-3");
 937                         $(".modelSearchBox").css("padding", "10px 12px");
 938                         $(".policyPanel").css("display", "unset");
 939                 }
 940         </script>
 941 </div>