rails_pulse 0.1.2 → 0.1.4

data/app/views/rails_pulse/queries/index.html.erb

@@ -9,63 +9,60 @@
 <% end %>
 
 <div
-  class="row"
   data-controller="rails-pulse--index"
   data-rails-pulse--index-chart-id-value="average_query_times_chart"
 >
-  <div class="grid-item">
-    <%= render 'rails_pulse/components/panel', { title: 'Average Query Time', } do %>
-      <%= search_form_for @ransack_query, url: queries_path, class: "flex items-center justify-between gap mb-4" do |form| %>
-        <div class="flex items-center grow gap">
-          <%= form.select :period_start_range,
-            RailsPulse::QueriesController::TIME_RANGE_OPTIONS,
-            { selected: @selected_time_range },
-            { class: "input" }
-          %>
-          <%= form.select :avg_duration,
-            duration_options(:query),
-            { selected: @selected_response_range },
-            { class: "input" }
-          %>
-          <%= link_to "Reset", queries_path, class: "btn btn--borderless show@md" if params.has_key?(:q) %>
-          <%= form.submit "Search", class: "btn show@sm" %>
+  <%= render 'rails_pulse/components/panel', { title: 'Average Query Time', } do %>
+    <%= search_form_for @ransack_query, url: queries_path, class: "flex items-center justify-between gap mb-4" do |form| %>
+      <div class="flex items-center grow gap">
+        <%= form.select :period_start_range,
+          RailsPulse::QueriesController::TIME_RANGE_OPTIONS,
+          { selected: @selected_time_range },
+          { class: "input" }
+        %>
+        <%= form.select :avg_duration,
+          duration_options(:query),
+          { selected: @selected_response_range },
+          { class: "input" }
+        %>
+        <%= link_to "Reset", queries_path, class: "btn btn--borderless show@md" if params.has_key?(:q) %>
+        <%= form.submit "Search", class: "btn show@sm" %>
+      </div>
+    <% end %>
+
+    <% if @has_data %>
+      <% if @chart_data && @chart_data.values.any? { |v| v > 0 } %>
+        <div
+          class="chart-container chart-container--slim"
+          data-rails-pulse--index-target="chart"
+        >
+          <%= bar_chart(
+            @chart_data,
+            code: false,
+            id: "average_query_times_chart",
+            height: "100%",
+            options: bar_chart_options(
+              units: "ms",
+              zoom: true,
+              chart_start: 0,
+              chart_end: @chart_data.length - 1,
+              xaxis_formatter: @xaxis_formatter,
+              tooltip_formatter: @tooltip_formatter,
+              zoom_start: @zoom_start,
+              zoom_end: @zoom_end,
+              chart_data: @chart_data
+            )
+          ) %>
         </div>
       <% end %>
 
-      <% if @has_data %>
-        <% if @chart_data && @chart_data.values.any? { |v| v > 0 } %>
-          <div
-            class="chart-container chart-container--slim"
-            data-rails-pulse--index-target="chart"
-          >
-            <%= bar_chart(
-              @chart_data,
-              code: false,
-              id: "average_query_times_chart",
-              height: "100%",
-              options: bar_chart_options(
-                units: "ms",
-                zoom: true,
-                chart_start: 0,
-                chart_end: @chart_data.length - 1,
-                xaxis_formatter: @xaxis_formatter,
-                tooltip_formatter: @tooltip_formatter,
-                zoom_start: @zoom_start,
-                zoom_end: @zoom_end,
-                chart_data: @chart_data
-              )
-            ) %>
-          </div>
-        <% end %>
-
-        <%= turbo_frame_tag :queries_index_table, data: { rails_pulse__index_target: "indexTable" } do %>
-          <%= render 'rails_pulse/queries/table' %>
-        <% end %>
-      <% else %>
-        <%= render 'rails_pulse/components/empty_state', 
-            title: 'No query data found for the selected filters.', 
-            description: 'Try adjusting your time range or filters to see results.' %>
+      <%= turbo_frame_tag :index_table, data: { rails_pulse__index_target: "indexTable" } do %>
+        <%= render 'rails_pulse/queries/table' %>
       <% end %>
