solid_log-ui 0.1.0

data/app/assets/javascripts/solid_log/live_tail.js.bak

@@ -0,0 +1,270 @@
+// Live Tail functionality for SolidLog streams
+// Supports both WebSocket (ActionCable) and HTTP polling modes
+(function() {
+  let liveTailActive = false;
+  let pollingInterval = null;
+  let cableSubscription = null;
+  let lastEntryId = null;
+  let mode = null;
+
+  function initializeLiveTail() {
+    const toggleButton = document.getElementById('live-tail-toggle');
+    if (!toggleButton) return;
+
+    mode = toggleButton.dataset.liveTailMode;
+    if (!mode || mode === 'disabled') return;
+
+    toggleButton.addEventListener('click', function(e) {
+      e.preventDefault();
+      toggleLiveTail();
+    });
+
+    // Store last entry ID for tracking
+    updateLastEntryId();
+  }
+
+  function toggleLiveTail() {
+    liveTailActive = !liveTailActive;
+    const button = document.getElementById('live-tail-toggle');
+
+    if (liveTailActive) {
+      startLiveTail();
+      button.textContent = '⏸ Pause';
+      button.classList.add('btn-primary');
+      button.classList.remove('btn-secondary');
+
+      // Show toast notification
+      if (window.SolidLogToast) {
+        window.SolidLogToast.show(`Live tail ${mode === 'websocket' ? 'streaming' : 'polling'} started`, 'info');
+      }
+    } else {
+      stopLiveTail();
+      button.textContent = '▶ Live Tail';
+      button.classList.remove('btn-primary');
+      button.classList.add('btn-secondary');
+
+      if (window.SolidLogToast) {
+        window.SolidLogToast.show('Live tail stopped', 'info');
+      }
+    }
+  }
+
+  function startLiveTail() {
+    if (mode === 'websocket' && typeof createConsumer !== 'undefined') {
+      startWebSocketTail();
+    } else {
+      // Fallback to polling if websocket unavailable or mode is 'polling'
+      startPollingTail();
+    }
+
+    // Auto-scroll to bottom
+    scrollToBottom();
+  }
+
+  function stopLiveTail() {
+    if (cableSubscription) {
+      cableSubscription.unsubscribe();
+      cableSubscription = null;
+    }
+
+    if (pollingInterval) {
+      clearInterval(pollingInterval);
+      pollingInterval = null;
+    }
+  }
+
+  function startWebSocketTail() {
+    // Get current filter params
+    const filters = getCurrentFilters();
+
+    // Create ActionCable subscription
+    const consumer = createConsumer();
+    cableSubscription = consumer.subscriptions.create(
+      {
+        channel: "SolidLog::LogStreamChannel",
+        filters: filters
+      },
+      {
+        connected() {
+          console.log('Connected to log stream');
+        },
+
+        disconnected() {
+          console.log('Disconnected from log stream');
+
+          // Reset button state to show stream has stopped
+          resetLiveTailButton();
+
+          // If still active, fallback to polling
+          if (liveTailActive) {
+            console.log('Falling back to polling mode');
+            if (window.SolidLogToast) {
+              window.SolidLogToast.show('Connection lost, switching to polling mode', 'warning');
+            }
+            startPollingTail();
+          }
+        },
+
+        received(data) {
+          // Received new log entry via websocket (already filtered server-side)
+          if (data.html) {
+            appendEntry(data.html);
+            updateLastEntryId();
+            scrollToBottom();
+          }
+        }
+      }
+    );
+  }
+
+  function startPollingTail() {
+    // Poll every 2 seconds
+    pollingInterval = setInterval(function() {
+      fetchNewEntries();
+    }, 2000);
+
+    // Initial fetch
+    fetchNewEntries();
+  }
+
+  function fetchNewEntries() {
+    const streamsPath = document.body.dataset.streamsPath || '/streams';
+    const url = new URL(window.location.origin + streamsPath);
+
+    // Copy current filters
+    const currentParams = new URLSearchParams(window.location.search);
+    currentParams.forEach((value, key) => {
+      url.searchParams.append(key, value);
+    });
+
+    // Add after_id parameter if we have a last entry
+    if (lastEntryId) {
+      url.searchParams.set('after_id', lastEntryId);
+    }
+
+    // Request turbo stream format
+    fetch(url.toString(), {
+      headers: {
+        'Accept': 'text/vnd.turbo-stream.html',
+        'X-Requested-With': 'XMLHttpRequest'
+      }
+    })
+    .then(response => {
+      if (!response.ok) throw new Error('Network response was not ok');
+      return response.text();
+    })
+    .then(html => {
+      if (html && html.trim()) {
+        // Turbo will automatically process the stream response
+        Turbo.renderStreamMessage(html);
+        updateLastEntryId();
+        scrollToBottom();
+      }
+    })
+    .catch(error => {
+      console.error('Error fetching new logs:', error);
+    });
+  }
+
+  function appendEntry(html) {
+    const logStream = document.getElementById('log-stream-content');
+    if (!logStream) return;
+
+    const temp = document.createElement('div');
+    temp.innerHTML = html;
+
+    // Append new entries
+    while (temp.firstChild) {
+      logStream.appendChild(temp.firstChild);
+    }
+  }
+
+  function updateLastEntryId() {
+    const logStream = document.getElementById('log-stream-content');
+    if (!logStream) return;
+
+    const entries = logStream.querySelectorAll('[data-entry-id]');
+    if (entries.length > 0) {
+      const lastEntry = entries[entries.length - 1];
+      lastEntryId = lastEntry.dataset.entryId;
+    }
+  }
+
+  function getCurrentFilters() {
+    const filters = {};
+    const params = new URLSearchParams(window.location.search);
+
+    params.forEach((value, key) => {
+      if (key.startsWith('filters[')) {
+        const filterKey = key.match(/filters\[(.*?)\]/)[1];
+        if (!filters[filterKey]) {
+          filters[filterKey] = [];
+        }
+        filters[filterKey].push(value);
+      }
+    });
+
+    return filters;
+  }
+
+  function entryMatchesFilters(entry) {
+    const filters = getCurrentFilters();
+
+    // If no filters, show all entries
+    if (Object.keys(filters).length === 0) {
+      return true;
+    }
+
+    // Check each filter
+    for (const [key, values] of Object.entries(filters)) {
+      if (!values || values.length === 0) continue;
+
+      // Get the entry's value for this filter
+      const entryValue = entry[key];
+      if (!entryValue) {
+        // If filter is set but entry doesn't have this field, exclude it
+        return false;
+      }
+
+      // For array filters (levels, app, etc.), check if entry value is in the filter array
+      if (Array.isArray(values)) {
+        if (!values.includes(String(entryValue))) {
+          return false;
+        }
+      } else {
+        // For single value filters
+        if (String(entryValue) !== String(values)) {
+          return false;
+        }
+      }
+    }
+
+    return true;
+  }
+
+  function scrollToBottom() {
+    setTimeout(() => {
+      if (window.SolidLogStream && window.SolidLogStream.scrollToBottom) {
+        window.SolidLogStream.scrollToBottom();
+      } else {
+        const streamsMain = document.querySelector('.streams-main');
+        if (streamsMain) {
+          streamsMain.scrollTop = streamsMain.scrollHeight;
+        }
+      }
+    }, 50);
+  }
+
+  // Initialize on page load
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeLiveTail);
+  } else {
+    initializeLiveTail();
+  }
+
+  // Re-initialize on turbo navigation
+  document.addEventListener('turbo:load', initializeLiveTail);
+
+  // Clean up on page unload
+  window.addEventListener('beforeunload', stopLiveTail);
+})();

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

