+ ); +}; + +export default TerminalComponent; diff --git a/frontend/src/context/SettingsContext.jsx b/frontend/src/context/SettingsContext.jsx new file mode 100644 index 0000000..ccf26aa --- /dev/null +++ b/frontend/src/context/SettingsContext.jsx @@ -0,0 +1,104 @@ +import React, { createContext, useState, useEffect, useContext } from 'react'; + +const SettingsContext = createContext(); + +export const useSettings = () => useContext(SettingsContext); + +export const SettingsProvider = ({ children }) => { + // Theme State + const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light'); + + // Dashboard Chart Type State ('bar' or 'line') + const [chartType, setChartType] = useState(() => localStorage.getItem('chartType') || 'bar'); + + // Docker Feature Config (Global Security Setting) + const [dockerEnabled, setDockerEnabled] = useState(false); + + // Fetch Global Docker Config on mount + useEffect(() => { + const fetchConfig = async () => { + try { + const res = await fetch('/api/docker/config'); + if (res.ok) { + const data = await res.json(); + setDockerEnabled(data.enabled); + } + } catch (e) { + console.error('Failed to fetch docker config:', e); + } + }; + fetchConfig(); + }, []); + + // Network Interface Visibility State (Array of hidden interface names) + const [hiddenInterfaces, setHiddenInterfaces] = useState(() => { + const saved = localStorage.getItem('hiddenInterfaces'); + return saved !== null ? JSON.parse(saved) : []; + }); + + // Effects to save to localStorage and apply theme + useEffect(() => { + localStorage.setItem('theme', theme); + document.documentElement.setAttribute('data-theme', theme); + }, [theme]); + + useEffect(() => { + localStorage.setItem('chartType', chartType); + }, [chartType]); + + useEffect(() => { + localStorage.setItem('hiddenInterfaces', JSON.stringify(hiddenInterfaces)); + }, [hiddenInterfaces]); + + // Sidebar Collapsed State (true/false) + const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(() => { + const saved = localStorage.getItem('isSidebarCollapsed'); + return saved !== null ? JSON.parse(saved) : false; + }); + + useEffect(() => { + localStorage.setItem('isSidebarCollapsed', JSON.stringify(isSidebarCollapsed)); + }, [isSidebarCollapsed]); + + const toggleTheme = () => { + setTheme(prev => prev === 'light' ? 'dark' : 'light'); + }; + + const toggleInterfaceVisibility = (ifaceName) => { + setHiddenInterfaces(prev => { + if (prev.includes(ifaceName)) { + return prev.filter(name => name !== ifaceName); // Show (remove from hidden) + } else { + return [...prev, ifaceName]; // Hide (add to hidden) + } + }); + }; + + // Helper to refresh config manually (e.g. after Settings change) + const refreshDockerConfig = async () => { + try { + const res = await fetch('/api/docker/config'); + if (res.ok) { + const data = await res.json(); + setDockerEnabled(data.enabled); + } + } catch (e) { console.error(e); } + }; + + return ( + + {children} + + ); +}; diff --git a/frontend/src/index.css b/frontend/src/index.css new file mode 100644 index 0000000..654de39 --- /dev/null +++ b/frontend/src/index.css @@ -0,0 +1,334 @@ +:root { + /* Light Mode Colors */ + --bg-primary: #e0e5ec; + --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); + --text-primary: #2d3748; + --text-secondary: #4a5568; + --glass-bg: rgba(255, 255, 255, 0.45); + --glass-border: rgba(255, 255, 255, 0.4); + --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); + --card-bg: rgba(255, 255, 255, 0.25); + + /* Red Accent */ + --accent-color: #ef4444; + --accent-glow: rgba(239, 68, 68, 0.3); + + /* Volume Orange */ + --volume-color: #f97316; + + /* Text Gradient (Force Orange) */ + --brand-gradient: linear-gradient(135deg, #2d3748 0%, #f97316 100%); + + --success-color: #38a169; + --warning-color: #dd6b20; + --error-color: #e53e3e; + --cpu-color: #3b82f6; + /* Blue for CPU */ + --sidebar-bg: rgba(255, 255, 255, 0.3); + + /* Font */ + --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; +} + +[data-theme='dark'] { + /* Dark Mode Colors - Neutral/Darker */ + --bg-primary: #0a0a0a; + --bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #000000 100%); + --text-primary: #f7fafc; + --text-secondary: #a0aec0; + --glass-bg: rgba(0, 0, 0, 0.6); + --glass-border: rgba(255, 255, 255, 0.08); + --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); + --card-bg: rgba(30, 30, 30, 0.4); + + /* Red Accent in Dark */ + --accent-color: #f87171; + --accent-glow: rgba(248, 113, 113, 0.3); + + --volume-color: #fb923c; + + /* Force Light Mode Gradient in Dark Mode as requested (Orange-ish) */ + --brand-gradient: linear-gradient(135deg, #2d3748 0%, #f97316 100%); + + --sidebar-bg: rgba(10, 10, 10, 0.5); +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: var(--font-family); + background: var(--bg-gradient); + background-attachment: fixed; + color: var(--text-primary); + min-height: 100vh; + transition: background 0.3s ease, color 0.3s ease; + overflow-x: hidden; +} + +#root { + min-height: 100vh; + display: flex; + flex-direction: column; +} + +/* Logo/Brand Styles - STRONG GRADIENT */ +.logo-text { + background: linear-gradient(135deg, #dc2626 0%, #ff8c00 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-size: 1.5rem; + font-weight: 700; + letter-spacing: -0.02em; + margin: 0; +} + +/* Model name within system-info-card - STRONG GRADIENT */ +.sys-details h3 { + background: linear-gradient(135deg, #dc2626 0%, #ff8c00 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-size: 1.5rem; + font-weight: 700; + margin: 0; + letter-spacing: -0.02em; +} + +.sys-icon svg { + background: linear-gradient(135deg, #dc2626 0%, #ff8c00 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* Light mode icon background */ +.sys-icon { + background: rgba(240, 240, 240, 0.95); + border-radius: 8px; + padding: 0.3rem; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); +} + +/* Dark mode icon background */ +[data-theme='dark'] .sys-icon { + background: rgba(30, 30, 30, 0.95); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); +} + +.sys-subtitle { + color: var(--text-secondary); + font-size: 0.9rem; + margin-top: 0.25rem; +} + +.sys-meta { + display: flex; + gap: 1.5rem; + margin-top: 1rem; +} + +.meta-item { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.meta-item .label { + font-size: 0.75rem; + color: var(--text-secondary); + text-transform: uppercase; +} + +/* Glassmorphism Utilities */ +.glass-panel { + background: var(--glass-bg); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid var(--glass-border); + box-shadow: var(--glass-shadow); + border-radius: 16px; +} + +.glass-card { + background: var(--card-bg); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px solid var(--glass-border); + border-radius: 12px; + padding: 1.5rem; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.glass-card:hover { + transform: translateY(-2px); + box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.1); +} + +/* Buttons */ +.btn { + padding: 0.5rem 1rem; + border-radius: 8px; + border: none; + font-weight: 600; + cursor: pointer; + transition: all 0.2s; + font-family: inherit; +} + +.btn-primary { + background: var(--accent-color); + color: white; +} + +.btn-primary:hover { + filter: brightness(1.1); + transform: translateY(-1px); +} + +.btn-icon { + background: transparent; + border: none; + padding: 0.4rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + color: var(--text-primary); + transition: background 0.2s; +} + +.btn-icon:hover { + background: rgba(125, 125, 125, 0.1); +} + +/* Scrollbar Styling */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: rgba(156, 163, 175, 0.5); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(156, 163, 175, 0.7); +} + +/* Page Containers - Standardized Layout */ +.page-container, +.dashboard-container, +.settings-container, +.history-container { + width: 100%; + max-width: 1280px; + margin: 0 auto; + padding: 1.5rem 1rem; + display: flex; + flex-direction: column; + gap: 1.5rem !important; + /* Force consistent gap */ +} + +@media (max-width: 768px) { + + /* Container 설정 */ + .page-container, + .dashboard-container, + .settings-container, + .history-container { + padding: 0 !important; + gap: 1rem !important; + width: 100% !important; + box-sizing: border-box !important; + } + + /* 모든 카드를 동일하게 - CLASS 통일 */ + .glass-card, + .stat-card, + .settings-card, + .chart-section, + .system-info-card, + .glass-panel, + .full-width, + .resource-card, + .widget-grid>*, + .stats-grid>*, + .settings-grid>* { + width: 100% !important; + max-width: 100% !important; + min-width: 100% !important; + margin: 0 !important; + padding: 1.5rem !important; + box-sizing: border-box !important; + } + + /* Container children - no margins */ + .page-container>*, + .dashboard-container>*, + .settings-container>*, + .history-container>* { + margin: 0 !important; + } + + /* settings-container 위 여백 제거 */ + .settings-container { + padding-top: 0 !important; + } + + /* Charts container */ + .charts-container { + width: 100% !important; + padding: 0 !important; + margin: 0 !important; + } + + /* Widget grids - single column with exact gap */ + .widget-grid, + .stats-grid, + .settings-grid { + grid-template-columns: 1fr !important; + gap: 1rem !important; + } + + /* mobile-header: 높이 40px, 간격 최소화 */ + .mobile-header { + height: 40px !important; + padding: 0.75rem 1.5rem !important; + margin-bottom: 0.5rem !important; + /* 간격 더 줄임 */ + } +} + +/* Loading Spinner Animation */ +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.spin-animation { + animation: spin 1s linear infinite; +} + +.loading-container-center { + display: flex; + justify-content: center; + align-items: center; + height: 200px; + color: var(--text-secondary); + width: 100%; +} \ No newline at end of file diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx new file mode 100644 index 0000000..16e5bca --- /dev/null +++ b/frontend/src/main.jsx @@ -0,0 +1,13 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App.jsx' +import './index.css' + +// vite-plugin-pwa handles Service Worker registration automatically +// Service Worker will be registered at /sw.js by the plugin + +ReactDOM.createRoot(document.getElementById('root')).render( + + + , +) diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx new file mode 100644 index 0000000..687d1b5 --- /dev/null +++ b/frontend/src/pages/Dashboard.jsx @@ -0,0 +1,502 @@ +import React, { useState, useEffect } from 'react'; +import { useOutletContext } from 'react-router-dom'; +import { useSettings } from '../context/SettingsContext'; +import { + HardDrive, + Cpu, + MemoryStick, + Network, + Server, + Activity, + Clock, + Loader2 +} from 'lucide-react'; +import { + BarChart, Bar, LineChart, Line, AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell +} from 'recharts'; + +// API URL +const API_URL = '/api/stats'; + +const Dashboard = () => { + const { chartType, hiddenInterfaces } = useSettings(); // Use Global Setting + const [stats, setStats] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [history, setHistory] = useState([]); + + useEffect(() => { + const fetchHistory = async () => { + try { + const response = await fetch('/api/history'); + const data = await response.json(); + + // Get last 60 minutes (60 points) + // Backend sends { timestamp, cpu, memory, network: {rx, tx} } + // Frontend needs { time, cpu, memory, rx, tx } + const formattedHistory = data.slice(-60).map(item => ({ + time: new Date(item.timestamp).toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' }), + cpu: item.cpu, + memory: item.memory, + rx: item.network ? item.network.rx : 0, + tx: item.network ? item.network.tx : 0 + })); + setHistory(formattedHistory); + } catch (err) { + console.error('Failed to fetch initial history:', err); + } + }; + fetchHistory(); + + const fetchStats = async () => { + try { + const response = await fetch(API_URL); + if (!response.ok) { + throw new Error('Network response was not ok'); + } + const data = await response.json(); + setStats(data); + + // Update history for Line chart + setHistory(prev => { + const now = new Date().toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' }); + + // Calculate Total Network Traffic + let totalRx = 0; + let totalTx = 0; + if (data.network) { + data.network.forEach(net => { + if (!hiddenInterfaces?.includes(net.iface)) { + totalRx += (net.rx_sec || 0); + totalTx += (net.tx_sec || 0); + } + }); + } + + const newPoint = { + time: now, + cpu: data.cpu.load, + memory: data.memory.percentage, + rx: totalRx, + tx: totalTx + }; + const newHistory = [...prev, newPoint]; + // Keep last 1 hour (assuming 5s updates + initial 1m data mixed) + // 1 hour = 720 points at 5s interval. + if (newHistory.length > 720) newHistory.shift(); + return newHistory; + }); + + setLoading(false); + } catch (err) { + console.error('Fetch error:', err); + setError('Failed to connect to server. Ensure Backend is running.'); + setLoading(false); + } + }; + + fetchStats(); + const interval = setInterval(fetchStats, 5000); + + return () => clearInterval(interval); + }, []); + + if (loading) return ( +

+ +

+ ); + + return ( +

+ {/* + Row 1: System Info Widget + */} +

+ +

{stats?.system?.model || 'Synology NAS'}

시스템 모니터

+ OS + {stats?.system?.os} +

+ Version + {stats?.system?.release} +

+ Kernel + {stats?.system?.kernel} +

+ + {error && ( +

+ {error} +

+ )} + + {/* + Row 2: CPU & Memory (Half Width Each) + */} +

+ {/* CPU Widget */} +

+ +

CPU

+ {stats?.cpu?.load}% +

+ + {chartType === 'line' ? ( +

+ + + + + + +

+ ) : ( +

80 ? 'var(--error-color)' : 'var(--cpu-color)' + }} + /> +

+ )} +