+    <% else %>
+      <%= render 'rails_pulse/components/empty_state',
+          title: 'No query data found for the selected filters.',
+          description: 'Try adjusting your time range or filters to see results.' %>
     <% end %>
-  </div>
+  <% end %>
 </div>

data/app/views/rails_pulse/queries/show.html.erb

@@ -8,69 +8,73 @@
   </div>
 <% end %>
 
-<div class="mb-4">
-  <%= render 'rails_pulse/components/code_panel', { title: 'Normalized SQL', value: @query.normalized_sql } %>
-</div>
-
 <div
-  class="row"
   data-controller="rails-pulse--index"
   data-rails-pulse--index-chart-id-value="query_responses_chart"
 >
-  <div class="grid-item">
-    <%= render 'rails_pulse/components/panel', { title: 'Query Responses' } do %>
-      <%= search_form_for @ransack_query, url: query_path(@query), class: "flex items-center justify-between gap mb-4" do |form| %>
-        <div class="flex items-center grow gap">
-          <%= form.select :period_start_range,
-            RailsPulse::RoutesController::TIME_RANGE_OPTIONS,
-            { selected: @selected_time_range },
-            { class: "input" }
-          %>
-          <%= form.select :duration,
-            duration_options(:query),
-            { selected: @selected_response_range },
-            { class: "input" }
-          %>
-          <%= link_to "Reset", query_path(@query), class: "btn btn--borderless show@md" if params.has_key?(:q) %>
-          <%= form.submit "Search", class: "btn show@sm" %>
+  <%= render 'rails_pulse/components/panel', { title: 'Query Responses' } do %>
+    <%= search_form_for @ransack_query, url: query_path(@query), class: "flex items-center justify-between gap mb-4" do |form| %>
+      <div class="flex items-center grow gap">
+        <%= form.select :period_start_range,
+          RailsPulse::RoutesController::TIME_RANGE_OPTIONS,
+          { selected: @selected_time_range },
+          { class: "input" }
+        %>
+        <%= form.select :duration,
+          duration_options(:query),
+          { selected: @selected_response_range },
+          { class: "input" }
+        %>
+        <%= link_to "Reset", query_path(@query), class: "btn btn--borderless show@md" if params.has_key?(:q) %>
+        <%= form.submit "Search", class: "btn show@sm" %>
+      </div>
+    <% end %>
+
+    <% if @has_data %>
+      <% if @chart_data && @chart_data.values.any? { |v| v > 0 } %>
+        <div
+          class="chart-container chart-container--slim"
+          data-rails-pulse--index-target="chart"
+        >
+          <%= bar_chart(
+            @chart_data,
+            code: false,
+            id: "query_responses_chart",
+            height: "100%",
+            options: bar_chart_options(
+              units: "ms",
+              zoom: true,
+              chart_start: 0,
+              chart_end: @chart_data.length - 1,
+              xaxis_formatter: @xaxis_formatter,
+              tooltip_formatter: @tooltip_formatter,
+              zoom_start: @zoom_start,
+              zoom_end: @zoom_end,
+              chart_data: @chart_data
+            )
+          ) %>
         </div>
       <% end %>
 
-      <% if @has_data %>
-        <% if @chart_data && @chart_data.values.any? { |v| v > 0 } %>
-          <div
-            class="chart-container chart-container--slim"
-            data-rails-pulse--index-target="chart"
-          >
-            <%= bar_chart(
-              @chart_data,
-              code: false,
-              id: "query_responses_chart",
-              height: "100%",
-              options: bar_chart_options(
-                units: "ms",
-                zoom: true,
-                chart_start: 0,
-                chart_end: @chart_data.length - 1,
-                xaxis_formatter: @xaxis_formatter,
-                tooltip_formatter: @tooltip_formatter
-              )
-            ) %>
-          </div>
-        <% end %>
-
-        <%= turbo_frame_tag :index_table do %>
-          <%= render 'rails_pulse/queries/show_table' %>
-        <% end %>
-      <% else %>
-        <%= render 'rails_pulse/components/empty_state', 
-            title: 'No query responses found for the selected filters.', 
-            description: 'Try adjusting your time range or filters to see results.' %>
+      <%= turbo_frame_tag :index_table, data: { rails_pulse__index_target: "indexTable" } do %>
+        <%= render 'rails_pulse/queries/show_table' %>
       <% end %>
