YakumoLabs/gatus
4
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): Show correct oldest result timestamp (#1405)

Browse Source 
* 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>
This commit is contained in:
PythonGermany
2025-11-29 01:05:39 +01:00
committed by GitHub
parent 9121d87965
commit ee01adb603
3 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/app/src/components/EndpointCard.vue
View File

@@ -154,7 +154,8 @@ const formattedResponseTime = computed(() => {
const oldestResultTime = computed(() => { const oldestResultTime = computed(() => {
if (!props.endpoint.results || props.endpoint.results.length === 0) return '' 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(() => { const newestResultTime = computed(() => {

7
web/app/src/views/EndpointDetails.vue
View File

@@ -89,13 +89,13 @@
<EndpointCard <EndpointCard
v-if="endpointStatus" v-if="endpointStatus"
:endpoint="endpointStatus" :endpoint="endpointStatus"
:maxResults="50" :maxResults="resultPageSize"
:showAverageResponseTime="showAverageResponseTime" :showAverageResponseTime="showAverageResponseTime"
@showTooltip="showTooltip" @showTooltip="showTooltip"
class="border-0 shadow-none bg-transparent p-0" class="border-0 shadow-none bg-transparent p-0"
/> />
<div v-if="endpointStatus && endpointStatus.key" class="pt-4 border-t"> <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>
</div> </div>
</CardContent> </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 currentStatus = ref(null) // For current/latest status (always page 1)
const events = ref([]) const events = ref([])
const currentPage = ref(1) const currentPage = ref(1)
const resultPageSize = 50
const showResponseTimeChartAndBadges = ref(false) const showResponseTimeChartAndBadges = ref(false)
const showAverageResponseTime = ref(false) const showAverageResponseTime = ref(false)
const selectedChartDuration = ref('24h') const selectedChartDuration = ref('24h')
@@ -304,7 +305,7 @@ const lastCheckTime = computed(() => {
const fetchData = async () => { const fetchData = async () => {
isRefreshing.value = true isRefreshing.value = true
try { 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' credentials: 'include'
}) })

13
web/app/src/views/Home.vue
View File

@@ -82,7 +82,7 @@
v-for="suite in items.suites" v-for="suite in items.suites"
:key="suite.key" :key="suite.key"
:suite="suite" :suite="suite"
:maxResults="50" :maxResults="resultPageSize"
@showTooltip="showTooltip" @showTooltip="showTooltip"
/> />
</div> </div>
@@ -96,7 +96,7 @@
v-for="endpoint in items.endpoints" v-for="endpoint in items.endpoints"
:key="endpoint.key" :key="endpoint.key"
:endpoint="endpoint" :endpoint="endpoint"
:maxResults="50" :maxResults="resultPageSize"
:showAverageResponseTime="showAverageResponseTime" :showAverageResponseTime="showAverageResponseTime"
@showTooltip="showTooltip" @showTooltip="showTooltip"
/> />
@@ -116,7 +116,7 @@
v-for="suite in paginatedSuites" v-for="suite in paginatedSuites"
:key="suite.key" :key="suite.key"
:suite="suite" :suite="suite"
:maxResults="50" :maxResults="resultPageSize"
@showTooltip="showTooltip" @showTooltip="showTooltip"
/> />
</div> </div>
@@ -130,7 +130,7 @@
v-for="endpoint in paginatedEndpoints" v-for="endpoint in paginatedEndpoints"
:key="endpoint.key" :key="endpoint.key"
:endpoint="endpoint" :endpoint="endpoint"
:maxResults="50" :maxResults="resultPageSize"
:showAverageResponseTime="showAverageResponseTime" :showAverageResponseTime="showAverageResponseTime"
@showTooltip="showTooltip" @showTooltip="showTooltip"
/> />
@@ -225,6 +225,7 @@ const showAverageResponseTime = ref(true)
const groupByGroup = ref(false) const groupByGroup = ref(false)
const sortBy = ref(localStorage.getItem('gatus:sort-by') || 'name') const sortBy = ref(localStorage.getItem('gatus:sort-by') || 'name')
const uncollapsedGroups = ref(new Set()) const uncollapsedGroups = ref(new Set())
const resultPageSize = 50
const filteredEndpoints = computed(() => { const filteredEndpoints = computed(() => {
let filtered = [...endpointStatuses.value] let filtered = [...endpointStatuses.value]
@@ -433,7 +434,7 @@ const fetchData = async () => {
} }
try { try {
// Fetch endpoints // 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' credentials: 'include'
}) })
if (endpointResponse.status === 200) { if (endpointResponse.status === 200) {
@@ -444,7 +445,7 @@ const fetchData = async () => {
} }
// Fetch suites // 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' credentials: 'include'
}) })
if (suiteResponse.status === 200) { if (suiteResponse.status === 200) {