solid_log-ui 0.1.0

data/app/views/solid_log/ui/streams/_filter_form.html.erb

@@ -0,0 +1,207 @@
+<div class="filter-form">
+  <h3>Filters</h3>
+  <%= form_with url: streams_path, method: :get do |f| %>
+    <div class="filter-form-content">
+      <div class="filter-group">
+      <label>Search</label>
+      <%= f.text_field "filters[query]", value: @current_filters[:query],
+          placeholder: "Search messages...",
+          class: "form-input" %>
+    </div>
+
+    <% if @available_filters[:levels]&.size.to_i > 1 %>
+      <div class="filter-group">
+        <label>Log Level</label>
+        <%= render "solid_log/ui/shared/multiselect_filter",
+            field_name: "filters[levels]",
+            options: @available_filters[:levels],
+            selected: @current_filters[:levels],
+            label: "Select Log Levels",
+            id_prefix: "level" %>
+      </div>
+    <% end %>
+
+    <% if @available_filters[:apps]&.size.to_i > 1 %>
+      <div class="filter-group">
+        <label>Application</label>
+        <%= render "solid_log/ui/shared/multiselect_filter",
+            field_name: "filters[app]",
+            options: @available_filters[:apps],
+            selected: @current_filters[:app],
+            label: "Select Applications",
+            id_prefix: "app" %>
+      </div>
+    <% end %>
+
+    <% if @available_filters[:envs]&.size.to_i > 1 %>
+      <div class="filter-group">
+        <label>Environment</label>
+        <%= render "solid_log/ui/shared/multiselect_filter",
+            field_name: "filters[env]",
+            options: @available_filters[:envs],
+            selected: @current_filters[:env],
+            label: "Select Environments",
+            id_prefix: "env" %>
+      </div>
+    <% end %>
+
+    <% if @available_filters[:controllers]&.size.to_i > 1 %>
+      <div class="filter-group">
+        <label>Controller</label>
+        <%= render "solid_log/ui/shared/multiselect_filter",
+            field_name: "filters[controller]",
+            options: @available_filters[:controllers],
+            selected: @current_filters[:controller],
+            label: "Select Controllers",
+            id_prefix: "controller" %>
+      </div>
+    <% end %>
+
+    <% if @available_filters[:actions]&.size.to_i > 1 %>
+      <div class="filter-group">
+        <label>Action</label>
+        <%= render "solid_log/ui/shared/multiselect_filter",
+            field_name: "filters[action]",
+            options: @available_filters[:actions],
+            selected: @current_filters[:action],
+            label: "Select Actions",
+            id_prefix: "action" %>
+      </div>
+    <% end %>
+
+    <% if @available_filters[:methods]&.size.to_i > 1 %>
+      <div class="filter-group">
+        <label>HTTP Method</label>
+        <%= render "solid_log/ui/shared/multiselect_filter",
+            field_name: "filters[method]",
+            options: @available_filters[:methods],
+            selected: @current_filters[:method],
+            label: "Select Methods",
+            id_prefix: "method" %>
+      </div>
+    <% end %>
+
+    <% if @available_filters[:paths]&.size.to_i > 1 %>
+      <div class="filter-group">
+        <label>Path</label>
+        <%= render "solid_log/ui/shared/multiselect_filter",
+            field_name: "filters[path]",
+            options: @available_filters[:paths],
+            selected: @current_filters[:path],
+            label: "Select Paths",
+            id_prefix: "path" %>
+      </div>
+    <% end %>
+
+    <% if @available_filters[:status_codes]&.size.to_i > 1 %>
+      <div class="filter-group">
+        <label>Status Code</label>
+        <%= render "solid_log/ui/shared/multiselect_filter",
+            field_name: "filters[status_code]",
+            options: @available_filters[:status_codes],
+            selected: @current_filters[:status_code],
+            label: "Select Status Codes",
+            id_prefix: "status_code" %>
+      </div>
+    <% end %>
+
+    <div class="filter-group">
+      <label>Duration (ms)</label>
+      <div class="time-inputs">
+        <%= f.number_field "filters[min_duration]", value: @current_filters[:min_duration],
+            placeholder: "Min",
+            class: "form-input form-input-small" %>
+        <%= f.number_field "filters[max_duration]", value: @current_filters[:max_duration],
+            placeholder: "Max",
+            class: "form-input form-input-small" %>
+      </div>
+    </div>
+
+    <div class="filter-group">
+      <label>Time Range</label>
+      <div class="time-inputs">
+        <%= f.datetime_field "filters[start_time]", value: @current_filters[:start_time],
+            placeholder: "Start time",
+            class: "form-input form-input-small" %>
+        <%= f.datetime_field "filters[end_time]", value: @current_filters[:end_time],
+            placeholder: "End time",
+            class: "form-input form-input-small" %>
+      </div>
+    </div>
+
+    <div class="filter-group">
+      <label>Request ID</label>
+      <%= f.text_field "filters[request_id]", value: @current_filters[:request_id],
+          placeholder: "Filter by request...",
+          class: "form-input" %>
+    </div>
+
+    <div class="filter-group">
+      <label>Job ID</label>
+      <%= f.text_field "filters[job_id]", value: @current_filters[:job_id],
+          placeholder: "Filter by job...",
+          class: "form-input" %>
+    </div>
+
+    <%# Dynamically render promoted field filters with facets %>
+    <% @available_filters.each do |key, values| %>
+      <% next if [:levels, :apps, :envs, :controllers, :actions, :methods, :paths, :status_codes].include?(key) %>
+      <% next unless values&.size.to_i > 1 %>
+
+      <% field = SolidLog::Field.promoted.find_by(name: key.to_s) %>
+      <% next unless field %>
+
+      <div class="filter-group">
+        <label><%= key.to_s.titleize %></label>
+
+        <% case field.filter_type %>
+        <% when "multiselect" %>
+          <%= render "solid_log/ui/shared/multiselect_filter",
+              field_name: "filters[#{key}]",
+              options: values,
+              selected: Array(@current_filters[key]),
+              label: "Select #{key.to_s.titleize}",
+              id_prefix: key.to_s %>
+
+        <% when "range" %>
+          <div class="time-inputs">
+            <%= f.number_field "filters[min_#{key}]", value: @current_filters["min_#{key}".to_sym],
+                placeholder: "Min",
+                class: "form-input form-input-small" %>
+            <%= f.number_field "filters[max_#{key}]", value: @current_filters["max_#{key}".to_sym],
+                placeholder: "Max",
+                class: "form-input form-input-small" %>
+          </div>
+
+        <% when "contains" %>
+          <%= f.text_field "filters[#{key}]", value: @current_filters[key],
+              placeholder: "Search #{key.to_s.titleize}...",
+              class: "form-input" %>
+
+        <% when "exact" %>
+          <%= f.select "filters[#{key}]",
+              options_for_select([["All #{key.to_s.titleize}", ""]] + values.map { |v| [v, v] }, @current_filters[key]),
+              class: "form-select" %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%# Render token-based promoted fields (no facets needed) %>
+    <% SolidLog::Field.promoted.where(filter_type: "tokens").each do |field| %>
+      <% next unless SolidLog::Entry.column_names.include?(field.name) %>
+      <div class="filter-group">
+        <label><%= field.name.titleize %></label>
+        <%= f.text_field "filters[#{field.name}]", value: @current_filters[field.name.to_sym],
+            placeholder: "Enter #{field.name.titleize} (comma-separated)...",
+            class: "form-input" %>
+        <small class="form-hint">Enter multiple values separated by commas</small>
+      </div>
+    <% end %>
+    </div>
+
+    <div class="filter-actions">
+      <%= f.submit "Apply Filters", class: "btn btn-primary btn-block" %>
+      <%= link_to "Clear", streams_path, class: "btn btn-secondary btn-block" %>
+    </div>
+  <% end %>
+</div>