+    <% else %>
+      <%= render 'rails_pulse/components/empty_state',
+          title: 'No query responses found for the selected filters.',
+          description: 'Try adjusting your time range or filters to see results.' %>
     <% end %>
-  </div>
+  <% end %>
+</div>
+
+<div class="mb-4">
+  <%= render 'rails_pulse/components/code_panel', { title: 'Normalized Query', value: @query.normalized_sql } %>
 </div>
 
+<%= turbo_frame_tag "query_analysis", class: "mb-4" do %>
+  <%= render 'rails_pulse/queries/analysis_section', query: @query %>
+<% end %>
+
 <%= render 'rails_pulse/components/panel', { title: 'Query Locations' } do %>
   <table class="table">
     <thead>

data/app/views/rails_pulse/requests/_operations.html.erb

@@ -1,33 +1,24 @@
-<div class="row">
-  <div class="grid-item">
-    <%= render 'rails_pulse/components/panel', { title: 'Event Sequence ' } do %>
-      <% if operations.any? %>
-        <table class="table operations-table">
-          <thead>
-            <tr>
-              <th class="w-8"></th>
-              <th class="operations-label-cell">Operation</th>
-              <th class="operations-duration-cell">Duration</th>
-              <th class="w-20">Impact</th>
-              <th class="w-16"></th>
-              <th class="operations-event-cell">Timeline</th>
-              <th class="w-16">Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            <% total_request_duration = @request.duration.to_f %>
-            <% @operation_timeline.bars.each_with_index do |bar, index| %>
-            <tbody data-controller="rails-pulse--expandable-row">
-            <!-- Main operation row -->
-            <tr
-              class="<%= cycle('bg-shade', 'bg-white') %> operation-row"
-              data-rails-pulse--expandable-row-target="trigger"
-              data-operation-id="<%= bar.operation.id %>"
-            >
+<%= render 'rails_pulse/components/panel', { title: 'Event Sequence ' } do %>
+  <% if operations.any? %>
+    <table class="table operations-table">
+      <thead>
+        <tr>
+          <th class="w-8"></th>
+          <th class="operations-label-cell">Operation</th>
+          <th class="operations-duration-cell">Duration</th>
+          <th class="w-20">Impact</th>
+          <th class="w-16"></th>
+          <th class="operations-event-cell">Timeline</th>
+          <th class="w-16">Actions</th>
+        </tr>
+      </thead>
+      <tbody data-controller="rails-pulse--expandable-rows" data-action="click->rails-pulse--expandable-rows#toggle">
+        <% total_request_duration = @request.duration.to_f %>
+        <% @operation_timeline.bars.each_with_index do |bar, index| %>
+            <tr data-operation-id="<%= bar.operation.id %>">
               <!-- Toggle chevron column -->
-              <td class="text-center cursor-pointer"
-                  data-action="click->rails-pulse--expandable-row#toggle">
-                <div data-rails-pulse--expandable-row-target="chevron">
+              <td class="text-center cursor-pointer">
+                <div class="chevron mbs-2">
                   <%= rails_pulse_icon('chevron-right', width: '16', class: 'transition-transform duration-200') %>
                 </div>
               </td>
@@ -69,23 +60,19 @@
             <!-- Expandable details row -->
             <tr
               class="operation-details-row hidden"
-              data-rails-pulse--expandable-row-target="details"
               data-operation-id="<%= bar.operation.id %>"
             >
