From ee01adb6037540480d3460dd6cbd190f59af84cd Mon Sep 17 00:00:00 2001
From: PythonGermany <97847597+PythonGermany@users.noreply.github.com>
Date: Sat, 29 Nov 2025 01:05:39 +0100
Subject: [PATCH] fix(ui): Show correct oldest result timestamp (#1405)

* fix(ui): Show correct oldest result timestamp

* fix(ui): Request correct result page size in home view

* refactor(ui): Use constant for result page size

---------

Co-authored-by: TwiN <twin@linux.com>
---
 web/app/src/components/EndpointCard.vue |  3 ++-
 web/app/src/views/EndpointDetails.vue   |  7 ++++---
 web/app/src/views/Home.vue              | 13 +++++++------
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/web/app/src/components/EndpointCard.vue b/web/app/src/components/EndpointCard.vue
index 7069d6eb..e757cdab 100644
--- a/web/app/src/components/EndpointCard.vue
+++ b/web/app/src/components/EndpointCard.vue
@@ -154,7 +154,8 @@ const formattedResponseTime = computed(() => {
 
 const oldestResultTime = computed(() => {
   if (!props.endpoint.results || props.endpoint.results.length === 0) return ''
-  return generatePrettyTimeAgo(props.endpoint.results[0].timestamp)
+  const oldestResultIndex = Math.max(0, props.endpoint.results.length - props.maxResults)
+  return generatePrettyTimeAgo(props.endpoint.results[oldestResultIndex].timestamp)
 })
 
 const newestResultTime = computed(() => {
diff --git a/web/app/src/views/EndpointDetails.vue b/web/app/src/views/EndpointDetails.vue
index 8b9de9b0..2895e659 100644
--- a/web/app/src/views/EndpointDetails.vue
+++ b/web/app/src/views/EndpointDetails.vue
@@ -89,13 +89,13 @@
                 <EndpointCard 
                   v-if="endpointStatus"
                   :endpoint="endpointStatus"
-                  :maxResults="50"
+                  :maxResults="resultPageSize"
                   :showAverageResponseTime="showAverageResponseTime"
                   @showTooltip="showTooltip"
                   class="border-0 shadow-none bg-transparent p-0"
                 />
                 <div v-if="endpointStatus && endpointStatus.key" class="pt-4 border-t">
-                  <Pagination @page="changePage" :numberOfResultsPerPage="50" :currentPageProp="currentPage" />
+                  <Pagination @page="changePage" :numberOfResultsPerPage="resultPageSize" :currentPageProp="currentPage" />
                 </div>
               </div>
             </CardContent>
@@ -224,6 +224,7 @@ const endpointStatus = ref(null) // For paginated historical data
 const currentStatus = ref(null) // For current/latest status (always page 1)
 const events = ref([])
 const currentPage = ref(1)
+const resultPageSize = 50
 const showResponseTimeChartAndBadges = ref(false)
 const showAverageResponseTime = ref(false)
 const selectedChartDuration = ref('24h')
@@ -304,7 +305,7 @@ const lastCheckTime = computed(() => {
 const fetchData = async () => {
   isRefreshing.value = true
   try {
-    const response = await fetch(`${serverUrl}/api/v1/endpoints/${route.params.key}/statuses?page=${currentPage.value}&pageSize=50`, {
+    const response = await fetch(`${serverUrl}/api/v1/endpoints/${route.params.key}/statuses?page=${currentPage.value}&pageSize=${resultPageSize}`, {
       credentials: 'include'
     })
     
diff --git a/web/app/src/views/Home.vue b/web/app/src/views/Home.vue
index 7091b2bc..32001277 100644
--- a/web/app/src/views/Home.vue
+++ b/web/app/src/views/Home.vue
@@ -82,7 +82,7 @@
                     v-for="suite in items.suites"
                     :key="suite.key"
                     :suite="suite"
-                    :maxResults="50"
+                    :maxResults="resultPageSize"
                     @showTooltip="showTooltip"
                   />
                 </div>
@@ -96,7 +96,7 @@
                     v-for="endpoint in items.endpoints"
                     :key="endpoint.key"
                     :endpoint="endpoint"
-                    :maxResults="50"
+                    :maxResults="resultPageSize"
                     :showAverageResponseTime="showAverageResponseTime"
                     @showTooltip="showTooltip"
                   />
@@ -116,7 +116,7 @@
                 v-for="suite in paginatedSuites"
                 :key="suite.key"
                 :suite="suite"
-                :maxResults="50"
+                :maxResults="resultPageSize"
                 @showTooltip="showTooltip"
               />
             </div>
@@ -130,7 +130,7 @@
                 v-for="endpoint in paginatedEndpoints"
                 :key="endpoint.key"
                 :endpoint="endpoint"
-                :maxResults="50"
+                :maxResults="resultPageSize"
                 :showAverageResponseTime="showAverageResponseTime"
                 @showTooltip="showTooltip"
               />
@@ -225,6 +225,7 @@ const showAverageResponseTime = ref(true)
 const groupByGroup = ref(false)
 const sortBy = ref(localStorage.getItem('gatus:sort-by') || 'name')
 const uncollapsedGroups = ref(new Set())
+const resultPageSize = 50
 
 const filteredEndpoints = computed(() => {
   let filtered = [...endpointStatuses.value]
@@ -433,7 +434,7 @@ const fetchData = async () => {
   }
   try {
     // Fetch endpoints
-    const endpointResponse = await fetch(`${SERVER_URL}/api/v1/endpoints/statuses?page=1&pageSize=100`, {
+    const endpointResponse = await fetch(`${SERVER_URL}/api/v1/endpoints/statuses?page=1&pageSize=${resultPageSize}`, {
       credentials: 'include'
     })
     if (endpointResponse.status === 200) {
@@ -444,7 +445,7 @@ const fetchData = async () => {
     }
     
     // Fetch suites
-    const suiteResponse = await fetch(`${SERVER_URL}/api/v1/suites/statuses?page=1&pageSize=100`, {
+    const suiteResponse = await fetch(`${SERVER_URL}/api/v1/suites/statuses?page=1&pageSize=${resultPageSize}`, {
       credentials: 'include'
     })
     if (suiteResponse.status === 200) {