Require password to access logs page

app.py

@@ -2,15 +2,18 @@ import os
 import json
 import subprocess
 from datetime import datetime
-from flask import Flask, jsonify, render_template
+from flask import Flask, jsonify, render_template, request, session, redirect, url_for
+from functools import wraps
 import re
 
 app = Flask(__name__)
+app.secret_key = os.getenv("SECRET_KEY", "change-this-in-production-please")
 
 POLL_SECONDS = int(os.getenv("POLL_SECONDS", "10"))
 APP_DOMAIN = os.getenv("APP_DOMAIN", "peterstockings.com")
 DOCKER = os.getenv("DOCKER_BIN", "/usr/bin/docker")
 SHOW_INFRA = os.getenv("SHOW_INFRA", "1") == "1"
+LOGS_PASSWORD = os.getenv("LOGS_PASSWORD", "dokkustatus123")  # Change via environment variable
 
 _UNIT = {
     "b": 1,
@@ -200,7 +203,6 @@ def collect():
             "mem_limit": s.get("mem_limit", ""),
             "mem_pct": s.get("mem_pct", ""),
             "restarts": docker_inspect_restart_count(name),
-            "logs": get_container_logs(name, lines=50),
         }
 
         if is_app_web_container(name):
@@ -286,6 +288,32 @@ def collect():
         "warnings": warnings,
     }
 
+def collect_logs_only():
+    """
+    Lightweight version that only collects app names and logs.
+    Much faster than collect() since it skips stats, metrics, and system info.
+    """
+    ps_rows = docker_ps_all()
+    apps = []
+    
+    for r in ps_rows:
+        name = r["name"]
+        
+        if is_app_web_container(name):
+            app_name = infer_app_name(name)
+            apps.append({
+                "app": app_name,
+                "container": name,
+                "logs": get_container_logs(name, lines=50),
+            })
+    
+    # Sort by app name
+    apps.sort(key=lambda x: x["app"])
+    
+    return {
+        "apps": apps,
+    }
+
 def parse_human_bytes(s: str) -> int:
     # Handles "58.84MiB", "145.1MB", "423B"
     s = s.strip()
@@ -317,3 +345,36 @@ def partial_apps():
 @app.get("/api/status")
 def api_status():
     return jsonify(collect())
+
+# Authentication decorator
+def login_required(f):
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if not session.get('logged_in'):
+            return redirect(url_for('login'))
+        return f(*args, **kwargs)
+    return decorated_function
+
+# Login routes
+@app.route("/login", methods=["GET", "POST"])
+def login():
+    if request.method == "POST":
+        password = request.form.get("password", "")
+        if password == LOGS_PASSWORD:
+            session['logged_in'] = True
+            return redirect(url_for('logs'))
+        else:
+            return render_template("login.html", error="Invalid password")
+    return render_template("login.html", error=None)
+
+@app.get("/logout")
+def logout():
+    session.pop('logged_in', None)
+    return redirect(url_for('index'))
+
+# Protected logs page
+@app.get("/logs")
+@login_required
+def logs():
+    data = collect_logs_only()
+    return render_template("logs.html", data=data, poll_seconds=POLL_SECONDS)

templates/apps_table.html

@@ -367,101 +367,3 @@
             </table>
         </div>
         {% endif %}
