feat: ✨ let users update alert settings on a system level

Author: nirjan-dev

web/components/SystemOverview.vue

@@ -1,9 +1,18 @@
 <template>
   <UCard>
     <template #header
-      ><div class="flex justify-between">
+      ><div class="flex flex-wrap justify-between">
         <span class="capitalize"> {{ name }}</span>
-        <UButton :to="link">View Details</UButton>
+        <div class="flex items-center gap-4 flex-wrap">
+          <span class="flex items-center gap-1">
+            Alerts
+            <UToggle
+              @change="(value) => $emit('changeAlertToggle', value)"
+              v-model="enableAlert"
+            />
+          </span>
+          <UButton :to="link">View Details</UButton>
+        </div>
       </div>
     </template>
 
@@ -20,9 +29,14 @@
 </template>
 
 <script lang="ts" setup>
+const emits = defineEmits<{
+  (e: "changeAlertToggle", value: boolean): void;
+}>();
+
 const props = defineProps<{
   name: string;
   link: string;
+  enableAlert?: boolean;
   metrics: {
     timestamp: number;
     memory: {
@@ -46,6 +60,8 @@ const props = defineProps<{
   };
 }>();
 
+const enableAlert = ref(props.enableAlert ?? true);
+
 const rows = computed(() => {
   return {
     "Last Update": new Date(props.metrics.timestamp).toLocaleString(),

web/layouts/default.vue

@@ -1,7 +1,10 @@
 <template>
+  <VitePwaManifest />
   <UContainer>
     <MetricsTitle />
     <slot />
+
+    <UNotifications />
   </UContainer>
 </template>
 

web/nuxt.config.ts

@@ -19,6 +19,10 @@ export default defineNuxtConfig({
         driver: "fs",
         base: "./data/serverState",
       },
+      systemConfigs: {
+        driver: "fs",
+        base: "./data/systemConfigs",
+      },
     },
     experimental: {
       tasks: true,

web/pages/index.vue

@@ -10,7 +10,11 @@
           v-if="systemMetricsStreams[system]?.at(-1)"
           :name="system"
           :link="`/systems/${system}`"
+          :enable-alert="systemConfigs[system]?.enableAlerts"
           :metrics="systemMetricsStreams[system].at(-1)!"
+          @change-alert-toggle="
+            (value) => handleAlertToggleChange(value, system)
+          "
         />
         <USkeleton class="h-60 w-full" v-else />
       </div>
@@ -25,7 +29,14 @@ import type { Metrics } from "../../shared/types";
 const isLoading = ref(false);
 
 const systems = ref([]);
-
+const systemConfigs = ref<
+  Record<
+    string,
+    {
+      enableAlerts: boolean;
+    }
+  >
+>({});
 const systemMetricsStreams = reactive<Record<string, Metrics[]>>({});
 
 function setupMetricsStream() {
@@ -44,17 +55,47 @@ async function loadSystems() {
   systems.value = (await $fetch("/api/sytems")) ?? [];
 }
 
+async function loadSystemConfigs() {
+  const savedSystemConfigs = await $fetch("/api/system-configs");
+
+  if (savedSystemConfigs) {
+    systemConfigs.value = savedSystemConfigs;
+  }
+}
+
 onMounted(async () => {
   try {
     isLoading.value = true;
-    await loadSystems();
+    await Promise.allSettled([loadSystems(), loadSystemConfigs()]);
     setupMetricsStream();
   } catch (error) {
     console.log({ error });
   } finally {
     isLoading.value = false;
   }
 });
+
+async function handleAlertToggleChange(value: boolean, system: string) {
+  try {
+    await $fetch("/api/system-config", {
+      method: "PUT",
+      body: {
+        system,
+        enableAlerts: value,
+      },
+    });
+    useToast().add({
+      title: "Successfully updated system alert config",
+      color: "green",
+    });
+  } catch (error) {
+    console.log({ error });
+    useToast().add({
+      title: "Error updating system alert config",
+      color: "red",
+    });
+  }
+}
 </script>
 
 <style></style>

web/pages/systems/[name].vue

@@ -1,5 +1,4 @@
 <template>
-  <VitePwaManifest />
   <UBreadcrumb :links="breadcrumbLinks" />
 
   <div
@@ -57,7 +56,6 @@
       :rows="processesStats"
     />
   </UCard>
-  <UNotifications />
 </template>
 
 <script setup lang="ts">

web/server/api/system-config.get.ts

@@ -0,0 +1,14 @@
+export default defineEventHandler(async (event) => {
+  const { system } = getQuery(event);
+
+  if (!system || typeof system !== "string") {
+    throw createError({
+      statusCode: 400,
+      message: "Invalid system",
+    });
+  }
+
+  return useStorage("systemConfigs").getItem<{
+    enableAlerts: boolean;
+  }>(system);
+});

web/server/api/system-config.put.ts

@@ -0,0 +1,46 @@
+import { z } from "zod";
+
+const systemConfigEditSchema = z.object({
+  enableAlerts: z.boolean().optional(),
+  system: z.string(),
+});
+
+export default defineEventHandler(async (event) => {
+  const body = await readValidatedBody(event, systemConfigEditSchema.safeParse);
+
+  if (body.error) {
+    throw createError({
+      statusCode: 400,
+      data: body.error,
+      message: "Invalid system config edit options",
+    });
+  }
+
+  const storage = useStorage("systemConfigs");
+
+  const { system, ...updatedConfig } = body.data;
+
+  let systemConfig = (await storage.getItem<{ enableAlerts: boolean }>(
+    system
+  )) ?? {
+    enableAlerts: false,
+  };
+
+  systemConfig = {
+    ...systemConfig,
+    ...updatedConfig,
+  };
+
+  try {
+    await storage.setItem(system, systemConfig);
+    return {
+      statusCode: 200,
+    };
+  } catch (error) {
+    throw createError({
+      statusCode: 500,
+      message: "Error updating system config",
+      data: error,
+    });
+  }
+});

web/server/api/system-configs.get.ts

@@ -0,0 +1,23 @@
+export default defineEventHandler(async (event) => {
+  const storage = useStorage("systemConfigs");
+
+  const keys = await storage.getKeys();
+
+  const systemConfigs: Record<string, { enableAlerts: boolean }> = {};
+
+  await Promise.allSettled(
+    keys.map((k) => {
+      return storage
+        .getItem<{
+          enableAlerts: boolean;
+        }>(k)
+        .then((config) => {
+          if (config) {
+            systemConfigs[k] = config;
+          }
+        });
+    })
+  );
+
+  return systemConfigs;
+});

web/server/tasks/metrics/battery.ts

@@ -37,6 +37,7 @@ async function batteryCheckForSystem(system: string) {
   runTask("server:send-alert", {
     payload: {
       message: `Warning: Battery % lower than ${batteryAlertThreshold}% for ${system}`,
+      system,
     },
   });
 }

web/server/tasks/metrics/healthcheck.ts

@@ -65,6 +65,7 @@ async function healthCheckForSystem(system: string) {
       runTask("server:send-alert", {
         payload: {
           message: `No new metrics found, ${system} might be down`,
+          system,
         },
       });
     }
@@ -77,6 +78,7 @@ async function healthCheckForSystem(system: string) {
       runTask("server:send-alert", {
         payload: {
           message: `Metrics coming in again, ${system} might be up again`,
+          system,
         },
       });
     }