From 08b9080962ee88c818babb09925f335d72539c9a Mon Sep 17 00:00:00 2001
From: Harald Wolff <haraldwolff@skyoffice>
Date: Wed, 3 Jul 2019 10:55:41 +0200
Subject: [PATCH] Add tabular issue list to UI

---
 templates/static/checks/issues2.html | 323 +++++++++++++++++++++++++++
 templates/static/topnav.html         |   9 +-
 2 files changed, 329 insertions(+), 3 deletions(-)
 create mode 100644 templates/static/checks/issues2.html

diff --git a/templates/static/checks/issues2.html b/templates/static/checks/issues2.html
new file mode 100644
index 0000000..523edba
--- /dev/null
+++ b/templates/static/checks/issues2.html
@@ -0,0 +1,323 @@
+<%frame "frame.html"%>
+
+<h1>Aktuelle Störfälle (<span id="lastUpdate"></span>)</h1>
+<div style="background-color: #404040; color: white;">
+    Kritisch: <span id="nCRITICAL" class="CRITICAL"></span>
+    Warnungen: <span id="nWARN" class="WARN"></span><br/>
+</div>
+
+<table id="issues">
+    <thead>
+        <tr>
+            <td>Knoten</td>
+            <td>Anmerkungen</td>
+            <td>Check</td>
+            <td>Zeit in aktuellem Status ( / im letzten Status)</td>
+            <td>Relevante Messwerte</td>
+            <td>Weboberfl&auml;che</td>
+        </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>
+
+<script type="text/javascript">
+    moment.defaultFormat = "DD.MM.YYYY HH:mm:ss";
+
+    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(performanceValue, perfData)
+    {
+        var chartColor = performanceValue.CheckState == "CRITICAL" ? '#FF0000' : (performanceValue.CheckState == "WARN") ? '#C0C000' : '#000000';
+        var perfID = encodeID(performanceValue.PerfName);
+        var htmlChart = $("#" + perfID );
+        if (!htmlChart.length)
+            htmlChart = $("#ChartBoxTemplate").clone().attr("id", perfID ).appendTo( $("#Charts") );
+    
+        var chart = new Chart( $("#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 } );
+        });
+        chart.update();
+    }
+    
+    function showCharts(issue)
+    {
+        var htmlCharts = $("#Charts");
+
+        $("canvas", htmlCharts).each(function(i,e){
+            var htmlCanvas = $(e);
+            htmlCanvas.data("chart").destroy();
+            htmlCanvas.data("chart",null);
+        });
+
+        htmlCharts.empty();
+    
+        $.each( issue.PerformanceValues, function(){
+            var currentIssue = this;
+            skyapi().getJson("api/checker/checks/" + encodeURIComponent(this.PerfName) + "?interval=" + $("#interval").children("option:selected").val(), function(perfData){
+                graphLoaded(currentIssue, perfData);
+            });
+
+        });
+
+    }
+    
+    function updateIssue(issue)
+    {
+        var IID = issue.ID;
+        var currentIssue = null;
+        if (issues[IID])
+        {
+            currentIssue = issues[IID];
+        } else {
+            currentIssue = {};
+            issues[IID] = currentIssue;
+        }
+
+        currentIssue.issue = issue;
+        currentIssue.updateCyle = currentUpdateCycle;
+
+        if (!currentIssue.html)
+        {
+            currentIssue.html = $("<tr></tr>");
+
+            for (var i=0;i<6;i++){
+                $("<td></td>")
+                    .appendTo(currentIssue.html);
+            }
+
+            currentIssue.html.data("issue", currentIssue);
+            currentIssue.html.appendTo($("#issues > tbody"));
+        }
+
+        currentIssue.html.removeClass("issue-WARN issue-CRITICAL");
+        currentIssue.html.addClass("issue-" + issue.CheckState );
+
+        var now = moment();
+        var m1 = moment(issue.History.slice(-1)[0].Timestamp);
+        var m2 = moment(issue.History.slice(-2)[0].Timestamp);
+
+        $($("td", currentIssue.html).get(0))
+            .text(currentIssue.issue.Node.Name + " [ "+ currentIssue.issue.Node.UniqueIdentity +" ]");
+        $($("td", currentIssue.html).get(1))
+            .text(currentIssue.issue.Node.Comment);
+        $($("td", currentIssue.html).get(2))
+            .text(currentIssue.issue.CheckName);
+        $($("td", currentIssue.html).get(3))
+            .text( timespan((now - m1)/1000) + " ( " +issue.History.slice(-2)[0].NewState + "=" + timespan((m1 - m2)/1000)  + " )");
+
+        $($("td", currentIssue.html).get(4)).empty();
+        $.each( currentIssue.issue.PerformanceValues, function(){
+            if (this.CheckState != "OK")
+            {
+                $($("td", currentIssue.html).get(4))
+                    .append(
+                        this.PerfName + "<br>"
+                    );
+            }
+        });
+
+        $($("td", currentIssue.html).get(5))
+            .empty();
+
+        currentIssue.issue.Node.URIs.forEach(function(e,i){
+            if (e.Scheme == "http"){
+                var url = "http://" + e.Host + ":" + e.Port;
+                $($("td", currentIssue.html).get(5))
+                    .append(
+                        $("<a target=_blank></a>")
+                        .attr("href",url)
+                        .text(url)
+                    );
+            }
+        }, this);
+
+
+    /*    $("h2", ne).text( issue.Node.DeviceType + " " + issue.CheckName + ": " + issue.Node.Name + " ( " + issue.Node.UniqueIdentity + " )").on("click", function(e){
+            showCharts($(this).parent().data("MyIssue"));
+        });
+        $("#LastCheckTime", ne).text(issue.LastCheckTime);
+        $("#UnchangedTime", ne).text(issue.UnchangedTime);
+        $("#Comment", ne).text(issue.Node.Comment);
+
+        var awebui = $("#webui", ne);
+        awebui.hide();
+
+        issue.Node.URIs.forEach(function(e,i){
+            if (e.Scheme == "http"){
+                awebui.show();
+                awebui.attr("href", "http://" + e.Host + ":" + e.Port);
+            }
+        }, this);
+        
+        var histParent = $("#History", ne);
+        histParent.empty();
+    
+        var lastHistTime = moment();
+    
+        $.each( issue.History.slice().reverse(), function(){
+            var m = moment(this.Timestamp);
+            var d = lastHistTime == null ? "" : lastHistTime.diff(m, 'minutes');
+            lastHistTime = m;
+    
+            $("<span class='" + this.NewState + "'>" + m.format() + " [ " + d + "min ]</span><br>").appendTo( histParent );
+        });
+        
+        var pvparent = $("#PerfValues", ne);
+        pvparent.empty();
+        
+        $.each( issue.PerformanceValues, function(){
+            pvparent.append( $("<span class='" + this.CheckState + "'>" + this.PerfName + "</span><br>") );
+    
+        });    
+        */
+    }
+    
+    function loadNextChart()
+    {
+        if (charts.length == 0)
+        {
+            clearTimeout(chartTimeout);
+            chartTimeout = null;
+        } else {
+            if (chartTimeout == null)
+            {
+                chartTimeout = setTimeout( loadNextChart, 100 );
+            }
+    
+            next = charts.shift();
+        
+            skyapi().getJson("api/checker/checks/" + encodeURIComponent(next.performanceValue.PerfName) + "?interval=" + $("#interval").children("option:selected").val(), function(perfData){
+                graphLoaded(next.pv, next.performanceValue, perfData);
+            });
+        }
+    }
+    
+    function updateIssueList(issueList)
+    {
+        currentUpdateCycle++;
+    
+        $.each( issueList , function(){
+//            if (this.Node.DeviceType != "UNKNOWN")
+                updateIssue(this);
+        });
+
+        $.each( $("#issues > tbody > tr"), function(){
+            var currentIssue = $(this).data("issue");
+            if (currentIssue.updateCyle != currentUpdateCycle)
+            {
+                delete issues[currentIssue.issue.ID];
+                currentIssue.html.detach();
+            }
+        });
+    
+        var rows = $("#issues > tbody > tr");
+        var sortList = Array.prototype.sort.bind(rows);
+
+        sortList(function(a,b){
+            var aissue = $(a).data("issue");
+            var bissue = $(b).data("issue");
+            
+            var ta = moment(aissue.issue.History.slice(-1)[0].Timestamp);
+            var tb = moment(bissue.issue.History.slice(-1)[0].Timestamp);
+            
+            if (ta < tb)
+                return -1;
+            else if (ta > tb)
+                return 1;
+            return 0;
+        });
+
+        $("#issues > tbody").append(rows);
+
+        $("#nCRITICAL").text( $("#issues > tbody > .issue-CRITICAL").length );
+        $("#nWARN").text( $("#issues > tbody > .issue-WARN").length );
+        $("#lastUpdate").text( moment().format() );
+    }
+        
+    skyapi().getJson("/checker/Issues", updateIssueList );
+    
+    function refresh()
+    {
+        skyapi().getJson("/checker/Issues", updateIssueList );
+    }
+    
+    skyapi().addRefresh( refresh, 15 );
+    
+</script>
diff --git a/templates/static/topnav.html b/templates/static/topnav.html
index b9227bc..3f75741 100644
--- a/templates/static/topnav.html
+++ b/templates/static/topnav.html
@@ -1,8 +1,11 @@
 <div class="popup">Netz Status
     <div>
-        <div>
-            <a href="/static/checks/issues.html"><div>St&ouml;rf&auml;lle</div></a>
-        </div>
+            <div>
+                <a href="/static/checks/issues2.html"><div>St&ouml;rf&auml;lle (tabellarisch)</div></a>
+            </div>
+            <div>
+                <a href="/static/checks/issues.html"><div>St&ouml;rf&auml;lle (detailiert)</div></a>
+            </div>
     </div>
 </div>