src/main/resources/META-INF/resources/designer/partials/portfolios/tca_properties.html

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