RubyGems - rails_pulse - Versions diffs - 0.1.0 - Mend

rails_pulse 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (160) hide show

data/app/views/layouts/rails_pulse/_sidebar_menu.html.erb ADDED Viewed

@@ -0,0 +1,44 @@
+<div class="sidebar-menu">
+  <a class="btn sidebar-menu__button" href="#">
+    <div class="flex shrink-0">
+      <%#= image_tag 'rails_pulse/rails-pulse-logo.png', width: '28px' %>
+    </div>
+    <div class="flex flex-col text-start leading-tight overflow-hidden">
+      <span class="overflow-ellipsis font-semibold">Rails Pulse</span>
+      <span class="overflow-ellipsis text-xs">Open Source</span>
+    </div>
+  </a>
+  <div class="sidebar-menu__content">
+    <div class="sidebar-menu__group">
+      <nav class="sidebar-menu__items">
+        <%= link_to root_path, class: 'btn sidebar-menu__button' do %>
+          <%= rails_pulse_icon 'layout-dashboard', width: '16' %>
+          <span class="overflow-ellipsis">Dashboard</span>
+        <% end %>
+        <%= link_to routes_path, class: 'btn sidebar-menu__button' do %>
+          <%= rails_pulse_icon 'route', width: '16' %>
+          <span class="overflow-ellipsis">Routes</span>
+        <% end %>
+        <%= link_to requests_path, class: 'btn sidebar-menu__button' do %>
+          <%= rails_pulse_icon 'audio-lines', width: '16' %>
+          <span class="overflow-ellipsis">Requests</span>
+        <% end %>
+        <%= link_to queries_path, class: 'btn sidebar-menu__button' do %>
+          <%= rails_pulse_icon 'database', width: '16' %>
+          <span class="overflow-ellipsis">Queries</span>
+        <% end %>
+      </nav>
+    </div>
+  </div>
+  <a class="btn sidebar-menu__button mbs-auto" href="https://www.railspulse.com" target="_blank" rel="noopener noreferrer">
+    <div class="flex flex-col text-start leading-tight overflow-hidden">
+      <span class="overflow-ellipsis max-i-full font-semibold">Rails Pulse</span>
+      <span class="overflow-ellipsis max-i-full text-xs">www.railspulse.com</span>
+    </div>
+  </a>
+</div>

data/app/views/layouts/rails_pulse/application.html.erb ADDED Viewed

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html data-color-scheme="light">
+  <head>
+    <title><%= content_for(:title) || "Rails Pulse" %></title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <%= yield :head %>
+    <!-- Rails Pulse Pre-compiled Assets (CSP-safe) -->
+    <%= stylesheet_link_tag rails_pulse.asset_path('rails-pulse.css'), 'data-turbo-track': 'reload' %>
+    <%= javascript_include_tag rails_pulse.asset_path('rails-pulse-icons.js'), 'data-turbo-track': 'reload', defer: true, nonce: rails_pulse_csp_nonce %>
+    <%= javascript_include_tag rails_pulse.asset_path('rails-pulse.js'), 'data-turbo-track': 'reload', defer: true, nonce: rails_pulse_csp_nonce %>
+  </head>
+  <body class="header-layout">
+    <header id="header">
+      <div class="flex justify-between container">
+        <div class="hide@md" data-controller="rails-pulse--dialog">
+          <button type="button" class="btn btn--icon" data-action="rails-pulse--dialog#showModal">
+            <%= rails_pulse_icon 'menu', width: '20' %>
+            <span class="sr-only">Open menu</span>
+          </button>
+        <dialog class="sheet sheet--left" style="--sheet-size: 288px;" data-rails-pulse--dialog-target="menu" data-action="click->rails-pulse--dialog#closeOnClickOutside">
+          <div class="sheet__content p-2">
+            <div class="sidebar-menu">
+              <a class="btn sidebar-menu__button" href="#">
+                <div class="flex flex-col text-start leading-tight overflow-hidden">
+                  <span class="overflow-ellipsis font-semibold">Rails Pulse</span>
+                  <span class="overflow-ellipsis text-xs">Open Source</span>
+                </div>
+              </a>
+              <div class="sidebar-menu__content">
+                <div class="sidebar-menu__group">
+                  <nav class="sidebar-menu__items">
+                    <%= render 'layouts/rails_pulse/menu_items' %>
+                  </nav>
+                </div>
+              </div>
+            </div>
+          </div>
+        </dialog>
+      </div>
+      <div class="flex items-center gap">
+        <a class="flex items-center gap mie-2" href="#">
+          <span class="font-bold">Rails Pulse</span>
+        </a>
+        <nav class="flex items-center gap text-sm text-subtle show@md" style="--column-gap: 1rem">
+          <%= render 'layouts/rails_pulse/menu_items' %>
+        </nav>
+      </div>
+      <div class="flex items-center" data-controller="rails-pulse--color-scheme">
+        <%= link_to '#', "aria-label": "Toggle color scheme", role: "button", data: { action: "rails-pulse--color-scheme#toggle" } do %>
+          <%= rails_pulse_icon 'sun', width: '48' %>
+        <% end %>
+      </div>
+    </header>
+    <main id="main">
+      <div class="container flex flex-col gap">
+        <%= yield %>
+      </div>
+    </main>
+  </body>
+</html>

