onlylogs 0.1.2

data/app/controllers/onlylogs/application_controller.rb

@@ -0,0 +1,22 @@
+module Onlylogs
+  class ApplicationController < (Onlylogs.parent_controller&.constantize || ActionController::Base)
+    before_action :authenticate_onlylogs_user!
+
+    private
+
+    def authenticate_onlylogs_user!
+      return super if defined?(super)
+
+      return if Onlylogs.disable_basic_authentication?
+
+      unless Onlylogs.basic_auth_configured?
+        render plain: "Onlylogs authentication not configured. Please configure basic auth credentials.", status: :forbidden
+        return
+      end
+
+      authenticate_or_request_with_http_basic("onlylogs") do |username, password|
+        username == Onlylogs.basic_auth_user && password == Onlylogs.basic_auth_password
+      end
+    end
+  end
+end

data/app/controllers/onlylogs/logs_controller.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Onlylogs
+  class LogsController < ApplicationController
+    def index
+      @max_lines = (params[:max_lines] || 100).to_i
+
+      # Get the file path from params or use default
+      @log_file_path = params[:log_file_path] || default_log_file_path
+
+      @filter = params[:filter]
+      @autoscroll = params[:autoscroll] != "false"
+      @mode = @filter.blank? ? (params[:mode] || "live") : "search" # "live" or "search"
+    end
+
+    private
+
+    def default_log_file_path
+      # "/Users/alessandrorodi/RenuoWorkspace/onlylogs/test/fixtures/files/very_big.log"
+      Onlylogs.default_log_file_path
+    end
+  end
+end

data/app/helpers/onlylogs/application_helper.rb

@@ -0,0 +1,4 @@
+module Onlylogs
+  module ApplicationHelper
+  end
+end

data/app/javascript/onlylogs/application.js

@@ -0,0 +1 @@
+import "controllers"

data/app/javascript/onlylogs/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }

data/app/javascript/onlylogs/controllers/index.js

@@ -0,0 +1,11 @@
+// Import and register all your controllers from the importmap under controllers/*
+
+import { application } from "controllers/application"
+
+// Eager load all controllers defined in the import map under controllers/**/*_controller
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)
+
+// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
+// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
+// lazyLoadControllersFrom("controllers", application)

data/app/javascript/onlylogs/controllers/keyboard_shortcuts_controller.js

@@ -0,0 +1,46 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class KeyboardShortcutsController extends Controller {
+  static targets = ["liveMode", "autoscroll"]
+
+  connect() {
+    this.boundHandleKeydown = this.handleKeydown.bind(this)
+    document.addEventListener('keydown', this.boundHandleKeydown)
+  }
+
+  disconnect() {
+    document.removeEventListener('keydown', this.boundHandleKeydown)
+  }
+
+  handleKeydown(event) {
+    // Only handle shortcuts when not typing in input fields
+    if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
+      return
+    }
+
+    switch (event.key.toLowerCase()) {
+      case 'l':
+        event.preventDefault()
+        this.toggleLiveMode()
+        break
+      case 'a':
+        event.preventDefault()
+        this.toggleAutoscroll()
+        break
+    }
+  }
+
+  toggleLiveMode() {
+    if (this.hasLiveModeTarget) {
+      this.liveModeTarget.checked = !this.liveModeTarget.checked
+      this.liveModeTarget.dispatchEvent(new Event('change', { bubbles: true }))
+    }
+  }
+
+  toggleAutoscroll() {
+    if (this.hasAutoscrollTarget) {
+      this.autoscrollTarget.checked = !this.autoscrollTarget.checked
+      this.autoscrollTarget.dispatchEvent(new Event('change', { bubbles: true }))
+    }
+  }
+}

data/app/javascript/onlylogs/controllers/log_streamer_controller.js

