Attempt adding dropdown, small improvements

lib/tails_web/components/FilterSidebar/FilterSidebar.ex

@@ -11,6 +11,10 @@ defmodule FilterSidebar do
     String.replace(key, ".", "-")
   end
 
+  defp sorted_attrs(attrs) do
+    Enum.sort_by(attrs, &String.first(elem(&1, 0)))
+  end
+
   def showFilterSidebar(assigns) do
     ~H"""
     <div id="default-sidebar" class="w-80 h-min rounded-lg dark:bg-gray-600">
@@ -52,7 +56,7 @@ defmodule FilterSidebar do
                 Attributes
               </:button>
 
-              <:item :for={{k, values} <- @available_filters} id={"#{k}-attr-item"}>
+              <:item :for={{k, values} <- sorted_attrs(@available_filters)} id={"#{k}-attr-item"}>
                 <.live_component
                   module={FilterDropdown}
                   id={"#{generate_id_from_key(k)}-attribute-filter-dropdown"}
@@ -70,7 +74,10 @@ defmodule FilterSidebar do
                 Resource
               </:button>
 
-              <:item :for={{k, values} <- @available_resource_filters} id={"#{k}-resource-item"}>
+              <:item
+                :for={{k, values} <- sorted_attrs(@available_resource_filters)}
+                id={"#{k}-resource-item"}
+              >
                 <.live_component
                   module={FilterDropdown}
                   id={"#{generate_id_from_key(k)}-resource-filter-dropdown"}

lib/tails_web/components/ResourceTable/ResourceTable.ex

@@ -94,7 +94,7 @@ defmodule ResourceTable do
             <tr
               :for={{row_id, row} <- @streams.data}
               id={row_id}
-              class="group hover:bg-zinc-50 dark:text-slate-300"
+              class="group hover:bg-zinc-600 dark:text-slate-300"
             >
               <ResourceData.show
                 data={row}

lib/tails_web/components/common/filter_dropdown.ex

@@ -1,6 +1,7 @@
 defmodule TailsWeb.Common.FilterDropdown do
   use Phoenix.LiveComponent
   alias Phoenix.LiveView.JS
+  alias TailsWeb.Common.MoreButton
 
   @impl true
   def mount(socket) do
@@ -24,32 +25,39 @@ defmodule TailsWeb.Common.FilterDropdown do
   def render(assigns) do
     ~H"""
     <div class="relative" data-component={"#{@id}-dropdown"}>
-      <button
-        type="button"
-        class="flex items-center w-full"
-        id={"#{@id}-button"}
-        aria-expanded="false"
-        phx-target={@myself}
-        phx-click={JS.toggle(to: "##{@id}-menu", in: "fade-in-scale", out: "fade-out-scale")}
-      >
-        <span class="flex-1 ml-3 text-left whitespace-nowrap">
-          <%= @button_title %>
-        </span>
-        <svg
-          aria-hidden="true"
-          class="w-6 h-6"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
+      <div class="flex">
+        <button
+          type="button"
+          class="flex items-center w-full  rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-50 dark:focus:ring-gray-600"
+          id={"#{@id}-button"}
+          aria-expanded="false"
+          phx-target={@myself}
+          phx-click={JS.toggle(to: "##{@id}-menu", in: "fade-in-scale", out: "fade-out-scale")}
         >
-          <path
-            fill-rule="evenodd"
-            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-            clip-rule="evenodd"
+          <span class="flex-1 ml-3 text-left whitespace-nowrap">
+            <%= @button_title %>
+          </span>
+          <svg
+            aria-hidden="true"
+            class="w-6 h-6"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
           >
-          </path>
-        </svg>
-      </button>
+            <path
+              fill-rule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            >
+            </path>
+          </svg>
+        </button>
+        <%!-- <MoreButton.more id={"#{@id}-more"}>
+          <:item id={"#{@id}-test"}>
+            test
+          </:item>
+        </MoreButton.more> --%>
+      </div>
       <div class="hidden py-2 space-y-2" id={"#{@id}-menu"} data-cancel={JS.exec(%JS{}, "phx-remove")}>
         <form
           class="flex items-center max-w-sm mx-auto"
@@ -73,30 +81,6 @@ defmodule TailsWeb.Common.FilterDropdown do
             <div class="block items-center p-2 pl-11 w-full text-base font-medium">
               <div>
                 <div class="flex items-center">
-                  <button
-                    id={"#{@id}-#{v}-column"}
-                    phx-value-column_type={@filter_type}
-                    phx-value-key={@key}
-                    phx-click="update_columns"
-                  >
-                    <svg
-                      class="w-[20px] h-[20px] text-gray-800 dark:text-white"
-                      aria-hidden="true"
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M15 5v14M9 5v14M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z"
-                      />
-                    </svg>
-                  </button>
                   <button
                     id={"#{@id}-#{v}-include"}
                     phx-value-filter_type={@filter_type}

lib/tails_web/components/common/more_button.ex