-
-        <!-- APPLICATION LOGS SECTION -->
-        <h2 style="margin-top: 32px;">[ APPLICATION LOGS ]</h2>
-        {% for r in data.apps %}
-        <div style="
-    border: 2px solid #30363d;
-    margin-bottom: 16px;
-    background: rgba(0, 217, 255, 0.02);
-">
-            <!-- Header -->
-            <div style="
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 12px 16px;
-        cursor: pointer;
-    " onclick="toggleLogs('logs-{{ loop.index }}')">
-                <div style="font-weight: 700; color: #00d9ff;">[{{ r.app }}]</div>
-                <button style="
-            background: rgba(0, 217, 255, 0.1);
-            border: 1px solid #00d9ff;
-            color: #00d9ff;
-            padding: 4px 12px;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 10px;
-            font-weight: 700;
-            cursor: pointer;
-            pointer-events: none;
-        ">[EXPAND]</button>
-            </div>
-
-            <!-- Collapsible logs -->
-            <div id="logs-{{ loop.index }}" style="display: none; border-top: 2px solid #30363d;">
-                <div style="padding: 16px; background: #0a0e17;">
-                    <div style="display: flex; justify-content: space-between; margin-bottom: 12px;">
-                        <div style="color: #00d9ff; font-size: 10px; font-weight: 700; letter-spacing: 2px;">
-                            [LAST 50 LINES]
-                        </div>
-                        <button onclick="event.stopPropagation(); copyLogs('logs-content-{{ loop.index }}')" style="
-                    background: rgba(0, 255, 136, 0.1);
-                    border: 1px solid #00ff88;
-                    color: #00ff88;
-                    padding: 4px 10px;
-                    font-family: 'JetBrains Mono', monospace;
-                    font-size: 10px;
-                    font-weight: 700;
-                    cursor: pointer;
-                " onmouseover="this.style.background='rgba(0, 255, 136, 0.2)';"
-                            onmouseout="this.style.background='rgba(0, 255, 136, 0.1)';">
-                            COPY
-                        </button>
-                    </div>
-
-                    <div id="logs-content-{{ loop.index }}" style="
-                background: #000;
-                border: 1px solid #30363d;
-                padding: 12px;
-                max-height: 400px;
-                overflow-y: auto;
-                font-family: 'JetBrains Mono', monospace;
-                font-size: 11px;
-                line-height: 1.6;
-            ">
-                        {% if r.logs %}
-                        {% for log in r.logs %}
-                        <div
-                            style="color: {% if log.level == 'error' %}#ff5555{% elif log.level == 'warn' %}#ffb86c{% else %}#8b949e{% endif %};">
-                            {{ log.text }}</div>
-                        {% endfor %}
-                        {% else %}
-                        <div style="color: #8b949e;">[no logs available]</div>
-                        {% endif %}
-                    </div>
-                </div>
-            </div>
-        </div>
-        {% endfor %}
-
-        <script>
-            function toggleLogs(id) {
-                const el = document.getElementById(id);
-                el.style.display = el.style.display === 'none' ? 'block' : 'none';
-            }
-
-            function copyLogs(id) {
-                const el = document.getElementById(id);
-                navigator.clipboard.writeText(el.innerText).then(() => {
-                    const btn = event.target;
-                    const orig = btn.textContent;
-                    btn.textContent = 'COPIED!';
-                    btn.style.background = 'rgba(0, 255, 136, 0.3)';
-                    setTimeout(() => {
-                        btn.textContent = orig;
-                        btn.style.background = 'rgba(0, 255, 136, 0.1)';
-                    }, 1500);
-                });
-            }
-        </script>

templates/index.html

@@ -361,6 +361,13 @@
                     </svg>
                     SOURCE
                 </a>
+                <span class="separator">|</span>
+                <a href="/logs">
+                    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+                        <path d="M0 2h16v2H0V2zm0 6h16v2H0V8zm0 6h16v2H0v-2z" />
+                    </svg>
+                    LOGS
+                </a>
             </div>
         </div>
 

templates/login.html

