Display LV event duration (#44)

* Display LV event duration

* Fix unused args names

* Rename args to keep the same pattern

* Display latest_event when available

lib/phoenix_profiler/live_view_listener.ex

@@ -69,17 +69,32 @@ defmodule PhoenixProfiler.LiveViewListener do
 
   def handle_info({:telemetry, [:phoenix, :live_view | _] = event, measurements, metadata}, state) do
     [_, _, stage, action] = event
-    state = check_navigation(state, metadata.socket)
-    handle_lifecycle(stage, action, measurements, metadata, state)
+
+    state =
+      state
+      |> check_navigation(metadata.socket)
+      |> handle_lifecycle(stage, action, measurements, metadata)
+      |> handle_event_duration(stage, action, measurements)
+
+    {:noreply, state}
   end
 
-  defp handle_lifecycle(_stage, :exception, _measurements, metadata, state) do
+  defp handle_lifecycle(state, _stage, :exception, _measurements, metadata) do
     notify_exception(state.parent, metadata)
-    {:noreply, state}
+    state
   end
 
-  defp handle_lifecycle(_stage, _action, _measurements, _metadata, state) do
-    {:noreply, state}
+  defp handle_lifecycle(state, _stage, _action, _measurements, _metadata) do
+    state
+  end
+
+  defp handle_event_duration(state, :handle_event, :stop, %{duration: duration}) do
+    notify_event_duration(state.parent, duration)
+    state
+  end
+
+  defp handle_event_duration(state, _stage, _action, _measurements) do
+    state
   end
 
   @impl true
@@ -153,4 +168,8 @@ defmodule PhoenixProfiler.LiveViewListener do
 
     send(pid, {:navigation, view})
   end
+
+  defp notify_event_duration(pid, duration) do
+    send(pid, {:event_duration, duration})
+  end
 end

lib/phoenix_profiler/toolbar/toolbar_live.ex

@@ -2,6 +2,7 @@ defmodule PhoenixProfiler.ToolbarLive do
   # The LiveView for the Web Debug Toolbar
   @moduledoc false
   use Phoenix.LiveView, container: {:div, [class: "phxprof-toolbar-view"]}
+  require Logger
   alias PhoenixProfiler.LiveViewListener
   alias PhoenixProfiler.Profiler
   alias PhoenixProfiler.Routes
@@ -67,7 +68,8 @@ defmodule PhoenixProfiler.ToolbarLive do
     |> apply_request(profile)
     |> assign(:durations, %{
       total: duration(metrics.total_duration),
-      endpoint: duration(metrics.endpoint_duration)
+      endpoint: duration(metrics.endpoint_duration),
+      latest_event: nil
     })
     |> assign(:memory, memory(metrics.memory))
   end
@@ -142,8 +144,13 @@ defmodule PhoenixProfiler.ToolbarLive do
     {:noreply, update_view(socket, view)}
   end
 
+  def handle_info({:event_duration, duration}, socket) do
+    socket = update(socket, :durations, &%{&1 | latest_event: duration(duration)})
+    {:noreply, socket}
+  end
+
   def handle_info(other, socket) do
-    IO.inspect(other, label: "ToolbarLive received an unknown message")
+    Logger.debug("ToolbarLive received an unknown message: #{inspect(other)}")
     {:noreply, socket}
   end
 
@@ -159,4 +166,10 @@ defmodule PhoenixProfiler.ToolbarLive do
      |> update(:exits, &[exception | &1])
      |> update(:exits_count, &(&1 + 1))}
   end
+
+  defp current_duration(durations) do
+    if event = durations.latest_event,
+      do: {event.value, event.label},
+      else: {durations.total.value, durations.total.label}
+  end
 end

lib/phoenix_profiler/toolbar/toolbar_live.html.leex

@@ -40,8 +40,9 @@
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
         <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
       </svg>
-      <span class="phxprof-toolbar-value"><%= @durations.total.value %></span>
-      <span class="phxprof-toolbar-label"><%= @durations.total.label %></span>
+      <% {value, label} = current_duration(@durations) %>
+      <span class="phxprof-toolbar-value"><%= value %></span>
+      <span class="phxprof-toolbar-label"><%= label %></span>
     </div>
     <div class="phxprof-toolbar-info">
       <div class="phxprof-toolbar-info-item">
@@ -51,6 +52,10 @@
       <div class="phxprof-toolbar-info-item">
         <b>Endpoint Duration</b>
         <span><%= @durations.endpoint.value %> <%= @durations.endpoint.label %></span>
+      </div><% end %><%= if @durations.latest_event do %>
+      <div class="phxprof-toolbar-info-item">
+        <b>Latest Event Duration</b>
+        <span><%= @durations.latest_event.value %><%= @durations.latest_event.label %></span>
       </div><% end %>
     </div>
   </div><% end %><%= if @memory do %>