69 lines
2.2 KiB
HTML
69 lines
2.2 KiB
HTML
{{define "hx_monitoring"}}
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{{range .Groups}}
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-semibold">{{.Title}}</h2>
|
|
<button hx-get="/hx/monitoring/group?group={{.Title}}"
|
|
hx-target="closest .bg-white"
|
|
hx-swap="outerHTML"
|
|
class="text-blue-600 hover:text-blue-800 text-sm">
|
|
🔄 Refresh
|
|
</button>
|
|
</div>
|
|
|
|
{{if .Errors}}
|
|
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4">
|
|
<div class="flex">
|
|
<div class="ml-3">
|
|
<p class="text-sm text-yellow-700">
|
|
<strong>Warnings:</strong>
|
|
<ul class="list-disc list-inside mt-1">
|
|
{{range .Errors}}
|
|
<li>{{.}}</li>
|
|
{{end}}
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
<div class="space-y-3">
|
|
{{range .Metrics}}
|
|
<div class="flex justify-between items-center p-3 {{if eq .Status "error"}}bg-red-50{{else if eq .Status "warning"}}bg-yellow-50{{else}}bg-gray-50{{end}} rounded">
|
|
<div class="flex-1">
|
|
<div class="font-medium text-sm">{{.Name}}</div>
|
|
<div class="text-xs text-gray-500 mt-1">{{.Timestamp.Format "15:04:05"}}</div>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-lg font-semibold">{{.Value}}</span>
|
|
{{if eq .Status "error"}}
|
|
<span class="text-red-600">⚠️</span>
|
|
{{else if eq .Status "warning"}}
|
|
<span class="text-yellow-600">⚡</span>
|
|
{{else}}
|
|
<span class="text-green-600">✓</span>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<div class="text-center text-gray-500 py-4">No metrics available</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<div class="col-span-2 bg-yellow-50 border-l-4 border-yellow-400 p-4">
|
|
<div class="flex">
|
|
<div class="ml-3">
|
|
<p class="text-sm text-yellow-700">
|
|
<strong>Warning:</strong> No monitoring data available. Some collectors may have failed.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
|