-              <td colspan="7" class="p-4">
+              <td colspan="7" class="pi-8 pb-4">
                 <%= turbo_frame_tag "operation_#{bar.operation.id}_details", data: { "operation-url": operation_path(bar.operation) } do %>
                 <% end %>
               </td>
             </tr>
-            </tbody>
-            <% end %>
-          </tbody>
-        </table>
-      <% else %>
-        <%= render 'rails_pulse/components/empty_state', 
-            title: 'No operations found for this request.', 
-            description: 'This request may not have had any tracked operations.' %>
-      <% end %>
-    <% end %>
-  </div>
-</div>
+        <% end %>
+      </tbody>
+    </table>
+  <% else %>
+    <%= render 'rails_pulse/components/empty_state',
+        title: 'No operations found for this request.',
+        description: 'This request may not have had any tracked operations.' %>
+  <% end %>
+<% end %>

data/app/views/rails_pulse/requests/_table.html.erb

@@ -1,26 +1,39 @@
-<%
-  columns = []
-  columns << { field: :route_path, label: 'Route', class: 'w-auto' } if @route.blank?
+<% columns = [
+  { field: :occurred_at, label: 'Timestamp', class: 'w-36' },
+  { field: :route_path, label: 'Route', class: 'w-auto' },
+  { field: :duration, label: 'Response Time', class: 'w-36' },
+  { field: :status, label: 'Status', class: 'w-20' }
+] %>
 
-  columns += [
-    { field: :duration, label: 'Response Time', class: 'w-24' },
-    { field: :status, label: 'HTTP Status', class: 'w-20' },
-    { field: :status_indicator, label: 'Status', class: 'w-16' }
-  ]
-%>
-
-<table class="table mbs-4">
+<table class="table mbs-4" data-controller="rails-pulse--table-sort">
   <%= render "rails_pulse/components/table_head", columns: columns %>
 
   <tbody>
-    <% @table_data.each do |route_request| %>
+    <% @table_data.each do |request| %>
+      <%
+        # Determine performance class based on request duration
+        performance_class = case request.duration
+        when 0..100 then "text-green-600"
+        when 100..300 then "text-yellow-600"
+        when 300..1000 then "text-orange-600"
+        else "text-red-600"
+        end
+      %>
       <tr>
-        <% if @route.blank? %>
-          <td class="whitespace-nowrap"><%= link_to route_request.route.path_and_method, request_path(route_request), data: { turbo_frame: '_top' } %></td>
-        <% end %>
-        <td class="whitespace-nowrap"><%= route_request.duration.round(2) %> ms</td>
-        <td class="whitespace-nowrap"><%= route_request.status %></td>
-        <td class="whitespace-nowrap text-center"><%= request_status_indicator(route_request.duration) %></td>
+        <td class="whitespace-nowrap">
+          <%= link_to human_readable_occurred_at(request.occurred_at), request_path(request), data: { turbo_frame: '_top' } %>
+        </td>
+        <td class="whitespace-nowrap">
+          <%= link_to "#{request.route.path} #{request.route.method}", route_path(request.route), data: { turbo_frame: '_top' } %>
+        </td>
+        <td class="whitespace-nowrap">
+          <span class="<%= performance_class %> font-medium">
+            <%= request.duration.round(2) %> ms
+          </span>
+        </td>
+        <td class="whitespace-nowrap">
+          <span class="text-green-600"><%= request.status %></span>
+        </td>
       </tr>
     <% end %>
   </tbody>

data/app/views/rails_pulse/requests/index.html.erb

@@ -10,63 +10,68 @@
 <% end %>
 
 <div
-  class="row"
   data-controller="rails-pulse--index"
   data-rails-pulse--index-chart-id-value="average_response_times_chart"
 >
