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