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]+" "
 364                                                                         +arr[x][i]["serviceConfigurations"][j][3]+" "
 365                                                                         +arr[x][i]["serviceConfigurations"][j][4]+"</td></tr>");
 366                                                 }
 367                                         } else {
 368                                                 $("#formId" + num + " #"+arr[x][i].name).val(arr[x][i].value);
 369                                         }
 370                                 }
 371                                 $('#go_properties_tab'+num).text($('#formId' +num+ ' #tname').val());
 372                                 $("#formId"+num + " #properties_tab").invisible();
 373                         }
 374                 }
 375
 376                 $("#savePropsBtn").click(function(event) {
 377                         var num = 1
 378                         if (($('#formId'+num+' #tcaTable .highlight').length > 0 ) &&
 379                                         (!($('#formId'+num+' #threshold').val()) || !($('#formId'+num+' #fieldPathM').val())) ) {
 380                                 $('#formId'+num+' #tcaError').show();
 381                                 return;
 382                         } else {
 383                                 $('#formId'+num+' .tcaErr').hide();
 384                                 if ($('#formId'+num+' #tcaTable .highlight').length > 0){
 385                                         $('#formId'+num+' #tcaTable .highlight td').text(propertiesToString(num));
 386                                 }
 387                                 var saveP = {};
 388                                 $('.formId').each(function(){
 389                                         var count = $(this).attr('id').slice(-1);
 390                                         var header = $(this).find('.tcaParentItems').serializeArray();
 391                                         var sconf = {};
 392                                         var sconfa = [];
 393                                         var checkNF = true;
 394                                         $('#formId' +count+' #tcaTable tr').each(function(){
 395                                                 $('td', this).each(function(){
 396                                                         var splitTd = $(this).text().split(' ');
 397                                                         splitTd[1]=defaults_props['tca']['operator'][splitTd[1]];
 398                                                         var checkByKpi = vf_Services["shared"]["byKpi"][splitTd[0].replace(/\s/g, "")];
 399                                                         if (checkByKpi["fieldPath"]){
 400                                                                 splitTd.push(Object.keys(vf_Services["shared"]["byKpi"][splitTd[0].replace(/\s/g, "")]["fieldPath"])[0]);
 401                                                         };
 402                                                         if ((checkByKpi["nfNamingCode"]) && (checkNF)){
 403                                                                 $.grep(header, function(e,i){
 404                                                                         if (e.name == "tnfc"){
 405                                                                                 header[i]["value"] = (Object.keys(checkByKpi["nfNamingCode"])[0]);
 406                                                                         }
 407                                                                 });
 408                                                                 checkNF = false;
 409                                                         }
 410                                                         sconfa.push(splitTd);
 411                                                 });
 412
 413                                         });
 414                                         var polSel = $(this).find('.tcaParentItems #tcaPol').val();
 415                                         $.grep(header, function(e,i){
 416                                                 if (e.name == "tcaPolId"){
 417                                                         if (polSel){
 418                                                                 if (typeof allPolicies !== "undefined"){
 419                                                                         header[i]["value"] = allPolicies[polSel][1]["value"];
 420                                                                 } else if (typeof elementMap !== "undefined"){
 421                                                                         for (key in elementMap){
 422                                                                                 if (key.indexOf("Policy")>-1){
 423                                                                                         header[i]["value"] = elementMap[key][polSel][1]["value"];
 424                                                                                 }
 425                                                                         }
 426                                                                 }
 427                                                         } else {
 428                                                                 header[i]["value"]="";
 429                                                         }
 430                                                 }
 431                                         });
 432
 433                                         sconf["serviceConfigurations"]=sconfa;
 434                                         header.push(sconf);
 435                                         saveP[$(this).find('.tcaParentItems #tname').val()] = header;
 436                                 });
 437
 438                                 saveProperties(saveP);
 439                                 $("#close_button").click();
 440                         }
 441                 })
 442
 443                 function uniquet(arr) {
 444                     var a = [];
 445                     for (var i=0, l=arr.length; i<l; i++){
 446                         if (a.indexOf(arr[i]) === -1 && arr[i] !== ''){
 447                                  a.push(arr[i]);
 448                         }
 449                     }
 450                     if (a.length==arr.length){
 451                         return false;
 452                     } else {
 453                         return true;
 454                     }
 455                 }
 456
 457                 function add_one_more(){
 458                         $("#nav_Tabs li").removeClass("active");
 459                         var form=$($("#formSpan").children()[0]).clone();
 460                         var count=0;
 461                         if($(".formId").length>0){
 462                                 var greatest=0;
 463                                 var s=$(".formId");
 464                                 for(var i=0;i<s.length; i++){
 465                                         if(parseInt($(s[i]).attr("id").substring(6))>greatest){
 466                                                 greatest=parseInt($(s[i]).attr("id").substring(6))
 467                                         }
 468                                 }
 469                                 count=greatest+1;
 470                                 $("#panelHolder").append(('<span class="formId" id="formId'+count+'"></span>'));
 471                         }else{
 472                                 count++;
 473                                 $("#panelHolder").append('<span class="formId" id="formId1"></span>');
 474                         }
 475
 476                         $("#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>');
 477                         $("#formId"+count).append(form);
 478                         $('#formId'+count+ ' #properties_tab').invisible();
 479                         $(".formId").not($("#formId"+count)).css("display","none");
 480                         addCustListen(count);
 481                         setMultiSelect();
 482                         return count;
 483                 }
 484
 485                 function isNumberKey(event){
 486                         var charCode = (event.which) ? event.which : event.keyCode
 487                         if (charCode > 31 && (charCode < 48 || charCode > 57)){
 488                                 return false;
 489                         }
 490                         return true;
 491                 };
 492
 493                 function addCustListen(count) {
 494                         $('#go_properties_tab' + count).click(function(event) {
 495                                 if ($("#nav_Tabs li.active").length>0){
 496                                         var oldCount = $("#nav_Tabs li.active").find("a").attr("id").slice(-1);
 497                                         if (($('#formId'+oldCount+' #tcaTable .highlight').length > 0 ) &&
 498                                                         (!($('#formId'+oldCount+' #threshold').val()) || !($('#formId'+oldCount+' #fieldPathM').val())) ) {
 499                                                 $('#formId'+oldCount+' #tcaError').show();
 500                                                 return;
 501                                         } else {
 502                                                 $('#formId'+oldCount+' .tcaErr').hide();
 503                                                 if ($('#formId'+oldCount+' #tcaTable .highlight').length > 0){
 504                                                         $('#formId'+oldCount+' #tcaTable .highlight td').text(propertiesToString(oldCount));
 505                                                 }
 506                                                 $("#formId"+oldCount+" #tcaTable .highlight").removeClass("highlight")
 507                                         }
 508                                 }
 509
 510                                 $("#nav_Tabs li").removeClass("active");
 511                                 $(this).parent().addClass("active");
 512                                 $("#formId"+count).css("display","");
 513                                 $(".formId").not($("#formId"+count)).css("display","none");
 514                         });
 515
 516                         $('#tab_close'+count).click(function(event){
 517                                 $(this).parent().remove();
 518                                 $("#formId"+count).remove();
 519                         });
 520
 521                         $('#formId'+count+' #tcaTable').on('click', 'tr', function(event){
 522                                 if (($('#formId'+count+' #tcaTable .highlight').length > 0 ) &&
 523                                                 (!($('#formId'+count+' #threshold').val()) || !($('#formId'+count+' #fieldPathM').val())) ) {
 524                                         $('#formId'+count+' #tcaError').show();
 525                                         return;
 526                                 } else {
 527                                         $('#formId'+count+' .tcaErr').hide();
 528                                         if ($('#formId'+count+' #tcaTable .highlight').length > 0){
 529                                                 $('#formId'+count+' #tcaTable .highlight td').text(propertiesToString(num));
 530                                         }
 531                                         //$('#formId'+count+' #tcaTable .highlight').text();
 532                                         $(this).addClass('highlight').siblings().removeClass('highlight');
 533                                         var str = $(this).text().split(' ');
 534                                         $('#formId'+count + ' #properties_tab').visible();
 535                                         if (str.length == 5){
 536                                                 $('#formId'+count+' #fieldPathM').val(str[0]).multiselect('refresh');
 537                                                 $('#formId'+count+' #operator').val(str[1]).multiselect('refresh');
 538                                                 $('#formId'+count+' #threshold').val(str[2]);
 539             $('#formId'+count+' #controlLoopSchema').val(str[3]).multiselect('refresh');
 540             $('#formId'+count+' #closedLoopEventStatus').val(str[4]).multiselect('refresh');
 541                                         }
 542
 543                                         if ((!(readOnly||readMOnly)) && ($('#formId'+count + ' #deleteThresh').prop('disabled'))) {
 544                                                 $('#formId'+count + ' #deleteThresh').prop('disabled', false);
 545                                         }
 546                                 }
 547                         });
 548
 549                         $('#formId'+count+' #deleteThresh').on('click', function(){
 550                                 $('#formId'+num+' .tcaErr').hide();
 551                                 $('#formId'+count+ ' #properties_tab').invisible();
 552                                 $('#formId'+count+ ' #tcaTable .highlight').remove();
 553                                 $('#formId'+count+ ' #deleteThresh').prop('disabled', true);
 554                         });
 555
 556                         $('#formId'+count+' #createNewThresh').on('click', function(){
 557                                 if (($('#formId'+count+' #tcaTable .highlight').length > 0 ) &&
 558                                                 (!($('#formId'+count+' #threshold').val()) || !($('#formId'+count+' #fieldPathM').val())) ){
 559                                         $('#formId'+count+' #tcaError').show();
 560                                         return;
 561                                 } else {
 562                                         $('#formId'+count+' .tcaErr').hide();
 563                                         if ($('#formId'+count+' #tcaTable .highlight').length > 0){
 564                                                 $('#formId'+count+' #tcaTable .highlight td').text(propertiesToString(count));
 565                                         }
 566                                         $('#formId'+count+ ' #properties_tab').visible();
 567                                         if (('#formId'+count+' #tcaTable .highlight').length > 0 ){
 568                                                 $('#formId'+count+' #tcaTable tr.highlight').removeClass('highlight');
 569                                         }
 570                                         $('#formId'+count+' #tcaTable').prepend('<tr class="highlight"><td>New Threshold</td></tr>');
 571                                         $('#formId'+count+' #fieldPathM').prop("selectedIndex", 0).multiselect('refresh');
 572                                         $('#formId'+count+' #operator').prop("selectedIndex", 0).multiselect('refresh');
 573                                         $('#formId'+count+' #threshold').val("");
 574           $('#formId'+count+' #controlLoopSchema').prop("selectedIndex", 0).multiselect('refresh');
 575           $('#formId'+count+' #closedLoopEventStatus').prop("selectedIndex", 0).multiselect('refresh');
 576
 577                                         if ($('#formId'+count + ' #deleteThresh').prop('disabled')) {
 578                                                 $('#formId'+count + ' #deleteThresh').prop('disabled', false);
 579                                         }
 580                                 }
 581                         });
 582
 583                         $('#formId'+count+' #tname').on('change',function(){
 584                                 $('#go_properties_tab'+count).text($('#formId'+count+' #tname').val())
 585                         });
 586                 }
 587         </script>
 588 </div>