Add simple log viewer in web frontend

2026-02-11 13:31:45 +01:00 · 2026-02-07 07:05:33 +01:00
parent a8194de492
commit 363e839c49
10 changed files with 435 additions and 27 deletions
--- a/web/frontend/package-lock.json
+++ b/web/frontend/package-lock.json
@@ -250,7 +250,6 @@
      "cpu": [
        "arm"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -264,7 +263,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -278,7 +276,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -292,7 +289,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -306,7 +302,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -320,7 +315,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -334,7 +328,6 @@
      "cpu": [
        "arm"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -348,7 +341,6 @@
      "cpu": [
        "arm"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -362,7 +354,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -376,7 +367,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -390,7 +380,6 @@
      "cpu": [
        "loong64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -404,7 +393,6 @@
      "cpu": [
        "loong64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -418,7 +406,6 @@
      "cpu": [
        "ppc64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -432,7 +419,6 @@
      "cpu": [
        "ppc64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -446,7 +432,6 @@
      "cpu": [
        "riscv64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -460,7 +445,6 @@
      "cpu": [
        "riscv64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -474,7 +458,6 @@
      "cpu": [
        "s390x"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -488,7 +471,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -502,7 +484,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -516,7 +497,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -530,7 +510,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -544,7 +523,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -558,7 +536,6 @@
      "cpu": [
        "ia32"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -572,7 +549,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -586,7 +562,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -837,7 +812,6 @@
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
      "optional": true,
--- a/web/frontend/rollup.config.mjs
+++ b/web/frontend/rollup.config.mjs
@@ -75,5 +75,6 @@ export default [
    entrypoint('analysis', 'src/analysis.entrypoint.js'),
    entrypoint('status', 'src/status.entrypoint.js'),
    entrypoint('dashpublic', 'src/dashpublic.entrypoint.js'),
-    entrypoint('config', 'src/config.entrypoint.js')
+    entrypoint('config', 'src/config.entrypoint.js'),
+    entrypoint('logs', 'src/logs.entrypoint.js')
 ];
--- a/web/frontend/src/Header.svelte
+++ b/web/frontend/src/Header.svelte
@@ -135,6 +135,16 @@
      listOptions: true,
      menu: "Info",
    },
+    {
+      title: "Logs",
+      // svelte-ignore state_referenced_locally
+      requiredRole: roles.admin,
+      href: "/monitoring/logs",
+      icon: "journal-text",
+      perCluster: false,
+      listOptions: false,
+      menu: "Info",
+    },
  ];

  /* State Init */
--- a/web/frontend/src/Logs.root.svelte
+++ b/web/frontend/src/Logs.root.svelte
@@ -0,0 +1,228 @@
+<!--
+  @component Systemd Journal Log Viewer (Admin only)
+
+  Properties:
+  - `isAdmin Bool!`: Is currently logged in user admin authority
+-->
+
+<script>
+  import {
+    Card,
+    CardHeader,
+    CardBody,
+    Table,
+    Input,
+    Button,
+    Badge,
+    Spinner,
+    InputGroup,
+    InputGroupText,
+    Icon,
+  } from "@sveltestrap/sveltestrap";
+
+  let { isAdmin } = $props();
+
+  const timeRanges = [
+    { label: "Last 15 minutes", value: "15 min ago" },
+    { label: "Last 1 hour", value: "1 hour ago" },
+    { label: "Last 6 hours", value: "6 hours ago" },
+    { label: "Last 24 hours", value: "24 hours ago" },
+    { label: "Last 7 days", value: "7 days ago" },
+  ];
+
+  const levels = [
+    { label: "All levels", value: "" },
+    { label: "Emergency (0)", value: "0" },
+    { label: "Alert (1)", value: "1" },
+    { label: "Critical (2)", value: "2" },
+    { label: "Error (3)", value: "3" },
+    { label: "Warning (4)", value: "4" },
+    { label: "Notice (5)", value: "5" },
+    { label: "Info (6)", value: "6" },
+    { label: "Debug (7)", value: "7" },
+  ];
+
+  const refreshIntervals = [
+    { label: "Off", value: 0 },
+    { label: "5s", value: 5000 },
+    { label: "10s", value: 10000 },
+    { label: "30s", value: 30000 },
+  ];
+
+  let since = $state("1 hour ago");
+  let level = $state("");
+  let search = $state("");
+  let linesParam = $state("200");
+  let refreshInterval = $state(0);
+  let entries = $state([]);
+  let loading = $state(false);
+  let error = $state(null);
+  let timer = $state(null);
+
+  function levelColor(priority) {
+    if (priority <= 2) return "danger";
+    if (priority === 3) return "warning";
+    if (priority === 4) return "info";
+    if (priority <= 6) return "secondary";
+    return "light";
+  }
+
+  function levelName(priority) {
+    const names = ["EMERG", "ALERT", "CRIT", "ERR", "WARN", "NOTICE", "INFO", "DEBUG"];
+    return names[priority] || "UNKNOWN";
+  }
+
+  function formatTimestamp(usec) {
+    if (!usec) return "";
+    const ms = parseInt(usec) / 1000;
+    const d = new Date(ms);
+    return d.toLocaleString();
+  }
+
+  async function fetchLogs() {
+    loading = true;
+    error = null;
+    try {
+      const params = new URLSearchParams();
+      params.set("since", since);
+      params.set("lines", linesParam);
+      if (level) params.set("level", level);
+      if (search.trim()) params.set("search", search.trim());
+
+      const resp = await fetch(`/config/logs/?${params.toString()}`);
+      if (!resp.ok) {
+        const body = await resp.json();
+        throw new Error(body.error || `HTTP ${resp.status}`);
+      }
+      entries = await resp.json();
+    } catch (e) {
+      error = e.message;
+      entries = [];
+    } finally {
+      loading = false;
+    }
+  }
+
+  function setupAutoRefresh(interval) {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+    if (interval > 0) {
+      timer = setInterval(fetchLogs, interval);
+    }
+  }
+
+  $effect(() => {
+    setupAutoRefresh(refreshInterval);
+    return () => {
+      if (timer) clearInterval(timer);
+    };
+  });
+
+  // Fetch on mount
+  $effect(() => {
+    fetchLogs();
+  });
+</script>
+
+{#if !isAdmin}
+  <Card>
+    <CardBody>
+      <p>Access denied. Admin privileges required.</p>
+    </CardBody>
+  </Card>
+{:else}
+  <Card class="mb-3">
+    <CardHeader>
+      <div class="d-flex flex-wrap align-items-center gap-2">
+        <InputGroup size="sm" style="max-width: 200px;">
+          <Input type="select" bind:value={since}>
+            {#each timeRanges as tr}
+              <option value={tr.value}>{tr.label}</option>
+            {/each}
+          </Input>
+        </InputGroup>
+
+        <InputGroup size="sm" style="max-width: 180px;">
+          <Input type="select" bind:value={level}>
+            {#each levels as lv}
+              <option value={lv.value}>{lv.label}</option>
+            {/each}
+          </Input>
+        </InputGroup>
+
+        <InputGroup size="sm" style="max-width: 150px;">
+          <InputGroupText>Lines</InputGroupText>
+          <Input type="select" bind:value={linesParam}>
+            <option value="100">100</option>
+            <option value="200">200</option>
+            <option value="500">500</option>
+            <option value="1000">1000</option>
+          </Input>
+        </InputGroup>
+
+        <InputGroup size="sm" style="max-width: 250px;">
+          <Input
+            type="text"
+            placeholder="Search..."
+            bind:value={search}
+            onkeydown={(e) => { if (e.key === "Enter") fetchLogs(); }}
+          />
+        </InputGroup>
+
+        <Button size="sm" color="primary" onclick={fetchLogs} disabled={loading}>
+          {#if loading}
+            <Spinner size="sm" />
+          {:else}
+            <Icon name="arrow-clockwise" />
+          {/if}
+          Refresh
+        </Button>
+
+        <InputGroup size="sm" style="max-width: 140px;">
+          <InputGroupText>Auto</InputGroupText>
+          <Input type="select" bind:value={refreshInterval}>
+            {#each refreshIntervals as ri}
+              <option value={ri.value}>{ri.label}</option>
+            {/each}
+          </Input>
+        </InputGroup>
+
+        {#if entries.length > 0}
+          <small class="text-muted ms-auto">{entries.length} entries</small>
+        {/if}
+      </div>
+    </CardHeader>
+    <CardBody style="padding: 0;">
+      {#if error}
+        <div class="alert alert-danger m-3">{error}</div>
+      {/if}
+
+      <div style="max-height: 75vh; overflow-y: auto;">
+        <Table size="sm" striped hover responsive class="mb-0">
+          <thead class="sticky-top bg-white">
+            <tr>
+              <th style="width: 170px;">Timestamp</th>
+              <th style="width: 80px;">Level</th>
+              <th>Message</th>
+            </tr>
+          </thead>
+          <tbody style="font-family: monospace; font-size: 0.85rem;">
+            {#each entries as entry}
+              <tr>
+                <td class="text-nowrap">{formatTimestamp(entry.timestamp)}</td>
+                <td><Badge color={levelColor(entry.priority)}>{levelName(entry.priority)}</Badge></td>
+                <td style="white-space: pre-wrap; word-break: break-all;">{entry.message}</td>
+              </tr>
+            {:else}
+              {#if !loading && !error}
+                <tr><td colspan="3" class="text-center text-muted py-3">No log entries found</td></tr>
+              {/if}
+            {/each}
+          </tbody>
+        </Table>
+      </div>
+    </CardBody>
+  </Card>
+{/if}
--- a/web/frontend/src/logs.entrypoint.js
+++ b/web/frontend/src/logs.entrypoint.js
@@ -0,0 +1,10 @@
+import { mount } from 'svelte';
+import {} from './header.entrypoint.js'
+import Logs from './Logs.root.svelte'
+
+mount(Logs, {
+    target: document.getElementById('svelte-app'),
+    props: {
+        isAdmin: isAdmin,
+    }
+})
--- a/web/templates/monitoring/logs.tmpl
+++ b/web/templates/monitoring/logs.tmpl
@@ -0,0 +1,13 @@
+{{define "content"}}
+    <div id="svelte-app"></div>
+{{end}}
+
+{{define "stylesheets"}}
+    <link rel='stylesheet' href='/build/logs.css'>
+{{end}}
+{{define "javascript"}}
+    <script>
+        const isAdmin = {{ .User.HasRole .Roles.admin }};
+    </script>
+    <script src='/build/logs.js'></script>
+{{end}}