diff --git a/AppImage/components/system-overview.tsx b/AppImage/components/system-overview.tsx index 9d8318bc..b1ea978a 100644 --- a/AppImage/components/system-overview.tsx +++ b/AppImage/components/system-overview.tsx @@ -7,10 +7,17 @@ import { Badge } from "./ui/badge" import { Cpu, MemoryStick, Thermometer, Server, Zap, AlertCircle, HardDrive, Network } from "lucide-react" import { NodeMetricsCharts } from "./node-metrics-charts" import { NetworkTrafficChart } from "./network-traffic-chart" +import { TemperatureDetailModal } from "./temperature-detail-modal" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select" import { fetchApi } from "../lib/api-config" import { formatNetworkTraffic, getNetworkUnit } from "../lib/format-network" import { formatStorage } from "../lib/utils" +import { Area, AreaChart, ResponsiveContainer } from "recharts" + +interface TempDataPoint { + timestamp: number + value: number +} interface SystemData { cpu_usage: number @@ -18,6 +25,7 @@ interface SystemData { memory_total: number memory_used: number temperature: number + temperature_sparkline?: TempDataPoint[] uptime: string load_average: number[] hostname: string @@ -178,6 +186,7 @@ export function SystemOverview() { const [networkTimeframe, setNetworkTimeframe] = useState("day") const [networkTotals, setNetworkTotals] = useState<{ received: number; sent: number }>({ received: 0, sent: 0 }) const [networkUnit, setNetworkUnit] = useState<"Bytes" | "Bits">("Bytes") // Added networkUnit state + const [tempModalOpen, setTempModalOpen] = useState(false) useEffect(() => { const fetchAllData = async () => { @@ -458,27 +467,59 @@ export function SystemOverview() { - + 0 ? "cursor-pointer hover:border-primary/50 transition-colors" : ""}`} + onClick={() => systemData.temperature > 0 && setTempModalOpen(true)} + > Temperature -
- {systemData.temperature === 0 ? "N/A" : `${systemData.temperature}°C`} -
-
+
+ + {systemData.temperature === 0 ? "N/A" : `${Math.round(systemData.temperature * 10) / 10}°C`} + {tempStatus.status}
-

- {systemData.temperature === 0 ? "No sensor available" : "Live temperature reading"} -

+ {systemData.temperature > 0 && systemData.temperature_sparkline && systemData.temperature_sparkline.length > 1 ? ( +
+ + + + + = 75 ? "#ef4444" : systemData.temperature >= 60 ? "#f59e0b" : "#22c55e"} stopOpacity={0.3} /> + = 75 ? "#ef4444" : systemData.temperature >= 60 ? "#f59e0b" : "#22c55e"} stopOpacity={0} /> + + + = 75 ? "#ef4444" : systemData.temperature >= 60 ? "#f59e0b" : "#22c55e"} + strokeWidth={1.5} + fill="url(#tempSparkGradient)" + dot={false} + isAnimationActive={false} + /> + + +
+ ) : ( +

+ {systemData.temperature === 0 ? "No sensor available" : "Collecting data..."} +

+ )}
+ +
diff --git a/AppImage/components/temperature-detail-modal.tsx b/AppImage/components/temperature-detail-modal.tsx new file mode 100644 index 00000000..3ddd744b --- /dev/null +++ b/AppImage/components/temperature-detail-modal.tsx @@ -0,0 +1,241 @@ +"use client" + +import { useState, useEffect } from "react" +import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog" +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select" +import { Badge } from "./ui/badge" +import { Thermometer, TrendingDown, TrendingUp, Minus } from "lucide-react" +import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts" +import { useIsMobile } from "../hooks/use-mobile" +import { fetchApi } from "@/lib/api-config" + +const TIMEFRAME_OPTIONS = [ + { value: "hour", label: "1 Hour" }, + { value: "day", label: "24 Hours" }, + { value: "week", label: "7 Days" }, + { value: "month", label: "30 Days" }, +] + +interface TempHistoryPoint { + timestamp: number + value: number + min?: number + max?: number +} + +interface TempStats { + min: number + max: number + avg: number + current: number +} + +interface TemperatureDetailModalProps { + open: boolean + onOpenChange: (open: boolean) => void +} + +const CustomTooltip = ({ active, payload, label }: any) => { + if (active && payload && payload.length) { + return ( +
+

{label}

