Reviewed-on: graham/towerops-web#85
This commit is contained in:
Graham McIntire 2026-03-19 13:51:02 -05:00 committed by graham
parent 07fe6e6932
commit 8dae83a592
4 changed files with 164 additions and 97 deletions

View file

@ -1,3 +1,36 @@
2026-03-19
ui: improve agent status display on device detail page
- Wrap agent name and icon inside the offline amber badge so it's clear what is offline
- Add "Agent:" label before the agent indicator in all states (cloud, online, offline)
Files: lib/towerops_web/live/device_live/show.html.heex
2026-03-19
fix: subscriber count pluralization ("1 sub" instead of "1 subs")
- Use ngettext in format_subscriber_count in device list and dashboard
- Dashboard impact column was showing "73s" (appended "s" to number) — now shows "73 subs"
Files: lib/towerops_web/live/device_live/index.ex,
lib/towerops_web/live/dashboard_live.ex,
lib/towerops_web/live/dashboard_live.html.heex
2026-03-19
fix: show ms unit for ping/http/tcp/dns check result values
- format_check_value now appends " ms" for latency-based check types
Files: lib/towerops_web/live/device_live/show.ex
2026-03-19
refactor: activity feed from vertical timeline to structured log table
- Replace left-anchored timeline with full-width table: TIME | TYPE | EVENT | DEVICE/SITE
- Colored left bar per row replaces timeline dot for severity
- Period group headers become table section rows
Files: lib/towerops_web/live/activity_feed_live.html.heex
2026-03-19
fix: pre-existing test failures
- TimeSeriesTest: switch to async: false to avoid TimescaleDB chunk creation deadlocks
- settings_live_test: property test now skips assertion when grapheme count < 2 (combining chars)
Files: test/towerops_web/graphql/resolvers/time_series_test.exs,
test/towerops_web/live/org/settings_live_test.exs
2026-03-17 2026-03-17
fix: DNS and ping checks not executing in production fix: DNS and ping checks not executing in production
- ensure_default_ping_check now calls schedule_check after creating the check - ensure_default_ping_check now calls schedule_check after creating the check

View file

