railswatch 1.0.0

data/app/helpers/railswatch/railswatch_helper.rb

@@ -0,0 +1,338 @@
+# frozen_string_literal: true
+
+module Railswatch
+  module RailswatchHelper
+    NAVIGATION_ITEMS = [
+      { section: :dashboard, label: 'Overview', route: :railswatch_url },
+      { section: :requests, label: 'Requests', route: :railswatch_requests_url },
+      { section: :recent, label: 'Recent', route: :railswatch_recent_url },
+      { section: :slow, label: 'Slow', route: :railswatch_slow_url },
+      { section: :crashes, label: 'Errors', route: :railswatch_crashes_url },
+      {
+        section: :resources,
+        label: 'System',
+        route: :railswatch_resources_url,
+        visible: -> { Railswatch._resource_monitor_enabled }
+      },
+      {
+        section: :sidekiq,
+        label: 'Sidekiq',
+        route: :railswatch_sidekiq_url,
+        visible: -> { defined?(Sidekiq) }
+      },
+      {
+        section: :delayed_job,
+        label: 'Delayed Job',
+        route: :railswatch_delayed_job_url,
+        visible: -> { defined?(Delayed::Job) }
+      },
+      {
+        section: :grape,
+        label: 'Grape',
+        route: :railswatch_grape_url,
+        visible: -> { defined?(Grape) }
+      },
+      {
+        section: :rake,
+        label: 'Rake',
+        route: :railswatch_rake_url,
+        visible: -> { Railswatch.include_rake_tasks }
+      },
+      {
+        section: :custom,
+        label: 'Custom',
+        route: :railswatch_custom_url,
+        visible: -> { Railswatch.include_custom_events }
+      }
+    ].freeze
+
+    PAGE_META = {
+      index: {
+        eyebrow: 'Performance',
+        title: 'Application Command Center',
+        description: lambda {
+          "Live request health, latency, and throughput over the last #{human_window(Railswatch.duration)}."
+        },
+        badge: 'Live'
+      },
+      requests: {
+        eyebrow: 'Analysis',
+        title: 'Request Breakdown',
+        description: 'Compare controllers and actions by volume, percentiles, averages, and slowest paths.'
+      },
+      recent: {
+        eyebrow: 'Realtime',
+        title: 'Recent Requests',
+        description: lambda {
+          "Inspect fresh traffic sampled from the last #{human_window(Railswatch.recent_requests_time_window)}."
+        }
+      },
+      slow: {
+        eyebrow: 'Latency',
+        title: 'Slow Requests',
+        description: lambda {
+          "Focus on requests above #{Railswatch.slow_requests_threshold} ms " \
+            'and inspect traces before they age out.'
+        }
+      },
+      crashes: {
+        eyebrow: 'Reliability',
+        title: '500 Error Timeline',
+        description: 'Review failures, backtraces, and the request context that led to them.'
+      },
+      resources: {
+        eyebrow: 'Infrastructure',
+        title: 'System Resources',
+        description: lambda {
+          'Watch CPU, memory, and disk behavior across the last ' \
+            "#{human_window(Railswatch.system_monitor_duration)}."
+        }
+      },
+      sidekiq: {
+        eyebrow: 'Async Jobs',
+        title: 'Sidekiq Workload',
+        description: 'Track job throughput, worker runtime, and recent executions.'
+      },
+      delayed_job: {
+        eyebrow: 'Async Jobs',
+        title: 'Delayed Job Workload',
+        description: 'Monitor queue throughput, execution time, and recent jobs.'
+      },
+      grape: {
+        eyebrow: 'API',
+        title: 'Grape Endpoints',
+        description: 'Keep an eye on API traffic volume and recent endpoint activity.'
+      },
+      rake: {
+        eyebrow: 'Automation',
+        title: 'Rake Tasks',
+        description: 'Surface task runtime and throughput for your scheduled or manual jobs.'
+      },
+      custom: {
+        eyebrow: 'Business Events',
+        title: 'Custom Measurements',
+        description: 'Explore custom event timing and throughput captured with Railswatch.measure.'
+      },
+      default: {
+        eyebrow: 'Monitoring',
+        title: 'Railswatch',
+        description: 'Observe the health of your Rails application.'
+      }
+    }.freeze
+
+    def navigation_items
+      NAVIGATION_ITEMS.filter_map do |item|
+        next unless navigation_item_visible?(item)
+
+        item.slice(:section, :label).merge(path: railswatch.public_send(item[:route]))
+      end
+    end
+
+    def page_meta(section = action_name.to_sym)
+      resolve_page_meta(PAGE_META[section.to_sym] || PAGE_META[:default])
+    end
+
+    def round_it(value, limit = 1)
+      return nil unless value
+      return value if value.is_a?(Integer)
+
+      value.nan? ? nil : value.round(limit)
+    end
+
+    def duration_alert_class(duration_str) # rubocop:disable Metrics/MethodLength
+      if duration_str.to_s =~ /(\d+.?\d+?)/
+        duration = ::Regexp.last_match(1).to_f
+        if duration >= 500
+          'has-background-danger has-text-white-bis'
+        elsif duration >= 200
+          'has-background-warning has-text-black-ter'
+        else
+          'has-background-success has-text-white-bis'
+        end
+      else
+        'has-background-light'
+      end
+    end
+
+    def extract_duration(str)
+      return str[:duration].to_s if str.is_a?(Hash) && str[:duration]
+
+      if str =~ /Duration: (\d+.?\d+?ms)/i
+        ::Regexp.last_match(1)
+      else
+        '-'
+      end
+    end
+
+    def ms(value, limit = 1)
+      result = round_it(value, limit)
+      return '-' if result.nil?
+
+      result && result != 0 ? "#{result} ms" : '< 0 ms'
+    end
+
+    def compact_number(value)
+      return '0' if value.blank?
+
+      number_to_human(value, precision: 3, strip_insignificant_zeros: true)
+    end
+
+    def percentage(value, precision = 1)
+      number_to_percentage(value.to_f, precision: precision)
+    end
+
+    def health_tone(value)
+      return 'neutral' if value.nil?
+      return 'critical' if value >= 5
+      return 'warning' if value >= 1
+
+      'healthy'
+    end
+
+    def card_tone(label)
+      case label.to_s.downcase
+      when 'p50'
+        'healthy'
+      when 'p95'
+        'warning'
+      when 'p99'
+        'critical'
+      else
+        'neutral'
+      end
+    end
+
+    def card_caption(label)
+      case label.to_s.downcase
+      when 'p50'
+        'Median request latency'
+      when 'p95'
+        'Tail latency for slower traffic'
+      when 'p99'
+        'Worst-case request experience'
+      else
+        'Request insight'
+      end
+    end
+
+    def short_path(path, length: 55)
+      content_tag :span, title: path do
+        truncate(path, length: length)
+      end
+    end
+
+    def link_to_path(event)
+      if event[:method] == 'GET'
+        link_to(short_path(event[:path]), event[:path], target: '_blank', title: short_path(event[:path]))
+      else
+        short_path(event[:path])
+      end
+    end
+
+    def report_name(hash)
+      hash.except(:on).collect do |key, value|
+        next if value.blank?
+
+        %(
+        <div class="control">
+          <span class="tags has-addons">
+            <span class="tag">#{key}</span>
+            <span class="tag is-info is-light">#{value}</span>
+          </span>
+        </div>)
+      end.compact.join.html_safe
+    end
+
+    def status_tag(status) # rubocop:disable Metrics/MethodLength
+      klass = case status.to_s
+              when /error/, /^5/
+                'tag is-danger'
+              when /^4/
+                'tag is-warning'
+              when /^3/
+                'tag is-info'
+              when /^2/, /success/
+                'tag is-success'
+              end
+      content_tag(:span, class: klass) do
+        status
+      end
+    end
+
+    def bot_icon(user_agent) # rubocop:disable Metrics/MethodLength
+      return nil if user_agent.blank?
+
+      browser = Browser.new(user_agent)
+      if browser.bot?
+        content_tag(:span, class: 'user-agent-icon', title: browser.bot&.name) do
+          icon('bot')
+        end
+      else
+        content_tag(:span, class: 'user-agent-icon user-agent-icon-user', title: 'Real User') do
+          icon('user')
+        end
+      end
+    end
+
+    def icon(name)
+      @icons ||= {}
+
+      # https://www.iconfinder.com/iconsets/vivid
+      @icons[name] ||= raw File.read(File.expand_path(File.dirname(__FILE__) + "/../../assets/images/#{name}.svg"))
+    end
+
+    def format_rm_datetime(event)
+      dt = Railswatch::Reports::BaseReport.time_in_app_time_zone(event)
+      I18n.l(dt, format: '%Y-%m-%d %H:%M:%S')
+    end
+
+    # Keep this method permissive because host applications may already call
+    # `format_datetime` with arbitrary values in their own templates.
+    def format_datetime(event = nil, **)
+      return event.to_s unless event.respond_to?(:in_time_zone) || event.respond_to?(:utc)
+
+      format_rm_datetime(event)
+    end
+
+    def active?(section)
+      actions = {
+        dashboard: 'index', crashes: 'crashes',
+        requests: 'requests', resources: 'resources',
+        recent: 'recent', slow: 'slow',
+        sidekiq: 'sidekiq', delayed_job: 'delayed_job',
+        grape: 'grape', rake: 'rake', custom: 'custom'
+      }
+      return false unless controller_name == 'railswatch'
+
+      'is-active' if action_name == actions[section]
+    end
+
+    private
+
+    def navigation_item_visible?(item)
+      visibility_rule = item[:visible]
+      visibility_rule.nil? || instance_exec(&visibility_rule)
+    end
+
+    def resolve_page_meta(meta)
+      meta.transform_values do |value|
+        value.respond_to?(:call) ? instance_exec(&value) : value
+      end
+    end
+
+    def human_window(duration)
+      seconds = duration.to_i
+      return '0 minutes' if seconds <= 0
+
+      parts = []
+      { day: 1.day, hour: 1.hour, minute: 1.minute }.each do |name, unit|
+        next if seconds < unit
+
+        value, seconds = seconds.divmod(unit)
+        parts << "#{value} #{name}#{'s' if value != 1}"
+      end
+
+      parts.first(2).join(' ')
+    end
+  end
+end

