trainspotter 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f16e8da81b6991459274f9b8833de22ec79efb5fa2766ebf81e63b6e1546d578
-  data.tar.gz: 3af436892b6ee8a664710e22b28d9e2a58790462f9861cff8a2ae0cc0dea69be
+  metadata.gz: aa4ae9c5438445126c81de98e2cf663b64382f8cb867e04e772dcc23ac38e8b5
+  data.tar.gz: 07327d4432eca139ce38295901e6bbf81e1e790bcede56aa52eb9f32c4210e1c
 SHA512:
-  metadata.gz: 0a6a38c16936cd01883a74ed208e163faec3829f19fbf5f01d7c0b003efc8e5bfca4e015236ce0aec7253cb912822f26c28d77b32fb1e92b69b49bdbba09e74d
-  data.tar.gz: c754879f16a6706abfabfd59dc7b9ad89f06713047f375a9912cb32d3abfaab91a7673b29cd2e110d53e854d2d8f869f3f66bb28adb3dcac83052661feac7aac
+  metadata.gz: 0e44fbe117b303aab6bbba57ea65a269be8157d2321def16c58ff682bf61240e5eb5a518771c438ab3baeda52d1ac6d3c2995393f281db4d476ae9e98b0b8cb3
+  data.tar.gz: 100a4af5b00ee54ea1bb660cc244dfbab1faaaf4b271f1bc804c3469d8f9c62838a259dd348e9974cd57e09f71b6172ef2b09c46878de1b000e0b91875b18255

data/app/assets/javascripts/application.js

@@ -0,0 +1,25 @@
+import * as Turbo from "@hotwired/turbo"
+
+window.trainspotterAutoScroll = true
+
+document.addEventListener("turbo:before-stream-render", (event) => {
+  document.getElementById("connection-status")?.classList.add("connected")
+  document.getElementById("connection-status")?.classList.remove("disconnected")
+
+  if (window.trainspotterAutoScroll && event.target.action === "append") {
+    requestAnimationFrame(() => {
+      const list = document.getElementById("request-list")
+      if (list) list.scrollTop = list.scrollHeight
+    })
+  }
+})
+
+document.addEventListener("turbo:load", () => {
+  const source = document.querySelector("turbo-stream-source")
+  if (source) {
+    source.addEventListener("error", () => {
+      document.getElementById("connection-status")?.classList.remove("connected")
+      document.getElementById("connection-status")?.classList.add("disconnected")
+    })
+  }
+})

data/app/controllers/trainspotter/requests_controller.rb

@@ -1,5 +1,7 @@
 module Trainspotter
   class RequestsController < ApplicationController
+    include ActionController::Live
+
     def index
       @current_log_file = params[:log_file] || Trainspotter.default_log_file
       @current_ip = params[:ip].presence
@@ -8,28 +10,50 @@ module Trainspotter
       all_requests = filter_requests(RequestRecord.recent(log_file: @current_log_file))
       @available_ips = RequestRecord.unique_ips(log_file: @current_log_file)
       @requests = filter_by_ip(all_requests).first(50)
+      @last_id = @requests.first&.id
     end
 
-    def poll
+    def stream
+      response.headers["Content-Type"] = "text/event-stream"
+      response.headers["Cache-Control"] = "no-cache"
+      response.headers["X-Accel-Buffering"] = "no"
+
       log_file = params[:log_file] || Trainspotter.default_log_file
       ip_filter = params[:ip].presence
-      since_id = params[:since_id].presence
+      last_id = params[:since_id].presence
+
+      sse = SSE.new(response.stream, event: "message")
 
-      new_requests = filter_by_ip(
-        filter_requests(RequestRecord.poll_for_changes(log_file: log_file, since_id: since_id)),
-        ip_filter
-      )
+      loop do
+        new_requests = filter_by_ip(
+          filter_requests(RequestRecord.poll_for_changes(log_file: log_file, since_id: last_id)),
+          ip_filter
+        )
 
-      render json: {
-        requests: new_requests.map { |r| render_request_html(r) },
-        since_id: new_requests.last&.id
-      }
+        new_requests.each do |request|
+          html = render_request_turbo_stream(request)
+          sse.write(html)
+          last_id = request.id
+        end
+
+        sleep 1
+      end
+    rescue IOError, ActionController::Live::ClientDisconnected
+      # Client disconnected - this is normal
+    ensure
+      sse.close
     end
 
     private
 
-    def render_request_html(request)
-      render_to_string(partial: "trainspotter/requests/request", locals: { request: request })
+    def render_request_turbo_stream(request)
+      html = render_to_string(partial: "trainspotter/requests/request", locals: { request: request })
+      <<~TURBO
+        <turbo-stream action="append" target="request-list">
+          <template>#{html}</template>
+        </turbo-stream>
+        <turbo-stream action="remove" target="empty-state"></turbo-stream>
+      TURBO
     end
 
     def filter_requests(requests)