data/app/views/rails_pulse/caches/show.html.erb ADDED Viewed

@@ -0,0 +1,9 @@
+<%
+  id = "#{@component_id}_#{@component_options[:component]}"
+%>
+<%= turbo_frame_tag id do %>
+  <%= render partial: "rails_pulse/components/#{@component_options[:component]}", locals: @component_options %>
+  <script nonce="<%= rails_pulse_csp_nonce %>">
+    initializeChartsInContainer('<%= id %>');
+  </script>
+<% end %>

data/app/views/rails_pulse/components/_breadcrumbs.html.erb ADDED Viewed

@@ -0,0 +1,12 @@
+<nav class="breadcrumb" aria-label="Breadcrumb">
+  <% breadcrumbs.each_with_index do |crumb, index| %>
+    <% if crumb[:current] %>
+      <span class="text-primary" aria-disabled="true" aria-current="page" role="link"><%= crumb[:title] %></span>
+    <% else %>
+      <%= link_to crumb[:title], crumb[:path] %>
+    <% end %>
+    <% unless index == breadcrumbs.length - 1 %>
+      <%= rails_pulse_icon 'chevron-right', width: 14, height: 14, class: "breadcrumb-separator mbe-1" %>
+    <% end %>
+  <% end %>
+</nav>

data/app/views/rails_pulse/components/_code_panel.html.erb ADDED Viewed

@@ -0,0 +1,12 @@
+<%
+  title ||= nil
+%>
+<div>
+  <% if title %>
+    <h2 class="grow font-semibold leading-none mbe-1 uppercase text-xs"><%= title %></h2>
+  <% end %>
+  <div class="prose max-i-none">
+    <pre class="mbs-0" style="white-space: normal; margin-block-end: 0; margin-block-start: 0;"><code><%= html_escape(value) %></code></pre>
+  </div>
+</div>

data/app/views/rails_pulse/components/_metric_card.html.erb ADDED Viewed