+
+ {payload.map((entry: any, index: number) => ( +
+
+ {entry.name}: + {entry.value}°C +
+ ))} +
+
+ ) + } + return null +} + +const getStatusColor = (temp: number) => { + if (temp >= 75) return "#ef4444" + if (temp >= 60) return "#f59e0b" + return "#22c55e" +} + +const getStatusInfo = (temp: number) => { + if (temp === 0) return { status: "N/A", color: "bg-gray-500/10 text-gray-500 border-gray-500/20" } + if (temp < 60) return { status: "Normal", color: "bg-green-500/10 text-green-500 border-green-500/20" } + if (temp < 75) return { status: "Warm", color: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20" } + return { status: "Hot", color: "bg-red-500/10 text-red-500 border-red-500/20" } +} + +export function TemperatureDetailModal({ open, onOpenChange }: TemperatureDetailModalProps) { + const [timeframe, setTimeframe] = useState("hour") + const [data, setData] = useState([]) + const [stats, setStats] = useState({ min: 0, max: 0, avg: 0, current: 0 }) + const [loading, setLoading] = useState(true) + const isMobile = useIsMobile() + + useEffect(() => { + if (open) { + fetchHistory() + } + }, [open, timeframe]) + + const fetchHistory = async () => { + setLoading(true) + try { + const result = await fetchApi<{ data: TempHistoryPoint[]; stats: TempStats }>( + `/api/temperature/history?timeframe=${timeframe}` + ) + if (result && result.data) { + setData(result.data) + setStats(result.stats) + } + } catch (err) { + console.error("[v0] Failed to fetch temperature history:", err) + } finally { + setLoading(false) + } + } + + const formatTime = (timestamp: number) => { + const date = new Date(timestamp * 1000) + if (timeframe === "hour") { + return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) + } else if (timeframe === "day") { + return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) + } else { + return date.toLocaleDateString([], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }) + } + } + + const chartData = data.map((d) => ({ + ...d, + time: formatTime(d.timestamp), + })) + + const currentStatus = getStatusInfo(stats.current) + const chartColor = getStatusColor(stats.current) + + // Calculate Y axis domain with some padding + const values = data.map((d) => d.value) + const yMin = values.length > 0 ? Math.max(0, Math.floor(Math.min(...values) - 5)) : 0 + const yMax = values.length > 0 ? Math.ceil(Math.max(...values) + 5) : 100 + + return ( + + + +
+ + + CPU Temperature + + +
+ + + {/* Stats bar */} +
+
+
Current
+
+ {stats.current}°C + + {currentStatus.status} + +
+
+
+
+ Min +
+
{stats.min}°C
+
+
+
+ Avg +
+
{stats.avg}°C
+
+
+
+ Max +
+
{stats.max}°C
+
+
+ + {/* Chart */} +
+ {loading ? ( +
+
+
+
+
+
+ ) : chartData.length === 0 ? ( +
+
+ +

No temperature data available for this period

+

Data is collected every 60 seconds

+
+
+ ) : ( + + + + + + + + + + + `${v}°`} + width={isMobile ? 35 : 45} + /> + } /> + + + + )} +
+ +
+ ) +} diff --git a/AppImage/scripts/flask_server.py b/AppImage/scripts/flask_server.py index 93bf0ece..c04bdd68 100644 --- a/AppImage/scripts/flask_server.py +++ b/AppImage/scripts/flask_server.py @@ -16,9 +16,11 @@ import re import select import shutil import socket +import sqlite3 import subprocess import sys import time +import threading import urllib.parse import hardware_monitor import xml.etree.ElementTree as ET @@ -348,6 +350,160 @@ def get_cpu_temperature(): pass return temp +# ── Temperature History (SQLite) ────────────────────────────────────────────── +# Stores CPU temperature readings every 60s in a lightweight SQLite database. +# Data is persisted in /usr/local/share/proxmenux/ alongside config.json. +# Retention: 30 days max, cleaned up every hour. + +TEMP_DB_DIR = "/usr/local/share/proxmenux" +TEMP_DB_PATH = os.path.join(TEMP_DB_DIR, "monitor.db") + +def _get_temp_db(): + """Get a SQLite connection with WAL mode for concurrent reads.""" + conn = sqlite3.connect(TEMP_DB_PATH, timeout=5) + conn.execute("PRAGMA journal_mode=WAL") + conn.execute("PRAGMA synchronous=NORMAL") + return conn + +def init_temperature_db(): + """Create the temperature_history table if it doesn't exist.""" + try: + os.makedirs(TEMP_DB_DIR, exist_ok=True) + conn = _get_temp_db() + conn.execute(""" + CREATE TABLE IF NOT EXISTS temperature_history ( + id INTEGER PRIMARY KEY AUTOINCREMENT, + timestamp INTEGER NOT NULL, + value REAL NOT NULL + ) + """) + conn.execute(""" + CREATE INDEX IF NOT EXISTS idx_temp_timestamp + ON temperature_history(timestamp) + """) + conn.commit() + conn.close() + return True + except Exception as e: + print(f"[ProxMenux] Temperature DB init failed: {e}") + return False + +def _record_temperature(): + """Insert a single temperature reading into the DB.""" + try: + temp = get_cpu_temperature() + if temp and temp > 0: + conn = _get_temp_db() + conn.execute( + "INSERT INTO temperature_history (timestamp, value) VALUES (?, ?)", + (int(time.time()), round(temp, 1)) + ) + conn.commit() + conn.close() + except Exception: + pass + +def _cleanup_old_temperature_data(): + """Remove temperature records older than 30 days.""" + try: + cutoff = int(time.time()) - (30 * 24 * 3600) + conn = _get_temp_db() + conn.execute("DELETE FROM temperature_history WHERE timestamp < ?", (cutoff,)) + conn.commit() + conn.close() + except Exception: + pass + +def get_temperature_sparkline(minutes=60): + """Get recent temperature data for the overview sparkline.""" + try: + since = int(time.time()) - (minutes * 60) + conn = _get_temp_db() + cursor = conn.execute( + "SELECT timestamp, value FROM temperature_history WHERE timestamp >= ? ORDER BY timestamp ASC", + (since,) + ) + rows = cursor.fetchall() + conn.close() + return [{"timestamp": r[0], "value": r[1]} for r in rows] + except Exception: + return [] + +def get_temperature_history(timeframe="hour"): + """Get temperature history with downsampling for longer timeframes.""" + try: + now = int(time.time()) + if timeframe == "hour": + since = now - 3600 + interval = None # All points (~60) + elif timeframe == "day": + since = now - 86400 + interval = 300 # 5 min avg (288 points) + elif timeframe == "week": + since = now - 7 * 86400 + interval = 1800 # 30 min avg (336 points) + elif timeframe == "month": + since = now - 30 * 86400 + interval = 7200 # 2h avg (360 points) + else: + since = now - 3600 + interval = None + + conn = _get_temp_db() + + if interval is None: + cursor = conn.execute( + "SELECT timestamp, value FROM temperature_history WHERE timestamp >= ? ORDER BY timestamp ASC", + (since,) + ) + rows = cursor.fetchall() + data = [{"timestamp": r[0], "value": r[1]} for r in rows] + else: + # Downsample: average value per interval bucket + cursor = conn.execute( + """SELECT (timestamp / ?) * ? as bucket, + ROUND(AVG(value), 1) as avg_val, + ROUND(MIN(value), 1) as min_val, + ROUND(MAX(value), 1) as max_val + FROM temperature_history + WHERE timestamp >= ? + GROUP BY bucket + ORDER BY bucket ASC""", + (interval, interval, since) + ) + rows = cursor.fetchall() + data = [{"timestamp": r[0], "value": r[1], "min": r[2], "max": r[3]} for r in rows] + + conn.close() + + # Compute stats + if data: + values = [d["value"] for d in data] + stats = { + "min": round(min(values), 1), + "max": round(max(values), 1), + "avg": round(sum(values) / len(values), 1), + "current": values[-1] + } + else: + stats = {"min": 0, "max": 0, "avg": 0, "current": 0} + + return {"data": data, "stats": stats} + except Exception as e: + return {"data": [], "stats": {"min": 0, "max": 0, "avg": 0, "current": 0}} + +def _temperature_collector_loop(): + """Background thread: collect temperature every 60s, cleanup every hour.""" + cleanup_counter = 0 + while True: + _record_temperature() + cleanup_counter += 1 + if cleanup_counter >= 60: # Every 60 iterations = 60 minutes + _cleanup_old_temperature_data() + cleanup_counter = 0 + time.sleep(60) + + def get_uptime(): """Get system uptime in a human-readable format.""" try: @@ -4803,12 +4959,16 @@ def api_system(): # Get available updates available_updates = get_available_updates() + # Get temperature sparkline (last 1h) for overview mini chart + temp_sparkline = get_temperature_sparkline(60) + return jsonify({ 'cpu_usage': round(cpu_usage, 1), 'memory_usage': round(memory_usage_percent, 1), 'memory_total': round(memory_total_gb, 1), 'memory_used': round(memory_used_gb, 1), 'temperature': temp, + 'temperature_sparkline': temp_sparkline, 'uptime': uptime, 'load_average': list(load_avg), 'hostname': socket.gethostname(), @@ -4826,6 +4986,20 @@ def api_system(): pass return jsonify({'error': str(e)}), 500 +@app.route('/api/temperature/history', methods=['GET']) +@require_auth +def api_temperature_history(): + """Get temperature history for charts. Timeframe: hour, day, week, month""" + try: + timeframe = request.args.get('timeframe', 'hour') + if timeframe not in ('hour', 'day', 'week', 'month'): + timeframe = 'hour' + result = get_temperature_history(timeframe) + return jsonify(result) + except Exception as e: + return jsonify({'data': [], 'stats': {'min': 0, 'max': 0, 'avg': 0, 'current': 0}}), 500 + + @app.route('/api/storage', methods=['GET']) @require_auth def api_storage(): @@ -6758,6 +6932,18 @@ if __name__ == '__main__': except Exception as e: print(f"[ProxMenux] journald check skipped: {e}") + # ── Temperature history collector ── + # Initialize SQLite DB and start background thread to record CPU temp every 60s + if init_temperature_db(): + # Record initial reading immediately + _record_temperature() + # Start background collector thread + temp_thread = threading.Thread(target=_temperature_collector_loop, daemon=True) + temp_thread.start() + print("[ProxMenux] Temperature history collector started (60s interval, 30d retention)") + else: + print("[ProxMenux] Temperature history disabled (DB init failed)") + # Check for SSL configuration ssl_ctx = None try: