docs(alerting): Fix the homeassistant event structure example (#1213)

docs(Homeassistant): Fix the event structure in the example

README.md

@@ -1070,13 +1070,13 @@ automation:
     action:
       - service: notify.notify
         data_template:
-          title: "Gatus Alert: {{ trigger.event.data.endpoint }}"
+          title: "Gatus Alert: {{ trigger.event.data.event_data.endpoint }}"
           message: >
-            Status: {{ trigger.event.data.status }}
-            {% if trigger.event.data.description %}
-            Description: {{ trigger.event.data.description }}
+            Status: {{ trigger.event.data.event_data.status }}
+            {% if trigger.event.data.event_data.description %}
+            Description: {{ trigger.event.data.event_data.description }}
             {% endif %}
-            {% for condition in trigger.event.data.conditions %}
+            {% for condition in trigger.event.data.event_data.conditions %}
             {{ '✅' if condition.success else '❌' }} {{ condition.condition }}
             {% endfor %}
 ```

web/app/src/components/AnnouncementBanner.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="announcements && announcements.length" class="announcement-container mb-4">
+  <div v-if="announcements && announcements.length" class="announcement-container mb-6">
     <div 
       :class="[
         'rounded-lg border bg-card text-card-foreground shadow-sm transition-all duration-200',

web/app/src/views/Details.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dashboard-container bg-background">
     <div class="container mx-auto px-4 py-8 max-w-7xl">
-      <div class="mb-8">
+      <div class="mb-6">
         <Button variant="ghost" class="mb-4" @click="goBack">
           <ArrowLeft class="h-4 w-4 mr-2" />
           Back to Dashboard

web/app/src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dashboard-container bg-background">
     <div class="container mx-auto px-4 py-8 max-w-7xl">
-      <div class="mb-8">
+      <div class="mb-6">
         <div class="flex items-center justify-between mb-6">
           <div>
             <h1 class="text-4xl font-bold tracking-tight">Health Dashboard</h1>
@@ -22,7 +22,9 @@
             </Button>
           </div>
         </div>
-        
+        <!-- Announcement Banner -->
+        <AnnouncementBanner :announcements="props.announcements" />
+        <!-- Search bar -->
         <SearchBar
           @search="handleSearch"
           @update:showOnlyFailing="showOnlyFailing = $event"
@@ -33,11 +35,6 @@
         />
       </div>
 
-      <!-- Announcements Banner -->
-      <AnnouncementBanner :announcements="props.announcements" />
-
-      <div>
-      </div>
       <div v-if="loading" class="flex items-center justify-center py-20">
         <Loading size="lg" />
       </div>
@@ -62,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>
@@ -76,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"
@@ -172,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]
@@ -359,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)
   }
 }