onlylogs 0.9.0 → 0.10.0

data/app/views/onlylogs/shared/_log_container_styles.html.erb

@@ -1,11 +1,32 @@
 <style>
     .onlylogs-log-container {
+        --ol-surface: #ffffff;
+        --ol-toolbar-bg: #fbfcfe;
+        --ol-border: #dde3ec;
+        --ol-control-border: #b9c4d3;
+        --ol-hover: #eef2f8;
+        --ol-ink: #12171f;
+        --ol-ink-2: #2c3441;
+        --ol-ink-3: #58626f;
+        --ol-muted: #8a95a3;
+        --ol-faint: #97a1af;
+        --ol-accent: #2563eb;
+        --ol-accent-soft: #e8f0fe;
+        --ol-accent-border: #9dbcf7;
+        --ol-accent-ink: #1a4fc4;
+        --ol-live: #16a34a;
+        --ol-alert: #dc2626;
+        --ol-amber: #b7791f;
+        --ol-radius: 3px;
+
         background-color: var(--onlylogs-bg-color, none);
         width: var(--onlylogs-width, 100%);
         height: var(--onlylogs-height, 100%); /* Take full height of parent container */
         min-height: var(--onlylogs-min-height, 400px);
         display: grid;
-        grid-template-rows: auto var(--onlylogs-toolbar-height, 80px);
+        /* The toolbar sizes itself so a wrapping row can never clip; the log pane
+           takes whatever is left. Hosts can still pin a height with the variable. */
+        grid-template-rows: 1fr var(--onlylogs-toolbar-height, auto);
 
         font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
         font-size: var(--onlylogs-font-size, 0.8rem);
@@ -18,6 +39,9 @@
         .onlylogs-log-lines {
             overflow-y: auto;
             overflow-x: auto;
+            background-color: var(--ol-surface);
+            color: var(--ol-ink-2);
+            padding: 0.35rem 0.2rem;
 
             pre {
                 overflow: visible;
@@ -45,14 +69,6 @@
             min-width: max-content;
         }
 
-        .color-success {
-            color: green;
-        }
-
-        .color-error {
-            color: red;
-        }
-
         .fw-bold {
             font-weight: 600;
         }
@@ -91,7 +107,7 @@
 
         pre {
             margin: 0 !important;
-            padding: 0.2rem;
+            padding: 0.1rem 0.45rem;
             word-break: break-word;  /* allow breaking long tokens like UUIDs/SQL */
             white-space: pre;
 
@@ -142,21 +158,110 @@
 
         .onlylogs-log-toolbar {
           flex-shrink: 0;
-          padding: 0.5rem;
+          padding: 0.5rem 0.65rem;
           display: flex;
-          flex-wrap: wrap;
-          align-items: center;
-          gap: 0.75rem;
+          flex-direction: column;
+          gap: 0.4rem;
+          background-color: var(--ol-toolbar-bg);
+          border-top: 1px solid var(--ol-border);
+          color: var(--ol-ink-3);
+          }
+
+          /* Controls on the first row, state on the second, so what you can change
+             never has to compete for space with what the viewer is telling you. */
+          .onlylogs-toolbar-row {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: 0.75rem;
+            min-height: 1.6rem;
+          }
+
+          .onlylogs-toolbar-row--status {
+            gap: 0.4rem;
+          }
+
+          .onlylogs-toolbar-row__end {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-left: auto;
+          }
 
+          .status-message:not(:empty)::before {
+            content: "· ";
+          }
 
+          /* The toolbar is a different shape in each mode: the range slider is
+             meaningless while tailing, autoscroll is meaningless while searching. */
+          &[data-log-streamer-mode-value="live"] [data-onlylogs-mode="static"],
+          &[data-log-streamer-mode-value="static"] [data-onlylogs-mode="live"] {
+            display: none;
+          }
 
+          .onlylogs-mode-switch {
+            display: inline-flex;
+            border: 1px solid var(--ol-control-border);
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: var(--ol-surface);
+            flex-shrink: 0;
+          }
+
+          .onlylogs-mode-switch__button {
+            font: inherit;
+            font-weight: 500;
+            border: 0;
+            background: transparent;
+            color: var(--ol-ink-3);
+            padding: 0.25rem 0.6rem;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 0.3rem;
+            transition: background-color 0.15s, color 0.15s;
+
+            & + & {
+              border-left: 1px solid var(--ol-border);
+            }
+
+            &:hover {
+              background-color: var(--ol-hover);
+            }
+
+            &[aria-pressed="true"] {
+              color: #fff;
+            }
+          }
+
+          &[data-log-streamer-mode-value="live"] .onlylogs-mode-switch__button[data-onlylogs-mode-button="live"] {
+            background-color: var(--ol-live);
+          }
+
+          &[data-log-streamer-mode-value="static"] .onlylogs-mode-switch__button[data-onlylogs-mode-button="static"] {
+            background-color: var(--ol-accent);
+          }
+
+          .search-whole-file-button {
+            font: inherit;
+            border: 1px solid var(--ol-accent-border);
+            background-color: var(--ol-accent-soft);
+            color: var(--ol-accent-ink);
+            border-radius: var(--ol-radius);
+            padding: 0.22rem 0.5rem;
+            cursor: pointer;
+            transition: background-color 0.15s;
+
+            &:hover {
+              background-color: #d7e5fd;
+            }
           }
           .clear-filter-button {
             position: absolute;
-            right: 0.25rem;
+            right: 0.2rem;
             background: none;
             border: none;
-            color: #666;
+            color: var(--ol-muted);
             cursor: pointer;
             font-size: 0.8rem;
             padding: 0;
@@ -175,16 +280,15 @@
           }
 
           .grep-warning {
-            color: #f59e0b;
+            color: var(--ol-amber);
             font-size: 1.2em;
             cursor: help;
-            margin-left: auto;
           }
 
           .file-size {
-            color: #666;
+            color: var(--ol-muted);
             cursor: help;
-            margin-left: auto;
+            white-space: nowrap;
           }
 
           .websocket-status {
@@ -192,17 +296,17 @@
             border-radius: 50%;
             background-color: rgba(255, 255, 255, 0.1);
             
-            &--connected {
+            &.websocket-status--connected {
               background-color: rgba(34, 197, 94, 0.2);
               animation: pulse 2s infinite;
             }
-            
-            &--disconnected {
+
+            &.websocket-status--disconnected {
               background-color: rgba(239, 68, 68, 0.2);
               animation: pulse 2s infinite;
             }
-            
-            &--rejected {
+
+            &.websocket-status--rejected {
               background-color: rgba(245, 158, 11, 0.2);
               animation: pulse 2s infinite;
             }
@@ -214,11 +318,13 @@
           }
 
           .stop-search-button {
-            background-color: #dc2626;
+            font: inherit;
+            background-color: var(--ol-alert);
             color: white;
-            border: none;
-            padding: 0.25rem 0.5rem;
-            border-radius: 0.25rem;
+            border: 1px solid var(--ol-alert);
+            padding: 0.22rem 0.5rem;
+            border-radius: var(--ol-radius);
+            cursor: pointer;
             transition: background-color 0.2s;
             
             &:hover {
@@ -253,6 +359,10 @@
           /* Toolbar utilities */
           .toolbar-label {
             margin-bottom: 0;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.35rem;
+            color: var(--ol-ink-3);
           }
 
           .filter-input-wrapper {
@@ -262,61 +372,133 @@
           }
 
           .filter-input-wrapper input {
-            padding-right: 1.5rem;
-          }
+            font: inherit;
+            padding: 0.22rem 1.4rem 0.22rem 0.4rem;
+            border: 1px solid var(--ol-control-border);
+            border-radius: var(--ol-radius);
+            background-color: var(--ol-surface);
+            color: var(--ol-ink);
+            width: 11rem;
+
+            &::placeholder {
+              color: var(--ol-muted);
+            }
 
-          .clear-button-wrapper {
-            width: 67px;
+            &:focus-visible {
+              outline: 2px solid var(--ol-accent);
+              outline-offset: 1px;
+            }
           }
 
           .results-text {
-            color: #666;
+            color: var(--ol-ink-3);
+            white-space: nowrap;
+            font-variant-numeric: tabular-nums;
+
+            &.results-text--watching {
+              color: var(--ol-amber);
+            }
+
+            &.results-text--live,
+            &.results-text--found {
+              color: var(--ol-live);
+            }
+          }
+
+          /* The finished/watching state colours the whole status line, not just the count. */
+          .onlylogs-toolbar-row--status:has(.results-text--watching) .status-message {
+            color: var(--ol-amber);
+          }
+
+          .onlylogs-toolbar-row--status:has(.results-text--found) .status-message,
+          .onlylogs-toolbar-row--status:has(.results-text--live) .status-message {
+            color: var(--ol-live);
           }
 
           .hidden-button {
             display: none;
           }
 
+          /* Sits over the (empty) log pane while search has no query. */
+          .onlylogs-search-placeholder {
+            /* Shares the log pane's grid cell rather than being positioned over
+               the container, which would also cover the toolbar. */
+            grid-row: 1;
+            grid-column: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 0.35rem;
+            text-align: center;
+            padding: 1rem;
+            color: var(--ol-muted);
+            background-color: var(--ol-surface);
+            pointer-events: none;
+
+            &[hidden] {
+              display: none;
+            }
+          }
+
+          .onlylogs-search-placeholder__title {
+            margin: 0;
+            font-weight: 600;
+            color: var(--ol-ink-3);
+          }
+
+          .onlylogs-search-placeholder__hint {
+            margin: 0;
+            max-width: 32rem;
+          }
+
+          /* Claims whatever the row has left over: a wider track is a finer
+             scrubber over the byte range. */
           .range-slider-wrapper {
             display: flex;
             align-items: center;
             gap: 0.5rem;
+            flex: 1 1 250px;
             min-width: 250px;
-            flex-shrink: 0;
+            max-width: 30rem;
           }
 
           .range-slider__container {
             display: flex;
             align-items: center;
-            gap: 0.4rem;
+            gap: 0.45rem;
             flex: 1;
-            height: 1.5rem;
           }
 
           .range-slider__label {
-            font-size: 0.75rem;
             font-weight: 500;
             white-space: nowrap;
             flex-shrink: 0;
           }
 
+          /* Track and percentages sit on one line so the group is the same height
+             as every other control and centres on the toolbar's baseline. */
           .range-slider__slider {
-            display: grid;
-            gap: 0.15rem;
+            display: flex;
+            align-items: center;
+            gap: 0.45rem;
             flex: 1;
           }
 
           .range-slider__values {
             display: flex;
             gap: 0.15rem;
-            font-size: 0.6rem;
+            color: var(--ol-muted);
             font-variant-numeric: tabular-nums;
-            justify-content: center;
+            white-space: nowrap;
+            flex-shrink: 0;
           }
 
           .range-slider__track {
             position: relative;
             height: var(--range-thumb-size);
+            flex: 1;
+            min-width: 5rem;
           }
 
           .range-slider__track::before,
@@ -376,11 +558,11 @@
           }
 
           .reset-range-button {
-            background-color: transparent;
-            color: #666;
-            border: 1px solid #ccc;
+            background-color: var(--ol-surface);
+            color: var(--ol-ink-2);
+            border: 1px solid var(--ol-control-border);
             padding: 0.3rem 0.5rem;
-            border-radius: 2px;
+            border-radius: var(--ol-radius);
             cursor: pointer;
             font-size: 0.8rem;
             transition: background-color 0.2s;
@@ -390,13 +572,28 @@
             flex-shrink: 0;
 
             &:hover {
-              background-color: #f0f0f0;
+              background-color: var(--ol-hover);
             }
 
             &:active {
-              background-color: #e0e0e0;
+              background-color: #e0e6ee;
+            }
+          }
+
+          .clear-logs-button {
+            font: inherit;
+            line-height: 1;
+            background-color: var(--ol-surface);
+            color: var(--ol-ink-2);
+            border: 1px solid var(--ol-control-border);
+            border-radius: var(--ol-radius);
+            padding: 0.22rem 0.5rem;
+            cursor: pointer;
+            transition: background-color 0.15s;
+
+            &:hover {
+              background-color: var(--ol-hover);
             }
           }
         }
-    }
 </style>

data/app/views/onlylogs/shared/_range_slider.html.erb

@@ -1,8 +1,10 @@
 <%# app/views/onlylogs/shared/_range_slider.html.erb %>
-<%# locals: (start_name:, end_name:, start_value:, end_value:, min: 0, max: 100, step: 1, label: nil, show_reset: false) %>
+<%# locals: (start_name:, end_name:, start_value:, end_value:, min: 0, max: 100, step: 1, label: nil) %>
 
 <div class="range-slider range-slider--double"
+     data-controller="range-slider"
      data-log-streamer-target="rangeSliderContainer"
+     data-action="range-slider:change->log-streamer#handleRangeUpdate range-slider:refresh->range-slider#refresh"
      style="--range-min: <%= min %>; --range-max: <%= max %>; --range-start: <%= start_value %>; --range-end: <%= end_value %>;">
 
   <div class="range-slider__container">
@@ -24,7 +26,8 @@
                step="<%= step %>"
                value="<%= start_value %>"
                data-log-streamer-target="startSlider"
-               data-action="input->log-streamer#updateRangeVisuals input->range-slider#updateVisuals change->log-streamer#updateRangeVisuals change->range-slider#updateVisuals">
+               data-range-slider-target="startInput"
+               data-action="input->range-slider#updateVisuals change->range-slider#updateVisuals">
 
         <input class="range-slider__input range-slider__input--end"
                type="range"
@@ -34,13 +37,14 @@
                step="<%= step %>"
                value="<%= end_value %>"
                data-log-streamer-target="endSlider"
-               data-action="input->log-streamer#updateRangeVisuals input->range-slider#updateVisuals change->log-streamer#updateRangeVisuals change->range-slider#updateVisuals">
+               data-range-slider-target="endInput"
+               data-action="input->range-slider#updateVisuals change->range-slider#updateVisuals">
       </div>
 
       <div class="range-slider__values">
-        <output data-log-streamer-target="startOutput"><%= start_value %></output>
+        <output data-range-slider-target="startOutput"></output>
         <span>–</span>
-        <output data-log-streamer-target="endOutput"><%= end_value %></output>
+        <output data-range-slider-target="endOutput"></output>
       </div>
     </div>
   </div>

data/lib/onlylogs/continuous_log_writer.rb

@@ -0,0 +1,161 @@
+# frozen_string_literal: true
+
+require "time"
+require "securerandom"
+
+module Onlylogs
+  # Appends realistic fake Rails request logs to a file, forever, for manual
+  # testing of live streaming and of the UI.
+  #
+  # Each "log" is a full request: Started / Processing / Parameters / SQL /
+  # Completed, with the ANSI colors ActiveRecord and ActionView emit in
+  # development, prefixed the way Onlylogs::Logger with
+  # `config.log_tags = [:request_id]` prefixes lines.
+  #
+  #   Onlylogs::ContinuousLogWriter.new("log/development.log", logs_per_batch: 5, interval: 1).call
+  #
+  # This is a development tool. It is deliberately plain Ruby (no Rails, no
+  # ActiveSupport) so it can run without booting an app, and it is not required
+  # by `onlylogs.rb` — require it explicitly where you need it.
+  class ContinuousLogWriter
+    # [method, path, controller, action, format, model]
+    ROUTES = [
+      ["GET", "/workflow_events", "WorkflowEventsController", "index", "html", "WorkflowEvent"],
+      ["GET", "/materials/search?q=steel", "MaterialsController", "search", "html", "Material"],
+      ["GET", "/projects/42", "ProjectsController", "show", "html", "Project"],
+      ["POST", "/sessions", "SessionsController", "create", "html", "User"],
+      ["POST", "/api/logs", "Api::LogsController", "ingest", "json", "LogEntry"],
+      ["GET", "/dashboard", "DashboardController", "index", "html", "Widget"]
+    ].freeze
+
+    STATUSES = [200, 200, 200, 200, 302, 404, 500].freeze
+
+    STATUS_TEXTS = {
+      200 => "OK", 302 => "Found", 404 => "Not Found", 500 => "Internal Server Error"
+    }.freeze
+
+    attr_reader :counter
+
+    def initialize(path, logs_per_batch: 1, interval: 2, out: $stdout)
+      @path = path.to_s
+      @logs_per_batch = logs_per_batch.to_i
+      @interval = interval.to_f
+      @out = out
+      @counter = 0
+    end
+
+    # Runs until interrupted (Ctrl+C).
+    def call
+      loop do
+        @logs_per_batch.times { write_request }
+        sleep @interval
+      end
+    rescue Interrupt
+      @out.puts "\nStopped after #{@counter} line(s)."
+    end
+
+    # All the lines of one request, each in the onlylogs format:
+    # [request_id] [ISO8601] [severity] <what Rails logs in development>
+    def build_request_lines(status: STATUSES.sample)
+      method, path, controller, action, format, model = ROUTES.sample
+      request_id = SecureRandom.uuid
+      time = Time.now
+
+      messages = request_messages(method, path, controller, action, format, model, status, time)
+      messages.map { |severity, text| "[#{request_id}] [#{time.iso8601}] [#{severity}] #{text}" }
+    end
+
+    private
+
+    BOLD = "\e[1m"
+    CLEAR = "\e[0m"
+    COLORS = {red: 31, green: 32, yellow: 33, blue: 34, magenta: 35, cyan: 36, white: 37}.freeze
+
+    def paint(text, color, bold: true)
+      prefix = bold ? BOLD : ""
+      "#{prefix}\e[#{COLORS.fetch(color)}m#{text}#{CLEAR}"
+    end
+
+    def request_messages(method, path, controller, action, format, model, status, time)
+      db = (rand * 20 + 0.5).round(1)
+      views = (rand * 40 + 1).round(1)
+      total = (db + views + rand * 15).round
+
+      messages = []
+      messages << ["I", %(Started #{method} "#{path}" for 127.0.0.1 at #{time})]
+      messages << ["I", "Processing by #{controller}##{action} as #{format.upcase}"]
+      messages << ["I", "  Parameters: #{parameters(method, path)}"] if method == "POST" || path.include?("?")
+      messages.concat(sql_messages(method, model, db, status))
+      messages.concat(render_messages(controller, action, format, views)) if status != 500
+      messages << ["I", completed(status, total, views, db)]
+      messages.concat(error_messages(controller, action, model)) if status == 500
+      messages
+    end
+
+    def parameters(method, path)
+      if method == "POST"
+        %({"authenticity_token" => "[FILTERED]", "session" => {"email" => "user@example.com", "password" => "[FILTERED]"}})
+      else
+        query = path.split("?").last
+        key, value = query.split("=")
+        %({"#{key}" => "#{value}"})
+      end
+    end
+
+    def sql_messages(method, model, db, status)
+      table = "#{model.gsub(/([a-z])([A-Z])/, '\1_\2').downcase}s"
+      messages = []
+      messages << ["D", sql("#{model} Load (#{(db / 2).round(1)}ms)", :cyan,
+        %(SELECT "#{table}".* FROM "#{table}" WHERE "#{table}"."id" = $1 LIMIT $2), :blue)]
+      messages << ["D", sql("User Load (#{(rand * 2).round(1)}ms)", :cyan,
+        %(SELECT "users".* FROM "users" WHERE "users"."id" = $1 LIMIT $2 /*action='show'*/), :magenta)]
+
+      if method == "POST" && status < 400
+        messages << ["D", sql("TRANSACTION (0.1ms)", :yellow, "BEGIN", :blue)]
+        messages << ["D", sql("#{model} Create (#{(db / 2).round(1)}ms)", :green,
+          %(INSERT INTO "#{table}" ("created_at", "updated_at") VALUES ($1, $2) RETURNING "id"), :magenta)]
+        messages << ["D", sql("TRANSACTION (0.3ms)", :yellow, "COMMIT", :blue)]
+      end
+      messages
+    end
+
+    def sql(name, name_color, statement, statement_color)
+      "  #{paint(name, name_color)}  #{paint(statement, statement_color)}"
+    end
+
+    def render_messages(controller, action, format, views)
+      return [] unless format == "html"
+
+      template = "#{controller.sub("Controller", "").gsub(/([a-z])([A-Z])/, '\1_\2').downcase}/#{action}.html.erb"
+      [
+        ["D", "  Rendering layout layouts/application.html.erb"],
+        ["D", "  Rendering #{template} within layouts/application"],
+        ["I", "  Rendered #{template} within layouts/application (Duration: #{views}ms | GC: 0.2ms)"]
+      ]
+    end
+
+    def completed(status, total, views, db)
+      breakdown = (status == 500) ? "ActiveRecord: #{db}ms" : "Views: #{views}ms | ActiveRecord: #{db}ms"
+      "Completed #{status} #{STATUS_TEXTS.fetch(status)} in #{total}ms (#{breakdown} | Allocations: #{rand(5_000..40_000)})"
+    end
+
+    def error_messages(controller, action, model)
+      variable = model.gsub(/([a-z])([A-Z])/, '\1_\2').downcase
+      [
+        ["F", ""],
+        ["F", paint("NoMethodError (undefined method 'name' for nil):", :red)],
+        ["F", ""],
+        ["F", "app/models/#{variable}.rb:42:in '#{model}#display_name'"],
+        ["F", "app/controllers/#{controller.gsub(/([a-z])([A-Z])/, '\1_\2').downcase}.rb:18:in '#{controller}##{action}'"]
+      ]
+    end
+
+    def write_request
+      lines = build_request_lines
+      ::File.open(@path, "a") { |f| lines.each { |line| f.puts(line) } }
+      @counter += lines.size
+      summary = lines.first[/Started .*?" /] || lines.first[0, 60]
+      @out.puts "✓ #{@counter} lines: #{summary}(#{lines.size} lines)"
+    end
+  end
+end

data/lib/onlylogs/formatter.rb

@@ -10,11 +10,12 @@ module Onlylogs
     end
 
     def call(severity, time, progname, msg)
-      return nil if "Onlylogs::LogsChannel".in?(msg)
-      return nil if denylist.any? { |pattern| pattern.match?(msg) }
+      text = msg2str(msg)
+      return nil if text.include?("Onlylogs::LogsChannel")
+      return nil if denylist.any? { |pattern| pattern.match?(text) }
       tags = [time.iso8601, severity[0].upcase]
       push_tags tags
-      str = super
+      str = super(severity, time, progname, text)
       pop_tags tags.size
       str
     end