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