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