data/app/views/solid_log/ui/streams/_footer.html.erb

@@ -0,0 +1,37 @@
+<div class="stream-footer-inline">
+  <%= render "timeline" %>
+
+  <div class="stream-footer-controls">
+    <button type="button" id="jump-to-live" class="btn btn-secondary btn-small">
+      ↓ Jump to Live
+    </button>
+
+    <% if SolidLog::UI.configuration.websocket_enabled %>
+      <button
+        type="button"
+        id="live-tail-toggle"
+        class="btn btn-secondary btn-small"
+        data-live-tail-mode="websocket"
+        title="Enable live streaming of new log entries">
+        ▶ Live Tail
+      </button>
+      <span id="live-tail-indicator" class="live-tail-status" style="display: none;">
+        <span class="status-dot"></span>
+        <span class="status-text">Streaming</span>
+      </span>
+    <% else %>
+      <button
+        type="button"
+        id="live-tail-toggle"
+        class="btn btn-secondary btn-small"
+        data-live-tail-mode="polling"
+        title="Enable polling for new log entries (WebSocket disabled)">
+        ▶ Live Tail
+      </button>
+      <span id="live-tail-indicator" class="live-tail-status" style="display: none;">
+        <span class="status-dot"></span>
+        <span class="status-text">Polling</span>
+      </span>
+    <% end %>
+  </div>
+</div>

