src/main/resources/META-INF/resources/designer/partials/portfolios/tca_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 #createNewThresh{
  26         height:34px;
  27         width:120px; /*84*/
  28         background-color:#f2bfab;
  29 }
  30
  31 #deleteThresh{
  32         height:34px;
  33         background-color:#dddd;
  34 }
  35
  36 .fileUpload {
  37         position: relative;
  38         overflow: hidden;
  39         margin: 10px;
  40 }
  41
  42 .fileUpload input.upload {
  43         position: absolute;
  44         top: 0;
  45         right: 0;
  46         margin: 0;
  47         padding: 0;
  48         font-size: 20px;
  49         cursor: pointer;
  50         opacity: 0;
  51         filter: alpha(opacity = 0);
  52         float: left;
  53 }
  54
  55 .fileDisplay {
  56         display: inline-block;
  57         overflow: hidden;
  58         float: right;
  59         margin-left: 0px;
  60         z-index: initial;
  61         text-align: center;
  62         margin-top: 17px;
  63 }
  64
  65 .form-group {
  66         margin-bottom:15px;
  67         display:-webkit-flex;
  68         display: flex;
  69         align-items: center;
  70 }
  71
  72 #tcaEditHolder{
  73         background-color: #f5f5f5;
  74         padding:10px 10px;
  75         margin: 15px 15px 0 0;
  76         float: right;
  77 }
  78
  79
  80 #tcaEditHolder #properties_tab>div+div {
  81   margin-top: 10px;
  82 }
  83
  84 .tcaErr{
  85         display:none;
  86         text-align:center;
  87         margin-bottom:20px;
  88         color:red;
  89 }
  90
  91 .tcaParentItems {
  92         padding-left: 20px;
  93 }
  94
  95 .tcaParentItems label{
  96         margin-bottom: 0px;
  97 }
  98
  99 #tcaTable{
 100         cursor: pointer;
 101         width:100%;
 102 }
 103
 104 #tcaTable tr{
 105         border-bottom: 1px solid #ddd;
 106         border-collapse: collapse;
 107         text-align: center;
 108         font-size: 12px;
 109         font-weight: normal;
 110 }
 111
 112 #tcaTable td{
 113         padding: 8px 10px;
 114 }
 115
 116 #tcaTable tr.highlight{
 117         background-color: #f5f5f5;
 118         font-weight: bold;
 119         font-size: 13px;
 120 }
 121
 122 #tcaTableHolder{
 123         height:160px;
 124         width: 100%;
 125         overflow:auto;
 126 }
 127
 128 </style>
 129
 130 <script type="text/javascript">
 131         function disablefile() {
 132
 133                 document.getElementById("fileUpload").disabled = true;
 134
 135         }
 136
 137         function disableSVN() {
 138                 var selectLength =  document.querySelectorAll(".disabled-block-container .tab-close-popup");
 139                 if(selectLength && selectLength.length>0){
 140                         for(var i = 0; i< selectLength.length ; i++){
 141                                 selectLength[i].disabled = true;
 142                         }
 143                 }
 144
 145                 document.getElementById("schemaLocation").disabled = true;
 146                 document.getElementById("userID").disabled = true;
 147                 document.getElementById("password").disabled = true;
 148
 149         }
 150 </script>
 151
 152
 153 <div id="configure-widgets" class="disabled-block-container">
 154         <div class="modal-header">
 155                 <button type="button" class="close" ng-click="close(false)"
 156                         aria-hidden="true" style="margin-top: -3px">&times;</button>
 157                 <h4>TCA Micro Services</h4>
 158         </div>
 159         <div class="modal-body">
 160                 <div style="height: 10px"></div>
 161                 <div class="panel panel-default" id="panelHolder">
 162
 163                         <span id="formSpan" style="display:none;">
 164                         <div class="panel-body">
 165
 166                                 <form class="tcaParentItems">
 167                                         <div class="row">
 168                                                 <div class="col-sm-8 form-group">
 169                                                         <label class="col-sm-3"> Name </label>
 170                                                         <div class="col-sm-9" style="padding:0px;">
 171                                                                 <input class="form-control" type="text" maxlength="48" id="tname" name="tname"></input>
 172                                                         </div>
 173                                                 </div>
 174
 175                                                 <div class="col-sm-8 form-group" style="display:none;">
 176                                                         <label class="col-sm-3"> UUID </label>
 177                                                         <div class="col-sm-9" style="padding:0px;">
 178                                                                 <input class="form-control" onkeydown="return false;" type="text" id="tuuid" name="tuuid"></input>
 179                                                         </div>
 180                                                 </div>
 181
 182                                                 <div class="col-sm-8 form-group" style="display:none;">
 183                                                         <label class="col-sm-3"> NF Code </label>
 184                                                         <div class="col-sm-9" style="padding:0px;">
 185                                                                 <input class="form-control" onkeydown="return false;" type="text" id="tnfc" name="tnfc"></input>
 186                                                         </div>
 187                                                 </div>
 188
 189                                         </div>
 190                                         <div class="row">
 191                                                 <div class="col-sm-8 form-group">
 192                                                         <label class="col-sm-3"> Policy </label>
 193                                                         <div class="col-sm-9" style="padding:0px;">
 194                                                                 <select name="tcaPol" id="tcaPol" enableFilter="true"></select>
 195                                                         </div>
 196                                                 </div>
 197                                                 <div class="col-sm-8 form-group">
 198                                                         <label class="col-sm-3">EventName</label>
 199                                                         <div class="col-sm-9" style="padding:0px;">
 200                                                                 <select name="eventName" id="eventName" enableFilter="true"></select>
 201                                                         </div>
 202                                                 </div>
 203
 204                                                 <div class="col-sm-8 form-group" style="display:none;">
 205                                                         <label class="col-sm-3"> Policy ID </label>
 206                                                         <div class="col-sm-9" style="padding:0px;">
 207                                                                 <input class="form-control" onkeydown="return false;" type="text" id="tcaPolId" name="tcaPolId"></input>
 208                                                         </div>
 209                                                 </div>
 210
 211                                         </div>
 212                                 </form>
 213
 214                                 <div class="tcaBody row">
 215                                         <div class="col-sm-5" style="padding:0px 5px; margin: 15px;">
 216                                                 <div class="panel panel-default" id="tcaTableHolder">
 217                                                         <table id="tcaTable">
 218                                                         </table>
 219                                                 </div>
 220                                                 <div id="tcaError" class="tcaErr">Error: Please define/delete this new threshold</div>
 221                                                 <div id="tcaUnique" class="tcaErr">Error: Duplicate Set Name Found</div>
 222                                                 <div style="float:left">
 223                                                         <button type="button" id="createNewThresh" class="btn btn-sm">New Threshold</button>
 224                                                 </div>
 225                                                 <div style="float:right">
 226                                                         <button type="button" id="deleteThresh" class="btn btn-sm glyphicon glyphicon-trash" disabled></button>
 227                                                 </div>
 228
 229                                         </div>
 230
 231                                         <div id="tcaEditHolder" class="panel panel-default col-sm-6">
 232                                                 <div class="tab-content">
 233                                                         <div id="properties_tab" class="form-vertical">
 234                                                                 <div>
 235                                                                         <label class="control-label">Metric</label>
 236                                                                         <div>
 237                                                                                 <select id="fieldPathM" name="fieldPathM"></select>
 238                                                                         </div>
 239                                                                 </div>
 240                                                                 <div>
 241                                                                         <label class="control-label">Operator</label>
 242                                                                         <div>
 243                                                                                 <select id="operator" name="operator"></select>
 244                                                                         </div>
 245                                                                 </div>
 246                                                                 <div>
 247                                                                         <label class="control-label">Threshold</label>
 248                                                                         <div>
 249                                                                                 <input type="text" maxlength="10" class="form-control" name="threshold"
 250                                                                                 onkeypress="return isNumberKey(event)" id="threshold"></input>
 251                                                                         </div>
 252                                                                 </div>
 253                                                                 <div>
 254                                                                         <label class="control-label">Control Loop Schema</label>
 255                                                                         <div>
 256                                                                                 <select id="controlLoopSchema" name="controlLoopSchema"></select>
 257                                                                         </div>
 258                                                                 </div>
 259                                                                 <div>
 260                                                                         <label class="control-label">Closed Loop Event Status</label>
 261                                                                         <div>
 262                                                                                 <select id="closedLoopEventStatus" name="closedLoopEventStatus"></select>
 263                                                                         </div>
 264                                                                 </div>
 265                                                         </div>
 266                                                 </div>
 267                                         </div>
 268                                 </div>
 269
 270                         </div>
 271                         </span>
 272
 273                 </div>
 274         </div>
 275 </div>
 276
 277         <div class="modal-footer">
 278                 <!--<button ng-click="reset()" class="btn btn-primary" style="float:left">Reset</button>-->
 279                 <button id="savePropsBtn" class="btn btn-primary">Close</button>
 280                 <button ng-click="close(true)" id="close_button"
 281                         class="btn btn-primary">Cancel</button>
 282         </div>
 283
 284         <script language="javascript">
 285     // helper that make jquery objects visibles or invisible
 286     // to use instead of show to keep placeholder size correct
 287     jQuery.fn.visible = function() {
 288         return this.css('visibility', 'visible');
 289     };
 290     jQuery.fn.invisible = function() {
 291         return this.css('visibility', 'hidden');
 292     };
 293
 294                 var generateTUUID = function(count){
 295                         var d = new Date().getTime();
 296                         var tuuid = 'xxxxxxxx-xxxx-txxx-xxxx-xxxxxxxxxxxx'.replace(/[x]/g, function(c){
 297                                 var r = (d + Math.random()*16)%16 | 0;
 298                                 d = Math.floor(d/16);
 299                                 return (c == 'x' ? r : (r*0x3|0*8)).toString(16);
 300                         });
 301                         $("#formId" + count + " #tuuid").val(tuuid);
 302                 };
 303
 304
 305     var propertiesToString = function(formIdNum) {
 306       return $('#formId'+formIdNum+' #fieldPathM').val() + ' ' +
 307                                 $('#formId'+formIdNum+' #operator').val() + ' ' +
 308                                 $('#formId'+formIdNum+' #threshold').val() + ' ' +
 309         $('#formId'+formIdNum+' #controlLoopSchema').val() + ' ' +
 310         $('#formId'+formIdNum+' #closedLoopEventStatus').val();
 311     };
 312
 313                 loadPropertyWindow("tca");
 314
 315                 //load dropdown with policy options
 316                 if (typeof allPolicies !== "undefined"){
 317                 $.each(Object.keys(allPolicies), function(val, text) {
 318                         $('#tcaPol').append($('<option></option>').val(text).html(text));
 319                 });
 320                 } else if (typeof elementMap !== "undefined"){
 321                         for (key in elementMap){
 322                                 if (key.indexOf("Policy")>-1){
 323                                         $.each(Object.keys(elementMap[key]), function(val, text){
 324                                                 $('#tcaPol').append(
 325                                                         $('<option></option>').val(text).html(text)
 326                                                 );
 327                                         });
 328                                 }
 329                         }
 330                 }
 331
 332                 setASDCFields();
 333
 334                 //load metrics dropdown
 335                 if (elementMap["global"]){
 336                         for (var i = 0; i < (elementMap["global"].length); i++){
 337                                 if ((elementMap["global"][i]["name"]) == "vf"){
 338                                         var vfSel = elementMap["global"][i]["value"];
 339                                         if (vf_Services["shared"]["byVf"][vfSel]["kpi"]){
 340                                                 $.each((vf_Services["shared"]["byVf"][vfSel]["kpi"]), function(val, text) {
 341                                         $('#fieldPathM').append(
 342                                             $('<option></option>').val(val).html(text)
 343                                         );
 344                                     });
 345                                         }
 346                                         break;
 347                                 };
 348                         };
 349                 };
 350
 351                 var arr = elementMap[lastElementSelected];
 352
 353                 if (arr !== undefined) {
 354                         for (var x in arr){
 355                                 var num = add_one_more();
 356                                 for (var i=0; i< arr[x].length; i++){
 357
 358                                         if (arr[x][i].hasOwnProperty('serviceConfigurations')){
 359                                                 for (var j=0; j<arr[x][i]["serviceConfigurations"].length; j++){
 360                                                         $("#formId" + num + " #tcaTable").prepend("<tr><td>"
 361                                                                         +arr[x][i]["serviceConfigurations"][j][0]+" "
 362                                                                         +(Object.keys(defaults_props['tca']['operator']).find(key => defaults_props['tca']['operator'][key] == (arr[x][i]["serviceConfigurations"][j][1])))+ " "
 363                                                                         +arr[x][i]["serviceConfigurations"][j][2]+"</td></tr>");
 364                                                 }
 365                                         } else {
 366                                                 $("#formId" + num + " #"+arr[x][i].name).val(arr[x][i].value);
 367                                         }
 368                                 }
 369                                 $('#go_properties_tab'+num).text($('#formId' +num+ ' #tname').val());
 370                                 $("#formId"+num + " #properties_tab").invisible();
 371                         }
 372                 }
 373
 374                 $("#savePropsBtn").click(function(event) {
 375                         var num = 1
 376                         if (($('#formId'+num+' #tcaTable .highlight').length > 0 ) &&
 377                                         (!($('#formId'+num+' #threshold').val()) || !($('#formId'+num+' #fieldPathM').val())) ) {
 378                                 $('#formId'+num+' #tcaError').show();
 379                                 return;
 380                         } else {
 381                                 $('#formId'+num+' .tcaErr').hide();
 382                                 if ($('#formId'+num+' #tcaTable .highlight').length > 0){
 383                                         $('#formId'+num+' #tcaTable .highlight td').text(propertiesToString(num));
 384                                 }
 385                                 var saveP = {};
 386                                 $('.formId').each(function(){
 387                                         var count = $(this).attr('id').slice(-1);
 388                                         var header = $(this).find('.tcaParentItems').serializeArray();
 389                                         var sconf = {};
 390                                         var sconfa = [];
 391                                         var checkNF = true;
 392                                         $('#formId' +count+' #tcaTable tr').each(function(){
 393                                                 $('td', this).each(function(){
 394                                                         var splitTd = $(this).text().split(' ');
 395                                                         splitTd[1]=defaults_props['tca']['operator'][splitTd[1]];
 396                                                         var checkByKpi = vf_Services["shared"]["byKpi"][splitTd[0].replace(/\s/g, "")];
 397                                                         if (checkByKpi["fieldPath"]){
 398                                                                 splitTd.push(Object.keys(vf_Services["shared"]["byKpi"][splitTd[0].replace(/\s/g, "")]["fieldPath"])[0]);
 399                                                         };
 400                                                         if ((checkByKpi["nfNamingCode"]) && (checkNF)){
 401                                                                 $.grep(header, function(e,i){
 402                                                                         if (e.name == "tnfc"){
 403                                                                                 header[i]["value"] = (Object.keys(checkByKpi["nfNamingCode"])[0]);
 404                                                                         }
 405                                                                 });
 406                                                                 checkNF = false;
 407                                                         }
 408                                                         sconfa.push(splitTd);
 409                                                 });
 410
 411                                         });
 412                                         var polSel = $(this).find('.tcaParentItems #tcaPol').val();
 413                                         $.grep(header, function(e,i){
 414                                                 if (e.name == "tcaPolId"){
 415                                                         if (polSel){
 416                                                                 if (typeof allPolicies !== "undefined"){
 417                                                                         header[i]["value"] = allPolicies[polSel][1]["value"];
 418                                                                 } else if (typeof elementMap !== "undefined"){
 419                                                                         for (key in elementMap){
 420                                                                                 if (key.indexOf("Policy")>-1){
 421                                                                                         header[i]["value"] = elementMap[key][polSel][1]["value"];
 422                                                                                 }
 423                                                                         }
 424                                                                 }
 425                                                         } else {
 426                                                                 header[i]["value"]="";
 427                                                         }
 428                                                 }
 429                                         });
 430
 431                                         sconf["serviceConfigurations"]=sconfa;
 432                                         header.push(sconf);
 433                                         saveP[$(this).find('.tcaParentItems #tname').val()] = header;
 434                                 });
 435
 436                                 saveProperties(saveP);
 437                                 $("#close_button").click();
 438                         }
 439                 })
 440
 441                 function uniquet(arr) {
 442                     var a = [];
 443                     for (var i=0, l=arr.length; i<l; i++){
 444                         if (a.indexOf(arr[i]) === -1 && arr[i] !== ''){
 445                                  a.push(arr[i]);
 446                         }
 447                     }
 448                     if (a.length==arr.length){
 449                         return false;
 450                     } else {
 451                         return true;
 452                     }
 453                 }
 454
 455                 function add_one_more(){
 456                         $("#nav_Tabs li").removeClass("active");
 457                         var form=$($("#formSpan").children()[0]).clone();
 458                         var count=0;
 459                         if($(".formId").length>0){
 460                                 var greatest=0;
 461                                 var s=$(".formId");
 462                                 for(var i=0;i<s.length; i++){
 463                                         if(parseInt($(s[i]).attr("id").substring(6))>greatest){
 464                                                 greatest=parseInt($(s[i]).attr("id").substring(6))
 465                                         }
 466                                 }
 467                                 count=greatest+1;
 468                                 $("#panelHolder").append(('<span class="formId" id="formId'+count+'"></span>'));
 469                         }else{
 470                                 count++;
 471                                 $("#panelHolder").append('<span class="formId" id="formId1"></span>');
 472                         }
 473
 474                         $("#add_one_more").parent().before(' <li class="active"><a id="go_properties_tab'+count+'">New_Set</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>');
 475                         $("#formId"+count).append(form);
 476                         $('#formId'+count+ ' #properties_tab').invisible();
 477                         $(".formId").not($("#formId"+count)).css("display","none");
 478                         addCustListen(count);
 479                         setMultiSelect();
 480                         return count;
 481                 }
 482
 483                 function isNumberKey(event){
 484                         var charCode = (event.which) ? event.which : event.keyCode
 485                         if (charCode > 31 && (charCode < 48 || charCode > 57)){
 486                                 return false;
 487                         }
 488                         return true;
 489                 };
 490
 491                 function addCustListen(count) {
 492                         $('#go_properties_tab' + count).click(function(event) {
 493                                 if ($("#nav_Tabs li.active").length>0){
 494                                         var oldCount = $("#nav_Tabs li.active").find("a").attr("id").slice(-1);
 495                                         if (($('#formId'+oldCount+' #tcaTable .highlight').length > 0 ) &&
 496                                                         (!($('#formId'+oldCount+' #threshold').val()) || !($('#formId'+oldCount+' #fieldPathM').val())) ) {
 497                                                 $('#formId'+oldCount+' #tcaError').show();
 498                                                 return;
 499                                         } else {
 500                                                 $('#formId'+oldCount+' .tcaErr').hide();
 501                                                 if ($('#formId'+oldCount+' #tcaTable .highlight').length > 0){
 502                                                         $('#formId'+oldCount+' #tcaTable .highlight td').text(propertiesToString(oldCount));
 503                                                 }
 504                                                 $("#formId"+oldCount+" #tcaTable .highlight").removeClass("highlight")
 505                                         }
 506                                 }
 507
 508                                 $("#nav_Tabs li").removeClass("active");
 509                                 $(this).parent().addClass("active");
 510                                 $("#formId"+count).css("display","");
 511                                 $(".formId").not($("#formId"+count)).css("display","none");
 512                         });
 513
 514                         $('#tab_close'+count).click(function(event){
 515                                 $(this).parent().remove();
 516                                 $("#formId"+count).remove();
 517                         });
 518
 519                         $('#formId'+count+' #tcaTable').on('click', 'tr', function(event){
 520                                 if (($('#formId'+count+' #tcaTable .highlight').length > 0 ) &&
 521                                                 (!($('#formId'+count+' #threshold').val()) || !($('#formId'+count+' #fieldPathM').val())) ) {
 522                                         $('#formId'+count+' #tcaError').show();
 523                                         return;
 524                                 } else {
 525                                         $('#formId'+count+' .tcaErr').hide();
 526                                         if ($('#formId'+count+' #tcaTable .highlight').length > 0){
 527                                                 $('#formId'+count+' #tcaTable .highlight td').text(propertiesToString(num));
 528                                         }
 529                                         //$('#formId'+count+' #tcaTable .highlight').text();
 530                                         $(this).addClass('highlight').siblings().removeClass('highlight');
 531                                         var str = $(this).text().split(' ');
 532                                         $('#formId'+count + ' #properties_tab').visible();
 533                                         if (str.length == 5){
 534                                                 $('#formId'+count+' #fieldPathM').val(str[0]).multiselect('refresh');
 535                                                 $('#formId'+count+' #operator').val(str[1]).multiselect('refresh');
 536                                                 $('#formId'+count+' #threshold').val(str[2]);
 537             $('#formId'+count+' #controlLoopSchema').val(str[3]).multiselect('refresh');
 538             $('#formId'+count+' #closedLoopEventStatus').val(str[4]).multiselect('refresh');
 539                                         }
 540
 541                                         if ((!(readOnly||readMOnly)) && ($('#formId'+count + ' #deleteThresh').prop('disabled'))) {
 542                                                 $('#formId'+count + ' #deleteThresh').prop('disabled', false);
 543                                         }
 544                                 }
 545                         });
 546
 547                         $('#formId'+count+' #deleteThresh').on('click', function(){
 548                                 $('#formId'+num+' .tcaErr').hide();
 549                                 $('#formId'+count+ ' #properties_tab').invisible();
 550                                 $('#formId'+count+ ' #tcaTable .highlight').remove();
 551                                 $('#formId'+count+ ' #deleteThresh').prop('disabled', true);
 552                         });
 553
 554                         $('#formId'+count+' #createNewThresh').on('click', function(){
 555                                 if (($('#formId'+count+' #tcaTable .highlight').length > 0 ) &&
 556                                                 (!($('#formId'+count+' #threshold').val()) || !($('#formId'+count+' #fieldPathM').val())) ){
 557                                         $('#formId'+count+' #tcaError').show();
 558                                         return;
 559                                 } else {
 560                                         $('#formId'+count+' .tcaErr').hide();
 561                                         if ($('#formId'+count+' #tcaTable .highlight').length > 0){
 562                                                 $('#formId'+count+' #tcaTable .highlight td').text(propertiesToString(count));
 563                                         }
 564                                         $('#formId'+count+ ' #properties_tab').visible();
 565                                         if (('#formId'+count+' #tcaTable .highlight').length > 0 ){
 566                                                 $('#formId'+count+' #tcaTable tr.highlight').removeClass('highlight');
 567                                         }
 568                                         $('#formId'+count+' #tcaTable').prepend('<tr class="highlight"><td>New Threshold</td></tr>');
 569                                         $('#formId'+count+' #fieldPathM').prop("selectedIndex", 0).multiselect('refresh');
 570                                         $('#formId'+count+' #operator').prop("selectedIndex", 0).multiselect('refresh');
 571                                         $('#formId'+count+' #threshold').val("");
 572           $('#formId'+count+' #controlLoopSchema').prop("selectedIndex", 0).multiselect('refresh');
 573           $('#formId'+count+' #closedLoopEventStatus').prop("selectedIndex", 0).multiselect('refresh');
 574
 575                                         if ($('#formId'+count + ' #deleteThresh').prop('disabled')) {
 576                                                 $('#formId'+count + ' #deleteThresh').prop('disabled', false);
 577                                         }
 578                                 }
 579                         });
 580
 581                         $('#formId'+count+' #tname').on('change',function(){
 582                                 $('#go_properties_tab'+count).text($('#formId'+count+' #tname').val())
 583                         });
 584                 }
 585         </script>
 586 </div>