From 42bfdeb72850780233dd2c6c30ac7e2643e3e5e8 Mon Sep 17 00:00:00 2001
From: Harald Wolff <haraldwolff@skyoffice>
Date: Thu, 11 Jul 2019 10:17:09 +0200
Subject: [PATCH] UI Update

---
 templates/static/checks/issues2.html |   8 +-
 templates/static/checks/node.html    | 226 +++++++++++++++++++++++++++
 templates/static/css/style.css       |  64 ++++++--
 3 files changed, 282 insertions(+), 16 deletions(-)
 create mode 100644 templates/static/checks/node.html

diff --git a/templates/static/checks/issues2.html b/templates/static/checks/issues2.html
index e24f4a2..6b30cfa 100644
--- a/templates/static/checks/issues2.html
+++ b/templates/static/checks/issues2.html
@@ -175,7 +175,13 @@
         var m2 = issue.History.length > 1 ? moment(issue.History.slice(-2)[0].Timestamp) : moment();
 
         $($("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))
             .text(currentIssue.issue.Node.Comment);
         $($("td", currentIssue.html).get(2))
diff --git a/templates/static/checks/node.html b/templates/static/checks/node.html
new file mode 100644
index 0000000..4d08b6e
--- /dev/null
+++ b/templates/static/checks/node.html
@@ -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>
diff --git a/templates/static/css/style.css b/templates/static/css/style.css
index b53fd3f..c114f3f 100644
--- a/templates/static/css/style.css
+++ b/templates/static/css/style.css
@@ -11,7 +11,6 @@
     bottom: 0px;
     left: 0px;
     right: 0px;
-    
 }
 
 div {
@@ -33,10 +32,6 @@ h1,h2,h3,h4,h5,h6 {
     padding:2px;
 }
 
-table {
-    width: 98%;
-}
-
 h1 > div {
     display: inline;
 }
@@ -55,16 +50,47 @@ a {
     color: inherit;
 }
 
-/*!
-button {
-    border: 1px solid black;
-    border-radius: 4px;
-    padding: 6px;
-    
-    width: 140px;
-    font-weight: 800;
+table {
+    border-collapse: collapse;
 }
-*/
+
+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 {
     top: 0px;
@@ -142,6 +168,10 @@ button {
     overflow-x: scroll;
 }
 
+.align-right {
+    text-align: right;
+}
+
 .fill {
     flex-grow: 1;
     flex-shrink: 1;
@@ -157,6 +187,10 @@ button {
     position: relative;
 }
 
+.wrap {
+    flex-wrap: wrap;
+}
+
 .flex.row {
     flex-direction: row;
 }
@@ -378,7 +412,7 @@ fieldset > label {
 
 .issue-OK {
     border-color: white;
-    background-color: white;
+    background-color: inherit;
     color: green;
 }
 .issue-WARN {