data/app/controllers/trainspotter/sessions_controller.rb

@@ -13,12 +13,12 @@ module Trainspotter
     end
 
     def requests
+      session_record = SessionRecord.find(params[:id])
       requests = RequestRecord.for_session(params[:id], limit: 200)
       @requests = filter_requests(requests)
 
-      render json: {
-        requests: @requests.map { |r| render_to_string(partial: "trainspotter/requests/request", locals: { request: r }) }
-      }
+      render partial: "trainspotter/sessions/requests_frame",
+             locals: { session: session_record, requests: @requests }
     end
 
     private

data/app/helpers/trainspotter/application_helper.rb

@@ -1,7 +1,5 @@
 module Trainspotter
   module ApplicationHelper
-    include Trainspotter.isolated_assets_helper
-
     def ansi_to_html(text)
       AnsiToHtml.convert(text)
     end

data/app/views/layouts/trainspotter/application.html.erb

@@ -7,9 +7,9 @@
 
   <%= yield :head %>
 
-  <%= engine_stylesheet_link_tag "application" %>
-  <%= engine_javascript_importmap_tags "application", {
-    "@hotwired/stimulus" => "https://cdn.jsdelivr.net/npm/@hotwired/stimulus@3/+esm"
+  <%= Trainspotter.stylesheet_link_tag "application" %>
+  <%= Trainspotter.javascript_importmap_tags "application", {
+    "@hotwired/turbo" => "https://cdn.jsdelivr.net/npm/@hotwired/turbo@8/+esm"
   } %>
 </head>
 <body>

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

@@ -1,49 +1,44 @@
-<div class="trainspotter"
-     data-controller="requests"
-     data-requests-poll-url-value="<%= poll_requests_path %>"
-     data-requests-root-url-value="<%= root_path %>"
-     data-requests-since-id-value="<%= @requests.first&.id %>"
-     data-requests-log-file-value="<%= @current_log_file %>"
-     data-requests-ip-value="<%= @current_ip %>">
+<div class="trainspotter">
   <header class="trainspotter-header">
     <h1>Trainspotter</h1>
     <div class="trainspotter-controls">
-      <% if @available_log_files.size > 1 %>
-        <select name="log_file" class="log-file-selector" data-requests-target="logFile" data-action="change->requests#changeLogFile">
-          <% @available_log_files.each do |log_file| %>
-            <option value="<%= log_file %>" <%= "selected" if log_file == @current_log_file %>><%= log_file %></option>
-          <% end %>
-        </select>
-      <% else %>
-        <span class="current-log-file"><%= @current_log_file %></span>
-      <% end %>
-      <select name="ip" class="ip-filter-selector" data-requests-target="ipFilter" data-action="change->requests#changeIp">
-        <option value="">All IPs</option>
-        <% @available_ips.each do |ip| %>
-          <option value="<%= ip %>" <%= "selected" if ip == @current_ip %>><%= ip %></option>
+      <%= form_with url: requests_path, method: :get, data: { turbo_action: "replace" } do %>
+        <% if @available_log_files.size > 1 %>
+          <%= select_tag :log_file,
+              options_for_select(@available_log_files, @current_log_file),
+              class: "log-file-selector",
+              onchange: "this.form.requestSubmit()" %>
+        <% else %>
+          <span class="current-log-file"><%= @current_log_file %></span>
         <% end %>
-      </select>
+        <%= select_tag :ip,
+            options_for_select([["All IPs", ""]] + @available_ips.map { |ip| [ip, ip] }, @current_ip),
+            class: "ip-filter-selector",
+            onchange: "this.form.requestSubmit()" %>
+      <% end %>
       <label class="auto-scroll-toggle">
-        <input type="checkbox" checked data-requests-target="autoScroll">
+        <input type="checkbox" checked id="auto-scroll" onchange="window.trainspotterAutoScroll = this.checked">
         Auto-scroll
       </label>
-      <span class="connection-status" data-requests-target="status">●</span>
+      <span class="connection-status" id="connection-status">●</span>
       <%= link_to "Sessions", sessions_path, class: "nav-link" %>
     </div>
   </header>
 
   <main class="trainspotter-main">
-    <div class="request-list" data-requests-target="list">
+    <div class="request-list" id="request-list">
       <% @requests.each do |request| %>
         <%= render "trainspotter/requests/request", request: request %>
       <% end %>
     </div>
 
     <% if @requests.empty? %>
-      <div class="empty-state">
+      <div class="empty-state" id="empty-state">
         <p>No requests found in the log file.</p>
         <p class="hint">Make some requests to your Rails app to see them here.</p>
       </div>
     <% end %>
   </main>
 </div>
+
+<turbo-stream-source src="<%= stream_requests_path(log_file: @current_log_file, ip: @current_ip, since_id: @last_id) %>"></turbo-stream-source>

data/app/views/trainspotter/sessions/_requests_frame.html.erb

@@ -0,0 +1,11 @@
+<turbo-frame id="session_<%= session.id %>_requests">
+  <div class="session-requests">
+    <% if requests.empty? %>
+      <p class="empty-hint">No requests in this session.</p>
+    <% else %>
+      <% requests.each do |request| %>
+        <%= render "trainspotter/requests/request", request: request %>
+      <% end %>
+    <% end %>
+  </div>
+</turbo-frame>

data/app/views/trainspotter/sessions/_session.html.erb

@@ -1,4 +1,4 @@
-<details class="session-group <%= session.ongoing? ? 'ongoing' : 'ended' %>" data-session-id="<%= session.id %>" data-action="toggle->sessions#loadSession">
+<details class="session-group <%= session.ongoing? ? 'ongoing' : 'ended' %>">
   <summary class="session-summary">
     <span class="session-identity">
       <% if session.anonymous? %>
@@ -22,7 +22,9 @@
     </time>
   </summary>
 
-  <div class="session-requests">
-    <p class="loading-hint">Loading requests...</p>
-  </div>
+  <turbo-frame id="session_<%= session.id %>_requests" src="<%= requests_session_path(session) %>">
+    <div class="session-requests">
+      <p class="loading-hint">Loading requests...</p>
+    </div>
+  </turbo-frame>
 </details>

data/app/views/trainspotter/sessions/index.html.erb

@@ -1,22 +1,22 @@
-<div class="trainspotter"
-     data-controller="sessions"
-     data-sessions-sessions-url-value="<%= sessions_path %>">
+<div class="trainspotter">
   <header class="trainspotter-header">
     <h1>Trainspotter - Sessions</h1>
     <div class="trainspotter-controls">
-      <% if @available_log_files.size > 1 %>
-        <select name="log_file" class="log-file-selector" data-sessions-target="logFile" data-action="change->sessions#changeLogFile">
-          <% @available_log_files.each do |log_file| %>
-            <option value="<%= log_file %>" <%= "selected" if log_file == @current_log_file %>><%= log_file %></option>
-          <% end %>
-        </select>
-      <% else %>
-        <span class="current-log-file"><%= @current_log_file %></span>
+      <%= form_with url: sessions_path, method: :get, data: { turbo_action: "replace" } do %>
+        <% if @available_log_files.size > 1 %>
+          <%= select_tag :log_file,
+              options_for_select(@available_log_files, @current_log_file),
+              class: "log-file-selector",
+              onchange: "this.form.requestSubmit()" %>
+        <% else %>
+          <span class="current-log-file"><%= @current_log_file %></span>
+        <% end %>
+        <label class="show-anonymous-toggle">
+          <%= check_box_tag :show_anonymous, "1", @show_anonymous,
+              onchange: "this.form.requestSubmit()" %>
+          Show anonymous
+        </label>
       <% end %>
-      <label class="show-anonymous-toggle">
-        <input type="checkbox" <%= "checked" if @show_anonymous %> data-sessions-target="showAnonymous" data-action="change->sessions#changeShowAnonymous">
-        Show anonymous
-      </label>
       <%= link_to "Requests", requests_path, class: "nav-link" %>
     </div>
   </header>

data/config/routes.rb

@@ -3,7 +3,7 @@ Trainspotter::Engine.routes.draw do
 
   resources :requests, only: [:index] do
     collection do
-      get :poll
+      get :stream
     end
   end
 

data/lib/trainspotter/version.rb

@@ -1,3 +1,3 @@
 module Trainspotter
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: trainspotter
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Micah Geisel
@@ -15,14 +15,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '8.0'
+        version: '7.2'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '8.0'
+        version: '7.2'
 - !ruby/object:Gem::Dependency
   name: sqlite3
   requirement: !ruby/object:Gem::Requirement
@@ -69,16 +69,16 @@ dependencies:
   name: isolate_assets
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 0.3.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 0.3.0
 description: A mountable Rails engine that provides a beautiful web interface for
   viewing and understanding your Rails logs. Groups requests with their SQL queries
   and view renders, with real-time updates.
@@ -91,13 +91,11 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
+- app/assets/javascripts/application.js
+- app/assets/stylesheets/application.css
 - app/controllers/trainspotter/application_controller.rb
 - app/controllers/trainspotter/requests_controller.rb
 - app/controllers/trainspotter/sessions_controller.rb
-- app/engine_assets/javascripts/application.js
-- app/engine_assets/javascripts/controllers/requests_controller.js
-- app/engine_assets/javascripts/controllers/sessions_controller.js
-- app/engine_assets/stylesheets/application.css
 - app/helpers/trainspotter/ansi_to_html.rb
 - app/helpers/trainspotter/application_helper.rb
 - app/jobs/trainspotter/ingest/line.rb
@@ -115,6 +113,7 @@ files:
 - app/views/layouts/trainspotter/application.html.erb
 - app/views/trainspotter/requests/_request.html.erb
 - app/views/trainspotter/requests/index.html.erb
+- app/views/trainspotter/sessions/_requests_frame.html.erb
 - app/views/trainspotter/sessions/_session.html.erb
 - app/views/trainspotter/sessions/index.html.erb
 - config/cucumber.yml
@@ -137,7 +136,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 3.3.0
+      version: 3.2.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="

data/app/engine_assets/javascripts/application.js

@@ -1,7 +0,0 @@
-import { Application } from "@hotwired/stimulus"
-import RequestsController from "trainspotter/controllers/requests_controller"
-import SessionsController from "trainspotter/controllers/sessions_controller"
-
-const application = Application.start()
-application.register("requests", RequestsController)
-application.register("sessions", SessionsController)

data/app/engine_assets/javascripts/controllers/requests_controller.js

@@ -1,67 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = ["list", "status", "logFile", "ipFilter", "autoScroll"]
-  static values = {
-    pollUrl: String,
-    rootUrl: String,
-    sinceId: String,
-    logFile: String,
-    ip: String
-  }
-
-  connect() {
-    this.scrollToBottom()
-    this.poll()
-  }
-
-  poll() {
-    const params = new URLSearchParams()
-    params.set("log_file", this.logFileValue)
-    if (this.sinceIdValue) params.set("since_id", this.sinceIdValue)
-    if (this.ipValue) params.set("ip", this.ipValue)
-
-    fetch(`${this.pollUrlValue}?${params}`)
-      .then(response => response.json())
-      .then(data => {
-        if (data.requests?.length > 0) {
-          data.requests.forEach(html => {
-            this.listTarget.insertAdjacentHTML("beforeend", html)
-          })
-          this.scrollToBottom()
-          this.element.querySelector(".empty-state")?.remove()
-        }
-        if (data.since_id) this.sinceIdValue = data.since_id
-        this.statusTarget.classList.remove("disconnected")
-        this.statusTarget.classList.add("connected")
-      })
-      .catch(() => {
-        this.statusTarget.classList.remove("connected")
-        this.statusTarget.classList.add("disconnected")
-      })
-      .finally(() => setTimeout(() => this.poll(), 1000))
-  }
-
-  scrollToBottom() {
-    if (this.autoScrollTarget.checked) {
-      this.listTarget.scrollTop = this.listTarget.scrollHeight
-    }
-  }
-
-  changeLogFile() {
-    this.logFileValue = this.logFileTarget.value
-    window.location.href = this.buildUrl()
-  }
-
-  changeIp() {
-    this.ipValue = this.ipFilterTarget.value
-    window.location.href = this.buildUrl()
-  }
-
-  buildUrl() {
-    const params = new URLSearchParams()
-    params.set("log_file", this.logFileValue)
-    if (this.ipValue) params.set("ip", this.ipValue)
-    return `${this.rootUrlValue}?${params}`
-  }
-}