@@ -0,0 +1,37 @@
+// Log Filter Buttons
+// Handles click events on log filter buttons to apply filters
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Handle filter button clicks
+  document.addEventListener('click', function(e) {
+    if (e.target.matches('.log-filter-btn') || e.target.closest('.log-filter-btn')) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const button = e.target.matches('.log-filter-btn') ? e.target : e.target.closest('.log-filter-btn');
+      const filterType = button.dataset.filterType;
+      const filterValue = button.dataset.filterValue;
+
+      if (!filterType || !filterValue) return;
+
+      // Always redirect to streams index when filtering
+      const streamsPath = document.body.dataset.streamsPath || '/streams';
+      const url = new URL(window.location.origin + streamsPath);
+
+      // Map filter types to URL parameters
+      const paramMapping = {
+        'request_id': 'filters[request_id]',
+        'ip': 'filters[ip]',
+        'user_id': 'filters[user_id]',
+        'method': 'filters[method][]',
+        'app': 'filters[app][]'
+      };
+
+      const paramName = paramMapping[filterType];
+      if (paramName) {
+        url.searchParams.set(paramName, filterValue);
+        window.location.href = url.toString();
+      }
+    }
+  });
+});

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

@@ -0,0 +1,195 @@
+// Stream scroll behavior: newest at bottom, infinite scroll up, auto-scroll
+(function() {
+  let isScrollingProgrammatically = false;
+  let oldestEntryId = null;
+  let isLoadingMore = false;
+  let hasMoreEntries = true;
+  let hasInitialized = false;
+
+  function initializeStreamScroll() {
+    const logStreamContent = document.getElementById('log-stream-content');
+    if (!logStreamContent) return;
+
+    // Get the oldest entry ID for pagination (first entry in the list)
+    updateOldestEntryId();
+
+    // Auto-scroll to bottom ONLY on initial page load (not on Turbo updates)
+    // Check if live tail is active - don't auto-scroll if it is
+    const liveTailButton = document.getElementById('live-tail-toggle');
+    const liveTailActive = liveTailButton && liveTailButton.textContent.includes('Pause');
+
+    if (!hasInitialized && !liveTailActive) {
+      // Use requestAnimationFrame to ensure DOM is fully rendered and laid out
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          scrollToBottom();
+        });
+      });
+      hasInitialized = true;
+    }
+
+    // Infinite scroll: load more when scrolling up
+    const logStream = document.querySelector('.log-stream');
+    if (logStream) {
+      console.log('Attaching scroll listener to .log-stream');
+      logStream.addEventListener('scroll', function() {
+        console.log('Scroll event - scrollTop:', this.scrollTop, 'isScrollingProgrammatically:', isScrollingProgrammatically, 'isLoadingMore:', isLoadingMore);
+
+        if (isScrollingProgrammatically || isLoadingMore) return;
+
+        // Check if scrolled to top (or near top)
+        if (this.scrollTop < 100) {
+          console.log('Near top, triggering loadMoreLogs');
+          loadMoreLogs();
+        }
+      });
+    } else {
+      console.log('WARNING: .log-stream not found!');
+    }
+  }
+
+  function updateOldestEntryId() {
+    const logStreamContent = document.getElementById('log-stream-content');
+    if (!logStreamContent) {
+      console.log('updateOldestEntryId: log-stream-content not found');
+      return;
+    }
+
+    const entries = logStreamContent.querySelectorAll('.log-row-compact-wrapper, .log-row');
+    console.log('updateOldestEntryId: found', entries.length, 'entries');
+
+    if (entries.length > 0) {
+      // Get the FIRST entry (oldest, since DOM is in ASC order after reversing)
+      const firstEntry = entries[0];
+      const newOldestId = firstEntry.dataset.entryId;
+      console.log('updateOldestEntryId: newOldestId =', newOldestId, ', oldestEntryId =', oldestEntryId);
+
+      // If the oldest ID hasn't changed after a fetch, we've reached the end
+      if (oldestEntryId !== null && newOldestId === oldestEntryId) {
+        console.log('updateOldestEntryId: reached the end (ID unchanged)');
+        hasMoreEntries = false;
+      } else {
+        console.log('updateOldestEntryId: updating to', newOldestId);
+        oldestEntryId = newOldestId;
+        hasMoreEntries = true;
+      }
+    }
+  }
+
+  function scrollToBottom() {
+    isScrollingProgrammatically = true;
+    const logStream = document.querySelector('.log-stream');
+    if (logStream) {
+      // Scroll to bottom
+      logStream.scrollTop = logStream.scrollHeight;
+    }
+    setTimeout(() => {
+      isScrollingProgrammatically = false;
+    }, 100);
+  }
+
+  function loadMoreLogs() {
+    console.log('loadMoreLogs called - isLoadingMore:', isLoadingMore, 'oldestEntryId:', oldestEntryId, 'hasMoreEntries:', hasMoreEntries);
+
+    if (isLoadingMore || !oldestEntryId || !hasMoreEntries) {
+      console.log('Cannot load more - bailing out');
+      return;
+    }
+
+    console.log('Loading more logs before ID:', oldestEntryId);
+    isLoadingMore = true;
+
+    // Store scroll position before loading
+    const logStream = document.querySelector('.log-stream');
+    const scrollHeightBefore = logStream.scrollHeight;
+    const scrollTopBefore = logStream.scrollTop;
+
+    // Get current filters from the URL
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.search);
+
+    // Add pagination parameter (load logs before the oldest ID)
+    params.set('before_id', oldestEntryId);
+    params.set('limit', '50'); // Load 50 more entries
+
+    // Show loading indicator
+    showLoadingIndicator();
+
+    // Fetch more logs via Turbo Stream
+    fetch(`${url.pathname}?${params.toString()}`, {
+      headers: {
+        'Accept': 'text/vnd.turbo-stream.html',
+        'X-Requested-With': 'XMLHttpRequest'
+      }
+    })
+    .then(response => {
+      console.log('Fetch response status:', response.status, 'ok:', response.ok);
+      if (response.ok) {
+        return response.text();
+      }
+      throw new Error('No more logs');
+    })
+    .then(html => {
+      console.log('Received HTML, length:', html.length);
+      // Turbo will handle prepending via turbo_stream.prepend
+      // We just need to update the oldest entry ID and restore scroll position
+      if (window.Turbo) {
+        console.log('Rendering Turbo stream');
+        window.Turbo.renderStreamMessage(html);
+      }
+
+      // Update oldest entry ID after Turbo renders
+      setTimeout(() => {
+        console.log('Updating oldest entry ID after render');
+        updateOldestEntryId();
+
+        // Maintain scroll position (so the view doesn't jump)
+        const scrollHeightAfter = logStream.scrollHeight;
+        const scrollDifference = scrollHeightAfter - scrollHeightBefore;
+        console.log('Scroll adjustment - before:', scrollHeightBefore, 'after:', scrollHeightAfter, 'diff:', scrollDifference);
+        logStream.scrollTop = scrollTopBefore + scrollDifference;
+
+        hideLoadingIndicator();
+        isLoadingMore = false;
+        console.log('Load complete');
+      }, 50);
+    })
+    .catch(error => {
+      console.log('Fetch error:', error.message);
+      hideLoadingIndicator();
+      isLoadingMore = false;
+      hasMoreEntries = false;
+    });
+  }
+
+  function showLoadingIndicator() {
+    const logStream = document.querySelector('.log-stream');
+    if (!logStream) return;
+
+    const indicator = document.createElement('div');
+    indicator.className = 'loading-indicator';
+    indicator.textContent = 'Loading more logs...';
+    logStream.insertBefore(indicator, logStream.firstChild);
+  }
+
+  function hideLoadingIndicator() {
+    const indicator = document.querySelector('.loading-indicator');
+    if (indicator) {
+      indicator.remove();
+    }
+  }
+
+  // For Turbo apps, turbo:load handles both initial load and navigations
+  document.addEventListener('turbo:load', initializeStreamScroll);
+
+  // Reset initialization flag on actual navigation
+  document.addEventListener('turbo:before-visit', function() {
+    hasInitialized = false;
+  });
+
+  // Export for live tail usage
+  window.SolidLogStream = {
+    scrollToBottom: scrollToBottom,
+    updateOldestEntryId: updateOldestEntryId
+  };
+})();

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