+ + {/* Memory Widget */} +

+ +

메모리

+ {stats?.memory?.percentage}% +

+ + {chartType === 'line' ? ( +

+ + + + + + +

+ ) : ( +

80 ? 'var(--error-color)' : 'var(--success-color)' + }} + /> +

+ )} +

+ + {/* + Row 3: Disk Usage + */} +

+ +

볼륨 사용량

+ {stats?.storage?.length === 0 &&

볼륨 정보를 찾을 수 없습니다.

} + {stats?.storage?.map((disk, idx) => ( +

+ {disk.mount} + {(disk.used / 1024 / 1024 / 1024).toFixed(0)} GB / {(disk.size / 1024 / 1024 / 1024).toFixed(0)} GB +

80 ? 'var(--error-color)' : 'var(--volume-color)' + }} + /> +

+ {disk.use}% +

+ ))} +

+ + {/* Network Widget */} +

+ +

네트워크 (Total)

+ +

+ + + + + + + + + + + + + + + { + if (value < 1024) return `${value.toFixed(0)} B/s`; + if (value < 1024 * 1024) return `${(value / 1024).toFixed(0)} KB/s`; + return `${(value / 1024 / 1024).toFixed(1)} MB/s`; + }} + style={{ fontSize: '0.75rem', fill: 'var(--text-secondary)' }} + /> + { + let formatted; + if (value < 1024) formatted = `${value.toFixed(0)} B/s`; + else if (value < 1024 * 1024) formatted = `${(value / 1024).toFixed(1)} KB/s`; + else formatted = `${(value / 1024 / 1024).toFixed(2)} MB/s`; + return [formatted, name]; + }} + /> + + + + +

