solid_log-ui 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: ead8787f6f3ddd8c16b1e0cea395ecc05002be6fc3c8307931a2e89bdbdcbc44
+  data.tar.gz: b5028b8e5f785d2edb1678f76c0db6ab718d0c5e1a0e272413d4bcda55a08a51
+SHA512:
+  metadata.gz: a3e0f3a3f9a9636b312f12558ca9fc9f001d3ce5738655706c4e9ad73f453c0eb116782aef2c39e4d519a5052ac86b7121fd10e955e7060d90cf9961a0c53f82
+  data.tar.gz: 7290decb302c621129be634a02132e7c3401e9b6bd4a1a1b0bff204390c78ff8dbd8e8ee710bdfd1e45b9cb6c6cc99a7c2229301d1ec41ae47885113b55aa898

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright Dan Loman
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,295 @@
+##SolidLog::UI
+
+Mission Control-style web interface for viewing SolidLog entries. Supports both direct database access and HTTP API mode.
+
+## Overview
+
+`solid_log-ui` provides:
+
+- **Mission Control-style UI**: Browse, filter, and search logs
+- **Dual-mode support**:
+  - **Direct DB**: Fast access when UI and service share database
+  - **HTTP API**: Remote access when service runs separately
+- **Overridable authentication**: Easy integration with your auth system
+- **Real-time updates**: Live tail support (WebSocket or polling)
+- **Full-text search**: Powered by database-native FTS
+- **Request/job correlation**: Timeline views for related logs
+
+## Installation
+
+```ruby
+gem 'solid_log-ui'
+
+# Also install database adapter if using direct_db mode
+gem 'sqlite3', '>= 2.1'   # or pg, or mysql2
+```
+
+## Configuration
+
+Create `config/initializers/solid_log_ui.rb`:
+
+### Direct DB Mode (Default)
+
+```ruby
+SolidLog::UI.configure do |config|
+  config.mode = :direct_db
+  config.authentication_method = :custom  # Override BaseController
+  config.stream_view_style = :compact
+  config.per_page = 100
+end
+```
+
+### HTTP API Mode
+
+```ruby
+SolidLog::UI.configure do |config|
+  config.mode = :http_api
+  config.service_url = ENV['SOLIDLOG_SERVICE_URL']
+  config.service_token = ENV['SOLIDLOG_SERVICE_TOKEN']
+  config.authentication_method = :custom
+end
+```
+
+## Mount in Routes
+
+```ruby
+# config/routes.rb
+Rails.application.routes.draw do
+  mount SolidLog::UI::Engine => "/admin/logs"
+end
+```
+
+Access at: `http://yourapp.com/admin/logs`
+
+## Authentication
+
+The `BaseController` is designed to be easily overridden in your host application.
+
+### Option 1: Reopen the Class (Recommended)
+
+Create `config/initializers/solid_log_ui_auth.rb`:
+
+```ruby
+# Use your existing authentication system
+SolidLog::UI::BaseController.class_eval do
+  before_action :require_admin
+
+  private
+
+  def require_admin
+    redirect_to root_path unless current_user&.admin?
+  end
+
+  # Override current_user to use your app's authentication
+  def current_user
+    @current_user ||= User.find_by(id: session[:user_id])
+  end
+end
+```
+
+### Option 2: HTTP Basic Auth
+
+```ruby
+# config/initializers/solid_log_ui.rb
+SolidLog::UI.configure do |config|
+  config.authentication_method = :basic
+end
+
+# Store credentials in Rails credentials
+# rails credentials:edit
+solidlog:
+  username: admin
+  password: secret_password
+```
+
+Or override the auth method:
+
+```ruby
+SolidLog::UI::BaseController.class_eval do
+  protected
+
+  def authenticate_with_basic_auth(username, password)
+    username == ENV['ADMIN_USER'] && password == ENV['ADMIN_PASSWORD']
+  end
+end
+```
+
+### Option 3: Devise Integration
+
+```ruby
+SolidLog::UI::BaseController.class_eval do
+  before_action :authenticate_admin_user!
+
+  private
+
+  def authenticate_admin_user!
+    authenticate_user!
+    redirect_to root_path unless current_user.admin?
+  end
+
+  # Devise provides current_user automatically
+end
+```
+
+### Option 4: Custom Middleware
+
+```ruby
+SolidLog::UI::BaseController.class_eval do
+  before_action :check_api_key
+
+  private
+
+  def check_api_key
+    api_key = request.headers['X-Admin-API-Key']
+    head :unauthorized unless api_key == ENV['ADMIN_API_KEY']
+  end
+end
+```
+
+### Option 5: IP Whitelist
+
+```ruby
+SolidLog::UI::BaseController.class_eval do
+  before_action :check_ip_whitelist
+
+  private
+
+  def check_ip_whitelist
+    allowed_ips = ENV['ALLOWED_IPS'].to_s.split(',')
+    unless allowed_ips.include?(request.remote_ip)
+      render plain: "Access denied", status: :forbidden
+    end
+  end
+end
+```
+
+## Deployment Modes
+
+### Mode 1: Direct DB (Fast, Same Host)
+
+**Use when**: UI and service run on same host with shared database
+
+```ruby
+# config/initializers/solid_log_ui.rb
+SolidLog::UI.configure do |config|
+  config.mode = :direct_db
+end
+
+# config/database.yml
+production:
+  primary:
+    adapter: sqlite3
+    database: storage/production.sqlite3
+  log:
+    adapter: sqlite3
+    database: storage/production_log.sqlite3  # Shared with service
+    migrations_paths: db/log_migrate
+```
+
+**Benefits:**
+- ✅ Fastest (direct database queries)
+- ✅ No HTTP overhead
+- ✅ Works with shared volume in Kamal
+
+### Mode 2: HTTP API (Flexible, Remote)
+
+**Use when**: Service runs separately from main app
+
+```ruby
+# config/initializers/solid_log_ui.rb
+SolidLog::UI.configure do |config|
+  config.mode = :http_api
+  config.service_url = 'http://solidlog-service:3001'
+  config.service_token = ENV['SOLIDLOG_TOKEN']
+end
+```
+
+**Benefits:**
+- ✅ Service can run independently
+- ✅ UI can be in separate app/server
+- ✅ Works across network boundaries
+
+## Features
+
+### Streams View
+- Filter by level, app, env, controller, action, path, method, status
+- Full-text search
+- Compact or expanded view modes
+- Live tail (auto-refresh)
+
+### Entry Details
+- Full log entry with all fields
+- JSON-formatted extra fields
+- Copy to clipboard
+- Related entries (request/job correlation)
+
+### Timelines
+- Request timeline: All logs for a request_id
+- Job timeline: All logs for a job_id
+- Duration visualization
+- Level distribution
+
+### Dashboard
+- Recent error rate
+- Ingestion metrics
+- Parse backlog status
+- Database size
+- Health indicators
+
+## Helper Methods
+
+Available in all UI views:
+
+```erb
+<% if current_user %>
+  Welcome, <%= current_user.email %>
+<% end %>
+
+<%= level_badge(entry.level) %>
+<%= duration_badge(entry.duration) %>
+<%= status_code_badge(entry.status_code) %>
+```
+
+## Customizing Views
+
+Override views by creating matching files in your app:
+
+```
+app/views/solid_log/ui/
+├── streams/
+│   └── index.html.erb       # Override streams view
+├── entries/
+│   └── show.html.erb        # Override entry detail view
+└── layouts/
+    └── solid_log/
+        └── ui/
+            └── application.html.erb  # Override layout
+```
+
+## Customizing Styles
+
+Add custom CSS in your application:
+
+```css
+/* app/assets/stylesheets/solid_log_custom.css */
+.solid-log-stream-entry {
+  border-left: 4px solid #your-brand-color;
+}
+```
+
+Then import in your application.css:
+
+```css
+@import "solid_log_custom";
+```
+
+## Development
+
+```bash
+cd solid_log-ui
+bundle install
+```
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,12 @@
+require "bundler/gem_tasks"
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "test"
+  t.libs << "lib"
+  t.test_files = FileList["test/**/*_test.rb"]
+  t.verbose = true
+  t.warning = false
+end
+
+task default: :test

