use last field of the path

Author: msmithstubbs

lib/logflare_web/live/search_live/log_event_components.ex

@@ -8,7 +8,6 @@ defmodule LogflareWeb.SearchLive.LogEventComponents do
   import LogflareWeb.ModalLiveHelpers
 
   alias Logflare.DateTimeUtils
-  alias Logflare.Lql
   alias Logflare.Sources.Source
   alias Logflare.Lql
   alias Phoenix.LiveView.JS
@@ -32,14 +31,7 @@ defmodule LogflareWeb.SearchLive.LogEventComponents do
         <.log_event :for={log <- @search_op_log_events.rows} timezone={@search_timezone} log_event={log} select_fields={build_select_fields(@search_op)}>
           {log.body["event_message"]}
           <:actions phx-no-format>
-          <.link phx-click="show_modal"
-          phx-value-event-id={log.id}
-          class="tw-text-[0.65rem]"
-          phx-value-log-event-timestamp={log.body["timestamp"]}
-          phx-value-lql={@querystring}
-          >
-          <span>view2</span>
-          </.link>
+          <div class={if(Enum.any?(@select_fields), do: "tw-ml-[13rem] tw-pb-1.5", else: "tw-inline")}>
           <.modal_link
                    component={LogflareWeb.Search.LogEventViewerComponent}
                    class="tw-text-[0.65rem]"
@@ -59,7 +51,7 @@ defmodule LogflareWeb.SearchLive.LogEventComponents do
                    modal_id={:log_event_context_viewer}
                    title="View Event Context"
                    phx-value-log-event-id={log.id}
-                  phx-value-source-id={@search_op.source.id}
+                   phx-value-source-id={@search_op.source.id}
                    phx-value-log-event-timestamp={log.body["timestamp"]}
                    phx-value-timezone={@search_timezone}
                    phx-value-querystring={@querystring}
@@ -72,83 +64,23 @@ defmodule LogflareWeb.SearchLive.LogEventComponents do
                    phx-click={
                      JS.dispatch("logflare:copy-to-clipboard",
                        detail: %{
-                         text: "#{LogflareWeb.SearchLive.LogEventComponents.formatted_timestamp(log, assigns[:search_timezone])}    #{log.body["event_message"]}"
+                         text: formatted_for_clipboard(log, @search_op)
                        }
                      )
                    }
                    data-toggle="tooltip"
                    data-placement="top"
                    title="Copy to clipboard"
                  >copy</.link>
