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