rtu_linux_services/web-ui.service/web/static/js/log-stream.js

let logSource = null;
let currentUnit = null;

const MAX_LOG_LINES = 2000;
let logLines = [];

function colorLog(line) {
    let s = line
        .replace(/&/g, "&")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;");

    const levels = [
        ["TRACE", "log-trace"],
        ["DEBUG", "log-debug"],
        ["INFO", "log-info"],
        ["WARN", "log-warn"],
        ["WARNING", "log-warn"],
        ["ERROR", "log-error"],
        ["FATAL", "log-fatal"],
        ["PANIC", "log-panic"]
    ];

    for (const [level, cls] of levels) {
        if (s.includes(level) || s.includes(level.toLowerCase())) {
            return `<span class="${cls}">${s}</span>`;
        }
    }

    return `<span class="log-default">${s}</span>`;
}

function connectLog(unit, target) {
    const el = typeof target === "string"
        ? document.getElementById(target)
        : target;

    if (!el) {
        console.error("[log-stream] target element not found");
        return;
    }

    if (currentUnit === unit && logSource &&
        logSource.readyState !== EventSource.CLOSED) {
        return;
    }

    disconnectLog();

    currentUnit = unit;
    logLines = [];
    el.textContent = "";

    const source = new EventSource(
        `/api/service/log?unit=${encodeURIComponent(unit)}`
    );

    logSource = source;

    source.onmessage = (e) => {
        if (source !== logSource) {
            return;
        }

        logLines.push(e.data);

        if (logLines.length > MAX_LOG_LINES) {
            logLines.splice(
                0,
                logLines.length - MAX_LOG_LINES
            );
        }

        el.innerHTML = logLines
            .map(colorLog)
            .join("<br>") + "<br><br><br>";

        el.scrollTop = el.scrollHeight;
    };

    source.onerror = () => {
        if (source !== logSource) {
            return;
        }

        console.log(
            `[log-stream] error unit=${unit}, state=${source.readyState}`
        );
    };
}

function disconnectLog() {
    if (logSource) {
        logSource.close();
        logSource = null;
    }

    currentUnit = null;
    logLines = [];
}

function getCurrentUnit() {
    return currentUnit;
}

function clearLog(target) {
    logLines = [];

    const el = typeof target === "string"
        ? document.getElementById(target)
        : target;

    if (el) {
        el.textContent = "";
    }
}

function copyLog(target) {
    const el = typeof target === "string"
        ? document.getElementById(target)
        : target;

    if (!el) return;

    const text = el.value !== undefined ? el.value : el.innerText;

    if (navigator.clipboard) {
        navigator.clipboard.writeText(text)
            .then(() => alert("复制成功"));
    } else {
        const ta = document.createElement("textarea");
        ta.value = text;
        document.body.appendChild(ta);
        ta.select();
        document.execCommand("copy");
        ta.remove();
        alert("复制成功");
    }
}