data/app/engine_assets/javascripts/controllers/sessions_controller.js

@@ -1,43 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = ["logFile", "showAnonymous"]
-  static values = { sessionsUrl: String }
-
-  changeLogFile() {
-    window.location.href = this.buildUrl()
-  }
-
-  changeShowAnonymous() {
-    window.location.href = this.buildUrl()
-  }
-
-  buildUrl() {
-    const params = new URLSearchParams()
-    if (this.hasLogFileTarget) params.set("log_file", this.logFileTarget.value)
-    if (this.hasShowAnonymousTarget && this.showAnonymousTarget.checked) {
-      params.set("show_anonymous", "1")
-    }
-    return `${this.sessionsUrlValue}?${params}`
-  }
-
-  loadSession(event) {
-    const details = event.currentTarget
-    if (!details.open || details.dataset.loaded) return
-
-    details.dataset.loaded = "true"
-    const sessionId = details.dataset.sessionId
-    const content = details.querySelector(".session-requests")
-
-    fetch(`${this.sessionsUrlValue}/${sessionId}/requests`)
-      .then(response => response.json())
-      .then(data => {
-        content.innerHTML = data.requests?.length > 0
-          ? data.requests.join("")
-          : '<p class="empty-hint">No requests in this session.</p>'
-      })
-      .catch(() => {
-        content.innerHTML = '<p class="error-hint">Failed to load requests.</p>'
-      })
-  }
-}