graham/towerops
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ux: improve navigation, tooltips, and discoverability across pages

Browse source 
- Replace "Back to X" links with proper breadcrumb trails on settings,
  integrations, Gaiia, and Preseem pages
- Fix active_page on config-timeline routes so Devices nav highlights
- Add title tooltip to truncated alert messages (hover to see full text)
- Add tooltips to QoE column header explaining the metric
- Add tooltips to Subs/MRR labels on dashboard status bar
This commit is contained in:
Graham McIntire 2026-03-12 13:40:10 -05:00
parent b69b088d0f
commit ecc69b4e96
No known key found for this signature in database
9 changed files with 46 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
lib/towerops_web/live/alert_live/index.html.heex
View file

@ -318,7 +318,10 @@
</td>
<%!-- Message --%>
<td class="px-3 py-2 text-xs text-gray-600 dark:text-gray-400 max-w-xs truncate">
<td
class="px-3 py-2 text-xs text-gray-600 dark:text-gray-400 max-w-xs truncate"
title={alert.message}
>
{alert.message || "—"}
</td>

2
lib/towerops_web/live/config_timeline_live.ex
View file

@ -27,7 +27,7 @@ defmodule ToweropsWeb.ConfigTimelineLive do
case AccessControl.verify_device_access(device_id, organization.id) do
{:ok, _} ->
device = Devices.get_device!(device_id)
{:ok, assign(socket, device: device, page_title: "Config Timeline — #{device.name}")}
{:ok, assign(socket, device: device, page_title: "Config Timeline — #{device.name}", active_page: "devices")}
{:error, _} ->
{:ok,

10
lib/towerops_web/live/dashboard_live.html.heex
View file

@ -209,7 +209,10 @@
<%= if @has_subscribers do %>
<span class="hidden text-gray-300 dark:text-gray-600 sm:inline">│</span>
<div class="flex items-center gap-1.5 px-2.5 py-1.5">
<span class="text-gray-500 dark:text-gray-400 text-[10px] uppercase font-sans font-medium">
<span
class="text-gray-500 dark:text-gray-400 text-[10px] uppercase font-sans font-medium"
title="Subscribers"
>
Subs
</span>
<span class="font-bold text-sm text-gray-900 dark:text-white">
@ -217,7 +220,10 @@
</span>
<%!-- Financial data: role-gated --%>
<%= if @can_view_financials do %>
<span class="text-gray-400 dark:text-gray-500 dark:text-gray-400">
<span
class="text-gray-400 dark:text-gray-500 dark:text-gray-400"
title="Monthly Recurring Revenue"
>
{format_mrr(@summary.subscribers.total_mrr)}/mo
</span>
<% end %>

14
lib/towerops_web/live/org/gaiia_mapping_live.html.heex
View file

@ -3,14 +3,12 @@
current_scope={@current_scope}
>
<div class="border-b border-gray-200 pb-5 dark:border-white/5">
<div class="mb-4">
<.link
navigate={~p"/orgs/#{@organization.slug}/settings/integrations"}
class="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
>
<.icon name="hero-arrow-left" class="h-4 w-4" /> Back to Integrations
</.link>
</div>
<.breadcrumb items={[
%{label: "Dashboard", navigate: ~p"/dashboard"},
%{label: "Settings", navigate: ~p"/orgs/#{@organization.slug}/settings"},
%{label: "Integrations", navigate: ~p"/orgs/#{@organization.slug}/settings/integrations"},
%{label: "Gaiia"}
]} />
<h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
{t("Link Devices & Sites to Gaiia")}
</h1>

7
lib/towerops_web/live/org/gaiia_reconciliation_live.html.heex
View file

@ -3,6 +3,13 @@
current_scope={@current_scope}
active_page="settings"
>
<.breadcrumb items={[
%{label: "Dashboard", navigate: ~p"/dashboard"},
%{label: "Settings", navigate: ~p"/orgs/#{@organization.slug}/settings"},
%{label: "Integrations", navigate: ~p"/orgs/#{@organization.slug}/settings/integrations"},
%{label: "Gaiia"}
]} />
<.header>
{t("Gaiia Inventory Reconciliation")}
<:subtitle>

14
lib/towerops_web/live/org/preseem_devices_live.html.heex
View file

@ -3,14 +3,12 @@
current_scope={@current_scope}
>
<div class="border-b border-gray-200 pb-5 dark:border-white/5">
<div class="mb-4">
<.link
navigate={~p"/orgs/#{@organization.slug}/settings/integrations"}
class="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
>
<.icon name="hero-arrow-left" class="h-4 w-4" /> Back to Integrations
</.link>
</div>
<.breadcrumb items={[
%{label: "Dashboard", navigate: ~p"/dashboard"},
%{label: "Settings", navigate: ~p"/orgs/#{@organization.slug}/settings"},
%{label: "Integrations", navigate: ~p"/orgs/#{@organization.slug}/settings/integrations"},
%{label: "Preseem"}
]} />
<h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
{t("Preseem Devices")}
</h1>

14
lib/towerops_web/live/org/preseem_insights_live.html.heex
View file

@ -3,14 +3,12 @@
current_scope={@current_scope}
>
<div class="border-b border-gray-200 pb-5 dark:border-white/5">
<div class="mb-4">
<.link
navigate={~p"/orgs/#{@organization.slug}/settings/integrations"}
class="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
>
<.icon name="hero-arrow-left" class="h-4 w-4" /> Back to Integrations
</.link>
</div>
<.breadcrumb items={[
%{label: "Dashboard", navigate: ~p"/dashboard"},
%{label: "Settings", navigate: ~p"/orgs/#{@organization.slug}/settings"},
%{label: "Integrations", navigate: ~p"/orgs/#{@organization.slug}/settings/integrations"},
%{label: "Preseem"}
]} />
<div class="flex items-center justify-between">
<div>
<h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">

12
lib/towerops_web/live/org/settings_live.html.heex
View file

@ -3,14 +3,10 @@
current_scope={@current_scope}
>
<div class="pb-5">
<div class="mb-4">
<.link
navigate={~p"/dashboard"}
class="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
>
<.icon name="hero-arrow-left" class="h-4 w-4" /> Back to Dashboard
</.link>
</div>
<.breadcrumb items={[
%{label: "Dashboard", navigate: ~p"/dashboard"},
%{label: "Settings"}
]} />
<h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
{t("Organization Settings")}
</h1>

5
lib/towerops_web/live/site_live/index.html.heex
View file

@ -50,7 +50,10 @@
<th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
{t("Down")}
</th>
<th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
<th
class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"
title={t("Quality of Experience — Preseem network quality score (0–100)")}
>
{t("QoE")}
</th>
<th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">