data/app/views/solid_log/ui/streams/_log_entries.html.erb

@@ -0,0 +1,5 @@
+<%# Entries come from query in DESC order (newest first) %>
+<%# Reverse to ASC order (oldest first) for correct DOM order %>
+<% entries.reverse.each do |entry| %>
+  <%= render "log_row", entry: entry, query: defined?(query) ? query : nil %>
+<% end %>

data/app/views/solid_log/ui/streams/_log_row.html.erb

@@ -0,0 +1,5 @@
+<% if SolidLog::UI.configuration.stream_view_style == :expanded %>
+  <%= render "solid_log/ui/streams/log_row_expanded", entry: entry, query: defined?(query) ? query : nil %>
+<% else %>
+  <%= render "solid_log/ui/streams/log_row_compact", entry: entry, query: defined?(query) ? query : nil %>
+<% end %>

data/app/views/solid_log/ui/streams/_log_row_compact.html.erb

@@ -0,0 +1,37 @@
+<div class="log-row-compact-wrapper" data-entry-id="<%= entry.id %>">
+  <span class="log-row-timestamp"><%= entry.timestamp.strftime("%Y-%m-%d %H:%M:%S %z") %></span>
+
+  <%= link_to entry_path(entry), class: "log-row-compact-message" do %>
+    <%= defined?(query) && query.present? ? highlight_search_term(entry.message, query) : entry.message %>
+  <% end %>
+
+  <% if entry.request_id.present? %>
+    <button type="button" class="log-filter-btn" data-filter-type="request_id" data-filter-value="<%= entry.request_id %>">
+      [<%= entry.request_id %>]
+    </button>
+  <% end %>
+
+  <% if entry.method.present? %>
+    <button type="button" class="log-filter-btn" data-filter-type="method" data-filter-value="<%= entry.method %>">
+      [<%= entry.method %>]
+    </button>
+  <% end %>
+
+  <% if entry.app.present? %>
+    <button type="button" class="log-filter-btn" data-filter-type="app" data-filter-value="<%= entry.app %>">
+      [<%= entry.app %>]
+    </button>
+  <% end %>
+
+  <% if entry.extra_fields_hash['ip'].present? %>
+    <button type="button" class="log-filter-btn" data-filter-type="ip" data-filter-value="<%= entry.extra_fields_hash['ip'] %>">
+      [<%= entry.extra_fields_hash['ip'] %>]
+    </button>
+  <% end %>
+
+  <% if entry.extra_fields_hash['user_id'].present? %>
+    <button type="button" class="log-filter-btn" data-filter-type="user_id" data-filter-value="<%= entry.extra_fields_hash['user_id'] %>">
+      [<%= entry.extra_fields_hash['user_id'] %>]
+    </button>
+  <% end %>
+</div>

data/app/views/solid_log/ui/streams/_log_row_expanded.html.erb

