better design

.travis.yml

@@ -18,7 +18,7 @@ services:
 
 env:
   global:
-     - VERSION=0.25
+     - VERSION=0.26
      - DB_HOST=localhost
      - DB_USER=travis
      - DB_PASS=

Dockerfile

@@ -5,7 +5,6 @@ ENV VERSION=v0.25
 RUN apk --no-cache add ca-certificates
 RUN wget https://github.com/hunterlong/statup/releases/download/$VERSION/statup-linux-alpine.tar.gz && \
       tar -xvzf statup-linux-alpine.tar.gz && \
-      ls && \
       chmod +x statup && \
       mv statup /usr/local/bin/statup
 WORKDIR /app

html/css/base.css

@@ -107,7 +107,7 @@ HTML,BODY {
 .chart-container {
     position: relative;
     height: 20vh;
-    width: 67vh;
+    width: 93vh;
     margin-left: -52px;
     margin-bottom: -30px;
 }
@@ -129,6 +129,16 @@ HTML,BODY {
     padding: 5px 15px;
 }
 
+.lower_canvas {
+    width: 100%;
+    height: 100%;
+    background-color: #48d338;
+}
+
+.card-body {
+    padding-bottom: 85px;
+}
+
 @media (max-width: 767px) {
 
     .sm-container {
@@ -159,10 +169,22 @@ HTML,BODY {
 
     .card-body {
         font-size: 6pt;
+        padding: 5px 10px;
+        height: 330px;
     }
 
     .lg_number {
-        font-size: 1.2rem;
+        font-size: 1.4rem;
+    }
+
+    .stats_area {
+        margin-top: 25px !important;
+        margin-bottom: 20px !important;
+    }
+
+    .stats_area .col-4 {
+        padding-left: 0;
+        padding-right: 0;
     }
 
 

html/js/main.js

@@ -0,0 +1,6 @@
+$(".service_li").on('click', function() {
+    var id = $(this).attr('data-id');
+    var position = $("#service_id_"+id).offset();
+    window.scroll(0,position.top-23);
+    return false;
+});

html/tmpl/index.html

@@ -29,7 +29,7 @@
 <div class="col-12 mb-5">
     <div class="list-group online_list">
     {{ range .Services }}
-        <a href="#" class="list-group-item list-group-item-action {{if not .Online}}failing_bg text-white{{ end }}">
+        <a href="#" class="service_li list-group-item list-group-item-action {{if not .Online}}failing_bg text-white{{ end }}" data-id="{{.Id}}">
         {{ .Name }}
         {{if .Online}}
             <span class="badge online_badge float-right">ONLINE</span>
@@ -45,7 +45,7 @@
     <div class="col-12">
 
         {{ range .Services }}
-            <div class="mt-4">
+            <div class="mt-4" id="service_id_{{.Id}}">
                 <div class="card">
                     <div class="card-body{{if not .Online}} offline_bg{{end}}">
 
@@ -79,24 +79,12 @@
                         {{ if .AvgTime }}
                         <div class="chart-container">
                             <canvas id="service_{{ .Id }}"></canvas>
+                            <div class="lower_canvas"></div>
                         </div>
                         {{ end }}
 
                     {{ if .LimitedFailures }}
-                        <div class="list-group mt-5">
-                         {{ range .LimitedFailures }}
-                            <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
-                                <div class="d-flex w-100 justify-content-between">
-                                    <h5 class="mb-1">{{.ParseError}}</h5>
-                                    <small>Reported {{.Ago}}</small>
-                                </div>
-                                <p class="mb-1">{{.Issue}}</p>
-                            </a>
-                         {{ end }}
 
-                            <span class="mt-2 text-right">{{ .TotalFailures }} Total Failures</span>
-
-                        </div>
                     {{ end }}
                         </div>
                     </div>
@@ -133,21 +121,32 @@ var chartdata = new Chart(ctx, {
     options: {
         maintainAspectRatio: false,
         scaleShowValues: true,
-        hover: {
+        layout: {
-            "animationDuration": 0
+            padding: {
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: -10
+            }
         },
+        hover: {
+            animationDuration: 0,
+        },
+        responsiveAnimationDuration: 0,
         animation: {
             "duration": 0,
             "onComplete": function() {
                 var chartInstance = this.chart,
                         ctx = chartInstance.ctx;
 
+                var controller = this.chart.controller;
+                var xAxis = controller.scales['x-axis-0'];
+                var yAxis = controller.scales['y-axis-0'];
+
                 ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                 ctx.textAlign = 'center';
                 ctx.textBaseline = 'bottom';
 
-                var controller = this.chart.controller;
-                var xAxis = controller.scales['x-axis-0'];
                 var	numTicks = xAxis.ticks.length;
                 var yOffsetStart = xAxis.width / numTicks;
                 var halfBarWidth = (xAxis.width / (numTicks * 2));
@@ -161,20 +160,44 @@ var chartdata = new Chart(ctx, {
 
                 this.data.datasets.forEach(function(dataset, i) {
                     var meta = chartInstance.controller.getDatasetMeta(i);
-                    var hx = 0;
+                    var hxH = 0;
-                    var hy = 0;
+                    var hyH = 0;
+                    var hxL = 0;
+                    var hyL = 0;
                     var highestNum = 0;
+                    var lowestnum = 999999999999;
                     meta.data.forEach(function(bar, index) {
                         var data = dataset.data[index];
+
+                        if (data.y < lowestnum) {
+                            lowestnum = data.y;
+                            hxL = bar._model.x;
+                            hyL = bar._model.y;
+                        }
+
                         if (data.y > highestNum) {
                             highestNum = data.y;
-                            highest = bar;
+                            hxH = bar._model.x;
-                            hx = bar._model.x;
+                            hyH = bar._model.y;
-                            hy = bar._model.y;
                         }
                     });
-                    ctx.fillStyle = '#0d7809';
+
-                    ctx.fillText(highestNum+"ms", hx - 40, hy + 15);
+                    if (hxH >= 820) {
+                        hxH = 820;
+                    } else if (hxH <= 50) {
+                        hxH = 50;
+                    }
+
+                    if (hxL >= 820) {
+                        hxL = 820;
+                    } else if (hxL <= 70) {
+                        hxL = 70;
+                    }
+
+                    ctx.fillStyle = '#ffa7a2';
+                    ctx.fillText(highestNum+"ms", hxH - 40, hyH + 15);
+                    ctx.fillStyle = '#54944b';
+                    ctx.fillText(lowestnum+"ms", hxL, hyL - 5);
                 });
             }
         },
@@ -189,7 +212,8 @@ var chartdata = new Chart(ctx, {
                 display: false,
                 ticks: {
                     fontSize: 20,
-                    display: false
+                    display: false,
+                    beginAtZero: true
                 },
                 gridLines: {
                     display:false
@@ -203,6 +227,8 @@ var chartdata = new Chart(ctx, {
                     display:false
                 },
                 ticks: {
+                    stepSize: 1,
+                    min: 0,
                     fontColor: "white",
                     fontSize: 20,
                     display: false,
@@ -234,6 +260,7 @@ var chartdata = new Chart(ctx, {
 {{ else }}
 <script src="/js/jquery-3.3.1.slim.min.js"></script>
 <script src="/js/bootstrap.min.js"></script>
+<script src="/js/main.js"></script>
 {{end}}
 
 </body>

services.go

@@ -107,7 +107,7 @@ type DateScan struct {
 
 func (s *Service) GraphData() string {
 	var d []DateScan
-	since := time.Now().Add(time.Hour*-12 + time.Minute*0 + time.Second*0)
+	since := time.Now().Add(time.Hour*-24 + time.Minute*0 + time.Second*0)
 	sql := fmt.Sprintf("SELECT date_trunc('minute', created_at), AVG(latency)*1000 AS value FROM hits WHERE service=%v AND created_at > '%v' GROUP BY 1 ORDER BY date_trunc ASC;", s.Id, since.Format(time.RFC3339))
 	dated, err := dbSession.Query(db.Raw(sql))
 	if err != nil {