-  <div class="grid-item">
-    <%= render 'rails_pulse/components/panel', { title: 'Average Response Time', } do %>
-      <%= search_form_for @ransack_query, url: requests_path, class: "flex items-center justify-between gap mb-4" do |form| %>
-        <div class="flex items-center grow gap">
-          <%= form.select :period_start_range,
-            RailsPulse::RequestsController::TIME_RANGE_OPTIONS,
-            { selected: @selected_time_range },
-            { class: "input" }
-          %>
-          <%= form.select :avg_duration,
-            duration_options(:request),
-            { selected: @selected_response_range },
-            { class: "input" }
-          %>
-          <%= link_to "Reset", requests_path, class: "btn btn--borderless show@md" if params.has_key?(:q) %>
-          <%= form.submit "Search", class: "btn show@sm" %>
+  <%= render 'rails_pulse/components/panel', { title: 'Average Response Time', } do %>
+    <%= search_form_for @ransack_query, url: requests_path, class: "flex items-center justify-between gap mb-4" do |form| %>
+      <div class="flex items-center grow gap">
+        <%= form.select :period_start_range,
+          RailsPulse::RequestsController::TIME_RANGE_OPTIONS,
+          { selected: @selected_time_range },
+          { class: "input" }
+        %>
+        <%= form.select :avg_duration,
+          duration_options(:request),
+          { selected: @selected_response_range },
+          { class: "input" }
+        %>
+        <%= link_to "Reset", requests_path, class: "btn btn--borderless show@md" if params.has_key?(:q) %>
+        <%= form.submit "Search", class: "btn show@sm" %>
+      </div>
+    <% end %>
+
+    <% if @has_data %>
+      <% if @chart_data && @chart_data.values.any? { |v| v > 0 } %>
+        <div
+          class="chart-container chart-container--slim"
+          data-rails-pulse--index-target="chart"
+        >
+          <%= bar_chart(
+            @chart_data,
+            code: false,
+            id: "average_response_times_chart",
+            height: "100%",
+            options: bar_chart_options(
+              units: "ms",
+              zoom: true,
+              chart_start: 0,
+              chart_end: @chart_data.length - 1,
+              xaxis_formatter: @xaxis_formatter,
+              tooltip_formatter: @tooltip_formatter,
+              zoom_start: @zoom_start,
+              zoom_end: @zoom_end,
+              chart_data: @chart_data
+            )
+          ) %>
+        </div>
+      <% else %>
+        <div class="p-4 text-center text-muted">
+          No response time data available for the selected filters.
         </div>
       <% end %>
 
-      <% if @has_data %>
-        <% if @chart_data && @chart_data.values.any? { |v| v > 0 } %>
-          <div
-            class="chart-container chart-container--slim"
-            data-rails-pulse--index-target="chart"
-          >
-            <%= bar_chart(
-              @chart_data,
-              code: false,
-              id: "average_response_times_chart",
-              height: "100%",
-              options: bar_chart_options(
-                units: "ms",
-                zoom: true,
-                chart_start: 0,
-                chart_end: @chart_data.length - 1,
-                xaxis_formatter: @xaxis_formatter,
-                tooltip_formatter: @tooltip_formatter,
-                zoom_start: @zoom_start,
-                zoom_end: @zoom_end,
-                chart_data: @chart_data
-              )
-            ) %>
-          </div>
-        <% end %>
+      <div class="alert flex items-start mbs-8" role="alert">
+        <p>The chart above shows aggregated average response times grouped by time periods while the table below shows specific request details.</p>
+      </div>
 
-        <%= turbo_frame_tag :requests_index_table, data: { rails_pulse__index_target: "indexTable" } do %>
-          <%= render 'rails_pulse/requests/table' %>
-        <% end %>
-      <% else %>
-        <%= render 'rails_pulse/components/empty_state', 
-            title: 'No request data found for the selected filters.', 
-            description: 'Try adjusting your time range or filters to see results.' %>
+      <%= turbo_frame_tag :index_table, data: { rails_pulse__index_target: "indexTable" } do %>
+        <%= render 'rails_pulse/requests/table' %>
       <% end %>
+    <% else %>
+      <%= render 'rails_pulse/components/empty_state',
+          title: 'No request data found for the selected filters.',
+          description: 'Try adjusting your time range or filters to see results.' %>
     <% end %>
-  </div>
+  <% end %>
 </div>

