From 2f5b2f9a928740462c5fed3fcb6fa28d77e63b6c Mon Sep 17 00:00:00 2001
From: Harald Wolff <haraldwolff@pc-harald.waldrennach.l--n.de>
Date: Wed, 17 Apr 2019 22:56:31 +0200
Subject: [PATCH] WIP

---
 crawl/CrawlNetwork.cs               |   8 +-
 http/SkyScannerHttpApplication.cs   |   8 +-
 templates/static/checks/issues.html | 124 ++++++++++++++++++++--------
 templates/static/css/style.css      |  50 +++++++++--
 4 files changed, 143 insertions(+), 47 deletions(-)

diff --git a/crawl/CrawlNetwork.cs b/crawl/CrawlNetwork.cs
index f0d7946..922d507 100644
--- a/crawl/CrawlNetwork.cs
+++ b/crawl/CrawlNetwork.cs
@@ -44,11 +44,13 @@ namespace ln.skyscanner.crawl
             Name = String.Format("Subnet crawl {0} [{1}]", subnet.Network, network);
         }
 
+        private int maxScanWidth = 28;
+
         public override void RunJob()
         {
-            if (Network.Width < 26)
+            if (Network.Width < maxScanWidth)
             {
-                SplitJob(Network.Divide(26 - (int)Network.Width).Select((n) => new CrawlNetwork(Crawler, Subnet, n)).ToArray());
+                SplitJob(Network.Divide(maxScanWidth - (int)Network.Width).Select((n) => new CrawlNetwork(Crawler, Subnet, n)).ToArray());
                 return;
             }
 
@@ -101,7 +103,7 @@ namespace ln.skyscanner.crawl
                 Subnet.NextScan = startTime + TimeSpan.FromHours(24);
             }
 
-            SkyScanner.Instance.Entities.CrawledHosts.Upsert(Subnet);
+            SkyScanner.Instance.Entities.CrawledSubnets.Upsert(Subnet);
         }
 
         public override int GetHashCode()
diff --git a/http/SkyScannerHttpApplication.cs b/http/SkyScannerHttpApplication.cs
index a62dd7a..2a3819f 100644
--- a/http/SkyScannerHttpApplication.cs
+++ b/http/SkyScannerHttpApplication.cs
@@ -16,7 +16,7 @@ namespace ln.skyscanner.http
         public SkyScanner SkyScanner { get; }
 
         public String BasePath { get; private set; }
-        public String TemplatesBasePath => Path.Combine(BasePath, "templates","static");
+        public String TemplatesBasePath { get; private set; }
 
         ReflectiveResource refChecker;
         ReflectiveResource refEntities;
@@ -26,6 +26,12 @@ namespace ln.skyscanner.http
             SkyScanner = skyScanner;
 
             BasePath = Path.GetFullPath(".");
+            TemplatesBasePath = Path.Combine(BasePath, "templates", "static");
+
+            /* Development hint */
+            if (Directory.Exists("../../templates/static"))
+                TemplatesBasePath = Path.Combine(BasePath, "..", "..", "templates", "static");
+
 
             DirectoryResource staticTemplates = new DirectoryResource(RootResource, TemplatesBasePath);
 
diff --git a/templates/static/checks/issues.html b/templates/static/checks/issues.html
index 2e8305b..0a29ef1 100644
--- a/templates/static/checks/issues.html
+++ b/templates/static/checks/issues.html
@@ -1,8 +1,11 @@
 <%frame "frame.html"%>
 
-<h1>Aktuelle Störfälle</h1>
-<span id="nCRITICAL" class="CRITICAL"></span>
-<span id="nWARN" class="WARN"></span><br/>
+<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>
+
 <br/>
         <select id="interval" style="width: 180px;">
             <option value="3600">1 Stunde</option>
@@ -13,22 +16,28 @@
         </select>
         <button onclick="refresh();">Aktualisieren</button>
         <br/>
-
-<div class="flex column">
-    <div id="CRITICAL"></div>
-    <div id="WARN"></div>
-    <div id="FAIL"></div>
-    <div id="ERROR"></div>
+ <div class="flex row">
+    <div class="">
+        <div id="CRITICAL"></div>
+        <div id="WARN"></div>
+        <div id="FAIL"></div>
+        <div id="ERROR"></div>
+    </div>
+    <div class="grow" style="">
+    </div>
 </div>
-
 <div style="visibility: hidden;">
     <div id="nodetemplate" class="issue-box" style="margin-bottom: 16px;">
         <h2 id="title"></h2>
-        <div>
-            Last Check: <span id="LastCheckTime"></span><br>
-            Current State for: <span id="UnchangedTime"></span><br>
-        </div>
-        <div id="PerfValues">
+        <div class="flex row">
+            <div class="fill">
+                Last Check: <span id="LastCheckTime"></span><br>
+                Current State for: <span id="UnchangedTime"></span><br>
+            </div>
+            <div id="History">
+            </div>
+            <div id="PerfValues" class="fill">
+            </div>
         </div>
     </div>
     <div id="pvtemplate" class="performance-value flex">
@@ -41,14 +50,15 @@
 </div>
 
 <script type="text/javascript">
-    moment.defaultFormat = "DD.MM.YYYY HH:mm";
+    moment.defaultFormat = "DD.MM.YYYY HH:mm:ss";
 
     var issues = {}
     var charts = []
