feat: build comprehensive health metrics panel with success rates

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Graham McIntire 2026-02-06 18:34:43 -06:00 committed by Graham McIntire
parent 1e45b1609b
commit 8bceb6dce2
No known key found for this signature in database
2 changed files with 107 additions and 6 deletions

View file

@ -31,6 +31,7 @@ defmodule ToweropsWeb.Admin.MonitoringLive do
|> assign(:failed_jobs, [])
|> assign(:failed_jobs_count, 0)
|> assign(:recent_jobs, [])
|> assign(:metrics, %{})
|> assign(:health_metrics, %{})
|> load_monitoring_data()
@ -75,6 +76,7 @@ defmodule ToweropsWeb.Admin.MonitoringLive do
|> assign(:failed_jobs, failed_jobs)
|> assign(:failed_jobs_count, length(failed_jobs))
|> assign(:recent_jobs, recent_jobs)
|> assign(:metrics, metrics)
|> assign(:health_metrics, metrics)
end

View file

@ -160,13 +160,112 @@
<% end %>
<!-- Health Metrics -->
<div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
<div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Health Metrics</h2>
<div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-4">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
Health Metrics
</h2>
<!-- Current Activity -->
<div class="mb-6">
<h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
Current Activity
</h3>
<div class="grid grid-cols-2 gap-3">
<div class="bg-gray-50 dark:bg-gray-800 rounded p-3">
<p class="text-xs text-gray-600 dark:text-gray-400">Executing</p>
<p class="text-2xl font-bold text-gray-900 dark:text-white">
{@metrics.executing_count}
</p>
</div>
<div class="bg-gray-50 dark:bg-gray-800 rounded p-3">
<p class="text-xs text-gray-600 dark:text-gray-400">Queued</p>
<p class="text-2xl font-bold text-gray-900 dark:text-white">
{@metrics.queued_count}
</p>
</div>
<div class="bg-gray-50 dark:bg-gray-800 rounded p-3">
<p class="text-xs text-gray-600 dark:text-gray-400">Completed (1h)</p>
<p class="text-2xl font-bold text-green-600 dark:text-green-400">
{@metrics.completed_last_hour}
</p>
</div>
<div class="bg-gray-50 dark:bg-gray-800 rounded p-3">
<p class="text-xs text-gray-600 dark:text-gray-400">Failed (1h)</p>
<p class="text-2xl font-bold text-red-600 dark:text-red-400">
{@metrics.failed_last_hour}
</p>
</div>
</div>
</div>
<div class="p-4">
<p class="text-sm text-gray-600 dark:text-gray-400">
Detailed metrics coming soon
<!-- Success Rates -->
<div class="mb-6">
<h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
Success Rates
</h3>
<div class="space-y-3">
<div>
<div class="flex justify-between text-xs mb-1">
<span class="text-gray-600 dark:text-gray-400">Polling (1h)</span>
<span class="font-medium text-gray-900 dark:text-white">
<%= Float.round(@metrics.polling_success_rate_1h * 100, 1) %>%
</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div
class={"bg-green-600 h-2 rounded-full transition-all"}
style={"width: #{@metrics.polling_success_rate_1h * 100}%"}
>
</div>
</div>
</div>
<div>
<div class="flex justify-between text-xs mb-1">
<span class="text-gray-600 dark:text-gray-400">Discovery (1h)</span>
<span class="font-medium text-gray-900 dark:text-white">
<%= Float.round(@metrics.discovery_success_rate_1h * 100, 1) %>%
</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div
class={"bg-blue-600 h-2 rounded-full transition-all"}
style={"width: #{@metrics.discovery_success_rate_1h * 100}%"}
>
</div>
</div>
</div>
</div>
</div>
<!-- Performance -->
<div>
<h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
Performance
</h3>
<dl class="space-y-2 text-sm">
<div class="flex justify-between">
<dt class="text-gray-600 dark:text-gray-400">Avg Execution Time</dt>
<dd class="font-medium text-gray-900 dark:text-white">
<%= if @metrics.avg_execution_time_seconds do %>
<%= Float.round(@metrics.avg_execution_time_seconds, 1) %>s
<% else %>
N/A
<% end %>
</dd>
</div>
<div class="flex justify-between">
<dt class="text-gray-600 dark:text-gray-400">Jobs/Hour</dt>
<dd class="font-medium text-gray-900 dark:text-white">
{@metrics.completed_last_hour}
</dd>
</div>
</dl>
</div>
<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
<p class="text-xs text-gray-500 dark:text-gray-500">
Updates every 10 seconds
</p>
</div>
</div>