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

<%frame "frame.html"%>

<h1>Knoten <span id="nodeName"></span> (<span id="comment"></span>)</h1>
<div class="flex row wrap">
    <div class="grow">
        Current State: <span id="currentState"></span><br>
        Sender: <span id="sender"></span><br>
    </div>
    <div class="grow">
        <a href="" class="protolink">
            <div>HTTP:</div>
        </a>
        <a href="" class="protolink">
            <div>SSH:</div>
        </a>
        <a href="" class="protolink">
            <div>TELNET:</div>
        </a>
    </div>
</div>

<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>
        <span class="h1">Checks</span>

        <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);
    
    function loadNode(nodeID){
        LN().rpc("entities","GetNode",[myNodeID,],function(node,e){
            if (e){
                console.log("Error loading Node " + myNodeID);
                console.log(JSON.stringify(e));
            } else {
                var tzOffset = new Date().getTimezoneOffset() * 60;
                var now = moment.unix((Date.now()/1000) - tzOffset);

                console.log(JSON.stringify(node));

                $("#nodeName").text(node.Name);
                $("#comment").text(node.comment);
                $("#currentState").text(node.CheckState);

                $("#checkStates > tbody").empty();

                $.each( node.CheckStates, function(){
                    var row = $("<tr></tr>")
                                .append(
                                    $("<td></td>")
                                    .addClass("issue-" + this.CheckState)
                                    .text(this.CheckName)
                                )
                                .append(
                                    $("<td></td>")
                                    .addClass("issue-" + this.CheckState)
                                    .text(timespan(this.UnchangedTime))
                                )
                                .appendTo($("#checkStates > tbody"));

                    var tdHist = $("<td></td>").appendTo(row);
                    var lastTimestamp = now;
                    
                    Array.reverse(this.History);

                    $.each( this.History, function(){
                        var currentTimestamp = moment.unix(this.Timestamp);
                        var age = (lastTimestamp - currentTimestamp) / 1000;

                        tdHist.append(
                            $("<span></span><br>")
                            .addClass("issue-" + this.NewState )
                            .text(this.NewState + "[ " + timespan(age) + " ]")
                        );

                        lastTimestamp = currentTimestamp;
                    });

                    var tdPerfValues = $("<td></td>").appendTo(row);

                    $.each( this.PerformanceValues, function(){
                        var pv = this;
                        tdPerfValues.append(
                            $("<span></span><br>")
                            .text(this.PerfName)
                            .addClass("issue-" + this.CheckState)
                            .click(function(ev){
                                loadGraph(pv);
                                ev.preventDefault();
                            })
                        );
                    });


                });

            }
        });
    }

    loadNode(myNodeID);

/*    setInterval( function(){
            loadNode(myNodeID);
        }, 1000 );
*/
/*
    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);

    });
*/
    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)
    {
        console.log("graph " + performanceValue.PerfName + " has " + perfData.length + "records.");

        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");
        }

        LN().rpc("perfValues","GetPerfData",[performanceValue.PerfPath,$("#interval").children("option:selected").val()],function(perfData,e){
            if (e){
                console.log(e);
            } else {
                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>