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 .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         margin-bottom:20px;
  56 }
  57
  58 </style>
  59
  60 <script type="text/javascript">
  61         function disablefile() {
  62
  63                 document.getElementById("fileUpload").disabled = true;
  64
  65         }
  66
  67         function disableSVN() {
  68                 var selectLength =  document.querySelectorAll(".disabled-block-container .tab-close-popup");
  69                 if(selectLength && selectLength.length>0){
  70                         for(var i = 0; i< selectLength.length ; i++){
  71                                 selectLength[i].disabled = true;
  72                         }
  73                 }
  74
  75                 document.getElementById("schemaLocation").disabled = true;
  76                 document.getElementById("userID").disabled = true;
  77                 document.getElementById("password").disabled = true;
  78
  79         }
  80 </script>
  81
  82
  83 <div id="configure-widgets" class="disabled-block-container">
  84         <div class="modal-header">
  85                 <button type="button" class="close" ng-click="close(false)"
  86                         aria-hidden="true" style="margin-top: -3px">&times;</button>
  87                 <h4>TCA Micro Services</h4>
  88         </div>
  89         <div class="modal-body">
  90                 <div style="height: 10px"></div>
  91                 <div class="panel panel-default">
  92                         <form id="topicPublish" class="form-horizontal">
  93                                 <div>
  94
  95                                         <div class="form-group">
  96                                                 <label for="userID" class="col-sm-4 control-label"> Topic Publishes</label>
  97
  98                                                 <div class="col-sm-8">
  99                                                         <select class="form-control" id="topicPublishes"
 100                                                                 name="topicPublishes">
 101                                                         </select>
 102                                                 </div>
 103                                         </div>
 104                                 </div>
 105                         </form>
 106                         <div class="panel-heading">
 107                                 <ul id="nav_Tabs" class="nav nav-tabs">
 108                                         <li class><a id="add_one_more" href="#desc_tab"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></li>
 109                                 </ul>
 110                         </div>
 111                         <div class="panel-body">
 112                                 <div class="tab-content">
 113                                         <div id="properties_tab" class="tab-pane fade in active"></div>
 114
 115                                 </div>
 116
 117                         </div>
 118                 </div>
 119                 <span id="formSpan" style="display: none">
 120                         <form class="saveProps" class="form-horizontal">
 121                                 <div>
 122
 123                                         <div class="form-group">
 124                                                 <label class="col-sm-4 control-label">Field Path / Counter</label>
 125                                                 <div class="col-sm-8">
 126                                                         <select class="form-control" id="fieldPath" name="fieldPath"></select>
 127                                                 </div>
 128                                         </div>
 129                                         <div class="form-group">
 130                                                 <label class="col-sm-4 control-label">Threshold</label>
 131                                                 <div class="col-sm-8">
 132                                                         <input type="number" min="0" class="form-control"
 133                                                                 name="threshold" id="threshold">
 134                                                         </input>
 135                                                 </div>
 136                                         </div>
 137
 138
 139                                         <div class="form-group">
 140                                                 <label class="col-sm-4 control-label">Operator</label>
 141                                                 <div class="col-sm-8">
 142                                                         <select class="form-control" id="operator" name="operator"></select>
 143                                                 </div>
 144                                         </div>
 145
 146
 147
 148                                         <div class="form-group">
 149                                                 <label class="col-sm-4 control-label">Ops Policy</label>
 150
 151                                                 <div class="col-sm-8">
 152                                                         <select  class="form-control" id="opsPolicy" name="opsPolicy"
 153                                                         enableFilter="false" ></select>
 154                                                 </div>
 155                                         </div>
 156                                 </div>
 157
 158                         </form>
 159                 </span>
 160         </div>
 161
 162         <div class="modal-footer">
 163                 <!--<button ng-click="reset()" class="btn btn-primary" style="float:left">Reset</button>-->
 164                 <button id="savePropsBtn" class="btn btn-primary">Close</button>
 165                 <button ng-click="close(true)" id="close_button"
 166                         class="btn btn-primary">Cancel</button>
 167
 168         </div>
 169         <script>
 170                 //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
 171                 // css attribute display:none
 172                 $("#add_one_more").click(function(event) {
 173                         event.preventDefault();
 174                         add_one_more();
 175                         setMultiSelect();
 176                 })
 177                 loadPropertyWindow("tca")
 178                 setASDCFields();
 179                 var arr = elementMap[lastElementSelected];
 180                 var vfc_temp=""
 181                 var alarm_conditions_temp=""
 182                 var event_severity_temp=""
 183                 var event_type_source_temp=""
 184                 if (arr !== undefined) {
 185                         //arr[0]
 186                         var el=arr[1]['serviceConfigurations']
 187                         for (var i = 0; i < el.length; i++) {
 188                                 var num=add_one_more();
 189                                 for(var j=0;j<el[i].length;j++){
 190                                         if(el[i][j].name==="vfc"){
 191                                                 vfc_temp=el[i][j].value
 192                                         }else if(el[i][j].name==="alarmCondition"){
 193                                                 alarm_conditions_temp=el[i][j].value
 194                                         }else if(el[i][j].name==="eventSeverity"){
 195                                                 event_severity_temp=el[i][j].value;
 196                                         }else if(el[i][j].name==="eventSourceType"){
 197                                                 event_type_source_temp=el[i][j].value;
 198                                         }
 199                                         else
 200                                                 $("#formId"+num+" #" + el[i][j].name).val(el[i][j].value);
 201
 202
 203                                 }
 204
 205                                 set_vfc_alarm_event(num)
 206                                 vfc_temp=""
 207                                 alarm_conditions_temp=""
 208                                 event_severity_temp=""
 209                                 event_type_source_temp=""
 210
 211                         }
 212
 213                         $("#"+ arr[0][0].name).val(arr[0][0].value);
 214
 215
 216                 }
 217
 218                 function set_vfc_alarm_event (count){
 219                         if(vfc_temp!=="" && vfc_temp!==undefined){
 220                                 $("#formId"+count+" #vfc").val(vfc_temp)
 221
 222                                 if(alarm_conditions_temp!=="" && alarm_conditions_temp!==undefined){
 223                                         setAlarmConditions(vfc_temp,count)
 224                                         $("#formId"+count+" #alarmCondition").val(alarm_conditions_temp)
 225
 226                                         if(event_severity_temp!=="" && event_severity_temp!==undefined){
 227                                                 setEventSourceType(alarm_conditions_temp,count)
 228                                                 $("#formId"+count+" #eventSeverity").val(event_severity_temp)
 229                                                 if(event_type_source_temp!=="" && event_type_source_temp!==undefined){
 230                                                         $("#formId"+count+" #eventSourceType").val(event_type_source_temp)
 231                                                 }
 232                                         }
 233                                         if(event_type_source_temp!=="" && event_type_source_temp!==undefined){
 234                                                 setEventSourceType(alarm_conditions_temp,count)
 235                                                 $("#formId"+count+" #eventSourceType").val(event_type_source_temp)
 236                                                 if(event_severity_temp!=="" && event_severity_temp!==undefined){
 237                                                         $("#formId"+count+" #eventSeverity").val(event_severity_temp)
 238                                                 }
 239                                         }
 240                                 }
 241                         }
 242
 243
 244                 }
 245
 246
 247                 function noRepeats(form){
 248                         var select={};
 249                         for(var i=0;i<form.length;i++){
 250                                 if(select[form[i].name]===undefined)
 251                                         select[form[i].name]=[]
 252                                 select[form[i].name].push(form[i].value);
 253                         }
 254                         var arr=[]
 255                         for(s in select){
 256                                 var f={}
 257                                 f.name=s
 258                                 f.value=select[s]
 259                                 arr.push(f)
 260                         }
 261                         return arr
 262                 }
 263
 264                 $("#savePropsBtn").click(function(event) {
 265                         var form=[]
 266                         var properties=$(".saveProps").not("#formSpan .saveProps")
 267                         var topicP=$("#topicPublish").serializeArray()
 268                         form.push(topicP)
 269                         var d={}
 270                         d["serviceConfigurations"]=[];
 271
 272                         for(var i=0;i<properties.length;i++){
 273                                 var ser=$(properties[i]).serializeArray();
 274                                 var s=noRepeats(ser)
 275
 276
 277                                 d["serviceConfigurations"].push(s)
 278                         }
 279                         form.push(d)
 280                         saveProperties(form)
 281
 282                         $("#close_button").click();
 283
 284                 })
 285
 286
 287                 function add_one_more(){
 288                         $("#nav_Tabs li").removeClass("active");
 289                         var form=$($("#formSpan").children()[0]).clone()
 290                         var count=0;
 291                         if($(".formId").length>0){
 292                                 var greatest=0;
 293                                 var s=$(".formId");
 294                                 for(var i=0;i<s.length; i++){
 295                                         if(parseInt($(s[i]).attr("id").substring(6))>greatest){
 296                                                 greatest=parseInt($(s[i]).attr("id").substring(6))
 297                                         }
 298                                 }
 299                                 count=greatest+1;
 300                                 $("#properties_tab").append(('<span class="formId" id="formId'+count+'"></span>'));
 301                         }else{
 302                                 count++;
 303                                 $("#properties_tab").append('<span class="formId" id="formId1"></span>');
 304                         }
 305                         $("#add_one_more").parent().before(' <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>');
 306                         $("#formId"+count).append(form);
 307                         $(".formId").not($("#formId"+count)).css("display","none")
 308                         addCustListen(count)
 309                         add_vfc_alarm_event_listener(count)
 310                         return count;
 311                 }
 312
 313                 function addCustListen(count) {
 314                         $('#go_properties_tab' + count).click(function(event) {
 315                                 $("#nav_Tabs li").removeClass("active");
 316                                 $(this).parent().addClass("active");
 317                                 $("#formId"+count).css("display","")
 318                                 $(".formId").not($("#formId"+count)).css("display","none")
 319
 320                         })
 321                         $('#tab_close'+count).click(function(event){
 322                                 if(document.getElementById("topicPublishes").disabled){
 323                                         return false;
 324                                 }
 325                                 $(this).parent().remove();
 326                                 $("#formId"+count).remove();
 327                         })
 328                 }
 329
 330 function setAlarmConditions(vfcID, count){
 331         var alarmCondition={}
 332
 333         /*if($("#formId"+count+" #vfc").val()!=="")
 334                 alarmCondition=vf_Services['shared']['byVfc'][vfcID]['alarmCondition']*/
 335
 336         if($("#formId"+count+" #vfc").val()!==""){
 337                 if(vf_Services && vf_Services['shared'] && vf_Services['shared']['byVfc'] && vf_Services['shared']['byVfc'][vfcID]){
 338                         alarmCondition=vf_Services['shared']['byVfc'][vfcID]['alarmCondition'];
 339                 }
 340         }
 341
 342         $("#formId"+count+" #alarmCondition").empty();
 343         $("#formId"+count+" #alarmCondition").append("<option value=\"\"></opton>")
 344         if(alarmCondition && _.keys(alarmCondition).length>0){
 345                         for(key in alarmCondition){
 346                                 var safestring = $('<div>').text(key).html();
 347                                 $("#formId"+count+" #alarmCondition").append("<option value='"+safestring+"'>"+alarmCondition[key]+"</opton>")
 348
 349                     }
 350         }
 351
 352 }
 353
 354 function setEventSourceType(alarm, count){
 355         var eventSourceTypSeverity={}
 356         if($("#formId"+count+" #alarmCondition").val()!=="") {
 357                 if(vf_Services && vf_Services['shared'] && vf_Services['shared']['byAlarmCondition'] && vf_Services['shared']['byAlarmCondition'][alarm]){
 358
 359                 eventSourceTypSeverity=vf_Services['shared']['byAlarmCondition'][alarm]
 360                 }
 361         }
 362
 363         $("#formId"+count+" #eventSourceType").val(eventSourceTypSeverity.eventSourceType);
 364         $("#formId"+count+" #eventSeverity").val(eventSourceTypSeverity.eventSeverity);
 365
 366 }
 367
 368                 function add_vfc_alarm_event_listener(count) {
 369
 370                          $("#formId"+count+" #vfc").on('focus', function () {
 371                                 // Store the current value on focus and on change
 372                                 previous = this.value;
 373                             }).change(function(){
 374
 375                                         setAlarmConditions($("#formId"+count+" #vfc").val(), count);
 376                                         $("#formId"+count+" #eventSourceType").val("");
 377                                         $("#formId"+count+" #eventSeverity").val("")
 378
 379                                 });
 380
 381                          $("#formId"+count+" #alarmCondition").on('focus', function () {
 382                                 // Store the current value on focus and on change
 383                                 previous = this.value;
 384                             }).change(function(){
 385
 386
 387                                 setEventSourceType($("#formId"+count+" #alarmCondition").val().toString(),count);
 388                                 });
 389                                 };
 390         </script>
 391 </div>
 392