Add tabular issue list to UI
Harald Wolff
parent
323090b7b7
commit
08b9080962
|
|
@ -0,0 +1,323 @@
|
|||
<%frame "frame.html"%>
|
||||
|
||||
<h1>Aktuelle Störfälle (<span id="lastUpdate"></span>)</h1>
|
||||
<div style="background-color: #404040; color: white;">
|
||||
Kritisch: <span id="nCRITICAL" class="CRITICAL"></span>
|
||||
Warnungen: <span id="nWARN" class="WARN"></span><br/>
|
||||
</div>
|
||||
|
||||
<table id="issues">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Knoten</td>
|
||||
<td>Anmerkungen</td>
|
||||
<td>Check</td>
|
||||
<td>Zeit in aktuellem Status ( / im letzten Status)</td>
|
||||
<td>Relevante Messwerte</td>
|
||||
<td>Weboberfläche</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script type="text/javascript">
|
||||
moment.defaultFormat = "DD.MM.YYYY HH:mm:ss";
|
||||
|
||||
var currentUpdateCycle = 0;
|
||||
var issues = {}
|
||||
var charts = []
|
||||
var chartTimeout = null;
|
||||
|
||||
function ntos(n,l){
|
||||
n = n.toString();
|
||||
while (n.length < l){
|
||||
n = "0" + n;
|
||||
}
|
||||
return n;
|
||||
}
|
||||
|
||||
function timespan(value){
|
||||
var days, hours, minutes, seconds;
|
||||
value = parseInt(value);
|
||||
|
||||
days = parseInt(value / 86400);
|
||||
value %= 86400;
|
||||
hours = parseInt(value / 3600);
|
||||
value %= 3600;
|
||||
minutes = parseInt(value / 60);
|
||||
value %= 60;
|
||||
seconds = parseInt(value);
|
||||
|
||||
var r = "";
|
||||
if (days > 0)
|
||||
r += `${days}d `;
|
||||
r += `${ntos(hours,2)}:${ntos(minutes,2)}:${ntos(seconds,2)}`;
|
||||
|
||||
return r;
|
||||
}
|
||||
|
||||
function graphLoaded(performanceValue, perfData)
|
||||
{
|
||||
var chartColor = performanceValue.CheckState == "CRITICAL" ? '#FF0000' : (performanceValue.CheckState == "WARN") ? '#C0C000' : '#000000';
|
||||
var perfID = encodeID(performanceValue.PerfName);
|
||||
var htmlChart = $("#" + perfID );
|
||||
if (!htmlChart.length)
|
||||
htmlChart = $("#ChartBoxTemplate").clone().attr("id", perfID ).appendTo( $("#Charts") );
|
||||
|
||||
var chart = new Chart( $("#chart", htmlChart) , {
|
||||
type: 'bar',
|
||||
data: {
|
||||
datasets: [
|
||||
{
|
||||
label: "-",
|
||||
data: [],
|
||||
backgroundColor: chartColor,
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
ticks: {
|
||||
callback: ScaleSI,
|
||||
beginAtZero: true,
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxes: [{
|
||||
type: 'time',
|
||||
time: {
|
||||
unit: "minute",
|
||||
tooltipFormat: "DD.MM.YYYY HH:mm",
|
||||
displayFormats: {
|
||||
minute: "DD.MM.YYYY HH:mm"
|
||||
},
|
||||
parser: moment.unix
|
||||
}
|
||||
}]
|
||||
},
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
} );
|
||||
|
||||
chart.data.labels.length = 0;
|
||||
chart.data.datasets[0].data.length = 0;
|
||||
chart.data.datasets[0].label = performanceValue.PerfName;
|
||||
|
||||
$("#chart", htmlChart).data("chart", chart);
|
||||
|
||||
$.each( perfData, function(){
|
||||
if (this.TimeStamp != 0)
|
||||
chart.data.datasets[0].data.push( { x: this.TimeStamp, y: this.Value } );
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
|
||||
function showCharts(issue)
|
||||
{
|
||||
var htmlCharts = $("#Charts");
|
||||
|
||||
$("canvas", htmlCharts).each(function(i,e){
|
||||
var htmlCanvas = $(e);
|
||||
htmlCanvas.data("chart").destroy();
|
||||
htmlCanvas.data("chart",null);
|
||||
});
|
||||
|
||||
htmlCharts.empty();
|
||||
|
||||
$.each( issue.PerformanceValues, function(){
|
||||
var currentIssue = this;
|
||||
skyapi().getJson("api/checker/checks/" + encodeURIComponent(this.PerfName) + "?interval=" + $("#interval").children("option:selected").val(), function(perfData){
|
||||
graphLoaded(currentIssue, perfData);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function updateIssue(issue)
|
||||
{
|
||||
var IID = issue.ID;
|
||||
var currentIssue = null;
|
||||
if (issues[IID])
|
||||
{
|
||||
currentIssue = issues[IID];
|
||||
} else {
|
||||
currentIssue = {};
|
||||
issues[IID] = currentIssue;
|
||||
}
|
||||
|
||||
currentIssue.issue = issue;
|
||||
currentIssue.updateCyle = currentUpdateCycle;
|
||||
|
||||
if (!currentIssue.html)
|
||||
{
|
||||
currentIssue.html = $("<tr></tr>");
|
||||
|
||||
for (var i=0;i<6;i++){
|
||||
$("<td></td>")
|
||||
.appendTo(currentIssue.html);
|
||||
}
|
||||
|
||||
currentIssue.html.data("issue", currentIssue);
|
||||
currentIssue.html.appendTo($("#issues > tbody"));
|
||||
}
|
||||
|
||||
currentIssue.html.removeClass("issue-WARN issue-CRITICAL");
|
||||
currentIssue.html.addClass("issue-" + issue.CheckState );
|
||||
|
||||
var now = moment();
|
||||
var m1 = moment(issue.History.slice(-1)[0].Timestamp);
|
||||
var m2 = moment(issue.History.slice(-2)[0].Timestamp);
|
||||
|
||||
$($("td", currentIssue.html).get(0))
|
||||
.text(currentIssue.issue.Node.Name + " [ "+ currentIssue.issue.Node.UniqueIdentity +" ]");
|
||||
$($("td", currentIssue.html).get(1))
|
||||
.text(currentIssue.issue.Node.Comment);
|
||||
$($("td", currentIssue.html).get(2))
|
||||
.text(currentIssue.issue.CheckName);
|
||||
$($("td", currentIssue.html).get(3))
|
||||
.text( timespan((now - m1)/1000) + " ( " +issue.History.slice(-2)[0].NewState + "=" + timespan((m1 - m2)/1000) + " )");
|
||||
|
||||
$($("td", currentIssue.html).get(4)).empty();
|
||||
$.each( currentIssue.issue.PerformanceValues, function(){
|
||||
if (this.CheckState != "OK")
|
||||
{
|
||||
$($("td", currentIssue.html).get(4))
|
||||
.append(
|
||||
this.PerfName + "<br>"
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
$($("td", currentIssue.html).get(5))
|
||||
.empty();
|
||||
|
||||
currentIssue.issue.Node.URIs.forEach(function(e,i){
|
||||
if (e.Scheme == "http"){
|
||||
var url = "http://" + e.Host + ":" + e.Port;
|
||||
$($("td", currentIssue.html).get(5))
|
||||
.append(
|
||||
$("<a target=_blank></a>")
|
||||
.attr("href",url)
|
||||
.text(url)
|
||||
);
|
||||
}
|
||||
}, this);
|
||||
|
||||
|
||||
/* $("h2", ne).text( issue.Node.DeviceType + " " + issue.CheckName + ": " + issue.Node.Name + " ( " + issue.Node.UniqueIdentity + " )").on("click", function(e){
|
||||
showCharts($(this).parent().data("MyIssue"));
|
||||
});
|
||||
$("#LastCheckTime", ne).text(issue.LastCheckTime);
|
||||
$("#UnchangedTime", ne).text(issue.UnchangedTime);
|
||||
$("#Comment", ne).text(issue.Node.Comment);
|
||||
|
||||
var awebui = $("#webui", ne);
|
||||
awebui.hide();
|
||||
|
||||
issue.Node.URIs.forEach(function(e,i){
|
||||
if (e.Scheme == "http"){
|
||||
awebui.show();
|
||||
awebui.attr("href", "http://" + e.Host + ":" + e.Port);
|
||||
}
|
||||
}, this);
|
||||
|
||||
var histParent = $("#History", ne);
|
||||
histParent.empty();
|
||||
|
||||
var lastHistTime = moment();
|
||||
|
||||
$.each( issue.History.slice().reverse(), function(){
|
||||
var m = moment(this.Timestamp);
|
||||
var d = lastHistTime == null ? "" : lastHistTime.diff(m, 'minutes');
|
||||
lastHistTime = m;
|
||||
|
||||
$("<span class='" + this.NewState + "'>" + m.format() + " [ " + d + "min ]</span><br>").appendTo( histParent );
|
||||
});
|
||||
|
||||
var pvparent = $("#PerfValues", ne);
|
||||
pvparent.empty();
|
||||
|
||||
$.each( issue.PerformanceValues, function(){
|
||||
pvparent.append( $("<span class='" + this.CheckState + "'>" + this.PerfName + "</span><br>") );
|
||||
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
function loadNextChart()
|
||||
{
|
||||
if (charts.length == 0)
|
||||
{
|
||||
clearTimeout(chartTimeout);
|
||||
chartTimeout = null;
|
||||
} else {
|
||||
if (chartTimeout == null)
|
||||
{
|
||||
chartTimeout = setTimeout( loadNextChart, 100 );
|
||||
}
|
||||
|
||||
next = charts.shift();
|
||||
|
||||
skyapi().getJson("api/checker/checks/" + encodeURIComponent(next.performanceValue.PerfName) + "?interval=" + $("#interval").children("option:selected").val(), function(perfData){
|
||||
graphLoaded(next.pv, next.performanceValue, perfData);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function updateIssueList(issueList)
|
||||
{
|
||||
currentUpdateCycle++;
|
||||
|
||||
$.each( issueList , function(){
|
||||
// if (this.Node.DeviceType != "UNKNOWN")
|
||||
updateIssue(this);
|
||||
});
|
||||
|
||||
$.each( $("#issues > tbody > tr"), function(){
|
||||
var currentIssue = $(this).data("issue");
|
||||
if (currentIssue.updateCyle != currentUpdateCycle)
|
||||
{
|
||||
delete issues[currentIssue.issue.ID];
|
||||
currentIssue.html.detach();
|
||||
}
|
||||
});
|
||||
|
||||
var rows = $("#issues > tbody > tr");
|
||||
var sortList = Array.prototype.sort.bind(rows);
|
||||
|
||||
sortList(function(a,b){
|
||||
var aissue = $(a).data("issue");
|
||||
var bissue = $(b).data("issue");
|
||||
|
||||
var ta = moment(aissue.issue.History.slice(-1)[0].Timestamp);
|
||||
var tb = moment(bissue.issue.History.slice(-1)[0].Timestamp);
|
||||
|
||||
if (ta < tb)
|
||||
return -1;
|
||||
else if (ta > tb)
|
||||
return 1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
$("#issues > tbody").append(rows);
|
||||
|
||||
$("#nCRITICAL").text( $("#issues > tbody > .issue-CRITICAL").length );
|
||||
$("#nWARN").text( $("#issues > tbody > .issue-WARN").length );
|
||||
$("#lastUpdate").text( moment().format() );
|
||||
}
|
||||
|
||||
skyapi().getJson("/checker/Issues", updateIssueList );
|
||||
|
||||
function refresh()
|
||||
{
|
||||
skyapi().getJson("/checker/Issues", updateIssueList );
|
||||
}
|
||||
|
||||
skyapi().addRefresh( refresh, 15 );
|
||||
|
||||
</script>
|
||||
|
|
@ -1,8 +1,11 @@
|
|||
<div class="popup">Netz Status
|
||||
<div>
|
||||
<div>
|
||||
<a href="/static/checks/issues.html"><div>Störfälle</div></a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/static/checks/issues2.html"><div>Störfälle (tabellarisch)</div></a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/static/checks/issues.html"><div>Störfälle (detailiert)</div></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue