2 ============LICENSE_START=======================================================
4 ================================================================================
5 Copyright (C) 2017-2018 AT&T Intellectual Property. All rights
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
12 http://www.apache.org/licenses/LICENSE-2.0
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 ===================================================================
28 background-color:#f2bfab;
33 background-color:#dddd;
44 background-color: #f5f5f5;
46 margin: 15px 15px 0 0;
51 #tcaEditHolder #properties_tab>div+div {
66 .tcaParentItems label{
76 border-bottom: 1px solid #ddd;
77 border-collapse: collapse;
87 #tcaTable tr.highlight{
88 background-color: #f5f5f5;
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">×</button>
105 <h4>TCA Micro Services</h4>
107 <div class="modal-body">
108 <div style="height: 10px"></div>
109 <div class="panel panel-default" id="panelHolder">
111 <span id="formSpan" style="display:none;">
112 <div class="panel-body">
114 <form class="tcaParentItems">
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>
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>
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>
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>
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>
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>
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">
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>
170 <div style="float:right">
171 <button type="button" id="deleteThresh" class="btn btn-sm glyphicon glyphicon-trash" disabled></button>
176 <div id="tcaEditHolder" class="panel panel-default col-sm-6">
177 <div class="tab-content">
178 <div id="properties_tab" class="form-vertical">
180 <label class="control-label">Metric</label>
182 <select id="fieldPathM" name="fieldPathM"></select>
186 <label class="control-label">Operator</label>
188 <select id="operator" name="operator"></select>
192 <label class="control-label">Threshold</label>
194 <input type="text" maxlength="10" class="form-control" name="threshold"
195 onkeypress="return isNumberKey(event)" id="threshold"></input>
199 <label class="control-label">Closed Loop Event Status</label>
201 <select id="closedLoopEventStatus" name="closedLoopEventStatus"></select>
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>
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');
229 jQuery.fn.invisible = function() {
230 return this.css('visibility', 'hidden');
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);
240 $("#formId" + count + " #tuuid").val(tuuid);
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();
251 loadPropertyWindow("tca");
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));
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){
263 $('<option></option>').val(text).html(text)
270 var fieldPathMLabel2Value = function(label) {
271 return Object.keys(defaults_props['tca']['fieldPathM']).find(key => defaults_props['tca']['fieldPathM'][key] == label)
273 var fieldPathMValue2Label = function(value) {
274 return defaults_props['tca']['fieldPathM'][value];
279 var arr = elementMap[lastElementSelected];
281 if (arr !== undefined) {
283 var num = add_one_more();
284 for (var i=0; i< arr[x].length; i++){
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>");
296 $("#formId" + num + " #"+arr[x][i].name).val(arr[x][i].value);
299 $('#go_properties_tab'+num).text($('#formId' +num+ ' #tname').val());
300 $("#formId"+num + " #properties_tab").invisible();
303 var count = add_one_more();
304 generateTUUID(count);
307 $("#savePropsBtn").click(function(event) {
309 if (($('#formId'+num+' #tcaTable .highlight').length > 0 ) &&
310 (!($('#formId'+num+' #threshold').val()) || !($('#formId'+num+' #fieldPathM').val())) ) {
311 $('#formId'+num+' #tcaError').show();
314 $('#formId'+num+' .tcaErr').hide();
315 if ($('#formId'+num+' #tcaTable .highlight').length > 0){
316 $('#formId'+num+' #tcaTable .highlight td').text(propertiesToString(num));
319 $('.formId').each(function(){
320 var count = $(this).attr('id').slice(-1);
321 var header = $(this).find('.tcaParentItems').serializeArray();
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);
333 var polSel = $(this).find('.tcaParentItems #tcaPol').val();
334 $.grep(header, function(e,i){
335 if (e.name == "tcaPolId"){
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"];
347 header[i]["value"]="";
352 sconf["serviceConfigurations"]=sconfa;
354 saveP[$(this).find('.tcaParentItems #tname').val()] = header;
357 saveProperties(saveP);
358 $("#close_button").click();
362 function uniquet(arr) {
364 for (var i=0, l=arr.length; i<l; i++){
365 if (a.indexOf(arr[i]) === -1 && arr[i] !== ''){
369 if (a.length==arr.length){
376 function add_one_more(){
377 $("#nav_Tabs li").removeClass("active");
378 var form=$($("#formSpan").children()[0]).clone();
380 if($(".formId").length>0){
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))
389 $("#panelHolder").append(('<span class="formId" id="formId'+count+'"></span>'));
392 $("#panelHolder").append('<span class="formId" id="formId1"></span>');
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">×</button></li>');
396 $("#formId"+count).append(form);
397 $('#formId'+count+ ' #properties_tab').invisible();
398 $(".formId").not($("#formId"+count)).css("display","none");
399 addCustListen(count);
404 function isNumberKey(event){
405 var charCode = (event.which) ? event.which : event.keyCode
406 if (charCode > 31 && (charCode < 48 || charCode > 57)){
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();
421 $('#formId'+oldCount+' .tcaErr').hide();
422 if ($('#formId'+oldCount+' #tcaTable .highlight').length > 0){
423 $('#formId'+oldCount+' #tcaTable .highlight td').text(propertiesToString(oldCount));
425 $("#formId"+oldCount+" #tcaTable .highlight").removeClass("highlight")
429 $("#nav_Tabs li").removeClass("active");
430 $(this).parent().addClass("active");
431 $("#formId"+count).css("display","");
432 $(".formId").not($("#formId"+count)).css("display","none");
435 $('#tab_close'+count).click(function(event){
436 $(this).parent().remove();
437 $("#formId"+count).remove();
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();
446 $('#formId'+count+' .tcaErr').hide();
447 if ($('#formId'+count+' #tcaTable .highlight').length > 0){
448 $('#formId'+count+' #tcaTable .highlight td').text(propertiesToString(num));
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');
461 if ((!(readMOnly)) && ($('#formId'+count + ' #deleteThresh').prop('disabled'))) {
462 $('#formId'+count + ' #deleteThresh').prop('disabled', false);
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);
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();
480 $('#formId'+count+' .tcaErr').hide();
481 if ($('#formId'+count+' #tcaTable .highlight').length > 0){
482 $('#formId'+count+' #tcaTable .highlight td').text(propertiesToString(count));
484 $('#formId'+count+ ' #properties_tab').visible();
485 if (('#formId'+count+' #tcaTable .highlight').length > 0 ){
486 $('#formId'+count+' #tcaTable tr.highlight').removeClass('highlight');
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');
494 if ($('#formId'+count + ' #deleteThresh').prop('disabled')) {
495 $('#formId'+count + ' #deleteThresh').prop('disabled', false);
500 $('#formId'+count+' #tname').on('change',function(){
501 $('#go_properties_tab'+count).text($('#formId'+count+' #tname').val())