rails_pulse 0.1.0

data/app/javascript/rails_pulse/application.js

@@ -0,0 +1,119 @@
+import * as echarts from "echarts";
+import "./theme";
+import * as Turbo from "@hotwired/turbo";
+import { Application } from "@hotwired/stimulus";
+
+// CSS Zero Controllers
+import ContextMenuController from "./controllers/context_menu_controller";
+import DialogController from "./controllers/dialog_controller";
+import MenuController from "./controllers/menu_controller";
+import PopoverController from "./controllers/popover_controller";
+import FormController from "./controllers/form_controller";
+
+// Rails Pulse Controllers
+import IndexController from "./controllers/index_controller";
+import ColorSchemeController from "./controllers/color_scheme_controller";
+import PaginationController from "./controllers/pagination_controller";
+import TimezoneController from "./controllers/timezone_controller";
+import IconController from "./controllers/icon_controller";
+import ExpandableRowController from "./controllers/expandable_row_controller";
+
+const application = Application.start();
+
+// Configure Stimulus application
+application.debug = false;
+window.Stimulus = application;
+
+// Make ECharts available globally for rails_charts gem
+window.echarts = echarts;
+
+// Make Turbo available globally
+window.Turbo = Turbo;
+
+application.register("rails-pulse--context-menu", ContextMenuController);
+application.register("rails-pulse--dialog", DialogController);
+application.register("rails-pulse--menu", MenuController);
+application.register("rails-pulse--popover", PopoverController);
+application.register("rails-pulse--form", FormController);
+
+application.register("rails-pulse--index", IndexController);
+application.register("rails-pulse--color-scheme", ColorSchemeController);
+application.register("rails-pulse--pagination", PaginationController);
+application.register("rails-pulse--timezone", TimezoneController);
+application.register("rails-pulse--icon", IconController);
+application.register("rails-pulse--expandable-row", ExpandableRowController);
+
+// Ensure Turbo Frames are loaded after page load
+document.addEventListener('DOMContentLoaded', () => {
+  // Force Turbo to process any frames with src attributes
+  const frames = document.querySelectorAll('turbo-frame[src]:not([complete])');
+  frames.forEach(frame => {
+    // Trigger frame loading by temporarily removing and re-adding src
+    const src = frame.getAttribute('src');
+    if (src) {
+      frame.removeAttribute('src');
+      setTimeout(() => frame.setAttribute('src', src), 10);
+    }
+  });
+});
+
+// Also handle frames that are added dynamically
+const observer = new MutationObserver((mutations) => {
+  mutations.forEach((mutation) => {
+    if (mutation.type === 'childList') {
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType === 1 && node.tagName === 'TURBO-FRAME' && node.hasAttribute('src') && !node.hasAttribute('complete')) {
+          const src = node.getAttribute('src');
+          if (src) {
+            node.removeAttribute('src');
+            setTimeout(() => node.setAttribute('src', src), 10);
+          }
+        }
+      });
+    }
+  });
+});
+
+observer.observe(document.body, { childList: true, subtree: true });
+
+// Register ECharts theme for Rails Pulse
+echarts.registerTheme('railspulse', {
+  "color": ["#ffc91f", "#ffde66", "#fbedbf"],
+  "backgroundColor": "rgba(255,255,255,0)",
+  "textStyle": {},
+  "title": { "textStyle": { "color": "#666666" } },
+  "line": { "lineStyle": { "width": "3" }, "symbolSize": "8" },
+  "bar": { "itemStyle": { "barBorderWidth": 0 } }
+});
+
+// Chart resize functionality (moved from inline script for CSP compliance)
+window.addEventListener('resize', function() {
+  if (window.RailsCharts && window.RailsCharts.charts) {
+    Object.keys(window.RailsCharts.charts).forEach(function(chartID) {
+      window.RailsCharts.charts[chartID].resize();
+    });
+  }
+});
+
+// Global function to initialize Rails Charts in any container.
+// This is needed as we render Rails Charts in Turbo Frames.
+window.initializeChartsInContainer = function(containerId) {
+  requestAnimationFrame(() => {
+    const container = containerId ? document.getElementById(containerId) : document;
+    const scripts = container.querySelectorAll('script');
+    scripts.forEach(script => {
+      const content = script.textContent;
+      const match = content.match(/function\s+(init_rails_charts_[a-f0-9]+)/);
+      if (match && window[match[1]]) {
+        window[match[1]]();
+      }
+    });
+  });
+};
+
+// Export for global access
+window.RailsPulse = {
+  application,
+  version: "1.0.0"
+};
+

