938 lines
30 KiB
HTML
938 lines
30 KiB
HTML
|
<div class="resources-container">
|
||
|
|
<!-- Resource Overview Cards -->
|
||
|
|
<div class="resource-cards">
|
||
|
|
<!-- CPU Card -->
|
||
|
|
<div class="resource-card cpu-card"
|
||
|
|
hx-get="/api/monitoring/resources/cpu"
|
||
|
|
hx-trigger="load, every 5s"
|
||
|
|
hx-swap="innerHTML">
|
||
|
|
<div class="card-icon">
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
|
||
|
|
<rect x="9" y="9" width="6" height="6"></rect>
|
||
|
|
<line x1="9" y1="1" x2="9" y2="4"></line>
|
||
|
|
<line x1="15" y1="1" x2="15" y2="4"></line>
|
||
|
|
<line x1="9" y1="20" x2="9" y2="23"></line>
|
||
|
|
<line x1="15" y1="20" x2="15" y2="23"></line>
|
||
|
|
<line x1="20" y1="9" x2="23" y2="9"></line>
|
||
|
|
<line x1="20" y1="14" x2="23" y2="14"></line>
|
||
|
|
<line x1="1" y1="9" x2="4" y2="9"></line>
|
||
|
|
<line x1="1" y1="14" x2="4" y2="14"></line>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="card-content">
|
||
|
|
<span class="card-label">CPU Usage</span>
|
||
|
|
<span class="card-value">--%</span>
|
||
|
|
<div class="progress-bar">
|
||
|
|
<div class="progress-fill cpu" style="width: 0%"></div>
|
||
|
|
</div>
|
||
|
|
<span class="card-detail">-- cores @ -- GHz</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Memory Card -->
|
||
|
|
<div class="resource-card memory-card"
|
||
|
|
hx-get="/api/monitoring/resources/memory"
|
||
|
|
hx-trigger="load, every 5s"
|
||
|
|
hx-swap="innerHTML">
|
||
|
|
<div class="card-icon">
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<rect x="2" y="6" width="20" height="12" rx="2"></rect>
|
||
|
|
<line x1="6" y1="12" x2="6" y2="12"></line>
|
||
|
|
<line x1="10" y1="12" x2="10" y2="12"></line>
|
||
|
|
<line x1="14" y1="12" x2="14" y2="12"></line>
|
||
|
|
<line x1="18" y1="12" x2="18" y2="12"></line>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="card-content">
|
||
|
|
<span class="card-label">Memory Usage</span>
|
||
|
|
<span class="card-value">--%</span>
|
||
|
|
<div class="progress-bar">
|
||
|
|
<div class="progress-fill memory" style="width: 0%"></div>
|
||
|
|
</div>
|
||
|
|
<span class="card-detail">-- GB / -- GB</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Disk Card -->
|
||
|
|
<div class="resource-card disk-card"
|
||
|
|
hx-get="/api/monitoring/resources/disk"
|
||
|
|
hx-trigger="load, every 30s"
|
||
|
|
hx-swap="innerHTML">
|
||
|
|
<div class="card-icon">
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
|
||
|
|
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
|
||
|
|
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="card-content">
|
||
|
|
<span class="card-label">Disk Usage</span>
|
||
|
|
<span class="card-value">--%</span>
|
||
|
|
<div class="progress-bar">
|
||
|
|
<div class="progress-fill disk" style="width: 0%"></div>
|
||
|
|
</div>
|
||
|
|
<span class="card-detail">-- GB / -- GB</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Network Card -->
|
||
|
|
<div class="resource-card network-card"
|
||
|
|
hx-get="/api/monitoring/resources/network"
|
||
|
|
hx-trigger="load, every 5s"
|
||
|
|
hx-swap="innerHTML">
|
||
|
|
<div class="card-icon">
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M5 12.55a11 11 0 0 1 14.08 0"></path>
|
||
|
|
<path d="M1.42 9a16 16 0 0 1 21.16 0"></path>
|
||
|
|
<path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path>
|
||
|
|
<line x1="12" y1="20" x2="12.01" y2="20"></line>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="card-content">
|
||
|
|
<span class="card-label">Network I/O</span>
|
||
|
|
<span class="card-value">-- MB/s</span>
|
||
|
|
<div class="network-stats">
|
||
|
|
<span class="net-stat">
|
||
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<polyline points="18 15 12 9 6 15"></polyline>
|
||
|
|
</svg>
|
||
|
|
-- MB/s
|
||
|
|
</span>
|
||
|
|
<span class="net-stat">
|
||
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<polyline points="6 9 12 15 18 9"></polyline>
|
||
|
|
</svg>
|
||
|
|
-- MB/s
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<span class="card-detail">-- connections active</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Charts Section -->
|
||
|
|
<div class="charts-section">
|
||
|
|
<!-- CPU Chart -->
|
||
|
|
<div class="chart-card">
|
||
|
|
<div class="chart-header">
|
||
|
|
<h3>
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
|
||
|
|
<rect x="9" y="9" width="6" height="6"></rect>
|
||
|
|
</svg>
|
||
|
|
CPU Usage Over Time
|
||
|
|
</h3>
|
||
|
|
<div class="chart-legend">
|
||
|
|
<span class="legend-item"><span class="legend-color cpu"></span>User</span>
|
||
|
|
<span class="legend-item"><span class="legend-color system"></span>System</span>
|
||
|
|
<span class="legend-item"><span class="legend-color io"></span>I/O Wait</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="chart-container" id="cpu-chart"
|
||
|
|
hx-get="/api/monitoring/charts/cpu"
|
||
|
|
hx-trigger="load, every 10s"
|
||
|
|
hx-swap="innerHTML">
|
||
|
|
<div class="chart-placeholder">
|
||
|
|
<svg viewBox="0 0 400 150" class="sparkline-chart">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="cpu-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:var(--primary);stop-opacity:0.3"/>
|
||
|
|
<stop offset="100%" style="stop-color:var(--primary);stop-opacity:0"/>
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<path d="M0,150 L0,100 Q50,80 100,90 T200,70 T300,85 T400,75 L400,150 Z" fill="url(#cpu-gradient)"/>
|
||
|
|
<path d="M0,100 Q50,80 100,90 T200,70 T300,85 T400,75" fill="none" stroke="var(--primary)" stroke-width="2"/>
|
||
|
|
</svg>
|
||
|
|
<div class="chart-axis-y">
|
||
|
|
<span></span>100%</span>
|
||
|
|
<span>50%</span>
|
||
|
|
<span>0%</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Memory Chart -->
|
||
|
|
<div class="chart-card">
|
||
|
|
<div class="chart-header">
|
||
|
|
<h3>
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<rect x="2" y="6" width="20" height="12" rx="2"></rect>
|
||
|
|
<line x1="6" y1="12" x2="6" y2="12"></line>
|
||
|
|
<line x1="10" y1="12" x2="10" y2="12"></line>
|
||
|
|
</svg>
|
||
|
|
Memory Usage Over Time
|
||
|
|
</h3>
|
||
|
|
<div class="chart-legend">
|
||
|
|
<span class="legend-item"><span class="legend-color memory"></span>Used</span>
|
||
|
|
<span class="legend-item"><span class="legend-color cached"></span>Cached</span>
|
||
|
|
<span class="legend-item"><span class="legend-color buffers"></span>Buffers</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="chart-container" id="memory-chart"
|
||
|
|
hx-get="/api/monitoring/charts/memory"
|
||
|
|
hx-trigger="load, every 10s"
|
||
|
|
hx-swap="innerHTML">
|
||
|
|
<div class="chart-placeholder">
|
||
|
|
<svg viewBox="0 0 400 150" class="sparkline-chart">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="memory-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:var(--success);stop-opacity:0.3"/>
|
||
|
|
<stop offset="100%" style="stop-color:var(--success);stop-opacity:0"/>
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<path d="M0,150 L0,60 Q50,55 100,58 T200,52 T300,55 T400,50 L400,150 Z" fill="url(#memory-gradient)"/>
|
||
|
|
<path d="M0,60 Q50,55 100,58 T200,52 T300,55 T400,50" fill="none" stroke="var(--success)" stroke-width="2"/>
|
||
|
|
</svg>
|
||
|
|
<div class="chart-axis-y">
|
||
|
|
<span>16 GB</span>
|
||
|
|
<span>8 GB</span>
|
||
|
|
<span>0 GB</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Detailed Resources -->
|
||
|
|
<div class="detailed-section">
|
||
|
|
<!-- Disk Breakdown -->
|
||
|
|
<div class="detail-card">
|
||
|
|
<div class="detail-header">
|
||
|
|
<h3>
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
|
||
|
|
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
|
||
|
|
</svg>
|
||
|
|
Disk Partitions
|
||
|
|
</h3>
|
||
|
|
<button class="refresh-btn" onclick="refreshDiskInfo()">
|
||
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<polyline points="23 4 23 10 17 10"></polyline>
|
||
|
|
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="detail-content" id="disk-partitions"
|
||
|
|
hx-get="/api/monitoring/resources/disk/partitions"
|
||
|
|
hx-trigger="load, every 60s"
|
||
|
|
hx-swap="innerHTML">
|
||
|
|
<div class="partition-row">
|
||
|
|
<div class="partition-info">
|
||
|
|
<span class="partition-name">/</span>
|
||
|
|
<span class="partition-type">ext4</span>
|
||
|
|
</div>
|
||
|
|
<div class="partition-usage">
|
||
|
|
<div class="usage-bar">
|
||
|
|
<div class="usage-fill" style="width: 0%"></div>
|
||
|
|
</div>
|
||
|
|
<span class="usage-text">-- GB / -- GB</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Process List -->
|
||
|
|
<div class="detail-card">
|
||
|
|
<div class="detail-header">
|
||
|
|
<h3>
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<line x1="4" y1="21" x2="4" y2="14"></line>
|
||
|
|
<line x1="4" y1="10" x2="4" y2="3"></line>
|
||
|
|
<line x1="12" y1="21" x2="12" y2="12"></line>
|
||
|
|
<line x1="12" y1="8" x2="12" y2="3"></line>
|
||
|
|
<line x1="20" y1="21" x2="20" y2="16"></line>
|
||
|
|
<line x1="20" y1="12" x2="20" y2="3"></line>
|
||
|
|
<line x1="1" y1="14" x2="7" y2="14"></line>
|
||
|
|
<line x1="9" y1="8" x2="15" y2="8"></line>
|
||
|
|
<line x1="17" y1="16" x2="23" y2="16"></line>
|
||
|
|
</svg>
|
||
|
|
Top Processes
|
||
|
|
</h3>
|
||
|
|
<select id="process-sort" onchange="sortProcesses(this.value)">
|
||
|
|
<option value="cpu">Sort by CPU</option>
|
||
|
|
<option value="memory">Sort by Memory</option>
|
||
|
|
<option value="name">Sort by Name</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="detail-content" id="process-list"
|
||
|
|
hx-get="/api/monitoring/resources/processes"
|
||
|
|
hx-trigger="load, every 5s"
|
||
|
|
hx-swap="innerHTML">
|
||
|
|
<table class="process-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>PID</th>
|
||
|
|
<th>Process</th>
|
||
|
|
<th>CPU</th>
|
||
|
|
<th>Memory</th>
|
||
|
|
<th>Status</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td colspan="5" class="loading-row">Loading processes...</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Network Interfaces -->
|
||
|
|
<div class="detail-card">
|
||
|
|
<div class="detail-header">
|
||
|
|
<h3>
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
|
||
|
|
<rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
|
||
|
|
<line x1="6" y1="6" x2="6.01" y2="6"></line>
|
||
|
|
<line x1="6" y1="18" x2="6.01" y2="18"></line>
|
||
|
|
</svg>
|
||
|
|
Network Interfaces
|
||
|
|
</h3>
|
||
|
|
</div>
|
||
|
|
<div class="detail-content" id="network-interfaces"
|
||
|
|
hx-get="/api/monitoring/resources/network/interfaces"
|
||
|
|
hx-trigger="load, every 10s"
|
||
|
|
hx-swap="innerHTML">
|
||
|
|
<div class="interface-row">
|
||
|
|
<div class="interface-info">
|
||
|
|
<span class="interface-name">eth0</span>
|
||
|
|
<span class="interface-ip">--</span>
|
||
|
|
</div>
|
||
|
|
<div class="interface-stats">
|
||
|
|
<span class="stat-in">
|
||
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<polyline points="18 15 12 9 6 15"></polyline>
|
||
|
|
</svg>
|
||
|
|
-- MB/s
|
||
|
|
</span>
|
||
|
|
<span class="stat-out">
|
||
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<polyline points="6 9 12 15 18 9"></polyline>
|
||
|
|
</svg>
|
||
|
|
-- MB/s
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- System Info -->
|
||
|
|
<div class="detail-card">
|
||
|
|
<div class="detail-header">
|
||
|
|
<h3>
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<circle cx="12" cy="12" r="10"></circle>
|
||
|
|
<line x1="12" y1="16" x2="12" y2="12"></line>
|
||
|
|
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
||
|
|
</svg>
|
||
|
|
System Information
|
||
|
|
</h3>
|
||
|
|
</div>
|
||
|
|
<div class="detail-content system-info"
|
||
|
|
hx-get="/api/monitoring/resources/system"
|
||
|
|
hx-trigger="load"
|
||
|
|
hx-swap="innerHTML">
|
||
|
|
<div class="info-row">
|
||
|
|
<span class="info-label">Hostname</span>
|
||
|
|
<span class="info-value">--</span>
|
||
|
|
</div>
|
||
|
|
<div class="info-row">
|
||
|
|
<span class="info-label">OS</span>
|
||
|
|
<span class="info-value">--</span>
|
||
|
|
</div>
|
||
|
|
<div class="info-row">
|
||
|
|
<span class="info-label">Kernel</span>
|
||
|
|
<span class="info-value">--</span>
|
||
|
|
</div>
|
||
|
|
<div class="info-row">
|
||
|
|
<span class="info-label">Uptime</span>
|
||
|
|
<span class="info-value">--</span>
|
||
|
|
</div>
|
||
|
|
<div class="info-row">
|
||
|
|
<span class="info-label">Load Average</span>
|
||
|
|
<span class="info-value">--</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.resources-container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Resource Cards */
|
||
|
|
.resource-cards {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-card {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
gap: 1rem;
|
||
|
|
padding: 1.25rem;
|
||
|
|
background: var(--surface);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: 12px;
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-card:hover {
|
||
|
|
border-color: var(--primary);
|
||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-icon {
|
||
|
|
width: 48px;
|
||
|
|
height: 48px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
background: var(--primary-light);
|
||
|
|
border-radius: 10px;
|
||
|
|
color: var(--primary);
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cpu-card .card-icon { color: var(--primary); background: var(--primary-light); }
|
||
|
|
.memory-card .card-icon { color: var(--success); background: rgba(34, 197, 94, 0.1); }
|
||
|
|
.disk-card .card-icon { color: var(--warning); background: rgba(245, 158, 11, 0.1); }
|
||
|
|
.network-card .card-icon { color: #8b5cf6; background: rgba(139, 92, 246, 0.1); }
|
||
|
|
|
||
|
|
.card-content {
|
||
|
|
flex: 1;
|
||
|
|
min-width: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-label {
|
||
|
|
display: block;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
margin-bottom: 0.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-value {
|
||
|
|
display: block;
|
||
|
|
font-size: 1.75rem;
|
||
|
|
font-weight: 700;
|
||
|
|
color: var(--text);
|
||
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-value.warning { color: var(--warning); }
|
||
|
|
.card-value.error { color: var(--error); }
|
||
|
|
|
||
|
|
.progress-bar {
|
||
|
|
height: 6px;
|
||
|
|
background: var(--bg);
|
||
|
|
border-radius: 3px;
|
||
|
|
overflow: hidden;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-fill {
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 3px;
|
||
|
|
transition: width 0.5s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-fill.cpu { background: var(--primary); }
|
||
|
|
.progress-fill.memory { background: var(--success); }
|
||
|
|
.progress-fill.disk { background: var(--warning); }
|
||
|
|
|
||
|
|
.card-detail {
|
||
|
|
font-size: 0.75rem;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.network-stats {
|
||
|
|
display: flex;
|
||
|
|
gap: 1rem;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.net-stat {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.25rem;
|
||
|
|
font-size: 0.8125rem;
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.net-stat:first-child svg { color: var(--success); }
|
||
|
|
.net-stat:last-child svg { color: var(--error); }
|
||
|
|
|
||
|
|
/* Charts Section */
|
||
|
|
.charts-section {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-card {
|
||
|
|
background: var(--surface);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: 12px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 1rem 1.25rem;
|
||
|
|
border-bottom: 1px solid var(--border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-header h3 {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
font-size: 0.9375rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-header h3 svg {
|
||
|
|
color: var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-legend {
|
||
|
|
display: flex;
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.375rem;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-color {
|
||
|
|
width: 10px;
|
||
|
|
height: 10px;
|
||
|
|
border-radius: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-color.cpu { background: var(--primary); }
|
||
|
|
.legend-color.system { background: var(--warning); }
|
||
|
|
.legend-color.io { background: var(--error); }
|
||
|
|
.legend-color.memory { background: var(--success); }
|
||
|
|
.legend-color.cached { background: #8b5cf6; }
|
||
|
|
.legend-color.buffers { background: var(--info); }
|
||
|
|
|
||
|
|
.chart-container {
|
||
|
|
padding: 1rem;
|
||
|
|
min-height: 180px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-placeholder {
|
||
|
|
position: relative;
|
||
|
|
height: 150px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sparkline-chart {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-axis-y {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-size: 0.625rem;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
padding: 0.25rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Detailed Section */
|
||
|
|
.detailed-section {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-card {
|
||
|
|
background: var(--surface);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: 12px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 1rem 1.25rem;
|
||
|
|
border-bottom: 1px solid var(--border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-header h3 {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
font-size: 0.9375rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-header h3 svg {
|
||
|
|
color: var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-header select {
|
||
|
|
background: var(--bg);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
color: var(--text);
|
||
|
|
padding: 0.375rem 0.625rem;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-header select:focus {
|
||
|
|
outline: none;
|
||
|
|
border-color: var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.refresh-btn {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 28px;
|
||
|
|
height: 28px;
|
||
|
|
background: transparent;
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: 4px;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refresh-btn:hover {
|
||
|
|
background: var(--surface-hover);
|
||
|
|
color: var(--primary);
|
||
|
|
border-color: var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-content {
|
||
|
|
padding: 1rem 1.25rem;
|
||
|
|
max-height: 300px;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Partition Rows */
|
||
|
|
.partition-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 0.75rem 0;
|
||
|
|
border-bottom: 1px solid var(--border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.partition-row:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.partition-info {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 0.125rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.partition-name {
|
||
|
|
font-size: 0.875rem;
|
||
|
|
font-weight: 500;
|
||
|
|
color: var(--text);
|
||
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
.partition-type {
|
||
|
|
font-size: 0.6875rem;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.partition-usage {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.75rem;
|
||
|
|
flex: 1;
|
||
|
|
max-width: 200px;
|
||
|
|
margin-left: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.usage-bar {
|
||
|
|
flex: 1;
|
||
|
|
height: 8px;
|
||
|
|
background: var(--bg);
|
||
|
|
border-radius: 4px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.usage-fill {
|
||
|
|
height: 100%;
|
||
|
|
background: var(--primary);
|
||
|
|
border-radius: 4px;
|
||
|
|
transition: width 0.5s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.usage-fill.warning { background: var(--warning); }
|
||
|
|
.usage-fill.error { background: var(--error); }
|
||
|
|
|
||
|
|
.usage-text {
|
||
|
|
font-size: 0.6875rem;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Process Table */
|
||
|
|
.process-table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
}
|
||
|
|
|
||
|
|
.process-table th,
|
||
|
|
.process-table td {
|
||
|
|
padding: 0.625rem 0.5rem;
|
||
|
|
text-align: left;
|
||
|
|
border-bottom: 1px solid var(--border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.process-table th {
|
||
|
|
font-size: 0.6875rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.process-table td {
|
||
|
|
font-size: 0.8125rem;
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.process-table td:first-child {
|
||
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.process-table td:nth-child(3),
|
||
|
|
.process-table td:nth-child(4) {
|
||
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
.process-table tr:last-child td {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loading-row {
|
||
|
|
text-align: center !important;
|
||
|
|
color: var(--text-secondary) !important;
|
||
|
|
padding: 2rem !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.process-status {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 0.125rem 0.375rem;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-size: 0.6875rem;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.process-status.running {
|
||
|
|
background: rgba(34, 197, 94, 0.1);
|
||
|
|
color: var(--success);
|
||
|
|
}
|
||
|
|
|
||
|
|
.process-status.sleeping {
|
||
|
|
background: var(--primary-light);
|
||
|
|
color: var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.process-status.stopped {
|
||
|
|
background: rgba(239, 68, 68, 0.1);
|
||
|
|
color: var(--error);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Network Interfaces */
|
||
|
|
.interface-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 0.75rem 0;
|
||
|
|
border-bottom: 1px solid var(--border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.interface-row:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.interface-info {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 0.125rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.interface-name {
|
||
|
|
font-size: 0.875rem;
|
||
|
|
font-weight: 500;
|
||
|
|
color: var(--text);
|
||
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
.interface-ip {
|
||
|
|
font-size: 0.6875rem;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.interface-stats {
|
||
|
|
display: flex;
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-in, .stat-out {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.25rem;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-in svg { color: var(--success); }
|
||
|
|
.stat-out svg { color: var(--error); }
|
||
|
|
|
||
|
|
/* System Info */
|
||
|
|
.system-info .info-row {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 0.625rem 0;
|
||
|
|
border-bottom: 1px solid var(--border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.system-info .info-row:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-label {
|
||
|
|
font-size: 0.8125rem;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-value {
|
||
|
|
font-size: 0.8125rem;
|
||
|
|
color: var(--text);
|
||
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive */
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.resource-cards {
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.charts-section {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-header {
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
gap: 0.75rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detailed-section {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.partition-usage {
|
||
|
|
max-width: 150px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 480px) {
|
||
|
|
.resource-cards {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-card {
|
||
|
|
flex-direction: column;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-icon {
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function refreshDiskInfo() {
|
||
|
|
htmx.trigger('#disk-partitions', 'refresh');
|
||
|
|
}
|
||
|
|
|
||
|
|
function sortProcesses(sortBy) {
|
||
|
|
const sortParam = `?sort=${sortBy}`;
|
||
|
|
htmx.ajax('GET', `/api/monitoring/resources/processes${sortParam}`, {
|
||
|
|
target: '#process-list',
|
||
|
|
swap: 'innerHTML'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Color-code usage based on percentage
|
||
|
|
function updateUsageColors() {
|
||
|
|
document.querySelectorAll('.card-value').forEach(el => {
|
||
|
|
const value = parseInt(el.textContent);
|
||
|
|
if (value >= 90) {
|
||
|
|
el.classList.add('error');
|
||
|
|
el.classList.remove('warning');
|
||
|
|
} else if (value >= 75) {
|
||
|
|
el.classList.add('warning');
|
||
|
|
el.classList.remove('error');
|
||
|
|
} else {
|
||
|
|
el.classList.remove('warning', 'error');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.querySelectorAll('.usage-fill, .progress-fill').forEach(el => {
|
||
|
|
const width = parseInt(el.style.width);
|
||
|
|
if (width >= 90) {
|
||
|
|
el.classList.add('error');
|
||
|
|
el.classList.remove('warning');
|
||
|
|
} else if (width >= 75) {
|
||
|
|
el.classList.add('warning');
|
||
|
|
el.classList.remove('error');
|
||
|
|
} else {
|
||
|
|
el.classList.remove('warning', 'error');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Run on HTMX swap
|
||
|
|
document.body.addEventListener('htmx:afterSwap', function(evt) {
|
||
|
|
if (evt.target.closest('.resources-container')) {
|
||
|
|
updateUsageColors();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Initial color update
|
||
|
|
document.addEventListener('DOMContentLoaded', updateUsageColors);
|
||
|
|
</script>
|