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