fix(ui): Modernize response time chart (#1373)

Author: TwiN

api/api.go

@@ -84,6 +84,7 @@ func (a *API) createRouter(cfg *config.Config) *fiber.App {
 	unprotectedAPIRouter.Get("/v1/endpoints/:key/response-times/:duration", ResponseTimeRaw)
 	unprotectedAPIRouter.Get("/v1/endpoints/:key/response-times/:duration/badge.svg", ResponseTimeBadge(cfg))
 	unprotectedAPIRouter.Get("/v1/endpoints/:key/response-times/:duration/chart.svg", ResponseTimeChart)
+	unprotectedAPIRouter.Get("/v1/endpoints/:key/response-times/:duration/history", ResponseTimeHistory)
 	// This endpoint requires authz with bearer token, so technically it is protected
 	unprotectedAPIRouter.Post("/v1/endpoints/:key/external", CreateExternalEndpointResult(cfg))
 	// SPA

api/chart.go

@@ -126,3 +126,63 @@ func ResponseTimeChart(c *fiber.Ctx) error {
 	}
 	return nil
 }
+
+func ResponseTimeHistory(c *fiber.Ctx) error {
+	duration := c.Params("duration")
+	var from time.Time
+	switch duration {
+	case "30d":
+		from = time.Now().Truncate(time.Hour).Add(-30 * 24 * time.Hour)
+	case "7d":
+		from = time.Now().Truncate(time.Hour).Add(-7 * 24 * time.Hour)
+	case "24h":
+		from = time.Now().Truncate(time.Hour).Add(-24 * time.Hour)
+	default:
+		return c.Status(400).SendString("Durations supported: 30d, 7d, 24h")
+	}
+	endpointKey, err := url.QueryUnescape(c.Params("key"))
+	if err != nil {
+		return c.Status(400).SendString("invalid key encoding")
+	}
+	hourlyAverageResponseTime, err := store.Get().GetHourlyAverageResponseTimeByKey(endpointKey, from, time.Now())
+	if err != nil {
+		if errors.Is(err, common.ErrEndpointNotFound) {
+			return c.Status(404).SendString(err.Error())
+		}
+		if errors.Is(err, common.ErrInvalidTimeRange) {
+			return c.Status(400).SendString(err.Error())
+		}
+		return c.Status(500).SendString(err.Error())
+	}
+	if len(hourlyAverageResponseTime) == 0 {
+		return c.Status(200).JSON(map[string]interface{}{
+			"timestamps": []int64{},
+			"values":     []int{},
+		})
+	}
+	hourlyTimestamps := make([]int, 0, len(hourlyAverageResponseTime))
+	earliestTimestamp := int64(0)
+	for hourlyTimestamp := range hourlyAverageResponseTime {
+		hourlyTimestamps = append(hourlyTimestamps, int(hourlyTimestamp))
+		if earliestTimestamp == 0 || hourlyTimestamp < earliestTimestamp {
+			earliestTimestamp = hourlyTimestamp
+		}
+	}
+	for earliestTimestamp > from.Unix() {
+		earliestTimestamp -= int64(time.Hour.Seconds())
+		hourlyTimestamps = append(hourlyTimestamps, int(earliestTimestamp))
+	}
+	sort.Ints(hourlyTimestamps)
+	timestamps := make([]int64, 0, len(hourlyTimestamps))
+	values := make([]int, 0, len(hourlyTimestamps))
+	for _, hourlyTimestamp := range hourlyTimestamps {
+		timestamp := int64(hourlyTimestamp)
+		averageResponseTime := hourlyAverageResponseTime[timestamp]
+		timestamps = append(timestamps, timestamp*1000)
+		values = append(values, averageResponseTime)
+	}
+	return c.Status(http.StatusOK).JSON(map[string]interface{}{
+		"timestamps": timestamps,
+		"values":     values,
+	})
+}

api/chart_test.go

@@ -81,3 +81,69 @@ func TestResponseTimeChart(t *testing.T) {
 		})
 	}
 }
+
+func TestResponseTimeHistory(t *testing.T) {
+	defer store.Get().Clear()
+	defer cache.Clear()
+	cfg := &config.Config{
+		Metrics: true,
+		Endpoints: []*endpoint.Endpoint{
+			{
+				Name:  "frontend",
+				Group: "core",
+			},
+			{
+				Name:  "backend",
+				Group: "core",
+			},
+		},
+	}
+	watchdog.UpdateEndpointStatus(cfg.Endpoints[0], &endpoint.Result{Success: true, Duration: time.Millisecond, Timestamp: time.Now()})
+	watchdog.UpdateEndpointStatus(cfg.Endpoints[1], &endpoint.Result{Success: false, Duration: time.Second, Timestamp: time.Now()})
+	api := New(cfg)
+	router := api.Router()
+	type Scenario struct {
+		Name         string
+		Path         string
+		ExpectedCode int
+	}
+	scenarios := []Scenario{
+		{
+			Name:         "history-response-time-24h",
+			Path:         "/api/v1/endpoints/core_backend/response-times/24h/history",
+			ExpectedCode: http.StatusOK,
+		},
+		{
+			Name:         "history-response-time-7d",
+			Path:         "/api/v1/endpoints/core_frontend/response-times/7d/history",
+			ExpectedCode: http.StatusOK,
+		},
+		{
+			Name:         "history-response-time-30d",
+			Path:         "/api/v1/endpoints/core_frontend/response-times/30d/history",
+			ExpectedCode: http.StatusOK,
+		},
+		{
+			Name:         "history-response-time-with-invalid-duration",
+			Path:         "/api/v1/endpoints/core_backend/response-times/3d/history",
+			ExpectedCode: http.StatusBadRequest,
+		},
+		{
+			Name:         "history-response-time-for-invalid-key",
+			Path:         "/api/v1/endpoints/invalid_key/response-times/7d/history",
+			ExpectedCode: http.StatusNotFound,
+		},
+	}
+	for _, scenario := range scenarios {
+		t.Run(scenario.Name, func(t *testing.T) {
+			request := httptest.NewRequest("GET", scenario.Path, http.NoBody)
+			response, err := router.Test(request)
+			if err != nil {
+				t.Fatal(err)
+			}
+			if response.StatusCode != scenario.ExpectedCode {
+				t.Errorf("%s %s should have returned %d, but returned %d instead", request.Method, request.URL, scenario.ExpectedCode, response.StatusCode)
+			}
+		})
+	}
+}