rails_pulse 0.1.0

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

@@ -0,0 +1,64 @@
+<%= render 'rails_pulse/components/breadcrumbs' %>
+
+<div class="row">
+  <%= cached_component(component: "metric_card", id: "average_response_times", context: "routes", class: "grid-item block") %>
+  <%= cached_component(component: "metric_card", id: "percentile_response_times", context: "routes", class: "grid-item block") %>
+  <%= cached_component(component: "metric_card", id: "request_count_totals", context: "routes", class: "grid-item block") %>
+  <%= cached_component(component: "metric_card", id: "error_rate_per_route", context: "routes", class: "grid-item block") %>
+</div>
+
+<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 :occurred_at_range,
+            RailsPulse::QueriesController::TIME_RANGE_OPTIONS,
+            { selected: @selected_time_range },
+            { class: "input" }
+          %>
+          <%= form.select :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 @chart_data.present? %>
+        <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 %>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,86 @@
+<%= render 'rails_pulse/components/breadcrumbs' %>
+
+<div class="row">
+  <%= cached_component(component: "metric_card", id: "average_query_times", context: "query_#{@query.id}", class: "grid-item block") %>
+  <%= cached_component(component: "metric_card", id: "request_count_totals", context: "query_#{@query.id}", class: "grid-item block") %>
+  <%= cached_component(component: "metric_card", id: "execution_rate", context: "query_#{@query.id}", class: "grid-item block") %>
+</div>
+
+<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"
+  data-rails-pulse--index-occurred-at-param-value="occurred_at"
+>
+  <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 :occurred_at_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 @chart_data.present? %>
+        <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 %>
+    <% end %>
+  </div>
+</div>
+
+<%= render 'rails_pulse/components/panel', { title: 'Query Locations' } do %>
+  <table class="table">
+    <thead>
+      <tr>
+        <th>Location</th>
+        <th>Average Query Time</th>
+        <th>Count</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% @query.operations.group_by(&:codebase_location).each do |codebase_location, operations| %>
+        <tr>
+          <td><%= link_to codebase_location, '#' %></td>
+          <td><%= (operations.sum(&:duration) / operations.count).round(2) %></td>
+          <td><%= operations.count %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+<% end %>

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

@@ -0,0 +1,85 @@
+<div class="row">
+  <div class="grid-item">
+    <%= render 'rails_pulse/components/panel', { title: 'Event Sequence ' } do %>
+      <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 %>"
+            >
+              <!-- 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">
+                  <%= rails_pulse_icon('chevron-right', width: '16', class: 'transition-transform duration-200') %>
+                </div>
+              </td>
+              
+              <td class="operations-label-cell">
+                <span class="text-link" style="color: <%= event_color(bar.operation.operation_type) %>;">
+                  <%= html_escape(bar.operation.label) %>
+                </span>
+              </td>
+              
+              <td class="whitespace-nowrap">
+                <%= bar.duration.round(2) %> ms
+              </td>
+              
+              <td class="whitespace-nowrap">
+                <% impact_percentage = total_request_duration > 0 ? (bar.operation.duration / total_request_duration * 100).round(1) : 0 %>
+                <%= impact_percentage %>%
+              </td>
+              
+              <td class="whitespace-nowrap text-center">
+                <%= operation_status_indicator(bar.operation) %>
+              </td>
+              
+              <td class="operations-event-cell">
+                <div
+                  class="operations-event"
+                  style="left: <%= bar.left_pct %>%; width: <%= bar.width_pct %>%; background-color: <%= event_color(bar.operation.operation_type) %>;">
+                </div>
+              </td>
+              
+              <td>
+                <%= link_to rails_pulse_icon('eye', width: '16', class: 'inline-block mbi-2'), operation_path(bar.operation), title: 'View details', data: { turbo_frame: "_top" } %>
+                <% if bar.operation.operation_type == "sql" && bar.operation.query.present? %>
+                  <%= link_to rails_pulse_icon('database', width: '16', class: 'inline-block'), query_path(bar.operation.query), title: 'View query', data: { turbo_frame: "_top" } %>
+                <% end %>
+              </td>
+            </tr>
+            
+            <!-- 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">
+                <%= turbo_frame_tag "operation_#{bar.operation.id}_details", data: { "operation-url": operation_path(bar.operation) } do %>
+                <% end %>
+              </td>
+            </tr>
+            </tbody>
+          <% end %>
+        </tbody>
+      </table>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,31 @@
+<%
+  columns = []
+  columns << { field: :route_path, label: 'Route', class: 'w-auto' } if @route.blank?
+
+  columns += [
+    { field: :occurred_at, label: 'Timestamp', class: (@route.present? ? 'w-auto' : 'w-40') },
+    { field: :duration, label: 'Duration', class: 'w-24' },
+    { field: :status, label: 'HTTP Status', class: 'w-20' },
+    { field: :status_indicator, label: 'Status', class: 'w-16' }
+  ]
+%>
+
+<table class="table mbs-4">
+  <%= render "rails_pulse/components/table_head", columns: columns %>
+
+  <tbody>
+    <% @table_data.each do |route_request| %>
+      <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"><%= link_to human_readable_occurred_at(route_request.occurred_at), request_path(route_request), data: { turbo_frame: '_top' } %></td>
+        <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>
+      </tr>
+    <% end %>
+  </tbody>
+</table>
+
+<%= render "rails_pulse/components/table_pagination" %>

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