@@ -0,0 +1,55 @@
+<%
+  @component_data ||= {}
+  id ||= @component_data[:id]
+  context ||= @component_data[:context]
+  title ||= @component_data[:title]
+  summary ||= @component_data[:summary]
+  line_chart_data ||= @component_data[:line_chart_data]
+  trend_icon ||= @component_data[:trend_icon]
+  trend_amount ||= @component_data[:trend_amount]
+  trend_text ||= @component_data[:trend_text]
+%>
+<div class="grid-item" data-controller="rails-pulse--chart">
+  <%= render 'rails_pulse/components/panel', { title: title, card_classes: 'card-compact' } do %>
+    <div class="row mbs-2" style="height: 50px; margin-bottom: 0;">
+      <div class="grid-item">
+        <h4 class="text-xl mbs-1 font-bold"><%= summary %></h4>
+      </div>
+      <div class="grid-item">
+        <%= line_chart line_chart_data, height: "100%", options: sparkline_chart_options %>
+      </div>
+    </div>
+    <div class="mbs-2" style="height: 10px;">
+      <%
+        badge =
+          case trend_icon
+          when "trending-up" then "badge--negative-inverse"
+          when "trending-down" then "badge--positive-inverse"
+          else
+            "badge--primary-inverse"
+          end
+      %>
+      <div class="flex items-center justify-between">
+        <span class="badge <%= badge %> p-0">
+          <%= rails_pulse_icon trend_icon, height: "15px", width: "15px", class: "mie-2" %>
+          <%= trend_amount %>
+          <p class="mis-2 text-subtle text-xs"><%= trend_text %></p>
+        </span>
+        <%
+          refresh_path = rails_pulse.cache_path(id: id, context: context, refresh: true)
+          cached_iso = @cached_at ? @cached_at.iso8601 : nil
+        %>
+        <%= link_to refresh_path,
+            data: {
+              controller: "rails-pulse--timezone",
+              rails_pulse__timezone_target_frame_value: "#{id}_card",
+              rails_pulse__timezone_cached_at_value: cached_iso,
+              turbo_frame: "#{id}_card",
+              turbo_prefetch: "false"
+            } do %>
+          <%= rails_pulse_icon 'refresh-cw', height: "15px", width: "15px" %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/views/rails_pulse/components/_metric_row.html.erb ADDED Viewed

@@ -0,0 +1,9 @@
+<% value ||= nil %>
+<div>
+  <h5 class="text-subtle text-md"><%= title %></h5>
+  <% if value %>
+    <p class="text-md mb-0"><%= value %></p>
+  <% else %>
+    <%= yield %>
+  <% end %>
+</div>

data/app/views/rails_pulse/components/_operation_details_popover.html.erb ADDED Viewed

