Add results_visualization/js/app.js

results_visualization/js/app.js

@@ -0,0 +1,91 @@
+"use strict";
+
+/**
+ * @file app.js
+ * @description Initialisiert die eBPF Analyse-Ergebnis-Visualisierung, lädt Daten und bindet UI-Events.
+ */
+
+/**
+ * Lädt die Analyseergebnisse von der API.
+ * @param {Object} [filters] - optionale Filterparameter
+ * @returns {Promise<Array>} Liste der Analyseergebnisse
+ */
+async function fetchAnalysisResults(filters = {}) {
+  const params = new URLSearchParams(filters);
+  const url = `/analyze_results?${params.toString()}`;
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Fehler beim Laden der Analyseergebnisse: ${response.status}`);
+  }
+  return await response.json();
+}
+
+/**
+ * Bindet UI-Events für Filter und Interaktionen.
+ * @function bindUIEvents
+ */
+function bindUIEvents() {
+  const filterForm = document.getElementById("filter-form");
+  if (!filterForm) return;
+
+  filterForm.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const corrId = document.getElementById("filter-corr_id")?.value.trim();
+    const type = document.getElementById("filter-type")?.value.trim();
+
+    const filters = {};
+    if (corrId) filters.filter = corrId;
+    if (type) filters.type = type;
+
+    try {
+      const data = await fetchAnalysisResults(filters);
+      renderResults(data);
+    } catch (error) {
+      console.error(error);
+    }
+  });
+}
+
+/**
+ * Rendert die Ergebnisse auf der Seite (Platzhalter für Rendering-Logik).
+ * @param {Array} data - Analyseergebnisse
+ */
+function renderResults(data) {
+  const container = document.getElementById("results-container");
+  if (!container) return;
+
+  container.innerHTML = "";
+  if (!Array.isArray(data) || data.length === 0) {
+    container.textContent = "Keine Ergebnisse gefunden.";
+    return;
+  }
+
+  data.forEach((entry) => {
+    const item = document.createElement("div");
+    item.className = "results_visualization__entry";
+    item.innerHTML = `
+      <div><strong>corr_id:</strong> ${entry.corr_id}</div>
+      <div><strong>type:</strong> ${entry.type}</div>
+      <div><strong>timestamp:</strong> ${entry.timestamp}</div>
+      <div><strong>details:</strong> ${entry.details || "-"}</div>
+    `;
+    container.appendChild(item);
+  });
+}
+
+/**
+ * Initialisiert die Anwendung, lädt Daten und bindet Events.
+ * @function initApp
+ */
+async function initApp() {
+  try {
+    const data = await fetchAnalysisResults();
+    renderResults(data);
+  } catch (error) {
+    console.error("Initial load error:", error);
+  }
+
+  bindUIEvents();
+}
+
+window.addEventListener("load", initApp);