data/app/views/railswatch/_panel.html.erb

@@ -0,0 +1,15 @@
+<div class="cd-panel cd-panel--from-right js-cd-panel-main" data-skip-autoupdate>
+  <div class="cd-panel__container">
+    <nav class="panel">
+      <p class="panel-heading">
+        <span class="field is-grouped is-grouped-multiline"></span>
+      </p>
+      <div class="panel-block">
+        <div class="cd-panel__content">
+        </div> <!-- cd-panel__content -->
+      </div>
+    </nav>
+  </div> <!-- cd-panel__container -->
+</div> <!-- cd-panel -->
+
+<div class="panel-overlay" data-skip-autoupdate></div>

data/app/views/railswatch/layouts/railswatch.html.erb

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html data-theme="light">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Railswatch</title>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag if ::Rails::VERSION::STRING.to_f >= 5.2 %>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
+    <script>
+      (() => {
+        try {
+          const savedTheme = localStorage.getItem('railswatch:theme');
+          const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+          document.documentElement.dataset.theme = savedTheme || systemTheme;
+        } catch (_error) {
+          document.documentElement.dataset.theme = 'light';
+        }
+      })();
+    </script>
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+    <%= Railswatch.stylesheet_link_tag "style" %>
+    <%= Railswatch.stylesheet_link_tag "panel" %>
+    <%= Railswatch.stylesheet_link_tag "responsive" %>
+
+    <link rel="shortcut icon" href="/favicon.ico">
+
+    <%= Railswatch.javascript_importmap_tags "application", {
+      "@rails/ujs" => "https://cdn.jsdelivr.net/npm/@rails/ujs@7.1.3-4/+esm",
+      "jquery" => "https://cdn.jsdelivr.net/npm/jquery@3.7.1/+esm",
+      "apexcharts" => "https://cdn.jsdelivr.net/npm/apexcharts@3.45.0/+esm",
+      "ms" => "https://cdn.jsdelivr.net/npm/ms@2.1.3/+esm",
+      "stupid-table-plugin" => "https://cdn.jsdelivr.net/npm/stupid-table-plugin@1.1.3/+esm",
+      "idiomorph" => "https://cdn.jsdelivr.net/npm/idiomorph@0.7.4/+esm"
+    } %>
+
+    <script>
+      window.annotationsData = <%= raw Railswatch::Reports::AnnotationsReport.new.data.to_json %>;
+      window.railswatchDuration = <%= Railswatch.duration.to_i * 1000 %>;
+    </script>
+  </head>
+
+  <body class="has-sticky-footer rm-body">
+    <div class="loader-wrapper">
+      <div class="loader is-loading"></div>
+    </div>
+
+    <div class="rm-backdrop" aria-hidden="true">
+      <div class="rm-backdrop__orb rm-backdrop__orb--one"></div>
+      <div class="rm-backdrop__orb rm-backdrop__orb--two"></div>
+      <div class="rm-backdrop__grid"></div>
+    </div>
+
+    <div class="main-content rm-main-content">
+      <section class="section rm-shell">
+        <div class="container is-fluid is-size-7 rm-container">
+          <%= render '/railswatch/shared/header' %>
+          <main class="rm-content-shell">
+            <%= yield %>
+          </main>
+        </div>
+      </section>
+    </div>
+
+    <footer class="footer footer-box rm-footer">
+      <div class="container is-fluid is-size-7 rm-footer__inner">
+        <div>
+          © Railswatch
+        </div>
+        <%= link_to 'https://github.com/100rabhg/railswatch', 'https://github.com/100rabhg/railswatch', target: '_blank' %>
+        <div>v<%= Railswatch::VERSION %></div>
+      </div>
+    </footer>
+
+    <%= render '/railswatch/panel' %>
+  </body>
+</html>

data/app/views/railswatch/railswatch/_card.html.erb

@@ -0,0 +1,7 @@
+<div class="widget">
+  <section class="rm-surface rm-widget-card rm-metric-card" data-tone="<%= card_tone(card.label) %>">
+    <div class="rm-metric-card__label"><%= card.label %></div>
+    <strong class="rm-metric-card__value"><%= ms card.value %></strong>
+    <p class="rm-metric-card__caption"><%= card_caption(card.label) %></p>
+  </section>
+</div>

data/app/views/railswatch/railswatch/_chart.html.erb

@@ -0,0 +1,13 @@
+<div class="widget">
+  <section class="rm-surface rm-widget-card">
+    <header class="rm-widget-card__header">
+      <div>
+        <h2 class="rm-widget-card__title"><%= chart.subtitle %></h2>
+      </div>
+    </header>
+    <div class="rm-widget-card__body">
+      <%= tag.railswatch_chart(chart.data.to_json.html_safe, id: chart.id, type: chart.type, legend: chart.legend, units: chart.units, class: "chart") %>
+      <p class="rm-widget-card__description"><%= chart.description %></p>
+    </div>
+  </section>
+</div>

data/app/views/railswatch/railswatch/_crashes_table_content.html.erb

@@ -0,0 +1,62 @@
+<table class="<%= table.table_classes %>">
+  <thead>
+    <tr>
+      <th></th>
+      <th data-sort="string">Datetime</th>
+      <th data-sort="string">Controller#action</th>
+      <th data-sort="string">Method</th>
+      <th data-sort="string">Format</th>
+      <th></th>
+      <th data-sort="string">Path</th>
+      <th data-sort="string">Exception</th>
+      <th data-sort="string">Status</th>
+      <th data-sort="float">Duration</th>
+      <th data-sort="float">Views</th>
+      <th data-sort="float">DB</th>
+    </tr>
+  </thead>
+  <tbody>
+    <% if table.data.empty? %>
+      <tr>
+        <td colspan="12"><%= table.empty_message %></td>
+      </tr>
+    <% end %>
+
+    <% table.data.each do |e| %>
+      <tr>
+        <td>
+          <% if e[:request_id].present? %>
+            <%= link_to railswatch.railswatch_trace_path(id: e[:request_id]), remote: true do %>
+              <span class="stats_icon_max"><%= icon 'activity' %></span>
+            <% end %>
+          <% end %>
+        </td>
+        <td><%= format_rm_datetime e[:datetime] %></td>
+        <td>
+          <%= link_to railswatch.railswatch_summary_path({controller_eq: e[:controller], action_eq: e[:action]}), remote: true do %>
+            <span class="details_icon">
+              <%= icon 'details' %>
+            </span>
+            <%= e[:controller] + '#' + e[:action] %>
+          <% end %>
+        </td>
+        <td><%= e[:method] %></td>
+        <td><%= e[:format] %></td>
+        <td><%= bot_icon e["user_agent"] %></td>
+        <td>
+          <span class="with_external_icon">
+            <%= link_to_path(e) %>
+            <span class="icon external_icon">
+              <%= icon('external') %>
+            </span>
+          </span>
+        </td>
+        <td><%= e[:exception] %></td>
+        <td><%= status_tag e[:status] %></td>
+        <td class="nowrap"><%= ms e[:duration] %></td>
+        <td class="nowrap"><%= ms e[:view_runtime] %></td>
+        <td class="nowrap"><%= ms e[:db_runtime] %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/app/views/railswatch/railswatch/_custom_events_table_content.html.erb

