feat: build comprehensive health metrics panel with success rates
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
1e45b1609b
commit
8bceb6dce2
2 changed files with 107 additions and 6 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue