feat: permalink in search results (#2058)

* feat: log event permalink in search * feat: more tweaks around permalink styling, log event modal * chore: fix tests
Logflare · May 10, 2024 · 3d358cb · 3d358cb
1 parent 9939a34
commit 3d358cb
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 22 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -108,6 +108,12 @@ document.addEventListener("DOMContentLoaded", (e) => {
 window.addEventListener("logflare:copy-to-clipboard", (event) => {
   if ("clipboard" in navigator) {
     const text = event.detail?.text || event.target.textContent;
+    if (event.target.textContent.trim() === "copy") {
+      event.target.textContent = "copied"
+      setTimeout(()=>{
+        event.target.textContent = "copy"
+      }, 6000)
+    }
     navigator.clipboard.writeText(text);
   } else {
     console.error("Your browser does not support clipboard copy.");

diff --git a/lib/logflare_web.ex b/lib/logflare_web.ex
@@ -145,6 +145,7 @@ defmodule LogflareWeb do
       import PhoenixLiveReact, only: [live_react_component: 2, live_react_component: 3]
       import Phoenix.View
       import Phoenix.Component
+      import LogflareWeb.CoreComponents
 
       import LogflareWeb.ErrorHelpers
       import LogflareWeb.Gettext

diff --git a/lib/logflare_web/core_components.ex b/lib/logflare_web/core_components.ex
@@ -23,11 +23,13 @@ defmodule LogflareWeb.CoreComponents do
   attr :variant, :string,
     values: ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]
 
+  attr :class, :string, default: ""
+  attr :rest, :global
   slot :inner_block, required: true
 
   def button(assigns) do
     ~H"""
-    <button class={"btn btn-#{@variant}"} type="button">
+    <button class={"btn btn-#{@variant} #{@class}"} type="button" {@rest}>
       <%= render_slot(@inner_block) %>
     </button>
     """

diff --git a/lib/logflare_web/live/log_event_live/search_log_event_viewer_component.ex b/lib/logflare_web/live/log_event_live/search_log_event_viewer_component.ex
@@ -41,7 +41,7 @@ defmodule LogflareWeb.Search.LogEventViewerComponent do
         |> assign(:log_event, le)
       else
         start_task(path: path, value: log_id, partitions_range: [dminus3, dplus1], source: source)
-        assign(socket, Map.delete(assigns, :flash))
+        socket
       end
 
     socket = assign_defaults(socket, assigns)
@@ -63,11 +63,10 @@ defmodule LogflareWeb.Search.LogEventViewerComponent do
     socket =
       if le do
         socket
-        |> assign(Map.delete(assigns, :flash))
         |> assign(:log_event, le)
       else
         start_task(uuid: id, partitions_range: [dminus1, dplus1], source: assigns.source)
-        assign(socket, Map.delete(assigns, :flash))
+        socket
       end
 
     socket = assign_defaults(socket, assigns)

diff --git a/lib/logflare_web/live/search_live/logs_search_lv.ex b/lib/logflare_web/live/search_live/logs_search_lv.ex
@@ -42,6 +42,7 @@ defmodule LogflareWeb.Source.SearchLV do
 
     socket
     |> assign(
+      source: source,
       user: user,
       team_user: team_user,
       search_tip: gen_search_tip(),

diff --git a/lib/logflare_web/live/search_live/templates/logs_list.html.heex b/lib/logflare_web/live/search_live/templates/logs_list.html.heex
@@ -7,17 +7,26 @@
         <%= for log <- @search_op_log_events.rows do %>
           <%= if Map.has_key?(log.body, "event_message") do %>
             <!-- TODO: TO BE DELETED WHEN UNDERLYING ISSUE IS FOUND -->
-            <li id={"log-event_#{log.id || log.body["timestamp"]}"}>
-              <% %{"timestamp" => timestamp, "event_message" => message} = log.body %>
+            <% %{"timestamp" => timestamp, "event_message" => message} = log.body
+
+            formatted_timestamp =
+              if @use_local_time do
+                format_timestamp(timestamp, @user_local_timezone)
+              else
+                format_timestamp(timestamp) <> " UTC"
+              end %>
+            <li id={"log-event_#{log.id || log.body["timestamp"]}"} class="tw-group">
               <mark class="log-datestamp" data-timestamp={timestamp}>
-                <%= if @use_local_time do
-                  format_timestamp(timestamp, @user_local_timezone)
-                else
-                  format_timestamp(timestamp) <> " UTC"
-                end %></mark>&nbsp;<%= message %>
-              <%= live_modal_show_link(component: LogflareWeb.Search.LogEventViewerComponent, modal_id: :log_event_viewer, title: "Log Event", phx_value_log_event_id: log.id, phx_value_log_event_timestamp: log.body["timestamp"]) do %>
-                <span>event body</span>
-              <% end %>
+                <%= formatted_timestamp %></mark>&nbsp;<%= message %>
+              <span class="tw-inline-block tw-text-[0.65rem] tw-align-text-bottom tw-inline-flex tw-flex-row tw-gap-2">
+                <%= live_modal_show_link(component: LogflareWeb.Search.LogEventViewerComponent, modal_id: :log_event_viewer, title: "Log Event", phx_value_log_event_id: log.id, phx_value_log_event_timestamp: log.body["timestamp"]) do %>
+                  <span>view</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}    #{message}"})} data-toggle="tooltip" data-placement="top" title="Copy to clipboard">
+                  copy
+                </.link>
+                <.link class="group-hover:tw-visible tw-invisible" target="_blank" href={~p"/sources/#{@source.id}/event?uuid=#{log.id}"}>permalink</.link>
+              </span>
             </li>
           <% end %>
         <% end %>

diff --git a/lib/logflare_web/live/search_live/templates/logs_search.html.heex b/lib/logflare_web/live/search_live/templates/logs_search.html.heex
@@ -99,7 +99,8 @@
       last_query_completed_at: @last_query_completed_at,
       user_local_timezone: @user_local_timezone,
       use_local_time: @use_local_time,
-      loading: @loading
+      loading: @loading,
+      source: @source
     ) %>
   </div>
   <div>

diff --git a/lib/logflare_web/templates/log/log_event.html.heex b/lib/logflare_web/templates/log/log_event.html.heex
@@ -11,5 +11,5 @@
   </div>
 </div>
 <div class="container">
-  <.live_component module={LogflareWeb.Search.LogEventViewerComponent} id="log_event_viewer" {assigns} />
+  <.live_component module={LogflareWeb.Search.LogEventViewerComponent} id={:log_event_viewer} {assigns} />
 </div>
diff --git a/lib/logflare_web/templates/log/log_event_body.html.heex b/lib/logflare_web/templates/log/log_event_body.html.heex
@@ -4,9 +4,13 @@
       <div>
         <h6 class="header-margin">Timestamp</h6>
         <div><%= Timex.to_datetime(@timestamp) %></div>
-        <div>
+        <div class="tw-text-xs">
+          <.link href="#" phx-click={Phoenix.LiveView.JS.dispatch("logflare:copy-to-clipboard", detail: %{text: Timex.to_datetime(@timestamp)})} data-toggle="tooltip" data-placement="top" title="Copy to clipboard">
+            copy
+          </.link>
           <%= if @local_timezone do %>
-            <%= link(@local_timestamp,
+            <%= link("inspect",
+              class: "tw-ml-4",
               to:
                 Routes.live_path(LogflareWeb.Endpoint, LogflareWeb.Source.SearchLV, @source,
                   querystring: "t:>#{Timex.format!(Timex.shift(@local_timestamp, seconds: -30), "{YYYY}-{0M}-{0D}T{h24}:{m}:{s}")} t:<#{Timex.format!(Timex.shift(@local_timestamp, seconds: 30), "{YYYY}-{0M}-{0D}T{h24}:{m}:{s}")} c:count(*) c:group_by(t::second)",
@@ -21,9 +25,14 @@
     </li>
     <li class="list-group-item flex-fill">
       <h6 class="header-margin">UUID</h6>
-      <%= link(@id,
-        to: Routes.log_event_show_path(LogflareWeb.Endpoint, :show, @source, uuid: @id)
-      ) %>
+
+      <div><%= @id %></div>
+      <div class="tw-text-xs">
+        <.link href="#" phx-click={Phoenix.LiveView.JS.dispatch("logflare:copy-to-clipboard", detail: %{text: @id})} data-toggle="tooltip" data-placement="top" title="Copy to clipboard">
+          copy
+        </.link>
+        <.link target="_blank" class="tw-ml-4" href={~p"/sources/#{@source.id}/event?uuid=#{@id}"}>permalink</.link>
+      </div>
     </li>
   </ul>
   <ul class="list-group">

diff --git a/test/logflare_web/live/search_live/logs_search_lv_test.exs b/test/logflare_web/live/search_live/logs_search_lv_test.exs
@@ -145,6 +145,10 @@ defmodule LogflareWeb.Source.SearchLVTest do
       html = render(view)
       assert html =~ "Elapsed since last query"
 
+      assert view
+             |> element("#logs-list-container a", "permalink")
+             |> has_element?()
+
       # default input values
       assert find_selected_chart_period(html) == "minute"
       assert find_chart_aggregate(html) == "count"
@@ -284,7 +288,7 @@ defmodule LogflareWeb.Source.SearchLVTest do
 
       TestUtils.retry_assert(fn ->
         view
-        |> element("li a[phx-value-log-event-id='some-uuid']", "event body")
+        |> element("li a[phx-value-log-event-id='some-uuid']", "view")
         |> render_click()
       end)