spider-watch 0.1.0

package/dist/ui/app.js

@@ -0,0 +1,382 @@
+const MONITORING_BASE_PATH = globalThis.window?.__MONITORING_BASE_PATH || "/monitoring";
+const THEME_STORAGE_KEY = "monitoring_theme_mode";
+const AUTO_REFRESH_INTERVAL_SECONDS = 10;
+const TOAST_TIMEOUT_MS = 2500;
+
+// Alpine.js component — referenced from index.html via x-data="monitoringApp()"
+globalThis.monitoringApp = function monitoringApp() {
+  return {
+    events: [],
+    total: null,
+    loading: false,
+    error: null,
+    lastRefreshed: null,
+    selectedEvent: null,
+    detail: null,
+    detailLoading: false,
+    displayPreference: {
+      mode: "dark",
+      updatedAt: null,
+    },
+    refreshState: {
+      enabled: false,
+      intervalSeconds: AUTO_REFRESH_INTERVAL_SECONDS,
+      inFlight: false,
+      timerId: null,
+    },
+    feedback: {
+      visible: false,
+      message: "",
+      type: "info",
+      timeoutId: null,
+    },
+    deleteState: {
+      confirmOpen: false,
+      inProgress: false,
+    },
+
+    filters: {
+      q: "",
+      type: "",
+      method: "",
+      status: "",
+      from: "",
+      to: "",
+      page: 1,
+      pageSize: 50,
+    },
+
+    get totalPages() {
+      if (!this.total || !this.filters.pageSize) return 1;
+      return Math.max(1, Math.ceil(this.total / this.filters.pageSize));
+    },
+
+    get isDarkMode() {
+      return this.displayPreference.mode === "dark";
+    },
+
+    get hasNoEvents() {
+      return !this.loading && !this.error && this.events.length === 0;
+    },
+
+    async init() {
+      this.initThemeMode();
+      this.applyThemeMode();
+      await this.loadEvents();
+    },
+
+    initThemeMode() {
+      try {
+        const persisted = globalThis.localStorage?.getItem(THEME_STORAGE_KEY);
+        if (persisted === "dark" || persisted === "light") {
+          this.displayPreference.mode = persisted;
+          this.displayPreference.updatedAt = new Date().toISOString();
+          return;
+        }
+      } catch (err) {
+        this.queueToast(`Could not read theme preference: ${err.message}`, "warning");
+      }
+      const prefersDark =
+        typeof globalThis.window !== "undefined" &&
+        typeof globalThis.window.matchMedia === "function" &&
+        globalThis.window.matchMedia("(prefers-color-scheme: dark)").matches;
+      this.displayPreference.mode = prefersDark ? "dark" : "light";
+    },
+
+    applyThemeMode() {
+      const root = globalThis.document.documentElement;
+      if (this.displayPreference.mode === "dark") {
+        root.classList.add("dark");
+      } else {
+        root.classList.remove("dark");
+      }
+    },
+
+    persistThemeMode() {
+      try {
+        globalThis.localStorage?.setItem(THEME_STORAGE_KEY, this.displayPreference.mode);
+      } catch (err) {
+        this.queueToast(`Could not save theme preference: ${err.message}`, "warning");
+      }
+    },
+
+    toggleThemeMode() {
+      this.displayPreference.mode = this.isDarkMode ? "light" : "dark";
+      this.displayPreference.updatedAt = new Date().toISOString();
+      this.applyThemeMode();
+      this.persistThemeMode();
+      this.queueToast(`Switched to ${this.displayPreference.mode} mode`, "success");
+    },
+
+    queueToast(message, type = "info") {
+      this.clearToast();
+      this.feedback.message = message;
+      this.feedback.type = type;
+      this.feedback.visible = true;
+      this.feedback.timeoutId = setTimeout(() => {
+        this.feedback.visible = false;
+        this.feedback.timeoutId = null;
+      }, TOAST_TIMEOUT_MS);
+    },
+
+    clearToast() {
+      if (this.feedback.timeoutId) {
+        clearTimeout(this.feedback.timeoutId);
+        this.feedback.timeoutId = null;
+      }
+    },
+
+    async loadEvents({ background = false } = {}) {
+      if (background) {
+        if (this.refreshState.inFlight) return;
+        this.refreshState.inFlight = true;
+      } else {
+        this.loading = true;
+      }
+      this.error = null;
+      try {
+        const params = new URLSearchParams();
+        if (this.filters.q) params.set("q", this.filters.q);
+        if (this.filters.type) params.set("type", this.filters.type);
+        if (this.filters.method) params.set("method", this.filters.method);
+        if (this.filters.status) params.set("status", this.filters.status);
+        if (this.filters.from) params.set("from", new Date(this.filters.from).toISOString());
+        if (this.filters.to) params.set("to", new Date(this.filters.to).toISOString());
+        params.set("page", this.filters.page);
+        params.set("pageSize", this.filters.pageSize);
+
+        const res = await fetch(`${MONITORING_BASE_PATH}/api/events?` + params.toString(), {
+          credentials: "include",
+        });
+        if (!res.ok) throw new Error("HTTP " + res.status + ": " + (await res.text()));
+        const data = await res.json();
+        this.events = data.items || [];
+        this.total = data.total ?? null;
+        this.lastRefreshed = new Date().toLocaleTimeString();
+        if (
+          this.selectedEvent &&
+          !this.events.find((event) => event.id === this.selectedEvent.id)
+        ) {
+          this.selectedEvent = null;
+          this.detail = null;
+        }
+      } catch (err) {
+        this.error = err.message;
+        if (!background) this.events = [];
+      } finally {
+        if (background) {
+          this.refreshState.inFlight = false;
+        } else {
+          this.loading = false;
+        }
+      }
+    },
+
+    async selectEvent(ev) {
+      this.selectedEvent = ev;
+      this.detail = null;
+      this.detailLoading = true;
+      try {
+        const res = await fetch(`${MONITORING_BASE_PATH}/api/events/` + ev.id, {
+          credentials: "include",
+        });
+        if (!res.ok) throw new Error("HTTP " + res.status);
+        this.detail = await res.json();
+      } catch (err) {
+        this.detail = { event: ev, _error: err.message };
+      } finally {
+        this.detailLoading = false;
+      }
+    },
+
+    clearFilters() {
+      this.filters = {
+        q: "",
+        type: "",
+        method: "",
+        status: "",
+        from: "",
+        to: "",
+        page: 1,
+        pageSize: this.filters.pageSize,
+      };
+      this.loadEvents();
+    },
+
+    setAutoRefresh(enabled) {
+      this.refreshState.enabled = enabled;
+      if (enabled) {
+        this.startAutoRefresh();
+        this.queueToast("Auto-refresh enabled", "success");
+        this.loadEvents({ background: true });
+      } else {
+        this.stopAutoRefresh();
+        this.queueToast("Auto-refresh disabled", "info");
+      }
+    },
+
+    toggleAutoRefresh() {
+      this.setAutoRefresh(!this.refreshState.enabled);
+    },
+
+    startAutoRefresh() {
+      if (this.refreshState.timerId) clearInterval(this.refreshState.timerId);
+      this.refreshState.timerId = setInterval(() => {
+        this.loadEvents({ background: true });
+      }, this.refreshState.intervalSeconds * 1000);
+    },
+
+    stopAutoRefresh() {
+      if (this.refreshState.timerId) {
+        clearInterval(this.refreshState.timerId);
+        this.refreshState.timerId = null;
+      }
+    },
+
+    openDeleteConfirmation() {
+      this.deleteState.confirmOpen = true;
+    },
+
+    closeDeleteConfirmation() {
+      if (this.deleteState.inProgress) return;
+      this.deleteState.confirmOpen = false;
+    },
+
+    async deleteRecordedData() {
+      this.deleteState.inProgress = true;
+      try {
+        const res = await fetch(`${MONITORING_BASE_PATH}/api/events`, {
+          method: "DELETE",
+          credentials: "include",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ scope: "all" }),
+        });
+        if (!res.ok) throw new Error("HTTP " + res.status + ": " + (await res.text()));
+        const payload = await res.json();
+        this.events = [];
+        this.total = payload.remaining ?? 0;
+        this.selectedEvent = null;
+        this.detail = null;
+        this.deleteState.confirmOpen = false;
+        this.lastRefreshed = new Date().toLocaleTimeString();
+        this.queueToast(payload.message || "Monitoring data deleted", "success");
+        await this.loadEvents({ background: true });
+      } catch (err) {
+        this.queueToast("Delete failed: " + err.message, "error");
+      } finally {
+        this.deleteState.inProgress = false;
+      }
+    },
+
+    async copyJsonValue(value, label = "JSON block") {
+      const text = this.prettyJson(value);
+      if (!text || !text.trim()) {
+        this.queueToast(`${label} is empty, nothing to copy`, "warning");
+        return;
+      }
+      try {
+        if (!globalThis.navigator?.clipboard || !globalThis.navigator.clipboard.writeText) {
+          throw new Error("Clipboard API unavailable");
+        }
+        await globalThis.navigator.clipboard.writeText(text);
+        this.queueToast(`${label} copied`, "success");
+      } catch {
+        if (this.fallbackCopy(text)) {
+          this.queueToast(`${label} copied with fallback`, "success");
+          return;
+        }
+        this.queueToast(
+          `${label} could not be copied automatically. Please copy manually from the block.`,
+          "error"
+        );
+      }
+    },
+
+    fallbackCopy(text) {
+      try {
+        const textarea = globalThis.document.createElement("textarea");
+        textarea.value = text;
+        textarea.setAttribute("readonly", "");
+        textarea.style.position = "absolute";
+        textarea.style.left = "-9999px";
+        globalThis.document.body.appendChild(textarea);
+        textarea.select();
+        const copied = globalThis.document.execCommand("copy");
+        globalThis.document.body.removeChild(textarea);
+        return copied;
+      } catch {
+        return false;
+      }
+    },
+
+    formatTime(ts) {
+      if (!ts) return "-";
+      try {
+        return new Date(ts).toLocaleString(undefined, {
+          month: "2-digit",
+          day: "2-digit",
+          hour: "2-digit",
+          minute: "2-digit",
+          second: "2-digit",
+        });
+      } catch {
+        return ts;
+      }
+    },
+
+    prettyJson(val) {
+      if (val === null || val === undefined) return "";
+      if (typeof val === "string") {
+        try {
+          return JSON.stringify(JSON.parse(val), null, 2);
+        } catch {
+          return val;
+        }
+      }
+      try {
+        return JSON.stringify(val, null, 2);
+      } catch {
+        return String(val);
+      }
+    },
+
+    typeColor(type) {
+      const map = {
+        REQUEST: "bg-blue-900 text-blue-300",
+        EXCEPTION: "bg-red-900 text-red-300",
+        EXTERNAL_HTTP: "bg-yellow-900 text-yellow-300",
+        LOG: "bg-gray-700 text-gray-300",
+        SCHEDULED_TASK: "bg-purple-900 text-purple-300",
+        DB_QUERY: "bg-green-900 text-green-300",
+        JOB: "bg-indigo-900 text-indigo-300",
+        NOTIFICATION: "bg-pink-900 text-pink-300",
+        MAIL: "bg-cyan-900 text-cyan-300",
+        CACHE_OP: "bg-orange-900 text-orange-300",
+      };
+      return map[type] || "bg-gray-800 text-gray-400";
+    },
+
+    statusColor(code) {
+      if (!code) return "text-gray-400";
+      if (code < 300) return "text-green-400";
+      if (code < 400) return "text-yellow-400";
+      if (code < 500) return "text-orange-400";
+      return "text-red-400";
+    },
+
+    severityColor(sev) {
+      const map = { ERROR: "text-red-400", WARN: "text-yellow-400", INFO: "text-green-400" };
+      return map[sev] || "text-gray-400";
+    },
+
+    toastClass() {
+      const map = {
+        success: "bg-green-600 text-white",
+        error: "bg-red-600 text-white",
+        warning: "bg-yellow-600 text-white",
+        info: "bg-gray-700 text-white",
+      };
+      return map[this.feedback.type] || map.info;
+    },
+  };
+};