@@ -0,0 +1,27 @@
+<table class="<%= table.table_classes %>">
+  <thead>
+    <tr>
+      <th data-sort="string">Datetime</th>
+      <th data-sort="string">Tag</th>
+      <th data-sort="string">Namespace</th>
+      <th data-sort="string">Status</th>
+      <th data-sort="float">Duration</th>
+    </tr>
+  </thead>
+  <tbody>
+    <% if table.data.empty? %>
+      <tr>
+        <td colspan="5"><%= table.empty_message %></td>
+      </tr>
+    <% end %>
+    <% table.data.each do |e| %>
+      <tr>
+        <td><%= format_rm_datetime e[:datetime] %></td>
+        <td><%= e[:tag_name] %></td>
+        <td><%= e[:namespace_name] %></td>
+        <td><%= status_tag e[:status] %></td>
+        <td class="nowrap"><%= ms e[:duration] %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/app/views/railswatch/railswatch/_delayed_job_table_content.html.erb

@@ -0,0 +1,52 @@
+<table class="<%= table.table_classes %>">
+  <thead>
+    <tr>
+      <th data-sort="string">Datetime</th>
+      <th data-sort="string">Job ID</th>
+      <th data-sort="string">Type</th>
+      <th data-sort="string">Class</th>
+      <th data-sort="string">Method</th>
+      <th data-sort="string">Status</th>
+      <th data-sort="float">Duration</th>
+      <th>Args</th>
+      <th>Error</th>
+    </tr>
+  </thead>
+  <tbody>
+    <% if table.data.empty? %>
+      <tr>
+        <td colspan="9"><%= table.empty_message %></td>
+      </tr>
+    <% end %>
+    <% table.data.each do |e| %>
+      <tr>
+        <td><%= format_rm_datetime e[:datetime] %></td>
+        <td><%= e[:jid] %></td>
+        <td><%= e[:source_type] %></td>
+        <td><%= e[:class_name] %></td>
+        <td><%= e[:method_name] %></td>
+        <td><%= status_tag e[:status] %></td>
+        <td class="nowrap"><%= ms e[:duration], 1 %></td>
+        <td class="very-small-text">
+          <% args = e[:job_args] %>
+          <% if args.present? %>
+            <%= args.is_a?(Array) ? args.map(&:inspect).join(', ') : args.inspect %>
+          <% else %>
+            -
+          <% end %>
+        </td>
+        <td>
+          <% if e[:error_message].present? %>
+            <div><%= e[:error_message] %></div>
+          <% end %>
+          <% if e[:error_backtrace].present? %>
+            <pre class="rm-backtrace rm-backtrace-inline"><%= e[:error_backtrace] %></pre>
+          <% end %>
+          <% if e[:error_message].blank? && e[:error_backtrace].blank? %>
+            -
+          <% end %>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/app/views/railswatch/railswatch/_export.html.erb

