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