@ -132,126 +132,152 @@
</span> </span>
</div> </div>
<%= for {period, period_items} <- @grouped_items do %> <div class="rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
<%!-- Time Period Header --%> <table class="w-full text-sm border-collapse">
<div class="sticky top-0 z-10 flex items-center gap-3 py-2 mb-2 mt-6 first:mt-0"> <thead>
<div class="h-px flex-1 bg-gray-200 dark:bg-gray-700"></div> <tr class="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/80">
<span class="flex-shrink-0 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-900 px-3 py-1 rounded-full"> <th class="w-1 p-0"></th>
{period} <th class="py-2 pl-3 pr-4 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 whitespace-nowrap w-28">
<span class="ml-1 text-gray-400 dark:text-gray-500 font-normal"> Time
({length(period_items)}) </th>
</span> <th class="py-2 px-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 w-28">
</span> Type
<div class="h-px flex-1 bg-gray-200 dark:bg-gray-700"></div> </th>
</div> <th class="py-2 px-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
Event
</th>
<th class="py-2 px-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 w-48">
Device / Site
</th>
<th class="w-8 p-0"></th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-100 dark:divide-gray-800">
<%= for {period, period_items} <- @grouped_items do %>
<%!-- Period group header row --%>
<tr class="bg-gray-50/80 dark:bg-gray-800/40">
<td colspan="6" class="px-4 py-1.5">
<span class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
{period}
</span>
<span class="ml-1.5 text-xs text-gray-400 dark:text-gray-500">
({length(period_items)})
</span>
</td>
</tr>
<div class="relative"> <%= for item <- period_items do %>
<%!-- Vertical timeline line --%> <tr
<div class="absolute left-5 top-0 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700"></div> id={item.id}
class={[
"group transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50",
item.severity == :critical && "bg-red-50/50 dark:bg-red-900/10"
]}
>
<%!-- Severity bar --%>
<td class="w-1 p-0">
<div class={[
"w-1 h-full min-h-[2.5rem]",
severity_dot_color(item.severity, item.type)
]}>
</div>
</td>
<div class="space-y-1"> <%!-- Time --%>
<%= for item <- period_items do %> <td
<div class="py-2.5 pl-3 pr-4 whitespace-nowrap align-top"
id={item.id} title={Calendar.strftime(item.timestamp, "%Y-%m-%d %H:%M:%S UTC")}
class={[ >
"relative flex items-start gap-4 pl-12 py-3 group rounded-lg transition-colors", <div class="flex items-center gap-1.5">
"hover:bg-gray-50 dark:hover:bg-gray-800/50", <.icon
item.severity == :critical && "bg-red-50/50 dark:bg-red-900/10" name={item.icon}
]} class={[
> "h-3.5 w-3.5 flex-shrink-0",
<%!-- Timeline dot --%> severity_icon_color(item.severity, item.type)
<div class={[ ]}
"absolute left-3.5 top-4 h-3 w-3 rounded-full border-2 border-white dark:border-gray-900 ring-2 ring-transparent group-hover:ring-gray-200 dark:group-hover:ring-gray-700 transition-all", />
severity_dot_color(item.severity, item.type) <span class="text-xs text-gray-500 dark:text-gray-400 tabular-nums">
]}> {relative_time(item.timestamp, @now)}
</div> </span>
</div>
</td>
<%!-- Content --%> <%!-- Type --%>
<div class="flex-1 min-w-0"> <td class="py-2.5 px-3 whitespace-nowrap align-top">
<div class="flex items-center gap-2 flex-wrap">
<.icon
name={item.icon}
class={[
"h-4 w-4 flex-shrink-0",
severity_icon_color(item.severity, item.type)
]}
/>
<span
class="text-xs text-gray-500 dark:text-gray-400 tabular-nums"
title={Calendar.strftime(item.timestamp, "%Y-%m-%d %H:%M:%S UTC")}
>
{relative_time(item.timestamp, @now)}
</span>
<span class={[ <span class={[
"inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium", "inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium",
type_badge_class(item.type) type_badge_class(item.type)
]}> ]}>
{type_label(item.type)} {type_label(item.type)}
</span> </span>
<%!-- Device/site link --%> </td>
<%!-- Event --%>
<td class="py-2.5 px-3 align-top">
<p class={[
"text-sm font-medium leading-snug",
severity_text_color(item.severity, item.type)
]}>
<%= if item.link do %>
<.link navigate={item.link} class="hover:underline">{item.summary}</.link>
<% else %>
{item.summary}
<% end %>
</p>
<p
:if={item.detail && item.detail != ""}
class="mt-0.5 text-xs text-gray-500 dark:text-gray-400 leading-snug"
>
{item.detail}
</p>
</td>
<%!-- Device / Site --%>
<td class="py-2.5 px-3 align-top">
<.link <.link
:if={item.device_name && item.link} :if={item.device_name && item.link}
navigate={item.link} navigate={item.link}
class="inline-flex items-center gap-1 text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300" class="inline-flex items-center gap-1 text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 leading-snug"
> >
<.icon name="hero-server-stack" class="h-3 w-3" /> <.icon name="hero-server-stack" class="h-3 w-3 flex-shrink-0" />
{item.device_name} {item.device_name}
</.link> </.link>
<span <span
:if={item.device_name && !item.link} :if={item.device_name && !item.link}
class="inline-flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400" class="inline-flex items-center gap-1 text-xs text-gray-600 dark:text-gray-300 leading-snug"
> >
<.icon name="hero-server-stack" class="h-3 w-3" /> <.icon name="hero-server-stack" class="h-3 w-3 flex-shrink-0" />
{item.device_name} {item.device_name}
</span> </span>
</div> <div
:if={item.site_name}
class="mt-0.5 inline-flex items-center gap-1 text-xs text-gray-400 dark:text-gray-500"
>
<.icon name="hero-map-pin" class="h-3 w-3 flex-shrink-0" />
{item.site_name}
</div>
</td>
<p class={[ <%!-- Link arrow --%>
"mt-0.5 text-sm font-medium", <td class="py-2.5 px-2 align-top">
severity_text_color(item.severity, item.type) <div
]}> :if={item.link}
<%= if item.link do %> class="opacity-0 group-hover:opacity-100 transition-opacity"
<.link navigate={item.link} class="hover:underline"> >
{item.summary} <.link
navigate={item.link}
class="text-gray-400 hover:text-blue-500 dark:text-gray-600 dark:hover:text-blue-400"
>
<.icon name="hero-arrow-right" class="h-4 w-4" />
</.link> </.link>
<% else %> </div>
{item.summary} </td>
<% end %> </tr>
</p> <% end %>
<p
:if={item.detail && item.detail != ""}
class="mt-0.5 text-xs text-gray-500 dark:text-gray-400"
>
{item.detail}
</p>
<div
:if={item.site_name}
class="mt-0.5 inline-flex items-center gap-1 text-xs text-gray-400 dark:text-gray-500"
>
<.icon name="hero-map-pin" class="h-3 w-3" />
{item.site_name}
</div>
</div>
<%!-- Link arrow --%>
<div
:if={item.link}
class="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
>
<.link
navigate={item.link}
class="text-gray-400 hover:text-blue-500 dark:text-gray-600 dark:hover:text-blue-400"
>
<.icon name="hero-arrow-right" class="h-4 w-4" />
</.link>
</div>
</div>
<% end %> <% end %>
</div> </tbody>
</div> </table>
<% end %> </div>
<%!-- Load More --%> <%!-- Load More --%>
<div :if={@has_more} class="mt-6 text-center"> <div :if={@has_more} class="mt-6 text-center">

View file

@ -1805,6 +1805,7 @@ defmodule ToweropsWeb.DeviceLive.Show do
"snmp_sensor" -> format_check_sensor_value(value, check.config) "snmp_sensor" -> format_check_sensor_value(value, check.config)
"snmp_processor" -> "#{Float.round(value, 1)}%" "snmp_processor" -> "#{Float.round(value, 1)}%"
"snmp_storage" -> "#{Float.round(value, 1)}%" "snmp_storage" -> "#{Float.round(value, 1)}%"
t when t in ["ping", "http", "tcp", "dns"] -> "#{Float.round(value, 2)} ms"
_ -> value |> Float.round(2) |> to_string() _ -> value |> Float.round(2) |> to_string()
end end
end end

View file

@ -1,3 +1,10 @@
2026-03-19 — UI Improvements
* Agent offline status on device pages is now clearly labeled with the agent name inside the badge
* Subscriber counts now correctly show "1 sub" (singular) instead of "1 subs"
* Dashboard outage impact column now shows subscriber counts instead of a value that looked like seconds
* Check result values for ping and service checks now display with their unit (ms)
* Activity feed redesigned as a structured log table for easier scanning across the full display
2026-03-17 — Check Execution Fixes 2026-03-17 — Check Execution Fixes
* Fixed DNS and ping checks not executing in production * Fixed DNS and ping checks not executing in production
* Ping checks now automatically schedule when created for new devices * Ping checks now automatically schedule when created for new devices