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

@@ -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
+}

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>