flare 0.1.0

data/app/views/flare/jobs/show.html.erb

@@ -0,0 +1,323 @@
+<%
+  # Get root span properties
+  root_props = @root_span ? @root_span[:properties] : {}
+  job_class = root_props["code.namespace"]
+  queue_name = root_props["messaging.destination"]
+  job_id = root_props["messaging.message.id"] || root_props["messaging.message_id"]
+
+  # Calculate total duration from root span
+  total_duration_ms = @root_span ? @root_span[:duration_ms] : 1
+  root_start = @root_span ? @root_span[:start_timestamp] : 0
+  started_at = @root_span ? Time.at(@root_span[:start_timestamp] / 1_000_000_000.0) : nil
+
+  # Extract job name from span name
+  job_display_name = job_class || @job[:name].to_s.sub(/ (process|publish)$/, '')
+
+  # Count span categories
+  span_counts = @child_spans.each_with_object(Hash.new(0)) do |span, counts|
+    counts[span_category(span)] += 1
+  end
+%>
+
+<div class="page-header">
+  <div class="detail-header">
+    <div class="detail-header-left">
+      <div class="detail-title">
+        <span class="badge badge-job">Job</span>
+        <h1><%= job_display_name %></h1>
+      </div>
+      <div class="detail-meta">
+        <div class="meta-item">
+          <span class="meta-label">Duration</span>
+          <span class="meta-value mono"><%= format_duration(total_duration_ms) %></span>
+        </div>
+        <div class="meta-item">
+          <span class="meta-label">Time</span>
+          <span class="meta-value"><%= started_at&.strftime("%b %d, %Y %H:%M:%S") %></span>
+        </div>
+        <% if queue_name %>
+          <div class="meta-item">
+            <span class="meta-label">Queue</span>
+            <span class="meta-value"><%= queue_name %></span>
+          </div>
+        <% end %>
+        <% if job_id %>
+          <div class="meta-item">
+            <span class="meta-label">Job ID</span>
+            <span class="meta-value mono"><%= job_id %></span>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="page-body">
+  <div class="card">
+    <div class="tabs">
+      <a class="tab active" onclick="showTab('timeline')">Timeline (<%= @child_spans.size %>)</a>
+      <a class="tab" onclick="showTab('details')">Details</a>
+    </div>
+
+    <div id="tab-details" class="tab-content">
+      <%
+        shown_keys = %w[code.namespace messaging.destination messaging.message.id messaging.message_id]
+        other_props = root_props.reject { |k, v| shown_keys.include?(k) || v.is_a?(Hash) || v.is_a?(Array) }
+      %>
+      <div class="details-sections">
+        <!-- Job Section -->
+        <div class="details-section">
+          <div class="section-header">
+            <div class="section-icon job">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
+                <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
+              </svg>
+            </div>
+            <span class="section-title">Job</span>
+          </div>
+          <div class="section-grid">
+            <div class="detail-item">
+              <span class="detail-label">Duration</span>
+              <span class="detail-value prominent"><%= format_duration(total_duration_ms) %></span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">Time</span>
+              <span class="detail-value"><%= started_at&.strftime("%b %d, %Y at %H:%M:%S") %></span>
+            </div>
+            <% if job_class %>
+              <div class="detail-item">
+                <span class="detail-label">Job Class</span>
+                <span class="detail-value mono"><%= job_class %></span>
+              </div>
+            <% end %>
+            <% if job_id %>
+              <div class="detail-item full-width">
+                <span class="detail-label">Job ID</span>
+                <span class="detail-value mono secondary"><%= job_id %></span>
+              </div>
+            <% end %>
+          </div>
+        </div>
+
+        <!-- Queue Section -->
+        <% if queue_name %>
+          <div class="details-section">
+            <div class="section-header">
+              <div class="section-icon queue">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <line x1="8" y1="6" x2="21" y2="6"></line>
+                  <line x1="8" y1="12" x2="21" y2="12"></line>
+                  <line x1="8" y1="18" x2="21" y2="18"></line>
+                  <line x1="3" y1="6" x2="3.01" y2="6"></line>
+                  <line x1="3" y1="12" x2="3.01" y2="12"></line>
+                  <line x1="3" y1="18" x2="3.01" y2="18"></line>
+                </svg>
+              </div>
+              <span class="section-title">Queue</span>
+            </div>
+            <div class="section-grid">
+              <div class="detail-item">
+                <span class="detail-label">Queue Name</span>
+                <span class="detail-value mono"><%= queue_name %></span>
+              </div>
+            </div>
+          </div>
+        <% end %>
+
+        <!-- Other Properties Section -->
+        <% if other_props.any? %>
+          <div class="details-section">
+            <div class="section-header">
+              <div class="section-icon other">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <circle cx="12" cy="12" r="1"></circle>
+                  <circle cx="19" cy="12" r="1"></circle>
+                  <circle cx="5" cy="12" r="1"></circle>
+                </svg>
+              </div>
+              <span class="section-title">Additional Properties</span>
+            </div>
+            <div class="section-grid">
+              <% other_props.each do |key, value| %>
+                <div class="detail-item">
+                  <span class="detail-label"><%= key.to_s.split(".").last.titleize %></span>
+                  <span class="detail-value mono truncate" title="<%= value %>"><%= value %></span>
+                </div>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+
+        <% if root_props.blank? %>
+          <div class="details-section">
+            <div class="empty-clues" style="padding: 1.25rem;">
+              <p>No details recorded.</p>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+    <div id="tab-timeline" class="tab-content active">
+      <% if @child_spans.blank? %>
+        <div class="empty-clues">
+          <i class="bi bi-clock-history" style="font-size: 2rem; color: var(--cb-warm-gray-light);"></i>
+          <p>No timeline events recorded for this job.</p>
+        </div>
+      <% else %>
+        <div class="legend">
+          <div class="legend-item clickable active" data-filter="all" onclick="filterSpans('all')"><div class="legend-color all"></div> All (<%= @child_spans.size %>)</div>
+          <% if span_counts["sql"] > 0 %><div class="legend-item clickable" data-filter="sql" onclick="filterSpans('sql')"><div class="legend-color sql"></div> SQL (<%= span_counts["sql"] %>)</div><% end %>
+          <% if span_counts["cache"] > 0 %><div class="legend-item clickable" data-filter="cache" onclick="filterSpans('cache')"><div class="legend-color cache"></div> Cache (<%= span_counts["cache"] %>)</div><% end %>
+          <% if span_counts["view"] > 0 %><div class="legend-item clickable" data-filter="view" onclick="filterSpans('view')"><div class="legend-color view"></div> View (<%= span_counts["view"] %>)</div><% end %>
+          <% if span_counts["http"] > 0 %><div class="legend-item clickable" data-filter="http" onclick="filterSpans('http')"><div class="legend-color http"></div> HTTP (<%= span_counts["http"] %>)</div><% end %>
+          <% if span_counts["mailer"] > 0 %><div class="legend-item clickable" data-filter="mailer" onclick="filterSpans('mailer')"><div class="legend-color mailer"></div> Mailer (<%= span_counts["mailer"] %>)</div><% end %>
+          <% if span_counts["job"] > 0 %><div class="legend-item clickable" data-filter="job" onclick="filterSpans('job')"><div class="legend-color job"></div> Job (<%= span_counts["job"] %>)</div><% end %>
+          <% if span_counts["controller"] > 0 %><div class="legend-item clickable" data-filter="controller" onclick="filterSpans('controller')"><div class="legend-color controller"></div> Controller (<%= span_counts["controller"] %>)</div><% end %>
+          <% if span_counts["other"] > 0 %><div class="legend-item clickable" data-filter="other" onclick="filterSpans('other')"><div class="legend-color other"></div> Other (<%= span_counts["other"] %>)</div><% end %>
+          <div style="margin-left: auto;">
+            <button type="button" onclick="collapseAll()" class="collapse-btn">
+              <i class="bi bi-arrows-collapse"></i>
+              Collapse All
+            </button>
+          </div>
+        </div>
+
+        <div style="padding: 0.75rem;">
+          <div class="waterfall-header">
+            <div>Event</div>
+            <div>Duration</div>
+          </div>
+
+          <div class="waterfall">
+            <% @child_spans.each_with_index do |span, index| %>
+              <%
+                offset_ns = span[:start_timestamp] - root_start
+                offset_ms = offset_ns / 1_000_000.0
+                left = (offset_ms / [total_duration_ms, 1].max * 100).clamp(0, 99.5)
+                width = (span[:duration_ms] / [total_duration_ms, 1].max * 100).clamp(0.5, [0.5, 100 - left].max)
+                category = span_category(span)
+
+                props = span[:properties] || {}
+                sql_statement = nil
+                display_name = if span[:name] == "instantiation.active_record"
+                  class_name = props["class_name"] || "Record"
+                  count = props["record_count"]
+                  count ? "#{class_name} Instantiation (#{count})" : "#{class_name} Instantiation"
+                elsif category == "sql"
+                  sql_statement = props["db.statement"]
+                  props["name"] || span[:name]
+                elsif category == "cache"
+                  key = props["key"]
+                  op = span[:name].to_s.sub(".active_support", "").sub("cache_", "")
+                  key ? "#{op}: #{key.to_s.truncate(80)}" : span[:name]
+                elsif category == "view"
+                  identifier = props["identifier"] || props["code.filepath"]
+                  if identifier
+                    identifier.to_s.sub(/^.*\/app\/views\//, "")
+                  else
+                    span[:name]
+                  end
+                elsif category == "http"
+                  url = props["http.url"] || props["http.target"]
+                  method = props["http.method"]
+                  "#{method} #{url}".strip.presence || span[:name]
+                elsif category == "controller"
+                  ns = props["code.namespace"]
+                  fn = props["code.function"]
+                  ns && fn ? "#{ns}##{fn}" : span[:name]
+                else
+                  span[:name]
+                end
+              %>
+              <div class="waterfall-row" onclick="toggleSpan(<%= index %>)" id="row-<%= index %>" data-span-type="<%= category %>" <% if sql_statement.present? %>data-sql="<%= sql_statement.truncate(500).gsub('"', "'") %>"<% end %>>
+                <div class="waterfall-bar-container">
+                  <div class="waterfall-bar <%= category %>" style="left: <%= left %>%; width: <%= width %>%;"></div>
+                  <span class="waterfall-label"><%= display_name %></span>
+                  <span class="waterfall-duration"><%= format_duration(span[:duration_ms]) %></span>
+                </div>
+              </div>
+              <div class="span-detail <%= category %>" id="span-<%= index %>">
+                <pre><code><%= format_content(span[:properties]) %></code></pre>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+<script>
+  function showTab(tabName) {
+    document.querySelectorAll('.tab-content').forEach(function(el) { el.classList.remove('active'); });
+    document.querySelectorAll('.tab').forEach(function(el) { el.classList.remove('active'); });
+    document.getElementById('tab-' + tabName).classList.add('active');
+    event.target.classList.add('active');
+  }
+
+  function toggleSpan(index) {
+    const detail = document.getElementById('span-' + index);
+    const row = document.getElementById('row-' + index);
+    if (detail.classList.contains('visible')) {
+      detail.classList.remove('visible');
+      row.classList.remove('selected');
+    } else {
+      detail.classList.add('visible');
+      row.classList.add('selected');
+    }
+  }
+
+  function collapseAll() {
+    document.querySelectorAll('.span-detail.visible').forEach(function(el) { el.classList.remove('visible'); });
+    document.querySelectorAll('.waterfall-row.selected').forEach(function(el) { el.classList.remove('selected'); });
+  }
+
+  function filterSpans(filterType) {
+    document.querySelectorAll('.legend-item.clickable').forEach(function(el) { el.classList.remove('active'); });
+    document.querySelector('.legend-item[data-filter="' + filterType + '"]').classList.add('active');
+    document.querySelectorAll('.waterfall-row').forEach(function(row) {
+      const spanType = row.getAttribute('data-span-type');
+      if (filterType === 'all' || spanType === filterType) {
+        row.classList.remove('hidden');
+      } else {
+        row.classList.add('hidden');
+        row.classList.remove('selected');
+      }
+    });
+    document.querySelectorAll('.span-detail').forEach(function(detail) {
+      const index = detail.id.replace('span-', '');
+      const row = document.getElementById('row-' + index);
+      if (row.classList.contains('hidden')) {
+        detail.classList.add('hidden-by-filter');
+        detail.classList.remove('visible');
+      } else {
+        detail.classList.remove('hidden-by-filter');
+      }
+    });
+  }
+
+  // SQL tooltip
+  document.addEventListener('DOMContentLoaded', function() {
+    const sqlTooltip = document.getElementById('sql-tooltip');
+    let tooltipTimeout;
+    document.querySelectorAll('.waterfall-row[data-sql]').forEach(function(row) {
+      row.addEventListener('mouseenter', function() {
+        const sql = row.getAttribute('data-sql');
+        if (sql && !row.classList.contains('selected')) {
+          tooltipTimeout = setTimeout(function() {
+            sqlTooltip.textContent = sql;
+            sqlTooltip.classList.add('visible');
+          }, 200);
+        }
+      });
+      row.addEventListener('mouseleave', function() {
+        clearTimeout(tooltipTimeout);
+        sqlTooltip.classList.remove('visible');
+      });
+    });
+  });
+</script>
+
+<div id="sql-tooltip"></div>

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

@@ -0,0 +1,120 @@
+<div class="page-header">
+  <h1 class="page-title"><%= page_title %></h1>
+  <div class="filters">
+    <%= form_tag(requests_path, method: :get, id: "filter-form") do %>
+      <%= select_tag :origin,
+        options_for_select([
+          ["All Origins", ""],
+          ["App", "app"],
+          ["Rails", "rails"]
+        ], current_origin),
+        class: "filter-select",
+        onchange: "this.form.submit()" %>
+      <%= select_tag :method,
+        options_for_select([
+          ["All Methods", ""],
+          ["GET", "GET"],
+          ["POST", "POST"],
+          ["PUT", "PUT"],
+          ["PATCH", "PATCH"],
+          ["DELETE", "DELETE"]
+        ], params[:method]),
+        class: "filter-select",
+        onchange: "this.form.submit()" %>
+      <%= select_tag :status,
+        options_for_select([
+          ["All Status", ""],
+          ["2xx Success", "2xx"],
+          ["3xx Redirect", "3xx"],
+          ["4xx Client Error", "4xx"],
+          ["5xx Server Error", "5xx"]
+        ], params[:status]),
+        class: "filter-select",
+        onchange: "this.form.submit()" %>
+      <%= text_field_tag :name, params[:name], placeholder: "Search...", class: "filter-select", style: "min-width: 200px;", onchange: "this.form.submit()" %>
+    <% end %>
+  </div>
+</div>
+
+<div class="page-body">
+  <div class="card">
+    <div class="card-body">
+      <% if @requests.blank? %>
+        <div class="empty-state">
+          <div class="empty-state-icon">
+            <i class="bi bi-speedometer2" style="font-size: 1.5rem;"></i>
+          </div>
+          <h3>No requests found</h3>
+          <p>Data will appear here as your application processes requests.</p>
+        </div>
+      <% else %>
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th style="width: 70px;">Verb</th>
+              <th style="width: 80px; text-align: right;">Status</th>
+              <th style="width: 100px; text-align: right;">Duration</th>
+              <th style="width: 120px; text-align: right;">Happened</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% @requests.each do |req| %>
+              <% started_at = Time.at(req[:start_timestamp] / 1_000_000_000.0) rescue nil %>
+              <%
+                # Display controller#action if available, otherwise fall back to span name
+                display_name = if req[:controller] && req[:action]
+                  "#{req[:controller]}##{req[:action]}"
+                else
+                  req[:name]
+                end
+              %>
+              <tr onclick="navigateIfNotSelecting('<%= request_path(req[:trace_id]) %>')" style="cursor: pointer;">
+                <td class="path-cell">
+                  <span class="action-name path-text" title="<%= display_name %>"><%= display_name %></span>
+                  <span class="path-subtext" title="<%= req[:http_target] %>">
+                    <%= req[:http_target] %>
+                  </span>
+                </td>
+                <td>
+                  <% method = req[:http_method] || "GET" %>
+                  <span class="badge badge-<%= method.downcase %>"><%= method %></span>
+                </td>
+                <td style="text-align: right;">
+                  <% status = req[:http_status] %>
+                  <% status_class = case status.to_s
+                     when /^2/ then "success"
+                     when /^[45]/ then "error"
+                     when /^3/ then "warning"
+                     else "warning"
+                     end %>
+                  <span class="badge badge-status badge-<%= status_class %>"><%= status %></span>
+                </td>
+                <td class="duration" style="text-align: right;"><%= format_duration(req[:duration_ms]) %></td>
+                <td class="timestamp" style="text-align: right;"><%= started_at ? time_ago_in_words(started_at) : "-" %></td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+
+        <% if @total_count > 0 %>
+          <div class="pagination">
+            <div class="pagination-side">
+              <% if @has_prev %>
+                <%= link_to "Previous", requests_path(request.query_parameters.merge(offset: [@offset - 50, 0].max)), class: "pagination-link" %>
+              <% end %>
+            </div>
+            <div class="pagination-info">
+              <%= number_with_delimiter(@offset + 1) %> - <%= number_with_delimiter([@offset + @requests.size, @total_count].min) %> of <%= number_with_delimiter(@total_count) %>
+            </div>
+            <div class="pagination-side" style="text-align: right;">
+              <% if @has_next %>
+                <%= link_to "Next", requests_path(request.query_parameters.merge(offset: @offset + 50)), class: "pagination-link" %>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</div>