src/main/resources/META-INF/resources/designer/partials/portfolios/PolicyWindow_properties.html

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