@@ -0,0 +1,241 @@
+<div
+  popover
+  class="popover card operation-details-popover"
+  data-rails-pulse--popover-target="menu"
+  style="--popover-size: min(70rem); max-inline-size: 70rem;"
+>
+  <div class="flex flex-col gap">
+    <div class="flex items-center justify-between">
+      <h3 class="text-sm font-semibold leading-none uppercase text-subtle">
+        <%= operation.operation_type.upcase %> Operation
+      </h3>
+      <span class="badge" style="background-color: <%= event_color(operation.operation_type) %>15; color: <%= event_color(operation.operation_type) %>;">
+        <%= operation.duration.round(2) %>ms
+      </span>
+    </div>
+    <div class="flex flex-col gap-half">
+      <div>
+        <h4 class="text-xs font-medium text-subtle uppercase">Label</h4>
+        <div class="text-sm p-2 bg-shade rounded-sm border break-words" style="font-family: monospace;">
+          <%= html_escape(operation.label) %>
+        </div>
+      </div>
+      <% if operation.occurred_at.present? %>
+        <div>
+          <h4 class="text-xs font-medium text-subtle uppercase">Occurred At</h4>
+          <div class="text-sm">
+            <%= operation.occurred_at.strftime("%H:%M:%S.%L") %>
+          </div>
+        </div>
+      <% end %>
+      <% case operation.operation_type %>
+      <% when "sql" %>
+        <div>
+          <h4 class="text-xs font-medium text-subtle uppercase">Performance Notes</h4>
+          <div class="text-sm flex flex-col gap-half">
+            <% if operation.duration > 100 %>
+              <div class="text-negative"><%= rails_pulse_icon 'triangle-alert', width: '16', class: 'inline-block' %> Slow query (>100ms)</div>
+            <% elsif operation.duration > 50 %>
+              <div style="color: #d97706;">⚡ Moderate query (>50ms)</div>
+            <% else %>
+              <div class="text-positive"><%= rails_pulse_icon 'check', width: '16', class: 'inline-block' %> Fast query</div>
+            <% end %>
+            <% if operation.query.present? %>
+              <div class="text-xs text-subtle">
+                Query normalized for tracking
+              </div>
+            <% end %>
+          </div>
+        </div>
+        <% if operation.label&.match?(/SELECT.*FROM\s+(\w+)/i) %>
+          <div>
+            <h4 class="text-xs font-medium text-subtle uppercase">Table</h4>
+            <div class="text-sm p-2 bg-shade rounded-sm border break-words">
+              <%= html_escape(operation.label.match(/FROM\s+(\w+)/i)&.captures&.first || "Unknown") %>
+            </div>
+          </div>
+        <% end %>
+      <% when "controller" %>
+        <div>
+          <h4 class="text-xs font-medium text-subtle uppercase">Action Info</h4>
+          <div class="text-sm flex flex-col gap-half">
+            <% if operation.duration > 500 %>
+              <div class="text-negative"><%= rails_pulse_icon 'triangle-alert', width: '16', class: 'inline-block' %> Slow action (>500ms)</div>
+            <% elsif operation.duration > 200 %>
+              <div style="color: #d97706;">⚡ Moderate action (>200ms)</div>
+            <% else %>
+              <div class="text-positive"><%= rails_pulse_icon 'check', width: '16', class: 'inline-block' %> Fast action</div>
+            <% end %>
+            <div class="text-xs text-subtle">
+              Controller action processing time
+            </div>
+          </div>
+        </div>
+      <% when "template", "partial", "layout", "collection" %>
+        <div>
+          <h4 class="text-xs font-medium text-subtle uppercase">View Performance</h4>
+          <div class="text-sm flex flex-col gap-half">
+            <% if operation.duration > 100 %>
+              <div class="text-negative"><%= rails_pulse_icon 'triangle-alert', width: '16', class: 'inline-block' %> Slow render (>100ms)</div>
+            <% elsif operation.duration > 50 %>
+              <div style="color: #d97706;">⚡ Moderate render (>50ms)</div>
+            <% else %>
+              <div class="text-positive"><%= rails_pulse_icon 'check', width: '16', class: 'inline-block' %> Fast render</div>
+            <% end %>
+            <div class="text-xs text-subtle">
+              <%= operation.operation_type.capitalize %> rendering time
+            </div>
+          </div>
+        </div>
+        <% if operation.codebase_location.present? %>
+          <div>
+            <h4 class="text-xs font-medium text-subtle uppercase">File Location</h4>
+            <div class="text-xs p-2 bg-shade rounded-sm border break-words" style="font-family: monospace;">
+              <%= html_escape(operation.codebase_location.split('/').last(3).join('/')) %>
+            </div>
+          </div>
+        <% end %>
+      <% when "cache_read", "cache_write" %>
+        <div>
+          <h4 class="text-xs font-medium text-subtle uppercase">Cache Performance</h4>
+          <div class="text-sm flex flex-col gap-half">
+            <% if operation.operation_type == "cache_read" %>
+              <% if operation.duration > 10 %>
+                <div style="color: #d97706;">⚡ Slow cache read (>10ms)</div>
+              <% else %>
+                <div class="text-positive"><%= rails_pulse_icon 'check', width: '16', class: 'inline-block' %> Fast cache read</div>
+              <% end %>
+            <% else %>
+              <% if operation.duration > 50 %>
+                <div style="color: #d97706;">⚡ Slow cache write (>50ms)</div>
+              <% else %>
+                <div class="text-positive"><%= rails_pulse_icon 'check', width: '16', class: 'inline-block' %> Fast cache write</div>
+              <% end %>
+            <% end %>
+            <div class="text-xs text-subtle">
+              <%= operation.operation_type.humanize %> operation
+            </div>
+          </div>
+        </div>
+      <% when "http" %>
+        <div>
+          <h4 class="text-xs font-medium text-subtle uppercase">HTTP Request</h4>
+          <div class="text-sm flex flex-col gap-half">
+            <% if operation.duration > 1000 %>
+              <div class="text-negative"><%= rails_pulse_icon 'triangle-alert', width: '16', class: 'inline-block' %> Very slow request (>1s)</div>
+            <% elsif operation.duration > 500 %>
+              <div style="color: #d97706;">⚡ Slow request (>500ms)</div>
+            <% else %>
+              <div class="text-positive"><%= rails_pulse_icon 'check', width: '16', class: 'inline-block' %> Fast request</div>
+            <% end %>
+            <div class="text-xs text-subtle">
+              External HTTP request duration
+            </div>
+          </div>
+        </div>
+      <% when "job" %>
+        <div>
+          <h4 class="text-xs font-medium text-subtle uppercase">Background Job</h4>
+          <div class="text-sm flex flex-col gap-half">
+            <% if operation.duration > 5000 %>
+              <div class="text-negative"><%= rails_pulse_icon 'triangle-alert', width: '16', class: 'inline-block' %> Long-running job (>5s)</div>
+            <% elsif operation.duration > 1000 %>
+              <div style="color: #d97706;">⚡ Moderate job (>1s)</div>
+            <% else %>
+              <div class="text-positive"><%= rails_pulse_icon 'check', width: '16', class: 'inline-block' %> Quick job</div>
+            <% end %>
+            <div class="text-xs text-subtle">
+              Active Job execution time
+            </div>
+          </div>
+        </div>
+      <% when "mailer" %>
+        <div>
+          <h4 class="text-xs font-medium text-subtle uppercase">Email Delivery</h4>
+          <div class="text-sm flex flex-col gap-half">
+            <% if operation.duration > 2000 %>
+              <div class="text-negative"><%= rails_pulse_icon 'triangle-alert', width: '16', class: 'inline-block' %> Slow email delivery (>2s)</div>
+            <% elsif operation.duration > 500 %>
+              <div style="color: #d97706;">⚡ Moderate delivery (>500ms)</div>
+            <% else %>
+              <div class="text-positive"><%= rails_pulse_icon 'check', width: '16', class: 'inline-block' %> Fast delivery</div>
+            <% end %>
+            <div class="text-xs text-subtle">
+              ActionMailer delivery time
+            </div>
+          </div>
+        </div>
+      <% when "storage" %>
+        <div>
+          <h4 class="text-xs font-medium text-subtle uppercase">File Storage</h4>
+          <div class="text-sm flex flex-col gap-half">
+            <% if operation.duration > 1000 %>
+              <div class="text-negative"><%= rails_pulse_icon 'triangle-alert', width: '16', class: 'inline-block' %> Slow storage operation (>1s)</div>
+            <% elsif operation.duration > 500 %>
+              <div style="color: #d97706;">⚡ Moderate storage (>500ms)</div>
+            <% else %>
+              <div class="text-positive"><%= rails_pulse_icon 'check', width: '16', class: 'inline-block' %> Fast storage</div>
+            <% end %>
+            <div class="text-xs text-subtle">
+              Active Storage operation time
+            </div>
+          </div>
+        </div>
+      <% else %>
+        <div>
+          <h4 class="text-xs font-medium text-subtle uppercase">Performance</h4>
+          <div class="text-sm">
+            <% if operation.duration > 100 %>
+              <div style="color: #d97706;">⚡ Duration: <%= operation.duration.round(2) %>ms</div>
+            <% else %>
+              <div class="text-positive"><%= rails_pulse_icon 'check', width: '16', class: 'inline-block' %> Duration: <%= operation.duration.round(2) %>ms</div>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+      <% if operation.codebase_location.present? && !%w[template partial layout].include?(operation.operation_type) %>
+        <div>
+          <h4 class="text-xs font-medium text-subtle uppercase">Source Location</h4>
+          <div class="text-xs p-2 bg-shade rounded-sm border break-words" style="font-family: monospace;">
+            <%= html_escape(operation.codebase_location.split('/').last(3).join('/')) %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+    <div class="border-bs pbs-3">
+      <div class="text-xs text-subtle">
+        💡 <strong>Tips:</strong>
+        <% case operation.operation_type %>
+        <% when "sql" %>
+          Check for missing indexes, N+1 queries, or overly complex joins.
+        <% when "controller" %>
+          Look for heavy computation, multiple database calls, or inefficient logic.
+        <% when "template", "partial", "layout" %>
+          Consider caching, reducing database calls in views, or simplifying logic.
+        <% when "http" %>
+          Consider caching responses, using background jobs, or optimizing external service calls.
+        <% when "cache_read", "cache_write" %>
+          Review cache key complexity and storage backend performance.
+        <% else %>
+          Monitor this operation for performance patterns and consider optimization.
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/rails_pulse/components/_panel.html.erb ADDED Viewed