@@ -0,0 +1,67 @@
+<div class="log-row" data-entry-id="<%= entry.id %>">
+  <div class="log-row-header">
+    <div class="log-row-meta">
+      <%= level_badge(entry.level) %>
+      <span class="log-timestamp" title="<%= entry.created_at.iso8601 %>">
+        <%= entry.created_at.strftime("%Y-%m-%d %H:%M:%S") %>
+      </span>
+      <% if entry.app.present? %>
+        <span class="log-app"><%= entry.app %></span>
+      <% end %>
+      <% if entry.env.present? %>
+        <span class="log-env"><%= entry.env %></span>
+      <% end %>
+    </div>
+    <div class="log-row-actions">
+      <%= link_to "Details", entry_path(entry), class: "btn-link" %>
+    </div>
+  </div>
+
+  <div class="log-row-content">
+    <div class="log-message">
+      <% if defined?(query) && query.present? %>
+        <%= highlight_search_term(entry.message, query) %>
+      <% else %>
+        <%= entry.message %>
+      <% end %>
+    </div>
+
+    <% if entry.controller.present? || entry.status_code.present? || entry.duration.present? %>
+      <div class="log-details">
+        <% if entry.controller.present? %>
+          <span class="log-detail-item">
+            <strong>Controller:</strong>
+            <%= link_to entry.controller, streams_path(filters: { controller: [entry.controller] }),
+                class: "log-detail-link" %>#<%= entry.action %>
+          </span>
+        <% end %>
+        <% if entry.path.present? %>
+          <span class="log-detail-item">
+            <strong>Path:</strong> <%= entry.method %> <%= entry.path %>
+          </span>
+        <% end %>
+        <% if entry.status_code.present? %>
+          <span class="log-detail-item">
+            <strong>Status:</strong> <%= http_status_badge(entry.status_code) %>
+          </span>
+        <% end %>
+        <% if entry.duration.present? %>
+          <span class="log-detail-item">
+            <strong>Duration:</strong> <%= format_duration(entry.duration) %>
+          </span>
+        <% end %>
+      </div>
+    <% end %>
+
+    <% if entry.correlated? %>
+      <div class="log-correlation">
+        <% if entry.request_id.present? %>
+          <%= link_to entry.request_id[0..7], streams_path(filters: { request_id: entry.request_id }),
+              class: "correlation-link",
+              title: "Filter by request_id: #{entry.request_id}" %>
+        <% end %>
+        <%= correlation_link(entry) %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/solid_log/ui/streams/_log_stream_content.html.erb

@@ -0,0 +1,8 @@
+<div class="log-stream" id="log-stream-content">
+  <%# Entries come from query in DESC order (newest first) %>
+  <%# Reverse to ASC order (oldest first) so DOM is oldest→newest top→bottom %>
+  <%# Then scroll to bottom shows newest entries %>
+  <% entries.reverse.each do |entry| %>
+    <%= render "log_row", entry: entry, query: defined?(query) ? query : nil %>
+  <% end %>
+</div>

data/app/views/solid_log/ui/streams/_timeline.html.erb

@@ -0,0 +1,68 @@
+<div id="timeline-container">
+  <% if defined?(timeline_data) ? timeline_data[:buckets].any? : @timeline_data[:buckets].any? %>
+    <% timeline_data ||= @timeline_data %>
+    <% current_filters ||= @current_filters %>
+    <div class="timeline-histogram" data-controller="timeline-histogram">
+    <div class="timeline-header-row">
+      <h3>Log Timeline</h3>
+      <div class="timeline-info">
+        <span class="timeline-range">
+          <%= timeline_data[:start_time].strftime("%Y-%m-%d %H:%M") %> -
+          <%= timeline_data[:end_time].strftime("%Y-%m-%d %H:%M") %>
+        </span>
+        <button type="button" class="btn-link-small" data-action="click->timeline-histogram#clearSelection">
+          Clear Time Filter
+        </button>
+      </div>
+    </div>
+
+    <div class="timeline-chart" data-timeline-histogram-target="chart">
+      <% max_count = timeline_data[:buckets].map { |b| b[:count] }.max %>
+      <% max_count = 1 if max_count == 0 %> <%# Avoid division by zero %>
+
+      <div class="timeline-bars" data-timeline-histogram-target="barsContainer">
+        <% timeline_data[:buckets].each_with_index do |bucket, index| %>
+          <div class="timeline-bar-wrapper"
+               data-timeline-histogram-target="bar"
+               data-index="<%= index %>"
+               data-start-time="<%= bucket[:start_time].iso8601 %>"
+               data-end-time="<%= bucket[:end_time].iso8601 %>"
+               data-count="<%= bucket[:count] %>"
+               data-action="mouseenter->timeline-histogram#showTooltip
+                           mouseleave->timeline-histogram#hideTooltip
+                           mousedown->timeline-histogram#startSelection">
+            <div class="timeline-bar"
+                 style="height: <%= (bucket[:count].to_f / max_count * 100).round(2) %>%">
+            </div>
+          </div>
+        <% end %>
+      </div>
+
+      <div class="timeline-selection"
+           data-timeline-histogram-target="selection"
+           style="display: none;">
+      </div>
+    </div>
+
+    <div class="timeline-tooltip"
+         data-timeline-histogram-target="tooltip"
+         style="display: none;">
+    </div>
+
+    <%= form_with url: streams_path, method: :get, data: { timeline_histogram_target: "form" } do |f| %>
+      <% current_filters.each do |key, value| %>
+        <% next if [:start_time, :end_time].include?(key) %>
+        <% if value.is_a?(Array) %>
+          <% value.each do |v| %>
+            <%= hidden_field_tag "filters[#{key}][]", v %>
+          <% end %>
+        <% else %>
+          <%= hidden_field_tag "filters[#{key}]", value %>
+        <% end %>
+      <% end %>
+      <%= hidden_field_tag "filters[start_time]", "", data: { timeline_histogram_target: "startTimeField" } %>
+      <%= hidden_field_tag "filters[end_time]", "", data: { timeline_histogram_target: "endTimeField" } %>
+    <% end %>
+    </div>
+  <% end %>
+</div>

