<div class="page-header">
<h1 class="page-title">Server Monitor</h1>
<p class="page-subtitle">Real-time server metrics and statistics</p>
</div>
<div class="card monitor-status">
<div id="status" class="status-indicator">
<span class="status-text">Loading...</span>
</div>
<div class="last-updated">
Last updated: <span id="last_updated">-</span> • Refreshes every 4s
</div>
<div class="status-uptime">
Uptime: <span id="uptime_pretty">-</span>
</div>
</div>
<div class="charts-container" id="chartsContainer">
<div class="chart-card">
<h2>Server Activity</h2>
<div class="chart-wrapper">
<canvas id="requestsChart"></canvas>
<div class="chart-fallback">Loading chart data...</div>
</div>
<div class="metric-dropdown">
<button id="requests_dropdown_toggle" class="dropdown-toggle" aria-expanded="false">
Request Details ▾
</button>
<div id="requests_dropdown_content" class="dropdown-content" hidden>
<div class="metric-row">Total: <span id="req_total_dd">-</span></div>
<div class="metric-row">Successful: <span id="req_success_dd">-</span></div>
<div class="metric-row">Errors: <span id="req_errors_dd">-</span></div>
<div class="metric-row">Success Rate: <span id="req_success_rate_dd">-</span></div>
</div>
</div>
</div>
<div class="chart-card">
<div class="chart-header">
<h2>Memory Usage</h2>
<button id="cleanup_memory_btn" class="cleanup-btn" title="Force memory cleanup for long-running processes">
🧹 Cleanup Memory
</button>
</div>
<div class="chart-wrapper">
<canvas id="memoryChart"></canvas>
<div class="chart-fallback">Loading chart data...</div>
</div>
<div id="cleanup_status" class="cleanup-status"></div>
<div class="memory-dropdown">
<button id="memory_dropdown_toggle" class="dropdown-toggle" aria-expanded="false">
Memory Details ▾
</button>
<div id="memory_dropdown_content" class="dropdown-content" hidden>
<div class="metric-row">Tracking Available: <span id="mem_available">-</span></div>
<div class="metric-row"><span>Current:</span> <span><span id="mem_current_mb">-</span> MB</span></div>
<div class="metric-row"><span>Peak:</span> <span><span id="mem_peak_mb">-</span> MB</span></div>
</div>
</div>
</div>
<div class="chart-card full-width">
<h2>Data Transferred</h2>
<div class="chart-wrapper">
<canvas id="dataChart"></canvas>
<div class="chart-fallback">Loading chart data...</div>
</div>
<div class="metric-dropdown">
<button id="transfer_dropdown_toggle" class="dropdown-toggle" aria-expanded="false">
Transfer Details ▾
</button>
<div id="transfer_dropdown_content" class="dropdown-content" hidden>
<div class="metric-title" style="color:#b8dafc; margin: 4px 0;">Download Statistics</div>
<div class="metric-row">Bytes Served: <span id="bytes_served">-</span></div>
<div class="metric-row">MB Served: <span id="mb_served">-</span></div>
<div class="metric-title" style="color:#b8dafc; margin: 8px 0 4px;">Upload Statistics</div>
<div class="metric-row">Total Uploads: <span id="up_total">-</span></div>
<div class="metric-row">Successful: <span id="up_success">-</span></div>
<div class="metric-row">Failed: <span id="up_failed">-</span></div>
<div class="metric-row">Success Rate: <span id="upload_success_rate">-</span></div>
<div class="metric-row"><span>Data Uploaded:</span> <span><span id="up_mb">-</span> MB</span></div>
<div class="metric-row">Average File Size: <span id="avg_file_size">-</span></div>
<div class="metric-row">Largest Upload: <span id="largest_upload">-</span></div>
</div>
</div>
</div>
</div>