+ + {/* Optional: Simple List below chart for current values per interface */} +

+ {stats?.network?.filter(net => !hiddenInterfaces?.includes(net.iface)).map((net, idx) => { + const formatSpeed = (bytes) => { + if (!bytes) return '0 B/s'; + if (bytes < 1024) return `${bytes.toFixed(0)} B/s`; + if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB/s`; + return `${(bytes / 1024 / 1024).toFixed(1)} MB/s`; + }; + return ( +

+ {net.iface} +

+ ↓ {formatSpeed(net.rx_sec)} + ↑ {formatSpeed(net.tx_sec)} +

+ ); + })} +

+ + +

+ ); +}; + +export default Dashboard; diff --git a/frontend/src/pages/DockerManager.jsx b/frontend/src/pages/DockerManager.jsx new file mode 100644 index 0000000..e75f65c --- /dev/null +++ b/frontend/src/pages/DockerManager.jsx @@ -0,0 +1,374 @@ +import React, { useState, useEffect } from 'react'; +import { + Box, + Play, + Square, + Terminal as TerminalIcon, + MoreHorizontal, + RefreshCw, + RotateCw, + FileText, + Search, + X, + Loader2 +} from 'lucide-react'; +import TerminalComponent from '../components/TerminalComponent'; + +const API_DOCKER_CONTAINERS = '/api/docker/containers'; + +const formatBytes = (bytes, decimals = 2) => { + if (!+bytes) return '0 Bytes'; + const k = 1024; + const dm = decimals < 0 ? 0 : decimals; + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; + const i = Math.floor(Math.log(bytes) / Math.log(k)); + return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`; +}; + +const DockerManager = () => { + const [containers, setContainers] = useState([]); + // ... (rest of state items are same) + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [activeTerminal, setActiveTerminal] = useState(null); // containerId + const [searchQuery, setSearchQuery] = useState(''); + const [showLogs, setShowLogs] = useState(null); // containerId + const [logsContent, setLogsContent] = useState(''); + const [actionLoading, setActionLoading] = useState(null); // containerId being acted upon + + const fetchContainers = async () => { + setLoading(true); + try { + const response = await fetch(API_DOCKER_CONTAINERS); + if (!response.ok) throw new Error('Failed to fetch containers'); + const data = await response.json(); + setContainers(data); + setError(null); + } catch (err) { + console.error(err); + setError('Could not load Docker containers.'); + } finally { + setLoading(false); + } + }; + + // ... (rest of useEffect and handlers existing) + + useEffect(() => { + fetchContainers(); + // Poll for updates every 5 seconds to keep stats fresh + const interval = setInterval(fetchContainers, 5000); + return () => clearInterval(interval); + }, []); + + // Docker Actions + const handleContainerAction = async (id, action) => { + setActionLoading(id); + try { + const response = await fetch(`/api/docker/containers/${id}/${action}`, { method: 'POST' }); + if (!response.ok) throw new Error(`Failed to ${action} container`); + await fetchContainers(); // Refresh list + } catch (err) { + alert(err.message); + } finally { + setActionLoading(null); + } + }; + + const handleFetchLogs = async (id) => { + setLogsContent('Loading logs...'); + setShowLogs(id); + try { + const response = await fetch(`/api/docker/containers/${id}/logs`); + if (!response.ok) throw new Error('Failed to fetch logs'); + const data = await response.text(); + setLogsContent(data); + } catch (err) { + setLogsContent(`Error: ${err.message}`); + } + }; + + return ( +

+ {/* ... (header code) */} +

도커 컨테이너

+ {!activeTerminal && ( +

+ + setSearchQuery(e.target.value)} + style={{ + padding: '0.5rem 1rem 0.5rem 2.2rem', + borderRadius: '8px', + border: '1px solid rgba(255,255,255,0.1)', + background: 'rgba(255,255,255,0.05)', + color: 'inherit', + outline: 'none', + width: '200px', + fontSize: '0.9rem' + }} + /> +

+ +

+ )} +

+ + {error && ( +

+ {error} +

+ )} + + {/* Terminal View */} + {activeTerminal ? ( +

+ 터미널 - {containers.find(c => c.Id === activeTerminal)?.Names[0] || activeTerminal} + +

+ +

+ ) : ( +

+ {loading && containers.length === 0 ? ( +

+ + +

+ ) : containers + .filter(c => + c.Names[0].toLowerCase().includes(searchQuery.toLowerCase()) || + c.Image.toLowerCase().includes(searchQuery.toLowerCase()) + ) + .map(container => ( +

{container.Names[0].replace(/^\//, '')}

+ 이미지: + {container.Image.length > 20 ? container.Image.substring(0, 20) + '...' : container.Image} +

+ 상태: + {container.State} +

+ + {/* Stats Display */} + {container.stats && container.State === 'running' && ( + <> +

+ CPU: + + {container.stats.cpu.toFixed(2)}% + +

+ Memory: + + {formatBytes(container.stats.memory)} + +

+ + )} +

+ + {/* Action Buttons */} +

+ {container.State === 'running' ? ( + <> + + + + + ) : ( + + )} + +

+ ))} +

+ )} + + {/* Logs Modal */} + {showLogs && ( +

로그

+ +

+                            {logsContent}
+

+ )} + + +

+ ); +}; + +export default DockerManager; diff --git a/frontend/src/pages/History.jsx b/frontend/src/pages/History.jsx new file mode 100644 index 0000000..140aaab --- /dev/null +++ b/frontend/src/pages/History.jsx @@ -0,0 +1,259 @@ +import React, { useState, useEffect, useMemo } from 'react'; +import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts'; +import { History as HistoryIcon, Clock, Loader2 } from 'lucide-react'; + +const History = () => { + const [data, setData] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [timeRange, setTimeRange] = useState('24h'); // '1h', '6h', '12h', '24h' + + useEffect(() => { + const fetchHistory = async () => { + try { + const response = await fetch('/api/history'); + if (!response.ok) throw new Error('Failed to fetch history'); + const result = await response.json(); + setData(result); + setLoading(false); + } catch (err) { + console.error('History fetch error:', err); + setError('Failed to load history data'); + setLoading(false); + } + }; + + fetchHistory(); + const interval = setInterval(fetchHistory, 60000); // 1 min update + return () => clearInterval(interval); + }, []); + + const filteredData = useMemo(() => { + if (!data.length) return []; + const now = Date.now(); + const ranges = { + '1h': 60 * 60 * 1000, + '6h': 6 * 60 * 60 * 1000, + '12h': 12 * 60 * 60 * 1000, + '24h': 24 * 60 * 60 * 1000, + '7d': 7 * 24 * 60 * 60 * 1000, // Add 7d support if retention allows + }; + const rangeMs = ranges[timeRange] || ranges['24h']; + const cutoff = now - rangeMs; + + return data + .filter(item => item.timestamp >= cutoff) + .map(item => ({ + ...item, + rx: item.network ? item.network.rx : 0, + tx: item.network ? item.network.tx : 0, + time: new Date(item.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) + })); + }, [data, timeRange]); + + if (loading) return ( +

+ +

+ ); + + const formatBytes = (bytes) => { + if (bytes === 0) return '0 B/s'; + const k = 1024; + const sizes = ['B/s', 'KB/s', 'MB/s', 'GB/s']; + const i = Math.floor(Math.log(bytes) / Math.log(k)); + return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; + }; + + const CustomTooltip = ({ active, payload, label, type }) => { + if (active && payload && payload.length) { + return ( +

{label}

+ {payload.map((entry, index) => ( +

+ {entry.name}: {type === 'network' ? formatBytes(entry.value) : `${entry.value}%`} +

+ ))} +

+ ); + } + return null; + }; + + return ( +

+ +

시스템 히스토리

+ {['1h', '6h', '12h', '24h', '7d'].map(range => ( + + ))} +

+ + {error ? ( +

{error}

+ ) : ( +

CPU 사용량

+ + + + + + + + + + + + } /> + + + +

+ +

메모리 사용량

+ + + + + + + + + + + + } /> + + + +

+ +

+ Download + Upload +

+ + + + + + + + + + + + + + + { + if (val === 0) return '0 B/s'; + if (val < 1024) return `${val.toFixed(0)} B/s`; + if (val < 1024 * 1024) return `${(val / 1024).toFixed(0)} KB/s`; + return `${(val / 1024 / 1024).toFixed(1)} MB/s`; + }} + /> + } /> + + + + +

+ )} +

