mirror of
https://github.com/librenms/librenms.git
synced 2024-10-07 16:52:45 +00:00
webui: Alerts table refresh (#7765)
* initial release * changed layout, matching pr 7628 * style changes usage of short hostname * alerts page cleanup * reduced css class, added js function * initial release * added min-height, also apply min-height via js if parrent is smaller * remove status column
This commit is contained in:
crcro
Neil Lathwood
@@ -2181,6 +2181,12 @@ label {
|
||||
color: darkgrey;
|
||||
}
|
||||
|
||||
.alert-status {
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
min-height: 27px;
|
||||
}
|
||||
|
||||
.service-status {
|
||||
width:10px;
|
||||
height:50px;
|
||||
|
||||
@@ -1,4 +1,17 @@
|
||||
<?php
|
||||
/*
|
||||
* This program is free software: you can redistribute it and/or modify it
|
||||
* under the terms of the GNU General Public License as published by the
|
||||
* Free Software Foundation, either version 3 of the License, or (at your
|
||||
* option) any later version. Please see LICENSE.txt at the top level of
|
||||
* the source code distribution for details.
|
||||
*
|
||||
* @package LibreNMS
|
||||
* @subpackage graphs
|
||||
* @link http://librenms.org
|
||||
* @copyright 2017 LibreNMS
|
||||
* @author LibreNMS Contributors
|
||||
*/
|
||||
|
||||
require_once $config['install_dir'] . '/includes/device-groups.inc.php';
|
||||
|
||||
@@ -175,20 +188,17 @@ if (defined('SHOW_SETTINGS')) {
|
||||
<table id="alerts_' . $unique_id . '" class="table table-hover table-condensed alerts">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-column-id="status" data-formatter="status" data-sortable="false">Status</th>
|
||||
<th data-column-id="rule">Rule</th>
|
||||
<th data-column-id="details" data-sortable="false"> </th>
|
||||
<th data-column-id="hostname">Hostname</th>
|
||||
<th data-column-id="severity"></th>
|
||||
<th data-column-id="timestamp">Timestamp</th>
|
||||
<th data-column-id="severity" data-formatter="severity">Severity</th>
|
||||
<th data-column-id="ack" data-formatter="ack" data-sortable="false">Acknowledge</th>';
|
||||
if (is_numeric($proc)) {
|
||||
if ($proc) {
|
||||
$common_output[] = '<th data-column-id="proc" data-formatter="proc" data-sortable="false">Procedure</th>';
|
||||
}
|
||||
} else {
|
||||
$common_output[] = '<th data-column-id="proc" data-formatter="proc" data-sortable="false">Procedure</th>';
|
||||
<th data-column-id="rule">Rule</th>
|
||||
<th data-column-id="details" data-sortable="false"></th>
|
||||
<th data-column-id="hostname">Hostname</th>
|
||||
<th data-column-id="ack_ico" data-sortable="false">ACK</th>';
|
||||
|
||||
if ($proc == '1') {
|
||||
$common_output[] = '<th data-column-id="proc" data-sortable="false">URL</th>';
|
||||
}
|
||||
|
||||
$common_output[] = '
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -226,26 +236,7 @@ var alerts_grid = $("#alerts_'.$unique_id.'").bootgrid({
|
||||
},
|
||||
url: "ajax_table.php",
|
||||
rowCount: [50, 100, 250, -1],
|
||||
formatters: {
|
||||
"status": function(column,row) {
|
||||
return "<h4><span class=\'label label-"+row.extra+" threeqtr-width\'>" + row.msg + "</span></h4>";
|
||||
},
|
||||
"ack": function(column,row) {
|
||||
return "<button type=\'button\' class=\'btn btn-"+row.ack_col+" btn-sm command-ack-alert\' data-target=\'#ack-alert\' data-state=\'"+row.state+"\' data-alert_id=\'"+row.alert_id+"\' name=\'ack-alert\' id=\'ack-alert\' data-extra=\'"+row.extra+"\'><i class=\'fa fa-"+row.ack_ico+"\'aria-hidden=\'true\'></i></button>";
|
||||
},
|
||||
"proc": function(column,row) {
|
||||
return "<button type=\'button\' class=\'btn btn-sm command-open-proc\' data-alert_id=\'"+row.alert_id+"\' name=\'open-proc\' id=\'open-proc\'>Open</button>";
|
||||
},
|
||||
"severity": function(column,row) {
|
||||
var eventColor = "info";
|
||||
if (row.severity.match (/critical/)) { eventColor = "danger"; }
|
||||
else if (row.severity.match (/warning/)) { eventColor = "warning"; }
|
||||
else if (row.severity.match (/ok/)) { eventColor = "success"; }
|
||||
return "<h4><span class=\'label label-" + eventColor + " threeqtr-width\'>" + row.severity + "</span></h4>";
|
||||
}
|
||||
},
|
||||
templates: {
|
||||
}
|
||||
|
||||
}).on("loaded.rs.jquery.bootgrid", function() {
|
||||
alerts_grid = $(this);
|
||||
alerts_grid.find(".incident-toggle").each( function() {
|
||||
@@ -269,24 +260,6 @@ var alerts_grid = $("#alerts_'.$unique_id.'").bootgrid({
|
||||
}
|
||||
});
|
||||
});
|
||||
alerts_grid.find(".command-open-proc").on("click", function(e) {
|
||||
e.preventDefault();
|
||||
var alert_id = $(this).data("alert_id");
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "ajax_form.php",
|
||||
data: { type: "open-proc", alert_id: alert_id },
|
||||
success: function(msg){
|
||||
if (msg != "ERROR") { window.open(msg); }
|
||||
else {
|
||||
toastr.error("Procedure link does not seem to be valid, please check the rule");
|
||||
}
|
||||
},
|
||||
error: function(){
|
||||
toastr.error("An error occurred opening procedure for this alert. Was the procedure link configured?");
|
||||
}
|
||||
});
|
||||
});
|
||||
alerts_grid.find(".command-ack-alert").on("click", function(e) {
|
||||
e.preventDefault();
|
||||
var alert_id = $(this).data("alert_id");
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
<?php
|
||||
|
||||
/*
|
||||
* LibreNMS
|
||||
*
|
||||
* Copyright (c) 2014 Neil Lathwood <https://github.com/laf/ http://www.lathwood.co.uk/fa>
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify it
|
||||
* under the terms of the GNU General Public License as published by the
|
||||
* Free Software Foundation, either version 3 of the License, or (at your
|
||||
* option) any later version. Please see LICENSE.txt at the top level of
|
||||
* the source code distribution for details.
|
||||
*/
|
||||
header('Content-type: text/plain');
|
||||
|
||||
$alert_id = $_POST['alert_id'];
|
||||
if (!is_numeric($alert_id)) {
|
||||
echo 'ERROR: No alert selected';
|
||||
exit;
|
||||
} else {
|
||||
$proc = dbFetchCell('SELECT proc FROM alerts,alert_rules WHERE alert_rules.id = alerts.rule_id AND alerts.id = ?', array($alert_id));
|
||||
if (($proc == "") || ($proc == "NULL")) {
|
||||
echo header("HTTP/1.0 404 Not Found");
|
||||
} elseif (! preg_match('/^http[s]*:\/\//', $proc)) {
|
||||
echo "ERROR";
|
||||
} else {
|
||||
echo $proc;
|
||||
}
|
||||
exit;
|
||||
}
|
||||
@@ -1,4 +1,17 @@
|
||||
<?php
|
||||
/*
|
||||
* This program is free software: you can redistribute it and/or modify it
|
||||
* under the terms of the GNU General Public License as published by the
|
||||
* Free Software Foundation, either version 3 of the License, or (at your
|
||||
* option) any later version. Please see LICENSE.txt at the top level of
|
||||
* the source code distribution for details.
|
||||
*
|
||||
* @package LibreNMS
|
||||
* @subpackage graphs
|
||||
* @link http://librenms.org
|
||||
* @copyright 2017 LibreNMS
|
||||
* @author LibreNMS Contributors
|
||||
*/
|
||||
|
||||
$where = 1;
|
||||
|
||||
@@ -57,33 +70,25 @@ foreach (dbFetchRows($sql, $param) as $alertlog) {
|
||||
}
|
||||
$alert_state = $alertlog['state'];
|
||||
if ($alert_state == '0') {
|
||||
$fa_icon = 'check';
|
||||
$fa_color = 'success';
|
||||
$text = 'Ok';
|
||||
$status = 'label-success';
|
||||
} elseif ($alert_state == '1') {
|
||||
$fa_icon = 'times';
|
||||
$fa_color = 'danger';
|
||||
$text = 'Alert';
|
||||
$status = 'label-danger';
|
||||
} elseif ($alert_state == '2') {
|
||||
$fa_icon = 'info-circle';
|
||||
$fa_color = 'muted';
|
||||
$text = 'Ack';
|
||||
$status = 'label-info';
|
||||
} elseif ($alert_state == '3') {
|
||||
$fa_icon = 'arrow-down';
|
||||
$fa_color = 'warning';
|
||||
$text = 'Worse';
|
||||
$status = 'label-warning';
|
||||
} elseif ($alert_state == '4') {
|
||||
$fa_icon = 'arrow-up';
|
||||
$fa_color = 'info';
|
||||
$text = 'Better';
|
||||
$status = 'label-primary';
|
||||
}//end if
|
||||
|
||||
|
||||
$response[] = array(
|
||||
'id' => $rulei++,
|
||||
'time_logged' => $alertlog['humandate'],
|
||||
'details' => '<a class="fa fa-plus incident-toggle" style="display:none" data-toggle="collapse" data-target="#incident' . ($rulei) . '" data-parent="#alerts"></a>',
|
||||
'hostname' => '<div class="incident">' . generate_device_link($dev, shorthost($dev['hostname'])) . '<div id="incident' . ($rulei) . '" class="collapse">' . $fault_detail . '</div></div>',
|
||||
'alert' => htmlspecialchars($alertlog['alert']),
|
||||
'status' => "<b><i class='fa fa-".$fa_icon." text-".$fa_color."'></i> $text</b>",
|
||||
'status' => "<i class='alert-status " . $status . "'></i>"
|
||||
);
|
||||
}//end foreach
|
||||
|
||||
|
||||
@@ -1,4 +1,17 @@
|
||||
<?php
|
||||
/*
|
||||
* This program is free software: you can redistribute it and/or modify it
|
||||
* under the terms of the GNU General Public License as published by the
|
||||
* Free Software Foundation, either version 3 of the License, or (at your
|
||||
* option) any later version. Please see LICENSE.txt at the top level of
|
||||
* the source code distribution for details.
|
||||
*
|
||||
* @package LibreNMS
|
||||
* @subpackage graphs
|
||||
* @link http://librenms.org
|
||||
* @copyright 2017 LibreNMS
|
||||
* @author LibreNMS Contributors
|
||||
*/
|
||||
|
||||
require_once $config['install_dir'] . '/includes/device-groups.inc.php';
|
||||
|
||||
@@ -104,35 +117,22 @@ foreach (dbFetchRows($sql, $param) as $alert) {
|
||||
$log = dbFetchCell('SELECT details FROM alert_log WHERE rule_id = ? AND device_id = ? ORDER BY id DESC LIMIT 1', array($alert['rule_id'], $alert['device_id']));
|
||||
$fault_detail = alert_details($log);
|
||||
|
||||
$ico = 'check';
|
||||
$col = 'green';
|
||||
$extra = '';
|
||||
$msg = '';
|
||||
$alert_to_ack = '<button type="button" class="btn btn-success command-ack-alert fa fa-eye" aria-hidden="true" title="Mark as acknowledged" data-target="ack-alert" data-state="' . $alert['state'] . '" data-alert_id="' . $alert['id'] . '" name="ack-alert"></button>';
|
||||
$alert_to_nack = '<button type="button" class="btn btn-danger command-ack-alert fa fa-eye-slash" aria-hidden="true" title="Mark as not acknowledged" data-target="ack-alert" data-state="' . $alert['state'] . '" data-alert_id="' . $alert['id'] . '" name="ack-alert"></button>';
|
||||
|
||||
if ((int)$alert['state'] === 0) {
|
||||
$ico = 'check';
|
||||
$col = 'green';
|
||||
$extra = 'success';
|
||||
$msg = 'ok';
|
||||
$ico = '';
|
||||
$msg = '';
|
||||
} elseif ((int)$alert['state'] === 1 || (int)$alert['state'] === 3 || (int)$alert['state'] === 4) {
|
||||
$ico = 'volume-up';
|
||||
$col = 'red';
|
||||
$extra = 'danger';
|
||||
$msg = 'alert';
|
||||
$ico = $alert_to_ack;
|
||||
if ((int)$alert['state'] === 3) {
|
||||
$msg = 'worse';
|
||||
$msg = '<i class="fa fa-angle-double-down" style="font-size:20px;" aria-hidden="true" title="Status got worse"></i>';
|
||||
} elseif ((int)$alert['state'] === 4) {
|
||||
$msg = 'better';
|
||||
$msg = '<i class="fa fa-angle-double-up" style="font-size:20px;" aria-hidden="true" title="Status got better"></i>';
|
||||
}
|
||||
} elseif ((int)$alert['state'] === 2) {
|
||||
$ico = 'volume-off';
|
||||
$col = '#800080';
|
||||
$extra = 'warning';
|
||||
$msg = 'muted';
|
||||
}//end if
|
||||
$alert_checked = '';
|
||||
$orig_ico = $ico;
|
||||
$orig_col = $col;
|
||||
$orig_class = $extra;
|
||||
$ico = $alert_to_nack;
|
||||
}
|
||||
|
||||
$severity = $alert['severity'];
|
||||
if ($alert['state'] == 3) {
|
||||
@@ -141,18 +141,39 @@ foreach (dbFetchRows($sql, $param) as $alert) {
|
||||
$severity .= ' <strong>-</strong>';
|
||||
}
|
||||
|
||||
$ack_ico = 'volume-up';
|
||||
$ack_col = 'success';
|
||||
$ack_ico = $alert_to_ack;
|
||||
|
||||
if ($alert['state'] == 2) {
|
||||
$ack_ico = 'volume-off';
|
||||
$ack_col = 'danger';
|
||||
$ack_ico = $alert_to_nack;
|
||||
}
|
||||
|
||||
$hostname = '
|
||||
<div class="incident">
|
||||
'.generate_device_link($alert).'
|
||||
<div id="incident'.($rulei + 1).'" class="collapse">'.$fault_detail.'</div>
|
||||
</div>';
|
||||
$hostname = '<div class="incident">' . generate_device_link($alert, shorthost($alert['hostname'])) . '<div id="incident' . ($rulei + 1) . '" class="collapse">' . $fault_detail . '</div></div>';
|
||||
|
||||
switch ($severity) {
|
||||
case 'critical':
|
||||
$severity_ico = '<span class="alert-status label-danger"> </span>';
|
||||
break;
|
||||
case 'warning':
|
||||
$severity_ico = '<span class="alert-status label-warning"> </span>';
|
||||
break;
|
||||
case 'ok':
|
||||
$severity_ico = '<span class="alert-status label-success"> </span>';
|
||||
break;
|
||||
default:
|
||||
$severity_ico = '<span class="alert-status label-info"> </span>';
|
||||
break;
|
||||
}
|
||||
|
||||
$proc = dbFetchCell('SELECT proc FROM alerts,alert_rules WHERE alert_rules.id = alerts.rule_id AND alerts.id = ?', array($alert['id']));
|
||||
if (($proc == "") || ($proc == "NULL")) {
|
||||
$has_proc = '';
|
||||
} else {
|
||||
if (!preg_match('/^http[s]*:\/\//', $proc)) {
|
||||
$has_proc = '';
|
||||
} else {
|
||||
$has_proc = '<a href="' . $proc . '" target="_blank"><button type="button" class="btn btn-info fa fa-external-link" aria-hidden="true"></button></a>';
|
||||
}
|
||||
}
|
||||
|
||||
$response[] = array(
|
||||
'id' => $rulei++,
|
||||
@@ -160,15 +181,13 @@ foreach (dbFetchRows($sql, $param) as $alert) {
|
||||
'details' => '<a class="fa fa-plus incident-toggle" style="display:none" data-toggle="collapse" data-target="#incident' . ($rulei) . '" data-parent="#alerts"></a>',
|
||||
'hostname' => $hostname,
|
||||
'timestamp' => ($alert['timestamp'] ? $alert['timestamp'] : 'N/A'),
|
||||
'severity' => $severity,
|
||||
'ack_col' => $ack_col,
|
||||
'severity' => $severity_ico,
|
||||
'state' => $alert['state'],
|
||||
'alert_id' => $alert['id'],
|
||||
'ack_ico' => $ack_ico,
|
||||
'extra' => $extra,
|
||||
'msg' => $msg,
|
||||
'proc' => $has_proc,
|
||||
);
|
||||
}//end foreach
|
||||
}
|
||||
|
||||
$output = array(
|
||||
'current' => $current,
|
||||
|
||||
@@ -267,3 +267,15 @@ $(document).ready(function() {
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ajaxComplete(function(){
|
||||
if($('.alert-status').length !== 0) {
|
||||
$('.alert-status').each(function() {
|
||||
if ($(this).parent().height() < 27) {
|
||||
$(this).height('27px');
|
||||
} else {
|
||||
$(this).height($(this).parent().height());
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,4 +1,18 @@
|
||||
<?php
|
||||
/*
|
||||
* This program is free software: you can redistribute it and/or modify it
|
||||
* under the terms of the GNU General Public License as published by the
|
||||
* Free Software Foundation, either version 3 of the License, or (at your
|
||||
* option) any later version. Please see LICENSE.txt at the top level of
|
||||
* the source code distribution for details.
|
||||
*
|
||||
* @package LibreNMS
|
||||
* @subpackage graphs
|
||||
* @link http://librenms.org
|
||||
* @copyright 2017 LibreNMS
|
||||
* @author LibreNMS Contributors
|
||||
*/
|
||||
|
||||
$param = array();
|
||||
|
||||
$pagetitle[] = 'Alert Log';
|
||||
@@ -21,11 +35,11 @@ $pagetitle[] = 'Alert Log';
|
||||
<table id="alertlog" class="table table-hover table-condensed table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-column-id="time_logged" data-order="desc">Time logged</th>
|
||||
<th data-column-id="status" data-sortable="false"></th>
|
||||
<th data-column-id="time_logged" data-order="desc">Timestamp</th>
|
||||
<th data-column-id="details" data-sortable="false"> </th>
|
||||
<th data-column-id="hostname">Device</th>
|
||||
<th data-column-id="alert">Alert</th>
|
||||
<th data-column-id="status" data-sortable="false">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
@@ -63,8 +77,7 @@ var grid = $("#alertlog").bootgrid({
|
||||
</form></span></div> \
|
||||
<div class="col-sm-4 actionBar"><p class="{{css.search}}"></p><p class="{{css.actions}}"></p></div></div></div>'
|
||||
},
|
||||
post: function ()
|
||||
{
|
||||
post: function () {
|
||||
return {
|
||||
id: "alertlog",
|
||||
device_id: '<?php echo htmlspecialchars($_POST['device_id']); ?>',
|
||||
|
||||
@@ -1,18 +1,32 @@
|
||||
<?php
|
||||
|
||||
/*
|
||||
* LibreNMS
|
||||
*
|
||||
* Copyright (c) 2014 Neil Lathwood <https://github.com/laf/ http://www.lathwood.co.uk/fa>
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify it
|
||||
* under the terms of the GNU General Public License as published by the
|
||||
* Free Software Foundation, either version 3 of the License, or (at your
|
||||
* option) any later version. Please see LICENSE.txt at the top level of
|
||||
* the source code distribution for details.
|
||||
*
|
||||
* @package LibreNMS
|
||||
* @subpackage webui
|
||||
* @link http://librenms.org
|
||||
* @copyright 2017 LibreNMS
|
||||
* @author LibreNMS Contributors
|
||||
*/
|
||||
|
||||
$page_title = 'Alerts';
|
||||
?>
|
||||
|
||||
<div class="panel panel-default panel-condensed">
|
||||
<div class="panel-heading">
|
||||
<strong>Alerts</strong>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$device['device_id'] = '-1';
|
||||
require_once 'includes/common/alerts.inc.php';
|
||||
echo implode('', $common_output);
|
||||
unset($device['device_id']);
|
||||
?>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user