sage-rails 0.0.6 → 0.0.8

data/app/assets/javascripts/sage/controllers/select_controller.js

@@ -0,0 +1,215 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="select"
+export default class extends Controller {
+  static targets = ["input", "dropdown", "option", "hidden"];
+  static values = { 
+    options: Array,
+    placeholder: String,
+    selected: String,
+    maxOptions: { type: Number, default: 100 }
+  };
+
+  connect() {
+    this.selectedValue = this.selectedValue || "";
+    
+    // Parse options if they're a string
+    let options = this.optionsValue;
+    if (typeof options === 'string') {
+      try {
+        options = JSON.parse(options);
+      } catch (e) {
+        console.error("Failed to parse options:", e);
+        options = [];
+      }
+    }
+    
+    this.filteredOptions = Array.isArray(options) ? options.slice(0, this.maxOptionsValue) : [];
+    
+    // If there's a pre-selected value from the data attribute, set it
+    if (this.hasSelectedValue && this.selectedValue) {
+      const selectedOption = this.filteredOptions.find(opt => opt.value == this.selectedValue);
+      if (selectedOption) {
+        this.inputTarget.value = selectedOption.text;
+        if (this.hasHiddenTarget) {
+          this.hiddenTarget.value = selectedOption.value;
+        }
+      }
+    }
+    
+    this.render();
+    this.setupEventListeners();
+  }
+
+  setupEventListeners() {
+    // Close dropdown when clicking outside
+    document.addEventListener('click', this.handleOutsideClick.bind(this));
+    
+    // Handle keyboard navigation
+    this.inputTarget.addEventListener('keydown', this.handleKeydown.bind(this));
+  }
+
+  disconnect() {
+    document.removeEventListener('click', this.handleOutsideClick.bind(this));
+  }
+
+  handleOutsideClick(event) {
+    if (!this.element.contains(event.target)) {
+      this.closeDropdown();
+    }
+  }
+
+  handleKeydown(event) {
+    const dropdown = this.dropdownTarget;
+    const options = this.optionTargets;
+    const activeOption = dropdown.querySelector('.active');
+    
+    switch(event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.navigateOptions(options, activeOption, 1);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.navigateOptions(options, activeOption, -1);
+        break;
+      case 'Enter':
+        event.preventDefault();
+        if (activeOption) {
+          this.selectOption(activeOption.dataset.value, activeOption.textContent);
+        }
+        break;
+      case 'Escape':
+        this.closeDropdown();
+        break;
+    }
+  }
+
+  navigateOptions(options, activeOption, direction) {
+    let currentIndex = activeOption ? Array.from(options).indexOf(activeOption) : -1;
+    let nextIndex = currentIndex + direction;
+    
+    if (nextIndex < 0) nextIndex = options.length - 1;
+    if (nextIndex >= options.length) nextIndex = 0;
+    
+    // Remove active class from all options
+    options.forEach(option => option.classList.remove('active'));
+    
+    // Add active class to next option
+    if (options[nextIndex]) {
+      options[nextIndex].classList.add('active');
+      options[nextIndex].scrollIntoView({ block: 'nearest' });
+    }
+  }
+
+  search(event) {
+    const query = event.target.value.toLowerCase().trim();
+    
+    // Parse options properly
+    let options = this.optionsValue;
+    if (typeof options === 'string') {
+      try {
+        options = JSON.parse(options);
+      } catch (e) {
+        options = [];
+      }
+    }
+    options = Array.isArray(options) ? options : [];
+    
+    if (query === '' || query === ' ') {
+      this.filteredOptions = options.slice(0, this.maxOptionsValue);
+    } else {
+      this.filteredOptions = options
+        .filter(option => option.text.toLowerCase().includes(query))
+        .slice(0, this.maxOptionsValue);
+    }
+    
+    this.renderOptions();
+    this.openDropdown();
+  }
+
+  selectOption(value, text) {
+    // Update the input to show selected text
+    this.inputTarget.value = text;
+    this.selectedValue = value;
+    
+    // Update hidden field if present
+    if (this.hasHiddenTarget) {
+      this.hiddenTarget.value = value;
+    }
+    
+    // Dispatch custom event for external handling
+    const selectEvent = new CustomEvent('select:change', {
+      detail: { value: value, text: text },
+      bubbles: true
+    });
+    this.element.dispatchEvent(selectEvent);
+    
+    this.closeDropdown();
+  }
+
+  openDropdown() {
+    this.dropdownTarget.classList.remove('hidden');
+    this.dropdownTarget.classList.add('visible');
+  }
+
+  closeDropdown() {
+    this.dropdownTarget.classList.remove('visible');
+    this.dropdownTarget.classList.add('hidden');
+  }
+
+  focus() {
+    // Reset search to show all options when focusing
+    const currentValue = this.inputTarget.value.trim();
+    if (currentValue === '' || currentValue === ' ') {
+      // Parse options properly
+      let options = this.optionsValue;
+      if (typeof options === 'string') {
+        try {
+          options = JSON.parse(options);
+        } catch (e) {
+          options = [];
+        }
+      }
+      this.filteredOptions = Array.isArray(options) ? options.slice(0, this.maxOptionsValue) : [];
+      this.renderOptions();
+    }
+    this.openDropdown();
+  }
+
+  blur() {
+    // Delay hiding to allow option clicks
+    setTimeout(() => {
+      this.closeDropdown();
+    }, 150);
+  }
+
+  render() {
+    // Don't set placeholder for Beer CSS floating labels
+    this.renderOptions();
+  }
+
+  renderOptions() {
+    this.dropdownTarget.innerHTML = '';
+    
+    if (this.filteredOptions.length === 0) {
+      const noResults = document.createElement('div');
+      noResults.className = 'select-option no-results';
+      noResults.textContent = 'No results found';
+      this.dropdownTarget.appendChild(noResults);
+      return;
+    }
+    
+    this.filteredOptions.forEach(option => {
+      const optionElement = document.createElement('div');
+      optionElement.className = 'select-option';
+      optionElement.dataset.selectTarget = 'option';
+      optionElement.dataset.value = option.value;
+      optionElement.textContent = option.text;
+      optionElement.addEventListener('click', () => {
+        this.selectOption(option.value, option.text);
+      });
+      this.dropdownTarget.appendChild(optionElement);
+    });
+  }
+}