data/app/views/rails_pulse/requests/show.html.erb

@@ -8,8 +8,6 @@
         <dd><%= link_to @request.route.path_and_method, route_path(@request.route) %></dd>
         <dt>Timestamp</dt>
         <dd><%= human_readable_occurred_at(@request.occurred_at) %></dd>
-        <dt>Request UUID</dt>
-        <dd><code><%= @request.request_uuid %></code></dd>
         <dt>Duration</dt>
         <dd><%= @request.duration.round(2) %> ms</dd>
         <dt>Status</dt>

data/app/views/rails_pulse/routes/_requests_table.html.erb

@@ -0,0 +1,39 @@
+<% columns = [
+  { field: :occurred_at, label: 'Timestamp', class: 'w-auto' },
+  { field: :duration, label: 'Response Time', class: 'w-36' },
+  { field: :status, label: 'Status', class: 'w-20' }
+] %>
+
+<table class="table mbs-4" data-controller="rails-pulse--table-sort">
+  <%= render "rails_pulse/components/table_head", columns: columns %>
+
+  <tbody>
+    <% @table_data.each do |request| %>
+      <tr>
+        <td class="whitespace-nowrap">
+          <%= link_to human_readable_occurred_at(request.occurred_at), request_path(request), data: { turbo_frame: '_top' } %>
+        </td>
+        <td class="whitespace-nowrap">
+          <% performance_class = case request.duration
+            when 0..100 then "text-green-600"
+            when 100..300 then "text-yellow-600"
+            when 300..1000 then "text-orange-600"
+            else "text-red-600"
+            end %>
+          <span class="<%= performance_class %> font-medium">
+            <%= request.duration.round(2) %> ms
+          </span>
+        </td>
+        <td class="whitespace-nowrap">
+          <% if request.is_error? %>
+            <span class="text-red-600">Error (<%= request.status %>)</span>
+          <% else %>
+            <span class="text-green-600"><%= request.status %></span>
+          <% end %>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>
+
+<%= render "rails_pulse/components/table_pagination" %>

data/app/views/rails_pulse/routes/_table.html.erb

@@ -1,14 +1,11 @@
 <% columns = [
   { field: :route_path, label: 'Route', class: 'w-auto' },
-  { field: :avg_duration_sort, label: 'Average Response Time', class: 'w-36' },
-  { field: :max_duration_sort, label: 'Max Response Time', class: 'w-32' },
-  { field: :count_sort, label: 'Requests', class: 'w-24' },
-  { field: :requests_per_minute, label: 'Requests Per Minute', class: 'w-28' },
-  { field: :error_rate_percentage, label: 'Error Rate (%)', class: 'w-20' },
-  { field: :status_indicator, label: 'Status', class: 'w-16', sortable: false }
+  { field: :avg_duration_sort, label: 'Average Response Time', class: 'w-48' },
+  { field: :max_duration_sort, label: 'Max Response Time', class: 'w-44' },
+  { field: :count_sort, label: 'Requests', class: 'w-24' }
 ] %>
 
-<table class="table mbs-4">
+<table class="table mbs-4" data-controller="rails-pulse--table-sort">
   <%= render "rails_pulse/components/table_head", columns: columns %>
 
   <tbody>
@@ -18,9 +15,6 @@
         <td class="whitespace-nowrap"><%= summary.avg_duration.to_i %> ms</td>
         <td class="whitespace-nowrap"><%= summary.max_duration.to_i %> ms</td>
         <td class="whitespace-nowrap"><%= number_with_delimiter summary.count %></td>
-        <td class="whitespace-nowrap"><%= summary.count < 1 ? '< 1' : (summary.count / 60.0).round(2) %></td>
-        <td class="whitespace-nowrap"><%= ((summary.error_count.to_f / summary.count) * 100).round(2) %>%</td>
-        <td class="whitespace-nowrap text-center"><%= route_status_indicator(summary.avg_duration >= 500 ? 1 : 0) %></td>
       </tr>
     <% end %>
   </tbody>