Current section
Files
Jump to
Current section
Files
lib/live_debugger_web/live/traces/components/stream.ex
defmodule LiveDebuggerWeb.Live.Traces.Components.Stream do
@moduledoc """
This component is used to display the traces stream.
It allows to compose style for the trace using `LiveDebuggerWeb.Live.Traces.Components.Trace` components.
"""
use LiveDebuggerWeb, :hook_component
@required_assigns [:id, :existing_traces_status]
@doc """
Initializes the component by attaching 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)
|> register_hook(:traces_stream)
end
@doc """
Renders the traces stream.
It is used to display the traces stream.
"""
attr(:id, :string, required: true)
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">
<div id={"#{@id}-stream-empty"} class="only:block hidden text-secondary-text text-center">
<div :if={@existing_traces_status == :ok}>
No traces have been recorded yet.
</div>
<div :if={@existing_traces_status == :loading} class="w-full flex items-center justify-center">
<.spinner size="sm" />
</div>
<.alert
:if={@existing_traces_status == :error}
variant="danger"
with_icon
heading="Error fetching historical callback traces"
>
New events will still be displayed as they come. Check logs for more information
</.alert>
</div>
<%= for {dom_id, wrapped_trace} <- @existing_traces do %>
<%= if wrapped_trace.id == "separator" do %>
<.separator id={dom_id} />
<% else %>
<%= render_slot(@trace, {dom_id, wrapped_trace}) %>
<% end %>
<% end %>
</div>
"""
end
attr(:id, :string, required: true)
defp separator(assigns) do
~H"""
<div id={@id}>
<div class="h-6 my-1 font-normal text-xs text-secondary-text flex align items-center">
<div class="border-b border-default-border grow"></div>
<span class="mx-2">Past Traces</span>
<div class="border-b border-default-border grow"></div>
</div>
</div>
"""
end
end