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