data/app/assets/javascripts/application.js

@@ -0,0 +1,6 @@
+// Entry point for the build script in your package.json
+import "@hotwired/turbo-rails"
+import { createConsumer } from "@rails/actioncable"
+
+// Make createConsumer available globally for live tail
+window.createConsumer = createConsumer

data/app/assets/javascripts/solid_log/checkbox_dropdown.js

@@ -0,0 +1,171 @@
+// Checkbox Dropdown functionality for multi-select filters
+(function() {
+  let globalListenersAdded = false;
+
+  function closeDropdown(dropdown) {
+    const toggle = dropdown.querySelector('[data-action*="toggle"]');
+    const menu = dropdown.querySelector('[data-checkbox-dropdown-target="menu"]');
+    if (toggle && menu) {
+      toggle.setAttribute('aria-expanded', 'false');
+      menu.style.display = 'none';
+    }
+  }
+
+  function initializeCheckboxDropdowns() {
+    const dropdowns = document.querySelectorAll('[data-controller="checkbox-dropdown"]');
+
+    dropdowns.forEach(dropdown => {
+      // Skip if already initialized
+      if (dropdown.dataset.initialized === 'true') return;
+      dropdown.dataset.initialized = 'true';
+
+      const toggle = dropdown.querySelector('[data-action*="toggle"]');
+      const menu = dropdown.querySelector('[data-checkbox-dropdown-target="menu"]');
+      const search = dropdown.querySelector('[data-checkbox-dropdown-target="search"]');
+      const options = dropdown.querySelectorAll('[data-checkbox-dropdown-target="option"]');
+      const checkboxes = dropdown.querySelectorAll('input[type="checkbox"]');
+      const badge = dropdown.querySelector('.badge-small');
+      const closeBtn = dropdown.querySelector('.popover-close');
+      const doneBtn = dropdown.querySelector('.popover-footer button');
+      const dropdownLabel = toggle?.querySelector('.dropdown-label');
+
+      if (!toggle || !menu) return;
+
+      // Toggle dropdown
+      toggle.addEventListener('click', function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
+
+        // Close all other dropdowns
+        document.querySelectorAll('[data-controller="checkbox-dropdown"]').forEach(other => {
+          if (other !== dropdown) {
+            closeDropdown(other);
+          }
+        });
+
+        // Toggle this dropdown
+        toggle.setAttribute('aria-expanded', !isExpanded);
+        menu.style.display = isExpanded ? 'none' : 'flex';
+
+        // Focus search if opening
+        if (!isExpanded && search) {
+          setTimeout(() => search.focus(), 100);
+        }
+      });
+
+      // Close button (X in header)
+      if (closeBtn) {
+        closeBtn.addEventListener('click', function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          closeDropdown(dropdown);
+        });
+      }
+
+      // Done button (in footer)
+      if (doneBtn) {
+        doneBtn.addEventListener('click', function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          closeDropdown(dropdown);
+        });
+      }
+
+      // Filter options
+      if (search) {
+        search.addEventListener('input', function() {
+          const filter = this.value.toLowerCase();
+          options.forEach(option => {
+            const value = option.getAttribute('data-value') || '';
+            if (value.includes(filter)) {
+              option.style.display = '';
+            } else {
+              option.style.display = 'none';
+            }
+          });
+        });
+      }
+
+      // Update count badge and preview
+      function updateCountAndPreview() {
+        const checkedBoxes = Array.from(checkboxes).filter(cb => cb.checked);
+        const count = checkedBoxes.length;
+
+        // Update badge
+        if (badge) {
+          badge.textContent = count;
+          badge.style.display = count > 0 ? '' : 'none';
+        }
+
+        // Update preview label in toggle button
+        if (dropdownLabel) {
+          if (count > 0) {
+            const selectedValues = checkedBoxes.map(cb => cb.value);
+            const previewText = selectedValues.join(', ');
+            dropdownLabel.textContent = previewText.length > 50 ? previewText.substring(0, 50) + '...' : previewText;
+            dropdownLabel.classList.remove('dropdown-label-placeholder');
+          } else {
+            // Get original label from popover header
+            const popoverHeader = menu.querySelector('.popover-header h4');
+            if (popoverHeader) {
+              dropdownLabel.textContent = popoverHeader.textContent;
+              dropdownLabel.classList.add('dropdown-label-placeholder');
+            }
+          }
+        }
+      }
+
+      checkboxes.forEach(checkbox => {
+        checkbox.addEventListener('change', updateCountAndPreview);
+      });
+
+      // Initialize count and preview on next frame to ensure DOM is ready
+      requestAnimationFrame(() => {
+        updateCountAndPreview();
+      });
+    });
+
+    // Add global event listeners only once
+    if (!globalListenersAdded) {
+      globalListenersAdded = true;
+
+      // Close dropdowns when clicking outside or pressing escape
+      document.addEventListener('click', function(e) {
+        if (!e.target.closest('[data-controller="checkbox-dropdown"]')) {
+          document.querySelectorAll('[data-controller="checkbox-dropdown"]').forEach(dropdown => {
+            closeDropdown(dropdown);
+          });
+        }
+      });
+
+      document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+          document.querySelectorAll('[data-controller="checkbox-dropdown"]').forEach(dropdown => {
+            closeDropdown(dropdown);
+          });
+        }
+      });
+
+      // Close dropdowns when filter form content scrolls
+      const filterFormContent = document.querySelector('.filter-form-content');
+      if (filterFormContent) {
+        filterFormContent.addEventListener('scroll', function() {
+          document.querySelectorAll('[data-controller="checkbox-dropdown"]').forEach(dropdown => {
+            closeDropdown(dropdown);
+          });
+        });
+      }
+    }
+  }
+
+  // Initialize on page load
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeCheckboxDropdowns);
+  } else {
+    initializeCheckboxDropdowns();
+  }
+
+  // Re-initialize on Turbo load (if using Turbo)
+  document.addEventListener('turbo:load', initializeCheckboxDropdowns);
+})();

