Store logs backend

Author: Sytten

packages/backend/src/index.ts

@@ -15,6 +15,15 @@ const settings: Settings = {
   forceUninstall: false,
 };
 
+type Log = {
+  kind: "Log";
+  origin: string;
+  timestamp: number;
+  message: string;
+};
+
+const logs: Log[] = [];
+
 const setSettings = (sdk: SDK, newSettings: Settings) => {
   Object.assign(settings, newSettings);
 };
@@ -30,14 +39,32 @@ const downloadPackage = async (sdk: SDK, url: string) => {
   return `data:application/zip;base64,${base64}`;
 };
 
+const addLog = (sdk: SDK, log: Log) => {
+  logs.push(log);
+};
+
+const getLogs = (sdk: SDK): Log[] => {
+  return logs;
+};
+
+const clearLogs = (sdk: SDK) => {
+  logs.length = 0;
+};
+
 export type API = DefineAPI<{
   setSettings: typeof setSettings;
   getSettings: typeof getSettings;
+  addLog: typeof addLog;
+  getLogs: typeof getLogs;
+  clearLogs: typeof clearLogs;
   downloadPackage: typeof downloadPackage;
 }>;
 
 export function init(sdk: SDK<API>) {
   sdk.api.register("setSettings", setSettings);
   sdk.api.register("getSettings", getSettings);
+  sdk.api.register("addLog", addLog);
+  sdk.api.register("getLogs", getLogs);
+  sdk.api.register("clearLogs", clearLogs);
   sdk.api.register("downloadPackage", downloadPackage);
 }

packages/frontend/src/composables/useLogs.ts

@@ -1,25 +1,44 @@
 import { computed, ref } from "vue";
 
+import { useSDK } from "@/plugins/sdk";
+
 type Log = {
   kind: "Log";
   origin: string;
-  timestamp: Date;
+  timestamp: number;
   message: string;
 };
 
 export const useLogs = () => {
+  const sdk = useSDK();
+
   const entries = ref<Log[]>([]);
   const logs = computed(() =>
     entries.value
       .map(
         (log) =>
-          `${log.timestamp.toISOString()} | ${log.origin} | ${log.message}`,
+          `${new Date(log.timestamp).toISOString()} | ${log.origin} | ${
+            log.message
+          }`,
       )
       .join("\n"),
   );
+
+  const initializeLogs = async () => {
+    const logs = await sdk.backend.getLogs();
+    entries.value = logs;
+  };
+
   const addLog = (origin: string, message: string) => {
-    entries.value.push({ kind: "Log", origin, timestamp: new Date(), message });
+    const log: Log = { kind: "Log", origin, timestamp: Date.now(), message };
+    entries.value.push(log);
+    sdk.backend.addLog(log);
+  };
+
+  const clearLogs = async () => {
+    entries.value = [];
+    await sdk.backend.clearLogs();
   };
 
-  return { logs, addLog };
+  return { logs, addLog, clearLogs, initializeLogs };
 };

packages/frontend/src/views/App.vue

@@ -1,17 +1,24 @@
 <script setup lang="ts">
 import Button from "primevue/button";
 import Card from "primevue/card";
+import Checkbox from "primevue/checkbox";
 import InputGroup from "primevue/inputgroup";
 import InputGroupAddon from "primevue/inputgroupaddon";
 import InputText from "primevue/inputtext";
 import Tag from "primevue/tag";
 import TextArea from "primevue/textarea";
 
 import { useForm } from "./useForm";
-import Checkbox from "primevue/checkbox";
 
-const { serverUrl, forceUninstall, onSubmit, state, onDisconnect, logs } =
-  useForm();
+const {
+  serverUrl,
+  forceUninstall,
+  onSubmit,
+  state,
+  onDisconnect,
+  logs,
+  onClearLogs,
+} = useForm();
 </script>
 
 <template>
@@ -75,7 +82,10 @@ const { serverUrl, forceUninstall, onSubmit, state, onDisconnect, logs } =
             </div>
           </div>
           <div class="flex-1 flex flex-col gap-2">
-            <label for="logs" class="text-sm text-surface-300">Logs</label>
+            <div class="flex items-end justify-between">
+              <label for="logs" class="text-sm text-surface-300">Logs</label>
+              <Button severity="danger" label="Clear" @click="onClearLogs" />
+            </div>
             <TextArea
               id="logs"
               readonly

packages/frontend/src/views/useForm.ts

@@ -7,7 +7,7 @@ import { useState } from "@/composables/useState";
 import { toMessage } from "@/utils/watcher";
 
 export const useForm = () => {
-  const { logs, addLog } = useLogs();
+  const { logs, addLog, initializeLogs, clearLogs } = useLogs();
   const { state, setState } = useState();
   const { getSettings, setSettings, initializeSettings } = useSettings();
   const { installPackage, removePackage, getInstalledPackage } =
@@ -106,6 +106,7 @@ export const useForm = () => {
   const serverUrl = ref("");
   onMounted(async () => {
     await initializeSettings();
+    await initializeLogs();
 
     const settings = getSettings();
     if (settings.serverUrl !== undefined) {
@@ -133,12 +134,17 @@ export const useForm = () => {
     }
   };
 
+  const onClearLogs = async () => {
+    await clearLogs();
+  };
+
   return {
     serverUrl,
     forceUninstall,
     state,
     onSubmit,
     onDisconnect,
+    onClearLogs,
     logs,
   };
 };