ux: replace stale refresh buttons with live indicator on real-time pages

lib/towerops_web/live/dashboard_live.ex

@@ -43,12 +43,6 @@ defmodule ToweropsWeb.DashboardLive do
      |> load_dashboard_data(organization.id)}
   end
 
-  @impl true
-  def handle_event("refresh_dashboard", _params, socket) do
-    organization = socket.assigns.current_scope.organization
-    {:noreply, load_dashboard_data(socket, organization.id)}
-  end
-
   @impl true
   def handle_event("dismiss_insight", %{"id" => insight_id}, socket) do
     case Preseem.dismiss_insight(insight_id) do
@@ -155,7 +149,6 @@ defmodule ToweropsWeb.DashboardLive do
     |> assign(:site_impact_summaries, site_impact_summaries)
     |> assign(:uptime_percentage, uptime_percentage)
     |> assign(:recent_activity, recent_activity)
-    |> assign(:last_updated, DateTime.utc_now())
     |> assign(:favicon_status, favicon_status(Map.get(status_counts, :down, 0), length(active_alerts)))
     |> load_insights(organization_id)
     |> load_recent_config_changes(organization_id)

lib/towerops_web/live/dashboard_live.html.heex

@@ -17,21 +17,14 @@
         NOC
       </span>
     </div>
-    <%= if assigns[:last_updated] do %>
-      <div class="flex items-center gap-2 text-xs text-gray-400 dark:text-gray-500 dark:text-gray-400 font-mono">
-        <span title="Last refresh">
-          {ToweropsWeb.TimeHelpers.format_time_ago(@last_updated)}
+    <div class="flex items-center gap-1.5 text-xs text-gray-400 dark:text-gray-500 font-mono">
+      <span class="relative flex h-2 w-2">
+        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75">
         </span>
-        <button
-          type="button"
-          phx-click="refresh_dashboard"
-          class="p-1 rounded hover:bg-gray-100 dark:hover:bg-white/10 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition"
-          title="Refresh (R)"
-        >
-          <.icon name="hero-arrow-path" class="h-3.5 w-3.5" />
-        </button>
-      </div>
-    <% end %>
+        <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+      </span>
+      <span>Live</span>
+    </div>
   </div>
 
   <%= if !assigns[:summary] do %>

lib/towerops_web/live/network_map_live.ex

@@ -60,17 +60,6 @@ defmodule ToweropsWeb.NetworkMapLive do
     {:noreply, socket}
   end
 
-  @impl true
-  def handle_event("refresh_topology", _params, socket) do
-    organization = socket.assigns.current_scope.organization
-
-    {:noreply,
-     socket
-     |> assign(:loading, true)
-     |> load_topology_data(organization.id, socket.assigns.active_tab)
-     |> put_flash(:info, t("Network map refreshed"))}
-  end
-
   @impl true
   def handle_event("node_clicked", %{"node_id" => node_id} = params, socket) do
     organization = socket.assigns.current_scope.organization

lib/towerops_web/live/network_map_live.html.heex

@@ -12,9 +12,14 @@
     </span>
     <:subtitle>{t("Visual topology of your network infrastructure")}</:subtitle>
     <:actions>
-      <.button phx-click="refresh_topology" disabled={@loading}>
-        <.icon name="hero-arrow-path" class="h-5 w-5" /> Refresh
-      </.button>
+      <div class="flex items-center gap-1.5 text-xs text-gray-400 dark:text-gray-500 font-mono">
+        <span class="relative flex h-2 w-2">
+          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75">
+          </span>
+          <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+        </span>
+        <span>Live</span>
+      </div>
     </:actions>
   </.header>