core: 日志网页使用异步刷新

2023-10-25 14:19:25 +08:00 · 2023-10-25 14:19:25 +08:00 · 7f71f9d962
commit 7f71f9d962
parent c0e4423434
3 changed files with 127 additions and 32 deletions
--- a/logviewer-nginx.conf
+++ b/logviewer-nginx.conf
@ -0,0 +1,17 @@
+server {
+    listen 80;
+    listen [::]:80;
+    root /;
+
+    location = / {
+        try_files /logviewer.html 404;
+    }
+
+    location = /reinstall.log {
+        try_files $uri 404;
+    }
+
+    location / {
+        return 404;
+    }
+}
--- a/logviewer.html
+++ b/logviewer.html
@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Reinstall Logs</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+
+        #log-container {
+            height: calc(100vh - 20px);
+            padding: 10px;
+            overflow-y: scroll;
+            white-space: pre;
+        }
+
+        #scroll-to-bottom {
+            position: fixed;
+            bottom: 24px;
+            right: 24px;
+            background-color: #007bff;
+            color: #fff;
+            border: none;
+            cursor: pointer;
+            display: none;
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+        }
+
+        #scroll-to-bottom svg {
+            fill: #fff;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="log-container"></div>
+    <button id="scroll-to-bottom">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="M5 10l7 7 7-7H5z" />
+        </svg>
+    </button>
+
+    <script>
+        const logContainer = document.getElementById('log-container');
+        const scrollToBottomButton = document.getElementById('scroll-to-bottom');
+        let shouldScrollToBottom = true;
+        let logFetchInterval;
+
+        async function getLogContent() {
+            try {
+                const response = await fetch('reinstall.log', {
+                    cache: 'no-store'
+                });
+
+                if (response.ok) {
+                    const logContent = await response.text();
+                    logContainer.textContent = logContent;
+
+                    if (shouldScrollToBottom) {
+                        logContainer.scrollTop = logContainer.scrollHeight;
+                    }
+
+                    if (logContent.includes("Error:")) {
+                        clearInterval(logFetchInterval);
+                        alert("Error occurred.");
+                    }
+
+                } else {
+                    console.error('Failed to fetch log file.');
+                }
+
+            } catch (error) {
+                console.error('An error occurred: ' + error.message);
+            }
+
+            finally {
+                logFetchInterval = setTimeout(getLogContent, 2000);
+            }
+        }
+
+        scrollToBottomButton.addEventListener('click', () => {
+            logContainer.scrollTop = logContainer.scrollHeight;
+        });
+
+        logContainer.addEventListener('scroll', () => {
+            const isAtBottom = Math.ceil(logContainer.scrollTop + logContainer.clientHeight) >= logContainer.scrollHeight;
+            if (isAtBottom) {
+                scrollToBottomButton.style.display = 'none';
+            } else {
+                scrollToBottomButton.style.display = 'block';
+            }
+
+            shouldScrollToBottom = isAtBottom;
+        });
+
+        getLogContent();
+    </script>
+</body>
+
+</html>
--- a/trans.sh
+++ b/trans.sh
@ -120,20 +120,10 @@ is_use_cloud_image() {

 setup_nginx() {
    apk add nginx
-    cat <<EOF >/etc/nginx/http.d/default.conf
-        server {
-            listen 80 default_server;
-            listen [::]:80 default_server;
+    # shellcheck disable=SC2154
+    wget $confhome/logviewer.html -O /logviewer.html
+    wget $confhome/logviewer-nginx.conf -O /etc/nginx/http.d/default.conf

-            location = / {
-                root /;
-                try_files /reinstall.html /reinstall.html;
-                # types {
-                #     text/plain log;
-                # }
-            }
-        }
-EOF
    # rc-service nginx start
    if pgrep nginx >/dev/null; then
        nginx -s reload
@ -182,27 +172,10 @@ get_xda() {
 }

 setup_tty_and_log() {
-    cat <<EOF >/reinstall.html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta http-equiv="refresh" content="2">
-</head>
-
-<body>
-    <script>
-        window.onload = function() {
-            // history.scrollRestoration = "manual";
-            window.scrollTo(0, document.body.scrollHeight);
-        }
-    </script>
-    <pre>
-EOF
    # 显示输出到前台
    # script -f /dev/tty0
    dev_ttys=$(get_ttys /dev/)
-    exec > >(tee -a $dev_ttys /reinstall.html) 2>&1
+    exec > >(tee -a $dev_ttys /reinstall.log) 2>&1
 }

 extract_env_from_cmdline() {
@ -235,7 +208,7 @@ mod_motd() {
    cat <<EOF >/etc/motd
 Reinstalling...
 To view logs run:
-tail -fn+1 /reinstall.html
+tail -fn+1 /reinstall.log
 EOF
 }