@@ -0,0 +1,56 @@
+<%
+  title ||= nil
+  help_heading ||= nil
+  help_text ||= nil
+  link_to ||= nil
+  actions ||= nil
+  card_classes ||= ""
+  content_partial ||= nil
+%>
+<div class="card <%= card_classes %>">
+  <div class="flex flex-col b-full">
+    <div class="flex">
+      <% if title %>
+        <h2 class="grow font-semibold leading-none mbe-1 uppercase text-xs"><%= title %></h2>
+      <% end %>
+      <div class="flex gap items-center">
+        <% if help_heading %>
+          <div data-controller="rails-pulse--popover" data-rails-pulse--popover-placement-value="bottom-end">
+            <a href="#"
+              data-rails-pulse--popover-target="button"
+              data-action="rails-pulse--popover#toggle"
+              data-popovertarget="popover">
+              <%= rails_pulse_icon 'message-circle-question', height: "20px" %>
+            </a>
+            <div popover class="popover card" data-rails-pulse--popover-target="menu" style="max-width: 20rem">
+              <div class="flex flex-col">
+                <h3 class="font-semibold leading-none mbe-2 uppercase text-sm"><%= help_heading %></h3>
+                <p class="text-sm text-subtle"><%= help_text %></p>
+              </div>
+            </div>
+          </div>
+        <% end %>
+        <% if actions %>
+          <% actions.each do |action| %>
+            <%= link_to action[:url],
+                       title: action[:title] || "",
+                       class: action[:class] || "",
+                       data: action[:data] || {} do %>
+              <%= rails_pulse_icon action[:icon] || 'external-link', height: "20px" %>
+            <% end %>
+          <% end %>
+        <% elsif link_to %>
+          <%= link_to link_to, title: "View details", class: "" do %>
+            <%= rails_pulse_icon 'external-link', height: "20px" %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+    <% if content_partial %>
+      <%= render content_partial %>
+    <% else %>
+      <%= yield %>
+    <% end %>
+  </div>
+</div>

