UI Update
parent
65c0652a6a
commit
42bfdeb728
|
@ -175,7 +175,13 @@
|
||||||
var m2 = issue.History.length > 1 ? moment(issue.History.slice(-2)[0].Timestamp) : moment();
|
var m2 = issue.History.length > 1 ? moment(issue.History.slice(-2)[0].Timestamp) : moment();
|
||||||
|
|
||||||
$($("td", currentIssue.html).get(0))
|
$($("td", currentIssue.html).get(0))
|
||||||
.text(currentIssue.issue.Node.Name + " [ "+ currentIssue.issue.Node.UniqueIdentity +" ]");
|
.empty()
|
||||||
|
.append(
|
||||||
|
$("<a></a>")
|
||||||
|
.text(currentIssue.issue.Node.Name + " [ "+ currentIssue.issue.Node.UniqueIdentity +" ]")
|
||||||
|
.attr("href","/static/checks/node.html#" + currentIssue.issue.Node.ID)
|
||||||
|
.attr("target","_blank")
|
||||||
|
);
|
||||||
$($("td", currentIssue.html).get(1))
|
$($("td", currentIssue.html).get(1))
|
||||||
.text(currentIssue.issue.Node.Comment);
|
.text(currentIssue.issue.Node.Comment);
|
||||||
$($("td", currentIssue.html).get(2))
|
$($("td", currentIssue.html).get(2))
|
||||||
|
|
|
@ -0,0 +1,226 @@
|
||||||
|
<%frame "frame.html"%>
|
||||||
|
|
||||||
|
<h1>Knoten <span id="nodeName"></span> (<span id="lastUpdate"></span>)</h1>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Graphen Intervall:
|
||||||
|
<select id="interval" style="width: 180px;" onchange="updateGraphs();">
|
||||||
|
<option value="3600">1 Stunde</option>
|
||||||
|
<option value="21600">6 Stunden</option>
|
||||||
|
<option value="43200" selected>12 Stunden</option>
|
||||||
|
<option value="86400">1 Tag</option>
|
||||||
|
<option value="604800">1 Woche</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="flex row wrap">
|
||||||
|
<div>
|
||||||
|
<table id="checkStates">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<td>Check</td>
|
||||||
|
<td>Zeit in aktuellem Status</td>
|
||||||
|
<td>Verlauf</td>
|
||||||
|
<td>Messwerte</td>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="graphs" class="fill">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
moment.defaultFormat = "DD.MM.YYYY HH:mm:ss";
|
||||||
|
|
||||||
|
|
||||||
|
var myNodeID = window.location.hash.slice(1);
|
||||||
|
|
||||||
|
skyapi().getJson("/collections/Node/" + myNodeID, function(node){
|
||||||
|
$("#nodeName").text(node.Name);
|
||||||
|
$("#lastUpdate").text(node.LastUpdate);
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
skyapi().getJson("/checker/CheckStatesByHostID?nodeID=" + myNodeID,function(checkStates){
|
||||||
|
|
||||||
|
$("#checkStates > tbody").empty();
|
||||||
|
|
||||||
|
checkStates.forEach(function(v,i){
|
||||||
|
|
||||||
|
var tdHist = $("<td></td>")
|
||||||
|
.append(
|
||||||
|
$("<div style='max-height: 48px; overflow-y: scroll;'></div>")
|
||||||
|
)
|
||||||
|
.addClass("align-right");
|
||||||
|
var iHistory = v.History.slice(0);
|
||||||
|
iHistory.reverse();
|
||||||
|
|
||||||
|
iHistory.forEach(function(v,i){
|
||||||
|
$("div", tdHist).append(
|
||||||
|
v.NewState + ": " + v.Timestamp + "<br>"
|
||||||
|
);
|
||||||
|
},this);
|
||||||
|
|
||||||
|
var tdPerfValues = $("<td></td>");
|
||||||
|
v.PerformanceValues.forEach(function(pv,i){
|
||||||
|
tdPerfValues.append(
|
||||||
|
$("<a></a>")
|
||||||
|
.text(pv.PerfName)
|
||||||
|
.addClass("issue-" + pv.CheckState)
|
||||||
|
.append("<br>")
|
||||||
|
.click(function(ev){
|
||||||
|
loadGraph(pv);
|
||||||
|
ev.preventDefault();
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},this);
|
||||||
|
|
||||||
|
$("<tr></tr>")
|
||||||
|
.appendTo($("#checkStates > tbody"))
|
||||||
|
.append(
|
||||||
|
$("<td></td>")
|
||||||
|
.text(v.CheckName)
|
||||||
|
)
|
||||||
|
.append(
|
||||||
|
$("<td></td>")
|
||||||
|
.text(v.UnchangedTime)
|
||||||
|
)
|
||||||
|
.append(
|
||||||
|
tdHist
|
||||||
|
)
|
||||||
|
.append(
|
||||||
|
tdPerfValues
|
||||||
|
)
|
||||||
|
},this);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
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(graphDiv, performanceValue, perfData)
|
||||||
|
{
|
||||||
|
var chartColor = performanceValue.CheckState == "CRITICAL" ? '#FF0000' : (performanceValue.CheckState == "WARN") ? '#C0C000' : '#000000';
|
||||||
|
var htmlChart = $("canvas", graphDiv);
|
||||||
|
|
||||||
|
var chart = new 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 } );
|
||||||
|
});
|
||||||
|
graphDiv.prependTo( $("#graphs") );
|
||||||
|
chart.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadGraph(performanceValue){
|
||||||
|
var graphName = performanceValue.PerfName;
|
||||||
|
var perfID = encodeID(graphName);
|
||||||
|
var graphDiv = $("#graphs").children("#" + perfID);
|
||||||
|
|
||||||
|
if (!graphDiv.length){
|
||||||
|
graphDiv = $("<div style='position: relative; height: 300px; min-width: 400px;'></div>")
|
||||||
|
.attr("id", perfID)
|
||||||
|
.data("performanceValue",performanceValue)
|
||||||
|
.append("<canvas></canvas");
|
||||||
|
}
|
||||||
|
|
||||||
|
skyapi().getJson("api/checker/checks/" + encodeURIComponent(graphName) + "?interval=" + $("#interval").children("option:selected").val(), function(perfData){
|
||||||
|
graphLoaded(graphDiv, performanceValue, perfData);
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateGraphs(){
|
||||||
|
var timeout = 0;
|
||||||
|
var gDivs = [];
|
||||||
|
$("#graphs").children("div").each(function(n,graphDiv){
|
||||||
|
gDivs.push(graphDiv);
|
||||||
|
});
|
||||||
|
gDivs.reverse();
|
||||||
|
gDivs.forEach(function(graphDiv,i){
|
||||||
|
var performanceValue = $(graphDiv).data("performanceValue");
|
||||||
|
setTimeout(function(){
|
||||||
|
loadGraph(performanceValue);
|
||||||
|
}, timeout);
|
||||||
|
timeout += 200;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
|
@ -11,7 +11,6 @@
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div {
|
div {
|
||||||
|
@ -33,10 +32,6 @@ h1,h2,h3,h4,h5,h6 {
|
||||||
padding:2px;
|
padding:2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
|
||||||
width: 98%;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 > div {
|
h1 > div {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
@ -55,16 +50,47 @@ a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*!
|
table {
|
||||||
button {
|
border-collapse: collapse;
|
||||||
border: 1px solid black;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 6px;
|
|
||||||
|
|
||||||
width: 140px;
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
}
|
||||||
*/
|
|
||||||
|
table > thead {
|
||||||
|
font-style: italic;
|
||||||
|
background-color: #A0D0FF;
|
||||||
|
transition: background-color 1000ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
table > tbody {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
table td {
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
padding: 4px;
|
||||||
|
padding-left: 8px;
|
||||||
|
padding-right: 8px;
|
||||||
|
|
||||||
|
margin: 0px;
|
||||||
|
|
||||||
|
border-bottom: 1px solid #A0D0FF;
|
||||||
|
}
|
||||||
|
table td:first-child {
|
||||||
|
border-left: 1px solid #A0D0FF;
|
||||||
|
}
|
||||||
|
table td:last-child {
|
||||||
|
border-right: 1px solid #A0D0FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
table > tbody tr {
|
||||||
|
transition: background-color 250ms;
|
||||||
|
}
|
||||||
|
table > tbody tr:hover {
|
||||||
|
background-color: #D0FFFF;
|
||||||
|
color: black;
|
||||||
|
transition: background-color 250ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
top: 0px;
|
top: 0px;
|
||||||
|
@ -142,6 +168,10 @@ button {
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.align-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
.fill {
|
.fill {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
|
@ -157,6 +187,10 @@ button {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wrap {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
.flex.row {
|
.flex.row {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
@ -378,7 +412,7 @@ fieldset > label {
|
||||||
|
|
||||||
.issue-OK {
|
.issue-OK {
|
||||||
border-color: white;
|
border-color: white;
|
||||||
background-color: white;
|
background-color: inherit;
|
||||||
color: green;
|
color: green;
|
||||||
}
|
}
|
||||||
.issue-WARN {
|
.issue-WARN {
|
||||||
|
|
Loading…
Reference in New Issue