feat(badge): Implement UP/DOWN status badge (#291)

* Implement status badge endpoint

* Update integration tests for status badge generation

* Add status badge in the UI

* Update static assets

* Update README with status badge description

* Rename constants to pascal-case

* Check for success of the endpoint conditions

* Rename status badge to health badge

README.md

@@ -78,6 +78,7 @@ Have any feedback or want to share your good/bad experience with Gatus? Feel fre
   - [Exposing Gatus on a custom port](#exposing-gatus-on-a-custom-port)
   - [Badges](#badges)
     - [Uptime](#uptime)
+    - [Health](#health)
     - [Response time](#response-time)
   - [API](#api)
   - [High level design overview](#high-level-design-overview)
@@ -1407,6 +1408,23 @@ Example:
 If you'd like to see a visual example of each badge available, you can simply navigate to the endpoint's detail page.
 
 
+#### Health
+![Health](https://status.twin.sh/api/v1/endpoints/core_blog-external/health/badge.svg)
+
+The path to generate a badge is the following:
+```
+/api/v1/endpoints/{key}/health/badge.svg
+```
+Where:
+- `{key}` has the pattern `<GROUP_NAME>_<ENDPOINT_NAME>` in which both variables have ` `, `/`, `_`, `,` and `.` replaced by `-`.
+
+For instance, if you want the current status of the endpoint `frontend` in the group `core`, 
+the URL would look like this:
+```
+https://example.com/api/v1/endpoints/core_frontend/health/badge.svg
+```
+
+
 #### Response time
 ![Response time 1h](https://status.twin.sh/api/v1/endpoints/core_blog-external/response-times/1h/badge.svg)
 ![Response time 24h](https://status.twin.sh/api/v1/endpoints/core_blog-external/response-times/24h/badge.svg)

controller/handler/badge.go

@@ -9,6 +9,7 @@ import (
 
 	"github.com/TwiN/gatus/v3/storage/store"
 	"github.com/TwiN/gatus/v3/storage/store/common"
+	"github.com/TwiN/gatus/v3/storage/store/common/paging"
 	"github.com/gorilla/mux"
 )
 
@@ -21,6 +22,12 @@ const (
 	badgeColorHexVeryBad  = "#c7130a"
 )
 
+const (
+	HealthStatusUp      = "up"
+	HealthStatusDown    = "down"
+	HealthStatusUnknown = "?"
+)
+
 // UptimeBadge handles the automatic generation of badge based on the group name and endpoint name passed.
 //
 // Valid values for {duration}: 7d, 24h, 1h
@@ -95,6 +102,37 @@ func ResponseTimeBadge(writer http.ResponseWriter, request *http.Request) {
 	_, _ = writer.Write(generateResponseTimeBadgeSVG(duration, averageResponseTime))
 }
 
+// HealthBadge handles the automatic generation of badge based on the group name and endpoint name passed.
+func HealthBadge(writer http.ResponseWriter, request *http.Request) {
+	variables := mux.Vars(request)
+	key := variables["key"]
+	pagingConfig := paging.NewEndpointStatusParams()
+	status, err := store.Get().GetEndpointStatusByKey(key, pagingConfig.WithResults(1, 1))
+	if err != nil {
+		if err == common.ErrEndpointNotFound {
+			http.Error(writer, err.Error(), http.StatusNotFound)
+		} else if err == common.ErrInvalidTimeRange {
+			http.Error(writer, err.Error(), http.StatusBadRequest)
+		} else {
+			http.Error(writer, err.Error(), http.StatusInternalServerError)
+		}
+		return
+	}
+	healthStatus := HealthStatusUnknown
+	if len(status.Results) > 0 {
+		if status.Results[0].Success {
+			healthStatus = HealthStatusUp
+		} else {
+			healthStatus = HealthStatusDown
+		}
+	}
+	writer.Header().Set("Content-Type", "image/svg+xml")
+	writer.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate")
+	writer.Header().Set("Expires", "0")
+	writer.WriteHeader(http.StatusOK)
+	_, _ = writer.Write(generateHealthBadgeSVG(healthStatus))
+}
+
 func generateUptimeBadgeSVG(duration string, uptime float64) []byte {
 	var labelWidth, valueWidth, valueWidthAdjustment int
 	switch duration {
@@ -223,3 +261,61 @@ func getBadgeColorFromResponseTime(responseTime int) string {
 	}
 	return badgeColorHexVeryBad
 }
+
+func generateHealthBadgeSVG(healthStatus string) []byte {
+	var labelWidth, valueWidth int
+	switch healthStatus {
+	case HealthStatusUp:
+		valueWidth = 18
+	case HealthStatusDown:
+		valueWidth = 36
+	case HealthStatusUnknown:
+		valueWidth = 10
+	default:
+	}
+	color := getBadgeColorFromHealth(healthStatus)
+	labelWidth = 48
+
+	width := labelWidth + valueWidth
+	labelX := labelWidth / 2
+	valueX := labelWidth + (valueWidth / 2)
+	svg := []byte(fmt.Sprintf(`<svg xmlns="http://www.w3.org/2000/svg" width="%d" height="20">
+  <linearGradient id="b" x2="0" y2="100%%">
+    <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
+    <stop offset="1" stop-opacity=".1"/>
+  </linearGradient>
+  <mask id="a">
+    <rect width="%d" height="20" rx="3" fill="#fff"/>
+  </mask>
+  <g mask="url(#a)">
+    <path fill="#555" d="M0 0h%dv20H0z"/>
+    <path fill="%s" d="M%d 0h%dv20H%dz"/>
+    <path fill="url(#b)" d="M0 0h%dv20H0z"/>
+  </g>
+  <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
+    <text x="%d" y="15" fill="#010101" fill-opacity=".3">
+      status
+    </text>
+    <text x="%d" y="14">
+      status
+    </text>
+    <text x="%d" y="15" fill="#010101" fill-opacity=".3">
+      %s
+    </text>
+    <text x="%d" y="14">
+      %s
+    </text>
+  </g>
+</svg>`, width, width, labelWidth, color, labelWidth, valueWidth, labelWidth, width, labelX, labelX, valueX, healthStatus, valueX, healthStatus))
+
+	return svg
+}
+
+func getBadgeColorFromHealth(healthStatus string) string {
+	if healthStatus == HealthStatusUp {
+		return badgeColorHexAwesome
+	} else if healthStatus == HealthStatusDown {
+		return badgeColorHexVeryBad
+	}
+	return badgeColorHexPassable
+}

controller/handler/badge_test.go

@@ -13,7 +13,7 @@ import (
 	"github.com/TwiN/gatus/v3/watchdog"
 )
 
-func TestUptimeBadge(t *testing.T) {
+func TestBadge(t *testing.T) {
 	defer store.Get().Clear()
 	defer cache.Clear()
 	cfg := &config.Config{
@@ -29,8 +29,8 @@ func TestUptimeBadge(t *testing.T) {
 			},
 		},
 	}
-	watchdog.UpdateEndpointStatuses(cfg.Endpoints[0], &core.Result{Success: true, Duration: time.Millisecond, Timestamp: time.Now()})
-	watchdog.UpdateEndpointStatuses(cfg.Endpoints[1], &core.Result{Success: false, Duration: time.Second, Timestamp: time.Now()})
+	watchdog.UpdateEndpointStatuses(cfg.Endpoints[0], &core.Result{Success: true, Connected: true, Duration: time.Millisecond, Timestamp: time.Now()})
+	watchdog.UpdateEndpointStatuses(cfg.Endpoints[1], &core.Result{Success: false, Connected: false, Duration: time.Second, Timestamp: time.Now()})
 	router := CreateRouter("../../web/static", cfg.Security, nil, cfg.Metrics)
 	type Scenario struct {
 		Name         string
@@ -89,6 +89,21 @@ func TestUptimeBadge(t *testing.T) {
 			Path:         "/api/v1/endpoints/invalid_key/response-times/7d/badge.svg",
 			ExpectedCode: http.StatusNotFound,
 		},
+		{
+			Name:         "badge-health-up",
+			Path:         "/api/v1/endpoints/core_frontend/health/badge.svg",
+			ExpectedCode: http.StatusOK,
+		},
+		{
+			Name:         "badge-health-down",
+			Path:         "/api/v1/endpoints/core_backend/health/badge.svg",
+			ExpectedCode: http.StatusOK,
+		},
+		{
+			Name:         "badge-health-for-invalid-key",
+			Path:         "/api/v1/endpoints/invalid_key/health/badge.svg",
+			ExpectedCode: http.StatusNotFound,
+		},
 		{
 			Name:         "chart-response-time-24h",
 			Path:         "/api/v1/endpoints/core_backend/response-times/24h/chart.svg",
@@ -219,3 +234,30 @@ func TestGetBadgeColorFromResponseTime(t *testing.T) {
 		})
 	}
 }
+
+func TestGetBadgeColorFromHealth(t *testing.T) {
+	scenarios := []struct {
+		HealthStatus  string
+		ExpectedColor string
+	}{
+		{
+			HealthStatus:  HealthStatusUp,
+			ExpectedColor: badgeColorHexAwesome,
+		},
+		{
+			HealthStatus:  HealthStatusDown,
+			ExpectedColor: badgeColorHexVeryBad,
+		},
+		{
+			HealthStatus:  HealthStatusUnknown,
+			ExpectedColor: badgeColorHexPassable,
+		},
+	}
+	for _, scenario := range scenarios {
+		t.Run("health-"+scenario.HealthStatus, func(t *testing.T) {
+			if getBadgeColorFromHealth(scenario.HealthStatus) != scenario.ExpectedColor {
+				t.Errorf("expected %s from %s, got %v", scenario.ExpectedColor, scenario.HealthStatus, getBadgeColorFromHealth(scenario.HealthStatus))
+			}
+		})
+	}
+}

controller/handler/handler.go

@@ -30,6 +30,7 @@ func CreateRouter(staticFolder string, securityConfig *security.Config, uiConfig
 	unprotected.Handle("/v1/config", ConfigHandler{securityConfig: securityConfig}).Methods("GET")
 	protected.HandleFunc("/v1/endpoints/statuses", EndpointStatuses).Methods("GET") // No GzipHandler for this one, because we cache the content as Gzipped already
 	protected.HandleFunc("/v1/endpoints/{key}/statuses", GzipHandlerFunc(EndpointStatus)).Methods("GET")
+	unprotected.HandleFunc("/v1/endpoints/{key}/health/badge.svg", HealthBadge).Methods("GET")
 	unprotected.HandleFunc("/v1/endpoints/{key}/uptimes/{duration}/badge.svg", UptimeBadge).Methods("GET")
 	unprotected.HandleFunc("/v1/endpoints/{key}/response-times/{duration}/badge.svg", ResponseTimeBadge).Methods("GET")
 	unprotected.HandleFunc("/v1/endpoints/{key}/response-times/{duration}/chart.svg", ResponseTimeChart).Methods("GET")

web/app/src/views/Details.vue

@@ -20,6 +20,10 @@
       <h1 class="text-xl xl:text-3xl font-mono text-gray-400">UPTIME</h1>
       <hr/>
       <div class="flex space-x-4 text-center text-2xl mt-6 relative bottom-2 mb-10">
+        <div class="flex-1">
+          <h2 class="text-sm text-gray-400 mb-1">Now</h2>
+          <img :src="generateHealthBadgeImageURL()" alt="health badge" class="mx-auto"/>
+        </div>
         <div class="flex-1">
           <h2 class="text-sm text-gray-400 mb-1">Last 7 days</h2>
           <img :src="generateUptimeBadgeImageURL('7d')" alt="7d uptime badge" class="mx-auto"/>
@@ -149,6 +153,9 @@ export default {
         }
       });
     },
+    generateHealthBadgeImageURL() {
+      return `${this.serverUrl}/api/v1/endpoints/${this.endpointStatus.key}/health/badge.svg`;
+    },
     generateUptimeBadgeImageURL(duration) {
       return `${this.serverUrl}/api/v1/endpoints/${this.endpointStatus.key}/uptimes/${duration}/badge.svg`;
     },