110 lines
3.4 KiB
HTML
110 lines
3.4 KiB
HTML
<%frame "frame.html"%>
|
|
|
|
<h1>Checks</h1>
|
|
|
|
<div class="flex row">
|
|
<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><br/>
|
|
<br/>
|
|
<input type="text" id="filter"><br/>
|
|
<br/>
|
|
<select size="25" id="perfList"></select>
|
|
</div>
|
|
<div>
|
|
<canvas id="perfChart" width="1000" height="500"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
moment.defaultFormat = "DD.MM.YYYY HH:mm";
|
|
//Chart.defaults.global.defaultColor = 'rgba(0.1,0.1,1.0,1.0)';
|
|
|
|
var chartCTX = $("#perfChart");
|
|
var chart = new Chart( chartCTX, {
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{
|
|
label: "-",
|
|
data: [],
|
|
backgroundColor: '#04E000',
|
|
}
|
|
]
|
|
},
|
|
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
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
} );
|
|
|
|
var perfList = [];
|
|
|
|
skyapi().getJson("api/checker/checks", function(checks){
|
|
perfList = checks;
|
|
applyFilter();
|
|
});
|
|
|
|
function showGraph()
|
|
{
|
|
var perfName = $("#perfList").children("option:selected").val();
|
|
if (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 applyFilter()
|
|
{
|
|
var pat = $("#filter").val();
|
|
|
|
$("#perfList").empty();
|
|
$.each( perfList, function(){
|
|
if (this.includes(pat))
|
|
$("#perfList").append( $( "<option value='"+ this +"'>" + this + "</option>" ) );
|
|
});
|
|
}
|
|
|
|
$("#perfList").change( function(e){ showGraph(); } );
|
|
$("#interval").change( function(e){ showGraph(); } );
|
|
$("#filter").on( "input", function(e){ applyFilter(); } );
|
|
|
|
skyapi().addRefresh( showGraph, 60 );
|
|
</script>
|