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