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