Minor improvements

config.yaml

@@ -1,11 +1,12 @@
 metrics: true
 services:
-  - name: twinnation
+  - name: Twinnation
     url: https://twinnation.org/actuator/health
-    interval: 15s
+    interval: 30s
     conditions:
       - "[STATUS] == 200"
-  - name: github
+  - name: GitHub API
     url: https://api.github.com/healthz
+    interval: 30s
     conditions:
       - "[STATUS] == 200"

core/types.go

@@ -23,7 +23,7 @@ type ServerMessage struct {
 type Result struct {
 	HttpStatus       int                `json:"status"`
 	Hostname         string             `json:"hostname"`
-	Ip               string             `json:"ip"`
+	Ip               string             `json:"-"`
 	Duration         time.Duration      `json:"duration"`
 	Errors           []string           `json:"errors"`
 	ConditionResults []*ConditionResult `json:"condition-results"`
@@ -88,7 +88,7 @@ func (service *Service) EvaluateConditions() *Result {
 type ConditionResult struct {
 	Condition   *Condition `json:"condition"`
 	Success     bool       `json:"success"`
-	Explanation string     `json:"explanation"`
+	Explanation string     `json:"-"`
 }
 
 type Condition string

static/index.html

@@ -4,11 +4,23 @@
 	<title>Status</title>
 	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 	<style>
-		td > span.badge {
+		#results div.container:first-child {
+			border-top-left-radius: 3px;
+			border-top-right-radius: 3px;
+		}
+		#results div.container:last-child {
+			border-bottom-left-radius: 3px;
+			border-bottom-right-radius: 3px;
+			border-bottom-width: 1px;
+			border-color: #dee2e6;
+			border-style: solid;
+		}
+		.status-ok {
 			display: inline-block;
-			width: 20px;
+			width: 1%;
-			cursor: default;
+			height: 20px;
-			margin-right: 2px;
+			margin-right: 4px;
+			background-color: #28a745;
 		}
 	</style>
 </head>
@@ -17,19 +29,7 @@
 		<div class="text-center mb-3">
 			<div class="display-4">Status</div>
 		</div>
-		<div class="table-responsive">
+		<div id="results">
-			<table class="table">
-				<thead>
-					<tr>
-						<th scope="col">Name</th>
-						<th scope="col">Status</th>
-						<th scope="col">Hostname</th>
-						<th scope="col">Response time</th>
-					</tr>
-				</thead>
-				<tbody id="results">
-				</tbody>
-			</table>
 		</div>
 	</div>
 
@@ -38,8 +38,9 @@
 	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
 	<script>
-		const OK = "<span class='badge badge-success' title='__RESPONSE_TIME____CONDITIONS____ERRORS__'>&#10003;</span>";
+		//const OK = "<div class='status-ok' title='__RESPONSE_TIME____CONDITIONS____ERRORS__'></div>"
-		const NOK = "<span class='badge badge-danger' title='__RESPONSE_TIME____CONDITIONS____ERRORS__'>X</span>";
+		const OK = "<span class='badge badge-success ml-1' style='width: 5%' title='__RESPONSE_TIME____CONDITIONS____ERRORS__'>&#10003;</span>";
+		const NOK = "<span class='badge badge-danger ml-1' style='width: 5%' title='__RESPONSE_TIME____CONDITIONS____ERRORS__'>X</span>";
 
 		function generateServiceResultBox(serviceResult) {
 			let output = (serviceResult.success ? OK : NOK);
@@ -62,9 +63,9 @@
 			return output;
 		}
 		
-		function refreshTable() {
+		function refreshResults() {
 			$.getJSON("/api/v1/results", function (data) {
-				let tableBody = "";
+				let output = "";
 				for (let serviceName in data) {
 					let serviceStatusOverTime = "";
 					let hostname = data[serviceName][data[serviceName].length-1].hostname 
@@ -82,21 +83,30 @@
 							maxResponseTime = responseTime;
 						}
 					}
-					tableBody += ""
+					output += ""
-						+ "<tr>"
+						+ "<div class='container p-2 border-left border-right border-top border-black'>"
-						+ "  <td>" + serviceName + "</td>"
+						+ "  <div class='row mb-2'>"
-						+ "  <td>" + serviceStatusOverTime + "</td>"
+						+ "    <div class='col-8'>"
-						+ "  <td><a href=\"//" + hostname + "\">" + hostname + "</a></td>"
+						+ "      <span class='font-weight-bold'>" + serviceName + "</span> <span class='text-secondary font-weight-lighter'>- " + hostname + "</span>"
-						+ "  <td>" + (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + "-" + maxResponseTime)) + "ms</td>"
+						+ "    </div>"
-						+ "</tr>";
+						+ "    <div class='col-4 text-right'>"
+						+ "      <span class='font-weight-lighter'>" + (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + "-" + maxResponseTime)) + "ms</span>"
+						+ "    </div>"
+						+ "  </div>"
+						+ "  <div class='row'>"
+						+ "    <div class='col-12 d-flex flex-row-reverse'>"
+						+ "      " + serviceStatusOverTime
+						+ "    </div>"
+						+ "  </div>"
+						+ "</div>";
 				}
-				$("#results").html(tableBody);
+				$("#results").html(output);
 			});
 		}
 
-		refreshTable();
+		refreshResults();
 		setInterval(function() {
-			refreshTable();
+			refreshResults();
 		}, 10000);
 	</script>
 </body>

watchdog/watchdog.go

@@ -27,7 +27,7 @@ func Monitor(cfg *config.Config) {
 				metric.PublishMetricsForService(service, result)
 				rwLock.Lock()
 				serviceResults[service.Name] = append(serviceResults[service.Name], result)
-				if len(serviceResults[service.Name]) > 10 {
+				if len(serviceResults[service.Name]) > 20 {
 					serviceResults[service.Name] = serviceResults[service.Name][1:]
 				}
 				rwLock.Unlock()