Merge pull request #90 from TwinProduction/longer-result-history

First implementation of longer result history
2024-11-07 16:44:25 +01:00 · 2021-02-25 22:47:55 -05:00 · 2021-02-25 22:47:55 -05:00 · 85dff34350
commit 85dff34350
parent 42825b62fb 99fa632021
20 changed files with 488 additions and 84 deletions
--- a/controller/badge.go
+++ b/controller/badge.go
@ -7,7 +7,7 @@ import (
 	"time"

 	"github.com/TwinProduction/gatus/core"
-	"github.com/TwinProduction/gatus/watchdog"
+	"github.com/TwinProduction/gatus/storage"
 	"github.com/gorilla/mux"
 )

@ -25,18 +25,23 @@ func badgeHandler(writer http.ResponseWriter, request *http.Request) {
 	}
 	identifier := variables["identifier"]
 	key := strings.TrimSuffix(identifier, ".svg")
-	uptime := watchdog.GetUptimeByKey(key)
-	if uptime == nil {
+	serviceStatus := storage.Get().GetServiceStatusByKey(key)
+	if serviceStatus == nil {
 		writer.WriteHeader(http.StatusNotFound)
 		_, _ = writer.Write([]byte("Requested service not found"))
 		return
 	}
+	if serviceStatus.Uptime == nil {
+		writer.WriteHeader(http.StatusInternalServerError)
+		_, _ = writer.Write([]byte("Failed to compute uptime"))
+		return
+	}
 	formattedDate := time.Now().Format(http.TimeFormat)
 	writer.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate")
 	writer.Header().Set("Date", formattedDate)
 	writer.Header().Set("Expires", formattedDate)
 	writer.Header().Set("Content-Type", "image/svg+xml")
-	_, _ = writer.Write(generateSVG(duration, uptime))
+	_, _ = writer.Write(generateSVG(duration, serviceStatus.Uptime))
 }

 func generateSVG(duration string, uptime *core.Uptime) []byte {
--- a/controller/controller.go
+++ b/controller/controller.go
@ -14,7 +14,7 @@ import (

 	"github.com/TwinProduction/gatus/config"
 	"github.com/TwinProduction/gatus/security"
-	"github.com/TwinProduction/gatus/watchdog"
+	"github.com/TwinProduction/gatus/storage"
 	"github.com/TwinProduction/gocache"
 	"github.com/TwinProduction/health"
 	"github.com/gorilla/mux"
@ -101,21 +101,22 @@ func secureIfNecessary(cfg *config.Config, handler http.HandlerFunc) http.Handle
 // Due to the size of the response, this function leverages a cache.
 // Must not be wrapped by GzipHandler
 func serviceStatusesHandler(writer http.ResponseWriter, r *http.Request) {
+	page, pageSize := extractPageAndPageSizeFromRequest(r)
 	gzipped := strings.Contains(r.Header.Get("Accept-Encoding"), "gzip")
 	var exists bool
 	var value interface{}
 	if gzipped {
 		writer.Header().Set("Content-Encoding", "gzip")
-		value, exists = cache.Get("service-status-gzipped")
+		value, exists = cache.Get(fmt.Sprintf("service-status-%d-%d-gzipped", page, pageSize))
 	} else {
-		value, exists = cache.Get("service-status")
+		value, exists = cache.Get(fmt.Sprintf("service-status-%d-%d", page, pageSize))
 	}
 	var data []byte
 	if !exists {
 		var err error
 		buffer := &bytes.Buffer{}
 		gzipWriter := gzip.NewWriter(buffer)
-		data, err = watchdog.GetServiceStatusesAsJSON()
+		data, err = json.Marshal(storage.Get().GetAllServiceStatusesWithResultPagination(page, pageSize))
 		if err != nil {
 			log.Printf("[controller][serviceStatusesHandler] Unable to marshal object to JSON: %s", err.Error())
 			writer.WriteHeader(http.StatusInternalServerError)
@ -125,8 +126,8 @@ func serviceStatusesHandler(writer http.ResponseWriter, r *http.Request) {
 		_, _ = gzipWriter.Write(data)
 		_ = gzipWriter.Close()
 		gzippedData := buffer.Bytes()
-		cache.SetWithTTL("service-status", data, cacheTTL)
-		cache.SetWithTTL("service-status-gzipped", gzippedData, cacheTTL)
+		cache.SetWithTTL(fmt.Sprintf("service-status-%d-%d", page, pageSize), data, cacheTTL)
+		cache.SetWithTTL(fmt.Sprintf("service-status-%d-%d-gzipped", page, pageSize), gzippedData, cacheTTL)
 		if gzipped {
 			data = gzippedData
 		}
@ -140,8 +141,9 @@ func serviceStatusesHandler(writer http.ResponseWriter, r *http.Request) {

 // serviceStatusHandler retrieves a single ServiceStatus by group name and service name
 func serviceStatusHandler(writer http.ResponseWriter, r *http.Request) {
+	page, pageSize := extractPageAndPageSizeFromRequest(r)
 	vars := mux.Vars(r)
-	serviceStatus := watchdog.GetServiceStatusByKey(vars["key"])
+	serviceStatus := storage.Get().GetServiceStatusByKey(vars["key"])
 	if serviceStatus == nil {
 		log.Printf("[controller][serviceStatusHandler] Service with key=%s not found", vars["key"])
 		writer.WriteHeader(http.StatusNotFound)
@ -149,7 +151,7 @@ func serviceStatusHandler(writer http.ResponseWriter, r *http.Request) {
 		return
 	}
 	data := map[string]interface{}{
-		"serviceStatus": serviceStatus,
+		"serviceStatus": serviceStatus.WithResultPagination(page, pageSize),
 		// The following fields, while present on core.ServiceStatus, are annotated to remain hidden so that we can
 		// expose only the necessary data on /api/v1/statuses.
 		// Since the /api/v1/statuses/{key} endpoint does need this data, however, we explicitly expose it here
@ -160,20 +162,10 @@ func serviceStatusHandler(writer http.ResponseWriter, r *http.Request) {
 	if err != nil {
 		log.Printf("[controller][serviceStatusHandler] Unable to marshal object to JSON: %s", err.Error())
 		writer.WriteHeader(http.StatusInternalServerError)
-		_, _ = writer.Write([]byte("Unable to marshal object to JSON"))
+		_, _ = writer.Write([]byte("unable to marshal object to JSON"))
 		return
 	}
 	writer.Header().Add("Content-Type", "application/json")
 	writer.WriteHeader(http.StatusOK)
 	_, _ = writer.Write(output)
 }
-
-// favIconHandler handles requests for /favicon.ico
-func favIconHandler(writer http.ResponseWriter, request *http.Request) {
-	http.ServeFile(writer, request, staticFolder+"/favicon.ico")
-}
-
-// spaHandler handles requests for /favicon.ico
-func spaHandler(writer http.ResponseWriter, request *http.Request) {
-	http.ServeFile(writer, request, staticFolder+"/index.html")
-}
--- a/controller/controller_test.go
+++ b/controller/controller_test.go
@ -10,10 +10,87 @@ import (

 	"github.com/TwinProduction/gatus/config"
 	"github.com/TwinProduction/gatus/core"
+	"github.com/TwinProduction/gatus/storage"
 	"github.com/TwinProduction/gatus/watchdog"
 )

+var (
+	firstCondition  = core.Condition("[STATUS] == 200")
+	secondCondition = core.Condition("[RESPONSE_TIME] < 500")
+	thirdCondition  = core.Condition("[CERTIFICATE_EXPIRATION] < 72h")
+
+	timestamp = time.Now()
+
+	testService = core.Service{
+		Name:                    "name",
+		Group:                   "group",
+		URL:                     "https://example.org/what/ever",
+		Method:                  "GET",
+		Body:                    "body",
+		Interval:                30 * time.Second,
+		Conditions:              []*core.Condition{&firstCondition, &secondCondition, &thirdCondition},
+		Alerts:                  nil,
+		Insecure:                false,
+		NumberOfFailuresInARow:  0,
+		NumberOfSuccessesInARow: 0,
+	}
+	testSuccessfulResult = core.Result{
+		Hostname:              "example.org",
+		IP:                    "127.0.0.1",
+		HTTPStatus:            200,
+		Body:                  []byte("body"),
+		Errors:                nil,
+		Connected:             true,
+		Success:               true,
+		Timestamp:             timestamp,
+		Duration:              150 * time.Millisecond,
+		CertificateExpiration: 10 * time.Hour,
+		ConditionResults: []*core.ConditionResult{
+			{
+				Condition: "[STATUS] == 200",
+				Success:   true,
+			},
+			{
+				Condition: "[RESPONSE_TIME] < 500",
+				Success:   true,
+			},
+			{
+				Condition: "[CERTIFICATE_EXPIRATION] < 72h",
+				Success:   true,
+			},
+		},
+	}
+	testUnsuccessfulResult = core.Result{
+		Hostname:              "example.org",
+		IP:                    "127.0.0.1",
+		HTTPStatus:            200,
+		Body:                  []byte("body"),
+		Errors:                []string{"error-1", "error-2"},
+		Connected:             true,
+		Success:               false,
+		Timestamp:             timestamp,
+		Duration:              750 * time.Millisecond,
+		CertificateExpiration: 10 * time.Hour,
+		ConditionResults: []*core.ConditionResult{
+			{
+				Condition: "[STATUS] == 200",
+				Success:   true,
+			},
+			{
+				Condition: "[RESPONSE_TIME] < 500",
+				Success:   false,
+			},
+			{
+				Condition: "[CERTIFICATE_EXPIRATION] < 72h",
+				Success:   false,
+			},
+		},
+	}
+)
+
 func TestCreateRouter(t *testing.T) {
+	defer storage.Get().Clear()
+	defer cache.Clear()
 	staticFolder = "../web/static"
 	cfg := &config.Config{
 		Metrics: true,
@ -84,6 +161,11 @@ func TestCreateRouter(t *testing.T) {
 			ExpectedCode: http.StatusOK,
 			Gzip:         true,
 		},
+		{
+			Name:         "service-statuses-pagination",
+			Path:         "/api/v1/statuses?page=1&pageSize=20",
+			ExpectedCode: http.StatusOK,
+		},
 		{
 			Name:         "service-status",
 			Path:         "/api/v1/statuses/core_frontend",
@ -137,6 +219,8 @@ func TestCreateRouter(t *testing.T) {
 }

 func TestHandle(t *testing.T) {
+	defer storage.Get().Clear()
+	defer cache.Clear()
 	cfg := &config.Config{
 		Web: &config.WebConfig{
 			Address: "0.0.0.0",
@ -154,10 +238,12 @@ func TestHandle(t *testing.T) {
 		},
 	}
 	config.Set(cfg)
+	defer config.Set(nil)
 	_ = os.Setenv("ROUTER_TEST", "true")
 	_ = os.Setenv("ENVIRONMENT", "dev")
 	defer os.Clearenv()
 	Handle()
+	defer Shutdown()
 	request, _ := http.NewRequest("GET", "/health", nil)
 	responseRecorder := httptest.NewRecorder()
 	server.Handler.ServeHTTP(responseRecorder, request)
@ -177,3 +263,71 @@ func TestShutdown(t *testing.T) {
 		t.Error("server should've been shut down")
 	}
 }
+
+func TestServiceStatusesHandler(t *testing.T) {
+	defer storage.Get().Clear()
+	defer cache.Clear()
+	staticFolder = "../web/static"
+	firstResult := &testSuccessfulResult
+	secondResult := &testUnsuccessfulResult
+	storage.Get().Insert(&testService, firstResult)
+	storage.Get().Insert(&testService, secondResult)
+	// Can't be bothered dealing with timezone issues on the worker that runs the automated tests
+	firstResult.Timestamp = time.Time{}
+	secondResult.Timestamp = time.Time{}
+	router := CreateRouter(&config.Config{})
+
+	type Scenario struct {
+		Name         string
+		Path         string
+		ExpectedCode int
+		ExpectedBody string
+	}
+	scenarios := []Scenario{
+		{
+			Name:         "no-pagination",
+			Path:         "/api/v1/statuses",
+			ExpectedCode: http.StatusOK,
+			ExpectedBody: `{"group_name":{"name":"name","group":"group","key":"group_name","results":[{"status":200,"hostname":"example.org","duration":150000000,"errors":null,"conditionResults":[{"condition":"[STATUS] == 200","success":true},{"condition":"[RESPONSE_TIME] \u003c 500","success":true},{"condition":"[CERTIFICATE_EXPIRATION] \u003c 72h","success":true}],"success":true,"timestamp":"0001-01-01T00:00:00Z"},{"status":200,"hostname":"example.org","duration":750000000,"errors":["error-1","error-2"],"conditionResults":[{"condition":"[STATUS] == 200","success":true},{"condition":"[RESPONSE_TIME] \u003c 500","success":false},{"condition":"[CERTIFICATE_EXPIRATION] \u003c 72h","success":false}],"success":false,"timestamp":"0001-01-01T00:00:00Z"}]}}`,
+		},
+		{
+			Name:         "pagination-first-result",
+			Path:         "/api/v1/statuses?page=1&pageSize=1",
+			ExpectedCode: http.StatusOK,
+			ExpectedBody: `{"group_name":{"name":"name","group":"group","key":"group_name","results":[{"status":200,"hostname":"example.org","duration":750000000,"errors":["error-1","error-2"],"conditionResults":[{"condition":"[STATUS] == 200","success":true},{"condition":"[RESPONSE_TIME] \u003c 500","success":false},{"condition":"[CERTIFICATE_EXPIRATION] \u003c 72h","success":false}],"success":false,"timestamp":"0001-01-01T00:00:00Z"}]}}`,
+		},
+		{
+			Name:         "pagination-second-result",
+			Path:         "/api/v1/statuses?page=2&pageSize=1",
+			ExpectedCode: http.StatusOK,
+			ExpectedBody: `{"group_name":{"name":"name","group":"group","key":"group_name","results":[{"status":200,"hostname":"example.org","duration":150000000,"errors":null,"conditionResults":[{"condition":"[STATUS] == 200","success":true},{"condition":"[RESPONSE_TIME] \u003c 500","success":true},{"condition":"[CERTIFICATE_EXPIRATION] \u003c 72h","success":true}],"success":true,"timestamp":"0001-01-01T00:00:00Z"}]}}`,
+		},
+		{
+			Name:         "pagination-no-results",
+			Path:         "/api/v1/statuses?page=5&pageSize=20",
+			ExpectedCode: http.StatusOK,
+			ExpectedBody: `{"group_name":{"name":"name","group":"group","key":"group_name","results":[]}}`,
+		},
+		{
+			Name:         "invalid-pagination-should-fall-back-to-default",
+			Path:         "/api/v1/statuses?page=INVALID&pageSize=INVALID",
+			ExpectedCode: http.StatusOK,
+			ExpectedBody: `{"group_name":{"name":"name","group":"group","key":"group_name","results":[{"status":200,"hostname":"example.org","duration":150000000,"errors":null,"conditionResults":[{"condition":"[STATUS] == 200","success":true},{"condition":"[RESPONSE_TIME] \u003c 500","success":true},{"condition":"[CERTIFICATE_EXPIRATION] \u003c 72h","success":true}],"success":true,"timestamp":"0001-01-01T00:00:00Z"},{"status":200,"hostname":"example.org","duration":750000000,"errors":["error-1","error-2"],"conditionResults":[{"condition":"[STATUS] == 200","success":true},{"condition":"[RESPONSE_TIME] \u003c 500","success":false},{"condition":"[CERTIFICATE_EXPIRATION] \u003c 72h","success":false}],"success":false,"timestamp":"0001-01-01T00:00:00Z"}]}}`,
+		},
+	}
+
+	for _, scenario := range scenarios {
+		t.Run(scenario.Name, func(t *testing.T) {
+			request, _ := http.NewRequest("GET", scenario.Path, nil)
+			responseRecorder := httptest.NewRecorder()
+			router.ServeHTTP(responseRecorder, request)
+			if responseRecorder.Code != scenario.ExpectedCode {
+				t.Errorf("%s %s should have returned %d, but returned %d instead", request.Method, request.URL, scenario.ExpectedCode, responseRecorder.Code)
+			}
+			output := responseRecorder.Body.String()
+			if output != scenario.ExpectedBody {
+				t.Errorf("expected:\n %s\n\ngot:\n %s", scenario.ExpectedBody, output)
+			}
+		})
+	}
+}
--- a/controller/favicon.go
+++ b/controller/favicon.go
@ -0,0 +1,8 @@
+package controller
+
+import "net/http"
+
+// favIconHandler handles requests for /favicon.ico
+func favIconHandler(writer http.ResponseWriter, request *http.Request) {
+	http.ServeFile(writer, request, staticFolder+"/favicon.ico")
+}
--- a/controller/spa.go
+++ b/controller/spa.go
@ -0,0 +1,8 @@
+package controller
+
+import "net/http"
+
+// spaHandler handles requests for /
+func spaHandler(writer http.ResponseWriter, request *http.Request) {
+	http.ServeFile(writer, request, staticFolder+"/index.html")
+}
--- a/controller/util.go
+++ b/controller/util.go
@ -0,0 +1,46 @@
+package controller
+
+import (
+	"net/http"
+	"strconv"
+)
+
+const (
+	// DefaultPage is the default page to use if none is specified or an invalid value is provided
+	DefaultPage = 1
+
+	// DefaultPageSize is the default page siZE to use if none is specified or an invalid value is provided
+	DefaultPageSize = 20
+
+	// MaximumPageSize is the maximum page size allowed
+	MaximumPageSize = 100
+)
+
+func extractPageAndPageSizeFromRequest(r *http.Request) (page int, pageSize int) {
+	var err error
+	if pageParameter := r.URL.Query().Get("page"); len(pageParameter) == 0 {
+		page = DefaultPage
+	} else {
+		page, err = strconv.Atoi(pageParameter)
+		if err != nil {
+			page = DefaultPage
+		}
+		if page < 1 {
+			page = DefaultPage
+		}
+	}
+	if pageSizeParameter := r.URL.Query().Get("pageSize"); len(pageSizeParameter) == 0 {
+		pageSize = DefaultPageSize
+	} else {
+		pageSize, err = strconv.Atoi(pageSizeParameter)
+		if err != nil {
+			pageSize = DefaultPageSize
+		}
+		if pageSize > MaximumPageSize {
+			pageSize = MaximumPageSize
+		} else if pageSize < 1 {
+			pageSize = DefaultPageSize
+		}
+	}
+	return
+}
--- a/controller/util_test.go
+++ b/controller/util_test.go
@ -0,0 +1,67 @@
+package controller
+
+import (
+	"fmt"
+	"net/http"
+	"testing"
+)
+
+func TestExtractPageAndPageSizeFromRequest(t *testing.T) {
+	type Scenario struct {
+		Name             string
+		Page             string
+		PageSize         string
+		ExpectedPage     int
+		ExpectedPageSize int
+	}
+	scenarios := []Scenario{
+		{
+			Page:             "1",
+			PageSize:         "20",
+			ExpectedPage:     1,
+			ExpectedPageSize: 20,
+		},
+		{
+			Page:             "2",
+			PageSize:         "10",
+			ExpectedPage:     2,
+			ExpectedPageSize: 10,
+		},
+		{
+			Page:             "2",
+			PageSize:         "10",
+			ExpectedPage:     2,
+			ExpectedPageSize: 10,
+		},
+		{
+			Page:             "1",
+			PageSize:         "999999",
+			ExpectedPage:     1,
+			ExpectedPageSize: MaximumPageSize,
+		},
+		{
+			Page:             "-1",
+			PageSize:         "-1",
+			ExpectedPage:     DefaultPage,
+			ExpectedPageSize: DefaultPageSize,
+		},
+		{
+			Page:             "invalid",
+			PageSize:         "invalid",
+			ExpectedPage:     DefaultPage,
+			ExpectedPageSize: DefaultPageSize,
+		},
+	}
+	for _, scenario := range scenarios {
+		t.Run("page-"+scenario.Page+"-pageSize-"+scenario.PageSize, func(t *testing.T) {
+			request, _ := http.NewRequest("GET", fmt.Sprintf("/api/v1/statuses?page=%s&pageSize=%s", scenario.Page, scenario.PageSize), nil)
+			actualPage, actualPageSize := extractPageAndPageSizeFromRequest(request)
+			if actualPage != scenario.ExpectedPage {
+				t.Errorf("expected %d, got %d", scenario.ExpectedPage, actualPage)
+			}
+			if actualPageSize != scenario.ExpectedPageSize {
+				t.Errorf("expected %d, got %d", scenario.ExpectedPageSize, actualPageSize)
+			}
+		})
+	}
+}
--- a/core/service-status.go
+++ b/core/service-status.go
@ -8,7 +8,7 @@ import (

 const (
 	// MaximumNumberOfResults is the maximum number of results that ServiceStatus.Results can have
-	MaximumNumberOfResults = 20
+	MaximumNumberOfResults = 100

 	// MaximumNumberOfEvents is the maximum number of events that ServiceStatus.Events can have
 	MaximumNumberOfEvents = 50
@ -58,6 +58,41 @@ func NewServiceStatus(service *Service) *ServiceStatus {
 	}
 }

+// ShallowCopy creates a shallow copy of ServiceStatus
+func (ss *ServiceStatus) ShallowCopy() *ServiceStatus {
+	return &ServiceStatus{
+		Name:    ss.Name,
+		Group:   ss.Group,
+		Key:     ss.Key,
+		Results: ss.Results,
+		Events:  ss.Events,
+		Uptime:  ss.Uptime,
+	}
+}
+
+// WithResultPagination makes a shallow copy of the ServiceStatus with only the results
+// within the range defined by the page and pageSize parameters
+func (ss *ServiceStatus) WithResultPagination(page, pageSize int) *ServiceStatus {
+	shallowCopy := ss.ShallowCopy()
+	numberOfResults := len(shallowCopy.Results)
+	start := numberOfResults - (page * pageSize)
+	end := numberOfResults - ((page - 1) * pageSize)
+	if start > numberOfResults {
+		start = -1
+	} else if start < 0 {
+		start = 0
+	}
+	if end > numberOfResults {
+		end = numberOfResults
+	}
+	if start < 0 || end < 0 {
+		shallowCopy.Results = []*Result{}
+	} else {
+		shallowCopy.Results = shallowCopy.Results[start:end]
+	}
+	return shallowCopy
+}
+
 // AddResult adds a Result to ServiceStatus.Results and makes sure that there are
 // no more than 20 results in the Results slice
 func (ss *ServiceStatus) AddResult(result *Result) {
--- a/core/service-status_test.go
+++ b/core/service-status_test.go
@ -22,10 +22,45 @@ func TestNewServiceStatus(t *testing.T) {
 func TestServiceStatus_AddResult(t *testing.T) {
 	service := &Service{Name: "name", Group: "group"}
 	serviceStatus := NewServiceStatus(service)
-	for i := 0; i < 50; i++ {
+	for i := 0; i < MaximumNumberOfResults+10; i++ {
 		serviceStatus.AddResult(&Result{Timestamp: time.Now()})
 	}
-	if len(serviceStatus.Results) != 20 {
+	if len(serviceStatus.Results) != MaximumNumberOfResults {
 		t.Errorf("expected serviceStatus.Results to not exceed a length of 20")
 	}
 }
+
+func TestServiceStatus_WithResultPagination(t *testing.T) {
+	service := &Service{Name: "name", Group: "group"}
+	serviceStatus := NewServiceStatus(service)
+	for i := 0; i < 25; i++ {
+		serviceStatus.AddResult(&Result{Timestamp: time.Now()})
+	}
+	if len(serviceStatus.WithResultPagination(1, 1).Results) != 1 {
+		t.Errorf("expected to have 1 result")
+	}
+	if len(serviceStatus.WithResultPagination(5, 0).Results) != 0 {
+		t.Errorf("expected to have 0 results")
+	}
+	if len(serviceStatus.WithResultPagination(-1, 20).Results) != 0 {
+		t.Errorf("expected to have 0 result, because the page was invalid")
+	}
+	if len(serviceStatus.WithResultPagination(1, -1).Results) != 0 {
+		t.Errorf("expected to have 0 result, because the page size was invalid")
+	}
+	if len(serviceStatus.WithResultPagination(1, 10).Results) != 10 {
+		t.Errorf("expected to have 10 results, because given a page size of 10, page 1 should have 10 elements")
+	}
+	if len(serviceStatus.WithResultPagination(2, 10).Results) != 10 {
+		t.Errorf("expected to have 10 results, because given a page size of 10, page 2 should have 10 elements")
+	}
+	if len(serviceStatus.WithResultPagination(3, 10).Results) != 5 {
+		t.Errorf("expected to have 5 results, because given a page size of 10, page 3 should have 5 elements")
+	}
+	if len(serviceStatus.WithResultPagination(4, 10).Results) != 0 {
+		t.Errorf("expected to have 0 results, because given a page size of 10, page 4 should have 0 elements")
+	}
+	if len(serviceStatus.WithResultPagination(1, 50).Results) != 25 {
+		t.Errorf("expected to have 25 results, because there's only 25 results")
+	}
+}
--- a/storage/store/memory/memory.go
+++ b/storage/store/memory/memory.go
@ -2,7 +2,6 @@ package memory

 import (
 	"encoding/gob"
-	"encoding/json"

 	"github.com/TwinProduction/gatus/core"
 	"github.com/TwinProduction/gatus/util"
@ -37,9 +36,15 @@ func NewStore(file string) (*Store, error) {
 	return store, nil
 }

-// GetAllAsJSON returns the JSON encoding of all monitored core.ServiceStatus
-func (s *Store) GetAllAsJSON() ([]byte, error) {
-	return json.Marshal(s.cache.GetAll())
+// GetAllServiceStatusesWithResultPagination returns all monitored core.ServiceStatus
+// with a subset of core.Result defined by the page and pageSize parameters
+func (s *Store) GetAllServiceStatusesWithResultPagination(page, pageSize int) map[string]*core.ServiceStatus {
+	serviceStatuses := s.cache.GetAll()
+	pagedServiceStatuses := make(map[string]*core.ServiceStatus, len(serviceStatuses))
+	for k, v := range serviceStatuses {
+		pagedServiceStatuses[k] = v.(*core.ServiceStatus).WithResultPagination(page, pageSize)
+	}
+	return pagedServiceStatuses
 }

 // GetServiceStatus returns the service status for a given service name in the given group
@ -53,7 +58,7 @@ func (s *Store) GetServiceStatusByKey(key string) *core.ServiceStatus {
 	if serviceStatus == nil {
 		return nil
 	}
-	return serviceStatus.(*core.ServiceStatus)
+	return serviceStatus.(*core.ServiceStatus).ShallowCopy()
 }

 // Insert adds the observed result for the specified service into the store
--- a/storage/store/memory/memory_test.go
+++ b/storage/store/memory/memory_test.go
@ -204,7 +204,7 @@ func TestStore_GetServiceStatusByKey(t *testing.T) {
 	}
 }

-func TestStore_GetAllAsJSON(t *testing.T) {
+func TestStore_GetAllServiceStatusesWithResultPagination(t *testing.T) {
 	store, _ := NewStore("")
 	firstResult := &testSuccessfulResult
 	secondResult := &testUnsuccessfulResult
@ -213,13 +213,19 @@ func TestStore_GetAllAsJSON(t *testing.T) {
 	// Can't be bothered dealing with timezone issues on the worker that runs the automated tests
 	firstResult.Timestamp = time.Time{}
 	secondResult.Timestamp = time.Time{}
-	output, err := store.GetAllAsJSON()
-	if err != nil {
-		t.Fatal("shouldn't have returned an error, got", err.Error())
+	serviceStatuses := store.GetAllServiceStatusesWithResultPagination(1, 20)
+	if len(serviceStatuses) != 1 {
+		t.Fatal("expected 1 service status")
 	}
-	expectedOutput := `{"group_name":{"name":"name","group":"group","key":"group_name","results":[{"status":200,"hostname":"example.org","duration":150000000,"errors":null,"conditionResults":[{"condition":"[STATUS] == 200","success":true},{"condition":"[RESPONSE_TIME] \u003c 500","success":true},{"condition":"[CERTIFICATE_EXPIRATION] \u003c 72h","success":true}],"success":true,"timestamp":"0001-01-01T00:00:00Z"},{"status":200,"hostname":"example.org","duration":750000000,"errors":["error-1","error-2"],"conditionResults":[{"condition":"[STATUS] == 200","success":true},{"condition":"[RESPONSE_TIME] \u003c 500","success":false},{"condition":"[CERTIFICATE_EXPIRATION] \u003c 72h","success":false}],"success":false,"timestamp":"0001-01-01T00:00:00Z"}]}}`
-	if string(output) != expectedOutput {
-		t.Errorf("expected:\n %s\n\ngot:\n %s", expectedOutput, string(output))
+	actual, exists := serviceStatuses[util.ConvertGroupAndServiceToKey(testService.Group, testService.Name)]
+	if !exists {
+		t.Fatal("expected service status to exist")
+	}
+	if len(actual.Results) != 2 {
+		t.Error("expected 2 results, got", len(actual.Results))
+	}
+	if len(actual.Events) != 2 {
+		t.Error("expected 2 events, got", len(actual.Events))
 	}
 }

--- a/storage/store/store.go
+++ b/storage/store/store.go
@ -8,7 +8,8 @@ import (
 // Store is the interface that each stores should implement
 type Store interface {
 	// GetAllAsJSON returns the JSON encoding of all monitored core.ServiceStatus
-	GetAllAsJSON() ([]byte, error)
+	// with a subset of core.Result defined by the page and pageSize parameters
+	GetAllServiceStatusesWithResultPagination(page, pageSize int) map[string]*core.ServiceStatus

 	// GetServiceStatus returns the service status for a given service name in the given group
 	GetServiceStatus(groupName, serviceName string) *core.ServiceStatus
--- a/storage/store/store_bench_test.go
+++ b/storage/store/store_bench_test.go
@ -102,7 +102,7 @@ func BenchmarkStore_GetAllAsJSON(b *testing.B) {
 		scenario.Store.Insert(&testService, &testUnsuccessfulResult)
 		b.Run(scenario.Name, func(b *testing.B) {
 			for n := 0; n < b.N; n++ {
-				scenario.Store.GetAllAsJSON()
+				scenario.Store.GetAllServiceStatusesWithResultPagination(1, 20)
 			}
 			b.ReportAllocs()
 		})
--- a/watchdog/watchdog.go
+++ b/watchdog/watchdog.go
@ -18,31 +18,12 @@ var (
 	monitoringMutex sync.Mutex
 )

-// GetServiceStatusesAsJSON the JSON encoding of all core.ServiceStatus recorded
-func GetServiceStatusesAsJSON() ([]byte, error) {
-	return storage.Get().GetAllAsJSON()
-}
-
-// GetUptimeByKey returns the uptime of a service based on the ServiceStatus key
-func GetUptimeByKey(key string) *core.Uptime {
-	serviceStatus := storage.Get().GetServiceStatusByKey(key)
-	if serviceStatus == nil {
-		return nil
-	}
-	return serviceStatus.Uptime
-}
-
-// GetServiceStatusByKey returns the uptime of a service based on its ServiceStatus key
-func GetServiceStatusByKey(key string) *core.ServiceStatus {
-	return storage.Get().GetServiceStatusByKey(key)
-}
-
 // Monitor loops over each services and starts a goroutine to monitor each services separately
 func Monitor(cfg *config.Config) {
 	for _, service := range cfg.Services {
-		go monitor(service)
-		// To prevent multiple requests from running at the same time
+		// To prevent multiple requests from running at the same time, we'll wait for a little bit before each iteration
 		time.Sleep(1111 * time.Millisecond)
+		go monitor(service)
 	}
 }

--- a/web/app/src/components/Pagination.vue
+++ b/web/app/src/components/Pagination.vue
@ -0,0 +1,34 @@
+<template>
+  <div class="mt-2 flex">
+    <div class="flex-1">
+      <button v-if="currentPage < 5" @click="nextPage" class="bg-gray-200 hover:bg-gray-300 px-2 rounded border-gray-300 border text-monospace">&lt;</button>
+    </div>
+    <div class="flex-1 text-right">
+      <button v-if="currentPage > 1" @click="previousPage" class="bg-gray-200 hover:bg-gray-300 px-2 rounded border-gray-300 border text-monospace">&gt;</button>
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name: 'Pagination',
+  components: {},
+  emits: ['page'],
+  methods: {
+    nextPage() {
+      this.currentPage++;
+      this.$emit('page', this.currentPage);
+    },
+    previousPage() {
+      this.currentPage--;
+      this.$emit('page', this.currentPage);
+    }
+  },
+  data() {
+    return {
+      currentPage: 1,
+    }
+  }
+}
+</script>
--- a/web/app/src/components/Service.vue
+++ b/web/app/src/components/Service.vue
@ -1,37 +1,48 @@
 <template>
-  <div class='service px-3 py-3 border-l border-r border-t rounded-none hover:bg-gray-100' v-if="data && data.results && data.results.length">
+  <div class='service px-3 py-3 border-l border-r border-t rounded-none hover:bg-gray-100' v-if="data">
    <div class='flex flex-wrap mb-2'>
      <div class='w-3/4'>
        <router-link :to="generatePath()" class="font-bold hover:text-blue-800 hover:underline" title="View detailed service health">
          {{ data.name }}
        </router-link>
-        <span class='text-gray-500 font-light'> | {{ data.results[data.results.length - 1].hostname }}</span>
+        <span v-if="data.results && data.results.length" class='text-gray-500 font-light'> | {{ data.results[data.results.length - 1].hostname }}</span>
      </div>
      <div class='w-1/4 text-right'>
-        <span class='font-light status-min-max-ms'>
+        <span class='font-light status-min-max-ms' v-if="data.results && data.results.length">
          {{ (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + '-' + maxResponseTime)) }}ms
        </span>
      </div>
    </div>
    <div>
      <div class='status-over-time flex flex-row'>
-        <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 v-if="data.results && data.results.length">
+          <slot v-if="data.results.length < maximumNumberOfResults">
+            <span v-for="filler in maximumNumberOfResults - data.results.length" :key="filler" class="status rounded border border-dashed">&nbsp;</span>
+          </slot>
+          <slot v-for="result in data.results" :key="result">
+            <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>
        </slot>
-        <slot v-for="result in data.results" :key="result">
-          <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 v-else>
+          <span v-for="filler in maximumNumberOfResults" :key="filler" class="status rounded border border-dashed">&nbsp;</span>
        </slot>
      </div>
    </div>
    <div class='flex flex-wrap status-time-ago'>
-      <!-- Show "Last update at" instead? -->
-      <div class='w-1/2'>
-        {{ generatePrettyTimeAgo(data.results[0].timestamp) }}
-      </div>
-      <div class='w-1/2 text-right'>
-        {{ generatePrettyTimeAgo(data.results[data.results.length - 1].timestamp) }}
-      </div>
+      <slot v-if="data.results && data.results.length">
+        <div class='w-1/2'>
+          {{ generatePrettyTimeAgo(data.results[0].timestamp) }}
+        </div>
+        <div class='w-1/2 text-right'>
+          {{ generatePrettyTimeAgo(data.results[data.results.length - 1].timestamp) }}
+        </div>
+      </slot>
+      <slot v-else>
+        <div class='w-1/2'>
+          &nbsp;
+        </div>
+      </slot>
    </div>
  </div>
 </template>
@ -153,7 +164,7 @@ export default {
  content: "X";
 }

-@media screen and (max-width: 450px) {
+@media screen and (max-width: 600px) {
  .status.status-success::after,
  .status.status-failure::after {
    content: " ";
--- a/web/app/src/views/Details.vue
+++ b/web/app/src/views/Details.vue
@ -7,6 +7,7 @@
      <h1 class="text-xl xl:text-3xl text-monospace text-gray-400">RECENT CHECKS</h1>
      <hr class="mb-4" />
      <Service :data="serviceStatus" :maximumNumberOfResults="20" @showTooltip="showTooltip" />
+      <Pagination @page="changePage"/>
    </slot>
    <div v-if="uptime" class="mt-12">
      <h1 class="text-xl xl:text-3xl text-monospace text-gray-400">UPTIME</h1>
@ -73,10 +74,12 @@ import Settings from '@/components/Settings.vue'
 import Service from '@/components/Service.vue';
 import {SERVER_URL} from "@/main.js";
 import {helper} from "@/mixins/helper.js";
+import Pagination from "@/components/Pagination";

 export default {
  name: 'Details',
  components: {
+    Pagination,
    Service,
    Settings,
  },
@ -85,7 +88,7 @@ export default {
  methods: {
    fetchData() {
      //console.log("[Details][fetchData] Fetching data");
-      fetch(`${this.serverUrl}/api/v1/statuses/${this.$route.params.key}`)
+      fetch(`${this.serverUrl}/api/v1/statuses/${this.$route.params.key}?page=${this.currentPage}`)
          .then(response => response.json())
          .then(data => {
            if (JSON.stringify(this.serviceStatus) !== JSON.stringify(data)) {
@ -138,7 +141,11 @@ export default {
    },
    showTooltip(result, event) {
      this.$emit('showTooltip', result, event);
-    }
+    },
+    changePage(page) {
+      this.currentPage = page;
+      this.fetchData();
+    },
  },
  data() {
    return {
@ -147,6 +154,7 @@ export default {
      uptime: {"7d": 0, "24h": 0, "1h": 0},
      // Since this page isn't at the root, we need to modify the server URL a bit
      serverUrl: SERVER_URL === '.' ? '..' : SERVER_URL,
+      currentPage: 1,
    }
  },
  created() {
--- a/web/app/src/views/Home.vue
+++ b/web/app/src/views/Home.vue
@ -1,16 +1,19 @@
 <template>
  <Services :serviceStatuses="serviceStatuses" :showStatusOnHover="true" @showTooltip="showTooltip"/>
+  <Pagination @page="changePage"/>
  <Settings @refreshData="fetchData"/>
 </template>

 <script>
 import Settings from '@/components/Settings.vue'
 import Services from '@/components/Services.vue';
+import Pagination from "@/components/Pagination";
 import {SERVER_URL} from "@/main.js";

 export default {
  name: 'Home',
  components: {
+    Pagination,
    Services,
    Settings,
  },
@ -18,7 +21,7 @@ export default {
  methods: {
    fetchData() {
      //console.log("[Home][fetchData] Fetching data");
-      fetch(`${SERVER_URL}/api/v1/statuses`)
+      fetch(`${SERVER_URL}/api/v1/statuses?page=${this.currentPage}`)
          .then(response => response.json())
          .then(data => {
            if (JSON.stringify(this.serviceStatuses) !== JSON.stringify(data)) {
@ -28,11 +31,16 @@ export default {
    },
    showTooltip(result, event) {
      this.$emit('showTooltip', result, event);
-    }
+    },
+    changePage(page) {
+      this.currentPage = page;
+      this.fetchData();
+    },
  },
  data() {
    return {
-      serviceStatuses: {}
+      serviceStatuses: {},
+      currentPage: 1
    }
  },
  created() {
--- a/web/static/css/app.css
+++ b/web/static/css/app.css
--- a/web/static/js/app.js
+++ b/web/static/js/app.js