data/app/views/solid_log/ui/streams/index.html.erb

@@ -0,0 +1,22 @@
+<div class="streams-page">
+  <div class="streams-container">
+    <div class="streams-sidebar">
+      <%= render "filter_form" %>
+    </div>
+
+    <div class="streams-main">
+      <% if @entries.empty? %>
+        <div class="empty-state-large">
+          <h2>No log entries found</h2>
+          <p>Try adjusting your filters or check that logs are being ingested.</p>
+          <%= link_to "View all logs", streams_path, class: "btn btn-primary" %>
+        </div>
+      <% else %>
+        <%= render "log_stream_content", entries: @entries, query: @current_filters[:query] %>
+
+        <!-- Stream Footer inside terminal view -->
+        <%= render "footer" %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/solid_log/ui/timelines/show_job.html.erb

@@ -0,0 +1,78 @@
+<div class="timeline-page">
+  <div class="page-header">
+    <div>
+      <h1>Job Timeline</h1>
+      <p class="subtitle">Job ID: <code><%= @job_id %></code></p>
+    </div>
+    <div class="page-actions">
+      <%= link_to "← Back to Stream", streams_path, class: "btn btn-secondary" %>
+    </div>
+  </div>
+
+  <div class="timeline-container">
+    <div class="timeline-stats">
+      <div class="stat-inline">
+        <span class="stat-inline-label">Total Entries:</span>
+        <span class="stat-inline-value"><%= @entries.size %></span>
+      </div>
+      <% if @entries.any? %>
+        <div class="stat-inline">
+          <span class="stat-inline-label">Job Duration:</span>
+          <span class="stat-inline-value">
+            <%= distance_of_time_in_words(@entries.last.created_at, @entries.first.created_at) %>
+          </span>
+        </div>
+        <div class="stat-inline">
+          <span class="stat-inline-label">Started:</span>
+          <span class="stat-inline-value"><%= @entries.last.created_at.strftime("%H:%M:%S.%L") %></span>
+        </div>
+        <div class="stat-inline">
+          <span class="stat-inline-label">Ended:</span>
+          <span class="stat-inline-value"><%= @entries.first.created_at.strftime("%H:%M:%S.%L") %></span>
+        </div>
+      <% end %>
+    </div>
+
+    <div class="timeline-entries">
+      <% @entries.reverse.each_with_index do |entry, index| %>
+        <div class="timeline-entry">
+          <div class="timeline-marker">
+            <div class="timeline-dot <%= entry.level %>"></div>
+            <% if index < @entries.size - 1 %>
+              <div class="timeline-line"></div>
+            <% end %>
+          </div>
+
+          <div class="timeline-content">
+            <div class="timeline-header">
+              <div class="timeline-time">
+                <%= entry.created_at.strftime("%H:%M:%S.%L") %>
+                <% if index > 0 %>
+                  <span class="timeline-delta">
+                    +<%= ((entry.created_at - @entries.reverse[index - 1].created_at) * 1000).round(1) %>ms
+                  </span>
+                <% end %>
+              </div>
+              <%= level_badge(entry.level) %>
+            </div>
+
+            <div class="timeline-message">
+              <%= entry.message %>
+            </div>
+
+            <% if entry.extra_fields.present? && entry.extra_fields != "{}" %>
+              <details class="timeline-details">
+                <summary>Additional Fields</summary>
+                <pre class="json-display-small"><%= pretty_json(entry.extra_fields) %></pre>
+              </details>
+            <% end %>
+
+            <div class="timeline-actions">
+              <%= link_to "View Details", entry_path(entry), class: "btn-link" %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/solid_log/ui/timelines/show_request.html.erb

