solid_observer 0.1.0 → 0.3.0

data/app/assets/javascripts/solid_observer/live_poll.js

@@ -0,0 +1,376 @@
+(function () {
+  "use strict";
+
+  var MAX_POINTS = 60;
+  var SVG_W = 120,
+    SVG_H = 32;
+  var INTERVAL_SEC = 5;
+
+  // Shared state — IIFE-level so all functions can access them
+  var checkbox, rangeSelect, refreshBtn, helpBtn, helpPanel, helpWrapper, freshnessEl;
+  var hoverActive = false;
+  var sparks = {};
+  var url = "/solid_observer/poll_data";
+  var inFlight = false;
+  var timerId = null;
+  var lastFullSnapshot = null;
+  var lastFullChart = null;
+  var lastRange = null;
+
+  function init() {
+    var wrapper = document.querySelector("[data-so-live]");
+    if (!wrapper) return;
+
+    checkbox = wrapper.querySelector('[data-so-live-toggle]');
+    if (!checkbox) return;
+
+    rangeSelect = wrapper.querySelector("[data-so-range-select]");
+    refreshBtn = wrapper.querySelector("[data-so-refresh]");
+    helpBtn = wrapper.querySelector("[data-so-help-btn]");
+    helpPanel = wrapper.querySelector("[data-so-help-panel]");
+    helpWrapper = wrapper.querySelector("[data-so-help-wrapper]");
+    freshnessEl = wrapper.querySelector("[data-so-freshness]");
+
+    sparks = collectSparks();
+    lastRange = readRangeFromUrl() || "15m";
+
+    // --- Range change (full fetch) ---
+    if (rangeSelect) {
+      rangeSelect.addEventListener("change", function () {
+        lastRange = rangeSelect.value;
+        updateUrlRange(lastRange);
+        updateUrlLive(checkbox.checked);
+        fullFetch();
+      });
+    }
+
+    // --- Refresh button (full fetch) ---
+    if (refreshBtn) {
+      refreshBtn.addEventListener("click", function () {
+        fullFetch();
+      });
+    }
+
+    // --- Help disclosure ---
+    if (helpBtn && helpPanel) {
+      helpBtn.addEventListener("click", function () {
+        var expanded = helpBtn.getAttribute("aria-expanded") === "true";
+        // Don't close on click if hover is active — mouseleave will handle closing
+        if (expanded && hoverActive) {
+          return;
+        }
+        helpBtn.setAttribute("aria-expanded", String(!expanded));
+        helpPanel.hidden = expanded;
+      });
+      helpBtn.addEventListener("keydown", function (e) {
+        if (e.key === "Escape") {
+          helpBtn.setAttribute("aria-expanded", "false");
+          helpPanel.hidden = true;
+          helpBtn.focus();
+        }
+      });
+      helpBtn.addEventListener("focusout", function (e) {
+        var related = e.relatedTarget;
+        if (!related || !helpPanel.contains(related)) {
+          helpBtn.setAttribute("aria-expanded", "false");
+          helpPanel.hidden = true;
+        }
+      });
+      document.addEventListener("click", function (e) {
+        if (helpPanel && !helpPanel.contains(e.target) && e.target !== helpBtn) {
+          helpBtn.setAttribute("aria-expanded", "false");
+          helpPanel.hidden = true;
+        }
+      });
+      // Focusout/blur close behavior
+      helpPanel.addEventListener("focusout", function (e) {
+        if (!helpPanel.contains(e.relatedTarget) && e.relatedTarget !== helpBtn) {
+          helpBtn.setAttribute("aria-expanded", "false");
+          helpPanel.hidden = true;
+        }
+      });
+      // Hover show/hide for mouse users
+      if (helpWrapper) {
+        helpWrapper.addEventListener("mouseenter", function () {
+          hoverActive = true;
+          helpBtn.setAttribute("aria-expanded", "true");
+          helpPanel.hidden = false;
+        });
+        helpWrapper.addEventListener("mouseleave", function () {
+          hoverActive = false;
+          helpBtn.setAttribute("aria-expanded", "false");
+          helpPanel.hidden = true;
+        });
+      }
+    }
+
+    // --- Live toggle ---
+    checkbox.addEventListener("change", function () {
+      updateUrlLive(checkbox.checked);
+      var label = checkbox.closest("label");
+      label.classList.toggle("so-toggle--on", checkbox.checked);
+      label.querySelector(".so-toggle__cadence").textContent = checkbox.checked
+        ? "5s"
+        : "off";
+      if (checkbox.checked) {
+        start();
+      } else {
+        stop();
+      }
+    });
+
+    document.addEventListener("visibilitychange", function () {
+      if (document.hidden) {
+        stop();
+      } else if (checkbox.checked) {
+        tick();
+        start();
+      }
+    });
+
+    if (checkbox.checked) start();
+    checkbox
+      .closest("label")
+      .classList.toggle("so-toggle--on", checkbox.checked);
+  }
+
+  function fullFetch() {
+    if (inFlight) return;
+    inFlight = true;
+
+    if (refreshBtn) {
+      refreshBtn.textContent = "Refreshing\u2026";
+      refreshBtn.setAttribute("aria-busy", "true");
+      refreshBtn.disabled = true;
+    }
+
+    // Add loading class to range-bound zones
+    addLoadingClass(true);
+
+    var rangeParam = lastRange || readRangeFromUrl() || "15m";
+    fetch(
+      url + "?range=" + encodeURIComponent(rangeParam),
+      { headers: { Accept: "application/json" }, credentials: "same-origin" }
+    )
+      .then(function (r) { return r.ok ? r.json() : null; })
+      .then(function (data) {
+        if (data) {
+          lastFullSnapshot = data.snapshot || {};
+          lastFullChart = data.chart || {};
+          applyFullUpdate(data);
+          updateFreshness("Updated just now");
+        }
+      })
+      .catch(function () { /* drop silently */ })
+      .finally(function () {
+        inFlight = false;
+        addLoadingClass(false);
+        if (refreshBtn) {
+          refreshBtn.textContent = "Refresh data";
+          refreshBtn.setAttribute("aria-busy", "false");
+          refreshBtn.disabled = false;
+          refreshBtn.focus();
+        }
+      });
+  }
+
+  function tick() {
+    if (inFlight) return;
+    inFlight = true;
+    var rangeParam = lastRange || readRangeFromUrl() || "15m";
+    fetch(
+      url + "?range=" + encodeURIComponent(rangeParam) + "&tick=true",
+      { headers: { Accept: "application/json" }, credentials: "same-origin" }
+    )
+      .then(function (r) { return r.ok ? r.json() : null; })
+      .then(function (data) {
+        if (data) applyTickUpdate(data);
+      })
+      .catch(function () { /* drop tick silently */ })
+      .finally(function () { inFlight = false; });
+  }
+
+  function applyFullUpdate(data) {
+    var snapshot = data.snapshot || {};
+    // Patch live-state values (Zone B)
+    patchZoneValues("live-state", snapshot);
+    // Patch throughput values (Zone C) — value nodes only, preserve suffix/range-copy
+    patchZoneValues("throughput", snapshot);
+    // Patch chart indicator values (Zone D) — range totals, not latest bucket
+    patchZoneValues("chart", snapshot);
+    // Patch queue table (Zone E)
+    patchQueueTable(snapshot);
+    // Patch stability (Zone F)
+    patchStability(snapshot);
+    // Update chart sparklines (Zone D)
+    var chart = data.chart || {};
+    Object.keys(sparks).forEach(function (key) {
+      var series = chart[key];
+      if (Array.isArray(series)) sparks[key].render(series);
+    });
+    // Update range-copy nodes from server-provided label
+    if (data.range_label) {
+      updateRangeCopyFromLabel(data.range_label);
+    }
+  }
+
+  function applyTickUpdate(data) {
+    var snapshot = data.snapshot || {};
+    // Tick only patches live-state values (Zone B)
+    patchZoneValues("live-state", snapshot);
+    // chart is nil on tick — preserve last full-fetch chart/range state
+  }
+
+  function patchZoneValues(zone, snapshot) {
+    var zoneEl = document.querySelector('[data-so-zone="' + zone + '"]');
+    if (!zoneEl) return;
+    var valueEls = zoneEl.querySelectorAll("[data-so-card-value]");
+    valueEls.forEach(function (el) {
+      var key = el.getAttribute("data-so-card-value");
+      if (snapshot.hasOwnProperty(key)) {
+        var val = snapshot[key];
+        // Duration values arrive in seconds; display as milliseconds
+        if (key === "avg_duration_in_range" && val !== null && val !== undefined) {
+          var ms = Math.round(val * 1000);
+          el.textContent = formatValue(ms);
+          var suffixEl = el.parentElement.querySelector("[data-so-card-suffix]");
+          if (suffixEl) suffixEl.textContent = "ms";
+        } else {
+          el.textContent = formatValue(val);
+        }
+      }
+    });
+  }
+
+  function patchQueueTable(snapshot) {
+    var tableEl = document.querySelector('[data-so-zone="queue-table"]');
+    if (!tableEl) return;
+    var queues = snapshot.queues || {};
+    var performedByQueue = snapshot.performed_by_queue || {};
+    var failedByQueue = snapshot.failed_by_queue || {};
+
+    // Update live depth values
+    Object.keys(queues).forEach(function (qName) {
+      var el = tableEl.querySelector('[data-so-table-value="queue-depth-' + qName + '"]');
+      if (el) el.textContent = formatValue(queues[qName]);
+    });
+
+    // Update performed/failed in range
+    Object.keys(performedByQueue).forEach(function (qName) {
+      var el = tableEl.querySelector('[data-so-table-value="queue-performed-' + qName + '"]');
+      if (el) el.textContent = formatValue(performedByQueue[qName]);
+    });
+    Object.keys(failedByQueue).forEach(function (qName) {
+      var el = tableEl.querySelector('[data-so-table-value="queue-failed-' + qName + '"]');
+      if (el) el.textContent = formatValue(failedByQueue[qName]);
+    });
+  }
+
+  function patchStability(snapshot) {
+    // Stability is rendered server-side; tick does not update it.
+    // Full fetch re-renders via page or could patch, but we keep it simple.
+  }
+
+  function updateRangeCopyFromLabel(label) {
+    var els = document.querySelectorAll("[data-so-range-copy]");
+    els.forEach(function (el) { el.textContent = label; });
+  }
+
+  function updateFreshness(text) {
+    if (freshnessEl) freshnessEl.textContent = text;
+  }
+
+  function addLoadingClass(on) {
+    var zones = document.querySelectorAll(
+      '[data-so-zone="throughput"], [data-so-zone="chart"], [data-so-zone="queue-table"]'
+    );
+    zones.forEach(function (el) {
+      var section = el.closest(".so-dashboard-section") || el;
+      if (on) {
+        section.classList.add("is-loading");
+      } else {
+        section.classList.remove("is-loading");
+      }
+    });
+  }
+
+  function start() {
+    stop();
+    timerId = window.setInterval(tick, INTERVAL_SEC * 1000);
+  }
+
+  function stop() {
+    if (timerId !== null) {
+      window.clearInterval(timerId);
+      timerId = null;
+    }
+    inFlight = false;
+  }
+
+  function updateUrlRange(range) {
+    var urlObj = new URL(window.location.href);
+    urlObj.searchParams.set("range", range);
+    window.history.replaceState({}, "", urlObj.toString());
+  }
+
+  function updateUrlLive(isLive) {
+    var urlObj = new URL(window.location.href);
+    if (isLive) {
+      urlObj.searchParams.set("live", "on");
+    } else {
+      urlObj.searchParams.delete("live");
+    }
+    window.history.replaceState({}, "", urlObj.toString());
+  }
+
+  function collectSparks() {
+    var sparks = {};
+    var figures = document.querySelectorAll("[data-so-spark]");
+    for (var i = 0; i < figures.length; i++) {
+      var key = figures[i].getAttribute("data-so-spark");
+      sparks[key] = new Sparkline(figures[i]);
+    }
+    return sparks;
+  }
+
+  function Sparkline(figureEl) {
+    this.line = figureEl.querySelector(".so-spark__line");
+  }
+
+  Sparkline.prototype.render = function (series) {
+    if (!this.line || !series.length) return;
+    var tMin = series[0].t,
+      tMax = series[series.length - 1].t;
+    var vMax = 1;
+    for (var i = 0; i < series.length; i++) {
+      if (series[i].v > vMax) vMax = series[i].v;
+    }
+    var points = [];
+    for (var i = 0; i < series.length; i++) {
+      var x =
+        tMin === tMax
+          ? SVG_W / 2
+          : ((series[i].t - tMin) / (tMax - tMin)) * (SVG_W - 2) + 1;
+      var y = SVG_H - 1 - (series[i].v / vMax) * (SVG_H - 2);
+      points.push(x.toFixed(1) + "," + y.toFixed(1));
+    }
+    this.line.setAttribute("points", points.join(" "));
+  };
+
+  function formatValue(v) {
+    if (v === null || v === undefined) return "\u2014";
+    if (Number.isInteger(v))
+      return v.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return parseFloat(v).toFixed(1);
+  }
+
+  function readRangeFromUrl() {
+    return new URL(window.location.href).searchParams.get("range");
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+})();

data/app/controllers/concerns/solid_observer/paginatable.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module SolidObserver
+  module Paginatable
+    extend ActiveSupport::Concern
+
+    private
+
+    def paginate_scope(scope, per_page:)
+      @total_count = scope.count
+      @total_pages = (@total_count.to_f / per_page).ceil
+      @page = 1 if @page < 1
+      @page = 1 if @page > @total_pages && @total_pages > 0
+      (@page - 1) * per_page
+    end
+  end
+end

data/app/controllers/concerns/solid_observer/require_persistence_mode.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module SolidObserver
+  module RequirePersistenceMode
+    extend ActiveSupport::Concern
+
+    included do
+      before_action :require_persistence_mode
+    end
+
+    private
+
+    def require_persistence_mode
+      return unless SolidObserver.config.realtime_mode?
+
+      redirect_to root_path, alert: "This page is not available in real-time mode."
+    end
+  end
+end

data/app/controllers/concerns/solid_observer/require_solid_queue.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module SolidObserver
+  module RequireSolidQueue
+    extend ActiveSupport::Concern
+
+    included do
+      before_action :require_solid_queue
+    end
+
+    private
+
+    def require_solid_queue
+      return if SolidObserver::QueueStats.solid_queue_available?
+
+      redirect_to root_path, alert: "SolidQueue is not available."
+    end
+  end
+end

data/app/controllers/solid_observer/application_controller.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module SolidObserver
+  class ApplicationController < ActionController::Base
+    def self.runtime_db_errors
+      [
+        *([PG::ConnectionBad] if defined?(PG::ConnectionBad)),
+        *([Mysql2::Error::ConnectionError] if defined?(Mysql2::Error::ConnectionError)),
+        *([SQLite3::CantOpenException] if defined?(SQLite3::CantOpenException))
+      ]
+    end
+
+    api_controller = defined?(ActionController::API) && begin
+      SolidObserver.config.ui_base_controller.constantize.ancestors.include?(ActionController::API)
+    rescue NameError
+      false
+    end
+    if api_controller
+      include ActionView::Layouts
+      include ActionView::Rendering
+      include ActionController::RequestForgeryProtection
+    end
+    protect_from_forgery with: :exception
+    before_action :verify_ui_enabled
+    before_action :authenticate
+    helper_method :persistence_mode?, :realtime_mode?, :solid_queue_available?
+    layout "solid_observer/application"
+    rescue_from ActiveRecord::NoDatabaseError,
+      ActiveRecord::ConnectionNotEstablished,
+      *runtime_db_errors,
+      with: :render_storage_unavailable
+
+    private
+
+    def verify_ui_enabled
+      render plain: "Not Found", status: :not_found unless SolidObserver.config.ui_enabled
+    end
+
+    def authenticate
+      cfg = SolidObserver.config
+      return unless cfg.ui_username.present? && cfg.ui_password.present?
+      authenticate_or_request_with_http_basic("SolidObserver") { |username, password| credentials_valid?(username, password) }
+    end
+
+    def solid_queue_available?
+      QueueStats.solid_queue_available?
+    end
+
+    def persistence_mode?
+      SolidObserver.config.persistence_mode?
+    end
+
+    def realtime_mode?
+      SolidObserver.config.realtime_mode?
+    end
+
+    def credentials_valid?(username, password)
+      cfg = SolidObserver.config
+      ActiveSupport::SecurityUtils.secure_compare(username.to_s, cfg.ui_username.to_s) &&
+        ActiveSupport::SecurityUtils.secure_compare(password.to_s, cfg.ui_password.to_s)
+    end
+
+    def render_storage_unavailable(exception)
+      @error_class = exception.class.name
+      @error_message = exception.message
+      render "solid_observer/errors/storage_unavailable", status: :service_unavailable
+    end
+  end
+end

data/app/controllers/solid_observer/dashboard_controller.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+module SolidObserver
+  class DashboardController < ApplicationController
+    skip_forgery_protection only: :live_poll
+    skip_after_action :verify_same_origin_request, only: :live_poll
+
+    def index
+      assign_range_and_stats
+      load_persistence_data if persistence_mode?
+    end
+
+    def live_poll
+      send_file(
+        SolidObserver::Engine.root.join("app/assets/javascripts/solid_observer/live_poll.js"),
+        type: "application/javascript; charset=utf-8",
+        disposition: "inline"
+      )
+    end
+
+    def poll_data
+      range = QueueStats.parse_range(request_range_param, fallback: QueueStats::POLL_DEFAULT_RANGE)
+      window = QueueStats.range_duration(range, fallback: QueueStats::POLL_DEFAULT_RANGE)
+      append_chart_buffer
+      render json: tick_request? ? tick_payload : full_payload(range: range, window: window)
+    end
+
+    private
+
+    def assign_range_and_stats
+      range = QueueStats.parse_range(request_range_param)
+      @range = range
+      @live = request_live_param == "on"
+      @stats = QueueStats.snapshot(range: range)
+      @chart = QueueStats.chart_data(window: QueueStats.range_duration(@range))
+    end
+
+    def load_persistence_data
+      @recent_events = QueueEvent.recent(10)
+    end
+
+    def request_range_param
+      request&.query_parameters&.[]("range") || request&.query_parameters&.[](:range)
+    end
+
+    def request_live_param
+      request&.query_parameters&.[]("live") || request&.query_parameters&.[](:live)
+    end
+
+    def request_tick_param
+      request&.query_parameters&.[]("tick") || request&.query_parameters&.[](:tick)
+    end
+
+    def tick_request?
+      request_tick_param == "true"
+    end
+
+    def tick_payload
+      {
+        mode: persistence_mode? ? "persistence" : "realtime",
+        snapshot: QueueStats.snapshot_for_tick,
+        chart: nil
+      }
+    end
+
+    def full_payload(range:, window:)
+      {
+        mode: persistence_mode? ? "persistence" : "realtime",
+        snapshot: QueueStats.snapshot_for_poll(range: range),
+        chart: QueueStats.chart_data(window: window),
+        range_label: helpers.range_label(range)
+      }
+    end
+
+    def append_chart_buffer
+      ChartBuffer.append(SolidQueue::ReadyExecution.count) if QueueStats.solid_queue_available?
+    end
+  end
+end

data/app/controllers/solid_observer/events_controller.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module SolidObserver
+  class EventsController < ApplicationController
+    include Paginatable
+    include RequirePersistenceMode
+
+    PER_PAGE = 50
+
+    def index
+      filter = Params::EventsFilter.from_params(params)
+      @event_type = filter.event_type
+      @job_class = filter.job_class
+      @queue_name = filter.queue_name
+      @from = filter.from
+      @to = filter.to
+      @page = filter.page
+      scope = Queries::EventsQuery.new(filter).call
+      offset = paginate_scope(scope, per_page: PER_PAGE)
+      @events = scope.limit(PER_PAGE).offset(offset)
+      load_available_options
+    end
+
+    def show
+      @event = QueueEvent.find_by(id: params[:id])
+      return redirect_to(events_path, alert: "Event not found") unless @event
+
+      @metadata = parse_metadata(@event.metadata)
+    end
+
+    private
+
+    def load_available_options
+      @available_event_types = QueueEvent::EVENT_TYPES
+      @available_job_classes = cached_filter_options("solid_observer/events/distinct_job_classes") { QueueEvent.distinct_job_classes }
+      @available_queues = cached_filter_options("solid_observer/events/distinct_queue_names") { QueueEvent.distinct_queue_names }
+    end
+
+    def cached_filter_options(key, &block)
+      Rails.cache.fetch(key, expires_in: SolidObserver.config.filter_cache_ttl, &block)
+    end
+
+    def parse_metadata(metadata)
+      return nil if metadata.blank?
+      JSON.parse(metadata)
+    rescue JSON::ParserError
+      {raw: metadata}
+    end
+  end
+end