data/app/javascript/rails_pulse/controllers/color_scheme_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.storageKey = "color-scheme"
+    this.html = document.documentElement
+    const saved = localStorage.getItem(this.storageKey)
+    if (saved) {
+      this.html.setAttribute("data-color-scheme", saved)
+    }
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    const current = this.html.getAttribute("data-color-scheme") === "dark" ? "light" : "dark"
+    console.log("Toggling color scheme to", current)
+    this.html.setAttribute("data-color-scheme", current)
+    localStorage.setItem(this.storageKey, current)
+  }
+}

data/app/javascript/rails_pulse/controllers/context_menu_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "menu" ]
+
+  show(event) {
+    // Use CSS custom properties instead of inline styles for CSP safety
+    this.menuTarget.style.setProperty('--context-menu-x', `${event.clientX - 5}px`)
+    this.menuTarget.style.setProperty('--context-menu-y', `${event.clientY - 5}px`)
+    
+    // Add CSS class to apply positioning via CSS custom properties
+    this.menuTarget.classList.add('positioned')
+    
+    setTimeout(() => this.menuTarget.showPopover(), 150)
+  }
+}

data/app/javascript/rails_pulse/controllers/dialog_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "menu" ]
+
+  show() {
+    this.menuTarget.show()
+  }
+
+  showModal() {
+    this.menuTarget.showModal()
+  }
+
+  close() {
+    this.menuTarget.close()
+  }
+
+  closeOnClickOutside({ target }) {
+    target.nodeName === "DIALOG" && this.close()
+  }
+}

data/app/javascript/rails_pulse/controllers/expandable_row_controller.js

@@ -0,0 +1,67 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["trigger", "details", "chevron"]
+
+  connect() {
+    // Ensure details row is initially hidden
+    this.detailsTarget.classList.add("hidden")
+    this.loaded = false
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    
+    const isExpanded = !this.detailsTarget.classList.contains("hidden")
+    console.log('Toggle clicked, currently expanded:', isExpanded)
+    
+    console.log('isExpanded', isExpanded)
+    if (isExpanded) {
+      console.log('Collapsing...')
+      this.collapse()
+    } else {
+      console.log('Expanding...')
+      this.expand()
+    }
+  }
+
+  expand() {
+    // Show details row
+    this.detailsTarget.classList.remove("hidden")
+    
+    // Rotate chevron to point down
+    this.chevronTarget.style.transform = "rotate(90deg)"
+    
+    // Add expanded state class to trigger row
+    this.triggerTarget.classList.add("expanded")
+    
+    // Load content lazily on first expansion
+    if (!this.loaded) {
+      this.loadOperationDetails()
+      this.loaded = true
+    }
+  }
+
+  loadOperationDetails() {
+    // Find the turbo frame and set its src to trigger loading
+    const turboFrame = this.detailsTarget.querySelector('turbo-frame')
+    if (turboFrame) {
+      const operationUrl = turboFrame.dataset.operationUrl
+      if (operationUrl) {
+        turboFrame.src = operationUrl
+      }
+    }
+  }
+
+  collapse() {
+    // Hide details row
+    this.detailsTarget.classList.add("hidden")
+    
+    // Rotate chevron back to point right
+    this.chevronTarget.style.transform = "rotate(0deg)"
+    
+    // Remove expanded state class from trigger row
+    this.triggerTarget.classList.remove("expanded")
+  }
+}

data/app/javascript/rails_pulse/controllers/form_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "cancel" ]
+
+  initialize() {
+    // Simple debounce implementation for asset independence
+    this.search = this.debounce(this.search.bind(this), 500)
+  }
+
+  // Simple debounce implementation (replaces lodash dependency)
+  debounce(func, wait) {
+    let timeout
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout)
+        func(...args)
+      }
+      clearTimeout(timeout)
+      timeout = setTimeout(later, wait)
+    }
+  }
+
+  submit() {
+    this.element.requestSubmit()
+  }
+
+  search() {
+    this.element.requestSubmit()
+  }
+
+  cancel() {
+    this.cancelTarget?.click()
+  }
+
+  preventAttachment(event) {
+    event.preventDefault()
+  }
+}

data/app/javascript/rails_pulse/controllers/icon_controller.js

@@ -0,0 +1,170 @@
+import { Controller } from "@hotwired/stimulus"
+
+// CSP-Safe Icon Controller for Rails Pulse
+// Integrates with window.RailsPulseIcons for pre-compiled icon access
+export default class extends Controller {
+  static values = {
+    name: String,      // Icon name (e.g., "menu", "chevron-right")
+    width: String,     // Icon width (default: "24")
+    height: String,    // Icon height (default: "24")
+    strokeWidth: String // Stroke width (default: "2")
+  }
+
+  static classes = ["loading", "error", "loaded"]
+
+  connect() {
+    this.renderIcon()
+  }
+
+  // Called when icon name changes
+  nameValueChanged() {
+    this.renderIcon()
+  }
+
+  // CSP-safe icon rendering using DOM methods
+  renderIcon() {
+    // Clear any existing content
+    this.clearIcon()
+
+    // Add loading state
+    this.element.classList.add(...this.loadingClasses)
+    this.element.classList.remove(...this.errorClasses, ...this.loadedClasses)
+
+    // Get icon name
+    const iconName = this.nameValue
+    if (!iconName) {
+      this.handleError(`Icon name is required`)
+      return
+    }
+
+    // Check if RailsPulseIcons is available
+    if (!window.RailsPulseIcons) {
+      this.handleError(`RailsPulseIcons not loaded`)
+      return
+    }
+
+    // Get icon SVG content
+    const svgContent = window.RailsPulseIcons.get(iconName)
+    if (!svgContent) {
+      this.handleError(`Icon '${iconName}' not found`)
+      return
+    }
+
+    // Create SVG element using CSP-safe DOM methods
+    try {
+      const svg = this.createSVGElement(svgContent)
+      this.element.appendChild(svg)
+      
+      // Update state to loaded
+      this.element.classList.remove(...this.loadingClasses, ...this.errorClasses)
+      this.element.classList.add(...this.loadedClasses)
+      
+      // Set aria-label for accessibility
+      this.element.setAttribute('aria-label', `${iconName} icon`)
+      
+    } catch (error) {
+      this.handleError(`Failed to render icon '${iconName}': ${error.message}`)
+    }
+  }
+
+  // Create SVG element using CSP-safe DOM methods
+  createSVGElement(svgContent) {
+    // Create SVG element with proper namespace
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    
+    // Set SVG attributes
+    svg.setAttribute('width', this.widthValue || '24')
+    svg.setAttribute('height', this.heightValue || '24')
+    svg.setAttribute('viewBox', '0 0 24 24')
+    svg.setAttribute('fill', 'none')
+    svg.setAttribute('stroke', 'currentColor')
+    svg.setAttribute('stroke-width', this.strokeWidthValue || '2')
+    svg.setAttribute('stroke-linecap', 'round')
+    svg.setAttribute('stroke-linejoin', 'round')
+    
+    // Use the RailsPulseIcons render method for CSP-safe injection
+    if (window.RailsPulseIcons.render) {
+      // Clear the element and let RailsPulseIcons handle the rendering
+      const tempDiv = document.createElement('div')
+      const success = window.RailsPulseIcons.render(this.nameValue, tempDiv, {
+        width: this.widthValue || '24',
+        height: this.heightValue || '24'
+      })
+      
+      if (success && tempDiv.firstChild) {
+        return tempDiv.firstChild
+      }
+    }
+    
+    // Fallback: manually parse SVG content using DOMParser
+    const parser = new DOMParser()
+    const svgDoc = parser.parseFromString(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="${this.widthValue || '24'}" height="${this.heightValue || '24'}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${this.strokeWidthValue || '2'}" stroke-linecap="round" stroke-linejoin="round">${svgContent}</svg>`,
+      'image/svg+xml'
+    )
+    
+    const parsedSvg = svgDoc.documentElement
+    if (parsedSvg.nodeName === 'parsererror') {
+      throw new Error('Invalid SVG content')
+    }
+    
+    // Import the node into the current document
+    return document.importNode(parsedSvg, true)
+  }
+
+  // Clear icon content safely
+  clearIcon() {
+    // Use DOM methods to clear content (CSP-safe)
+    while (this.element.firstChild) {
+      this.element.removeChild(this.element.firstChild)
+    }
+  }
+
+  // Handle icon loading errors
+  handleError(message) {
+    console.warn(`[Rails Pulse Icon Controller] ${message}`)
+    
+    // Clear any existing content
+    this.clearIcon()
+    
+    // Update state to error
+    this.element.classList.remove(...this.loadingClasses, ...this.loadedClasses)
+    this.element.classList.add(...this.errorClasses)
+    
+    // Create fallback placeholder using CSP-safe methods
+    this.createErrorPlaceholder()
+    
+    // Set aria-label for accessibility
+    this.element.setAttribute('aria-label', 'Icon not available')
+  }
+
+  // Create error placeholder using CSP-safe DOM methods
+  createErrorPlaceholder() {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    svg.setAttribute('width', this.widthValue || '24')
+    svg.setAttribute('height', this.heightValue || '24')
+    svg.setAttribute('viewBox', '0 0 24 24')
+    svg.setAttribute('fill', 'currentColor')
+    svg.setAttribute('opacity', '0.3')
+    
+    // Create a simple rectangle as placeholder
+    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
+    rect.setAttribute('width', '20')
+    rect.setAttribute('height', '20')
+    rect.setAttribute('x', '2')
+    rect.setAttribute('y', '2')
+    rect.setAttribute('rx', '2')
+    
+    svg.appendChild(rect)
+    this.element.appendChild(svg)
+  }
+
+  // Debug method to list available icons
+  listAvailableIcons() {
+    if (window.RailsPulseIcons?.list) {
+      console.log('Available icons:', window.RailsPulseIcons.list())
+    } else {
+      console.warn('RailsPulseIcons not loaded or list method not available')
+    }
+  }
+}

data/app/javascript/rails_pulse/controllers/index_controller.js

@@ -0,0 +1,230 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["chart", "paginationLimit", "indexTable"] // The chart element to be monitored
+
+  static values = {
+    chartId: String        // The ID of the chart to be monitored
+  }
+
+  // Add a property to track the last request time
+  lastTurboFrameRequestAt = 0;
+
+  connect() {
+    // Listen for the custom event 'chart:initialized' to set up the chart.
+    // This event is sent from the RailsCharts library when the chart is ready.
+    this.handleChartInitialized = this.onChartInitialized.bind(this);
+    document.addEventListener('chart:initialized', this.handleChartInitialized);
+
+    // If the chart is already initialized (e.g., on back navigation), set up immediately
+    if (window.RailsCharts?.charts?.[this.chartIdValue]) { this.setup(); }
+  }
+
+  disconnect() {
+    // Remove the event listener from RailsCharts when the controller is disconnected
+    document.removeEventListener('chart:initialized', this.handleChartInitialized);
+
+    // Remove chart event listeners if they exist
+    if (this.chartTarget) {
+      this.chartTarget.removeEventListener('mousedown', this.handleChartMouseDown);
+      this.chartTarget.removeEventListener('mouseup', this.handleChartMouseUp);
+    }
+    document.removeEventListener('mouseup', this.handleDocumentMouseUp);
+  }
+
+  // After the chart is initialized, set up the event listeners and data tracking
+  onChartInitialized(event) {
+    if (event.detail.chartId === this.chartIdValue) { this.setup(); }
+  }
+
+  setup() {
+    if (this.setupDone) return; // Prevent multiple setups
+
+    // Get the chart element which the RailsCharts library has created
+    this.chart = window.RailsCharts.charts[this.chartIdValue];
+    if (!this.chart) return;
+
+    this.visibleData = this.getVisibleData();
+    this.setupChartEventListeners();
+    this.setupDone = true;
+  }
+
+  // Add some event listeners to the chart so we can track the zoom changes
+  setupChartEventListeners() {
+    // When clicking on the chart, we want to store the current visible data so we can compare it later
+    this.handleChartMouseDown = () => { this.visibleData = this.getVisibleData(); };
+    this.chartTarget.addEventListener('mousedown', this.handleChartMouseDown);
+
+    // When releasing the mouse button, we want to check if the visible data has changed
+    this.handleChartMouseUp = () => { this.handleZoomChange(); };
+    this.chartTarget.addEventListener('mouseup', this.handleChartMouseUp);
+
+    // When the chart is zoomed, we want to check if the visible data has changed
+    this.chart.on('datazoom', () => { this.handleZoomChange(); });
+
+    // When releasing the mouse button outside the chart, we want to check if the visible data has changed
+    this.handleDocumentMouseUp = () => { this.handleZoomChange(); };
+    document.addEventListener('mouseup', this.handleDocumentMouseUp);
+  }
+
+  // This returns the visible data from the chart based on the current zoom level.
+  // The xAxis data and series data are sliced based on the start and end values of the dataZoom component.
+  // The series data will contain the actual data points that are visible in the chart.
+  getVisibleData() {
+    const currentOption = this.chart.getOption();
+    const dataZoom = currentOption.dataZoom[1];
+    const xAxisData = currentOption.xAxis[0].data;
+    const seriesData = currentOption.series[0].data;
+
+    const startValue = dataZoom.startValue;
+    const endValue = dataZoom.endValue;
+
+    return {
+      xAxis: xAxisData.slice(startValue, endValue + 1),
+      series: seriesData.slice(startValue, endValue + 1)
+    };
+  }
+
+  // When the zoom level changes, we want to check if the visible data has changed
+  // If it has, we want to send a request to the server with the new visible data so
+  // we can update the table with the new data that is visible in the chart.
+  handleZoomChange() {
+    const newVisibleData = this.getVisibleData();
+    if (newVisibleData.xAxis.join() !== this.visibleData.xAxis.join()) {
+      this.visibleData = newVisibleData;
+      this.updateUrlWithZoomParams(newVisibleData);
+      this.sendTurboFrameRequest(newVisibleData);
+    }
+  }
+
+  // Update the browser URL with zoom parameters so they persist on page refresh
+  updateUrlWithZoomParams(data) {
+    const url = new URL(window.location.href);
+    const currentParams = new URLSearchParams(url.search);
+
+    const startTimestamp = data.xAxis[0];
+    const endTimestamp = data.xAxis[data.xAxis.length - 1];
+
+    // Update zoom parameters in URL
+    currentParams.set('zoom_start_time', startTimestamp);
+    currentParams.set('zoom_end_time', endTimestamp);
+
+    url.search = currentParams.toString();
+    window.history.replaceState({}, '', url);
+  }
+
+  updatePaginationLimit() {
+      // Update or set the limit param in the browser so if the user refreshes the page,
+      // the limit will be preserved.
+      const url = new URL(window.location.href);
+      const currentParams = new URLSearchParams(url.search);
+      const limit = this.paginationLimitTarget.value;
+      currentParams.set('limit', limit);
+      url.search = currentParams.toString();
+      window.history.replaceState({}, '', url);
+    }
+
+  // After the zoom level changes, we want to send a request to the server with the new visible data.
+  // The server will then return the full page HTML with the updated table data wrapped in a turbo-frame.
+  // We will then replace the innerHTML of the turbo-frame with the new HTML.
+  sendTurboFrameRequest(data) {
+    const now = Date.now();
+    // If less than 1 second since last request, ignore this call
+    if (now - this.lastTurboFrameRequestAt < 1000) { return; }
+    this.lastTurboFrameRequestAt = now;
+
+    // Start with the current page's URL
+    const url = new URL(window.location.href);
+
+    // Preserve existing URL parameters
+    const currentParams = new URLSearchParams(url.search);
+
+    const startTimestamp = data.xAxis[0];
+    const endTimestamp = data.xAxis[data.xAxis.length - 1];
+
+    // Add or update the zoom occurred_at parameters for table filtering
+    currentParams.set('zoom_start_time', startTimestamp);
+    currentParams.set('zoom_end_time', endTimestamp);
+
+    // Set the limit param based on the value in the pagination selector
+    url.searchParams.set('limit', this.paginationLimitTarget.value);
+
+    // Update the URL's search parameters
+    url.search = currentParams.toString();
+
+    fetch(url, {
+      method: 'GET',
+      headers: {
+        'Accept': 'text/html; turbo-frame',
+        'Turbo-Frame': this.chartIdValue
+      }
+    })
+    .then(response => response.text()) // Get the raw HTML response
+    .then(html => {
+      // Find the turbo-frame in the document using the target
+      const frame = this.indexTableTarget;
+      if (frame) {
+        // Parse the response HTML
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+
+        // Find the turbo-frame in the response using the frame's ID
+        const responseFrame = doc.querySelector(`turbo-frame#${frame.id}`);
+        if (responseFrame) {
+          // CSP-safe content replacement using DOM methods
+          this.replaceFrameContent(frame, responseFrame);
+        } else {
+          // Fallback: parse the entire HTML response
+          this.replaceFrameContentFromHTML(frame, html);
+        }
+      }
+    })
+    .catch(error => console.error('Error:', error));
+  }
+
+  // CSP-safe method to replace frame content using DOM methods
+  replaceFrameContent(targetFrame, sourceFrame) {
+    try {
+      // Clear existing content using DOM methods
+      while (targetFrame.firstChild) {
+        targetFrame.removeChild(targetFrame.firstChild);
+      }
+
+      // Clone and append all child nodes from source frame
+      const children = Array.from(sourceFrame.childNodes);
+      children.forEach(child => {
+        const clonedChild = child.cloneNode(true);
+        targetFrame.appendChild(clonedChild);
+      });
+    } catch (error) {
+      console.error('Error replacing frame content:', error);
+      // Fallback to innerHTML as last resort (not ideal for CSP)
+      targetFrame.innerHTML = sourceFrame.innerHTML;
+    }
+  }
+
+  // CSP-safe fallback method for parsing raw HTML
+  replaceFrameContentFromHTML(targetFrame, html) {
+    try {
+      // Parse HTML safely
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(html, 'text/html');
+      
+      // Clear existing content
+      while (targetFrame.firstChild) {
+        targetFrame.removeChild(targetFrame.firstChild);
+      }
+
+      // If the HTML contains a single root element, use its children
+      const bodyChildren = Array.from(doc.body.childNodes);
+      bodyChildren.forEach(child => {
+        const clonedChild = child.cloneNode(true);
+        targetFrame.appendChild(clonedChild);
+      });
+    } catch (error) {
+      console.error('Error parsing HTML content:', error);
+      // Last resort fallback
+      targetFrame.innerHTML = html;
+    }
+  }
+}