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