@@ -0,0 +1,64 @@
+<%= render 'rails_pulse/components/breadcrumbs' %>
+
+<div class="row">
+  <%= cached_component(component: "metric_card", id: "average_response_times", context: "requests", class: "grid-item block") %>
+  <%= cached_component(component: "metric_card", id: "percentile_response_times", context: "requests", class: "grid-item block") %>
+  <%= cached_component(component: "metric_card", id: "request_count_totals", context: "requests", class: "grid-item block") %>
+  <%= cached_component(component: "metric_card", id: "error_rate_per_route", context: "requests", class: "grid-item block") %>
+</div>
+
+<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 :occurred_at_range,
+            RailsPulse::RequestsController::TIME_RANGE_OPTIONS,
+            { selected: @selected_time_range },
+            { class: "input" }
+          %>
+          <%= form.select :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 @chart_data.present? %>
+        <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 %>
+
+      <%= turbo_frame_tag :requests_index_table, data: { rails_pulse__index_target: "indexTable" } do %>
+        <%= render 'rails_pulse/requests/table' %>
+      <% end %>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,44 @@
+<%= render 'rails_pulse/components/breadcrumbs' %>
+
+<div class="row">
+  <div class="grid-item">
+    <%= render 'rails_pulse/components/panel', title: 'Request Details' do %>
+      <dl class="descriptive-list mbs-4">
+        <dt>Route</dt>
+        <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>
+        <dd><%= @request.status %></dd>
+        <dt>Error</dt>
+        <dd><%= @request.is_error? ? 'Yes' : 'No' %></dd>
+      </dl>
+    <% end %>
+  </div>
+
+  <div class="grid-item">
+    <%= render 'rails_pulse/components/panel', title: 'Performance Breakdown' do %>
+      <% breakdown = operations_performance_breakdown(@request.operations) %>
+      <dl class="descriptive-list mbs-4">
+        <dt>Database</dt>
+        <dd><%= breakdown[:database] %>% (<%= pluralize(@request.operations.by_type('sql').count, 'query') %>)</dd>
+        <dt>View Rendering</dt>
+        <dd><%= breakdown[:view] %>%</dd>
+        <dt>Application Logic</dt>
+        <dd><%= breakdown[:application] %>%</dd>
+        <dt>Other Operations</dt>
+        <dd><%= breakdown[:other] %>%</dd>
+        <dt>Total Operations</dt>
+        <dd><%= @request.operations.count %></dd>
+        <dt>Slowest Operation</dt>
+        <dd><%= @request.operations.maximum(:duration)&.round(2) %> ms</dd>
+      </dl>
+    <% end %>
+  </div>
+</div>
+
+<%= render 'operations', operations: @request.operations %>

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