data/app/views/rails_pulse/components/_sparkline_stats.html.erb ADDED Viewed

@@ -0,0 +1,15 @@
+<div class="row mbs-2" style="height: 50px; margin-bottom: 0;">
+  <div class="grid-item">
+    <h4 class="text-xl mbs-1 font-bold"><%= summary %></h4>
+  </div>
+  <div class="grid-item">
+    <%= line_chart line_chart_data, height: "100%", options: sparkline_chart_options %>
+  </div>
+</div>
+<div>
+  <span class="badge badge--<%= trend_direction == "down" ? "positive" : "negative" %>-inverse p-0">
+    <%= rails_pulse_icon "trending-#{trend_direction}", height: "15px" %>
+    <%= trend_amount %>
+    <p class="mis-2 text-subtle text-xs"><%= trend_text %></p>
+  </span>
+</div>

data/app/views/rails_pulse/components/_table.html.erb ADDED Viewed

@@ -0,0 +1,50 @@
+<%
+  # Extract the table data from the arguments
+  table_data = defined?(table_data) ? table_data : (defined?(data) ? data : {})
+  # Handle both old format (array) and new format (hash with columns and data)
+  if table_data.is_a?(Array)
+    # Legacy format - assume route data
+    columns = [
+      { field: :route_path, label: 'Route' },
+      { field: :this_week_avg, label: 'This Week Avg (ms)', highlight: :trend },
+      { field: :last_week_avg, label: 'Last Week Avg (ms)' },
+      { field: :percentage_change, label: 'Change', format: :percentage, highlight: :percentage_change },
+      { field: :request_count, label: 'Requests' }
+    ]
+    data_rows = table_data
+  else
+    # New format - dynamic columns and data
+    columns = table_data[:columns] || []
+    data_rows = table_data[:data] || []
+  end
+  colspan = columns.length
+%>
+<table class="table mbs-4">
+  <thead>
+    <tr>
+      <% columns.each do |column| %>
+        <th class="<%= column[:class] %>"><%= column[:label] %></th>
+      <% end %>
+    </tr>
+  </thead>
+  <tbody>
+    <% if data_rows.any? %>
+      <% data_rows.each do |row_data| %>
+        <tr>
+          <% columns.each do |column| %>
+            <td class="<%= column[:cell_class] %> <%= cell_highlight_class(row_data, column) %>">
+              <%= render_cell_content(row_data, column) %>
+            </td>
+          <% end %>
+        </tr>
+      <% end %>
+    <% else %>
+      <tr>
+        <td colspan="<%= colspan %>" class="text-center text-subtle">No data available for the selected time period</td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/app/views/rails_pulse/components/_table_head.html.erb ADDED Viewed

