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
 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                 function addCustListen(count) {
 607                         $('#go_properties_tab' + count).click(function(event) {
 608                                 $("#nav_Tabs li").removeClass("active");
 609                                 $(this).parent().addClass("active");
 610                                 $("#formId" + count).css("display", "")
 611                                 $(".formId").not($("#formId" + count)).css("display", "none")
 612
 613                         })
 614                         $('#tab_close' + count).click(function(event) {
 615                                 if(document.getElementById("timeout").disabled){
 616                                         return false;
 617                                 }
 618                                 $(this).parent().remove();
 619                                 for(var i=1;i<=greatestIdNum();i++){
 620                                         if(     $("#formId"+i).length>0){
 621                                                 if(i!==count ){
 622                                                         if(     $("#formId"+i+" #parentPolicy").val()===$("#formId"+count+" #_id").val().toString())
 623                                                                 $("#formId"+i+" #parentPolicy").val("")
 624                                                         $("#formId"+i+" #parentPolicy option[value='"+$("#formId"+count+" #_id").val().toString()+"']").remove();
 625                                                 }
 626                                         }
 627                                 }
 628                                 delete policy_ids["#formId" + count + " #_id"]
 629                                 $("#formId" + count).remove();
 630                         })
 631                 }
 632
 633
 634                 function greatestIdNum() {
 635                         var greatest = 0;
 636                         var s = $(".formId");
 637                         for (var i = 0; i < s.length; i++) {
 638                                 if (parseInt($(s[i]).attr("id").substring(6)) > greatest) {
 639                                         greatest = parseInt($(s[i]).attr("id").substring(6))
 640                                 }
 641                         }
 642                         return greatest;
 643                 }
 644
 645                 //Generate random id for each policy
 646                 //Also made sure ids couldnt be repeated
 647                 function makeid(num) {
 648
 649                         var text = "";
 650                         var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 651                         if (num == null)
 652                                 num = 7;
 653                         for (var i = 0; i < 7; i++)
 654                                 text += possible.charAt(Math.floor(Math.random()
 655                                                 * possible.length));
 656                         var hasValue = false;
 657                         for (k in policy_ids) {
 658                                 if (text === policy_ids[k])
 659                                         hasValue = true
 660                         }
 661                         if (hasValue)
 662                                 return makeid(num);
 663                         else
 664                                 return text
 665                 }
 666
 667                 var ParentPolicy = function(id, name) {
 668                         this.id = id
 669                         this.name = name
 670                 }
 671
 672                 //Policy table search filter
 673                 function searchPolicyList() {
 674                         var search = document.getElementById("policySearch");
 675                         var row = document.getElementsByTagName("td");
 676                         for (var i = 0; i < row.length; i++) {
 677                                 if (row[i].innerHTML.toUpperCase().indexOf(
 678                                                 search.value.toUpperCase()) > -1) {
 679                                         row[i].style.display = "";
 680                                 } else {
 681                                         row[i].style.display = "none";
 682                                 }
 683                         }
 684                 }
 685
 686                 function saveLastPolicyLocally(lastPolicyId) {
 687                         var polForm = []
 688
 689                         var properties = $(".saveProps").not("#formSpan .saveProps");
 690                         var timeoutForm = $("#Timeoutform").serializeArray();
 691
 692                         for (var i = 0; i < timeoutForm.length; i++) {
 693                                 polForm.push(timeoutForm[i]);
 694                         }
 695
 696                         var d = {}
 697                         d["policyConfigurations"] = [];
 698                         for (var i = 0; i < properties.length; i++) {
 699                                 var ser = $(properties[i]).serializeArray();
 700                                 var s = noRepeats(ser)
 701                                 d["policyConfigurations"].push(s);
 702                         }
 703                         polForm.push(d);
 704                         allPolicies[lastPolicyId] = polForm;
 705                 }
 706
 707                 function getNextId(){
 708                         var newPolId;
 709                         allPolIds.sort();
 710                         if ((Math.min.apply(Math, allPolIds) == 0)
 711                                         && (allPolIds.length > 0)) {
 712                                 loop1:
 713                                         for (var i = 1; i < allPolIds.length; i++) {
 714                                                 if ((allPolIds[i] - allPolIds[i - 1]) != 1) {
 715                                                         newPolId = (allPolIds[i - 1] + 1);
 716                                                         break loop1;
 717                                                 };
 718                                         };
 719                                 if (!newPolId) {
 720                                         newPolId = (Math.max.apply(Math, allPolIds)) + 1;
 721                                 }
 722                         } else {
 723                                 newPolId = 0;
 724                         }
 725                         allPolIds.push(newPolId);
 726                         $("#pid").val(newPolId);
 727                 }
 728
 729                 $("#deletePolicy").on('click', function() {
 730                         $(".idError").hide();
 731                         //delete policy id
 732                         allPolIds.splice((allPolIds.indexOf(parseInt($("#pid").val()))),1);
 733
 734                         //delete policy name
 735                         var deleteId = $("#policyTable .highlight td").html();
 736                         delete allPolicies[deleteId];
 737                         $("#policyTable .highlight").remove();
 738                         $("#pname").val('');
 739                         expandTable();
 740                 });
 741
 742                 $('#policyTable').on('click', 'tr', function(event) {
 743                         $(".idError").hide();
 744                         //edited name
 745                         if ($("#policyTable .highlight td").html() !== $("#pname").val()){
 746                                 //repeated name
 747                                 if ($.inArray($("#pname").val(), Object.keys(allPolicies)) > -1){
 748                                         $("#repeatIdError").show();
 749                                         return;
 750                                 } else { //not repeated
 751                                         $("#repeatIdError").hide();
 752                                         delete allPolicies[$("#policyTable .highlight td").html()];
 753                                 }
 754                         }
 755                         //if (parseInt($("#pname").val()) == 0){
 756                         if ($("#pname").val().trim() == "New_Policy"){
 757                                 $("#newIdError").show();
 758                                 return;
 759                         }
 760                         if (!(readMOnly)){
 761                                 startNextItem();
 762                         } else {
 763                                 if ($("#policyTable .highlight").length == 0){
 764                                         collapseTable();
 765                                 }
 766                         }
 767                         $(this).addClass('highlight').siblings().removeClass('highlight');
 768                         disperseConfig(allPolicies, $(this).find("td").html());
 769                 });
 770
 771                 $('#createNewPolicy').on('click', function(){
 772                         $(".idError").hide();
 773                         //edited name
 774                         if ($("#policyTable .highlight td").html() !== $("#pname").val()){
 775                                 //repeated name
 776                                 if ($.inArray($("#pname").val(), Object.keys(allPolicies)) > -1){
 777                                         $("#repeatIdError").show();
 778                                         return;
 779                                 } else { //not repeated
 780                                         $("#repeatIdError").hide();
 781                                         delete allPolicies[$("#policyTable .highlight td").html()];
 782                                 }
 783                         }
 784                         //if (parseInt($("#pname").val()) == 0){
 785                         if ($("#pname").val().trim() == "New_Policy"){
 786                                 $("#newIdError").show();
 787                                 return;
 788                         }
 789                         startNextItem();
 790                         add_new_policy();
 791                         if (("#policyTable .highlight").length > 0){
 792                                 $('#policyTable tr.highlight').removeClass('highlight');
 793                         }
 794             $("#policyTable").prepend("<tr class='highlight'><td>New_Policy</td></tr>");
 795
 796             getNextId();
 797                 });
 798
 799                 $('#pname').on('keypress', function(e){
 800                         /* var newVal = $(this).val() + String.fromCharCode(e.which);
 801                         if ((newVal>99) || (($(this).val().length>2) && e.keyCode != 46 && e.keyCode !=8)){
 802                                 e.preventDefault();
 803                         } */
 804                         if (e.keyCode == 32){
 805                                 $("#spaceError").show();
 806                                 e.preventDefault();
 807                         }
 808                 });
 809
 810                 function isNumberKey(event){
 811                         var charCode = (event.which) ? event.which : event.keyCode
 812                         if (charCode > 31 && (charCode < 48 || charCode > 57)){
 813                                 return false;
 814                         }
 815                         return true;
 816                 }
 817
 818                 function startNextItem() {
 819                         //save last item before transitioning
 820                         var lastItem = $("#policyTable .highlight");
 821                         if (lastItem.length > 0) {
 822                                 saveLastPolicyLocally($("#pname").val());
 823                                 //lastItem.attr("id", $("#pname").val());
 824                                 lastItem.find("td").html($("#pname").val());
 825                         } else {
 826                                 collapseTable();
 827                         }
 828
 829                         //allow deleting
 830                         if ($("#deletePolicy").prop("disabled")) {
 831                                 $("#deletePolicy").prop("disabled", false);
 832                         }
 833                 }
 834
 835                 setASDCFields();
 836                 initTargetResourceId();
 837                 //load metrics dropdown
 838                 if (elementMap["global"]){
 839                         for (var i = 0; i < (elementMap["global"].length); i++){
 840                                 if ((elementMap["global"][i]["name"]) == "actionSet"){
 841                                         var asSel = elementMap["global"][i]["value"];
 842                                         if (asSel == "vnfRecipe"){
 843                                                 if (vf_Services["policy"][asSel]){
 844                                                         $.each((vf_Services["policy"][asSel]), function(val, text) {
 845                                                 $('#recipe').append(
 846                                                     $('<option></option>').val(val).html(text)
 847                                                 );
 848                                             });
 849                                                 }
 850                                                 break;
 851                                         }
 852                                 };
 853                         };
 854                 };
 855
 856                 //Show table panel only
 857                 function expandTable() {
 858                         $(".policyPanel").css("display", "none");
 859                         $(".leftPolicyPanel").removeClass("col-sm-3");
 860                         $(".modelSearchBox").css("padding", "25px 12px");
 861                         if (!($("#deletePolicy").prop("disabled"))) {
 862                                 $("#deletePolicy").prop("disabled", true);
 863                         }
 864                 }
 865
 866                 //Show both menus
 867                 function collapseTable() {
 868                         $(".leftPolicyPanel").addClass("col-sm-3");
 869                         $(".modelSearchBox").css("padding", "10px 12px");
 870                         $(".policyPanel").css("display", "unset");
 871                 }
 872         </script>
 873 </div>