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> <select class="form-control"
 293                                                                                 name="guardPolicyType" id="guardPolicyType"
 294                                                                                 onchange="changeGuardPolicyType();">
 295                                                                                 <option value="GUARD_MIN_MAX">MinMax</option>
 296                                                                                 <option value="GUARD_YAML">FrequencyLimiter</option>
 297                                                                         </select>
 298                                                                 </div>
 299                                                                 <label for="guardTargets" class="col-sm-4 control-label">Guard
 300                                                                         targets</label>
 301                                                                 <div class="col-sm-8">
 302                                                                         <input class="form-control" name="guardTargets"
 303                                                                                 id="guardTargets" />
 304                                                                 </div>
 305                                                         </div>
 306
 307                                                         <div class="form-group clearfix" id="minMaxGuardPolicyDiv">
 308                                                                 <label for="minGuard" class="col-sm-4 control-label">
 309                                                                         Min Guard</label>
 310                                                                 <div class="col-sm-8">
 311                                                                         <input class="form-control" name="minGuard" id="minGuard" />
 312                                                                 </div>
 313                                                                 <label for="maxGuard" class="col-sm-4 control-label">
 314                                                                         Max Guard</label>
 315                                                                 <div class="col-sm-8">
 316                                                                         <input class="form-control" name="maxGuard" id="maxGuard" />
 317                                                                 </div>
 318                                                         </div>
 319                                                         <div class="form-group clearfix"
 320                                                                 id="frequencyLimiterGuardPolicyDiv" style="display: none">
 321                                                                 <label for="limitGuard" class="col-sm-4 control-label">Limit</label>
 322                                                                 <div class="col-sm-8">
 323                                                                         <input class="form-control" name="limitGuard" id="limitGuard" />
 324                                                                 </div>
 325                                                                 <div class="col-sm-8">
 326                                                                         <select class="form-control" name="timeUnitsGuard"
 327                                                                                 id="timeUnitsGuard" /> <label for="timeWindowGuard"
 328                                                                                 class="col-sm-4 control-label">Time Window</label>
 329                                                                 </div>
 330                                                                 <div class="col-sm-8">
 331                                                                         <input class="form-control" name="timeWindowGuard"
 332                                                                                 id="timeWindowGuard" />
 333                                                                 </div>
 334                                                         </div>
 335                                                         <div class="form-group clearfix">
 336                                                                 <label for="guardActiveStart" class="col-sm-4 control-label">
 337                                                                         Guard Active Start</label>
 338                                                                 <div class="col-sm-8">
 339                                                                         <input class="form-control" name="guardActiveStart"
 340                                                                                 id="guardActiveStart" />
 341                                                                 </div>
 342                                                                 <label for="guardActiveEnd" class="col-sm-4 control-label">
 343                                                                         Guard Active End</label>
 344                                                                 <div class="col-sm-8">
 345                                                                         <input class="form-control" name="guardActiveEnd"
 346                                                                                 id="guardActiveEnd" />
 347                                                                 </div>
 348                                                         </div>
 349                                                 </div>
 350                                         </div>
 351                                 </form>
 352                         </span>
 353                 </div>
 354         </div>
 355
 356         <div attribute-test="policywindowpropertiesf" class="modal-footer">
 357                 <!--<button ng-click="reset()" class="btn btn-primary" style="float:left">Reset</button>-->
 358                 <button id="savePropsBtn" class="btn btn-primary">Close</button>
 359                 <button ng-click="close(true)" id="close_button"
 360                         class="btn btn-primary">Cancel</button>
 361         </div>
 362
 363         <script>
 364                 function searchActiveFormId() {
 365                         var formArray = Array.from(document.getElementsByClassName("formId"));
 366                         for (var i=0, max=formArray.length; i < max; i++) {
 367
 368                                 console.log("Search active FormId, current element "+formArray[i].id);
 369                                 if (formArray[i].style.display !== "none") {
 370                                         console.log("Active form is:"+formArray[i].id);
 371                                         return formArray[i];
 372                                 }
 373                         }
 374                         console.log("No active formId found !");
 375                 }
 376
 377                 function initTargetResourceId() {
 378                         var formItemActive = searchActiveFormId();
 379                         // Set all the Resource Invariant UUID in the target resource ID list (+Empty and other)
 380                         Object.keys(vf_Services["shared"]["byVf"]).forEach(function(key){
 381                                 $("#"+formItemActive.id+" #targetResourceId").append($('<option></option>').val(key).html(key));
 382                         });
 383                 }
 384
 385                 function changeTargetResourceIdOther() {
 386                         var formItemActive = searchActiveFormId();
 387                         if ($("#"+formItemActive.id+" #targetResourceId").val()==="Other:") {
 388                                 $("#"+formItemActive.id+" #targetResourceIdOther").show();
 389                         } else {
 390                                 $("#"+formItemActive.id+" #targetResourceIdOther").hide();
 391                                 $("#"+formItemActive.id+" #targetResourceIdOther").val("");
 392                         }
 393                 }
 394
 395                 function changeGuardPolicyType() {
 396                         var formItemActive = searchActiveFormId();
 397                         if ($("#"+formItemActive.id+" #guardPolicyType").val()==="GUARD_MIN_MAX") {
 398                                 $("#"+formItemActive.id+" #minMaxGuardPolicyDiv").show();
 399                                 $("#"+formItemActive.id+" #frequencyLimiterGuardPolicyDiv").hide();
 400                         } else if ($("#"+formItemActive.id+" #guardPolicyType").val()==="GUARD_YAML") {
 401                                 $("#"+formItemActive.id+" #minMaxGuardPolicyDiv").hide();
 402                                 $("#"+formItemActive.id+" #frequencyLimiterGuardPolicyDiv").show();
 403                         }
 404                 }
 405                 //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
 406                 // css attribute display:none
 407                 $("#add_one_more").click(function(event) {
 408                         event.preventDefault();
 409                         var num = add_one_more();
 410                         setMultiSelect();
 411                 });
 412                 loadPropertyWindow("policy")
 413
 414                 // by default, parentPolicyConditions is disabled
 415                 //$("#parentPolicyConditions").prop('disabled', 'disabled');
 416                 var parent_policy={}
 417                 var policy_ids={}
 418                 var loadingId=false;
 419                 var allPolicies={};
 420                 var allPolIds=[];
 421
 422                 //Grab saved values for dropdowns
 423                 var obj = elementMap[lastElementSelected];
 424
 425                 if (!($.isEmptyObject(obj))){
 426                         allPolicies = jQuery.extend({}, obj);
 427                         for (var x in allPolicies){
 428                                 $("#policyTable").prepend("<tr><td>"+x+"</td></tr>");
 429                                 if (allPolicies[x][1]['value']){
 430                                         allPolIds.push(parseInt(allPolicies[x][1]['value']));
 431                                 }
 432                         }
 433                 }
 434                 $("#pname").val('');
 435
 436                 //load recipes for a chosen policy
 437                 function disperseConfig(policyObj, id){
 438                         parent_policy={};
 439                         //remove old gui forms
 440                         for (var i=1; i<($(".formId").length + 1); i++){
 441                                 $("#go_properties_tab"+i).parent().remove();
 442                         }
 443                         $(".formId").remove();
 444
 445                         if (policyObj !== undefined) {
 446                                 var el = policyObj[id][3]['policyConfigurations']
 447                                 for (var i = 0; i < el.length; i++) {
 448                                         loadingId=true;
 449                                         var num = add_one_more();
 450                                         loadingId=false;
 451                                         for (var j = 0; j < el[i].length; j++) {
 452                                                 if(el[i][j].hasOwnProperty("name")){
 453                                                         $("#formId" + num + " #" + el[i][j].name).val(
 454                                                                         el[i][j].value);
 455                                                         if(el[i][j].name==="_id")
 456                                                                 policy_ids["#formId" + num]=el[i][j].value
 457                                                         if(el[i][j].name==='parentPolicy')
 458                                                                 parent_policy[num]=el[i][j].value
 459                                                         if(el[i][j].name==='recipe' && el[i][j].value.toString()!==''){
 460                                                                 $("#go_properties_tab"+num).text(el[i][j].value)
 461                                                         }
 462                                                         if(el[i][j].name==="targetResourceIdOther" && el[i][j].value.toString()!=='') {
 463                                                                 // Add the entry and set it
 464                                                                 $("#formId" + num + " #targetResourceId").append($('<option></option>').val($("#formId" + num + " #targetResourceIdOther").val()).html($("#formId" + num + " #targetResourceIdOther").val()));
 465                                                                 $("#formId" + num + " #targetResourceId").val($("#formId" + num + " #targetResourceIdOther").val());
 466                                                         }
 467                                                         changeGuardPolicyType();
 468                                                 }
 469                                         }
 470                                 }
 471
 472                                 //Adding all the ids for parent policy options
 473                                 for(var i=1;i<=$(".formId").length;i++){
 474                                         for(k in policy_ids){
 475                                                 if($("#formId"+i+" #_id").val()!==policy_ids[k].toString()  && $(k+" #recipe").val()!==undefined && $(k+" #recipe").val()!==""){
 476                                                         $("#formId"+i+" #parentPolicy").append("<option value=\""+policy_ids[k]+"\">" +$(k+" #recipe").val()+"</option>");
 477                                                 }
 478                                         }
 479                                 }
 480
 481                                 for(k in parent_policy){
 482                                         $("#formId"+k+" #parentPolicy").val(parent_policy[k]);
 483                                         if($("#formId"+k+" #parentPolicy").val() ==""){
 484                                                 $("#formId" +k+ " #parentPolicyConditions").multiselect("disable");
 485                                         } else {
 486                                                 $("#formId" +k+ " #parentPolicyConditions").multiselect("enable");
 487                                         }
 488                                         // force the change event
 489                                         $("#formId"+k+" #parentPolicy").change();
 490                                 }
 491
 492                                 // Now load all component with the right value defined in policyObj JSON
 493                                 for (headInd in policyObj[id]){
 494                                         if (!(policyObj[id][headInd].hasOwnProperty("policyConfigurations"))){
 495                                                 $("#" + policyObj[id][headInd].name).val(policyObj[id][headInd].value);
 496                                         }
 497                                 }
 498                         }
 499
 500                         setMultiSelect();
 501
 502                         if (readMOnly){
 503                                 $('select[multiple] option').each(function() {
 504                           var input = $('input[value="' + $(this).val() + '"]');
 505                           input.prop('disabled', true);
 506                           input.parent('li').addClass('disabled');
 507                         });
 508                                 $('input[value="multiselect-all"]').prop('disabled', true).parent('li').addClass('disabled');
 509                         }
 510
 511                 }
 512
 513                         function addSelectListen(count) {
 514                                 var onSelectChange = function() {
 515                                         var opselected = this.selectedOptions[0].text;
 516
 517                                         if (this.id == "recipe"){
 518                                                 if(opselected!==""){
 519                                                         var polCount = $(this).closest("[id^='formId']").attr("id").substring(6);
 520                                                         $(this).closest(".policyPanel").find("#go_properties_tab"+polCount).text(opselected);
 521                                                 } else {
 522                                                         $(this).closest("[id^='go_properties_tab']").text("Policy");
 523                                                 }
 524                                         }
 525
 526                                         if (this.id=="parentPolicy"){
 527                                                 var ppCond = $(this).closest("[id^='formId']").find("#parentPolicyConditions");
 528                                                 if(opselected==""){
 529                                                         ppCond.multiselect("clearSelection");
 530                                                         ppCond.multiselect("disable");
 531                                                 } else {
 532                                                         ppCond.multiselect("enable");
 533                                                 }
 534                                         }
 535                                 };
 536                                 $("#formId"+count+" select").each( function () {
 537                                         this.change = onSelectChange;
 538                                 });
 539                         }
 540
 541
 542                 //This is ensure there are no repeated keys in the map
 543                 function noRepeats(form) {
 544                         //triggered per policy.
 545                         var select = {};
 546                         for (var i = 0; i < form.length; i++) {
 547                                 if (select[form[i].name] === undefined)
 548                                         select[form[i].name] = []
 549                                 select[form[i].name].push(form[i].value);
 550                         }
 551                         var arr = []
 552                         for (s in select) {
 553                                 var f = {}
 554                                 f.name = s
 555                                 f.value = select[s]
 556                                 arr.push(f)
 557                         }
 558                         return arr
 559                 }
 560
 561                 $("#savePropsBtn").click(function(event) {
 562                         if($("#targetResourceIdOther").is(":visible")) {
 563                                 $('#targetResourceId').append($('<option></option>').val($("#targetResourceIdOther").val()).html($("#targetResourceIdOther").val()))
 564                                 $("#targetResourceId").val($("#targetResourceIdOther").val());
 565                         }
 566                         $(".idError").hide();
 567                         if ($("#policyTable .highlight td").html() !== $("#pname").val()){
 568                                 //repeated name
 569                                 if ($.inArray($("#pname").val(), Object.keys(allPolicies)) > -1){
 570                                         $("#repeatIdError").show();
 571                                         return;
 572                                 } else { //not repeated
 573                                         delete allPolicies[$("#policyTable .highlight td").html()];
 574                                 }
 575                         }
 576                         if ($("#pname").val().trim() == "New_Policy"){
 577                                 $("#newIdError").show();
 578                                 return;
 579                         }
 580
 581                         //Saves edits
 582                         /* if ($("#policyTable .highlight").length > 0){
 583                                 saveLastPolicyLocally($("#policyTable .highlight").attr("id"));
 584                         } */
 585                         startNextItem();
 586
 587                         //Removes outdated (deleted) policies by checking against left menu
 588                         var finalSaveList = {};
 589                         $("#policyTable td").each(function(){
 590                                 var tableVal = $(this).text();
 591                                 if (tableVal in allPolicies){
 592                                         finalSaveList[tableVal] = allPolicies[tableVal];
 593                                 }
 594                         });
 595
 596                         saveProperties(finalSaveList);
 597                         $("#close_button").click();
 598                 })
 599
 600                 function add_one_more() {
 601                         $("#nav_Tabs li").removeClass("active");
 602
 603                         //FormSpan contains a block of the form that is not being displayed. We will create clones of that and add them to tabs
 604                         var form = $($("#formSpan").children()[0]).clone()
 605                         var count = 0;
 606                         //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
 607                         if ($(".formId").length > 0) {
 608                                 var greatest = 0;
 609                                 var s = $(".formId");
 610                                 for (var i = 0; i < s.length; i++) {
 611                                         if (parseInt($(s[i]).attr("id").substring(6)) > greatest) {
 612                                                 greatest = parseInt($(s[i]).attr("id").substring(6))
 613                                         }
 614                                 }
 615                                 count = greatest + 1;
 616                                 $("#properties_tab").append(
 617                                                 ('<span class="formId" id="formId'+count+'"></span>'));
 618                         } else {
 619                                 count++;
 620                                 $("#properties_tab").append(
 621                                                 '<span class="formId" id="formId1"></span>');
 622                         }
 623
 624                         //$(form).find("#policyName").val("Recipe "+makid(2))
 625                         //TODO change up how we auto assign policyName. There could be the case where we do this and it will have repeats
 626                         //alert($(form).find("#_id").val())
 627                         //policyNameChangeListener(form)
 628                         $("#add_one_more")
 629                                         .parent()
 630                                         .before(
 631                                                         ' <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>');
 632                         $("#formId" + count).append(form);
 633                         $(".formId").not($("#formId" + count)).css("display", "none")
 634                         addCustListen(count)
 635
 636                         addSelectListen(count);
 637                         // This is for when the process is not loading from map but being created
 638                         if(!loadingId){
 639                                 var l=makeid()
 640                                 $(form).find("#_id").val(l)
 641                                 policy_ids["#formId" + count]=l
 642                                 var answers={}
 643
 644                                 for(var i=1;i<=greatestIdNum();i++){
 645                                         if($("#formId"+i).length>0){
 646                                                 answers["#formId"+i+" #parentPolicy"]=$("#formId"+i+" #parentPolicy").val();
 647                                                 $("#formId"+i+" #parentPolicy").empty();
 648
 649                                                 for(k in policy_ids){
 650                                                         if(($("#formId"+i+" #_id").val()!==policy_ids[k].toString()) && $(k+" #recipe").val()!==undefined && $(k+" #recipe").val()!==""){
 651                                                                 $("#formId"+i+" #parentPolicy").append("<option value='"+policy_ids[k]+"'>"+$(k+" #recipe").val()+"</option>")
 652                                                         }
 653                                                 }
 654                                                 $("#formId"+i+" #parentPolicy").prepend("<option value=''></option>")
 655                                         }
 656                                 }
 657
 658                                 $("#formId"+count+" #parentPolicyConditions").multiselect("disable");
 659
 660                                 //re-populate parent policy with chosen options
 661                                 for(k in answers){
 662                                         $(k).val(answers[k])
 663                                 }
 664                         }
 665
 666                         return count;
 667                 }
 668
 669                 function add_new_policy(issueNewNames) {
 670                         //remove old gui forms
 671                         for (var i=1; i<($(".formId").length + 1); i++){
 672                                 $("#go_properties_tab"+i).parent().remove();
 673                         }
 674                         $(".formId").remove();
 675
 676                         //Reset headers
 677                         //$("#pname").val("0");
 678                         $("#pname").val("New_Policy");
 679                         $("#timeout").val(defaults_props.policy.timeout);
 680
 681                         $("#add_one_more").click();
 682                 }
 683
 684                 function addCustListen(count) {
 685                         $('#go_properties_tab' + count).click(function(event) {
 686                                 $("#nav_Tabs li").removeClass("active");
 687                                 $(this).parent().addClass("active");
 688                                 $("#formId" + count).css("display", "")
 689                                 $(".formId").not($("#formId" + count)).css("display", "none")
 690
 691                         })
 692                         $('#tab_close' + count).click(function(event) {
 693                                 if(document.getElementById("timeout").disabled){
 694                                         return false;
 695                                 }
 696                                 $(this).parent().remove();
 697                                 for(var i=1;i<=greatestIdNum();i++){
 698                                         if(     $("#formId"+i).length>0){
 699                                                 if(i!==count ){
 700                                                         if(     $("#formId"+i+" #parentPolicy").val()===$("#formId"+count+" #_id").val().toString())
 701                                                                 $("#formId"+i+" #parentPolicy").val("")
 702                                                         $("#formId"+i+" #parentPolicy option[value='"+$("#formId"+count+" #_id").val().toString()+"']").remove();
 703                                                 }
 704                                         }
 705                                 }
 706                                 delete policy_ids["#formId" + count + " #_id"]
 707                                 $("#formId" + count).remove();
 708                         })
 709                 }
 710
 711
 712                 function greatestIdNum() {
 713                         var greatest = 0;
 714                         var s = $(".formId");
 715                         for (var i = 0; i < s.length; i++) {
 716                                 if (parseInt($(s[i]).attr("id").substring(6)) > greatest) {
 717                                         greatest = parseInt($(s[i]).attr("id").substring(6))
 718                                 }
 719                         }
 720                         return greatest;
 721                 }
 722
 723                 //Generate random id for each policy
 724                 //Also made sure ids couldnt be repeated
 725                 function makeid(num) {
 726
 727                         var text = "";
 728                         var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 729                         if (num == null)
 730                                 num = 7;
 731                         for (var i = 0; i < 7; i++)
 732                                 text += possible.charAt(Math.floor(Math.random()
 733                                                 * possible.length));
 734                         var hasValue = false;
 735                         for (k in policy_ids) {
 736                                 if (text === policy_ids[k])
 737                                         hasValue = true
 738                         }
 739                         if (hasValue)
 740                                 return makeid(num);
 741                         else
 742                                 return text
 743                 }
 744
 745                 var ParentPolicy = function(id, name) {
 746                         this.id = id
 747                         this.name = name
 748                 }
 749
 750                 //Policy table search filter
 751                 function searchPolicyList() {
 752                         var search = document.getElementById("policySearch");
 753                         var row = document.getElementsByTagName("td");
 754                         for (var i = 0; i < row.length; i++) {
 755                                 if (row[i].innerHTML.toUpperCase().indexOf(
 756                                                 search.value.toUpperCase()) > -1) {
 757                                         row[i].style.display = "";
 758                                 } else {
 759                                         row[i].style.display = "none";
 760                                 }
 761                         }
 762                 }
 763
 764                 function saveLastPolicyLocally(lastPolicyId) {
 765                         var polForm = []
 766
 767                         var properties = $(".saveProps").not("#formSpan .saveProps");
 768                         var timeoutForm = $("#Timeoutform").serializeArray();
 769
 770                         for (var i = 0; i < timeoutForm.length; i++) {
 771                                 polForm.push(timeoutForm[i]);
 772                         }
 773
 774                         var d = {}
 775                         d["policyConfigurations"] = [];
 776                         for (var i = 0; i < properties.length; i++) {
 777                                 var ser = $(properties[i]).serializeArray();
 778                                 var s = noRepeats(ser)
 779                                 d["policyConfigurations"].push(s);
 780                         }
 781                         polForm.push(d);
 782                         allPolicies[lastPolicyId] = polForm;
 783                 }
 784
 785                 function getNextId(){
 786                         var newPolId;
 787                         allPolIds.sort();
 788                         if ((Math.min.apply(Math, allPolIds) == 0)
 789                                         && (allPolIds.length > 0)) {
 790                                 loop1:
 791                                         for (var i = 1; i < allPolIds.length; i++) {
 792                                                 if ((allPolIds[i] - allPolIds[i - 1]) != 1) {
 793                                                         newPolId = (allPolIds[i - 1] + 1);
 794                                                         break loop1;
 795                                                 };
 796                                         };
 797                                 if (!newPolId) {
 798                                         newPolId = (Math.max.apply(Math, allPolIds)) + 1;
 799                                 }
 800                         } else {
 801                                 newPolId = 0;
 802                         }
 803                         allPolIds.push(newPolId);
 804                         $("#pid").val(newPolId);
 805                 }
 806
 807                 $("#deletePolicy").on('click', function() {
 808                         $(".idError").hide();
 809                         //delete policy id
 810                         allPolIds.splice((allPolIds.indexOf(parseInt($("#pid").val()))),1);
 811
 812                         //delete policy name
 813                         var deleteId = $("#policyTable .highlight td").html();
 814                         delete allPolicies[deleteId];
 815                         $("#policyTable .highlight").remove();
 816                         $("#pname").val('');
 817                         expandTable();
 818                 });
 819
 820                 $('#policyTable').on('click', 'tr', function(event) {
 821                         $(".idError").hide();
 822                         //edited name
 823                         if ($("#policyTable .highlight td").html() !== $("#pname").val()){
 824                                 //repeated name
 825                                 if ($.inArray($("#pname").val(), Object.keys(allPolicies)) > -1){
 826                                         $("#repeatIdError").show();
 827                                         return;
 828                                 } else { //not repeated
 829                                         $("#repeatIdError").hide();
 830                                         delete allPolicies[$("#policyTable .highlight td").html()];
 831                                 }
 832                         }
 833                         //if (parseInt($("#pname").val()) == 0){
 834                         if ($("#pname").val().trim() == "New_Policy"){
 835                                 $("#newIdError").show();
 836                                 return;
 837                         }
 838                         if (!(readMOnly)){
 839                                 startNextItem();
 840                         } else {
 841                                 if ($("#policyTable .highlight").length == 0){
 842                                         collapseTable();
 843                                 }
 844                         }
 845                         $(this).addClass('highlight').siblings().removeClass('highlight');
 846                         disperseConfig(allPolicies, $(this).find("td").html());
 847                 });
 848
 849                 $('#createNewPolicy').on('click', function(){
 850                         $(".idError").hide();
 851                         //edited name
 852                         if ($("#policyTable .highlight td").html() !== $("#pname").val()){
 853                                 //repeated name
 854                                 if ($.inArray($("#pname").val(), Object.keys(allPolicies)) > -1){
 855                                         $("#repeatIdError").show();
 856                                         return;
 857                                 } else { //not repeated
 858                                         $("#repeatIdError").hide();
 859                                         delete allPolicies[$("#policyTable .highlight td").html()];
 860                                 }
 861                         }
 862                         //if (parseInt($("#pname").val()) == 0){
 863                         if ($("#pname").val().trim() == "New_Policy"){
 864                                 $("#newIdError").show();
 865                                 return;
 866                         }
 867                         startNextItem();
 868                         add_new_policy();
 869                         if (("#policyTable .highlight").length > 0){
 870                                 $('#policyTable tr.highlight').removeClass('highlight');
 871                         }
 872             $("#policyTable").prepend("<tr class='highlight'><td>New_Policy</td></tr>");
 873
 874             getNextId();
 875                 });
 876
 877                 $('#pname').on('keypress', function(e){
 878                         /* var newVal = $(this).val() + String.fromCharCode(e.which);
 879                         if ((newVal>99) || (($(this).val().length>2) && e.keyCode != 46 && e.keyCode !=8)){
 880                                 e.preventDefault();
 881                         } */
 882                         if (e.keyCode == 32){
 883                                 $("#spaceError").show();
 884                                 e.preventDefault();
 885                         }
 886                 });
 887
 888                 function isNumberKey(event){
 889                         var charCode = (event.which) ? event.which : event.keyCode
 890                         if (charCode > 31 && (charCode < 48 || charCode > 57)){
 891                                 return false;
 892                         }
 893                         return true;
 894                 }
 895
 896                 function startNextItem() {
 897                         //save last item before transitioning
 898                         var lastItem = $("#policyTable .highlight");
 899                         if (lastItem.length > 0) {
 900                                 saveLastPolicyLocally($("#pname").val());
 901                                 //lastItem.attr("id", $("#pname").val());
 902                                 lastItem.find("td").html($("#pname").val());
 903                         } else {
 904                                 collapseTable();
 905                         }
 906
 907                         //allow deleting
 908                         if ($("#deletePolicy").prop("disabled")) {
 909                                 $("#deletePolicy").prop("disabled", false);
 910                         }
 911                 }
 912
 913                 setASDCFields();
 914                 initTargetResourceId();
 915
 916                 //load metrics dropdown
 917                 if (elementMap["global"]){
 918                         for (var i = 0; i < (elementMap["global"].length); i++){
 919                                 if ((elementMap["global"][i]["name"]) == "actionSet"){
 920                                         var asSel = elementMap["global"][i]["value"];
 921                                         if (asSel == "vnfRecipe"){
 922                                                 if (vf_Services["policy"][asSel]){
 923                                                         $.each((vf_Services["policy"][asSel]), function(val, text) {
 924                                                 $('#recipe').append(
 925                                                     $('<option></option>').val(val).html(text)
 926                                                 );
 927                                             });
 928                                                 }
 929                                                 break;
 930                                         }
 931                                 };
 932                         };
 933                 };
 934                 //Show table panel only
 935                 function expandTable() {
 936                         $(".policyPanel").css("display", "none");
 937                         $(".leftPolicyPanel").removeClass("col-sm-3");
 938                         $(".modelSearchBox").css("padding", "25px 12px");
 939                         if (!($("#deletePolicy").prop("disabled"))) {
 940                                 $("#deletePolicy").prop("disabled", true);
 941                         }
 942                 }
 943
 944                 //Show both menus
 945                 function collapseTable() {
 946                         $(".leftPolicyPanel").addClass("col-sm-3");
 947                         $(".modelSearchBox").css("padding", "10px 12px");
 948                         $(".policyPanel").css("display", "unset");
 949                 }
 950         </script>
 951 </div>