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