Require password to access logs page
This commit is contained in:
Peter Stockings
65
app.py
65
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)
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
|
||||
169
templates/login.html
Normal file
169
templates/login.html
Normal file
@@ -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>
|
||||
261
templates/logs.html
Normal file
261
templates/logs.html
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user