data/app/assets/javascripts/sage/controllers/variables_controller.js

@@ -0,0 +1,122 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["form", "variable"]
+  
+  connect() {
+    // Override the global submitIfCompleted function from Blazer
+    window.submitIfCompleted = this.submitIfCompleted.bind(this)
+    
+    // Set up event listeners for variable changes
+    this.setupVariableListeners()
+  }
+  
+  setupVariableListeners() {
+    // Listen for changes on all variable inputs
+    this.variableTargets.forEach(input => {
+      input.addEventListener("change", (event) => {
+        this.handleVariableChange(event)
+      })
+      
+      // Also listen for daterangepicker events if present
+      if (input.dataset.daterangepicker) {
+        const picker = $(input).data('daterangepicker')
+        if (picker) {
+          $(input).on('apply.daterangepicker', (ev, picker) => {
+            this.handleDateRangeChange(input, picker)
+          })
+        }
+      }
+    })
+  }
+  
+  handleVariableChange(event) {
+    const input = event.target
+    console.log(`Variable ${input.name} changed to:`, input.value)
+    
+    // Check if all required variables are filled and submit if so
+    setTimeout(() => {
+      this.submitIfCompleted(this.formTarget)
+    }, 100) // Small delay to ensure all values are updated
+  }
+  
+  handleDateRangeChange(input, picker) {
+    console.log(`Date range updated for ${input.name}:`, input.value)
+    
+    // Force update any related hidden fields
+    this.updateRelatedDateFields(input, picker)
+    
+    // Submit the form after date range is updated
+    setTimeout(() => {
+      this.submitIfCompleted(this.formTarget)
+    }, 200) // Longer delay for date picker updates
+  }
+  
+  updateRelatedDateFields(input, picker) {
+    // If this is a start_time/end_time combo, make sure both are updated
+    if (input.name === "start_time" || input.name === "end_time") {
+      const startTimeInput = this.formTarget.querySelector('input[name="start_time"]')
+      const endTimeInput = this.formTarget.querySelector('input[name="end_time"]')
+      
+      if (startTimeInput && endTimeInput && picker) {
+        // Update both fields based on the picker values
+        if (picker.startDate) {
+          startTimeInput.value = picker.startDate.utc().format()
+        }
+        if (picker.endDate) {
+          endTimeInput.value = picker.endDate.endOf("day").utc().format()
+        }
+      }
+    }
+  }
+  
+  submitIfCompleted(form) {
+    if (!form) return
+    
+    let completed = true
+    const requiredInputs = form.querySelectorAll('input[name], select[name]')
+    
+    // Check each required input
+    requiredInputs.forEach(input => {
+      const value = input.value
+      
+      // More robust empty check
+      if (this.isEmpty(value)) {
+        completed = false
+        console.log(`Variable ${input.name} is empty:`, value)
+      } else {
+        console.log(`Variable ${input.name} has value:`, value)
+      }
+    })
+    
+    console.log(`Form completion check: ${completed ? 'Complete' : 'Incomplete'}`)
+    
+    if (completed) {
+      console.log('Submitting form with all variables filled')
+      form.submit()
+    }
+  }
+  
+  isEmpty(value) {
+    // More comprehensive empty check
+    return value === null || 
+           value === undefined || 
+           value === "" || 
+           (typeof value === "string" && value.trim() === "")
+  }
+  
+  // Manual trigger for testing
+  triggerSubmit() {
+    this.submitIfCompleted(this.formTarget)
+  }
+  
+  // Debug method to check current variable states
+  debugVariables() {
+    console.log("=== Current Variable States ===")
+    const inputs = this.formTarget.querySelectorAll('input[name], select[name]')
+    inputs.forEach(input => {
+      console.log(`${input.name}: "${input.value}" (${typeof input.value})`)
+    })
+    console.log("===============================")
+  }
+}

