From dcacca040adce290c56041c42b3b656d6b63273b Mon Sep 17 00:00:00 2001 From: "Costa Tsaousis (ktsaou)" Date: Sun, 28 Aug 2016 21:15:53 +0300 Subject: [PATCH] aesthetic changes to alarms modal - alarm definitions are properly rendered --- web/index.html | 146 +++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 134 insertions(+), 12 deletions(-) diff --git a/web/index.html b/web/index.html index 532c9fe5..c61389ec 100644 --- a/web/index.html +++ b/web/index.html @@ -125,6 +125,13 @@ overflow: visible; } + /* make accordion use the whole header bar for expand/collapse */ + .panel-title a { + display: block; + padding: 10px 15px; + margin: -10px -15px; + } + /* * Side navigation * @@ -2406,9 +2413,13 @@ function alarmsUpdateModal() { var active = '

Raised Alarms

'; var all = '

All Running Alarms

'; var log = '

Alarm Log

'; - var footer = '
These are netdata badges. You can copy and paste their URLs to embed them in any web page. Their color indicates the state of the alarm: red is critical, orange is warning, bright green is ok, light grey is undefined (i.e. no data or no status), black is not initialized.'; + var footer = '
netdata badges refresh automatically. Their color indicates the state of the alarm:  red  is critical,  orange  is warning,  bright green  is ok,  light grey  is undefined (i.e. no data or no status),  black  is not initialized. You can copy and paste their URLs to embed them in any web page.'; NETDATA.alarms.get('all', function(data) { + options.alarm_families = new Array(); + + alarmsCallback(data); + if(data === null) { document.getElementById('alarms_active').innerHTML = document.getElementById('alarms_all').innerHTML = @@ -2417,6 +2428,96 @@ function alarmsUpdateModal() { return; } + function frequency_text(seconds, sfx) { + if(seconds === 0) + return 'now'; + + var suffix = ''; + if(seconds < 0) { + seconds = -seconds; + if(sfx) suffix = ' ago'; + } + + var hours = Math.floor(seconds / 3600); + seconds -= (hours * 3600); + + var minutes = Math.floor(seconds / 60); + seconds -= (minutes * 60); + + var txt = ''; + + if(hours > 1) txt += hours.toString() + ' hours'; + else if(hours === 1) txt += hours.toString() + ' hour'; + + if(hours > 0 && minutes > 0 && seconds == 0) + txt += ' and '; + else if(hours > 0 && minutes > 0 && seconds > 0) + txt += ', '; + + if(minutes > 1) txt += minutes.toString() + ' minutes'; + else if(minutes === 1) txt += minutes.toString() + ' minute'; + + if((minutes > 0 || minutes > 0) && seconds > 0) + txt += ' and '; + + if(seconds > 1) txt += seconds.toString() + ' seconds'; + else if(seconds === 1) txt += seconds.toString() + ' second'; + + return txt + suffix; + } + + function alarm_lookup_explain(alarm, chart) { + var dimensions = ''; + + if(chart.dimensions.length > 1) + dimensions = '(of the sum of all dimensions), '; + + if(typeof alarm.lookup_dimensions !== 'undefined') { + var d = alarm.lookup_dimensions.replace('|', ','); + var x = d.split(','); + if(x.length > 1) + dimensions = 'of the sum of dimensions ' + alarm.lookup_dimensions + ', '; + else + dimensions = 'of the dimension ' + alarm.lookup_dimensions + ', '; + } + + return '' + alarm.lookup_method + ' of all values ' + + dimensions + + 'starting ' + frequency_text(alarm.lookup_after + alarm.lookup_before, true) + ' and up to ' + frequency_text(alarm.lookup_before, true) + '' + + ((alarm.lookup_options)?(', with options ' + alarm.lookup_options.replace(' ', ', ') + ''):'') + + '.'; + } + + function alarm_to_html(alarm) { + var chart = options.data.charts[alarm.chart]; + // console.log(alarm); + return '' + + ''; + } + + function alarm_family_show(id) { + var html = '
WhenChartAlarmStatus
' + alarm.chart + '
 

 
' + alarm.info + '		' + + ((typeof alarm.lookup_after !== 'undefined')?(''):'') + + ((typeof alarm.calc !== 'undefined')?(''):'') + + ((typeof alarm.warn !== 'undefined')?(''):'') + + ((typeof alarm.crit !== 'undefined')?(''):'') + + ((chart.green !== null)?(''):'') + + ((chart.red !== null)?(''):'') + + '' + + '' + + '
db lookup' + alarm_lookup_explain(alarm, chart) + '
calculation' + alarm.calc + '
warning when' + alarm.warn + '
critical when' + alarm.crit + '
green threshold' + chart.green + ' ' + chart.units + '
red threshold' + chart.red + ' ' + chart.units + '
check every' + frequency_text(alarm.update_every) + '
source' + alarm.source + '
'; + var family = options.alarm_families[id]; + var len = family.arr.length; + while(len--) { + var alarm = family.arr[len]; + html += alarm_to_html(alarm); + } + html += '
'; + + $('#alarm_all_' + id.toString()).html(html); + } + + // find the proper family of each alarm var now = new Date().getTime(); var x; var count_active = 0; @@ -2447,31 +2548,36 @@ function alarmsUpdateModal() { families[family].arr.push(alarm); } - function families_comparator(a, b) { + // sort the families, like the dashboard menu does + var families_sorted = families_sort.sort(function (a, b) { if (a.priority > b.priority) return -1; if (a.priority < b.priority) return 1; + if (a.name < b.name) return 1; + if (a.name > b.name) return -1; return 0; - } - var families_sorted = families_sort.sort(families_comparator); + }); var fc = 0; var len = families_sorted.length; while(len--) { - fc++; var family = families_sorted[len].name; var active_family_added = false; var expanded = 'true'; var collapsed = ''; var cin = 'in'; - if(fc !== 1) { + if(fc !== 0) { all += ""; expanded = 'false'; collapsed = 'class="collapsed"' cin = ''; } - all += '
'; + all += '
'; + + options.alarm_families[fc] = families[family]; + + fc++; var arr = families[family].arr; var c = arr.length; @@ -2483,15 +2589,14 @@ function alarmsUpdateModal() { active += '
'; } count_active++; - active += ''; + active += alarm_to_html(alarm); } count_all++; - all += ''; } } active += "

' + family + '

' + alarm.info + '' + ((typeof alarm.warn !== 'undefined')?(''):'') + ((typeof alarm.crit !== 'undefined')?(''):'') + '
 warning when ' + alarm.warn + '
 critical when ' + alarm.crit + '
 source ' + alarm.source + '
' + alarm.info + '' + ((typeof alarm.warn !== 'undefined')?(''):'') + ((typeof alarm.crit !== 'undefined')?(''):'') + '
 warning when ' + alarm.warn + '
 critical when ' + alarm.crit + '
 source ' + alarm.source + '
"; - if(families_sorted.length > 0) all += "
"; + if(families_sorted.length > 0) all += ""; all += ""; if(!count_active) @@ -2507,6 +2612,20 @@ function alarmsUpdateModal() { document.getElementById('alarms_active').innerHTML = active; document.getElementById('alarms_all').innerHTML = all; + if(families_sorted.length > 0) alarm_family_show(0); + + // register bootstrap events + $('#alarms_all_accordion').on('show.bs.collapse', function (d) { + var target = $(d.target); + var id = $(target).data('alarm-id'); + alarm_family_show(id); + }); + $('#alarms_all_accordion').on('hidden.bs.collapse', function (d) { + var target = $(d.target); + var id = $(target).data('alarm-id'); + $('#alarm_all_' + id.toString()).html(''); + }); + NETDATA.alarms.get_log(function(data) { if(data === null) { document.getElementById('alarms_log').innerHTML = @@ -2534,8 +2653,11 @@ function alarmsUpdateModal() { function alarmsCallback(data) { var count = 0; - for(x in data.alarms) - count++; + for(x in data.alarms) { + var alarm = data.alarms[x]; + if(alarm.status === 'WARNING' || alarm.status === 'CRITICAL') + count++; + } if(count > 0) document.getElementById('alarms_count_badge').innerHTML = count.toString(); -- 2.39.2