-                <.log_event_permalink log_event_id={log.id} timestamp={log.body["timestamp"]} source={@search_op.source} lql={@querystring} class="tw-text-[0.65rem] group-hover:tw-visible tw-invisible" />
+                <.log_event_permalink log_event_id={log.id} timestamp={log.body["timestamp"]} source={@search_op.source} lql={lql_with_recommended_fields(@search_op.lql_rules, log, @search_op.source)} class="tw-text-[0.65rem] group-hover:tw-visible tw-invisible" />
+                </div>
                </:actions>
         </.log_event>
       </ul>
     </div>
     """
   end
 
-  attr :log, :any, required: true
-  attr :recommended_query, :any, required: true
-  attr :tailing?, :boolean, default: false
-  attr :source, :any, required: true
-  attr :search_timezone, :string, required: true
-  attr :querystring, :string, required: true
-
-  def logs_list_actions(assigns) do
-    ~H"""
-    <%= live_modal_show_link(
-        component: LogflareWeb.Search.LogEventViewerComponent,
-        class: "tw-text-[0.65rem]",
-        modal_id: :log_event_viewer,
-        title: "Log Event",
-        phx_value_log_event_id: @log.id,
-        phx_value_log_event_timestamp: @log.body["timestamp"],
-        phx_value_lql: @recommended_query
-      ) do %>
-      <span>view</span>
-    <% end %>
-    <%= live_modal_show_link(
-        component: LogflareWeb.SearchLive.EventContextComponent,
-        click: JS.push("soft_pause"),
-        close:
-          if(@tailing?,
-            do:
-              JS.push("soft_play", target: "#source-logs-search-control")
-              |> JS.push("close"),
-            else: nil
-          ),
-        class: "tw-text-[0.65rem]",
-        modal_id: :log_event_context_viewer,
-        title: "View Event Context",
-        phx_value_log_event_id: @log.id,
-        phx_value_source_id: @source.id,
-        phx_value_log_event_timestamp: @log.body["timestamp"],
-        phx_value_timezone: @search_timezone,
-        phx_value_querystring: @querystring
-      ) do %>
-      <span>context</span>
-    <% end %>
-
-    <.link
-      class="tw-text-[0.65rem] group-hover:tw-visible tw-invisible"
-      phx-click={
-        JS.dispatch("logflare:copy-to-clipboard",
-          detail: %{
-            text: "#{formatted_timestamp(@log, @search_timezone)}    #{@log.body["event_message"]}"
-          }
-        )
-      }
-      data-toggle="tooltip"
-      data-placement="top"
-      title="Copy to clipboard"
-    >
-      copy
-    </.link>
-    <.log_event_permalink log_event_id={@log.id} timestamp={@log.body["timestamp"]} source={@source} lql={@recommended_query} class="tw-text-[0.65rem] group-hover:tw-visible tw-invisible" />
-    """
-  end
-
   @spec lql_with_recommended_fields(Lql.Rules.lql_rules(), Logflare.LogEvent.t(), Source.t()) ::
           String.t()
   def lql_with_recommended_fields(lql_rules, event, source) do
@@ -262,7 +194,7 @@ defmodule LogflareWeb.SearchLive.LogEventComponents do
       <%= for field <- @select_fields do %>
         <div class="tw-text-neutral-200 tw-flex tw-leading-6">
           <div class="tw-w-[13rem] tw-text-right ">
-            <span class="tw-w-fit tw-px-1 tw-py-0.5 tw-bg-neutral-500/50 tw-text-white tw-mr-2">{field.display}</span>
+            <span class="tw-whitespace-nowrap tw-w-fit tw-px-1 tw-py-0.5 tw-bg-neutral-600 tw-text-white tw-mr-2">{truncate_display(field.display)}</span>
           </div>
           <span class="tw-text-white">{get_field_value(@log_event.body, field.key)}</span>
         </div>
@@ -290,7 +222,8 @@ defmodule LogflareWeb.SearchLive.LogEventComponents do
     |> Enum.map(fn
       %{path: path, alias: nil} ->
         key = String.replace(path, ".", "_")
-        %{display: path, key: key}
+        display = path |> String.split(".") |> List.last()
+        %{display: display, key: key}
 
       %{path: _path, alias: alias} ->
         %{display: alias, key: alias}
@@ -299,4 +232,12 @@ defmodule LogflareWeb.SearchLive.LogEventComponents do
   end
 
   defp build_select_fields(_), do: []
+
+  defp truncate_display(display) when is_binary(display) do
+    if String.length(display) > 23 do
+      (String.slice(display, 0, 23) <> "&hellip;") |> raw()
+    else
+      display
+    end
+  end
 end

test/logflare_web/live/search_live/log_event_components_test.exs

@@ -1,11 +1,129 @@
 defmodule LogflareWeb.SearchLive.LogEventComponentsTest do
-  use LogflareWeb.ConnCase, async: true
+  use LogflareWeb.ConnCase, async: false
 
   import Phoenix.LiveViewTest
   import Phoenix.Component
 
+  alias Logflare.Lql
+  alias Logflare.Sources.Source
   alias LogflareWeb.SearchLive.LogEventComponents
 
+  @default_attrs %{
+    search_op_log_events: nil,
+    last_query_completed_at: nil,
+    loading: false,
+    search_timezone: "Etc/UTC",
+    tailing?: false,
+    querystring: "",
+    lql_rules: [],
+    source: nil,
+    search_op: nil
+  }
+
+  defmodule TestLive do
+    use LogflareWeb, :live_view
+
+    def render(assigns) do
+      ~H"""
+      <div>
+        <LogEventComponents.results_list
+          search_op_log_events={@search_op_log_events}
+          search_op={@search_op}
+          last_query_completed_at={@last_query_completed_at}
+          loading={@loading}
+          search_timezone={@search_timezone}
+          tailing?={@tailing?}
+          querystring={@querystring}
+        />
+      </div>
+      """
+    end
+
+    def mount(_params, session, socket) do
+      {:ok,
+       assign(socket,
+         search_op_log_events: session["search_op_log_events"],
+         search_op: session["search_op"],
+         last_query_completed_at: session["last_query_completed_at"],
+         loading: session["loading"],
+         search_timezone: session["search_timezone"],
+         tailing?: session["tailing?"],
+         querystring: session["querystring"]
+       )}
+    end
+  end
+
+  describe "results_list/1" do
+    setup do
+      user = insert(:user)
+
+      source =
+        insert(:source,
+          user: user,
+          suggested_keys: "m.user_id",
+          bigquery_clustering_fields: "session_id"
+        )
+
+      search_op_log_events = %{
+        rows: [
+          build(:log_event, message: "Log message 1", metadata: %{user_id: 123}, source: source)
+        ]
+      }
+
+      {:ok, lql_rules} =
+        Lql.decode(
+          "c:count(*) c:group_by(t::minute)",
+          Source.BigQuery.SchemaBuilder.initial_table_schema()
+        )
+
+      [
+        source: source,
+        search_op_log_events: search_op_log_events,
+        lql_rules: lql_rules
+      ]
+    end
+
+    test "renders log events list", %{
+      source: source,
+      search_op_log_events: search_op_log_events,
+      lql_rules: lql_rules
+    } do
+      html =
+        render_component(&LogEventComponents.results_list/1, %{
+          @default_attrs
+          | search_op: %{source: source, lql_rules: lql_rules, search_timezone: "Etc/UTC"},
+            search_op_log_events: search_op_log_events
+        })
+
+      assert html =~ "Log message 1"
+    end
+
+    test "renders loading state", %{source: source, lql_rules: lql_rules} do
+      html =
+        render_component(&LogEventComponents.results_list/1, %{
+          @default_attrs
+          | loading: true,
+            search_op: %{source: source, lql_rules: lql_rules, search_timezone: "Etc/UTC"},
+            search_op_log_events: %{rows: []}
+        })
+
+      assert html =~ ~r|id="logs-list" class="(.*)blurred"|
+    end
+
+    test "renders empty state when no log events", %{source: source, lql_rules: lql_rules} do
+      html =
+        render_component(&LogEventComponents.results_list/1, %{
+          @default_attrs
+          | search_op: %{source: source, lql_rules: lql_rules, search_timezone: "Etc/UTC"},
+            loading: false,
+            search_op_log_events: nil
+        })
+
+      # Assert logs list ul is NOT rendered when search_op_log_events is nil
+      refute html =~ ~s|id="logs-list"|
+    end
+  end
+
   describe "selected_fields/1" do
     test "renders selected fields with display names and values" do
       log_event =
@@ -31,11 +149,11 @@ defmodule LogflareWeb.SearchLive.LogEventComponentsTest do
         <LogEventComponents.selected_fields log_event={@log_event} select_fields={@select_fields} />
         """)
 
-      assert html =~ "metadata.user_id:"
+      assert html =~ "user_id"
       assert html =~ "user_123"
-      assert html =~ "metadata.store.city:"
+      assert html =~ "city"
       assert html =~ "San Francisco"
-      assert html =~ "food:"
+      assert html =~ "food"
       assert html =~ "Pizza"
     end
 
@@ -56,7 +174,7 @@ defmodule LogflareWeb.SearchLive.LogEventComponentsTest do
         <LogEventComponents.selected_fields log_event={@log_event} select_fields={@select_fields} />
         """)
 
-      assert html =~ "metadata.user_id:"
+      assert html =~ "metadata.user_id"
       assert html =~ "null"
     end
   end
@@ -86,7 +204,7 @@ defmodule LogflareWeb.SearchLive.LogEventComponentsTest do
       assert LogEventComponents.formatted_for_clipboard(log_event, search_op) =~ """
              Fri Feb 13 2009 15:31:30-08:00    User login successful
 
-             metadata.user_id: user_123
+             user_id: user_123
 
              city: San Francisco