alerts: Allow customization of BlueOS-related alerts

Author: rafaellehmkuhl

src/components/configuration/BlueOSAlertsConfig.vue

@@ -0,0 +1,100 @@
+<template>
+  <ExpansiblePanel :is-expanded="false">
+    <template #title>BlueOS monitoring alerts:</template>
+    <template #info>
+      Configure alerts for BlueOS system monitoring including CPU temperature and usage thresholds. <br />
+      Set custom thresholds and minimum intervals between alerts to prevent spam.
+    </template>
+    <template #content>
+      <!-- CPU Temperature Configuration -->
+      <div class="mb-6">
+        <div class="flex items-center justify-start mb-3 gap-x-6">
+          <span class="text-sm font-medium">CPU Temperature Alert</span>
+          <v-switch
+            v-model="vehicleAlerterStore.blueOsAlertsConfig['cpu-temperature'].enabled"
+            color="white"
+            hide-details
+            density="compact"
+          />
+        </div>
+        <div class="ml-4 space-y-3">
+          <div class="flex items-center gap-4">
+            <span class="text-sm text-slate-200 min-w-[100px]">Threshold (°C):</span>
+            <input
+              v-model.number="vehicleAlerterStore.blueOsAlertsConfig['cpu-temperature'].threshold"
+              type="number"
+              class="px-2 py-1 rounded-sm bg-[#FFFFFF22] max-w-[82px]"
+              :disabled="!vehicleAlerterStore.blueOsAlertsConfig['cpu-temperature'].enabled"
+            />
+          </div>
+          <div class="flex items-center gap-4">
+            <span class="text-sm text-slate-200 min-w-[100px]">Min interval (s):</span>
+            <input
+              v-model.number="cpuTemperatureIntervalSeconds"
+              type="number"
+              class="px-2 py-1 rounded-sm bg-[#FFFFFF22] max-w-[82px]"
+              :disabled="!vehicleAlerterStore.blueOsAlertsConfig['cpu-temperature'].enabled"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- CPU Usage Configuration -->
+      <div class="mb-4">
+        <div class="flex items-center justify-start mb-3 gap-x-6">
+          <span class="text-sm font-medium">CPU Usage Alert</span>
+          <v-switch
+            v-model="vehicleAlerterStore.blueOsAlertsConfig['cpu-usage'].enabled"
+            color="white"
+            hide-details
+            density="compact"
+          />
+        </div>
+        <div class="ml-4 space-y-3">
+          <div class="flex items-center gap-4">
+            <span class="text-sm text-slate-200 min-w-[100px]">Threshold (%):</span>
+            <input
+              v-model.number="vehicleAlerterStore.blueOsAlertsConfig['cpu-usage'].threshold"
+              type="number"
+              class="px-2 py-1 rounded-sm bg-[#FFFFFF22] max-w-[82px]"
+              :disabled="!vehicleAlerterStore.blueOsAlertsConfig['cpu-usage'].enabled"
+            />
+          </div>
+          <div class="flex items-center gap-4">
+            <span class="text-sm text-slate-200 min-w-[100px]">Min interval (s):</span>
+            <input
+              v-model.number="cpuUsageIntervalSeconds"
+              type="number"
+              class="px-2 py-1 rounded-sm bg-[#FFFFFF22] max-w-[82px]"
+              :disabled="!vehicleAlerterStore.blueOsAlertsConfig['cpu-usage'].enabled"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+  </ExpansiblePanel>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
+import { useVehicleAlerterStore } from '@/stores/vehicleAlerter'
+
+const vehicleAlerterStore = useVehicleAlerterStore()
+
+// Convert between seconds (UI) and milliseconds (store)
+const cpuTemperatureIntervalSeconds = computed({
+  get: () => vehicleAlerterStore.blueOsAlertsConfig['cpu-temperature'].minInterval / 1000,
+  set: (value: number) => {
+    vehicleAlerterStore.blueOsAlertsConfig['cpu-temperature'].minInterval = value * 1000
+  },
+})
+
+const cpuUsageIntervalSeconds = computed({
+  get: () => vehicleAlerterStore.blueOsAlertsConfig['cpu-usage'].minInterval / 1000,
+  set: (value: number) => {
+    vehicleAlerterStore.blueOsAlertsConfig['cpu-usage'].minInterval = value * 1000
+  },
+})
+</script>

src/stores/vehicleAlerter.ts

@@ -68,4 +68,8 @@ export const useVehicleAlerterStore = defineStore('vehicle-alerter', () => {
       lastBlueOsCpuUsageAlertTimestamp = Date.now()
     }
   })
+
+  return {
+    blueOsAlertsConfig,
+  }
 })

src/views/ConfigurationAlertsView.vue

@@ -44,6 +44,7 @@
             />
           </template>
         </ExpansiblePanel>
+        <BlueOSAlertsConfig />
         <!-- Armed Menu Warning Toggle -->
         <v-switch
           :model-value="!alertStore.neverShowArmedMenuWarning"
@@ -61,6 +62,7 @@
 <script setup lang="ts">
 import { capitalize } from 'vue'
 
+import BlueOSAlertsConfig from '@/components/configuration/BlueOSAlertsConfig.vue'
 import Dropdown from '@/components/Dropdown.vue'
 import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
 import { useAlertStore } from '@/stores/alert'