From 600f2f8448f9658654bda7b6c89b93a27cb27e32 Mon Sep 17 00:00:00 2001
From: Knut Ahlers <knut@ahlers.me>
Date: Sun, 8 Apr 2018 23:39:39 +0200
Subject: [PATCH] Change progress bar behavior

Instead of just showing three bars with different colors which is quite
useless overall now segments of the progress bar are generated according
to the state of the check at the corresponding point of time. The effect
is the viewer can see how recently the status was triggered instead just
seeing a percentage.

Signed-off-by: Knut Ahlers <knut@ahlers.me>
---
 structs.go               | 51 ++++++++++++++++++++++++++++++++++++++++
 templates/dashboard.html | 25 ++++++++++++++++----
 2 files changed, 71 insertions(+), 5 deletions(-)

diff --git a/structs.go b/structs.go
index 5be2da3..21f823f 100644
--- a/structs.go
+++ b/structs.go
@@ -274,3 +274,54 @@ func (dm *dashboardMetric) IsValid() (bool, string) {
 
 	return true, ""
 }
+
+type historyBarSegment struct {
+	Duration   time.Duration
+	End        time.Time
+	Percentage float64
+	Start      time.Time
+	Status     string
+}
+
+func (dm dashboardMetric) GetHistoryBar() []historyBarSegment {
+	var (
+		point     dashboardMetricStatus
+		segLength int
+		segments  = []historyBarSegment{}
+		segStart  time.Time
+		status    = "Unknown"
+	)
+
+	for _, point = range dm.HistoricalData {
+		if point.Status == status {
+			segLength++
+			continue
+		}
+
+		// Store the old segment
+		if segLength > 0 {
+			segments = append(segments, historyBarSegment{
+				Duration:   point.Time.Sub(segStart),
+				End:        point.Time,
+				Percentage: float64(segLength) / float64(len(dm.HistoricalData)),
+				Start:      segStart,
+				Status:     status,
+			})
+		}
+
+		// Start a new segment
+		segLength = 1
+		segStart = point.Time
+		status = point.Status
+	}
+
+	segments = append(segments, historyBarSegment{
+		Duration:   point.Time.Sub(segStart),
+		End:        point.Time,
+		Percentage: float64(segLength) / float64(len(dm.HistoricalData)),
+		Start:      segStart,
+		Status:     status,
+	})
+
+	return segments
+}
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 1ce5563..8b97a5d 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -140,12 +140,19 @@
           </div>
           <div class="col-md-3 hidden-xs">
             <div class="progress">
-              <div class="progress-bar progress-bar-success" style="width: {{ metric.Meta.PercOK }}%">
-              </div>
-              <div class="progress-bar progress-bar-warning" style="width: {{ metric.Meta.PercWarn }}%">
-              </div>
-              <div class="progress-bar progress-bar-danger" style="width: {{ metric.Meta.PercCrit }}%">
+              {% for seg in metric.GetHistoryBar %}
+              <div class="progress-bar
+                          {% if seg.Status == "OK" %}progress-bar-success
+                          {% elif seg.Status == "Warning" %}progress-bar-warning
+                          {% elif seg.Status == "Critical" %}progress-bar-danger
+                          {% else %}progress-bar-info
+                          {% endif %}"
+                   style="width: {{ seg.Percentage * 100 }}%"
+                   data-toggle="tooltip" data-placement="bottom"
+                   title="Start: {{ seg.Start|time:"2006-01-02 15:04:05" }}<br>End: {{ seg.End|time:"2006-01-02 15:04:05" }}"
+              >
               </div>
+              {% endfor %}
             </div>
           </div>
         </div>
@@ -160,5 +167,13 @@
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"
             integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script>
+    <script>
+      $(function () {
+        $('[data-toggle="tooltip"]').tooltip({
+          container: 'body',
+          html: true,
+        });
+      });
+    </script>
   </body>
 </html>