440b732c71
* feat(ui): New status page UI * docs: Rename labels to extra-labels * Fix domain expiration test * feat(ui): Add ui.default-sort-by and ui.default-filter-by * Change ui.header default value to Gatus * Re-use EndpointCard in Details.vue as well to avoid duplicate code * Fix flaky metrics test * Add subtle green color to "Gatus" * Remove duplicate title (tooltip is sufficient, no need for title on top of that) * Fix collapsed group user preferences * Update status page screenshots
73 lines
1.8 KiB
Vue
73 lines
1.8 KiB
Vue
<template>
|
|
<div class="flex items-center justify-between">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
:disabled="currentPage >= maxPages"
|
|
@click="previousPage"
|
|
class="flex items-center gap-1"
|
|
>
|
|
<ChevronLeft class="h-4 w-4" />
|
|
Previous
|
|
</Button>
|
|
|
|
<span class="text-sm text-muted-foreground">
|
|
Page {{ currentPage }} of {{ maxPages }}
|
|
</span>
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
:disabled="currentPage <= 1"
|
|
@click="nextPage"
|
|
class="flex items-center gap-1"
|
|
>
|
|
Next
|
|
<ChevronRight class="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
/* eslint-disable no-undef */
|
|
import { ref, computed } from 'vue'
|
|
import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
const props = defineProps({
|
|
numberOfResultsPerPage: Number,
|
|
currentPageProp: {
|
|
type: Number,
|
|
default: 1
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['page'])
|
|
|
|
const currentPage = ref(props.currentPageProp)
|
|
|
|
const maxPages = computed(() => {
|
|
// Use maximumNumberOfResults from config if available, otherwise default to 100
|
|
let maxResults = 100 // Default value
|
|
// Check if window.config exists and has maximumNumberOfResults
|
|
if (typeof window !== 'undefined' && window.config && window.config.maximumNumberOfResults) {
|
|
const parsed = parseInt(window.config.maximumNumberOfResults)
|
|
if (!isNaN(parsed)) {
|
|
maxResults = parsed
|
|
}
|
|
}
|
|
return Math.ceil(maxResults / props.numberOfResultsPerPage)
|
|
})
|
|
|
|
const nextPage = () => {
|
|
// "Next" should show newer data (lower page numbers)
|
|
currentPage.value--
|
|
emit('page', currentPage.value)
|
|
}
|
|
|
|
const previousPage = () => {
|
|
// "Previous" should show older data (higher page numbers)
|
|
currentPage.value++
|
|
emit('page', currentPage.value)
|
|
}
|
|
</script> |