codecentric · SteKoe · Feb 22, 2026 · Feb 22, 2026 · Feb 27, 2026
@@ -19,6 +19,7 @@
     v-model:filters="filters"
     v-model:expanded-rows="expandedRows"
     striped-rows
+    data-key="key"
     :value="mappedEvents"
     paginator
     sort-field="date"
@@ -225,6 +226,7 @@ const applicationNamesByInstanceId = computed(() => {
 const mappedEvents = computed(() => {
   return events.map((e) => ({
     ...e,
+    key: e.key,
     date: new Date(e.timestamp),
     application: applicationNamesByInstanceId.value[e.instance],
   }));

@@ -2,9 +2,9 @@
   "journal": {
     "title": "Ereignis-Journal",
     "label": "Journal",
-    "per_page": {
-      "per_page": "Pro Seite:",
-      "all": "Alle"
+    "auto_update": "Ereignisse automatisch aktualisieren",
+    "error": {
+      "generic": "Fehler beim Abrufen neuer Ereignisse vom Server"
     },
     "filter": {
       "application": {

@@ -2,9 +2,9 @@
   "journal": {
     "title": "Event Journal",
     "label": "Journal",
-    "per_page": {
-      "per_page": "Per page:",
-      "all": "All"
+    "auto_update": "Auto-update events",
+    "error": {
+      "generic": "Error retrieving new events from server"
     },
     "filter": {
       "application": {

@@ -2,9 +2,20 @@
   "journal": {
     "title": "Bitácora de eventos",
     "label": "Eventos",
-    "per_page": {
-      "per_page": "Por página:",
-      "all": "Todos"
+    "auto_update": "Actualizar eventos automáticamente",
+    "error": {
+      "generic": "Error al recuperar nuevos eventos del servidor"
+    },
+    "filter": {
+      "application": {
+        "any": "Cualquiera"
+      },
+      "event_type": {
+        "any": "Cualquiera"
+      },
+      "instance_id": {
+        "any": "Cualquiera"
+      }
     }
   }
 }
@@ -2,9 +2,20 @@
   "journal": {
     "title": "Journal d'évènements",
     "label": "Journal",
-    "per_page": {
-      "per_page": "Par page:",
-      "all": "Tous"
+    "auto_update": "Mise à jour automatique des événements",
+    "error": {
+      "generic": "Erreur lors de la récupération de nouveaux événements du serveur"
+    },
+    "filter": {
+      "application": {
+        "any": "Tous"
+      },
+      "event_type": {
+        "any": "Tous"
+      },
+      "instance_id": {
+        "any": "Tous"
+      }
     }
   }
 }
@@ -1,6 +1,21 @@
 {
   "journal": {
     "title": "Atburðaannáll",
-    "label": "Annáll"
+    "label": "Annáll",
+    "auto_update": "Sjálfvirk uppfærsla atburða",
+    "error": {
+      "generic": "Villa við að sækja nýja atburði frá þjóni"
+    },
+    "filter": {
+      "application": {
+        "any": "Allt"
+      },
+      "event_type": {
+        "any": "Allt"
+      },
+      "instance_id": {
+        "any": "Allt"
+      }
+    }
   }
 }
@@ -1,6 +1,21 @@
 {
   "journal": {
     "title": "이벤트 일지",
-    "label": "일지"
+    "label": "일지",
+    "auto_update": "이벤트 자동 업데이트",
+    "error": {
+      "generic": "서버에서 새 이벤트를 가져오는 중 오류가 발생했습니다"
+    },
+    "filter": {
+      "application": {
+        "any": "전체"
+      },
+      "event_type": {
+        "any": "전체"
+      },
+      "instance_id": {
+        "any": "전체"
+      }
+    }
   }
 }
@@ -1,6 +1,21 @@
 {
   "journal": {
     "title": "Registro de Eventos",
-    "label": "Registro"
+    "label": "Registro",
+    "auto_update": "Atualizar eventos automaticamente",
+    "error": {
+      "generic": "Erro ao recuperar novos eventos do servidor"
+    },
+    "filter": {
+      "application": {
+        "any": "Qualquer"
+      },
+      "event_type": {
+        "any": "Qualquer"
+      },
+      "instance_id": {
+        "any": "Qualquer"
+      }
+    }
   }
 }
@@ -1,6 +1,21 @@
 {
   "journal": {
     "title": "Журнал событий",
-    "label": "Журнал"
+    "label": "Журнал",
+    "auto_update": "Автоматическое обновление событий",
+    "error": {
+      "generic": "Ошибка при получении новых событий с сервера"
+    },
+    "filter": {
+      "application": {
+        "any": "Любое"
+      },
+      "event_type": {
+        "any": "Любой"
+      },
+      "instance_id": {
+        "any": "Любой"
+      }
+    }
   }
 }
@@ -1,6 +1,21 @@
 {
   "journal": {
     "title": "事件日志",
-    "label": "日志报表"
+    "label": "日志报表",
+    "auto_update": "自动更新事件",
+    "error": {
+      "generic": "从服务器检索新事件时出错"
+    },
+    "filter": {
+      "application": {
+        "any": "任意"
+      },
+      "event_type": {
+        "any": "任意"
+      },
+      "instance_id": {
+        "any": "任意"
+      }
+    }
   }
 }
@@ -2,9 +2,9 @@
   "journal": {
     "title": "事件日誌",
     "label": "日誌",
-    "per_page": {
-      "per_page": "每頁：",
-      "all": "全部"
+    "auto_update": "自動更新事件",
+    "error": {
+      "generic": "從伺服器檢索新事件時發生錯誤"
     },
     "filter": {
       "application": {

@@ -30,24 +30,39 @@
           v-text="`${getName(filter.instanceId)} (${filter.instanceId})`"
         />
       </div>
+      <div class="flex items-center gap-2">
+        <span class="hidden md:inline" v-text="$t('journal.auto_update')" />
+        <sba-button
+          :title="$t('journal.auto_update')"
+          :primary="autoUpdate"
+          @click="autoUpdate = !autoUpdate"
+        >
+          <font-awesome-icon :icon="faArrowsDownToLine" />
+        </sba-button>
+      </div>
     </div>
 
     <sba-alert :error="error" />
 
-    <JournalTable :events="events" :applications="applications" />
+    <JournalTable :events="listedEvents" :applications="applications" />
   </div>
 </template>
 
 <script>
+import { faArrowsDownToLine } from '@fortawesome/free-solid-svg-icons';
+import { useI18n } from 'vue-i18n';
+
 import SbaAlert from '@/components/sba-alert';
 
 import { useApplicationStore } from '@/composables/useApplicationStore';
 import { useDateTimeFormatter } from '@/composables/useDateTimeFormatter';
 import subscribing from '@/mixins/subscribing';
 import Instance from '@/services/instance';
 import { compareBy } from '@/utils/collections';
-import { InstanceEvent } from '@/views/journal/InstanceEvent';
-import { InstanceEventType } from '@/views/journal/InstanceEvent';
+import {
+  InstanceEvent,
+  InstanceEventType,
+} from '@/views/journal/InstanceEvent';
 import JournalTable from '@/views/journal/JournalTable.vue';
 import { deduplicateInstanceEvents } from '@/views/journal/deduplicate-events';
 
@@ -57,9 +72,12 @@ export default {
   setup() {
     const { formatDateTime } = useDateTimeFormatter();
     const { applications } = useApplicationStore();
+    const i18n = useI18n();
 
     return {
+      t: i18n.t,
       formatDate: formatDateTime,
+      faArrowsDownToLine,
       applications,
     };
   },
@@ -72,12 +90,16 @@ export default {
     pageSize: 25,
     current: 1,
     error: null,
+    autoUpdate: true,
     filter: {
       application: undefined,
       instanceId: undefined,
     },
   }),
   computed: {
+    listedEvents() {
+      return this.events.slice(this.listOffset);
+    },
     instanceNames() {
       return this.events
         .filter(
@@ -92,6 +114,13 @@ export default {
         }, {});
     },
   },
+  watch: {
+    autoUpdate: function (value) {
+      if (value) {
+        this.listOffset = 0;
+      }
+    },
+  },
   async created() {
     try {
       const response = await Instance.fetchEvents();
@@ -111,7 +140,7 @@ export default {
       this.error = null;
     } catch (error) {
       console.warn('Fetching events failed:', error);
-      this.error = error;
+      this.error = this.t('journal.error.generic');
     }
   },
   methods: {
@@ -128,11 +157,13 @@ export default {
           }
           this.seenEventKeys.add(incomingEvent.key);
           this.events = Object.freeze([incomingEvent, ...this.events]);
-          this.listOffset += 1;
+          if (!this.autoUpdate) {
+            this.listOffset += 1;
+          }
         },
         error: (error) => {
           console.warn('Listening for events failed:', error);
-          this.error = error;
+          this.error = this.t('journal.error.generic');
         },
       });
     },