data/app/assets/javascripts/sage.js

@@ -0,0 +1,21 @@
+// Import controllers
+import SearchController from "sage/controllers/search_controller"
+import ClipboardController from "sage/controllers/clipboard_controller"
+import SelectController from "sage/controllers/select_controller"
+import DashboardController from "sage/controllers/dashboard_controller"
+import ReverseInfiniteScrollController from "sage/controllers/reverse_infinite_scroll_controller"
+import VariablesController from "sage/controllers/variables_controller"
+
+// Export all Sage controllers for manual registration
+export { SearchController, ClipboardController, SelectController, DashboardController, ReverseInfiniteScrollController, VariablesController }
+
+// Register all Sage controllers with the provided Stimulus application
+export function registerControllers(application) {
+  application.register("sage--search", SearchController)
+  application.register("sage--clipboard", ClipboardController)
+  application.register("sage--select", SelectController)
+  application.register("sage--dashboard", DashboardController)
+  application.register("sage--reverse-infinite-scroll", ReverseInfiniteScrollController)
+  application.register("sage--variables", VariablesController)
+}
+

data/app/controllers/sage/checks_controller.rb

@@ -5,13 +5,13 @@ module Sage
     def index
       @q = Blazer::Check.ransack(params[:q])
       @checks = @q.result.joins(:query).includes(:query)
-      
+
       # Apply basic ordering first
       @checks = @checks.order("blazer_queries.name, blazer_checks.id")
-      
+
       # Apply pagination with Pagy
       @pagy, @checks = pagy(@checks)
-      
+
       # Apply state-based sorting on the paginated results
       state_order = [ nil, "disabled", "error", "timed out", "failing", "passing" ]
       @checks = @checks.sort_by { |q| state_order.index(q.state) || 99 }