@@ -0,0 +1,20 @@
+<thead>
+  <tr>
+    <% columns.each do |column| %>
+      <th class="<%= column[:class] %>">
+        <% if column[:sortable] == false %>
+          <%= column[:label] %>
+        <% else %>
+          <% sort_params = {} %>
+          <% sort_params[:zoom_start_time] = @zoom_start if @zoom_start.present? %>
+          <% sort_params[:zoom_end_time] = @zoom_end if @zoom_end.present? %>
+          <%= sort_link @ransack_query, column[:field], column[:label],
+            sort_params.merge(
+              class: "flex items-center",
+              data: { turbo_prefetch: "false", turbo_action: "replace" }
+            ) %>
+        <% end %>
+      </th>
+    <% end %>
+  </tr>
+</thead>

data/app/views/rails_pulse/components/_table_pagination.html.erb ADDED Viewed

@@ -0,0 +1,45 @@
+<div class="flex items-center mbs-4">
+  <div class="text-sm text-subtle show@md">Total of <%= @pagy.count %> record(s).</div>
+  <div class="flex items-center mis-auto justify-end" style="column-gap: 1rem">
+    <div class="flex items-center gap show@md"
+         data-controller="rails-pulse--pagination"
+         data-rails-pulse--pagination-url-value="<%= rails_pulse.pagination_limit_path %>">
+      <label for="pagination_limit" class="text-sm font-medium">Rows per page</label>
+      <%= select_tag :limit,
+        options_for_select([[10, 10], [20, 20], [30, 30], [40, 40], [50, 50]], @pagy.vars[:items]),
+        {
+          id: "pagination_limit",
+          class: "input",
+          style: "--input-inline-size: 70px",
+          data: {
+            "rails-pulse--pagination-target": "limit",
+            "rails-pulse--index-target": "paginationLimit",
+            action: "change->rails-pulse--pagination#updateLimit"
+          }
+        }
+      %>
+    </div>
+    <div class="text-sm font-medium"><%= "Page #{@pagy.page} of #{@pagy.pages}" %></div>
+    <nav class="flex items-center gap shrink-0" style="--btn-padding: .5rem;" aria-label="Pagination">
+      <%= link_to pagy_url_for(@pagy, 1), class: "btn", aria: { disabled: @pagy.prev.nil? }.compact_blank do %>
+        <%= rails_pulse_icon 'chevrons-left', width: '16', height: '16' %>
+        <span class="sr-only">Go to first page</span>
+      <% end %>
+      <%= link_to pagy_url_for(@pagy, @pagy.prev || @pagy.page), class: "btn", aria: { disabled: @pagy.prev.nil? }.compact_blank do %>
+        <%= rails_pulse_icon 'chevron-left', width: '16', height: '16' %>
+        <span class="sr-only">Go to previous page</span>
+      <% end %>
+      <%= link_to pagy_url_for(@pagy, @pagy.next || @pagy.page), class: "btn", aria: { disabled: @pagy.next.nil? }.compact_blank do %>
+        <%= rails_pulse_icon 'chevron-right', width: '16', height: '16' %>
+        <span class="sr-only">Go to next page</span>
+      <% end %>
+      <%= link_to pagy_url_for(@pagy, @pagy.last), class: "btn", aria: { disabled: @pagy.next.nil? }.compact_blank do %>
+        <%= rails_pulse_icon 'chevrons-right', width: '16', height: '16' %>
+        <span class="sr-only">Go to last page</span>
+      <% end %>
+    </nav>
+  </div>
+</div>