From 88606055374da79cbb4872ff13d2023afbd826d7 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Tue, 9 Dec 2025 10:56:18 -0300
Subject: [PATCH 1/4] blueos: Segregate definition of data-lake variables

---
 src/libs/blueos/definitions.ts | 21 +++++++++++++++++++++
 src/stores/mainVehicle.ts      | 12 +-----------
 2 files changed, 22 insertions(+), 11 deletions(-)
 create mode 100644 src/libs/blueos/definitions.ts

diff --git a/src/libs/blueos/definitions.ts b/src/libs/blueos/definitions.ts
new file mode 100644
index 0000000000..6288ca7fd1
--- /dev/null
+++ b/src/libs/blueos/definitions.ts
@@ -0,0 +1,21 @@
+// Register BlueOS variables in the data lake
+export const blueOsVariables = {
+  cpuTemp: {
+    id: 'blueos/cpu/tempC',
+    name: 'BlueOS CPU Temperature',
+    type: 'number',
+    description: 'The average temperature of the BlueOS CPU cores in °C.',
+  },
+  cpuUsageAverage: {
+    id: 'blueos/cpu/usageAverage',
+    name: 'BlueOS CPU Usage',
+    type: 'number',
+    description: 'The average usage of the BlueOS CPU cores in %.',
+  },
+  cpuFrequencyAverage: {
+    id: 'blueos/cpu/frequencyAverage',
+    name: 'BlueOS CPU Frequency',
+    type: 'number',
+    description: 'The average frequency of the BlueOS CPU cores in Hz.',
+  },
+}
diff --git a/src/stores/mainVehicle.ts b/src/stores/mainVehicle.ts
index ef8116ff1e..2628a0c819 100644
--- a/src/stores/mainVehicle.ts
+++ b/src/stores/mainVehicle.ts
@@ -20,6 +20,7 @@ import {
   getVehicleName,
   setKeyDataOnCockpitVehicleStorage,
 } from '@/libs/blueos'
+import { blueOsVariables } from '@/libs/blueos/definitions'
 import * as Connection from '@/libs/connection/connection'
 import { ConnectionManager } from '@/libs/connection/connection-manager'
 import type { Package } from '@/libs/connection/m2r/messages/mavlink2rest'
@@ -624,17 +625,6 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
 
     updateVehicleId()
 
-    // Register BlueOS variables in the data lake
-    const blueOsVariables = {
-      cpuTemp: { id: 'blueos/cpu/tempC', name: 'CPU Temperature', type: 'number' },
-      cpuUsageAverage: { id: 'blueos/cpu/usageAverage', name: 'BlueOS CPU Usage (average)', type: 'number' },
-      cpuFrequencyAverage: {
-        id: 'blueos/cpu/frequencyAverage',
-        name: 'BlueOS CPU Frequency (average)',
-        type: 'number',
-      },
-    }
-
     const cpuUsageVariableId = (cpuName: string): string => `blueos/${cpuName}/usage`
     const cpuFrequencyVariableId = (cpuName: string): string => `blueos/${cpuName}/frequency`
 

From ea639d6380401a596a4f8c95c30cda8439024cc8 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Tue, 9 Dec 2025 10:57:23 -0300
Subject: [PATCH 2/4] alerts: Create a pure `ts` manager to replace the `Pinia`
 store

---
 src/libs/alert-manager.ts | 154 ++++++++++++++++++++++++++++++++++++++
 src/stores/alert.ts       |  98 +++++++++++++-----------
 2 files changed, 207 insertions(+), 45 deletions(-)
 create mode 100644 src/libs/alert-manager.ts

diff --git a/src/libs/alert-manager.ts b/src/libs/alert-manager.ts
new file mode 100644
index 0000000000..916295c67c
--- /dev/null
+++ b/src/libs/alert-manager.ts
@@ -0,0 +1,154 @@
+import { v4 as uuid } from 'uuid'
+
+import { Alert, AlertLevel } from '@/types/alert'
+
+/**
+ * Callback type for alert listeners
+ */
+type AlertListener = (alert: Alert, index: number) => void
+
+/**
+ * Internal state for the alert manager
+ */
+const alerts: Alert[] = []
+const alertListeners: Record<string, AlertListener> = {}
+
+/**
+ * Get all alerts
+ * @returns {Alert[]} All alerts
+ */
+export const getAllAlerts = (): Alert[] => {
+  return [...alerts]
+}
+
+/**
+ * Get a sorted copy of all alerts by time created
+ * @returns {Alert[]} Sorted alerts
+ */
+export const getSortedAlerts = (): Alert[] => {
+  return [...alerts].sort((a, b) => a.time_created.getTime() - b.time_created.getTime())
+}
+
+/**
+ * Push a new alert
+ * @param {Alert} alert - The alert to push
+ */
+export const pushAlert = (alert: Alert): void => {
+  alerts.push(alert)
+
+  // Log to console based on level
+  switch (alert.level) {
+    case AlertLevel.Success:
+      console.log(alert.message)
+      break
+    case AlertLevel.Error:
+      console.error(alert.message)
+      break
+    case AlertLevel.Info:
+      console.info(alert.message)
+      break
+    case AlertLevel.Warning:
+      console.warn(alert.message)
+      break
+    case AlertLevel.Critical:
+      console.error(alert.message)
+      break
+    default:
+      console.warn(`Unknown alert level. Message: ${alert.message}`)
+      break
+  }
+
+  // Notify listeners
+  const alertIndex = alerts.length - 1
+  Object.values(alertListeners).forEach((listener) => {
+    try {
+      listener(alert, alertIndex)
+    } catch (error) {
+      console.error('Error in alert listener:', error)
+    }
+  })
+}
+
+/**
+ * Push a success alert
+ * @param {string} message - The alert message
+ * @param {Date} timeCreated - Optional time created
+ */
+export const pushSuccessAlert = (message: string, timeCreated: Date = new Date()): void => {
+  pushAlert(new Alert(AlertLevel.Success, message, timeCreated))
+}
+
+/**
+ * Push an error alert
+ * @param {string} message - The alert message
+ * @param {Date} timeCreated - Optional time created
+ */
+export const pushErrorAlert = (message: string, timeCreated: Date = new Date()): void => {
+  pushAlert(new Alert(AlertLevel.Error, message, timeCreated))
+}
+
+/**
+ * Push an info alert
+ * @param {string} message - The alert message
+ * @param {Date} timeCreated - Optional time created
+ */
+export const pushInfoAlert = (message: string, timeCreated: Date = new Date()): void => {
+  pushAlert(new Alert(AlertLevel.Info, message, timeCreated))
+}
+
+/**
+ * Push a warning alert
+ * @param {string} message - The alert message
+ * @param {Date} timeCreated - Optional time created
+ */
+export const pushWarningAlert = (message: string, timeCreated: Date = new Date()): void => {
+  pushAlert(new Alert(AlertLevel.Warning, message, timeCreated))
+}
+
+/**
+ * Push a critical alert
+ * @param {string} message - The alert message
+ * @param {Date} timeCreated - Optional time created
+ */
+export const pushCriticalAlert = (message: string, timeCreated: Date = new Date()): void => {
+  pushAlert(new Alert(AlertLevel.Critical, message, timeCreated))
+}
+
+/**
+ * Subscribe to alert events
+ * @param {AlertListener} listener - The listener function
+ * @returns {string} The listener ID (used for unsubscribing)
+ */
+export const subscribeToAlerts = (listener: AlertListener): string => {
+  const listenerId = uuid()
+  alertListeners[listenerId] = listener
+  return listenerId
+}
+
+/**
+ * Unsubscribe from alert events
+ * @param {string} listenerId - The listener ID to unsubscribe
+ */
+export const unsubscribeFromAlerts = (listenerId: string): void => {
+  delete alertListeners[listenerId]
+}
+
+/**
+ * Get the current number of alerts
+ * @returns {number} The number of alerts
+ */
+export const getAlertsCount = (): number => {
+  return alerts.length
+}
+
+/**
+ * Get an alert by index
+ * @param {number} index - The alert index
+ * @returns {Alert | undefined} The alert if found
+ */
+export const getAlertByIndex = (index: number): Alert | undefined => {
+  return alerts[index]
+}
+
+// Push initial alert
+pushAlert(new Alert(AlertLevel.Success, 'Cockpit started'))
diff --git a/src/stores/alert.ts b/src/stores/alert.ts
index 31ea8a371c..ba62da6388 100644
--- a/src/stores/alert.ts
+++ b/src/stores/alert.ts
@@ -1,17 +1,30 @@
 import { defineStore } from 'pinia'
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, onUnmounted, reactive, ref } from 'vue'
 
 import { useBlueOsStorage } from '@/composables/settingsSyncer'
