1
0
mirror of https://github.com/TwiN/gatus.git synced 2026-02-11 13:04:18 +00:00

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

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

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" 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"> <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" /> <ChevronUp v-else class="h-5 w-5 text-muted-foreground" />
<h2 class="text-xl font-semibold text-foreground">{{ group }}</h2> <h2 class="text-xl font-semibold text-foreground">{{ group }}</h2>
</div> </div>
@@ -73,7 +73,7 @@
</div> </div>
<!-- Group Content --> <!-- 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"> <div class="grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
<EndpointCard <EndpointCard
v-for="endpoint in endpoints" v-for="endpoint in endpoints"
@@ -169,7 +169,7 @@ const showRecentFailures = ref(false)
const showAverageResponseTime = ref(true) 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 collapsedGroups = ref(new Set()) const uncollapsedGroups = ref(new Set())
const filteredEndpoints = computed(() => { const filteredEndpoints = computed(() => {
let filtered = [...endpointStatuses.value] let filtered = [...endpointStatuses.value]
@@ -356,26 +356,29 @@ const calculateUnhealthyCount = (endpoints) => {
} }
const toggleGroupCollapse = (groupName) => { const toggleGroupCollapse = (groupName) => {
if (collapsedGroups.value.has(groupName)) { if (uncollapsedGroups.value.has(groupName)) {
collapsedGroups.value.delete(groupName) uncollapsedGroups.value.delete(groupName)
} else { } else {
collapsedGroups.value.add(groupName) uncollapsedGroups.value.add(groupName)
} }
// Save to localStorage // Save to localStorage
const collapsed = Array.from(collapsedGroups.value) const uncollapsed = Array.from(uncollapsedGroups.value)
localStorage.setItem('gatus:collapsed-groups', JSON.stringify(collapsed)) localStorage.setItem('gatus:uncollapsed-groups', JSON.stringify(uncollapsed))
localStorage.removeItem('gatus:collapsed-groups') // Remove old key if it exists
} }
const initializeCollapsedGroups = () => { const initializeCollapsedGroups = () => {
// Get saved collapsed groups from localStorage // Get saved uncollapsed groups from localStorage
try { try {
const saved = localStorage.getItem('gatus:collapsed-groups') const saved = localStorage.getItem('gatus:uncollapsed-groups')
if (saved) { 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) { } catch (e) {
console.warn('Failed to parse saved collapsed groups:', e) console.warn('Failed to parse saved uncollapsed groups:', e)
localStorage.removeItem('gatus:collapsed-groups') localStorage.removeItem('gatus:uncollapsed-groups')
// On error, uncollapsedGroups stays empty (all collapsed by default)
} }
} }

File diff suppressed because one or more lines are too long