ln.skyscanner/templates/static/checks/node.html

<%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 = htmlChart.data("chart");
        
        if (!chart){
            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;
        
        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>