src/main/resources/META-INF/resources/designer/partials/portfolios/stringMatch_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 .fileUpload {
  26         position: relative;
  27         overflow: hidden;
  28         margin: 10px;
  29 }
  30
  31 .fileUpload input.upload {
  32         position: absolute;
  33         top: 0;
  34         right: 0;
  35         margin: 0;
  36         padding: 0;
  37         font-size: 20px;
  38         cursor: pointer;
  39         opacity: 0;
  40         filter: alpha(opacity = 0);
  41         float: left;
  42 }
  43
  44 .fileDisplay {
  45         display: inline-block;
  46         overflow: hidden;
  47         float: right;
  48         margin-left: 0px;
  49         z-index: initial;
  50         text-align: center;
  51         margin-top: 17px;
  52 }
  53
  54 .form-group {
  55         /*      height:24px; */
  56         /*      box-sizing:border-box; */
  57         margin-bottom: 20px;
  58
  59 }
  60  #paramsWarn {
  61       display: none;
  62 }
  63
  64 label{text-align:right;
  65  padding-top:8px;
  66  }
  67
  68
  69 </style>
  70
  71 <script type="text/javascript">
  72         function disablefile() {
  73
  74                 document.getElementById("fileUpload").disabled = true;
  75
  76         }
  77
  78         function disableSVN() {
  79                 var selectLength =  document.querySelectorAll(".disabled-block-container .tab-close-popup");
  80                 if(selectLength && selectLength.length>0){
  81                         for(var i = 0; i< selectLength.length ; i++){
  82                                 selectLength[i].disabled = true;
  83                         }
  84                 }
  85
  86
  87
  88                 document.getElementById("schemaLocation").disabled = true;
  89                 document.getElementById("userID").disabled = true;
  90                 document.getElementById("password").disabled = true;
  91
  92         }
  93 </script>
  94
  95
  96 <div attribute-test="stringmatchproperties" id="configure-widgets"  class="disabled-block-container">
  97         <div attribute-test="stringmatchpropertiesh" class="modal-header">
  98                 <button type="button" class="close" ng-click="close(false)"
  99                         aria-hidden="true" style="margin-top: -3px">&times;</button>
 100                 <h4>String Matching Micro Service</h4>
 101         </div>
 102         <div attribute-test="stringmatchpropertiesb" class="modal-body">
 103         <div class="alert alert-danger" role="alert" id='paramsWarn'>
 104                                                         <strong>Ooops!</strong> Unable to load properties for <span id='servName'>. Would you like to</span>
 105                                                         <a href="javascript:void(0);" class="btn-link"  id='paramsRetry'>Retry </a> /
 106                                                         <a href="javascript:void(0);" class="btn-link" id='paramsCancel'>Cancel</a>
 107                                                 </div>
 108                 <div style="height: 10px"></div>
 109                 <div class="panel panel-default">
 110                         <form id="topicPublish" class="form-horizontal">
 111                                 <div>
 112
 113                                         <div class="form-group">
 114                                                 <label for="userID" class="col-sm-4 control-label"> Topic
 115                                                         Publishes</label>
 116
 117                                                 <div class="col-sm-8">
 118                                                         <select class="form-control" id="topicPublishes"
 119                                                                 name="topicPublishes">
 120                                                         </select>
 121                                                 </div>
 122                                         </div>
 123                                 </div>
 124                         </form>
 125                         <div class="panel-heading">
 126                                 <ul id="nav_Tabs" class="nav nav-tabs">
 127                                         <li class><a id="add_one_more" href="#desc_tab"><span
 128                                                         class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></li>
 129                                 </ul>
 130                         </div>
 131                         <div class="panel-body">
 132                                 <div class="tab-content">
 133                                         <div id="properties_tab" class="tab-pane fade in active"></div>
 134
 135                                 </div>
 136
 137                         </div>
 138                 </div>
 139                 <span id="formSpan" style="display: none">
 140                         <form class="saveProps" class="form-horizontal clearfix">
 141                                 <div>
 142                                         <div class="form-group clearfix">
 143                                                 <label for="aaiMatchingFields" class="col-sm-4 control-label">AAI
 144                                                         Fields Matching </label>
 145                                                 <div class="col-sm-8">
 146                                                         <select type="text" class="form-control "
 147                                                                 name="aaiMatchingFields" id="aaiMatchingFields" multiple="" size=2></select>
 148
 149                                                 </div>
 150                                         </div>
 151                                         <div class="form-group clearfix">
 152                                                 <label for="aaiSendFields" class="col-sm-4 control-label">
 153                                                         AAI Fields Send (Select Multiple)</label>
 154
 155                                                 <div class="col-sm-8 ">
 156                                                         <select class="form-control"
 157                                                                 id="aaiSendFields" name="aaiSendFields" multiple size=2>
 158
 159                                                         </select>
 160
 161                                                 </div>
 162                                         </div>
 163                                         <div class="form-group clearfix">
 164                                                 <label for="groupNumber" class="col-sm-4 control-label">
 165                                                         Resource-Group</label>
 166
 167                                                 <div class="col-sm-8">
 168                                                         <input type="number" class="form-control" id="groupNumber" name="groupNumber" min="0" >
 169
 170                                                         </input>
 171
 172                                                 </div>
 173                                         </div>
 174                                         <div class="form-group clearfix">
 175                                                 <label for="vfc" class="col-sm-4 control-label">
 176                                                         Resource-VFC</label>
 177
 178                                                 <div class="col-sm-8">
 179                                                         <select class="form-control" id="vfc" name="vfc">
 180
 181                                                         </select>
 182
 183                                                 </div>
 184                                         </div>
 185                                         <div class="form-group clearfix">
 186                                                 <label for="alarmCondition" class="col-sm-4 control-label">
 187                                                         Alarm Condition</label>
 188
 189                                                 <div class="col-sm-8">
 190                                                         <select class="form-control" id="alarmCondition"
 191                                                                 name="alarmCondition"></select>
 192                                                 </div>
 193                                         </div>
 194                                         <div class="form-group clearfix">
 195                                                 <label for="eventSeverity" class="col-sm-4 control-label">
 196                                                         Event Severity</label>
 197                                                 <div class="col-sm-8">
 198                                                         <select class="form-control" id="eventSeverity"
 199                                                                 name="eventSeverity" enableFilter="false"></select>
 200                                                 </div>
 201                                         </div>
 202                                         <div class="form-group clearfix">
 203                                                 <label for="eventSourceType" class="col-sm-4 control-label">
 204                                                         Event Source Type</label>
 205                                                 <div class="col-sm-8">
 206                                                         <input type="text" class="form-control" id="eventSourceType"
 207                                                                 name="eventSourceType" readOnly  ></input>
 208                                                 </div>
 209                                         </div>
 210
 211                                         <div class="form-group clearfix">
 212                                                 <label for="timeWindow" class="col-sm-4 control-label">
 213                                                         Time Window</label>
 214
 215                                                 <div class="col-sm-8">
 216                                                         <input type="number" min="0" class="form-control" id="timeWindow"
 217                                                                 name="timeWindow" />
 218
 219
 220                                                 </div>
 221                                         </div>
 222                                         <div class="form-group clearfix">
 223                                                 <label for="ageLimit" class="col-sm-4 control-label"> Age
 224                                                         Limit</label>
 225
 226                                                 <div class="col-sm-8">
 227                                                         <input type="number" min="0" class="form-control" id="ageLimit"
 228                                                                 name="ageLimit" />
 229                                                 </div>
 230                                         </div>
 231                                         <div class="form-group clearfix">
 232                                                 <label for="createClosedLoopEventId"
 233                                                         class="col-sm-4 control-label"> Create CL Event ID</label>
 234                                                 <div class="col-sm-8">
 235                                                         <select class="form-control" id="createClosedLoopEventId"
 236                                                                 name="createClosedLoopEventId" enableFilter="false">
 237                                                         </select>
 238
 239                                                 </div>
 240                                         </div>
 241
 242                                         <div class="form-group clearfix">
 243                                                 <label for="outputEventName" class="col-sm-4 control-label">
 244                                                         Output Event Name</label>
 245
 246                                                 <div class="col-sm-8">
 247                                                         <select class="form-control" id="outputEventName"
 248                                                                 name="outputEventName" enableFilter="false"></select>
 249
 250                                                 </div>
 251                                         </div>
 252                                 </div>
 253                         </form>
 254                 </span>
 255         </div>
 256
 257         <div attribute-test="stringmatchpropertiesf" class="modal-footer">
 258                 <!--<button ng-click="reset()" class="btn btn-primary" style="float:left">Reset</button>-->
 259                 <button id="savePropsBtn" class="btn btn-primary">Close</button>
 260                 <button ng-click="close(true)" id="close_button"
 261                         class="btn btn-primary">Cancel</button>
 262
 263         </div>
 264         <script>
 265                 //Basically this method will add a new form. All forms share the same class. When you want one form to show(active form) the other forms get the
 266                 // css attribute display:none
 267                 $("#paramsRetry").on('click', function () {
 268                         $("#paramsWarn").hide();
 269                         $("#ridinSpinners").css("display","")
 270                         var bool=loadSharedPropertyByService();
 271                         $("#ridinSpinners").css("display","none")
 272                 });
 273                 $("#paramsCancel").on('click', function () {
 274                         loadSharedPropertyByServiceProperties();
 275                         $("#paramsWarn").hide();
 276
 277                 });
 278
 279
 280
 281                 $("#add_one_more").click(function(event) {
 282                         //alert("lol");
 283                         event.preventDefault();
 284                         add_one_more();
 285                         //I have uncomment the below code becoz there is no refreshItems method.
 286
 287                         //refreshItems();
 288                         setMultiSelect();
 289
 290                 })
 291                 loadPropertyWindow("string_match")
 292                 setASDCFields();
 293                 var arr = elementMap[lastElementSelected];
 294                 var vfc_temp=""
 295                 var alarm_conditions_temp=""
 296                 var event_severity_temp=""
 297                 var event_type_source_temp=""
 298                 if (arr !== undefined && arr[1]!==undefined) {
 299                         var el = arr[1]['serviceConfigurations']
 300                         for (var i = 0; i < el.length; i++) {
 301                                 var num = add_one_more();
 302                                 for (var j = 0; j < el[i].length; j++) {
 303                                         if (el[i][j]["stringSet"] !== undefined) {
 304                                                 var ss = el[i][j]["stringSet"]
 305                                                 for (var o = 0; o < ss.length; o++) {
 306                                                         if(ss[o].hasOwnProperty("name")){
 307                                                                 if(ss[o].name==="alarmCondition"){
 308                                                                         alarm_conditions_temp=ss[o].value
 309                                                                 }else if(ss[o].name==="eventSeverity"){
 310                                                                         event_severity_temp=ss[o].value;
 311                                                                 }else if(ss[o].name==="eventSourceType"){
 312                                                                         event_type_source_temp=ss[o].value;
 313                                                                 }
 314                                                                 else
 315                                                                 $("#formId" + num + " #" + ss[o].name).val(ss[o].value);
 316                                                         }
 317
 318                                                 }
 319                                         }else if(el[i][j].hasOwnProperty("name") && el[i][j].name==="vfc"){
 320                                                 //alert(el[i][j].value)
 321                                                 vfc_temp=el[i][j].value
 322                                         }
 323                                         else {
 324                                                 if(el[i][j].hasOwnProperty("name")){
 325                                                         $("#formId" + num + " #" + el[i][j].name).val(
 326                                                                         el[i][j].value);
 327                                                 }
 328                                         }
 329                                 }
 330                                 changeTab(num);
 331                                 set_vfc_alarm_event(num)
 332                                 vfc_temp=""
 333                                 alarm_conditions_temp=""
 334                                 event_severity_temp=""
 335                                 event_type_source_temp=""
 336
 337                         }
 338                         if(arr[0] &&  arr[0][0] &&  arr[0][0].name){
 339                                 $("#" + arr[0][0].name).val(arr[0][0].value);
 340                         }
 341
 342                 }
 343
 344                 //this will populate alarmcondition,vfc,eventtypesource if they are saved in elementmap
 345                 function set_vfc_alarm_event (count){
 346                         //alert("lol")
 347                         //alert(alarm_conditions_temp)
 348                         //alert(alarm_conditions_temp!=="" && alarm_conditions_temp!==undefined)
 349                         if(vfc_temp!=="" && vfc_temp!==undefined){
 350                                 $("#formId"+count+" #vfc").val(vfc_temp)
 351
 352                                 if(alarm_conditions_temp!=="" && alarm_conditions_temp!==undefined){
 353                                         setAlarmConditions(vfc_temp,count)
 354                                         $("#formId"+count+" #alarmCondition").val(alarm_conditions_temp)
 355
 356                                         if(event_severity_temp!=="" && event_severity_temp!==undefined){
 357                                                 setEventSourceType(alarm_conditions_temp,count)
 358                                                 $("#formId"+count+" #eventSeverity").val(event_severity_temp)
 359                                                 if(event_type_source_temp!=="" && event_type_source_temp!==undefined){
 360                                                         $("#formId"+count+" #eventSourceType").val(event_type_source_temp)
 361                                                 }
 362                                         }
 363                                         if(event_type_source_temp!=="" && event_type_source_temp!==undefined){
 364                                                 setEventSourceType(alarm_conditions_temp,count)
 365                                                 $("#formId"+count+" #eventSourceType").val(event_type_source_temp)
 366                                                 if(event_severity_temp!=="" && event_severity_temp!==undefined){
 367                                                         $("#formId"+count+" #eventSeverity").val(event_severity_temp)
 368                                                 }
 369                                         }
 370                                 }
 371                         }
 372
 373
 374                 }
 375
 376
 377                 function noRepeats(form) {
 378                         var select = {};
 379                         for (var i = 0; i < form.length; i++) {
 380                                 if(form[i].hasOwnProperty("name")){
 381                                 if (select[form[i].name] === undefined)
 382                                         select[form[i].name] = []
 383                                 select[form[i].name].push(form[i].value);
 384                         }
 385                         }
 386                         var arr = []
 387                         for (s in select) {
 388                                 var f = {}
 389                                 f.name = s
 390                                 f.value = select[s]
 391                                 arr.push(f)
 392                         }
 393                         return arr
 394                 }
 395                 function setStringSet(form) {
 396                         var arr = []
 397                         var alarmCondition = {}
 398                         var eventSeverity = {}
 399                         var eventSourceType = {}
 400                         for (var i = 0; i < form.length; i++) {
 401                                 if (form[i].name === "alarmCondition") {
 402                                         alarmCondition = form[i]
 403                                 } else if (form[i].name === "eventSeverity") {
 404                                         eventSeverity = form[i];
 405                                 } else if (form[i].name === "eventSourceType") {
 406                                         eventSourceType = form[i];
 407                                 } else {
 408
 409                                         arr.push(form[i])
 410                                 }
 411
 412                         }
 413                         var stringSet = {};
 414                         stringSet['stringSet'] = []
 415                         stringSet['stringSet'].push(alarmCondition);
 416                         stringSet['stringSet'].push(eventSeverity);
 417                         stringSet['stringSet'].push(eventSourceType);
 418                         arr.push(stringSet)
 419
 420                         return arr;
 421                 }
 422                 $("#savePropsBtn").click(function(event) {
 423
 424                         var form = []
 425                         var properties = $(".saveProps").not("#formSpan .saveProps")
 426                         var topicP = $("#topicPublish").serializeArray()
 427                         form.push(topicP)
 428                         var d = {}
 429                         d["serviceConfigurations"] = [];
 430
 431                         for (var i = 0; i < properties.length; i++) {
 432                                 var ser = $(properties[i]).serializeArray();
 433                                 var s = noRepeats(ser)
 434                                 var newSer = setStringSet(s)
 435
 436                                 d["serviceConfigurations"].push(newSer)
 437                         }
 438                         form.push(d)
 439                         saveProperties(form)
 440
 441                         $("#close_button").click();
 442
 443                 })
 444
 445
 446
 447
 448
 449                 function add_one_more() {
 450                         $("#nav_Tabs li").removeClass("active");
 451                         var form = $($("#formSpan").children()[0]).clone()
 452                         var count = 0;
 453                         //alert($(".formId").length>0)
 454                         if ($(".formId").length > 0) {
 455                                 var greatest = 0;
 456                                 var s = $(".formId");
 457                                 //alert("here1")
 458                                 for (var i = 0; i < s.length; i++) {
 459                                         if (parseInt($(s[i]).attr("id").substring(6)) > greatest) {
 460                                                 greatest = parseInt($(s[i]).attr("id").substring(6))
 461                                         }
 462                                 }
 463                                 count = greatest + 1;
 464                                 //alert(count)
 465                                 $("#properties_tab").append(
 466                                                 ('<span class="formId" id="formId'+count+'"></span>'));
 467                         } else {
 468                                 //alert("here2")
 469                                 count++;
 470                                 $("#properties_tab").append(
 471                                                 '<span class="formId" id="formId1"></span>');
 472                         }
 473                         $("#add_one_more")
 474                                         .parent()
 475                                         .before(
 476                                                         ' <li class="active"><a id="go_properties_tab'+count+'">Condition</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>');
 477                         $("#formId" + count).append(form);
 478                         $(".formId").not($("#formId" + count)).css("display", "none")
 479                         addCustListen(count)
 480                         addEventNameList(count)
 481                         add_vfc_alarm_event_listener(count);
 482                         return count;
 483                 }
 484
 485                 function addCustListen(count) {
 486                         $('#go_properties_tab' + count).click(function(event) {
 487                                 $("#nav_Tabs li").removeClass("active");
 488                                 $(this).parent().addClass("active");
 489                                 $("#formId" + count).css("display", "")
 490                                 $(".formId").not($("#formId" + count)).css("display", "none")
 491
 492                         })
 493                         $('#tab_close' + count).click(function(event) {
 494                                 if(document.getElementById("topicPublishes").disabled){
 495                                         return false;
 496                                 }
 497                                 $(this).parent().remove();
 498                                 $("#formId" + count).remove();
 499                         })
 500                 }
 501
 502                 function changeTab(count){
 503                         var output = $('#formId' + count + " #outputEventName");
 504                         var group = $('#formId' + count + " #groupNumber");
 505                         var outputValue="";
 506                         var groupValue="";
 507                         if(output.val()!=="")
 508                                 outputValue=output.val();
 509                         if(output.val()!=="" && group.val()!=="")
 510                                 groupValue=group.val()+":";
 511                         else if(group.val()!=="")
 512                                 groupValue=group.val();
 513
 514                         var tabText="Condition"
 515                         if(groupValue+outputValue!=="")
 516                                 tabText=groupValue+outputValue;
 517                         $("#go_properties_tab" + count).text(tabText);
 518                 }
 519
 520                 function addEventNameList(count) {
 521
 522                         $('#formId' + count + " #outputEventName").on('change',function(){changeTab(count)})
 523                         $('#formId' + count + " #groupNumber").on('change',function(){changeTab(count)});
 524
 525                 }
 526
 527
 528 function setAlarmConditions(vfcID, count){
 529         var alarmCondition={}
 530
 531         if($("#formId"+count+" #vfc").val()!==""){
 532                 if(vf_Services['shared'] && vf_Services['shared']['byVfc'] && vf_Services['shared']['byVfc'][vfcID]){
 533                         alarmCondition=vf_Services['shared']['byVfc'][vfcID]['alarmCondition']
 534                 }
 535
 536         }
 537
 538         $("#formId"+count+" #alarmCondition").empty();
 539         $("#formId"+count+" #alarmCondition").append("<option value=\"\"></opton>")
 540          if(alarmCondition && _.keys(alarmCondition).length>0){
 541                 for(key in alarmCondition){
 542                         var safestring = $('<div>').text(key).html();
 543                         $("#formId"+count+" #alarmCondition").append("<option value='"+safestring+"'>"+alarmCondition[key]+"</opton>")
 544                 }
 545         }
 546 }
 547
 548 function setEventSourceType(alarm, count){
 549         var eventSourceTypSeverity={}
 550         if($("#formId"+count+" #alarmCondition").val()!==""){
 551                 if(vf_Services && vf_Services['shared'] && vf_Services['shared']['byAlarmCondition'] && vf_Services['shared']['byAlarmCondition'][alarm]){
 552                         eventSourceTypSeverity=vf_Services['shared']['byAlarmCondition'][alarm]
 553                 }
 554
 555         }
 556
 557         $("#formId"+count+" #eventSourceType").val(eventSourceTypSeverity.eventSourceType);
 558         $("#formId"+count+" #eventSeverity").val(eventSourceTypSeverity.eventSeverity);
 559
 560 }
 561 function add_vfc_alarm_event_listener(count) {
 562
 563          $("#formId"+count+" #vfc").on('focus', function () {
 564                 // Store the current value on focus and on change
 565                 previous = this.value;
 566             }).change(function(){
 567
 568                         setAlarmConditions($("#formId"+count+" #vfc").val(), count);
 569                         $("#formId"+count+" #eventSourceType").val("");
 570                         $("#formId"+count+" #eventSeverity").val("")
 571
 572                 });
 573
 574          $("#formId"+count+" #alarmCondition").on('focus', function () {
 575                 // Store the current value on focus and on change
 576                 previous = this.value;
 577             }).change(function(){
 578
 579
 580                 setEventSourceType($("#formId"+count+" #alarmCondition").val().toString(),count);
 581                 });
 582                 };
 583         </script>
 584 </div>
 585