280 lines
9.1 KiB
HTML
280 lines
9.1 KiB
HTML
<%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>
|
|
|
|
<div>
|
|
<select id="interval" style="width: 180px;">
|
|
<option value="3600">1 Stunde</option>
|
|
<option value="21600">6 Stunden</option>
|
|
<option value="43200">12 Stunden</option>
|
|
<option value="86400">1 Tag</option>
|
|
<option value="604800">1 Woche</option>
|
|
</select>
|
|
<button onclick="refresh();">Aktualisieren</button>
|
|
</div>
|
|
|
|
<div class="fill flex row">
|
|
<div style="position: relative; width: 1000px;">
|
|
<div id="issue-frame" class="scroll">
|
|
<div id="CRITICAL"></div>
|
|
<div id="WARN"></div>
|
|
<div id="FAIL"></div>
|
|
<div id="ERROR"></div>
|
|
</div>
|
|
</div>
|
|
<div id="Charts" class="scroll" style="min-width: 50%; position: inherit;"> </div>
|
|
</div>
|
|
|
|
|
|
<div style="visibility:hidden; display:none;">
|
|
<div id="nodetemplate" class="issue-box" style="margin-bottom: 16px;">
|
|
<h2 id="title"></h2>
|
|
|
|
<a id="webui" href="" target="_blank" rel="noopener">[ WebUI ]</a>
|
|
<div class="flex row">
|
|
<div class="fill">
|
|
Last Check: <span id="LastCheckTime"></span><br>
|
|
Current State for: <span id="UnchangedTime"></span><br>
|
|
<br>
|
|
<span id="Comment"></span>
|
|
</div>
|
|
<div id="History">
|
|
</div>
|
|
<div id="PerfValues" class="fill">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="pvtemplate" class="performance-value flex">
|
|
<div>
|
|
<span id="CheckState"></span><br>
|
|
<span id="PerfName"></span><br>
|
|
</div>
|
|
<div id="chartBox" class="fill"><canvas id="chart"></canvas></div>
|
|
</div>
|
|
<div id="ChartBoxTemplate" class="fill"><canvas id="chart"></canvas></div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
moment.defaultFormat = "DD.MM.YYYY HH:mm:ss";
|
|
|
|
var currentUpdateCycle = 0;
|
|
var issues = {}
|
|
var charts = []
|
|
var chartTimeout = null;
|
|
|
|
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 ne = $("#" + issue.ID );
|
|
if (!ne.length)
|
|
ne = $("#nodetemplate").clone().attr("id",issue.ID);
|
|
|
|
var p = $("#" + issue.CheckState);
|
|
if (!p.is(ne.parent()))
|
|
{
|
|
ne.detach();
|
|
ne.appendTo(p);
|
|
}
|
|
|
|
ne.data( "MyIssue", issue );
|
|
ne.attr( "CurrentUpdateCycle", currentUpdateCycle );
|
|
ne.removeClass("issue-WARN issue-CRITICAL");
|
|
ne.addClass("issue-" + issue.CheckState );
|
|
|
|
$("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( $("div#CRITICAL > div"), function(){
|
|
var c = $(this);
|
|
var cuc = $(this).attr("CurrentUpdateCycle");
|
|
if ($(this).attr("CurrentUpdateCycle") != currentUpdateCycle){
|
|
$(this).detach();
|
|
}
|
|
});
|
|
$.each( $("div#WARN > div"), function(){
|
|
var c = $(this);
|
|
var cuc = $(this).attr("CurrentUpdateCycle");
|
|
if ($(this).attr("CurrentUpdateCycle") != currentUpdateCycle){
|
|
$(this).detach();
|
|
}
|
|
});
|
|
$.each( $("div#FAIL > div"), function(){
|
|
var c = $(this);
|
|
var cuc = $(this).attr("CurrentUpdateCycle");
|
|
if ($(this).attr("CurrentUpdateCycle") != currentUpdateCycle){
|
|
$(this).detach();
|
|
}
|
|
});
|
|
$.each( $("div#ERROR > div"), function(){
|
|
var c = $(this);
|
|
var cuc = $(this).attr("CurrentUpdateCycle");
|
|
if ($(this).attr("CurrentUpdateCycle") != currentUpdateCycle){
|
|
$(this).detach();
|
|
}
|
|
});
|
|
|
|
$("#nCRITICAL").text( $("#CRITICAL > div").length );
|
|
$("#nWARN").text( $("#WARN > div").length );
|
|
$("#lastUpdate").text( moment().format() );
|
|
}
|
|
|
|
skyapi().getJson("/checker/Issues", updateIssueList );
|
|
|
|
function refresh()
|
|
{
|
|
skyapi().getJson("/checker/Issues", updateIssueList );
|
|
}
|
|
|
|
skyapi().addRefresh( refresh, 15 );
|
|
|
|
</script>
|