data/app/controllers/sage/dashboards_controller.rb

@@ -1,21 +1,21 @@
 module Sage
   class DashboardsController < BaseController
-    before_action :set_dashboard, only: [:show, :edit, :update, :destroy, :refresh]
+    before_action :set_dashboard, only: [ :show, :edit, :update, :destroy, :refresh ]
 
     def index
       @q = Blazer::Dashboard.ransack(params[:q])
       @dashboards = @q.result
-      
+
       # Only include creator if Blazer.user_class is configured
       @dashboards = @dashboards.includes(:creator) if Blazer.user_class
-      
+
       @dashboards = @dashboards.order(:name)
-      
+
       # Apply additional filters if needed
       if blazer_user && params[:filter] == "mine"
         @dashboards = @dashboards.where(creator_id: blazer_user.id).reorder(updated_at: :desc)
       end
-      
+
       # Apply pagination with Pagy
       @pagy, @dashboards = pagy(@dashboards)
     end
@@ -40,7 +40,7 @@ module Sage
     def show
       @queries = @dashboard.dashboard_queries.order(:position).preload(:query).map(&:query)
       @query_errors = {}
-      
+
       @queries.each do |query|
         # Check if the query has a valid data source
         if query.data_source.blank? || !Blazer.data_sources.key?(query.data_source)
@@ -53,12 +53,12 @@ module Sage
 
       @smart_vars = {}
       @sql_errors = []