+    var chartTimeout = null;
     
     function graphLoaded(pv, performanceValue, perfData)
     {
-        var chartColor = performanceValue.CheckState == "CRITICAL" ? '#FF0000' : (performanceValue.CheckState == "WARN") ? '#FFFF00' : '#000000';
+        var chartColor = performanceValue.CheckState == "CRITICAL" ? '#FF0000' : (performanceValue.CheckState == "WARN") ? '#C0C000' : '#000000';
         var chart = new Chart( $("#chart", pv), {
             type: 'bar',
             data: {
@@ -89,9 +99,9 @@
     
         chart.data.labels.length = 0;
         chart.data.datasets[0].data.length = 0;
-        chart.data.datasets[0].label = perfName;
+        chart.data.datasets[0].label = performanceValue.PerfName;
 
-        $.each( perfValues, function(){
+        $.each( perfData, function(){
             if (this.TimeStamp != 0)
                 chart.data.datasets[0].data.push( { x: this.TimeStamp, y: this.Value } );
         });
@@ -103,29 +113,61 @@
         var ne = $("#" + issue.ID );
         if (!ne.length)
             ne = $("#nodetemplate").clone().attr("id",issue.ID);
-
-        ne.appendTo($("#" + issue.CheckState));
+            
+        var p = $("#" + issue.CheckState);
+        if (!p.is(ne.parent()))
+        {
+            ne.detach();
+            ne.appendTo(p);
+        }
+    
+        ne.removeClass("issue-WARN issue-CRITICAL");
         ne.addClass("issue-" + issue.CheckState );
 
         $("h2", ne).text(issue.CheckName + ": " + issue.Node.Name + " ( " + issue.Node.UniqueIdentity + " )");
         $("#LastCheckTime", ne).text(issue.LastCheckTime);
         $("#UnchangedTime", ne).text(issue.UnchangedTime);
-
+        
+        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(){
-            var pv = $("#" + this.PerfName.replace(/\//g,"-"));
+            pvparent.append( $("<span class='" + this.CheckState + "'>" + this.PerfName + "</span><br>") );
+    
+    /*
+            var pv = $("#" + this.PerfName.replace(/[./]/g,""), ne);
             if (!pv.length)
-                pv = $("#pvtemplate").clone().attr("id", this.PerfName.replace(/\//g,"-"));
+                pv = $("#pvtemplate").clone().attr("id", this.PerfName.replace(/[./]/g,""));
 
             $("#PerfName", pv).text(this.PerfName);
             $("#CheckState", pv).text(this.CheckState).addClass(this.CheckState);
-        
-            pv.appendTo($("#PerfValues", ne));
+            
+            var pvparent = $("#PerfValues", ne);
+            if (!pvparent.is(pv.parent()))
+            {
+                pv.detach();
+                pv.appendTo(pvparent);
+            }
 
             var _perfValue = this;
             var _pv = pv;
             var perfName = this.PerfName;
             
-            charts.push( { pv: _pv, performanceValue: this } );    
+            charts.push( { pv: _pv, performanceValue: this } );
+    */
         });
     
         //loadNextChart();
@@ -134,14 +176,21 @@
     function loadNextChart()
     {
         if (charts.length == 0)
-            return;
+        {
+            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);
-            loadNextChart();
-        });
+            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);
+            });
+        }
     }
     
     
@@ -153,7 +202,7 @@
     
         $("#nCRITICAL").text( $("#CRITICAL > div").length );
         $("#nWARN").text( $("#WARN > div").length );
-    
+        $("#lastUpdate").text( moment().format() );
     }
         
     skyapi().getJson("/checker/Issues", updateIssueList );
@@ -161,5 +210,8 @@
     function refresh()
     {
         skyapi().getJson("/checker/Issues", updateIssueList );
-    }    
+    }
+    
+    skyapi().addRefresh( refresh, 15 );
+    
 </script>
diff --git a/templates/static/css/style.css b/templates/static/css/style.css
index 810d0c4..3cf8ffc 100644
--- a/templates/static/css/style.css
+++ b/templates/static/css/style.css
@@ -145,18 +145,22 @@ button {
 }
 
 .flex {
-    display: flex;
+    display: flex;
+    position: relative;
 }
 
 .flex.row {
     flex-direction: row;
 }
+
 .flex.column {
     flex-direction: column;
 }
 
 .flex > div {
-    margin: 4px;
+    margin: 4px;
+    display: inline-block;
+    
 }
 
 .skylogo {
@@ -324,6 +328,8 @@ fieldset > label {
 }
 
 .issue-box {
+    display: block;
+
     border-radius: 6px 6px 0px 0px;
     border: 3px solid silver;
 }
@@ -339,9 +345,15 @@ fieldset > label {
     padding: 4px;
 }
 
+.issue-box #History {
+    max-height: 80px;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
 .issue-WARN {
-    border-color: yellow;
-    background-color: yellow;
+    border-color: #C0C000;
+    background-color: #C0C000;
     color: black;
 }
 .issue-CRITICAL {
@@ -353,11 +365,35 @@ fieldset > label {
 #CheckState {
     font-size: 20px;
 }
-#CheckState.WARN, span#WARN {
-    color: yellow;
+#CheckState.WARN, span#nWARN {
+    color: #C0C000;
 }
-#CheckState.CRITICAL, span#CRITICAL{
+#CheckState.CRITICAL, span#nCRITICAL{
     color: RED;
+    margin-right: 12px;
+}
+
+#PerfValues > span, #History > span {
+    display: inline-block;
+    width: 100%;
+}
+
+#History > span {
+    color: green;
+    margin-right: 24px;
+}
+
+#PerfValues > .WARN, #History > .WARN  {
+    color: #C0C000;
+}
+
+#PerfValues > .CRITICAL, #History > .CRITICAL {
+    color: white;
+    background-color: red;
+}
+
+span#nWARN, span#nCRITICAL {
+    font-size: 24px;
 }
 
 .performance-value > div {