@@ -0,0 +1,4 @@
+<%= link_to request.original_url + '.csv', class: 'rm-icon-button rm-icon-button--ghost download_icon', title: 'Export CSV' do %>
+  <%= icon('download') %>
+  <span>Export</span>
+<% end %>

data/app/views/railswatch/railswatch/_grape_requests_table_content.html.erb

@@ -0,0 +1,31 @@
+<table class="<%= table.table_classes %>">
+  <thead>
+    <tr>
+      <th data-sort="string">Datetime</th>
+      <th data-sort="string">Method</th>
+      <th data-sort="string">Path</th>
+      <th data-sort="string">Status</th>
+      <th data-sort="float">endpoint_render.grape</th>
+      <th data-sort="float">format_response.grape</th>
+      <th data-sort="float">endpoint_run.grape</th>
+    </tr>
+  </thead>
+  <tbody>
+    <% if table.data.empty? %>
+      <tr>
+        <td colspan="7"><%= table.empty_message %></td>
+      </tr>
+    <% end %>
+    <% table.data.each do |e| %>
+      <tr>
+        <td><%= format_rm_datetime e[:datetime] %></td>
+        <td><%= e[:method] %></td>
+        <td><%= e[:path] %></td>
+        <td><%= status_tag e[:status] %></td>
+        <td class="nowrap"><%= ms e["endpoint_render.grape"] %></td>
+        <td class="nowrap"><%= ms e["format_response.grape"] %></td>
+        <td class="nowrap"><%= ms e["endpoint_run.grape"] %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>