@@ -0,0 +1,162 @@
+// Timeline Histogram functionality for log stream filtering
+(function() {
+  function initializeTimelineHistograms() {
+    document.querySelectorAll('[data-controller="timeline-histogram"]').forEach(histogram => {
+      const chart = histogram.querySelector('[data-timeline-histogram-target="chart"]');
+      const barsContainer = histogram.querySelector('[data-timeline-histogram-target="barsContainer"]');
+      const bars = histogram.querySelectorAll('[data-timeline-histogram-target="bar"]');
+      const tooltip = histogram.querySelector('[data-timeline-histogram-target="tooltip"]');
+      const selection = histogram.querySelector('[data-timeline-histogram-target="selection"]');
+      const form = histogram.querySelector('[data-timeline-histogram-target="form"]');
+      const startTimeField = histogram.querySelector('[data-timeline-histogram-target="startTimeField"]');
+      const endTimeField = histogram.querySelector('[data-timeline-histogram-target="endTimeField"]');
+
+      if (!chart || !bars.length) return;
+
+      let selectionStart = null;
+      let selectionEnd = null;
+      let isDragging = false;
+
+      // Show tooltip on hover
+      bars.forEach(bar => {
+        bar.addEventListener('mouseenter', function() {
+          const count = this.dataset.count;
+          const startTime = new Date(this.dataset.startTime);
+          const endTime = new Date(this.dataset.endTime);
+
+          tooltip.innerHTML = `
+            <div class="tooltip-time">${formatTime(startTime)} - ${formatTime(endTime)}</div>
+            <div class="tooltip-count">${count} log${count == 1 ? '' : 's'}</div>
+          `;
+
+          const rect = this.getBoundingClientRect();
+          const chartRect = chart.getBoundingClientRect();
+
+          tooltip.style.display = 'block';
+          tooltip.style.left = (rect.left - chartRect.left + rect.width / 2) + 'px';
+          tooltip.style.top = (rect.top - chartRect.top - 10) + 'px';
+        });
+
+        bar.addEventListener('mouseleave', function() {
+          if (!isDragging) {
+            tooltip.style.display = 'none';
+          }
+        });
+
+        // Start selection on mousedown
+        bar.addEventListener('mousedown', function(e) {
+          e.preventDefault();
+          isDragging = true;
+          const index = parseInt(this.dataset.index);
+          selectionStart = index;
+          selectionEnd = index;
+          updateSelection();
+        });
+      });
+
+      // Handle dragging
+      document.addEventListener('mousemove', function(e) {
+        if (!isDragging) return;
+
+        const chartRect = barsContainer.getBoundingClientRect();
+        const x = e.clientX - chartRect.left;
+
+        // Find the bar at this x position
+        bars.forEach(bar => {
+          const rect = bar.getBoundingClientRect();
+          const barX = rect.left - chartRect.left;
+
+          if (x >= barX && x <= barX + rect.width) {
+            const index = parseInt(bar.dataset.index);
+            if (index !== selectionEnd) {
+              selectionEnd = index;
+              updateSelection();
+            }
+          }
+        });
+      });
+
+      // End selection on mouseup
+      document.addEventListener('mouseup', function() {
+        if (isDragging) {
+          isDragging = false;
+          applySelection();
+        }
+      });
+
+      function updateSelection() {
+        if (selectionStart === null || selectionEnd === null) {
+          selection.style.display = 'none';
+          return;
+        }
+
+        const start = Math.min(selectionStart, selectionEnd);
+        const end = Math.max(selectionStart, selectionEnd);
+
+        const startBar = bars[start];
+        const endBar = bars[end];
+
+        const startRect = startBar.getBoundingClientRect();
+        const endRect = endBar.getBoundingClientRect();
+        const chartRect = barsContainer.getBoundingClientRect();
+
+        const left = startRect.left - chartRect.left;
+        const width = (endRect.left + endRect.width) - startRect.left;
+
+        selection.style.display = 'block';
+        selection.style.left = left + 'px';
+        selection.style.width = width + 'px';
+
+        // Highlight selected bars
+        bars.forEach((bar, index) => {
+          if (index >= start && index <= end) {
+            bar.classList.add('selected');
+          } else {
+            bar.classList.remove('selected');
+          }
+        });
+      }
+
+      function applySelection() {
+        if (selectionStart === null || selectionEnd === null) return;
+
+        const start = Math.min(selectionStart, selectionEnd);
+        const end = Math.max(selectionStart, selectionEnd);
+
+        const startTime = bars[start].dataset.startTime;
+        const endTime = bars[end].dataset.endTime;
+
+        startTimeField.value = startTime;
+        endTimeField.value = endTime;
+
+        form.requestSubmit();
+      }
+
+      function formatTime(date) {
+        const hours = String(date.getHours()).padStart(2, '0');
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+        return `${hours}:${minutes}`;
+      }
+
+      // Clear selection button
+      const clearButton = histogram.querySelector('[data-action*="clearSelection"]');
+      if (clearButton) {
+        clearButton.addEventListener('click', function() {
+          startTimeField.value = '';
+          endTimeField.value = '';
+          form.requestSubmit();
+        });
+      }
+    });
+  }
+
+  // Initialize on page load
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeTimelineHistograms);
+  } else {
+    initializeTimelineHistograms();
+  }
+
+  // Re-initialize on Turbo load (if using Turbo)
+  document.addEventListener('turbo:load', initializeTimelineHistograms);
+})();