@@ -0,0 +1,64 @@
+defmodule TailsWeb.Common.MoreButton do
+  use Phoenix.Component
+  alias Phoenix.LiveView.JS
+
+  @doc """
+  Renders a More Button.
+
+  """
+  attr :id, :string, required: true
+
+  slot :item, required: true do
+    attr :id, :string, required: true
+  end
+
+  def more(assigns) do
+    ~H"""
+    <button
+      id={@id}
+      data-dropdown-toggle={"#{@id}-dots"}
+      class="inline-flex items-center p-2 text-sm font-medium text-center text-gray-900 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-50 dark:focus:ring-gray-600"
+      type="button"
+      phx-click={JS.toggle(to: "##{@id}-dots", in: "fade-in-scale", out: "fade-out-scale")}
+    >
+      <svg
+        class="w-5 h-5 text-gray-800 dark:text-white"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-width="2"
+          d="M12 6h.01M12 12h.01M12 18h.01"
+        />
+      </svg>
+    </button>
+    <!-- Dropdown menu -->
+    <div
+      id={"#{@id}-dots"}
+      class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600 relative"
+    >
+      <ul
+        id={"#{@id}-menu"}
+        class="py-2 text-sm text-gray-700 dark:text-gray-200"
+        aria-labelledby={@id}
+        data-cancel={JS.exec(%JS{}, "phx-remove")}
+      >
+        <li :for={item <- @item}>
+          <a
+            href="#"
+            class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+          >
+            <%= render_slot(item) %>
+          </a>
+        </li>
+      </ul>
+    </div>
+    """
+  end
+end

lib/tails_web/components/core_components.ex

@@ -587,8 +587,8 @@ defmodule TailsWeb.CoreComponents do
               class={["relative p-0", @row_click && "hover:cursor-pointer"]}
             >
               <div class="block py-4 pr-6">
-                <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
-                <span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
+                <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-600 sm:rounded-l-xl" />
+                <span class={["relative", i == 0 && "font-semibold text-zinc-900 dark:text-white"]}>
                   <%= render_slot(col, @row_item.(row)) %>
                 </span>
               </div>

lib/tails_web/components/otel/log.ex

@@ -7,7 +7,7 @@ defmodule TailsWeb.Otel.Log do
       class={["relative p-0", @row_click && "hover:cursor-pointer"]}
       phx-click={@row_click && @row_click.(@log)}
     >
-      <%= @log["timeUnixNano"] %>
+      <%= @log["timeUnixNano"] |> convert_to_readable %>
     </td>
     <td
       class={["relative p-0", @row_click && "hover:cursor-pointer"]}
@@ -29,4 +29,21 @@ defmodule TailsWeb.Otel.Log do
     </td>
     """
   end
+
+  defp convert_to_readable(nil) do
+    {:ok, epoch} = Time.new(0, 0, 0)
+    epoch
+  end
+
+  defp convert_to_readable(timeUnixNano) do
+    {:ok, epoch} = Time.new(0, 0, 0)
+    {nano, _remainder} = Integer.parse(timeUnixNano, 10)
+
+    {:ok, _date, {hour, minute, second}, {_nanos, _other}} =
+      Calendar.ISO.from_unix(nano, :nanosecond)
+
+    {:ok, converted_time} = Time.new(hour, minute, second)
+
+    converted_time
+  end
 end

lib/tails_web/components/otel/span.ex

@@ -7,31 +7,31 @@ defmodule TailsWeb.Otel.Span do
       class={["relative p-0", @row_click && "hover:cursor-pointer"]}
       phx-click={@row_click && @row_click.(@span)}
     >
-      <%= @span["traceId"] %>
+      <%= @span["startTimeUnixNano"] |> convert_to_readable %>
     </td>
     <td
       class={["relative p-0", @row_click && "hover:cursor-pointer"]}
       phx-click={@row_click && @row_click.(@span)}
     >
-      <%= @span["parentSpanId"] %>
+      <%= @span["endTimeUnixNano"] |> convert_to_readable %>
     </td>
     <td
       class={["relative p-0", @row_click && "hover:cursor-pointer"]}
       phx-click={@row_click && @row_click.(@span)}
     >
-      <%= @span["spanId"] %>
+      <%= @span["traceId"] %>
     </td>
     <td
       class={["relative p-0", @row_click && "hover:cursor-pointer"]}
       phx-click={@row_click && @row_click.(@span)}
     >
-      <%= @span["startTimeUnixNano"] %>
+      <%= @span["parentSpanId"] %>
     </td>
     <td
       class={["relative p-0", @row_click && "hover:cursor-pointer"]}
       phx-click={@row_click && @row_click.(@span)}
     >
-      <%= @span["endTimeUnixNano"] %>
+      <%= @span["spanId"] %>
     </td>
     <td
       class={["relative p-0", @row_click && "hover:cursor-pointer"]}
@@ -53,4 +53,21 @@ defmodule TailsWeb.Otel.Span do
     </td>
     """
   end
+
+  defp convert_to_readable(nil) do
+    {:ok, epoch} = Time.new(0, 0, 0)
+    epoch
+  end
+
+  defp convert_to_readable(timeUnixNano) do
+    {:ok, epoch} = Time.new(0, 0, 0)
+    {nano, _remainder} = Integer.parse(timeUnixNano, 10)
+
+    {:ok, _date, {hour, minute, second}, {_nanos, _other}} =
+      Calendar.ISO.from_unix(nano, :nanosecond)
+
+    {:ok, converted_time} = Time.new(hour, minute, second)
+
+    converted_time
+  end
 end

lib/tails_web/live/tail_live/index.ex

@@ -8,16 +8,16 @@ defmodule TailsWeb.TailLive.Index do
 
   @columns %{
     :metrics => [
-      "UTC Time",
+      "timeUnixNano",
       "Name",
       "Description"
     ],
     :spans => [
+      "StartTimeUnixNano",
+      "EndTimeUnixNano",
       "TraceId",
       "ParentSpanId",
       "SpanId",
-      "StartTimeUnixNano",
-      "EndTimeUnixNano",
       "Name",
       "Kind",
       "Status"