@@ -0,0 +1,432 @@
+import { Controller } from "@hotwired/stimulus";
+import { createConsumer } from "@rails/actioncable";
+
+export default class LogStreamerController extends Controller {
+  static values = {
+    filePath: { type: String },
+    cursorPosition: { type: Number, default: 0 },
+    lastLineNumber: { type: Number, default: 0 },
+    autoScroll: { type: Boolean, default: true },
+    autoStart: { type: Boolean, default: true },
+    filter: { type: String, default: '' },
+    mode: { type: String, default: 'live' },
+    regexpMode: { type: Boolean, default: false }
+  };
+
+  static targets = ["logLines", "filterInput", "lineRange", "liveMode", "message", "regexpMode", "websocketStatus", "stopButton", "clearButton"];
+
+  connect() {
+    this.consumer = createConsumer();
+
+    this.subscription = null;
+    this.isRunning = false;
+    this.reconnectTimeout = null;
+    this.minLineNumber = null;
+    this.maxLineNumber = 0;
+    this.isSearchFinished = true;
+
+    // Initialize clusterize
+    this.clusterize = null;
+    this.#initializeClusterize();
+
+    this.#updateWebsocketStatus('disconnected');
+
+    this.start();
+    this.updateLiveModeState();
+    this.scroll();
+  }
+
+  disconnect() {
+    this.stop();
+
+    // Clear any pending reconnect timeout
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = null;
+    }
+
+    // Destroy clusterize instance
+    if (this.clusterize) {
+      this.clusterize.destroy();
+      this.clusterize = null;
+    }
+  }
+
+  start() {
+    if (this.isRunning) {
+      return;
+    }
+
+    this.isRunning = true;
+    this.#createSubscription();
+  }
+
+  stop() {
+    if (!this.isRunning) {
+      return;
+    }
+
+    this.isRunning = false;
+
+    if (this.subscription) {
+      this.stopSearch();
+      this.subscription.unsubscribe();
+      this.subscription = null;
+    }
+  }
+
+  reset() {
+    this.stop();
+    this.clear();
+    this.#reinitializeClusterize();
+    this.start();
+  }
+
+  clear() {
+    this.minLineNumber = null;
+    this.maxLineNumber = 0;
+
+    this.clusterize.clear();
+
+    this.#updateLineRangeDisplay();
+  }
+
+  toggleAutoScroll() {
+    this.autoScrollValue = !this.autoScrollValue;
+    this.scroll();
+  }
+
+  toggleRegexpMode() {
+    this.regexpModeValue = this.regexpModeTarget.checked;
+    // If we have a filter applied, reconnect to apply the new regexp mode
+    if (this.filterInputTarget.value && this.filterInputTarget.value.trim() !== '') {
+      this.reconnectWithNewMode();
+    }
+  }
+
+  toggleLiveMode() {
+    // this condition looks revered, but the value here has been changed already. so the live mode has been enabled.
+    if (this.isLiveMode()) {
+      this.clearFilter();
+      this.modeValue = 'live';
+      this.reconnectWithNewMode();
+      return;
+    }
+    else {
+      this.liveModeTarget.checked = true;
+      return false;
+    }
+  }
+
+  applyFilter() {
+    // If filter is applied, disable live mode
+    if (this.filterInputTarget.value && this.filterInputTarget.value.trim() !== '') {
+      this.liveModeTarget.checked = false;
+      this.modeValue = 'search';
+    } else {
+      // If no filter, enable live mode
+      this.liveModeTarget.checked = true;
+      this.modeValue = 'live';
+    }
+
+    // Update visual state
+    this.updateLiveModeState();
+    this.updateStopButtonVisibility();
+
+    // Use the global debounced reconnection (300ms delay)
+    this.reconnectWithNewMode();
+  }
+
+  isLiveMode() {
+    return this.liveModeTarget.checked;
+  }
+
+  scroll() {
+    if (this.autoScrollValue) {
+      this.logLinesTarget.scrollTop = this.logLinesTarget.scrollHeight;
+    }
+  }
+
+  reconnectWithNewMode() {
+    // Clear any existing reconnect timeout
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout);
+    }
+
+    // Debounce reconnection to avoid multiple rapid reconnections
+    this.reconnectTimeout = setTimeout(() => {
+      this.stop();
+      this.clear();
+      this.#reinitializeClusterize();
+      this.start();
+      this.reconnectTimeout = null;
+    }, 600);
+  }
+
+  clearFilter() {
+    // Clear the filter input
+    this.filterInputTarget.value = '';
+
+    // Re-enable live mode
+    this.liveModeTarget.checked = true;
+    this.modeValue = 'live';
+
+    // Update visual state
+    this.updateLiveModeState();
+    this.updateStopButtonVisibility();
+
+    // Reconnect with cleared filter and live mode
+    this.reconnectWithNewMode();
+  }
+
+  stopSearch() {
+    if (this.subscription && this.isRunning) {
+      this.subscription.perform('stop_watcher');
+    }
+  }
+
+  clearLogs() {
+    this.clear();
+    this.#hideMessage();
+  }
+
+  updateLiveModeState() {
+    const liveModeLabel = this.liveModeTarget.closest('label');
+
+    if (this.isLiveMode()) {
+      liveModeLabel.classList.remove('live-mode-sticky');
+    } else {
+      liveModeLabel.classList.add('live-mode-sticky');
+    }
+  }
+
+  updateStopButtonVisibility() {
+    const shouldShow = !this.isLiveMode() && this.subscription && this.isRunning && !this.isSearchFinished;
+    this.stopButtonTarget.style.display = shouldShow ? 'inline-block' : 'none';
+  }
+
+
+  /**
+   * Create ActionCable subscription
+   */
+  #createSubscription() {
+    this.subscription = this.consumer.subscriptions.create("Onlylogs::LogsChannel", {
+      connected: () => {
+        this.#handleConnected();
+      },
+
+      disconnected: () => {
+        this.#handleDisconnected();
+      },
+
+      rejected: () => {
+        this.#handleRejected();
+      },
+
+      received: (data) => {
+        if (data.action === 'append_logs') {
+          this.isSearchFinished = this.isLiveMode();
+          this.#handleLogLines(data.lines);
+        } else if (data.action === 'message') {
+          this.#handleMessage(data.content);
+        } else if (data.action === 'finish') {
+          this.#handleFinish(data.content);
+        } else if (data.action === 'error') {
+          this.#handleError(data.content);
+        }
+      }
+    });
+  }
+
+  /**
+   * Handle successful connection
+   */
+  #handleConnected() {
+    this.subscription.perform('initialize_watcher', {
+      cursor_position: this.cursorPositionValue,
+      last_line_number: this.lastLineNumberValue,
+      file_path: this.filePathValue,
+      filter: this.filterInputTarget.value,
+      mode: this.modeValue,
+      regexp_mode: this.regexpModeValue
+    });
+
+    this.element.classList.add("log-streamer--connected");
+    this.element.classList.remove("log-streamer--disconnected", "log-streamer--rejected");
+    this.#updateWebsocketStatus('connected');
+    this.updateStopButtonVisibility();
+  }
+
+  #handleDisconnected() {
+    this.element.classList.add("log-streamer--disconnected");
+    this.element.classList.remove("log-streamer--connected");
+    this.#updateWebsocketStatus('disconnected');
+    this.updateStopButtonVisibility();
+  }
+
+  #handleRejected() {
+    this.element.classList.add("log-streamer--rejected");
+    this.element.classList.remove("log-streamer--connected", "log-streamer--disconnected");
+    this.#updateWebsocketStatus('rejected');
+    this.updateStopButtonVisibility();
+  }
+
+  #handleLogLines(lines) {
+    try {
+      const newLines = [];
+
+      lines.forEach(line => {
+        const { line_number, html } = line;
+
+        if (this.minLineNumber === null || line_number < this.minLineNumber) {
+          this.minLineNumber = line_number;
+        }
+        this.maxLineNumber = Math.max(this.maxLineNumber, line_number);
+
+        // Add to new lines array for clusterize
+        newLines.push(html);
+      });
+
+      // Append new lines to clusterize
+      if (newLines.length > 0) {
+        this.clusterize.append(newLines);
+        this.#updateLineRangeDisplay();
+        this.scroll();
+      }
+
+      // Update stop button visibility after processing lines
+      this.updateStopButtonVisibility();
+
+    } catch (error) {
+      console.error('Error handling log lines:', error);
+    }
+  }
+
+  #handleMessage(message) {
+    this.#hideMessage();
+      if (message === '') {
+      this.messageTarget.innerHTML = "";
+    } else {
+      const loadingIcon = message.endsWith('...') ? '<span class="onlylogs-spin-animation">⟳</span>' : '';
+      this.messageTarget.innerHTML = loadingIcon + message;
+    }
+  }
+
+  #handleFinish(message) {
+    // Display the finish message without loading icon
+    this.messageTarget.innerHTML = message;
+
+    // Mark search as finished
+    this.isSearchFinished = true;
+
+    // Update stop button visibility (should hide it)
+    this.updateStopButtonVisibility();
+  }
+
+  #handleError(message) {
+    // Display error message with error styling
+    this.messageTarget.innerHTML = `<span class="error-message">❌ ${message}</span>`;
+
+    // Mark search as finished
+    this.isSearchFinished = true;
+
+    // Update stop button visibility (should hide it)
+    this.updateStopButtonVisibility();
+
+    // Stop the watcher
+    this.stop();
+  }
+
+  #hideMessage() {
+    this.messageTarget.innerHTML = '';
+  }
+
+  #updateLineRangeDisplay() {
+    const resultsCount = this.clusterize.getRowsAmount();
+    let lineRangeText;
+
+    if (this.minLineNumber === null || this.maxLineNumber === 0) {
+      lineRangeText = `No lines`;
+    } else if (this.minLineNumber === this.maxLineNumber) {
+      lineRangeText = `Line ${this.#formatNumber(this.minLineNumber)}`;
+    } else {
+      lineRangeText = `Lines ${this.#formatNumber(this.minLineNumber)} - ${this.#formatNumber(this.maxLineNumber)}`;
+    }
+
+    this.lineRangeTarget.textContent = `${lineRangeText} | Results: ${this.#formatNumber(resultsCount)}`;
+  }
+
+  #formatNumber(number) {
+    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "'");
+  }
+
+  #updateWebsocketStatus(status) {
+    if (!this.hasWebsocketStatusTarget) {
+      return;
+    }
+
+    const statusElement = this.websocketStatusTarget;
+    statusElement.className = `websocket-status websocket-status--${status}`;
+
+    switch (status) {
+      case 'connected':
+        statusElement.innerHTML = '🟢';
+        statusElement.title = 'WebSocket Connected';
+        break;
+      case 'disconnected':
+        statusElement.innerHTML = '🔴';
+        statusElement.title = 'WebSocket Disconnected';
+        break;
+      case 'rejected':
+        statusElement.innerHTML = '🟡';
+        statusElement.title = 'WebSocket Connection Rejected';
+        break;
+      default:
+        statusElement.innerHTML = '⚪';
+        statusElement.title = 'WebSocket Status Unknown';
+    }
+  }
+
+  getStatus() {
+    return {
+      isRunning: this.isRunning,
+      filePath: this.filePathValue,
+      cursorPosition: this.cursorPositionValue,
+      lineCount: this.clusterize.getRowsAmount(),
+      maxLineNumber: this.maxLineNumber,
+      connected: this.subscription && this.subscription.identifier
+    };
+  }
+
+  #initializeClusterize() {
+    this.clusterize = new window.Clusterize({
+      scrollId: 'scrollArea',
+      contentId: 'contentArea',
+      rows: [],
+      tag: 'pre',
+      rows_in_block: 50,
+      blocks_in_cluster: 4,
+      show_no_data_row: false,
+      no_data_text: 'No log lines available',
+      no_data_class: 'clusterize-no-data',
+      keep_parity: true,
+      callbacks: {
+        clusterWillChange: () => {
+          // Optional: handle cluster change
+        },
+        clusterChanged: () => {
+          // Optional: handle after cluster change
+        },
+        scrollingProgress: (progress) => {
+          // Optional: handle scrolling progress
+        }
+      }
+    });
+  }
+
+  #reinitializeClusterize() {
+    this.clusterize.destroy();
+    this.clusterize = null;
+    this.#initializeClusterize();
+  }
+}

