51 lines
1.7 KiB
HTML
51 lines
1.7 KiB
HTML
{{define "content"}}
|
|
<h2>System Monitor</h2>
|
|
|
|
<div class="stats-grid" id="monitorStats">
|
|
<div class="stat-card">
|
|
<h3>CPU</h3>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="cpuBar" style="width: {{printf "%.0f" .Data.CPU}}%"></div>
|
|
</div>
|
|
<p id="cpuText">{{printf "%.1f" .Data.CPU}}%</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Memory</h3>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="memBar" style="width: {{printf "%.0f" .Data.MemPercent}}%"></div>
|
|
</div>
|
|
<p id="memText">{{.Data.MemUsed}} / {{.Data.MemTotal}} ({{printf "%.1f" .Data.MemPercent}}%)</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Disk</h3>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="diskBar" style="width: {{printf "%.0f" .Data.DiskPercent}}%"></div>
|
|
</div>
|
|
<p id="diskText">{{.Data.DiskUsed}} / {{.Data.DiskTotal}} ({{printf "%.1f" .Data.DiskPercent}}%)</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Network</h3>
|
|
<p><strong>In:</strong> <span id="netIn">{{.Data.NetIn}}</span></p>
|
|
<p><strong>Out:</strong> <span id="netOut">{{.Data.NetOut}}</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Processes (Top 10)</h3>
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr><th>PID</th><th>Name</th><th>CPU %</th><th>Mem %</th><th>User</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range .Data.Processes}}
|
|
<tr>
|
|
<td>{{.PID}}</td>
|
|
<td>{{.Name}}</td>
|
|
<td>{{printf "%.1f" .CPU}}</td>
|
|
<td>{{printf "%.1f" .Mem}}</td>
|
|
<td>{{.User}}</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
{{end}}
|