data/app/assets/javascripts/solid_log/filter_state.js

@@ -0,0 +1,138 @@
+// Filter form state management - disable/enable buttons based on changes
+(function() {
+  function initializeFilterState() {
+    const filterForm = document.querySelector('.filter-form form');
+    if (!filterForm) return;
+
+    const applyButton = filterForm.querySelector('[type="submit"]');
+    const clearButton = filterForm.querySelector('a[href*="streams"]');
+
+    if (!applyButton) return;
+
+    // Store initial form state
+    const initialFormData = new FormData(filterForm);
+    const initialState = formDataToObject(initialFormData);
+
+    // Check if any filters are currently active
+    function hasActiveFilters() {
+      const currentFormData = new FormData(filterForm);
+      const currentState = formDataToObject(currentFormData);
+
+      // Check if any filter has a value
+      for (let key in currentState) {
+        if (currentState[key] && currentState[key].length > 0) {
+          // Ignore empty strings and empty arrays
+          if (Array.isArray(currentState[key])) {
+            if (currentState[key].some(v => v !== '')) return true;
+          } else if (currentState[key] !== '') {
+            return true;
+          }
+        }
+      }
+      return false;
+    }
+
+    // Check if form has changed from initial state
+    function hasFormChanged() {
+      const currentFormData = new FormData(filterForm);
+      const currentState = formDataToObject(currentFormData);
+
+      return !areStatesEqual(initialState, currentState);
+    }
+
+    // Update button states
+    function updateButtonStates() {
+      const hasChanges = hasFormChanged();
+      const hasFilters = hasActiveFilters();
+
+      // Disable Apply button if no changes
+      if (applyButton) {
+        applyButton.disabled = !hasChanges;
+        if (hasChanges) {
+          applyButton.classList.remove('btn-disabled');
+        } else {
+          applyButton.classList.add('btn-disabled');
+        }
+      }
+
+      // Disable Clear button if no active filters
+      if (clearButton) {
+        if (hasFilters) {
+          clearButton.classList.remove('btn-disabled');
+          clearButton.style.pointerEvents = '';
+        } else {
+          clearButton.classList.add('btn-disabled');
+          clearButton.style.pointerEvents = 'none';
+        }
+      }
+    }
+
+    // Listen to all form input changes
+    filterForm.addEventListener('input', updateButtonStates);
+    filterForm.addEventListener('change', updateButtonStates);
+
+    // Initial state
+    updateButtonStates();
+  }
+
+  // Helper: Convert FormData to plain object
+  function formDataToObject(formData) {
+    const obj = {};
+    for (let [key, value] of formData.entries()) {
+      if (obj[key]) {
+        // Multiple values for same key (e.g., checkboxes)
+        if (Array.isArray(obj[key])) {
+          obj[key].push(value);
+        } else {
+          obj[key] = [obj[key], value];
+        }
+      } else {
+        obj[key] = value;
+      }
+    }
+    return obj;
+  }
+
+  // Helper: Deep compare two state objects
+  function areStatesEqual(state1, state2) {
+    const keys1 = Object.keys(state1);
+    const keys2 = Object.keys(state2);
+
+    // Check if they have the same number of keys
+    if (keys1.length !== keys2.length) return false;
+
+    // Check each key
+    for (let key of keys1) {
+      const val1 = state1[key];
+      const val2 = state2[key];
+
+      // Both arrays
+      if (Array.isArray(val1) && Array.isArray(val2)) {
+        if (val1.length !== val2.length) return false;
+        for (let i = 0; i < val1.length; i++) {
+          if (val1[i] !== val2[i]) return false;
+        }
+      }
+      // One is array, other isn't
+      else if (Array.isArray(val1) || Array.isArray(val2)) {
+        return false;
+      }
+      // Both are simple values
+      else if (val1 !== val2) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  // Initialize on page load
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeFilterState);
+  } else {
+    initializeFilterState();
+  }
+
+  // Re-initialize on Turbo load (if using Turbo)
+  document.addEventListener('turbo:load', initializeFilterState);
+})();