Enhancement: Add module in label for global traces (#494)

* use slot in stream component

* use module name in trace label

* add test for module name

Author: GuzekAlan

lib/live_debugger_web/live/traces/components/stream.ex

@@ -1,26 +1,21 @@
 defmodule LiveDebuggerWeb.Live.Traces.Components.Stream do
   @moduledoc """
   This component is used to display the traces stream.
-  It uses under the hood the `Trace` component to display the traces.
-  The `Trace` component produces the `toggle-collapsible` and `trace-fullscreen` which are handled in the `Trace` component hook.
+  It allows to compose style for the trace using `LiveDebuggerWeb.Live.Traces.Components.Trace` components.
   """
 
   use LiveDebuggerWeb, :hook_component
 
-  alias LiveDebuggerWeb.Live.Traces.Components.Trace
-
   @required_assigns [:id, :existing_traces_status]
 
   @doc """
   Initializes the component by attaching the hook to the socket.
-  Since the `Trace` component is used by this component, we need to attach the hook to the socket.
   """
   @spec init(Phoenix.LiveView.Socket.t()) :: Phoenix.LiveView.Socket.t()
   def init(socket) do
     socket
     |> check_assigns!(@required_assigns)
     |> check_stream!(:existing_traces)
-    |> Trace.init()
     |> register_hook(:traces_stream)
   end
 
@@ -33,6 +28,8 @@ defmodule LiveDebuggerWeb.Live.Traces.Components.Stream do
   attr(:existing_traces_status, :atom, required: true)
   attr(:existing_traces, :any, required: true)
 
+  slot(:trace, required: true, doc: "Used for styling trace element. Remember to add `id`")
+
   def traces_stream(assigns) do
     ~H"""
     <div id={"#{@id}-stream"} phx-update="stream" class="flex flex-col gap-2">
@@ -56,7 +53,7 @@ defmodule LiveDebuggerWeb.Live.Traces.Components.Stream do
         <%= if wrapped_trace.id == "separator" do %>
           <.separator id={dom_id} />
         <% else %>
-          <Trace.trace id={dom_id} wrapped_trace={wrapped_trace} />
+          <%= render_slot(@trace, {dom_id, wrapped_trace}) %>
         <% end %>
       <% end %>
     </div>

lib/live_debugger_web/live/traces/components/trace.ex

@@ -37,6 +37,10 @@ defmodule LiveDebuggerWeb.Live.Traces.Components.Trace do
   attr(:id, :string, required: true)
   attr(:wrapped_trace, :map, required: true, doc: "The Trace to render")
 
+  slot :label, required: true do
+    attr(:class, :string, doc: "Additional class for label")
+  end
+
   def trace(assigns) do
     assigns =
       assigns
@@ -51,15 +55,17 @@ defmodule LiveDebuggerWeb.Live.Traces.Components.Trace do
       icon="icon-chevron-right"
       chevron_class="w-5 h-5 text-accent-icon"
       class="max-w-full border border-default-border rounded last:mb-4"
-      label_class="font-semibold bg-surface-1-bg h-10 p-2"
+      label_class="font-semibold bg-surface-1-bg p-2 py-3"
       phx-click={if(@render_body?, do: nil, else: "toggle-collapsible")}
       phx-value-trace-id={@trace.id}
     >
       <:label>
-        <div id={@id <> "-label"} class="w-[90%] grow flex items-center ml-2 gap-3">
-          <p class="font-medium text-sm"><%= @callback_name %></p>
-          <.short_trace_content trace={@trace} />
-          <.trace_time_info id={@id} trace={@trace} from_tracing?={@from_tracing?} />
+        <div
+          :for={label <- @label}
+          id={@id <> "-label"}
+          class={["w-[90%] grow grid items-center gap-x-3 ml-2" | List.wrap(label[:class])]}
+        >
+          <%= render_slot(@label, assigns) %>
         </div>
       </:label>
       <div class="relative">
@@ -85,9 +91,29 @@ defmodule LiveDebuggerWeb.Live.Traces.Components.Trace do
     """
   end
 
+  attr(:trace, Trace, required: true)
+  attr(:class, :string, default: "")
+
+  def module(assigns) do
+    ~H"""
+    <div class={["text-primary text-2xs font-normal truncate", @class]}>
+      <%= Parsers.module_to_string(@trace.module) %>
+      <%= if(@trace.cid, do: "(#{@trace.cid})") %>
+    </div>
+    """
+  end
+
+  attr(:content, :string, required: true)
+
+  def callback_name(assigns) do
+    ~H"""
+    <p class="font-medium text-sm"><%= @content %></p>
+    """
+  end
+
   attr(:trace, :map, default: nil)
 
-  defp short_trace_content(assigns) do
+  def short_trace_content(assigns) do
     assigns = assign(assigns, :content, Enum.map_join(assigns.trace.args, " ", &inspect/1))
 
     ~H"""
@@ -101,7 +127,7 @@ defmodule LiveDebuggerWeb.Live.Traces.Components.Trace do
   attr(:trace, :map, default: nil)
   attr(:from_tracing?, :boolean, default: false)
 
-  defp trace_time_info(assigns) do
+  def trace_time_info(assigns) do
     ~H"""
     <div class="flex text-xs font-normal text-secondary-text align-center">
       <.tooltip id={@id <> "-timestamp"} content="timestamp" class="min-w-24">

lib/live_debugger_web/live/traces/node_traces_live.ex

@@ -68,6 +68,7 @@ defmodule LiveDebuggerWeb.Live.Traces.NodeTracesLive do
     |> Helpers.assign_current_filters()
     |> Components.ClearButton.init()
     |> Components.LoadMoreButton.init(@page_size)
+    |> Components.Trace.init()
     |> Components.Stream.init()
     |> Hooks.TracingFuse.init()
     |> Hooks.ExistingTraces.init(@page_size)
@@ -111,7 +112,21 @@ defmodule LiveDebuggerWeb.Live.Traces.NodeTracesLive do
             id={@id}
             existing_traces_status={@existing_traces_status}
             existing_traces={@streams.existing_traces}
-          />
+          >
+            <:trace :let={{id, wrapped_trace}}>
+              <Components.Trace.trace id={id} wrapped_trace={wrapped_trace}>
+                <:label :let={trace_assigns} class="grid-cols-[auto_1fr_auto]">
+                  <Components.Trace.callback_name content={trace_assigns.callback_name} />
+                  <Components.Trace.short_trace_content trace={trace_assigns.trace} />
+                  <Components.Trace.trace_time_info
+                    id={trace_assigns.id}
+                    trace={trace_assigns.trace}
+                    from_tracing?={trace_assigns.from_tracing?}
+                  />
+                </:label>
+              </Components.Trace.trace>
+            </:trace>
+          </Components.Stream.traces_stream>
           <Components.LoadMoreButton.load_more_button
             :if={not @tracing_started? and not @traces_empty?}
             traces_continuation={@traces_continuation}

lib/live_debugger_web/live/traces/process_traces_live.ex

@@ -55,6 +55,7 @@ defmodule LiveDebuggerWeb.Live.Traces.ProcessTracesLive do
     |> Components.RefreshButton.init()
     |> Components.ClearButton.init()
     |> Components.ToggleTracingButton.init()
+    |> Components.Trace.init()
     |> Components.Stream.init()
     |> ok()
   end
@@ -83,7 +84,22 @@ defmodule LiveDebuggerWeb.Live.Traces.ProcessTracesLive do
               id={@id}
               existing_traces_status={@existing_traces_status}
               existing_traces={@streams.existing_traces}
-            />
+            >
+              <:trace :let={{id, wrapped_trace}}>
+                <Components.Trace.trace id={id} wrapped_trace={wrapped_trace}>
+                  <:label :let={trace_assigns} class="grid-cols-[auto_1fr_auto]">
+                    <Components.Trace.module trace={trace_assigns.trace} class="col-span-3" />
+                    <Components.Trace.callback_name content={trace_assigns.callback_name} />
+                    <Components.Trace.short_trace_content trace={trace_assigns.trace} />
+                    <Components.Trace.trace_time_info
+                      id={trace_assigns.id}
+                      trace={trace_assigns.trace}
+                      from_tracing?={trace_assigns.from_tracing?}
+                    />
+                  </:label>
+                </Components.Trace.trace>
+              </:trace>
+            </Components.Stream.traces_stream>
             <Components.LoadMoreButton.load_more_button
               :if={not @tracing_started? and not @traces_empty?}
               traces_continuation={@traces_continuation}

test/live_debugger/process_callback_traces_test.exs

@@ -34,6 +34,8 @@ defmodule LiveDebugger.ProcessCallbackTracesTest do
     |> assert_has(trace_name(text: "handle_event/3", count: 1))
     |> assert_has(trace_name(text: "handle_info/2", count: 1))
     |> assert_has(trace_name(text: "render/1", count: 1))
+    |> assert_has(trace_module(text: "LiveDebuggerDev.LiveViews.Main", count: 2))
+    |> assert_has(trace_module(text: "LiveDebuggerDev.LiveComponents.Send (4)", count: 1))
     |> click(clear_traces_button())
     |> assert_has(traces(count: 0))
     |> assert_has(no_traces_info())
@@ -54,5 +56,7 @@ defmodule LiveDebugger.ProcessCallbackTracesTest do
 
   defp trace_name(opts), do: css("#global-traces-stream details p.font-medium", opts)
 
+  defp trace_module(opts), do: css("#global-traces-stream details div.col-span-3", opts)
+
   defp global_callback_traces_button(), do: css("button[aria-label=\"Icon globe\"]")
 end