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
 198                                                 <div class="col-sm-8 form-group" style="display:none;">
 199                                                         <label class="col-sm-3"> Policy ID </label>
 200                                                         <div class="col-sm-9" style="padding:0px;">
 201                                                                 <input class="form-control" onkeydown="return false;" type="text" id="tcaPolId" name="tcaPolId"></input>
 202                                                         </div>
 203                                                 </div>
 204
 205                                         </div>
 206                                 </form>
 207
 208                                 <div class="tcaBody row">
 209                                         <div class="col-sm-5" style="padding:0px 5px; margin: 15px;">
 210                                                 <div class="panel panel-default" id="tcaTableHolder">
 211                                                         <table id="tcaTable">
 212                                                         </table>
 213                                                 </div>
 214                                                 <div id="tcaError" class="tcaErr">Error: Please define/delete this new threshold</div>
 215                                                 <div id="tcaUnique" class="tcaErr">Error: Duplicate Set Name Found</div>
 216                                                 <div style="float:left">
 217                                                         <button type="button" id="createNewThresh" class="btn btn-sm">New Threshold</button>
 218                                                 </div>
 219                                                 <div style="float:right">
 220                                                         <button type="button" id="deleteThresh" class="btn btn-sm glyphicon glyphicon-trash" disabled></button>
 221                                                 </div>
 222
 223                                         </div>
 224
 225                                         <div id="tcaEditHolder" class="panel panel-default col-sm-6">
 226                                                 <div class="tab-content">
 227                                                         <div id="properties_tab" class="form-vertical">
 228                                                                 <div>
 229                                                                         <label class="control-label">Metric</label>
 230                                                                         <div>
 231                                                                                 <select id="fieldPathM" name="fieldPathM"></select>
 232                                                                         </div>
 233                                                                 </div>
 234                                                                 <div>
 235                                                                         <label class="control-label">Operator</label>
 236                                                                         <div>
 237                                                                                 <select id="operator" name="operator"></select>
 238                                                                         </div>
 239                                                                 </div>
 240                                                                 <div>
 241                                                                         <label class="control-label">Threshold</label>
 242                                                                         <div>
 243                                                                                 <input type="text" maxlength="10" class="form-control" name="threshold"
 244                                                                                 onkeypress="return isNumberKey(event)" id="threshold"></input>
 245                                                                         </div>
 246                                                                 </div>
 247                                                         </div>
 248                                                 </div>
 249                                         </div>
 250                                 </div>
 251
 252                         </div>
 253                         </span>
 254
 255                 </div>
 256         </div>
 257 </div>
 258
 259         <div class="modal-footer">
 260                 <!--<button ng-click="reset()" class="btn btn-primary" style="float:left">Reset</button>-->
 261                 <button id="savePropsBtn" class="btn btn-primary">Close</button>
 262                 <button ng-click="close(true)" id="close_button"
 263                         class="btn btn-primary">Cancel</button>
 264         </div>
 265
 266         <script language="javascript">
 267     // helper that make jquery objects visibles or invisible
 268     // to use instead of show to keep placeholder size correct
 269     jQuery.fn.visible = function() {
 270         return this.css('visibility', 'visible');
 271     };
 272     jQuery.fn.invisible = function() {
 273         return this.css('visibility', 'hidden');
 274     };
 275
 276                 var generateTUUID = function(count){
 277                         var d = new Date().getTime();
 278                         var tuuid = 'xxxxxxxx-xxxx-txxx-xxxx-xxxxxxxxxxxx'.replace(/[x]/g, function(c){
 279                                 var r = (d + Math.random()*16)%16 | 0;
 280                                 d = Math.floor(d/16);
 281                                 return (c == 'x' ? r : (r*0x3|0*8)).toString(16);
 282                         });
 283                         $("#formId" + count + " #tuuid").val(tuuid);
 284                 }
 285
 286                 loadPropertyWindow("tca");
 287
 288                 //load dropdown with policy options
 289                 if (typeof allPolicies !== "undefined"){
 290                 $.each(Object.keys(allPolicies), function(val, text) {
 291                         $('#tcaPol').append($('<option></option>').val(text).html(text));
 292                 });
 293                 } else if (typeof elementMap !== "undefined"){
 294                         for (key in elementMap){
 295                                 if (key.indexOf("Policy")>-1){
 296                                         $.each(Object.keys(elementMap[key]), function(val, text){
 297                                                 $('#tcaPol').append(
 298                                                         $('<option></option>').val(text).html(text)
 299                                                 );
 300                                         });
 301                                 }
 302                         }
 303                 }
 304
 305                 setASDCFields();
 306
 307                 //load metrics dropdown
 308                 if (elementMap["global"]){
 309                         for (var i = 0; i < (elementMap["global"].length); i++){
 310                                 if ((elementMap["global"][i]["name"]) == "vf"){
 311                                         var vfSel = elementMap["global"][i]["value"];
 312                                         if (vf_Services["shared"]["byVf"][vfSel]["kpi"]){
 313                                                 $.each((vf_Services["shared"]["byVf"][vfSel]["kpi"]), function(val, text) {
 314                                         $('#fieldPathM').append(
 315                                             $('<option></option>').val(val).html(text)
 316                                         );
 317                                     });
 318                                         }
 319                                         break;
 320                                 };
 321                         };
 322                 };
 323
 324                 var arr = elementMap[lastElementSelected];
 325
 326                 if (arr !== undefined) {
 327                         for (var x in arr){
 328                                 var num = add_one_more();
 329                                 for (var i=0; i< arr[x].length; i++){
 330
 331                                         if (arr[x][i].hasOwnProperty('serviceConfigurations')){
 332                                                 for (var j=0; j<arr[x][i]["serviceConfigurations"].length; j++){
 333                                                         $("#formId" + num + " #tcaTable").prepend("<tr><td>"
 334                                                                         +arr[x][i]["serviceConfigurations"][j][0]+" "
 335                                                                         +(Object.keys(defaults_props['tca']['operator']).find(key => defaults_props['tca']['operator'][key] == (arr[x][i]["serviceConfigurations"][j][1])))+ " "
 336                                                                         +arr[x][i]["serviceConfigurations"][j][2]+"</td></tr>");
 337                                                 }
 338                                         } else {
 339                                                 $("#formId" + num + " #"+arr[x][i].name).val(arr[x][i].value);
 340                                         }
 341                                 }
 342                                 $('#go_properties_tab'+num).text($('#formId' +num+ ' #tname').val());
 343                                 $("#formId"+num + " #properties_tab").invisible();
 344                         }
 345                 }
 346
 347                 $("#savePropsBtn").click(function(event) {
 348                         var num = 1
 349                         if (($('#formId'+num+' #tcaTable .highlight').length > 0 ) &&
 350                                         (!($('#formId'+num+' #threshold').val()) || !($('#formId'+num+' #fieldPathM').val())) ) {
 351                                 $('#formId'+num+' #tcaError').show();
 352                                 return;
 353                         } else {
 354                                 $('#formId'+num+' .tcaErr').hide();
 355                                 if ($('#formId'+num+' #tcaTable .highlight').length > 0){
 356                                         $('#formId'+num+' #tcaTable .highlight td').text(
 357                                                         $('#formId'+num+' #fieldPathM').val() + ' ' +
 358                                                         $('#formId'+num+' #operator').val() + ' ' +
 359                                                         $('#formId'+num+' #threshold').val());
 360                                 }
 361                                 var saveP = {};
 362                                 $('.formId').each(function(){
 363                                         var count = $(this).attr('id').slice(-1);
 364                                         var header = $(this).find('.tcaParentItems').serializeArray();
 365                                         var sconf = {};
 366                                         var sconfa = [];
 367                                         var checkNF = true;
 368                                         $('#formId' +count+' #tcaTable tr').each(function(){
 369                                                 $('td', this).each(function(){
 370                                                         var splitTd = $(this).text().split(' ');
 371                                                         splitTd[1]=defaults_props['tca']['operator'][splitTd[1]];
 372                                                         var checkByKpi = vf_Services["shared"]["byKpi"][splitTd[0].replace(/\s/g, "")];
 373                                                         if (checkByKpi["fieldPath"]){
 374                                                                 splitTd.push(Object.keys(vf_Services["shared"]["byKpi"][splitTd[0].replace(/\s/g, "")]["fieldPath"])[0]);
 375                                                         };
 376                                                         if ((checkByKpi["nfNamingCode"]) && (checkNF)){
 377                                                                 $.grep(header, function(e,i){
 378                                                                         if (e.name == "tnfc"){
 379                                                                                 header[i]["value"] = (Object.keys(checkByKpi["nfNamingCode"])[0]);
 380                                                                         }
 381                                                                 });
 382                                                                 checkNF = false;
 383                                                         }
 384                                                         sconfa.push(splitTd);
 385                                                 });
 386
 387                                         });
 388                                         var polSel = $(this).find('.tcaParentItems #tcaPol').val();
 389                                         $.grep(header, function(e,i){
 390                                                 if (e.name == "tcaPolId"){
 391                                                         if (polSel){
 392                                                                 if (typeof allPolicies !== "undefined"){
 393                                                                         header[i]["value"] = allPolicies[polSel][1]["value"];
 394                                                                 } else if (typeof elementMap !== "undefined"){
 395                                                                         for (key in elementMap){
 396                                                                                 if (key.indexOf("Policy")>-1){
 397                                                                                         header[i]["value"] = elementMap[key][polSel][1]["value"];
 398                                                                                 }
 399                                                                         }
 400                                                                 }
 401                                                         } else {
 402                                                                 header[i]["value"]="";
 403                                                         }
 404                                                 }
 405                                         });
 406
 407                                         sconf["serviceConfigurations"]=sconfa;
 408                                         header.push(sconf);
 409                                         saveP[$(this).find('.tcaParentItems #tname').val()] = header;
 410                                 });
 411
 412                                 saveProperties(saveP);
 413                                 $("#close_button").click();
 414                         }
 415                 })
 416
 417                 function uniquet(arr) {
 418                     var a = [];
 419                     for (var i=0, l=arr.length; i<l; i++){
 420                         if (a.indexOf(arr[i]) === -1 && arr[i] !== ''){
 421                                  a.push(arr[i]);
 422                         }
 423                     }
 424                     if (a.length==arr.length){
 425                         return false;
 426                     } else {
 427                         return true;
 428                     }
 429                 }
 430
 431                 function add_one_more(){
 432                         $("#nav_Tabs li").removeClass("active");
 433                         var form=$($("#formSpan").children()[0]).clone();
 434                         var count=0;
 435                         if($(".formId").length>0){
 436         debugger;
 437                                 var greatest=0;
 438                                 var s=$(".formId");
 439                                 for(var i=0;i<s.length; i++){
 440                                         if(parseInt($(s[i]).attr("id").substring(6))>greatest){
 441                                                 greatest=parseInt($(s[i]).attr("id").substring(6))
 442                                         }
 443                                 }
 444                                 count=greatest+1;
 445                                 $("#panelHolder").append(('<span class="formId" id="formId'+count+'"></span>'));
 446                         }else{
 447                                 count++;
 448                                 $("#panelHolder").append('<span class="formId" id="formId1"></span>');
 449                         }
 450
 451                         $("#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>');
 452                         $("#formId"+count).append(form);
 453                         $('#formId'+count+ ' #properties_tab').invisible();
 454                         $(".formId").not($("#formId"+count)).css("display","none");
 455                         addCustListen(count);
 456                         setMultiSelect();
 457                         return count;
 458                 }
 459
 460                 function isNumberKey(event){
 461                         var charCode = (event.which) ? event.which : event.keyCode
 462                         if (charCode > 31 && (charCode < 48 || charCode > 57)){
 463                                 return false;
 464                         }
 465                         return true;
 466                 };
 467
 468                 function addCustListen(count) {
 469                         $('#go_properties_tab' + count).click(function(event) {
 470                                 if ($("#nav_Tabs li.active").length>0){
 471                                         var oldCount = $("#nav_Tabs li.active").find("a").attr("id").slice(-1);
 472                                         if (($('#formId'+oldCount+' #tcaTable .highlight').length > 0 ) &&
 473                                                         (!($('#formId'+oldCount+' #threshold').val()) || !($('#formId'+oldCount+' #fieldPathM').val())) ) {
 474                                                 $('#formId'+oldCount+' #tcaError').show();
 475                                                 return;
 476                                         } else {
 477                                                 $('#formId'+oldCount+' .tcaErr').hide();
 478                                                 if ($('#formId'+oldCount+' #tcaTable .highlight').length > 0){
 479                                                         $('#formId'+oldCount+' #tcaTable .highlight td').text(
 480                                                                         $('#formId'+oldCount+' #fieldPathM').val() + ' ' +
 481                                                                         $('#formId'+oldCount+' #operator').val() + ' ' +
 482                                                                         $('#formId'+oldCount+' #threshold').val());
 483                                                 }
 484                                                 $("#formId"+oldCount+" #tcaTable .highlight").removeClass("highlight")
 485                                         }
 486                                 }
 487
 488                                 $("#nav_Tabs li").removeClass("active");
 489                                 $(this).parent().addClass("active");
 490                                 $("#formId"+count).css("display","");
 491                                 $(".formId").not($("#formId"+count)).css("display","none");
 492                         });
 493
 494                         $('#tab_close'+count).click(function(event){
 495                                 $(this).parent().remove();
 496                                 $("#formId"+count).remove();
 497                         });
 498
 499                         $('#formId'+count+' #tcaTable').on('click', 'tr', function(event){
 500                                 if (($('#formId'+count+' #tcaTable .highlight').length > 0 ) &&
 501                                                 (!($('#formId'+count+' #threshold').val()) || !($('#formId'+count+' #fieldPathM').val())) ) {
 502                                         $('#formId'+count+' #tcaError').show();
 503                                         return;
 504                                 } else {
 505                                         $('#formId'+count+' .tcaErr').hide();
 506                                         if ($('#formId'+count+' #tcaTable .highlight').length > 0){
 507                                                 $('#formId'+count+' #tcaTable .highlight td').text(
 508                                                                 $('#formId'+count+' #fieldPathM').val() + ' ' +
 509                                                                 $('#formId'+count+' #operator').val() + ' ' +
 510                                                                 $('#formId'+count+' #threshold').val());
 511                                         }
 512                                         //$('#formId'+count+' #tcaTable .highlight').text();
 513                                         $(this).addClass('highlight').siblings().removeClass('highlight');
 514                                         var str = $(this).text().split(' ');
 515                                         $('#formId'+count + ' #properties_tab').visible();
 516                                         if (str.length == 3){
 517                                                 $('#formId'+count+' #fieldPathM').val(str[0]).multiselect('refresh');
 518                                                 $('#formId'+count+' #operator').val(str[1]).multiselect('refresh');
 519                                                 $('#formId'+count+' #threshold').val(str[2]);
 520                                         }
 521
 522                                         if ((!(readOnly||readMOnly)) && ($('#formId'+count + ' #deleteThresh').prop('disabled'))) {
 523                                                 $('#formId'+count + ' #deleteThresh').prop('disabled', false);
 524                                         }
 525                                 }
 526                         });
 527
 528                         $('#formId'+count+' #deleteThresh').on('click', function(){
 529                                 $('#formId'+num+' .tcaErr').hide();
 530                                 $('#formId'+count+ ' #properties_tab').invisible();
 531                                 $('#formId'+count+ ' #tcaTable .highlight').remove();
 532                                 $('#formId'+count+ ' #deleteThresh').prop('disabled', true);
 533                         });
 534
 535                         $('#formId'+count+' #createNewThresh').on('click', function(){
 536                                 if (($('#formId'+count+' #tcaTable .highlight').length > 0 ) &&
 537                                                 (!($('#formId'+count+' #threshold').val()) || !($('#formId'+count+' #fieldPathM').val())) ){
 538                                         $('#formId'+count+' #tcaError').show();
 539                                         return;
 540                                 } else {
 541                                         $('#formId'+count+' .tcaErr').hide();
 542                                         if ($('#formId'+count+' #tcaTable .highlight').length > 0){
 543                                                 $('#formId'+count+' #tcaTable .highlight td').text(
 544                                                                 $('#formId'+count+' #fieldPathM').val() + ' ' +
 545                                                                 $('#formId'+count+' #operator').val() + ' ' +
 546                                                                 $('#formId'+count+' #threshold').val());
 547                                         }
 548                                         $('#formId'+count+ ' #properties_tab').visible();
 549                                         if (('#formId'+count+' #tcaTable .highlight').length > 0 ){
 550                                                 $('#formId'+count+' #tcaTable tr.highlight').removeClass('highlight');
 551                                         }
 552                                         $('#formId'+count+' #tcaTable').prepend('<tr class="highlight"><td>New Threshold</td></tr>');
 553                                         $('#formId'+count+' #fieldPathM').prop("selectedIndex", 0).multiselect('refresh');
 554                                         $('#formId'+count+' #operator').prop("selectedIndex", 0).multiselect('refresh');
 555                                         $('#formId'+count+' #threshold').val("");
 556
 557                                         if ($('#formId'+count + ' #deleteThresh').prop('disabled')) {
 558                                                 $('#formId'+count + ' #deleteThresh').prop('disabled', false);
 559                                         }
 560                                 }
 561                         });
 562
 563                         $('#formId'+count+' #tname').on('change',function(){
 564                                 $('#go_properties_tab'+count).text($('#formId'+count+' #tname').val())
 565                         });
 566                 }
 567         </script>
 568 </div>