data/app/javascript/onlylogs/controllers/text_selection_controller.js

@@ -0,0 +1,90 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class TextSelectionController extends Controller {
+  static targets = ["button", "filterInput", "logLines", "regexpMode"]
+
+  connect() {
+    this.boundHandleTextSelection = this.handleTextSelection.bind(this)
+    this.boundHandleDocumentClick = this.handleDocumentClick.bind(this)
+    this.boundHandleSelectionChange = this.handleSelectionChange.bind(this)
+    
+    // Only listen for text selection on the log lines, not the toolbar
+    this.logLinesTarget.addEventListener('mouseup', this.boundHandleTextSelection)
+    document.addEventListener('click', this.boundHandleDocumentClick)
+    document.addEventListener('selectionchange', this.boundHandleSelectionChange)
+  }
+
+  disconnect() {
+    this.logLinesTarget.removeEventListener('mouseup', this.boundHandleTextSelection)
+    document.removeEventListener('click', this.boundHandleDocumentClick)
+    document.removeEventListener('selectionchange', this.boundHandleSelectionChange)
+  }
+
+  handleTextSelection(event) {
+    const selection = window.getSelection()
+    const selectedText = selection.toString().trim()
+    
+    // Check if there's actually a text selection
+    if (selectedText.length > 0 && selection.rangeCount > 0) {
+      this.showButton(event, selectedText)
+    } else {
+      this.hideButton()
+    }
+  }
+
+  showButton(event, selectedText) {
+    if (!this.buttonTarget) {
+      return
+    }
+    
+    const containerRect = this.element.getBoundingClientRect()
+    
+    // Position button below mouse cursor
+    const left = event.clientX - containerRect.left - 40 // Roughly center the button
+    const top = event.clientY - containerRect.top + 10
+    
+    this.buttonTarget.style.left = Math.max(0, left) + 'px'
+    this.buttonTarget.style.top = Math.max(0, top) + 'px'
+    this.buttonTarget.style.display = 'block'
+    
+    // Store selected text for search
+    this.selectedText = selectedText
+  }
+
+  hideButton() {
+    this.buttonTarget.style.display = 'none'
+    this.selectedText = null
+  }
+
+  handleDocumentClick(event) {
+    // Only hide if clicking outside the button and outside the log lines container
+    if (!this.buttonTarget.contains(event.target) && !this.logLinesTarget.contains(event.target)) {
+      this.hideButton()
+    }
+  }
+
+  handleSelectionChange() {
+    // Check if the current selection is still valid
+    const selection = window.getSelection()
+    const selectedText = selection.toString().trim()
+    
+    // If no text is selected, hide the button
+    if (selectedText.length === 0 || selection.rangeCount === 0) {
+      this.hideButton()
+    }
+  }
+
+  searchSelectedText() {
+    if (this.selectedText) {
+      if (this.regexpModeTarget.checked) {
+        this.regexpModeTarget.checked = false
+        this.regexpModeTarget.dispatchEvent(new Event('change', { bubbles: true }))
+      }
+      
+      this.filterInputTarget.value = this.selectedText
+      this.filterInputTarget.dispatchEvent(new Event('input', { bubbles: true }))
+      this.hideButton()
+      window.getSelection().removeAllRanges()
+    }
+  }
+}

data/app/jobs/onlylogs/application_job.rb

@@ -0,0 +1,4 @@
+module Onlylogs
+  class ApplicationJob < ActiveJob::Base
+  end
+end