+ + +

+ ); +}; + +export default History; diff --git a/frontend/src/pages/Settings.jsx b/frontend/src/pages/Settings.jsx new file mode 100644 index 0000000..938218b --- /dev/null +++ b/frontend/src/pages/Settings.jsx @@ -0,0 +1,576 @@ +import React, { useState, useEffect } from 'react'; +import { useSettings } from '../context/SettingsContext'; +import { + BarChart2, + Activity, + Layout, + Settings as SettingsIcon, + Network, + Clock, + Sun, + Moon, + Bell, + Loader2 +} from 'lucide-react'; +import AlertSettingsModal from '../components/AlertSettingsModal'; + +const Settings = () => { + const { chartType, setChartType, dockerEnabled, refreshDockerConfig, hiddenInterfaces, toggleInterfaceVisibility, theme, toggleTheme } = useSettings(); + const [interfaces, setInterfaces] = useState([]); + const [retentionHours, setRetentionHours] = useState(24); + const [saving, setSaving] = useState(false); + + useEffect(() => { + // Fetch current interfaces + const fetchInterfaces = async () => { + try { + const response = await fetch('/api/stats'); + const data = await response.json(); + if (data.network) { + setInterfaces(data.network.map(n => n.iface)); + } + } catch (error) { + console.error('Failed to fetch stats:', error); + } + }; + fetchInterfaces(); + + // Fetch retention settings + const fetchRetention = async () => { + try { + const response = await fetch('/api/settings/retention'); + if (response.ok) { + const data = await response.json(); + setRetentionHours(data.hours); + } + } catch (error) { + console.error('Failed to fetch retention settings:', error); + } + }; + fetchRetention(); + }, []); + + const saveRetention = async () => { + setSaving(true); + try { + const response = await fetch('/api/settings/retention', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ hours: retentionHours }) + }); + if (response.ok) { + alert('설정이 저장되었습니다.'); + } else { + alert('설정 저장 실패'); + } + } catch (error) { + console.error('Failed to save settings:', error); + alert('설정 저장 중 오류 발생'); + } finally { + setSaving(false); + } + }; + + const [showAlertModal, setShowAlertModal] = useState(false); + const [passwordInput, setPasswordInput] = useState(''); + const [showPasswordInput, setShowPasswordInput] = useState(false); + + const handleDockerToggle = () => { + // Whether enabling or disabling, require password interaction + setShowPasswordInput(true); + }; + + const confirmDockerChange = async () => { + if (!passwordInput) return alert('비밀번호를 입력해주세요.'); + + const targetState = !dockerEnabled; // Toggle intent + + try { + const res = await fetch('/api/docker/config', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ enabled: targetState, password: passwordInput }) + }); + + if (res.ok) { + await refreshDockerConfig(); + setShowPasswordInput(false); + setPasswordInput(''); + alert(`Docker 기능이 ${targetState ? '활성화' : '비활성화'}되었습니다.`); + } else { + const data = await res.json(); + alert(data.error || '설정 실패'); + } + } catch (e) { + console.error(e); + alert('서버 요청 실패'); + } + }; + + return ( + <> + +

설정

+ +

+ {/* Theme Settings */} +

+ {theme === 'dark' ? : } +

테마 설정

+ +

+ 화면 모드 + 라이트 모드와 다크 모드를 전환합니다. +

+ +

+ + {/* Chart Settings */} +

+ +

대시보드 설정

+ +

+ 차트 시각화 + 시스템 리소스 표시 방식을 선택하세요. +

+ + +

+ + {/* Docker Security Settings */} +

+ +

Docker 보안 설정

+ +

+ 도커 관리 기능 + 기능 활성화 시 비밀번호 설정이 필요합니다. +

+ +

+ + {/* Password Prompt */} + {showPasswordInput && ( +

+ setPasswordInput(e.target.value)} + className="password-input" + autoFocus + /> +

+ + +

+ )} +

+ + {/* Network Interface Settings */} +

+ +

네트워크 인터페이스

+ +

+ 인터페이스 표시 설정 + 대시보드에 표시할 네트워크 인터페이스를 선택하세요. +

+ {interfaces.map(iface => ( + + ))} + {interfaces.length === 0 && ( +

+ +

+ )} +

+ + {/* Notification Settings */} +

+ +

알림 설정

+ +

+ 푸시 알림 및 임계값 설정 + 리소스 사용률 임계값과 컨테이너 종료 알림을 설정합니다. +

+ +

+ + {/* Alert Settings Modal */} + setShowAlertModal(false)} + onSave={() => { + // Optionally refresh settings or show success message + }} + /> + + {/* Data Retention Settings */} +

+ +

데이터 보관 설정

+ +

+ 히스토리 보관 기간 + 시스템 리소스 사용 기록을 보관할 기간을 설정합니다. (시간 단위) +

+ setRetentionHours(parseInt(e.target.value) || 0)} + className="number-input" + /> + 시간 + +

+ + +

+ + ); +}; + +export default Settings; diff --git a/frontend/src/sw-custom.js b/frontend/src/sw-custom.js new file mode 100644 index 0000000..4e9f65a --- /dev/null +++ b/frontend/src/sw-custom.js @@ -0,0 +1,81 @@ +import { precacheAndRoute } from 'workbox-precaching'; +import { registerRoute } from 'workbox-routing'; +import { CacheFirst } from 'workbox-strategies'; + +// Precache all assets +precacheAndRoute(self.__WB_MANIFEST); + +// Cache Google Fonts +registerRoute( + /^https:\/\/fonts\.googleapis\.com\/.*/i, + new CacheFirst({ + cacheName: 'google-fonts-cache', + }) +); + +// ===== PUSH NOTIFICATION HANDLER ===== +self.addEventListener('push', function (event) { + console.log('[SW] Push event received'); + + let notificationData = { + title: 'snStatus 알림', + body: '시스템 알림', + vibrate: [200, 100, 200], + requireInteraction: true, + tag: 'snstatus-alert', + data: { + url: '/' + } + }; + + if (event.data) { + try { + const data = event.data.json(); + console.log('[SW] Push data:', data); + if (data.title) notificationData.title = data.title; + if (data.body) notificationData.body = data.body; + } catch (e) { + console.error('[SW] Parse error:', e); + notificationData.body = event.data.text(); + } + } + + // ALWAYS show notification, regardless of page visibility + event.waitUntil( + self.registration.showNotification(notificationData.title, { + body: notificationData.body, + vibrate: notificationData.vibrate, + requireInteraction: notificationData.requireInteraction, + tag: notificationData.tag, + data: notificationData.data, + // Force notification to show even when page is visible + silent: false + }).then(() => { + console.log('[SW] Notification displayed successfully'); + }) + ); +}); + +self.addEventListener('notificationclick', function (event) { + console.log('[SW] Notification clicked'); + event.notification.close(); + + event.waitUntil( + clients.matchAll({ type: 'window', includeUncontrolled: true }) + .then(function (clientList) { + // Focus existing window if available + for (let i = 0; i < clientList.length; i++) { + const client = clientList[i]; + if (client.url.includes('/') && 'focus' in client) { + return client.focus(); + } + } + // Open new window + if (clients.openWindow) { + return clients.openWindow('/'); + } + }) + ); +}); + +console.log('[SW] Service Worker with push notification support loaded'); diff --git a/frontend/vite.config.js b/frontend/vite.config.js new file mode 100644 index 0000000..4cf6f77 --- /dev/null +++ b/frontend/vite.config.js @@ -0,0 +1,70 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import { VitePWA } from 'vite-plugin-pwa' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + react(), + VitePWA({ + strategies: 'injectManifest', + srcDir: 'src', + filename: 'sw-custom.js', + registerType: 'autoUpdate', + injectRegister: 'auto', + devOptions: { + enabled: false + }, + workbox: { + globPatterns: ['**/*.{js,css,html,ico,png,svg,webp,woff,woff2}'], + // Simplified for faster builds + maximumFileSizeToCacheInBytes: 3000000 + }, + includeAssets: ['pwa-192x192.png', 'pwa-512x512.png'], + manifest: { + name: 'snStatus', + short_name: 'snStatus', + theme_color: '#1e3a8a', + background_color: '#1e3a8a', // Deep Navy for splash + display: 'standalone', + start_url: '/', + icons: [ + { + src: 'pwa-192x192.png', + sizes: '192x192', + type: 'image/png' + }, + { + src: 'pwa-512x512.png', + sizes: '512x512', + type: 'image/png', + purpose: 'any maskable' + } + ] + } + }) + ], + build: { + // Optimize for faster builds on NAS + sourcemap: false, // Disable source maps + minify: 'esbuild', // Use faster esbuild minifier + target: 'es2015', // Less transformation needed + cssCodeSplit: false, // Single CSS file + rollupOptions: { + output: { + manualChunks: undefined // Disable code splitting for faster build + } + }, + chunkSizeWarningLimit: 2000 // Suppress warnings + }, + server: { + port: 3000, + host: true, + proxy: { + '/api': { + target: 'http://backend:3001', + changeOrigin: true, + } + } + } +}) diff --git a/img/01.jpg b/img/01.jpg new file mode 100644 index 0000000..3ecefc3 Binary files /dev/null and b/img/01.jpg differ diff --git a/img/02.jpg b/img/02.jpg new file mode 100644 index 0000000..16f2054 Binary files /dev/null and b/img/02.jpg differ diff --git a/img/03.jpg b/img/03.jpg new file mode 100644 index 0000000..8c96367 Binary files /dev/null and b/img/03.jpg differ diff --git a/img/04.jpg b/img/04.jpg new file mode 100644 index 0000000..971e3f3 Binary files /dev/null and b/img/04.jpg differ diff --git a/img/05.jpg b/img/05.jpg new file mode 100644 index 0000000..e58af86 Binary files /dev/null and b/img/05.jpg differ diff --git a/img/06.jpg b/img/06.jpg new file mode 100644 index 0000000..f3ef2da Binary files /dev/null and b/img/06.jpg differ diff --git a/img/07.jpg b/img/07.jpg new file mode 100644 index 0000000..26f7db2 Binary files /dev/null and b/img/07.jpg differ diff --git a/img/08.png b/img/08.png new file mode 100644 index 0000000..6c15c20 Binary files /dev/null and b/img/08.png differ diff --git a/img/09.png b/img/09.png new file mode 100644 index 0000000..5080b4f Binary files /dev/null and b/img/09.png differ diff --git a/img/10.png b/img/10.png new file mode 100644 index 0000000..0720ef7 Binary files /dev/null and b/img/10.png differ diff --git a/img/11.png b/img/11.png new file mode 100644 index 0000000..bb50bb6 Binary files /dev/null and b/img/11.png differ diff --git a/img/12.png b/img/12.png new file mode 100644 index 0000000..d0f1d93 Binary files /dev/null and b/img/12.png differ

알림 설정

푸시 알림 권한

리소스 사용률 임계값

컨테이너 알림

기능 비활성화

Docker 보안 접근

snStatus

{stats?.system?.model || 'Synology NAS'}

CPU

메모리

볼륨 사용량

네트워크 (Total)

도커 컨테이너

{container.Names[0].replace(/^\//, '')}

로그

시스템 히스토리

CPU 사용량

메모리 사용량

+ Download + Upload +

설정

테마 설정

대시보드 설정

Docker 보안 설정

네트워크 인터페이스

알림 설정

데이터 보관 설정