@@ -0,0 +1,29 @@
+<% columns = [
+  { field: :path, label: 'Route', class: 'w-auto' },
+  { field: :average_response_time_ms, label: 'Average Response Time', class: 'w-36' },
+  { field: :max_response_time_ms, label: 'Max Response Time', class: 'w-32' },
+  { field: :request_count, 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' }
+] %>
+
+<table class="table mbs-4">
+  <%= render "rails_pulse/components/table_head", columns: columns %>
+
+  <tbody>
+    <% @table_data.each do |route| %>
+      <tr>
+        <td class="whitespace-nowrap"><%= link_to route.path_and_method, route, data: { turbo_frame: '_top' } %></td>
+        <td class="whitespace-nowrap"><%= route.average_response_time_ms.to_i %> ms</td>
+        <td class="whitespace-nowrap"><%= route.max_response_time_ms.to_i %> ms</td>
+        <td class="whitespace-nowrap"><%= number_with_delimiter route.request_count %></td>
+        <td class="whitespace-nowrap"><%= route.requests_per_minute < 1 ? '< 1' : route.requests_per_minute.round(2) %></td>
+        <td class="whitespace-nowrap"><%= route.error_rate_percentage %>%</td>
+        <td class="whitespace-nowrap text-center"><%= route_status_indicator(route.status_indicator) %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>
+
+<%= render "rails_pulse/components/table_pagination" %>

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

@@ -0,0 +1,65 @@
+<%= render 'rails_pulse/components/breadcrumbs' %>
+
+<div class="row">
+  <%= cached_component(component: "metric_card", id: "average_response_times", context: "routes", class: "grid-item block") %>
+  <%= cached_component(component: "metric_card", id: "percentile_response_times", context: "routes", class: "grid-item block") %>
+  <%= cached_component(component: "metric_card", id: "request_count_totals", context: "routes", class: "grid-item block") %>
+  <%= cached_component(component: "metric_card", id: "error_rate_per_route", context: "routes", class: "grid-item block") %>
+</div>
+
+<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: routes_path, class: "flex items-center justify-between gap mb-4" do |form| %>
+        <div class="flex items-center grow gap">
+          <%= form.search_field :path_cont, placeholder: "Filter by route", autocomplete: "off", class: "input", style: "max-inline-size: 250px" %>
+          <%= form.select :occurred_at_range,
+            RailsPulse::RoutesController::TIME_RANGE_OPTIONS,
+            { selected: @selected_time_range },
+            { class: "input" }
+          %>
+          <%= form.select :duration,
+            duration_options(:route),
+            { selected: @selected_response_range },
+            { class: "input" }
+          %>
+          <%= link_to "Reset", routes_path, class: "btn btn--borderless show@md" if params.has_key?(:q) %>
+          <%= form.submit "Search", class: "btn show@sm" %>
+        </div>
+      <% end %>
+
+      <% if @chart_data.present? %>
+        <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 %>
+
+      <%= turbo_frame_tag :routes_index_table, data: { rails_pulse__index_target: "indexTable" } do %>
+        <%= render 'rails_pulse/routes/table' %>
+      <% end %>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,67 @@
+<%= render 'rails_pulse/components/breadcrumbs' %>
+
+<h1 class="text-2xl mbe-2"><%= @route.path_and_method %></h1>
+
+<div class="row">
+  <%= cached_component(component: "metric_card", id: "average_response_times", context: "routes_#{@route.id}", class: "grid-item block") %>
+  <%= cached_component(component: "metric_card", id: "percentile_response_times", context: "routes_#{@route.id}", class: "grid-item block") %>
+  <%= cached_component(component: "metric_card", id: "request_count_totals", context: "routes_#{@route.id}", class: "grid-item block") %>
+  <%= cached_component(component: "metric_card", id: "error_rate_per_route", context: "routes_#{@route.id}", class: "grid-item block") %>
+</div>
+
+<div
+  class="row"
+  data-controller="rails-pulse--index"
+  data-rails-pulse--index-chart-id-value="route_repsonses_chart"
+  data-rails-pulse--index-occurred-at-param-value="occurred_at"
+>
+  <div class="grid-item">
+    <%= render 'rails_pulse/components/panel', { title: 'Route Reqeusts', } do %>
+      <%= search_form_for @ransack_query, url: route_path(@route), class: "flex items-center justify-between gap mb-4" do |form| %>
+        <div class="flex items-center grow gap">
+          <%= form.select :occurred_at_range,
+            RailsPulse::RoutesController::TIME_RANGE_OPTIONS,
+            { selected: @selected_time_range },
+            { class: "input" }
+          %>
+          <%= form.select :duration,
+            duration_options(:route),
+            { selected: @selected_response_range },
+            { class: "input" }
+          %>
+          <%= link_to "Reset", route_path(@route), class: "btn btn--borderless show@md" if params.has_key?(:q) %>
+          <%= form.submit "Search", class: "btn show@sm" %>
+        </div>
+      <% end %>
+
+      <% if @chart_data.present? %>
+        <div
+          class="chart-container chart-container--slim"
+          data-rails-pulse--index-target="chart"
+        >
+          <%= bar_chart(
+            @chart_data,
+            code: false,
+            id: "route_repsonses_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 :index_table do %>
+        <%= render 'rails_pulse/requests/table' %>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/app/views/rails_pulse/skeletons/_chart.html.erb

@@ -0,0 +1,3 @@
+<div class="skeleton-container">
+  <div class="skeleton-chart" style="height: 300px; background: #f5f5f5; border-radius: 4px;"></div>
+</div>

data/app/views/rails_pulse/skeletons/_metric_card.html.erb

@@ -0,0 +1,20 @@
+<div class="grid-item">
+  <div class="card card-compact">
+    <div class="flex flex-col">
+      <!-- Skeleton for the card title -->
+      <div class="flex">
+        <h2 class="grow font-semibold leading-none mbe-1 uppercase text-xs skeleton" style="height: 12px; width: 60%;"></h2>
+      </div>
+      <!-- Skeleton for the main metric value -->
+      <div class="row mbs-2" style="height: 50px; margin-bottom: 0;">
+        <div class="grid-item">
+          <h4 class="text-xl mbs-1 font-bold skeleton" style="height: 24px; width: 80%;"></h4>
+        </div>
+      </div>
+      <!-- Skeleton for the trend badge -->
+      <div class="mbs-2" style="height: 10px;">
+        <span class="skeleton rounded-full" style="height: 20px; width: 120px; display: inline-block;"></span>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/rails_pulse/skeletons/_panel.html.erb

@@ -0,0 +1,19 @@
+<div class="card">
+  <div class="flex flex-col">
+    <div class="flex">
+      <!-- Skeleton title -->
+      <h2 class="grow font-semibold leading-none mie-4 uppercase text-xs skeleton" style="height: 20px; width: 40%;"></h2>
+
+      <div class="flex gap items-center">
+        <!-- Skeleton links -->
+        <div class="skeleton" style="height: 20px; width: 20px; border-radius: 4px;"></div>
+        <div class="skeleton" style="height: 20px; width: 20px; border-radius: 4px;"></div>
+      </div>
+    </div>
+
+    <!-- Skeleton content -->
+    <div class="mbs-2">
+      <div class="skeleton" style="height: 200px; width: 100%; border-radius: 4px;"></div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,8 @@
+<div class="skeleton-container">
+  <div class="skeleton-header"></div>
+  <div class="skeleton-table">
+    <div class="skeleton-row"></div>
+    <div class="skeleton-row"></div>
+    <div class="skeleton-row"></div>
+  </div>
+</div>

data/config/importmap.rb

@@ -0,0 +1,12 @@
+pin "application", to: "rails_pulse/application.js"
+
+# echarts is a dependency of the rails_charts gem
+pin "echarts", to: "echarts.min.js"
+# pin "echarts/theme/inspired", to: "echarts/theme/inspired.js"
+pin "rails_pulse/theme", to: "rails_pulse/theme.js"
+
+pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
+
+# pin "@hotwired/stimulus", to: "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
+pin "@hotwired/stimulus", to: "https://cdn.jsdelivr.net/npm/@hotwired/stimulus@3.2.2/dist/stimulus.js"
+pin_all_from File.expand_path("../app/javascript/rails_pulse", __dir__), under: "rails_pulse"