From de31a7a62e9784fceab9e6a81574197ebd29dd7f Mon Sep 17 00:00:00 2001
From: TwinProduction <twin@twinnation.org>
Date: Sat, 20 Feb 2021 18:08:00 -0500
Subject: [PATCH] Minor improvements

---
 core/service-status.go             | 22 +++++++++++++---
 web/app/src/components/Service.vue | 40 +++++++++++++++++++++---------
 2 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/core/service-status.go b/core/service-status.go
index 29fee39b..114be72c 100644
--- a/core/service-status.go
+++ b/core/service-status.go
@@ -6,6 +6,14 @@ import (
 	"github.com/TwinProduction/gatus/util"
 )
 
+const (
+	// MaximumNumberOfResults is the maximum number of results that ServiceStatus.Results can have
+	MaximumNumberOfResults = 20
+
+	// MaximumNumberOfEvents is the maximum number of events that ServiceStatus.Events can have
+	MaximumNumberOfEvents = 50
+)
+
 // ServiceStatus contains the evaluation Results of a Service
 type ServiceStatus struct {
 	// Name of the service
@@ -64,14 +72,20 @@ func (ss *ServiceStatus) AddResult(result *Result) {
 				event.Type = EventUnhealthy
 			}
 			ss.Events = append(ss.Events, event)
-			if len(ss.Events) > 20 {
-				ss.Events = ss.Events[1:]
+			if len(ss.Events) > MaximumNumberOfEvents {
+				// Doing ss.Events[1:] would usually be sufficient, but in the case where for some reason, the slice has
+				// more than one extra element, we can get rid of all of them at once and thus returning the slice to a
+				// length of MaximumNumberOfEvents by using ss.Events[len(ss.Events)-MaximumNumberOfEvents:] instead
+				ss.Events = ss.Events[len(ss.Events)-MaximumNumberOfEvents:]
 			}
 		}
 	}
 	ss.Results = append(ss.Results, result)
-	if len(ss.Results) > 20 {
-		ss.Results = ss.Results[1:]
+	if len(ss.Results) > MaximumNumberOfResults {
+		// Doing ss.Results[1:] would usually be sufficient, but in the case where for some reason, the slice has more
+		// than one extra element, we can get rid of all of them at once and thus returning the slice to a length of
+		// MaximumNumberOfResults by using ss.Results[len(ss.Results)-MaximumNumberOfResults:] instead
+		ss.Results = ss.Results[len(ss.Results)-MaximumNumberOfResults:]
 	}
 	ss.Uptime.ProcessResult(result)
 }
diff --git a/web/app/src/components/Service.vue b/web/app/src/components/Service.vue
index 17840cc3..9833367d 100644
--- a/web/app/src/components/Service.vue
+++ b/web/app/src/components/Service.vue
@@ -15,12 +15,12 @@
     </div>
     <div>
       <div class='status-over-time flex flex-row'>
-        <slot v-for="filler in maximumNumberOfResults - data.results.length" :key="filler">
-          <span class="status rounded border border-dashed"> </span>
+        <slot v-if="data.results.length < maximumNumberOfResults">
+          <span v-for="filler in maximumNumberOfResults - data.results.length" :key="filler" class="status rounded border border-dashed"> </span>
         </slot>
         <slot v-for="result in data.results" :key="result">
-          <span v-if="result.success" class="status rounded bg-success" @mouseenter="showTooltip(result, $event)" @mouseleave="showTooltip(null, $event)">&#10003;</span>
-          <span v-else class="status rounded bg-red-600" @mouseenter="showTooltip(result, $event)" @mouseleave="showTooltip(null, $event)">X</span>
+          <span v-if="result.success" class="status status-success rounded bg-success" @mouseenter="showTooltip(result, $event)" @mouseleave="showTooltip(null, $event)"></span>
+          <span v-else class="status status-failure rounded bg-red-600" @mouseenter="showTooltip(result, $event)" @mouseleave="showTooltip(null, $event)"></span>
         </slot>
       </div>
     </div>
@@ -110,6 +110,14 @@ export default {
   border-style: solid;
 }
 
+.status-over-time {
+  overflow: auto;
+}
+
+.status-over-time > span:not(:first-child) {
+  margin-left: 2px;
+}
+
 .status {
   cursor: pointer;
   transition: all 500ms ease-in-out;
@@ -127,14 +135,6 @@ export default {
   color: black;
 }
 
-.status-over-time {
-  overflow: auto;
-}
-
-.status-over-time > span:not(:first-child) {
-  margin-left: 2px;
-}
-
 .status-time-ago {
   color: #6a737d;
   opacity: 0.5;
@@ -144,4 +144,20 @@ export default {
 .status-min-max-ms {
   overflow-x: hidden;
 }
+
+.status.status-success::after {
+  content: "✓";
+}
+
+.status.status-failure::after {
+  content: "X";
+}
+
+@media screen and (max-width: 450px) {
+  .status.status-success::after,
+  .status.status-failure::after {
+    content: " ";
+    white-space: pre;
+  }
+}
 </style>
\ No newline at end of file