147 lines
5.1 KiB
HTML
147 lines
5.1 KiB
HTML
<%frame "frame.html"%>
|
|
|
|
<h1>Aktuelle Störfälle</h1>
|
|
<span id="nCRITICAL" class="CRITICAL"></span>
|
|
<span id="nWARN" class="WARN"></span><br/>
|
|
<br/>
|
|
<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>
|
|
<br/>
|
|
|
|
<div class="flex column">
|
|
<div id="CRITICAL"></div>
|
|
<div id="WARN"></div>
|
|
<div id="FAIL"></div>
|
|
<div id="ERROR"></div>
|
|
</div>
|
|
|
|
<div style="visibility: hidden;">
|
|
<div id="nodetemplate" class="issue-box" style="margin-bottom: 16px;">
|
|
<h2 id="title"></h2>
|
|
<div>
|
|
Last Check: <span id="LastCheckTime"></span><br>
|
|
Current State for: <span id="UnchangedTime"></span><br>
|
|
</div>
|
|
<div id="PerfValues">
|
|
</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>
|
|
|
|
<script type="text/javascript">
|
|
moment.defaultFormat = "DD.MM.YYYY HH:mm";
|
|
|
|
var issues = {}
|
|
|
|
function updateIssue(issue)
|
|
{
|
|
var ne = $("#" + issue.ID );
|
|
if (!ne.length)
|
|
ne = $("#nodetemplate").clone().attr("id",issue.ID);
|
|
|
|
ne.appendTo($("#" + issue.CheckState));
|
|
ne.addClass("issue-" + issue.CheckState );
|
|
|
|
$("h2", ne).text(issue.CheckName + ": " + issue.Node.Name + " ( " + issue.Node.UniqueIdentity + " )");
|
|
$("#LastCheckTime", ne).text(issue.LastCheckTime);
|
|
$("#UnchangedTime", ne).text(issue.UnchangedTime);
|
|
|
|
$.each( issue.PerformanceValues, function(){
|
|
var pv = $("#" + this.PerfName.replace(/\//g,"-"));
|
|
if (!pv.length)
|
|
pv = $("#pvtemplate").clone().attr("id", this.PerfName.replace(/\//g,"-"));
|
|
|
|
$("#PerfName", pv).text(this.PerfName);
|
|
$("#CheckState", pv).text(this.CheckState).addClass(this.CheckState);
|
|
|
|
pv.appendTo($("#PerfValues", ne));
|
|
|
|
var chartColor = this.CheckState == "CRITICAL" ? '#FF0000' : (this.CheckState == "WARN") ? '#FFFF00' : '#000000';
|
|
var chart = new Chart( $("#chart", pv), {
|
|
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
|
|
}
|
|
} );
|
|
|
|
var perfName = this.PerfName;
|
|
|
|
skyapi().getJson("api/checker/checks/" + encodeURIComponent(perfName) + "?interval=" + $("#interval").children("option:selected").val(), function(perfValues){
|
|
chart.data.labels.length = 0;
|
|
chart.data.datasets[0].data.length = 0;
|
|
chart.data.datasets[0].label = perfName;
|
|
|
|
$.each( perfValues, function(){
|
|
if (this.TimeStamp != 0)
|
|
chart.data.datasets[0].data.push( { x: this.TimeStamp, y: this.Value } );
|
|
});
|
|
|
|
chart.update();
|
|
|
|
})
|
|
});
|
|
|
|
}
|
|
|
|
function updateIssueList(issueList)
|
|
{
|
|
$.each( issueList , function(){
|
|
updateIssue(this);
|
|
});
|
|
|
|
$("#nCRITICAL").text( $("#CRITICAL > div").length );
|
|
$("#nWARN").text( $("#WARN > div").length );
|
|
|
|
}
|
|
|
|
skyapi().getJson("/checker/Issues", updateIssueList );
|
|
|
|
function refresh()
|
|
{
|
|
skyapi().getJson("/checker/Issues", updateIssueList );
|
|
}
|
|
</script>
|