0
0
Fork 0
mirror of https://github.com/alerta/alerta.git synced 2025-01-26 02:08:31 +00:00
alerta_alerta/dashboard/v2/console.html
2013-03-08 14:58:14 +00:00

700 lines
25 KiB
HTML

<html lang="en">
<head>
<!-- link href='http://fonts.googleapis.com/css?family=Sintony:400,700' rel='stylesheet' type='text/css' -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<script type="text/javascript" language="javascript" src="assets/DataTables/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="assets/DataTables/media/js/jquery.dataTables.min.js"></script>
<link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
}
</style>
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="./index.html">Alert Console</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="./index.php">Production</a></li>
<li class=""><a href="./dev.php">Development</a></li>
<li class=""><a href="./infra.php">Infrastructure</a></li>
<li class=""><a href="/Kibana">History</a></li>
<li class=""><a href="./about.php">About</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<table width="100%">
<tr>
<span id="heartbeat-alerts"></span>
<div id="console-alert" class="alert alert-info initially-hidden">
<button class="close" data-dismiss="alert" onclick="">&times;</button>
<strong>Warning!</strong> <span id="warning-text"></span>
</div>
</tr>
<tr>
<td>
<!-- div id="status-counts" -->
<table border=1 class="table table-bordered table-condensed" id="status-counts">
<tbody>
<tr id="Alert-status" class="status">
<td><span class="label">OPEN</span></td>
<td id="count-open"><b>0</b></td>
<td><span class="label">ACK</span></td>
<td id="count-ack"><b>0</b></td>
<td><span class="label">CLOSED</span></td>
<td id="count-closed"><b>0</b></td>
</tr>
</tbody>
</table>
<!-- /div -->
</td>
<td>
<div align="right">
<select id="limit-select" class="btn" name="limit" onchange="updateLimit(this.value)">
<option value="0">No limit</option>
<option value="10">Only 10</option>
<option value="50">Only 50</option>
<option value="100">Only 100</option>
<option value="500">Only 500</option>
</select>
<select id="from-date-select" class="btn" name="last" onchange="updateFromDate(this.value)">
<option value="0">All alerts</option>
<option value="120">Last 2 minutes</option>
<option value="300">Last 5 minutes</option>
<option value="600">Last 10 minutes</option>
<option value="1800">Last 30 minutes</option>
<option value="3600">Last 1 hour</option>
</select>
<button id="refresh-all" class="console-button btn"><i class="icon-refresh"></i> Refresh Now</button>
</div>
</td>
</tr>
</table>
<div class="row show-grid">
<div class="span12">
<div class="row show-grid">
<div class="span3">
<table class="table table-bordered table-condensed status-indicator" id="R2R1" data-label="R2R1">
<thead id="R2R1-overall" class="status-indicator-overall">
<tr>
<th colspan="6" id="R2R1-status">R2 &amp; R1</th>
</tr>
</thead>
<tbody>
<tr id="R2R1-status-indicator">
<td id="R2R1-critical" class="status-indicator-count"><b>0</b></td>
<td id="R2R1-major" class="status-indicator-count"><b>0</b></td>
<td id="R2R1-minor" class="status-indicator-count"><b>0</b></td>
<td id="R2R1-warning" class="status-indicator-count"><b>0</b></td>
<td id="R2R1-normal" class="status-indicator-count"><b>0</b></td>
</tr>
</tbody>
</table>
</div>
<div class="span3">
<table class="table table-bordered table-condensed status-indicator" id="Frontend" data-label="Frontend">
<thead id="Frontend-overall" class="status-indicator-overall">
<tr>
<th colspan="6" id="Frontend-status">Frontend</th>
</tr>
</thead>
<tbody>
<tr id="Frontend-status-indicator">
<td id="Frontend-critical" class="status-indicator-count"><b>0</b></td>
<td id="Frontend-major" class="status-indicator-count"><b>0</b></td>
<td id="Frontend-minor" class="status-indicator-count"><b>0</b></td>
<td id="Frontend-warning" class="status-indicator-count"><b>0</b></td>
<td id="Frontend-normal" class="status-indicator-count"><b>0</b></td>
</tr>
</tbody>
</table>
</div>
<div class="span3">
<table class="table table-bordered table-condensed status-indicator" id="Discussion" data-label="Discussion">
<thead id="Discussion-overall" class="status-indicator-overall">
<tr>
<th colspan="6" id="Discussion-status">Discussion</th>
</tr>
</thead>
<tbody>
<tr id="Discussion-status-indicator">
<td id="Discussion-critical" class="status-indicator-count"><b>0</b></td>
<td id="Discussion-major" class="status-indicator-count"><b>0</b></td>
<td id="Discussion-minor" class="status-indicator-count"><b>0</b></td>
<td id="Discussion-warning" class="status-indicator-count"><b>0</b></td>
<td id="Discussion-normal" class="status-indicator-count"><b>0</b></td>
</tr>
</tbody>
</table>
</div>
<div class="span3">
<table class="table table-bordered table-condensed status-indicator" id="Other" data-label="Other">
<thead id="Other-overall" class="status-indicator-overall">
<tr>
<th colspan="6" id="Other-status">Other</th>
</tr>
</thead>
<tbody>
<tr id="Other-status-indicator">
<td id="Other-critical" class="status-indicator-count"><b>0</b></td>
<td id="Other-major" class="status-indicator-count"><b>0</b></td>
<td id="Other-minor" class="status-indicator-count"><b>0</b></td>
<td id="Other-warning" class="status-indicator-count"><b>0</b></td>
<td id="Other-normal" class="status-indicator-count"><b>0</b></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Alert Details -->
<div class="row show-grid">
<div class="span12">
<table cellpadding="0" cellspacing="0" border="0" class="display table table-bordered table-condensed"
id="alerts">
<thead>
<tr>
<th>Severity</th>
<th>Status</th>
<th>Last Receive Time</th>
<th>Dupl. Count</th>
<th>Environment</th>
<th>Service</th>
<th>Resource</th>
<th>Event</th>
<th>Value</th>
<th>Text</th>
<th>Severity Code</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Severity</th>
<th>Status</th>
<th>Last Receive Time</th>
<th>Dupl. Count</th>
<th>Environment</th>
<th>Service</th>
<th>Resource</th>
<th>Event</th>
<th>Value</th>
<th>Text</th>
<th>Severity Code</th>
</tr>
</tfoot>
</table>
</div>
</div>
<!-- end Alert Details -->
</div>
<!-- end container -->
<script>
var CRITICAL_SEV_CODE = 1;
var MAJOR_SEV_CODE = 2;
var MINOR_SEV_CODE = 3;
var WARNING_SEV_CODE = 4;
var INDETER_SEV_CODE = 5;
var CLEARED_SEV_CODE = 5;
var NORMAL_SEV_CODE = 5;
var INFORM_SEV_CODE = 6;
var DEBUG_SEV_CODE = 7;
var AUTH_SEV_CODE = 8;
var UNKNOWN_SEV_CODE = 9;
CRITICAL = 'critical';
MAJOR = 'major';
MINOR = 'minor';
WARNING = 'warning';
INDETERMINATE = 'indeterminate';
CLEARED = 'cleared';
NORMAL = 'normal';
INFORM = 'informational';
DEBUG = 'debug';
AUTH = 'security';
UNKNOWN = 'unknown';
ALL = [CRITICAL, MAJOR, MINOR, WARNING, INDETERMINATE, CLEARED, NORMAL, INFORM, DEBUG, AUTH, UNKNOWN];
var _SEVERITY_MAP = {
'critical': 1,
'major': 2,
'minor': 3,
'warning': 4,
'indeterminate': 5,
'cleared': 5,
'normal': 5,
'informational': 6,
'debug': 7,
'auth': 8,
'unknown': 9
};
var logger = 0,
fromDate = "",
limit = "",
timer;
var oTable;
var envfilter = '&environment=PROD|INFRA|DEV'; // used for status count OPEN,ACK,CLOSED
var asiFilter = '&service=shared'; // default, used for displayed alert details
var sevFilter = '';
function fnFormatDetails(aData) {
var severity = aData[0];
var status = aData[1];
var lastReceiveTime = aData[2];
var duplicateCount = aData[3];
var environment = aData[4];
var service = aData[5];
var cluster = '';
var resource = aData[6];
var event = aData[7];
var value = aData[8];
var text = aData[9];
var severityCode = aData[10];
var alertid = aData[11];
var lastReceiveId = aData[12];
var createTime = aData[13];
var receiveTime = aData[14];
var group = aData[15];
var previousSeverity = aData[16];
var trendIndication = aData[17];
var thresholdInfo = aData[18];
var timeout = aData[19];
var type = aData[20];
var repeat = aData[21];
var summary = aData[22];
var origin = aData[23];
var tags = '';
var moreInfo = aData[25];
var history = aData[26];
$.each(aData[24], function (y, tag) {
tags += '<span class="label">' + tag + '</span> ';
var t = tag.split(':');
if (t[0] == 'cluster') {
cluster = t[1];
}
});
var historydata = '<table class="table table-condensed"><thead><td colspan="2"><b>History </b></td></thead><tbody><tr><td>';
if (history) {
var reverseHistory = history.reverse();
$.each(reverseHistory, function (y, hist) {
if (hist.event) {
historydata += // '<hr/>' +
'<table class="table table-condensed table-striped">' +
'<tr><td><b>Event</b></td><td>' + hist.event + '</td></tr>' +
'<tr><td><b>Severity</b></td><td>' + sev2label(hist.severity) + '</td></tr>' +
'<tr><td><b>Alert ID</b></td><td>' + hist.id + '</td></tr>' +
'<tr><td><b>Create Time</b></td><td>' + hist.createTime + '</td></tr>' +
'<tr><td><b>Receive Time</b></td><td>' + hist.receiveTime + '</td></tr>' +
'<tr><td><b>Text</b></td><td>' + hist.text + '</td></tr>' +
'<tr><td><b>Value</b></td><td>' + hist.value + '</td></tr>' +
'</table>' +
'';
}
if (hist.status) {
historydata += // '<hr/>' +
'<table class="table table-condensed table-striped">' +
'<tr><td><b>Status</b></td><td>' + stat2label(hist.status) + '</td></tr>' +
'<tr><td><b>Update Time</b></td><td>' + hist.updateTime + '</td></tr>' +
'</table>' +
'';
}
});
historydata += '</td></tr></tbody></table>'
}
var sOut = '<table border=1><tbody><tr><td>'; // 1
sOut += '<table class="table table-condensed table-striped">'; // 2
sOut += '<tr class="odd"><td><b>Alert ID</td><td>' + alertid + '</td></tr>';
sOut += '<tr class="even"><td><b>Last Receive Alert ID</b></td><td>' + lastReceiveId + '</td></tr>';
sOut += '<tr class="odd"><td><b>Create Time</b></td><td>' + createTime + '</td></tr>';
sOut += '<tr class="even"><td><b>Receive Time</b></td><td>' + receiveTime + '</td></tr>';
sOut += '<tr class="odd"><td><b>Last Receive Time</b></td><td>' + lastReceiveTime + '</td></tr>';
sOut += '<tr class="even"><td><b>Environment</b></td><td>' + environment + '</td></tr>';
sOut += '<tr class="odd"><td><b>Service</b></td><td>' + service + '</td></tr>';
sOut += '<tr class="even"><td><b>Resource</b></td><td>' + resource + '</td></tr>';
sOut += '<tr class="odd"><td><b>Event</b></td><td>' + event + '</td></tr>';
sOut += '<tr class="even"><td><b>Group</b></td><td>' + group + '</td></tr>';
sOut += '<tr class="odd"><td><b>Severity</b></td><td>' + sev2label(previousSeverity) + ' -> ' + sev2label(severity) + '</td></tr>';
sOut += '<tr class="even"><td><b>Status</b></td><td>' + stat2label(status) + '</td></tr>';
sOut += '<tr class="odd"><td><b>Value</b></td><td>' + value + '</td></tr>';
sOut += '<tr class="even"><td><b>Text</b></td><td>' + text + '</td></tr>';
sOut += '<tr class="odd"><td><b>Trend Indication</b></td><td>' + trendIndication + '</td></tr>';
sOut += '<tr class="even"><td><b>Threshold Info</b></td><td>' + thresholdInfo + '</td></tr>';
sOut += '<tr class="odd"><td><b>Timeout</b></td><td>' + timeout + '</td></tr>';
sOut += '<tr class="even"><td><b>Type</b></td><td>' + type + '</td></tr>';
sOut += '<tr class="odd"><td><b>Repeat</b></td><td>' + repeat + '</td></tr>';
sOut += '<tr class="even"><td><b>Summary</b></td><td>' + summary + '</td></tr>';
sOut += '<tr class="odd"><td><b>Origin</b></td><td>' + origin + '</td></tr>';
sOut += '<tr class="even"><td><b>Tags</b></td><td>' + tags + '</td></tr>';
// TODO(nsatterl): Graphs
sOut += '<tr class="odd"><td><b>More Info</b></td><td>' + moreInfo + '</td></tr>';
sOut += '</table>'; // 2
sOut += '</td><td>'; // 1
sOut += historydata;
sOut += '</td></tr></tbody></table>'; // 1
return sOut;
}
// Alert Status Count for console
function getStatus(statusfilter, refresh) {
$.getJSON('http://' + document.domain + '/alerta/api/v1/alerts?callback=?&hide-alert-details=true&' + statusfilter + limit + fromDate, function (data) {
if (data.response.warning) {
$('#warning-text').text(data.response.warning);
$('#webapp-alert').toggle();
}
$.each(data.response.alerts.statusCounts, function (stat, count) {
$("#count-" + stat).html('<b>' + count + '</b>');
});
if (refresh) {
timer = setTimeout(function () {
getStatus(statusfilter, refresh);
}, 120000);
}
});
}
function loadStatus(statusfilter, refresh) {
setTimeout(function () {
getStatus(statusfilter, refresh);
}, 0);
}
// Alert Severity Counts for each service
var asiFilters = {
'R2R1': '&service=R2|R1',
'Frontend': '&service=Frontend',
'Discussion': '&service=Discussion',
'Other': '&-service=R2|R1|Frontend|Discussion'
};
function getAlerts(service, filter, refresh) {
$('#' + service + ' th').addClass('loader');
$.getJSON('http://' + document.domain + '/alerta/api/v1/alerts?callback=?&sort-by=lastReceiveTime&' + filter + limit + fromDate, function (data) {
var sev_id = '#' + service;
data.response.alerts.severityCounts.normal += data.response.alerts.severityCounts.inform;
$.each(data.response.alerts.severityCounts, function (sev, count) {
sev = sev.toLowerCase();
$(sev_id + "-" + sev).html('<b>' + count + '</b>');
switch (count) {
case 0:
$(sev_id + "-" + sev).removeClass("severity-" + sev).addClass('zero');
break;
default:
$(sev_id + "-" + sev).addClass("severity-" + sev).removeClass('zero');
}
});
if (data.response.alerts.severityCounts.critical > 0) {
scolor = 'red';
} else if (data.response.alerts.severityCounts.major > 0) {
scolor = 'orange';
} else if (data.response.alerts.severityCounts.minor > 0) {
scolor = 'yellow';
} else if (data.response.alerts.severityCounts.warning > 0) {
scolor = 'dodgerblue';
} else {
scolor = '#00CC00';
}
$(sev_id + "-status").css('background-color', scolor);
$('#' + service + ' th').removeClass('loader');
if (refresh) {
timer = setTimeout(function () {
getAlerts(service, filter, refresh);
}, 120000);
}
});
};
function loadAlerts(services, refresh) {
var delayer = 0;
$.each(services, function (service, filter) {
setTimeout(function () {
getAlerts(service, filter, refresh);
}, delayer);
delayer += 100;
});
}
function updateLimit(lim) {
if (lim > 0) {
limit = '&limit=' + lim
} else {
limit = '';
}
$('#refresh-all').trigger('click');
}
function updateFromDate(seconds) {
if (seconds > 0) {
fromDate = '&from-date=' + new Date(new Date() - seconds * 1000).toISOString();
} else {
fromDate = '';
}
$('#refresh-all').trigger('click');
}
$('.status-indicator-overall').click(function () {
asiFilter = asiFilters[this.id.split('-')[0]];
sevFilter = '';
worker();
});
$('.status-indicator-count').click(function () {
asiFilter = asiFilters[this.id.split('-')[0]];
sevFilter = '&severity=' + this.id.split('-')[1];
worker();
});
function worker() {
$.ajax({
"dataType": 'json',
"type": "GET",
"url": 'http://' + document.domain + '/alerta/api/v1/alerts?callback=?&sort-by=lastReceiveTime'
+ '&environment=PROD|DEV|INFRA'
+ asiFilter + limit + fromDate + sevFilter,
// "async": false,
"async": true,
"success": function (data) {
$('#alerts').dataTable().fnClearTable();
$.each(data.response.alerts.alertDetails, function (i, ad) {
$('#alerts').dataTable().fnAddData([
ad.severity, // 0
ad.status,
ad.lastReceiveTime,
ad.duplicateCount,
ad.environment,
ad.service,
// TODO(nsatterl): cluster
ad.resource,
ad.event,
ad.value,
ad.text, // 9
_SEVERITY_MAP[ad.severity], // severityCode to enable sorting on severity
ad.id, // 11
ad.lastReceiveId,
ad.createTime,
ad.receiveTime,
ad.group,
ad.previousSeverity,
ad.trendIndication,
ad.thresholdInfo,
ad.timeout,
ad.type,
ad.repeat,
ad.summary,
ad.origin,
ad.tags,
ad.moreInfo,
ad.history
]);
});
},
complete: function () {
oTable.fnDraw(false);
setTimeout(worker, 30 * 1000); // 30 seconds
}
});
};
function sev2label(severity) {
var label;
switch (severity) {
case CRITICAL:
label = 'label-important';
break;
case MAJOR:
label = 'label-warning';
break;
case MINOR:
label = 'label-minor';
break;
case WARNING:
label = 'label-info';
break;
case DEBUG:
label = 'label-inverse';
break;
case UNKNOWN:
label = '';
break;
default:
label = 'label-success';
}
severity = severity.charAt(0).toUpperCase() + severity.slice(1).toLowerCase();
return('<span class="label ' + label + '">' + severity + '</span>');
}
OPEN = 'open';
ACK = 'ack';
CLOSED = 'closed';
EXPIRED = 'expired';
UNKNOWN = 'unknown';
ALL = [OPEN, ACK, CLOSED, EXPIRED, UNKNOWN];
function stat2label(status) {
var label;
switch (status) {
case OPEN:
label = 'label-open';
break;
case ACK:
label = 'label-ack';
break;
case CLOSED:
label = 'label-closed';
break;
case EXPIRED:
label = 'label-expired';
break;
case UNKNOWN:
label = 'label-unknown';
break;
default:
label = '';
}
status = status.charAt(0).toUpperCase() + status.slice(1).toLowerCase();
return('<span class="label ' + label + '">' + status + '</span>');
}
$(document).ready(function () {
loadStatus(envfilter, true);
loadAlerts(asiFilters, true);
worker();
$('#refresh-all').click(function() {
loadStatus(envfilter, false);
loadAlerts(asiFilters, false);
});
var ti;
// var anOpen = [];
oTable = $('#alerts').dataTable({
"bDestroy": true,
"bUseRendered": false,
"bSort": true,
"bPaginate": true,
"bDeferRender": true,
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
nRow.className = 'severity-' + aData[0] + ' status-' + aData[1];
if (aData[17] == "noChange") {
ti = '<i class="icon-minus"></i>&nbsp;'
} else if (aData[17] == "moreSevere") {
ti = '<i class="icon-arrow-up"></i>&nbsp;'
} else if (aData[17] == "lessSevere") {
ti = '<i class="icon-arrow-down"></i>&nbsp;'
} else {
ti = '<i class="icon-random"></i>&nbsp;'
}
$('td:eq(0)', nRow).html(ti + sev2label(aData[0]));
$('td:eq(1)', nRow).html(stat2label(aData[1]));
var d = new Date(aData[2]);
$('td:eq(2)', nRow).html(d.toLocaleString());
},
"aoColumns": [
{ "sWidth": "5%", "iDataSort": 10, "sClass": "align-center" },
{ "sWidth": "5%", "sClass": "align-center" },
{ "sWidth": "10%", "sType": "date", "sClass": "align-center" },
{ "sWidth": "5%", "sClass": "align-center" },
{ "sWidth": "5%", "sClass": "align-center" },
{ "sWidth": "5%", "sClass": "align-center" },
{ "sWidth": "10%", "sClass": "align-center" },
{ "sWidth": "10%", "sClass": "align-center" },
{ "sWidth": "10%", "sClass": "align-center" },
{ "sWidth": "35%" },
{ "bVisible": false }
],
"aaSorting": [
[2, 'desc']
],
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
});
$('#alerts tbody tr').live('click', function () {
var nTr = this;
// var i = $.inArray( nTr, anOpen );
if (oTable.fnIsOpen(nTr)) {
/* This row is already open - close it */
// this.src = "../examples_support/details_open.png";
oTable.fnClose(nTr);
}
else {
/* Open this row */
// this.src = "../examples_support/details_close.png";
oTable.fnOpen(nTr, fnFormatDetails(oTable.fnGetData(nTr)), 'details');
}
});
});
</script>
</body>
</html>