+import {
+  getAlertsCount,
+  getAllAlerts,
+  pushAlert as managerPushAlert,
+  pushCriticalAlert as managerPushCriticalAlert,
+  pushErrorAlert as managerPushErrorAlert,
+  pushInfoAlert as managerPushInfoAlert,
+  pushSuccessAlert as managerPushSuccessAlert,
+  pushWarningAlert as managerPushWarningAlert,
+  subscribeToAlerts,
+  unsubscribeFromAlerts,
+} from '@/libs/alert-manager'
 
 import { Alert, AlertLevel } from '../types/alert'
 
 export const useAlertStore = defineStore('alert', () => {
-  const alerts = reactive([new Alert(AlertLevel.Success, 'Cockpit started')])
+  // Reactive alerts array that syncs with the manager
+  const alerts = reactive<Alert[]>(getAllAlerts())
+
+  // Settings stored in BlueOS storage (Vue composable)
   const enableVoiceAlerts = useBlueOsStorage('cockpit-enable-voice-alerts', true)
   const neverShowArmedMenuWarning = useBlueOsStorage('cockpit-never-show-armed-menu-warning', false)
   const skipArmedMenuWarningThisSession = ref(false)
-  // eslint-disable-next-line jsdoc/require-jsdoc
-  const availableAlertSpeechVoices = reactive<SpeechSynthesisVoice[]>([])
   const selectedAlertSpeechVoiceName = useBlueOsStorage<string | undefined>(
     'cockpit-selected-alert-speech-voice',
     undefined
@@ -25,53 +38,56 @@ export const useAlertStore = defineStore('alert', () => {
   ])
   const alertVolume = useBlueOsStorage('cockpit-alert-volume', 1)
 
+  // Speech synthesis state
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  const availableAlertSpeechVoices = reactive<SpeechSynthesisVoice[]>([])
+  const lastSpokenAlertIndex = ref(0)
+
   const sortedAlerts = computed(() => {
-    return alerts.sort((a, b) => a.time_created.getTime() - b.time_created.getTime())
+    return [...alerts].sort((a, b) => a.time_created.getTime() - b.time_created.getTime())
   })
 
+  // Wrapper functions that delegate to the manager
   const pushAlert = (alert: Alert): void => {
-    alerts.push(alert)
-
-    switch (alert.level) {
-      case AlertLevel.Success:
-        console.log(alert.message)
-        break
-      case AlertLevel.Error:
-        console.error(alert.message)
-        break
-      case AlertLevel.Info:
-        console.info(alert.message)
-        break
-      case AlertLevel.Warning:
-        console.warn(alert.message)
-        break
-      case AlertLevel.Critical:
-        console.error(alert.message)
-        break
-      default:
-        unimplemented(`A new alert level was added but we have not updated
-        this part of the code. Regardless of that, here's the alert message: ${alert.message}`)
-        break
-    }
+    managerPushAlert(alert)
   }
 
   const pushSuccessAlert = (message: string, time_created: Date = new Date()): void => {
-    pushAlert(new Alert(AlertLevel.Success, message, time_created))
+    managerPushSuccessAlert(message, time_created)
   }
+
   const pushErrorAlert = (message: string, time_created: Date = new Date()): void => {
-    pushAlert(new Alert(AlertLevel.Error, message, time_created))
+    managerPushErrorAlert(message, time_created)
   }
+
   const pushInfoAlert = (message: string, time_created: Date = new Date()): void => {
-    pushAlert(new Alert(AlertLevel.Info, message, time_created))
+    managerPushInfoAlert(message, time_created)
   }
+
   const pushWarningAlert = (message: string, time_created: Date = new Date()): void => {
-    pushAlert(new Alert(AlertLevel.Warning, message, time_created))
+    managerPushWarningAlert(message, time_created)
   }
+
   const pushCriticalAlert = (message: string, time_created: Date = new Date()): void => {
-    pushAlert(new Alert(AlertLevel.Critical, message, time_created))
+    managerPushCriticalAlert(message, time_created)
   }
 
-  // Alert speech syntesis routine
+  // Subscribe to manager alerts to keep reactive array in sync and handle speech
+  const alertListenerId = subscribeToAlerts((alert, alertIndex) => {
+    // Keep reactive array in sync
+    if (alerts.length < getAlertsCount()) {
+      alerts.push(alert)
+    }
+
+    // Handle speech synthesis
+    const alertLevelEnabled = enabledAlertLevels.value.find((enabledAlert) => enabledAlert.level === alert.level)
+    const shouldMute =
+      !enableVoiceAlerts.value ||
+      ((alertLevelEnabled === undefined || !alertLevelEnabled.enabled) && !alert.message.startsWith('#'))
+    speak(alert.message, alertIndex, shouldMute)
+  })
+
+  // Alert speech synthesis routine
   const synth = window.speechSynthesis
 
   // We need to cache these otherwise they get garbage collected...
@@ -113,9 +129,6 @@ export const useAlertStore = defineStore('alert', () => {
     availableAlertSpeechVoices.map((v) => ({ value: v.name, name: `${v.name} (${v.lang})` }))
   )
 
-  // Track the index of the last alert that finished being spoken
-  const lastSpokenAlertIndex = ref(0)
-
   /**
    * Speaks a text out loud using the browsers TTS engine
    * @param {string} text - The text to speak
@@ -147,14 +160,9 @@ export const useAlertStore = defineStore('alert', () => {
     synth.speak(utterance)
   }
 
-  watch(alerts, () => {
-    const lastAlertIndex = alerts.length - 1
-    const lastAlert = alerts[lastAlertIndex]
-    const alertLevelEnabled = enabledAlertLevels.value.find((enabledAlert) => enabledAlert.level === lastAlert.level)
-    const shouldMute =
-      !enableVoiceAlerts.value ||
-      ((alertLevelEnabled === undefined || !alertLevelEnabled.enabled) && !lastAlert.message.startsWith('#'))
-    speak(lastAlert.message, lastAlertIndex, shouldMute)
+  // Cleanup subscription when store is unmounted
+  onUnmounted(() => {
+    unsubscribeFromAlerts(alertListenerId)
   })
 
   return {

From 61683e03b1c3ff2ae085dcc2d9207d28d33ba54a Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Tue, 9 Dec 2025 10:59:04 -0300
Subject: [PATCH 3/4] alerts: Improve the UI of the config menu

---
 src/views/ConfigurationAlertsView.vue | 40 ++++++++++++++++-----------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/views/ConfigurationAlertsView.vue b/src/views/ConfigurationAlertsView.vue
index a8d8151977..6934ee5eb2 100644
--- a/src/views/ConfigurationAlertsView.vue
+++ b/src/views/ConfigurationAlertsView.vue
@@ -4,17 +4,33 @@
     <template #content>
       <div
         class="flex flex-col justify-around align-start ml-5 max-h-[85vh] overflow-y-auto"
-        :class="interfaceStore.isOnSmallScreen ? 'max-w-[70vw]' : 'max-w-[40vw]'"
+        :class="interfaceStore.isOnSmallScreen ? 'max-w-[80vw]' : 'max-w-[50vw]'"
       >
         <ExpansiblePanel :is-expanded="!interfaceStore.isOnPhoneScreen" no-top-divider>
-          <template #title>Voice alerts:</template>
+          <template #title>Text to speech:</template>
           <template #info>
-            Enable voice alerts to receive audible notifications about system and vehicle activities. <br />
-            Select specific alert levels to customize which types of notifications you receive.
+            Enable text to speech to receive audible notifications of the system alerts. <br />
+            Select specific alert levels to customize which ones will be spoken.
           </template>
           <template #content>
-            <div class="flex justify-between">
-              <v-switch v-model="alertStore.enableVoiceAlerts" label="Enable voice alerts" color="white" class="ml-3" />
+            <div class="flex flex-row items-center mb-4 ml-2 gap-x-12">
+              <v-switch
+                v-model="alertStore.enableVoiceAlerts"
+                label="Enable"
+                color="white"
+                hide-details
+                class="min-w-[100px]"
+              />
+              <div class="flex flex-row items-center">
+                <span class="text-sm font-medium">Voice:</span>
+                <Dropdown
+                  v-model="alertStore.selectedAlertSpeechVoiceName"
+                  :options="alertStore.availableAlertSpeechVoiceNames"
+                  name-key="name"
+                  value-key="value"
+                  class="min-w-[250px] ml-3"
+                />
+              </div>
               <v-slider
                 v-model="alertStore.alertVolume"
                 min="0"
@@ -23,11 +39,11 @@
                 hide-details
                 label="Alerts volume"
                 color="white"
-                class="max-w-[300px]"
+                class="min-w-[200px]"
                 :disabled="!alertStore.enableVoiceAlerts"
               />
             </div>
-            <span class="text-sm font-medium mt-4">Alert levels:</span>
+            <span class="text-sm font-medium mt-4">Levels to speak:</span>
             <div class="flex flex-wrap items-center justify-start">
               <div
                 v-for="enabledLevel in alertStore.enabledAlertLevels"
@@ -42,14 +58,6 @@
                 />
               </div>
             </div>
-            <span class="text-sm font-medium mt-4">Alert voice:</span>
-            <Dropdown
-              v-model="alertStore.selectedAlertSpeechVoiceName"
-              :options="alertStore.availableAlertSpeechVoiceNames"
-              name-key="name"
-              value-key="value"
-              class="max-w-[350px] mt-2 mb-4 ml-2"
-            />
           </template>
         </ExpansiblePanel>
         <!-- Armed Menu Warning Toggle -->

From 38cd2ce10106bdd12887ff19b861540b03ceb055 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Tue, 9 Dec 2025 11:00:16 -0300
Subject: [PATCH 4/4] data-lake: alerts: Introduce configurable alerts based on
 values of data-lake variables

---
 .../configuration/DataLakeAlertsConfig.vue    | 622 ++++++++++++++++++
 src/libs/actions/data-lake-alerts.ts          | 488 ++++++++++++++
 src/views/ConfigurationAlertsView.vue         |   3 +
 3 files changed, 1113 insertions(+)
 create mode 100644 src/components/configuration/DataLakeAlertsConfig.vue
 create mode 100644 src/libs/actions/data-lake-alerts.ts

diff --git a/src/components/configuration/DataLakeAlertsConfig.vue b/src/components/configuration/DataLakeAlertsConfig.vue
new file mode 100644
index 0000000000..e443c36d95
--- /dev/null
+++ b/src/components/configuration/DataLakeAlertsConfig.vue
@@ -0,0 +1,622 @@
+<template>
+  <ExpansiblePanel :is-expanded="true" no-top-divider>
+    <template #title>Data Lake Alerts:</template>
+    <template #info>
+      Configure alerts for any Data Lake variable. <br />
+      Create custom conditions based on variable type and set alert levels.
+    </template>
+    <template #content>
+      <div class="ml-4 mb-4 mr-4">
+        <!-- Existing Alerts Table -->
+        <div v-if="alerts.length > 0" class="mb-4">
+          <table class="w-full">
+            <thead>
+              <tr>
+                <th class="text-center text-sm font-medium text-slate-200 pb-3 w-12"></th>
+                <th class="text-left text-sm font-medium text-slate-200 pb-3">Name</th>
+                <th class="text-center text-sm font-medium text-slate-200 pb-3"># Conditions</th>
+                <th class="text-center text-sm font-medium text-slate-200 pb-3 w-24">Min Interval</th>
+                <th class="text-center text-sm font-medium text-slate-200 pb-3 w-24">Level</th>
+                <th class="text-center text-sm font-medium text-slate-200 pb-3 w-20"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="alert in alerts" :key="alert.id" class="border-b border-slate-600 hover:bg-[#FFFFFF11]">
+                <td class="py-3 text-center">
+                  <v-checkbox
+                    :model-value="alert.enabled"
+                    hide-details
+                    density="compact"
+                    color="white"
+                    class="justify-center"
+                    @update:model-value="toggleAlertEnabled(alert)"
+                  />
+                </td>
+                <td class="py-3 text-left">
+                  <span class="text-sm font-medium">{{ alert.name }}</span>
+                  <br />
+                  <span class="text-xs text-slate-400">{{ getAlertVariablesSummary(alert) }}</span>
+                </td>
+                <td class="py-3 text-center">
+                  <span class="text-sm">{{ alert.conditions.length }}</span>
+                </td>
+                <td class="py-3 text-center">
+                  <span class="text-sm">{{ alert.minInterval / 1000 }}s</span>
+                </td>
+                <td class="py-3 text-center">
+                  <span class="text-xs px-2 py-1 rounded" :class="getLevelClass(alert.level)">
+                    {{ alert.level }}
+                  </span>
+                </td>
+                <td class="py-3 text-center">
+                  <div class="flex items-center justify-center gap-1">
+                    <button
+                      class="p-1 rounded hover:bg-[#FFFFFF22] transition-colors"
+                      title="Edit alert"
+                      @click="openEditDialog(alert)"
+                    >
+                      <v-icon size="18" icon="mdi-pencil" />
+                    </button>
+                    <button
+                      class="p-1 rounded hover:bg-[#FFFFFF22] transition-colors"
+                      title="Duplicate alert"
+                      @click="duplicateAlert(alert)"
+                    >
+                      <v-icon size="18" icon="mdi-content-copy" />
+                    </button>
+                    <button
+                      class="p-1 rounded hover:bg-[#FFFFFF22] transition-colors"
+                      title="Delete alert"
+                      @click="confirmDeleteAlert(alert)"
+                    >
+                      <v-icon size="18" icon="mdi-delete" />
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Empty State -->
+        <div v-else class="text-center py-6 text-slate-400">
+          <v-icon size="48" icon="mdi-bell-outline" class="mb-2 opacity-50" />
+          <p class="text-sm">No alerts configured yet.</p>
+        </div>
+
+        <!-- Add New Alert Button -->
+        <button
+          class="w-full py-2 px-4 rounded bg-[#FFFFFF11] hover:bg-[#FFFFFF22] transition-colors text-sm font-medium flex items-center justify-center gap-2"
+          @click="openCreateDialog"
+        >
+          <v-icon size="18" icon="mdi-plus" />
+          Add New Alert
+        </button>
+      </div>
+    </template>
+  </ExpansiblePanel>
+
+  <!-- Create/Edit Alert Dialog -->
+  <v-dialog v-model="isDialogOpen" max-width="650px">
+    <v-card class="rounded-lg" :style="interfaceStore.globalGlassMenuStyles">
+      <v-card-title class="text-h6 font-weight-bold py-4 text-center">
+        {{ isEditing ? 'Edit Alert' : 'New Alert' }}
+      </v-card-title>
+      <v-card-text class="px-6">
+        <div class="flex flex-col gap-4">
+          <!-- Alert Name -->
+          <v-text-field
+            v-model="editingAlert.name"
+            label="Alert Name"
+            variant="outlined"
+            density="compact"
+            hide-details
+            placeholder="e.g., High CPU Temperature"
+          />
+
+          <!-- Conditions Section -->
+          <div class="flex flex-col gap-3">
+            <div class="flex items-center justify-between">
+              <label class="text-sm font-medium">Conditions (all must match)</label>
+              <button
+                class="text-xs px-2 py-1 rounded bg-[#FFFFFF22] hover:bg-[#FFFFFF33] transition-colors"
+                @click="addCondition"
+              >
+                + Add Condition
+              </button>
+            </div>
+
+            <div
+              v-for="(condition, index) in editingAlert.conditions"
+              :key="index"
+              class="flex flex-col gap-2 p-3 rounded bg-[#FFFFFF11]"
+            >
+              <!-- Variable Selection for this condition -->
+              <div class="flex items-center gap-2">
+                <v-autocomplete
+                  v-model="condition.variableId"
+                  :items="availableVariables"
+                  item-title="label"
+                  item-value="value"
+                  label="Variable"
+                  variant="outlined"
+                  density="compact"
+                  hide-details
+                  class="flex-1"
+                  @update:model-value="onConditionVariableChanged(condition)"
+                />
+                <v-tooltip text="Copy variable name for use in custom message" location="top">
+                  <template #activator="{ props: tooltipProps }">
+                    <button
+                      v-bind="tooltipProps"
+                      class="p-2 rounded hover:bg-[#FFFFFF22] transition-colors"
+                      :class="{ 'opacity-50 cursor-not-allowed': !condition.variableId }"
+                      :disabled="!condition.variableId"
+                      @click="copyVariableName(condition.variableId)"
+                    >
+                      <v-icon size="18" icon="mdi-content-copy" />
+                    </button>
+                  </template>
+                </v-tooltip>
+              </div>
+
+              <!-- Operator and Value Row -->
+              <div v-if="condition.variableId" class="flex items-center gap-2">
+                <!-- Operator Selection -->
+                <v-select
+                  v-model="condition.operator"
+                  :items="getOperatorsForCondition(condition)"
+                  item-title="label"
+                  item-value="value"
+                  variant="outlined"
+                  density="compact"
+                  hide-details
+                  class="flex-shrink-0"
+                  style="max-width: 120px"
+                />
+
+                <!-- Compare Value Input -->
+                <template v-if="getConditionVariableType(condition) === 'boolean'">
+                  <v-select
+                    v-model="condition.compareValue"
+                    :items="[
+                      { title: 'true', value: true },
+                      { title: 'false', value: false },
+                    ]"
+                    item-title="title"
+                    item-value="value"
+                    variant="outlined"
+                    density="compact"
+                    hide-details
+                    class="flex-1"
+                  />
+                </template>
+                <template v-else-if="getConditionVariableType(condition) === 'number'">
+                  <v-text-field
+                    v-model.number="condition.compareValue"
+                    type="number"
+                    variant="outlined"
+                    density="compact"
+                    hide-details
+                    class="flex-1"
+                  />
+                </template>
+                <template v-else>
+                  <v-text-field
+                    v-model="condition.compareValue"
+                    variant="outlined"
+                    density="compact"
+                    hide-details
+                    class="flex-1"
+                  />
+                </template>
+
+                <!-- Remove Condition Button -->
+                <button
+                  v-if="editingAlert.conditions.length > 1"
+                  class="p-1 rounded hover:bg-[#FFFFFF22] transition-colors text-red-400"
+                  title="Remove condition"
+                  @click="removeCondition(index)"
+                >
+                  <v-icon size="18" icon="mdi-close" />
+                </button>
+              </div>
+            </div>
+
+            <p v-if="editingAlert.conditions.length === 0" class="text-xs text-slate-400 text-center py-2">
+              No conditions added. Click "Add Condition" to create one.
+            </p>
+          </div>
+
+          <!-- Alert Level -->
+          <v-select
+            v-model="editingAlert.level"
+            :items="alertLevelOptions"
+            item-title="title"
+            item-value="value"
+            label="Alert Level"
+            variant="outlined"
+            density="compact"
+            hide-details
+          />
+
+          <!-- Minimum Interval -->
+          <v-text-field
+            v-model.number="editingAlertIntervalSeconds"
+            label="Minimum Interval (seconds)"
+            type="number"
+            min="0"
+            variant="outlined"
+            density="compact"
+            hide-details
+            hint="Minimum time between alerts"
+          />
+
+          <!-- Minimum Duration -->
+          <div class="flex flex-col gap-2">
+            <v-checkbox
+              v-model="isDurationEnabled"
+              label="Require minimum time meeting conditions"
+              hide-details
+              density="compact"
+              color="white"
+            />
+            <v-text-field
+              v-if="isDurationEnabled"
+              v-model.number="editingAlertDurationMs"
+              label="Minimum Duration (milliseconds)"
+              type="number"
+              min="1"
+              variant="outlined"
+              density="compact"
+              hide-details
+              hint="Conditions must be true for this duration before alerting"
+            />
+          </div>
+
+          <!-- Custom Message (optional) -->
+          <v-textarea
+            v-model="editingAlert.customMessage"
+            label="Custom Message (optional)"
+            variant="outlined"
+            density="compact"
+            hide-details
+            rows="2"
+            auto-grow
+            placeholder="Use {{variableName}} to include current values"
+          />
+        </div>
+      </v-card-text>
+      <v-divider class="mx-6" />
+      <v-card-actions>
+        <div class="flex justify-between items-center pa-2 w-full">
+          <v-btn color="white" variant="text" @click="closeDialog">Cancel</v-btn>
+          <v-btn color="white" :disabled="!isFormValid" @click="saveAlert">Save</v-btn>
+        </div>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <!-- Delete Confirmation Dialog -->
+  <v-dialog v-model="isDeleteDialogOpen" max-width="400px">
+    <v-card class="rounded-lg" :style="interfaceStore.globalGlassMenuStyles">
+      <v-card-title class="text-h6 font-weight-bold py-4 text-center">Delete Alert</v-card-title>
+      <v-card-text class="px-6 text-center">
+        Are you sure you want to delete the alert "{{ alertToDelete?.name }}"?
+      </v-card-text>
+      <v-card-actions>
+        <div class="flex justify-between items-center pa-2 w-full">
+          <v-btn color="white" variant="text" @click="isDeleteDialogOpen = false">Cancel</v-btn>
+          <v-btn color="red" @click="deleteAlertConfirmed">Delete</v-btn>
+        </div>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
+import {
+  DataLakeVariable,
+  DataLakeVariableType,
+  getAllDataLakeVariablesInfo,
+  getDataLakeVariableInfo,
+  listenToDataLakeVariablesInfoChanges,
+  unlistenToDataLakeVariablesInfoChanges,
+} from '@/libs/actions/data-lake'
+import {
+  AlertCondition,
+  createDataLakeAlert,
+  DataLakeAlert,
+  deleteDataLakeAlert,
+  getAllDataLakeAlerts,
+  getComparisonOperatorsForType,
+  setDataLakeAlertEnabled,
+  updateDataLakeAlert,
+} from '@/libs/actions/data-lake-alerts'
+import { useAppInterfaceStore } from '@/stores/appInterface'
+import { AlertLevel } from '@/types/alert'
+
+const interfaceStore = useAppInterfaceStore()
+
+// State
+const alerts = ref<DataLakeAlert[]>([])
+const availableVariablesMap = ref<Record<string, DataLakeVariable>>({})
+const isDialogOpen = ref(false)
+const isDeleteDialogOpen = ref(false)
+const isEditing = ref(false)
+const alertToDelete = ref<DataLakeAlert | null>(null)
+
+// Default alert values
+const defaultAlert: Omit<DataLakeAlert, 'id'> = {
+  name: '',
+  enabled: true,
+  conditions: [],
+  level: AlertLevel.Warning,
+  minInterval: 60000,
+  minDuration: 0,
+  customMessage: '',
+}
+
+const editingAlert = ref<
+  Omit<DataLakeAlert, 'id'> & {
+    /**
+     * Optional ID for editing an existing alert
+     */
+    id?: string
+  }
+>({ ...defaultAlert })
+
+// Computed
+const availableVariables = computed(() => {
+  return Object.entries(availableVariablesMap.value).map(([id, variable]) => ({
+    value: id,
+    label: `${variable.name} (${variable.type})`,
+  }))
+})
+
+/**
+ * Get the variable type for a specific condition
+ * @param {AlertCondition} condition - The condition to get the variable type for
+ * @returns {DataLakeVariableType | undefined} The variable type
+ */
+const getConditionVariableType = (condition: AlertCondition): DataLakeVariableType | undefined => {
+  if (!condition.variableId) return undefined
+  return availableVariablesMap.value[condition.variableId]?.type
+}
+
+/**
+ * Get available operators for a specific condition based on its variable type
+ * @param {AlertCondition} condition - The condition to get the operators for
+ * @returns {Array<{value: string, label: string}>} The available operators
+ */
+const getOperatorsForCondition = (
+  condition: AlertCondition
+): Array<{
+  /** The operator value */
+  value: string
+  /** The operator label */
+  label: string
+}> => {
+  const type = getConditionVariableType(condition)
+  if (!type) return []
+  return getComparisonOperatorsForType(type)
+}
+
+const editingAlertIntervalSeconds = computed({
+  get: () => editingAlert.value.minInterval / 1000,
+  set: (value: number) => {
+    editingAlert.value.minInterval = value * 1000
+  },
+})
+
+const editingAlertDurationMs = computed({
+  get: () => editingAlert.value.minDuration,
+  set: (value: number) => {
+    editingAlert.value.minDuration = value
+  },
+})
+
+const isDurationEnabled = computed({
+  get: () => editingAlert.value.minDuration > 0,
+  set: (enabled: boolean) => {
+    editingAlert.value.minDuration = enabled ? 1000 : 0
+  },
+})
+
+const isFormValid = computed(() => {
+  return (
+    editingAlert.value.name.trim() !== '' &&
+    editingAlert.value.conditions.length > 0 &&
+    editingAlert.value.conditions.every(
+      (c) => c.variableId !== '' && c.operator !== undefined && c.compareValue !== undefined
+    )
+  )
+})
+
+const alertLevelOptions = [
+  { title: 'Success', value: AlertLevel.Success },
+  { title: 'Info', value: AlertLevel.Info },
+  { title: 'Warning', value: AlertLevel.Warning },
+  { title: 'Error', value: AlertLevel.Error },
+  { title: 'Critical', value: AlertLevel.Critical },
+]
+
+// Methods
+const loadAlerts = (): void => {
+  alerts.value = getAllDataLakeAlerts()
+}
+
+const loadVariables = (): void => {
+  availableVariablesMap.value = getAllDataLakeVariablesInfo()
+}
+
+const getVariableName = (variableId: string): string => {
+  const variable = getDataLakeVariableInfo(variableId)
+  return variable?.name || variableId
+}
+
+/**
+ * Copy the variable name to clipboard for use in custom messages
+ * @param {string} variableId - The ID of the variable to copy the name for
+ */
+const copyVariableName = async (variableId: string): Promise<void> => {
+  if (!variableId) return
+  const variableName = getVariableName(variableId)
+  const placeholder = `{{${variableName}}}`
+  try {
+    await navigator.clipboard.writeText(placeholder)
+  } catch (error) {
+    console.error('Failed to copy to clipboard:', error)
+  }
+}
+
+/**
+ * Get a summary of all variables used in an alert's conditions
+ * @param {DataLakeAlert} alert - The alert to get the variables summary for
+ * @returns {string} The summary of the variables used in the alert's conditions
+ */
+const getAlertVariablesSummary = (alert: DataLakeAlert): string => {
+  const uniqueVariableIds = [...new Set(alert.conditions.map((c) => c.variableId))]
+  if (uniqueVariableIds.length === 0) return 'No variables'
+  const names = uniqueVariableIds.map((id) => getVariableName(id))
+  return names.join(', ')
+}
+
+const getLevelClass = (level: AlertLevel): string => {
+  const classes: Record<AlertLevel, string> = {
+    [AlertLevel.Success]: 'bg-green-600',
+    [AlertLevel.Info]: 'bg-blue-600',
+    [AlertLevel.Warning]: 'bg-yellow-600',
+    [AlertLevel.Error]: 'bg-red-600',
+    [AlertLevel.Critical]: 'bg-red-800',
+  }
+  return classes[level] || 'bg-slate-600'
+}
+
+const toggleAlertEnabled = (alert: DataLakeAlert): void => {
+  setDataLakeAlertEnabled(alert.id, !alert.enabled)
+  loadAlerts()
+}
+
+/**
+ * Handle when a condition's variable is changed - reset operator and value to defaults
+ * @param {AlertCondition} condition - The condition to handle the variable change for
+ */
+const onConditionVariableChanged = (condition: AlertCondition): void => {
+  const type = getConditionVariableType(condition)
+  if (type) {
+    const operators = getComparisonOperatorsForType(type)
+    condition.operator = operators[0]?.value || 'equals'
+    // Set default compare value based on type
+    switch (type) {
+      case 'boolean':
+        condition.compareValue = true
+        break
+      case 'number':
+        condition.compareValue = 0
+        break
+      default:
+        condition.compareValue = ''
+    }
+  }
+}
+
+/**
+ * Add a new empty condition
+ */
+const addCondition = (): void => {
+  editingAlert.value.conditions.push({
+    variableId: '',
+    operator: 'equals',
+    compareValue: '',
+  })
+}
+
+const removeCondition = (index: number): void => {
+  editingAlert.value.conditions.splice(index, 1)
+}
+
+const openCreateDialog = (): void => {
+  isEditing.value = false
+  editingAlert.value = { ...defaultAlert }
+  isDialogOpen.value = true
+}
+
+const openEditDialog = (alert: DataLakeAlert): void => {
+  isEditing.value = true
+  // Deep copy to avoid modifying the original alert in globalAlerts while editing
+  editingAlert.value = JSON.parse(JSON.stringify(alert))
+  isDialogOpen.value = true
+}
+
+const closeDialog = (): void => {
+  isDialogOpen.value = false
+  editingAlert.value = { ...defaultAlert }
+}
+
+const saveAlert = (): void => {
+  if (!isFormValid.value) return
+
+  if (isEditing.value && editingAlert.value.id) {
+    updateDataLakeAlert(editingAlert.value as DataLakeAlert)
+  } else {
+    const { ...alertWithoutId } = editingAlert.value
+    createDataLakeAlert(alertWithoutId)
+  }
+
+  loadAlerts()
+  closeDialog()
+}
+
+/**
+ * Duplicate an existing alert with a new ID
+ * @param {DataLakeAlert} alert - The alert to duplicate
+ */
+const duplicateAlert = (alert: DataLakeAlert): void => {
+  // Create a deep copy using JSON parse/stringify to avoid any references
+  const alertCopy = JSON.parse(JSON.stringify(alert)) as DataLakeAlert
+  // Remove the id so a new one will be generated
+  const alertCopyWithoutId = alertCopy as Omit<DataLakeAlert, 'id'>
+  // Append " (copy)" to the name
+  alertCopyWithoutId.name = `${alert.name} (copy)`
+  // Create the new alert
+  createDataLakeAlert(alertCopyWithoutId)
+  loadAlerts()
+}
+
+const confirmDeleteAlert = (alert: DataLakeAlert): void => {
+  alertToDelete.value = alert
+  isDeleteDialogOpen.value = true
+}
+
+const deleteAlertConfirmed = (): void => {
+  if (alertToDelete.value) {
+    deleteDataLakeAlert(alertToDelete.value.id)
+    loadAlerts()
+  }
+  isDeleteDialogOpen.value = false
+  alertToDelete.value = null
+}
+
+// Lifecycle
+let variablesListenerId: string | null = null
+
+onMounted(() => {
+  loadAlerts()
+  loadVariables()
+
+  // Listen for variable changes
+  variablesListenerId = listenToDataLakeVariablesInfoChanges(() => {
+    loadVariables()
+  })
+})
+
+onUnmounted(() => {
+  if (variablesListenerId) {
+    unlistenToDataLakeVariablesInfoChanges(variablesListenerId)
+  }
+})
+</script>
diff --git a/src/libs/actions/data-lake-alerts.ts b/src/libs/actions/data-lake-alerts.ts
new file mode 100644
index 0000000000..cdcbc131a7
--- /dev/null
+++ b/src/libs/actions/data-lake-alerts.ts
@@ -0,0 +1,488 @@
+import { v4 as uuid } from 'uuid'
+
+import { pushAlert } from '@/libs/alert-manager'
+import { Alert, AlertLevel } from '@/types/alert'
+
+import {
+  DataLakeVariableType,
+  getDataLakeVariableData,
+  getDataLakeVariableInfo,
+  listenDataLakeVariable,
+  unlistenDataLakeVariable,
+} from './data-lake'
+
+const dataLakeAlertsKey = 'cockpit-data-lake-alerts'
+
+/**
+ * Comparison operators for alerts
+ */
+export type ComparisonOperator =
+  | 'equals' // for all types
+  | 'notEquals' // for all types
+  | 'greaterThan' // for numbers
+  | 'greaterThanOrEqual' // for numbers
+  | 'lessThan' // for numbers
+  | 'lessThanOrEqual' // for numbers
+
+/**
+ * Get available comparison operators for a given variable type
+ * @param {DataLakeVariableType} type - The type of the variable
+ * @returns {Array<{value: ComparisonOperator, label: string}>} Available operators
+ */
+export const getComparisonOperatorsForType = (
+  type: DataLakeVariableType
+): Array<{
+  /**
+   * The value of the operator
+   */
+  value: ComparisonOperator
+  /**
+   * The label of the operator
+   */
+  label: string
+}> => {
+  switch (type) {
+    case 'boolean':
+      return [{ value: 'equals', label: 'equals' }]
+    case 'number':
+      return [
+        { value: 'greaterThan', label: '>' },
+        { value: 'greaterThanOrEqual', label: '>=' },
+        { value: 'lessThan', label: '<' },
+        { value: 'lessThanOrEqual', label: '<=' },
+        { value: 'equals', label: '=' },
+        { value: 'notEquals', label: '≠' },
+      ]
+    case 'string':
+      return [
+        { value: 'equals', label: 'equals' },
+        { value: 'notEquals', label: 'not equals' },
+      ]
+    default:
+      return [
+        { value: 'equals', label: 'equals' },
+        { value: 'notEquals', label: 'not equals' },
+      ]
+  }
+}
+
+/**
+ * Interface for a single alert condition
+ */
+export interface AlertCondition {
+  /** The ID of the data lake variable to monitor for this condition */
+  variableId: string
+  /** The comparison operator to use */
+  operator: ComparisonOperator
+  /** The value to compare against */
+  compareValue: string | number | boolean
+}
+
+/**
+ * Interface for a Data Lake alert configuration
+ */
+export interface DataLakeAlert {
+  /** Unique identifier for the alert */
+  id: string
+  /** User-friendly name for the alert */
+  name: string
+  /** Whether the alert is enabled */
+  enabled: boolean
+  /** Array of conditions (all must be true - AND logic), each with its own variable */
+  conditions: AlertCondition[]
+  /** The alert level when triggered */
+  level: AlertLevel
+  /** Minimum time (in ms) between consecutive alerts */
+  minInterval: number
+  /** Minimum duration (in ms) that conditions must be met before triggering (0 = disabled) */
+  minDuration: number
+  /** Optional custom message */
+  customMessage?: string
+}
+
+/** Internal tracking for alert state */
+interface AlertState {
+  /**
+   * Map of variable IDs to their listener IDs
+   */
+  listenerIds: Record<string, string>
+  /**
+   * The time the alert was last triggered
+   */
+  lastTriggeredTime: number
+  /**
+   * The time when conditions first became true (null if conditions are not met)
+   */
+  conditionMetSince: number | null
+}
+
+let globalAlerts: DataLakeAlert[] = []
+const alertStates: Record<string, AlertState> = {}
+
+/**
+ * Evaluate if a single condition is met
+ * @param {AlertCondition} condition - The condition to evaluate
+ * @returns {boolean} Whether the condition is met
+ */
+const evaluateSingleCondition = (condition: AlertCondition): boolean => {
+  const currentValue = getDataLakeVariableData(condition.variableId)
+  if (currentValue === undefined) return false
+
+  const { operator, compareValue } = condition
+
+  switch (operator) {
+    case 'equals':
+      return currentValue === compareValue
+    case 'notEquals':
+      return currentValue !== compareValue
+    case 'greaterThan':
+      return Number(currentValue) > Number(compareValue)
+    case 'greaterThanOrEqual':
+      return Number(currentValue) >= Number(compareValue)
+    case 'lessThan':
+      return Number(currentValue) < Number(compareValue)
+    case 'lessThanOrEqual':
+      return Number(currentValue) <= Number(compareValue)
+    default:
+      return false
+  }
+}
+
+/**
+ * Evaluate if all alert conditions are met (AND logic)
+ * @param {DataLakeAlert} alert - The alert configuration
+ * @returns {boolean} Whether all conditions are met
+ */
+const evaluateAllConditions = (alert: DataLakeAlert): boolean => {
+  if (alert.conditions.length === 0) return false
+  return alert.conditions.every((condition) => evaluateSingleCondition(condition))
+}
+
+/**
+ * Get a human-readable description of the operator
+ * @param {ComparisonOperator} operator - The operator
+ * @returns {string} Human-readable description
+ */
+const getOperatorDescription = (operator: ComparisonOperator): string => {
+  switch (operator) {
+    case 'equals':
+      return 'equals'
+    case 'notEquals':
+      return 'does not equal'
+    case 'greaterThan':
+      return 'is greater than'
+    case 'greaterThanOrEqual':
+      return 'is greater than or equal to'
+    case 'lessThan':
+      return 'is less than'
+    case 'lessThanOrEqual':
+      return 'is less than or equal to'
+    default:
+      return operator
+  }
+}
+
+/**
+ * Format a single condition for display (with variable name and current value)
+ * @param {AlertCondition} condition - The condition
+ * @returns {string} Formatted condition string
+ */
+const formatConditionForMessage = (condition: AlertCondition): string => {
+  const variableInfo = getDataLakeVariableInfo(condition.variableId)
+  const variableName = variableInfo?.name || condition.variableId
+  const currentValue = getDataLakeVariableData(condition.variableId)
+  return `${variableName} (${currentValue}) ${getOperatorDescription(condition.operator)} ${condition.compareValue}`
+}
+
+/**
+ * Replace variable name placeholders in a custom message with their current values
+ * Supports {{variableName}} syntax where variableName is the display name of a variable
+ * @param {string} message - The custom message with placeholders
+ * @param {DataLakeAlert} alert - The alert configuration (used to find variable IDs)
+ * @returns {string} The message with placeholders replaced
+ */
+const replaceMessagePlaceholders = (message: string, alert: DataLakeAlert): string => {
+  // Find all {{variableName}} placeholders
+  const placeholderRegex = /\{\{([^}]+)\}\}/g
+  return message.replace(placeholderRegex, (match, variableName) => {
+    // Find a condition with a variable that matches this name
+    for (const condition of alert.conditions) {
+      const variableInfo = getDataLakeVariableInfo(condition.variableId)
+      if (variableInfo?.name === variableName) {
+        const value = getDataLakeVariableData(condition.variableId)
+        return value !== undefined ? String(value) : match
+      }
+    }
+    // If no matching variable found, leave the placeholder as-is
+    return match
+  })
+}
+
+/**
+ * Generate the alert message
+ * @param {DataLakeAlert} alert - The alert configuration
+ * @returns {string} The alert message
+ */
+const generateAlertMessage = (alert: DataLakeAlert): string => {
+  if (alert.customMessage) {
+    return replaceMessagePlaceholders(alert.customMessage, alert)
+  }
+
+  const conditionsStr = alert.conditions.map(formatConditionForMessage).join(' AND ')
+  return `${alert.name}: ${conditionsStr}`
+}
+
+/**
+ * Get unique variable IDs from an alert's conditions
+ * @param {DataLakeAlert} alert - The alert
+ * @returns {string[]} Array of unique variable IDs
+ */
+const getUniqueVariableIds = (alert: DataLakeAlert): string[] => {
+  return [...new Set(alert.conditions.map((c) => c.variableId))]
+}
+
+/**
+ * Handler for when any monitored variable changes
+ * @param {DataLakeAlert} alert - The alert to evaluate
+ */
+const handleVariableChange = (alert: DataLakeAlert): void => {
+  if (!alert.enabled) return
+
+  const state = alertStates[alert.id]
+  if (!state) return
+
+  const now = Date.now()
+  const conditionsMet = evaluateAllConditions(alert)
+
+  if (conditionsMet) {
+    // Track when conditions first became true
+    if (state.conditionMetSince === null) {
+      state.conditionMetSince = now
+    }
+
+    const durationMet = alert.minDuration === 0 || now - state.conditionMetSince >= alert.minDuration
+    const intervalMet = now - state.lastTriggeredTime >= alert.minInterval
+
+    if (durationMet && intervalMet) {
+      const message = generateAlertMessage(alert)
+
+      pushAlert(new Alert(alert.level, message))
+      state.lastTriggeredTime = now
+      // Reset the condition met time after triggering
+      state.conditionMetSince = null
+    }
+  } else {
+    // Conditions no longer met, reset the timer
+    state.conditionMetSince = null
+  }
+}
+
+/**
+ * Set up listeners for an alert (one per unique variable in conditions)
+ * @param {DataLakeAlert} alert - The alert to set up
+ */
+const setupAlertListener = (alert: DataLakeAlert): void => {
+  // Clean up existing listeners if any
+  cleanupAlertListener(alert.id)
+
+  const variableIds = getUniqueVariableIds(alert)
+  const listenerIds: Record<string, string> = {}
+
+  // Set up a listener for each unique variable
+  for (const variableId of variableIds) {
+    const listenerId = listenDataLakeVariable(variableId, () => {
+      // Re-fetch the alert from globalAlerts to get the latest state
+      const currentAlert = globalAlerts.find((a) => a.id === alert.id)
+      if (currentAlert) {
+        handleVariableChange(currentAlert)
+      }
+    })
+    listenerIds[variableId] = listenerId
+  }
+
+  alertStates[alert.id] = {
+    listenerIds,
+    lastTriggeredTime: 0,
+    conditionMetSince: null,
+  }
+}
+
+/**
+ * Clean up listeners for an alert
+ * @param {string} alertId - The ID of the alert
+ */
+const cleanupAlertListener = (alertId: string): void => {
+  const state = alertStates[alertId]
+  if (!state) return
+
+  // Unsubscribe from all variables
+  for (const [variableId, listenerId] of Object.entries(state.listenerIds)) {
+    unlistenDataLakeVariable(variableId, listenerId)
+  }
+
+  delete alertStates[alertId]
+}
+
+/**
+ * Load alerts from localStorage
+ */
+const loadAlerts = (): void => {
+  try {
+    const savedAlerts = localStorage.getItem(dataLakeAlertsKey)
+    if (savedAlerts) {
+      globalAlerts = JSON.parse(savedAlerts) as DataLakeAlert[]
+      // Set up listeners for all alerts
+      globalAlerts.forEach((alert) => {
+        setupAlertListener(alert)
+      })
+    }
+  } catch (error) {
+    console.error('Failed to load data lake alerts:', error)
+    globalAlerts = []
+  }
+}
+
+/**
+ * Save alerts to localStorage
+ */
+const saveAlerts = (): void => {
+  try {
+    localStorage.setItem(dataLakeAlertsKey, JSON.stringify(globalAlerts))
+  } catch (error) {
+    console.error('Failed to save data lake alerts:', error)
+  }
+}
+
+/**
+ * Get all data lake alerts
+ * @returns {DataLakeAlert[]} All configured alerts
+ */
+export const getAllDataLakeAlerts = (): DataLakeAlert[] => {
+  return [...globalAlerts]
+}
+
+/**
+ * Get a specific alert by ID
+ * @param {string} id - The alert ID
+ * @returns {DataLakeAlert | undefined} The alert if found
+ */
+export const getDataLakeAlert = (id: string): DataLakeAlert | undefined => {
+  return globalAlerts.find((a) => a.id === id)
+}
+
+/**
+ * Create a new data lake alert
+ * @param {Omit<DataLakeAlert, 'id'>} alertConfig - The alert configuration (without ID)
+ * @returns {DataLakeAlert} The created alert
+ */
+export const createDataLakeAlert = (alertConfig: Omit<DataLakeAlert, 'id'>): DataLakeAlert => {
+  const alert: DataLakeAlert = {
+    ...alertConfig,
+    id: uuid(),
+  }
+
+  globalAlerts.push(alert)
+  setupAlertListener(alert)
+  saveAlerts()
+
+  return alert
+}
+
+/**
+ * Update an existing alert
+ * @param {DataLakeAlert} updatedAlert - The updated alert configuration
+ */
+export const updateDataLakeAlert = (updatedAlert: DataLakeAlert): void => {
+  const index = globalAlerts.findIndex((a) => a.id === updatedAlert.id)
+  if (index === -1) {
+    console.error(`Alert with id '${updatedAlert.id}' not found`)
+    return
+  }
+
+  // Clean up old listeners and set up new ones
+  cleanupAlertListener(updatedAlert.id)
+
+  globalAlerts[index] = updatedAlert
+  setupAlertListener(updatedAlert)
+
+  saveAlerts()
+}
+
+/**
+ * Delete an alert
+ * @param {string} id - The ID of the alert to delete
+ */
+export const deleteDataLakeAlert = (id: string): void => {
+  const index = globalAlerts.findIndex((a) => a.id === id)
+  if (index === -1) return
+
+  cleanupAlertListener(id)
+  globalAlerts.splice(index, 1)
+  saveAlerts()
+}
+
+/**
+ * Toggle the enabled state of an alert
+ * @param {string} id - The alert ID
+ * @param {boolean} enabled - The new enabled state
+ */
+export const setDataLakeAlertEnabled = (id: string, enabled: boolean): void => {
+  const alert = globalAlerts.find((a) => a.id === id)
+  if (!alert) return
+
+  alert.enabled = enabled
+  saveAlerts()
+}
+
+/**
+ * Get the default compare value for a given variable type
+ * @param {DataLakeVariableType} type - The variable type
+ * @returns {string | number | boolean} The default compare value
+ */
+export const getDefaultCompareValue = (type: DataLakeVariableType): string | number | boolean => {
+  switch (type) {
+    case 'boolean':
+      return true
+    case 'number':
+      return 0
+    case 'string':
+      return ''
+    default:
+      return ''
+  }
+}
+
+/**
+ * Get the default operator for a given variable type
+ * @param {DataLakeVariableType} type - The variable type
+ * @returns {ComparisonOperator} The default operator
+ */
+export const getDefaultOperator = (type: DataLakeVariableType): ComparisonOperator => {
+  switch (type) {
+    case 'boolean':
+      return 'equals'
+    case 'number':
+      return 'greaterThan'
+    case 'string':
+      return 'equals'
+    default:
+      return 'equals'
+  }
+}
+
+/**
+ * Create a default condition for a given variable
+ * @param {string} variableId - The variable ID
+ * @param {DataLakeVariableType} type - The variable type
+ * @returns {AlertCondition} A default condition
+ */
+export const createDefaultCondition = (variableId: string, type: DataLakeVariableType): AlertCondition => {
+  return {
+    variableId,
+    operator: getDefaultOperator(type),
+    compareValue: getDefaultCompareValue(type),
+  }
+}
+
+// Initialize by loading saved alerts
+loadAlerts()
diff --git a/src/views/ConfigurationAlertsView.vue b/src/views/ConfigurationAlertsView.vue
index 6934ee5eb2..27bc75b174 100644
--- a/src/views/ConfigurationAlertsView.vue
+++ b/src/views/ConfigurationAlertsView.vue
@@ -6,6 +6,8 @@
         class="flex flex-col justify-around align-start ml-5 max-h-[85vh] overflow-y-auto"
         :class="interfaceStore.isOnSmallScreen ? 'max-w-[80vw]' : 'max-w-[50vw]'"
       >
+        <!-- Data Lake Alerts Configuration -->
+        <DataLakeAlertsConfig />
         <ExpansiblePanel :is-expanded="!interfaceStore.isOnPhoneScreen" no-top-divider>
           <template #title>Text to speech:</template>
           <template #info>
@@ -77,6 +79,7 @@
 <script setup lang="ts">
 import { capitalize } from 'vue'
 
+import DataLakeAlertsConfig from '@/components/configuration/DataLakeAlertsConfig.vue'
 import Dropdown from '@/components/Dropdown.vue'
 import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
 import { useAlertStore } from '@/stores/alert'