-      @data_sources = @queries.map { |q| 
+      @data_sources = @queries.map { |q|
         # Use the query's data source if specified, otherwise use the default
         source = q.data_source.presence || Blazer.data_sources.keys.first
         Blazer.data_sources[source]
       }.compact.uniq
-      
+
       @bind_vars.each do |var|
         @data_sources.each do |data_source|
           smart_var, error = parse_smart_variables(var, data_source)
@@ -127,4 +127,3 @@ module Sage
     end
   end
 end
-

data/app/controllers/sage/queries_controller.rb

@@ -150,7 +150,7 @@ module Sage
 
       # fallback for now for users with open tabs
       # TODO remove fallback in future version
-      @var_params = request.request_parameters["variables"] || request.request_parameters
+      @var_params = params[:variables] || request.request_parameters["variables"] || request.request_parameters
       @success = process_vars(@statement, @var_params)
       @only_chart = params[:only_chart]
       @run_id = blazer_params[:run_id]

data/app/helpers/sage/application_helper.rb

@@ -11,7 +11,7 @@ module Sage
       messages.group_by { |message| message.created_at.to_date }
              .sort_by { |date, _| date }
     end
-    
+
     def format_message_date(date)
       case date
       when Date.current

data/app/helpers/sage/queries_helper.rb

@@ -4,7 +4,7 @@ module Sage
       messages.group_by { |message| message.created_at.to_date }
              .sort_by { |date, _| date }
     end
-    
+
     def format_message_date(date)
       case date
       when Date.current
@@ -20,4 +20,4 @@ module Sage
       end
     end
   end
-end
+end

data/app/javascript/sage/controllers/variables_controller.js

@@ -0,0 +1,122 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["form", "variable"]
+  
+  connect() {
+    // Override the global submitIfCompleted function from Blazer
+    window.submitIfCompleted = this.submitIfCompleted.bind(this)
+    
+    // Set up event listeners for variable changes
+    this.setupVariableListeners()
+  }
+  
+  setupVariableListeners() {
+    // Listen for changes on all variable inputs
+    this.variableTargets.forEach(input => {
+      input.addEventListener("change", (event) => {
+        this.handleVariableChange(event)
+      })
+      
+      // Also listen for daterangepicker events if present
+      if (input.dataset.daterangepicker) {
+        const picker = $(input).data('daterangepicker')
+        if (picker) {
+          $(input).on('apply.daterangepicker', (ev, picker) => {
+            this.handleDateRangeChange(input, picker)
+          })
+        }
+      }
+    })
+  }
+  
+  handleVariableChange(event) {
+    const input = event.target
+    console.log(`Variable ${input.name} changed to:`, input.value)
+    
+    // Check if all required variables are filled and submit if so
+    setTimeout(() => {
+      this.submitIfCompleted(this.formTarget)
+    }, 100) // Small delay to ensure all values are updated
+  }
+  
+  handleDateRangeChange(input, picker) {
+    console.log(`Date range updated for ${input.name}:`, input.value)
+    
+    // Force update any related hidden fields
+    this.updateRelatedDateFields(input, picker)
+    
+    // Submit the form after date range is updated
+    setTimeout(() => {
+      this.submitIfCompleted(this.formTarget)
+    }, 200) // Longer delay for date picker updates
+  }
+  
+  updateRelatedDateFields(input, picker) {
+    // If this is a start_time/end_time combo, make sure both are updated
+    if (input.name === "start_time" || input.name === "end_time") {
+      const startTimeInput = this.formTarget.querySelector('input[name="start_time"]')
+      const endTimeInput = this.formTarget.querySelector('input[name="end_time"]')
+      
+      if (startTimeInput && endTimeInput && picker) {
+        // Update both fields based on the picker values
+        if (picker.startDate) {
+          startTimeInput.value = picker.startDate.utc().format()
+        }
+        if (picker.endDate) {
+          endTimeInput.value = picker.endDate.endOf("day").utc().format()
+        }
+      }
+    }
+  }
+  
+  submitIfCompleted(form) {
+    if (!form) return
+    
+    let completed = true
+    const requiredInputs = form.querySelectorAll('input[name], select[name]')
+    
+    // Check each required input
+    requiredInputs.forEach(input => {
+      const value = input.value
+      
+      // More robust empty check
+      if (this.isEmpty(value)) {
+        completed = false
+        console.log(`Variable ${input.name} is empty:`, value)
+      } else {
+        console.log(`Variable ${input.name} has value:`, value)
+      }
+    })
+    
+    console.log(`Form completion check: ${completed ? 'Complete' : 'Incomplete'}`)
+    
+    if (completed) {
+      console.log('Submitting form with all variables filled')
+      form.submit()
+    }
+  }
+  
+  isEmpty(value) {
+    // More comprehensive empty check
+    return value === null || 
+           value === undefined || 
+           value === "" || 
+           (typeof value === "string" && value.trim() === "")
+  }
+  
+  // Manual trigger for testing
+  triggerSubmit() {
+    this.submitIfCompleted(this.formTarget)
+  }
+  
+  // Debug method to check current variable states
+  debugVariables() {
+    console.log("=== Current Variable States ===")
+    const inputs = this.formTarget.querySelectorAll('input[name], select[name]')
+    inputs.forEach(input => {
+      console.log(`${input.name}: "${input.value}" (${typeof input.value})`)
+    })
+    console.log("===============================")
+  }
+}

data/app/javascript/sage.js

@@ -4,9 +4,10 @@ import ClipboardController from "sage/controllers/clipboard_controller"
 import SelectController from "sage/controllers/select_controller"
 import DashboardController from "sage/controllers/dashboard_controller"
 import ReverseInfiniteScrollController from "sage/controllers/reverse_infinite_scroll_controller"
+import VariablesController from "sage/controllers/variables_controller"
 
 // Export all Sage controllers for manual registration
-export { SearchController, ClipboardController, SelectController, DashboardController, ReverseInfiniteScrollController }
+export { SearchController, ClipboardController, SelectController, DashboardController, ReverseInfiniteScrollController, VariablesController }
 
 // Register all Sage controllers with the provided Stimulus application
 export function registerControllers(application) {
@@ -15,5 +16,6 @@ export function registerControllers(application) {
   application.register("sage--select", SelectController)
   application.register("sage--dashboard", DashboardController)
   application.register("sage--reverse-infinite-scroll", ReverseInfiniteScrollController)
+  application.register("sage--variables", VariablesController)
 }