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

fix(ui): Collapse groups by default (#1212)

Browse Source
This commit is contained in:
TwiN
2025-08-19 10:15:35 -04:00
committed by GitHub
parent d37f71eee7
commit 2f99eccf5f
2 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -59,7 +59,7 @@
class="endpoint-group-header flex items-center justify-between p-4 bg-card border-b cursor-pointer hover:bg-accent/50 transition-colors"
>
<div class="flex items-center gap-3">
<ChevronDown v-if="!collapsedGroups.has(group)" class="h-5 w-5 text-muted-foreground" />
<ChevronDown v-if="uncollapsedGroups.has(group)" class="h-5 w-5 text-muted-foreground" />
<ChevronUp v-else class="h-5 w-5 text-muted-foreground" />
<h2 class="text-xl font-semibold text-foreground">{{ group }}</h2>
</div>
@@ -73,7 +73,7 @@
</div>
<!-- Group Content -->
<div v-if="!collapsedGroups.has(group)" class="endpoint-group-content p-4">
<div v-if="uncollapsedGroups.has(group)" class="endpoint-group-content p-4">
<div class="grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
<EndpointCard
v-for="endpoint in endpoints"
@@ -169,7 +169,7 @@ const showRecentFailures = ref(false)
const showAverageResponseTime = ref(true)
const groupByGroup = ref(false)
const sortBy = ref(localStorage.getItem('gatus:sort-by') || 'name')
const collapsedGroups = ref(new Set())
const uncollapsedGroups = ref(new Set())
const filteredEndpoints = computed(() => {
let filtered = [...endpointStatuses.value]
@@ -356,26 +356,29 @@ const calculateUnhealthyCount = (endpoints) => {
}
const toggleGroupCollapse = (groupName) => {
if (collapsedGroups.value.has(groupName)) {
collapsedGroups.value.delete(groupName)
if (uncollapsedGroups.value.has(groupName)) {
uncollapsedGroups.value.delete(groupName)
} else {
collapsedGroups.value.add(groupName)
uncollapsedGroups.value.add(groupName)
}
// Save to localStorage
const collapsed = Array.from(collapsedGroups.value)
localStorage.setItem('gatus:collapsed-groups', JSON.stringify(collapsed))
const uncollapsed = Array.from(uncollapsedGroups.value)
localStorage.setItem('gatus:uncollapsed-groups', JSON.stringify(uncollapsed))
localStorage.removeItem('gatus:collapsed-groups') // Remove old key if it exists
}
const initializeCollapsedGroups = () => {
// Get saved collapsed groups from localStorage
// Get saved uncollapsed groups from localStorage
try {
const saved = localStorage.getItem('gatus:collapsed-groups')
const saved = localStorage.getItem('gatus:uncollapsed-groups')
if (saved) {
collapsedGroups.value = new Set(JSON.parse(saved))
uncollapsedGroups.value = new Set(JSON.parse(saved))
}
// If no saved state, uncollapsedGroups stays empty (all collapsed by default)
} catch (e) {
console.warn('Failed to parse saved collapsed groups:', e)
localStorage.removeItem('gatus:collapsed-groups')
console.warn('Failed to parse saved uncollapsed groups:', e)
localStorage.removeItem('gatus:uncollapsed-groups')
// On error, uncollapsedGroups stays empty (all collapsed by default)
}
}