@@ -0,0 +1,169 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Login - DokkuStatus</title>
+    <link rel="icon"
+        href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>⚡</text></svg>" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
+        rel="stylesheet">
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'JetBrains Mono', monospace;
+            margin: 0;
+            padding: 0;
+            background: #0a0e17;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #c9d1d9;
+        }
+
+        .login-container {
+            width: 100%;
+            max-width: 400px;
+            padding: 20px;
+        }
+
+        .login-box {
+            background: #161b22;
+            border: 2px solid #00d9ff;
+            box-shadow: 0 0 30px rgba(0, 217, 255, 0.3);
+            padding: 32px;
+        }
+
+        .login-box::before {
+            content: '[LOGIN REQUIRED]';
+            display: block;
+            background: #161b22;
+            color: #00d9ff;
+            font-size: 11px;
+            font-weight: 700;
+            letter-spacing: 2px;
+            text-align: center;
+            margin: -32px -32px 24px -32px;
+            padding: 12px;
+            border-bottom: 2px solid #00d9ff;
+        }
+
+        h1 {
+            margin: 0 0 24px 0;
+            font-size: 24px;
+            font-weight: 700;
+            color: #00d9ff;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 8px;
+            color: #8b949e;
+            font-size: 12px;
+            font-weight: 700;
+            letter-spacing: 1px;
+            text-transform: uppercase;
+        }
+
+        input[type="password"] {
+            width: 100%;
+            padding: 12px;
+            background: #0a0e17;
+            border: 2px solid #30363d;
+            color: #c9d1d9;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        input[type="password"]:focus {
+            outline: none;
+            border-color: #00d9ff;
+            box-shadow: 0 0 10px rgba(0, 217, 255, 0.3);
+        }
+
+        button {
+            width: 100%;
+            padding: 12px;
+            background: rgba(0, 217, 255, 0.1);
+            border: 2px solid #00d9ff;
+            color: #00d9ff;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 12px;
+            font-weight: 700;
+            letter-spacing: 2px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            text-transform: uppercase;
+        }
+
+        button:hover {
+            background: rgba(0, 217, 255, 0.2);
+            box-shadow: 0 0 20px rgba(0, 217, 255, 0.4);
+        }
+
+        .error {
+            margin-top: 16px;
+            padding: 12px;
+            background: rgba(255, 85, 85, 0.1);
+            border: 2px solid #ff5555;
+            color: #ff5555;
+            font-size: 12px;
+            font-weight: 700;
+            letter-spacing: 1px;
+        }
+
+        .back-link {
+            display: block;
+            margin-top: 20px;
+            text-align: center;
+            color: #8b949e;
+            text-decoration: none;
+            font-size: 12px;
+            transition: color 0.2s ease;
+        }
+
+        .back-link:hover {
+            color: #00d9ff;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="login-container">
+        <div class="login-box">
+            <h1>DokkuStatus</h1>
+
+            <form method="POST" action="/login">
+                <div class="form-group">
+                    <label for="password">[PASSWORD]</label>
+                    <input type="password" id="password" name="password" placeholder="Enter password..." autofocus
+                        required />
+                </div>
+
+                <button type="submit">[ACCESS LOGS]</button>
+            </form>
+
+            {% if error %}
+            <div class="error">[!] {{ error }}</div>
+            {% endif %}
+
+            <a href="/" class="back-link">← Back to Dashboard</a>
+        </div>
+    </div>
+</body>
+
+</html>

templates/logs.html

@@ -0,0 +1,261 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Logs - DokkuStatus</title>
+    <link rel="icon"
+        href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>⚡</text></svg>" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
+        rel="stylesheet">
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'JetBrains Mono', monospace;
+            margin: 0;
+            padding: 0;
+            background: #0a0e17;
+            min-height: 100vh;
+            color: #c9d1d9;
+        }
+
+        .container {
+            max-width: 1600px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .header-terminal {
+            background: #161b22;
+            border: 2px solid #00d9ff;
+            box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
+            padding: 20px 24px;
+            margin-bottom: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        h1 {
+            margin: 0;
+            font-size: 24px;
+            font-weight: 700;
+            color: #00d9ff;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .logout-btn {
+            background: rgba(255, 85, 85, 0.1);
+            border: 1px solid #ff5555;
+            color: #ff5555;
+            padding: 6px 16px;
+            text-decoration: none;
+            font-size: 10px;
+            font-weight: 700;
+            letter-spacing: 1px;
+            transition: all 0.2s ease;
+            display: inline-block;
+        }
+
+        .logout-btn:hover {
+            background: rgba(255, 85, 85, 0.2);
+        }
+
+        .refresh-btn {
+            background: rgba(0, 255, 136, 0.1);
+            border: 1px solid #00ff88;
+            color: #00ff88;
+            padding: 6px 16px;
+            text-decoration: none;
+            font-size: 10px;
+            font-weight: 700;
+            letter-spacing: 1px;
+            transition: all 0.2s ease;
+            display: inline-block;
+            cursor: pointer;
+            margin-right: 12px;
+        }
+
+        .refresh-btn:hover {
+            background: rgba(0, 255, 136, 0.2);
+            box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
+        }
+
+        h2 {
+            font-size: 16px;
+            font-weight: 700;
+            letter-spacing: 2px;
+            color: #00d9ff;
+            margin: 0 0 16px 0;
+            text-transform: uppercase;
+            padding-left: 12px;
+            border-left: 3px solid #00ff88;
+        }
+
+        .log-card {
+            border: 2px solid #30363d;
+            margin-bottom: 16px;
+            background: rgba(0, 217, 255, 0.02);
+        }
+
+        .log-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px 16px;
+            cursor: pointer;
+            background: rgba(0, 0, 0, 0.2);
+        }
+
+        .log-header:hover {
+            background: rgba(0, 217, 255, 0.05);
+        }
+
+        .app-name {
+            font-weight: 700;
+            color: #00d9ff;
+        }
+
+        .expand-btn {
+            background: rgba(0, 217, 255, 0.1);
+            border: 1px solid #00d9ff;
+            color: #00d9ff;
+            padding: 4px 12px;
+            font-size: 10px;
+            font-weight: 700;
+            cursor: pointer;
+            pointer-events: none;
+        }
+
+        .log-content {
+            display: none;
+            border-top: 2px solid #30363d;
+            padding: 16px;
+            background: #0a0e17;
+        }
+
+        .log-controls {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 12px;
+        }
+
+        .log-title {
+            color: #00d9ff;
+            font-size: 10px;
+            font-weight: 700;
+            letter-spacing: 2px;
+        }
+
+        .copy-btn {
+            background: rgba(0, 255, 136, 0.1);
+            border: 1px solid #00ff88;
+            color: #00ff88;
+            padding: 4px 10px;
+            font-size: 10px;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .copy-btn:hover {
+            background: rgba(0, 255, 136, 0.2);
+        }
+
+        .log-viewer {
+            background: #000;
+            border: 1px solid #30363d;
+            padding: 12px;
+            max-height: 500px;
+            overflow-y: auto;
+            font-size: 11px;
+            line-height: 1.6;
+        }
+
+        .log-line {
+            margin: 2px 0;
+        }
+
+        .log-error {
+            color: #ff5555;
+        }
+
+        .log-warn {
+            color: #ffb86c;
+        }
+
+        .log-info {
+            color: #8b949e;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="header-terminal">
+            <h1>[ APPLICATION LOGS ]</h1>
+            <div>
+                <button onclick="location.reload()" class="refresh-btn">[REFRESH]</button>
+                <a href="/logout" class="logout-btn">[LOGOUT]</a>
+            </div>
+        </div>
+
+        {% for r in data.apps %}
+        <div class="log-card">
+            <div class="log-header" onclick="toggleLogs('logs-{{ loop.index }}')">
+                <div class="app-name">[{{ r.app }}]</div>
+                <button class="expand-btn">[EXPAND]</button>
+            </div>
+
+            <div id="logs-{{ loop.index }}" class="log-content">
+                <div class="log-controls">
+                    <div class="log-title">[LAST 50 LINES]</div>
+                    <button class="copy-btn" onclick="event.stopPropagation(); copyLogs('logs-text-{{ loop.index }}')">
+                        COPY
+                    </button>
+                </div>
+
+                <div id="logs-text-{{ loop.index }}" class="log-viewer">
+                    {% if r.logs %}
+                    {% for log in r.logs %}
+                    <div class="log-line log-{{ log.level }}">{{ log.text }}</div>
+                    {% endfor %}
+                    {% else %}
+                    <div class="log-info">[no logs available]</div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+
+    <script>
+        function toggleLogs(id) {
+            const el = document.getElementById(id);
+            el.style.display = el.style.display === 'none' ? 'block' : 'none';
+        }
+
+        function copyLogs(id) {
+            const el = document.getElementById(id);
+            navigator.clipboard.writeText(el.innerText).then(() => {
+                const btn = event.target;
+                const orig = btn.textContent;
+                btn.textContent = 'COPIED!';
+                btn.style.background = 'rgba(0, 255, 136, 0.3)';
+                setTimeout(() => {
+                    btn.textContent = orig;
+                    btn.style.background = 'rgba(0, 255, 136, 0.1)';
+                }, 1500);
+            });
+        }
+    </script>
+</body>
+
+</html>