@@ -0,0 +1,88 @@
+<div class="timeline-page">
+  <div class="page-header">
+    <div>
+      <h1>Request Timeline</h1>
+      <p class="subtitle">Request ID: <code><%= @request_id %></code></p>
+    </div>
+    <div class="page-actions">
+      <%= link_to "← Back to Stream", streams_path, class: "btn btn-secondary" %>
+    </div>
+  </div>
+
+  <div class="timeline-container">
+    <div class="timeline-stats">
+      <div class="stat-inline">
+        <span class="stat-inline-label">Total Entries:</span>
+        <span class="stat-inline-value"><%= @entries.size %></span>
+      </div>
+      <% if @entries.any? %>
+        <div class="stat-inline">
+          <span class="stat-inline-label">Time Span:</span>
+          <span class="stat-inline-value">
+            <%= distance_of_time_in_words(@entries.last.created_at, @entries.first.created_at) %>
+          </span>
+        </div>
+        <div class="stat-inline">
+          <span class="stat-inline-label">First Entry:</span>
+          <span class="stat-inline-value"><%= @entries.last.created_at.strftime("%H:%M:%S.%L") %></span>
+        </div>
+        <div class="stat-inline">
+          <span class="stat-inline-label">Last Entry:</span>
+          <span class="stat-inline-value"><%= @entries.first.created_at.strftime("%H:%M:%S.%L") %></span>
+        </div>
+      <% end %>
+    </div>
+
+    <div class="timeline-entries">
+      <% @entries.reverse.each_with_index do |entry, index| %>
+        <div class="timeline-entry">
+          <div class="timeline-marker">
+            <div class="timeline-dot <%= entry.level %>"></div>
+            <% if index < @entries.size - 1 %>
+              <div class="timeline-line"></div>
+            <% end %>
+          </div>
+
+          <div class="timeline-content">
+            <div class="timeline-header">
+              <div class="timeline-time">
+                <%= entry.created_at.strftime("%H:%M:%S.%L") %>
+                <% if index > 0 %>
+                  <span class="timeline-delta">
+                    +<%= ((entry.created_at - @entries.reverse[index - 1].created_at) * 1000).round(1) %>ms
+                  </span>
+                <% end %>
+              </div>
+              <%= level_badge(entry.level) %>
+            </div>
+
+            <div class="timeline-message">
+              <%= entry.message %>
+            </div>
+
+            <% if entry.controller.present? || entry.status_code.present? || entry.duration.present? %>
+              <div class="timeline-meta">
+                <% if entry.controller.present? %>
+                  <span><strong>Action:</strong> <%= entry.controller %>#<%= entry.action %></span>
+                <% end %>
+                <% if entry.path.present? %>
+                  <span><strong>Path:</strong> <%= entry.method %> <%= entry.path %></span>
+                <% end %>
+                <% if entry.status_code.present? %>
+                  <span><strong>Status:</strong> <%= http_status_badge(entry.status_code) %></span>
+                <% end %>
+                <% if entry.duration.present? %>
+                  <span><strong>Duration:</strong> <%= format_duration(entry.duration) %></span>
+                <% end %>
+              </div>
+            <% end %>
+
+            <div class="timeline-actions">
+              <%= link_to "View Details", entry_path(entry), class: "btn-link" %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>