alarms in alarm modal are sorted like the charts menu
Costa Tsaousis (ktsaou) committed
Aug 28, 2016 at 17:05 UTC
0be1e4b6df3d0e0fc8d987fe26062b11d3861276
1 file changed
+44
-14
web/index.html
+44
-14
@@ -2404,8 +2404,8 @@ function renderChartsAndMenu(data) {
2404
2405
function alarmsUpdateModal() {
2406
var active = '<h3>Raised Alarms</h3><table class="table">';
2407
- var all = '<h3>All Running Alarms</h3><table class="table">';
2408
- var log = '<h3>Alarm Log</h3><table class="table"><tr><th>When</th><th>Chart</th><th>Alarm</th><th>Status</th></tr>';
2407
+ var all = '<h3>All Running Alarms</h3><div class="panel-group" id="alarms_all_accordion" role="tablist" aria-multiselectable="true">';
2408
+ var log = '<h3>Alarm Log</h3><table class="table"><tr><th>When</th><th>Chart</th><th>Alarm</th><th>Status</th>';
2409
var footer = '<hr/>These are <a href="https://github.com/firehol/netdata/wiki/Generating-Badges" target="_blank">netdata badges</a>. You can copy and paste their URLs to embed them in any web page. Their color indicates the state of the alarm: <b>red</b> is critical, <b>orange</b> is warning, <b>bright green</b> is ok, <b>light grey</b> is undefined (i.e. no data or no status), <b>black</b> is not initialized.';
2410
2411
NETDATA.alarms.get('all', function(data) {
@@ -2422,6 +2422,7 @@ function alarmsUpdateModal() {
2422
var count_active = 0;
2423
var count_all = 0;
2424
var families = {};
2425
+ var families_sort = new Array();
2426
for(x in data.alarms) {
2427
var alarm = data.alarms[x];
2428
var chart = options.data.charts[alarm.chart];
@@ -2430,39 +2431,68 @@ function alarmsUpdateModal() {
2431
if(typeof chart !== 'undefined' && typeof chart.menu !== 'undefined' && typeof chart.submenu !== 'undefined')
2432
family = chart.menu + ' - ' + chart.submenu;
2433
2433
- if(typeof families[family] === 'undefined')
2434
- families[family] = new Array();
2434
+ if(typeof families[family] === 'undefined') {
2435
+ families[family] = {
2436
+ name: family,
2437
+ arr: new Array(),
2438
+ priority: chart.priority
2439
+ };
2440
2436
- families[family].push(alarm);
2441
+ families_sort.push(families[family]);
2442
+ }
2443
+
2444
+ if(chart.priority < families[family].priority)
2445
+ families[family].priority = chart.priority;
2446
+
2447
+ families[family].arr.push(alarm);
2448
+ }
2449
+
2450
+ function families_comparator(a, b) {
2451
+ if (a.priority > b.priority) return -1;
2452
+ if (a.priority < b.priority) return 1;
2453
+ return 0;
2454
}
2455
+ var families_sorted = families_sort.sort(families_comparator);
2456
2439
- for(x in families) {
2457
+ var fc = 0;
2458
+ var len = families_sorted.length;
2459
+ while(len--) {
2460
+ fc++;
2461
+ var family = families_sorted[len].name;
2462
var active_family_added = false;
2441
- var all_family_added = false;
2463
+ var expanded = 'true';
2464
+ var collapsed = '';
2465
+ var cin = 'in';
2466
+
2467
+ if(fc !== 1) {
2468
+ all += "</table></div></div></div>";
2469
+ expanded = 'false';
2470
+ collapsed = 'class="collapsed"'
2471
+ cin = '';
2472
+ }
2473
2443
- var arr = families[x];
2474
+ all += '<div class="panel panel-default"><div class="panel-heading" role="tab" id="alarm_all_heading_' + fc.toString() + '"><h4 class="panel-title"><a ' + collapsed + ' role="button" data-toggle="collapse" data-parent="#alarms_all_accordion" href="#alarm_all_' + fc.toString() + '" aria-expanded="' + expanded + '" aria-controls="alarm_all_' + fc.toString() + '">' + family.toString() + '</a></h4></div><div id="alarm_all_' + fc.toString() + '" class="panel-collapse collapse ' + cin + '" role="tabpanel" aria-labelledby="alarm_all_heading_' + fc.toString() + '"><div class="panel-body"><table class="table">';
2475
+
2476
+ var arr = families[family].arr;
2477
var c = arr.length;
2478
while(c--) {
2479
var alarm = arr[c];
2480
if(alarm.status === 'WARNING' || alarm.status === 'CRITICAL') {
2481
if(!active_family_added) {
2482
active_family_added = true;
2450
- active += '<tr><th class="text-center"><h4>' + x + '</h4></th><th></th></tr>';
2483
+ active += '<tr><th class="text-center"><h4>' + family + '</h4></th><th></th></tr>';
2484
}
2485
count_active++;
2486
active += '<tr><td class="text-center" style="vertical-align:middle" width="40%"><embed src="' + NETDATA.alarms.server + '/api/v1/badge.svg?chart=' + alarm.chart + '&alarm=' + alarm.name + '&refresh=auto" type="image/svg+xml" height="20" /></td><td><b>' + alarm.info + '</b><table>' + ((typeof alarm.warn !== 'undefined')?('<tr><td> warning when </td><td><code>' + alarm.warn + '</code></td></tr>'):'') + ((typeof alarm.crit !== 'undefined')?('<tr><td style="text-align:right"> critical when </td><td><code>' + alarm.crit + '</code></td></tr>'):'') + '<tr><td style="text-align:right"><small> source </small></td><td><small>' + alarm.source + '</small></td></tr></table></td></tr>';
2487
}
2488
2456
- if(!all_family_added) {
2457
- all_family_added = true;
2458
- all += '<tr><th class="text-center"><h4>' + x + '</h4></th><th></th></tr>';
2459
- }
2489
count_all++;
2490
all += '<tr><td class="text-center" style="vertical-align:middle" width="40%"><embed src="' + NETDATA.alarms.server + '/api/v1/badge.svg?chart=' + alarm.chart + '&alarm=' + alarm.name + '&refresh=auto" type="image/svg+xml" height="20" /></td><td><b>' + alarm.info + '</b><table>' + ((typeof alarm.warn !== 'undefined')?('<tr><td> warning when </td><td><code>' + alarm.warn + '</code></td></tr>'):'') + ((typeof alarm.crit !== 'undefined')?('<tr><td style="text-align:right"> critical when </td><td><code>' + alarm.crit + '</code></td></tr>'):'') + '<tr><td style="text-align:right"><small> source </small></td><td><small>' + alarm.source + '</small></td></tr></table></td></tr>';
2491
}
2492
}
2493
active += "</table>";
2465
- all += "</table>";
2494
+ if(families_sorted.length > 0) all += "</table></div></div></div>";
2495
+ all += "</div>";
2496
2497
if(!count_active)
2498
active += "<h4>Everything is normal. No raised alarms.</h4>";