dbwatcher 0.1.5 → 1.1.0

data/app/helpers/dbwatcher/diagram_helper.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+module Dbwatcher
+  module DiagramHelper
+    # Generate diagram configuration for Alpine.js
+    def diagram_config(session, active_tab)
+      {
+        auto_generate: active_tab == "diagrams",
+        default_type: "database_tables",
+        endpoint: diagram_data_api_v1_session_path(session),
+        container_id: "diagram-container"
+      }.to_json
+    end
+
+    # Generate diagram type options dynamically from registry
+    def diagram_type_options
+      registry = Dbwatcher::Services::DiagramTypeRegistry.new
+      options = registry.available_types_with_metadata.map do |type, metadata|
+        [metadata[:display_name], type]
+      end
+
+      options_for_select(options)
+    end
+
+    # Generate CSS variables for diagram container height calculation
+    def diagram_container_css_variables
+      {
+        "--header-height": "64px",
+        "--tab-bar-height": "40px",
+        "--toolbar-height": "72px",
+        "--footer-height": "0px",
+        "--diagram-height": "calc(100vh - var(--header-height) - var(--tab-bar-height) - " \
+                            "var(--toolbar-height) - var(--footer-height) - 2rem)",
+        "--diagram-min-height": "500px"
+      }.map { |key, value| "#{key}: #{value}" }.join("; ")
+    end
+
+    # Generate button classes for diagram controls
+    def diagram_button_classes(type = :default)
+      base_classes = "compact-button text-xs rounded"
+
+      button_styles = {
+        primary: "bg-blue-medium text-white px-3 py-1 hover:bg-navy-dark",
+        secondary: "bg-navy-dark text-white px-2 py-1 hover:bg-blue-medium",
+        toggle: "bg-blue-medium text-white px-2 py-1 hover:bg-navy-dark flex items-center gap-1",
+        icon: "bg-white border border-gray-300 hover:bg-gray-50 p-1",
+        danger: "bg-red-500 text-white px-2 py-1 hover:bg-red-600",
+        success: "bg-green-500 text-white px-2 py-1 hover:bg-green-600"
+      }
+
+      style = button_styles[type] || button_styles[:primary]
+      "#{base_classes} #{style}"
+    end
+
+    # Generate a code view with syntax highlighting for Mermaid code
+    def diagram_code_view(content)
+      content_tag(:div, class: "diagram-code-view") do
+        content_tag(:pre,
+                    class: "text-xs font-mono p-4 bg-gray-50 rounded border border-gray-200 " \
+                           "overflow-x-auto whitespace-pre-wrap",
+                    style: "max-height: calc(100vh - 220px); overflow-y: auto;") do
+          content_tag(:code, content)
+        end
+      end
+    end
+
+    # Generate copy to clipboard button
+    def copy_to_clipboard_button(target_id)
+      button_tag(
+        type: "button",
+        class: diagram_button_classes(:icon),
+        "x-on:click": "copyToClipboard('#{target_id}')",
+        title: "Copy to clipboard"
+      ) do
+        copy_icon_svg
+      end
+    end
+
+    private
+
+    # Generate copy icon SVG
+    def copy_icon_svg
+      content_tag(:svg, class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24") do
+        tag.path(
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          stroke_width: "2",
+          d: "M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2" \
+             "M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
+        )
+      end
+    end
+
+    # Generate toggle view button
+    def toggle_view_button
+      button_tag(
+        type: "button",
+        class: diagram_button_classes(:toggle),
+        "x-on:click": "toggleViewMode()",
+        title: "Toggle between code and preview"
+      ) do
+        concat(content_tag(:svg, class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24") do
+          tag.path(stroke_linecap: "round", stroke_linejoin: "round", stroke_width: "2",
+                   d: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4")
+        end)
+        concat(content_tag(:span, "x-text": "viewMode === 'preview' ? 'View Code' : 'View Preview'"))
+      end
+    end
+  end
+end

data/app/helpers/dbwatcher/formatting_helper.rb

@@ -0,0 +1,108 @@
+# frozen_string_literal: true
+
+module Dbwatcher
+  module FormattingHelper
+    # Truncate cell values for display in compact view
+    def truncate_cell_value(value, max_length = 50)
+      return "" if value.nil?
+
+      formatted_value = format_cell_value_simple(value)
+
+      if formatted_value.length > max_length
+        "#{formatted_value[0...max_length]}..."
+      else
+        formatted_value
+      end
+    end
+
+    # Format cell values for display
+    def format_cell_value(value)
+      return "" if value.nil?
+
+      case value
+      when String
+        format_string_value(value)
+      when Hash, Array
+        JSON.pretty_generate(value)
+      when Time, DateTime
+        format_datetime_value(value)
+      when Date
+        value.strftime("%Y-%m-%d")
+      else
+        value.to_s
+      end
+    end
+
+    # Simple formatting for truncated display
+    def format_cell_value_simple(value)
+      return "" if value.nil?
+
+      case value
+      when String
+        format_string_value_simple(value)
+      when Hash
+        format_hash_simple(value)
+      when Array
+        format_array_simple(value)
+      when Time, DateTime
+        format_datetime_value(value)
+      when Date
+        value.strftime("%Y-%m-%d")
+      else
+        value.to_s
+      end
+    end
+
+    private
+
+    # Format string values with JSON detection
+    def format_string_value(value)
+      return value unless json?(value)
+
+      begin
+        JSON.pretty_generate(JSON.parse(value))
+      rescue JSON::ParserError
+        value
+      end
+    end
+
+    def format_string_value_simple(value)
+      return value unless json?(value)
+
+      begin
+        parsed = JSON.parse(value)
+        format_parsed_json_simple(parsed)
+      rescue JSON::ParserError
+        value
+      end
+    end
+
+    def format_parsed_json_simple(parsed)
+      if parsed.is_a?(Array)
+        format_array_simple(parsed)
+      elsif parsed.is_a?(Hash)
+        format_hash_simple(parsed)
+      else
+        parsed.to_s
+      end
+    end
+
+    def format_array_simple(array)
+      "[#{array.length} items]"
+    end
+
+    def format_hash_simple(hash)
+      "{#{hash.keys.length} keys}"
+    end
+
+    def format_datetime_value(value)
+      value.strftime("%Y-%m-%d %H:%M:%S")
+    end
+
+    def json?(string)
+      return false unless string.is_a?(String)
+
+      string.strip.start_with?("{", "[")
+    end
+  end
+end

data/app/helpers/dbwatcher/session_helper.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Dbwatcher
+  module SessionHelper
+    # Get session change count with fallback
+    def session_change_count(session)
+      safe_value(session, :change_count, 0).to_i
+    end
+
+    # Determine if session is active
+    def session_active?(session)
+      safe_value(session, :ended_at).blank?
+    end
+
+    # Format session name for display
+    def display_session_name(name)
+      name.to_s.gsub(/^HTTP \w+ /, "")
+    end
+
+    # Generate session ID display (wider format)
+    def display_session_id(id)
+      return "N/A" unless id
+
+      # Show more characters of the session ID for better readability
+      "#{id[0..15]}..."
+    end
+  end
+end

data/app/views/dbwatcher/dashboard/index.html.erb

@@ -0,0 +1,177 @@
+<%# Dashboard Overview Page %>
+<div class="h-full flex flex-col">
+  <!-- Compact Header -->
+  <div class="h-10 bg-navy-dark text-white flex items-center px-4">
+    <h1 class="text-sm font-medium">Dashboard</h1>
+    <span class="ml-auto text-xs text-blue-light">
+      <%= Time.current.strftime("%Y-%m-%d %H:%M:%S") %>
+    </span>
+  </div>
+  
+  <!-- Tab Bar -->
+  <div class="tab-bar">
+    <div class="tab-item active">Overview</div>
+    <div class="tab-item">Statistics</div>
+    <div class="tab-item">Recent Activity</div>
+  </div>
+  
+  <!-- Content Area -->
+  <div class="flex-1 overflow-auto p-4">
+    <!-- Compact Stats Grid -->
+    <div class="grid grid-cols-4 gap-3 mb-4">
+      <!-- Sessions Card -->
+      <%= render 'dbwatcher/shared/stats_card',
+          label: 'Active Sessions',
+          value: @recent_sessions&.count || 0,
+          description: 'Last 24 hours',
+          icon_html: stats_icon(:sessions) %>
+      
+      <!-- Tables Card -->
+      <%= render 'dbwatcher/shared/stats_card',
+          label: 'Modified Tables',
+          value: @active_tables&.count || 0,
+          description: 'With changes',
+          icon_html: stats_icon(:tables) %>
+      
+      <!-- Queries Card -->
+      <%= render 'dbwatcher/shared/stats_card',
+          label: 'SQL Queries',
+          value: @query_stats&.dig(:total) || 0,
+          description: 'Today',
+          icon_html: stats_icon(:queries) %>
+      
+      <!-- Performance Card -->
+      <% slow_queries = @query_stats&.dig(:slow_queries) || 0 %>
+      <%= render 'dbwatcher/shared/stats_card',
+          label: 'Slow Queries',
+          value: slow_queries,
+          value_class: (slow_queries > 0 ? 'text-red-600' : 'text-navy-dark'),
+          description: '> 100ms',
+          icon_html: stats_icon(:performance) %>
+    </div>
+    
+    <!-- Two Column Layout -->
+    <div class="grid grid-cols-2 gap-4">
+      <!-- Recent Sessions -->
+      <div class="border border-gray-300 rounded">
+        <div class="bg-gray-100 px-3 py-2 border-b border-gray-300">
+          <h3 class="text-xs font-medium text-gray-700">Recent Sessions</h3>
+        </div>
+        <div class="max-h-64 overflow-auto">
+          <% if @recent_sessions&.any? %>
+            <table class="compact-table w-full">
+              <thead>
+                <tr>
+                  <th class="text-left">Session</th>
+                  <th class="text-center">Changes</th>
+                  <th class="text-right">Time</th>
+                </tr>
+              </thead>
+              <tbody>
+                <% @recent_sessions.each do |session| %>
+                  <tr class="hover:bg-blue-50">
+                    <td class="truncate max-w-xs" title="<%= session[:name] || session['name'] %>">
+                      <% session_id = session[:id] || session['id'] %>
+                      <% session_name = (session[:name] || session['name']).to_s.gsub(/^HTTP \w+ /, '') %>
+                      <%= link_to session_name, session_path(session_id), class: "text-navy-dark hover:text-blue-medium" %>
+                    </td>
+                    <td class="text-center">
+                      <span class="badge bg-gray-600 text-white">
+                        <%= session[:change_count] || session['change_count'] || 0 %>
+                      </span>
+                    </td>
+                    <td class="text-right text-gray-500">
+                      <% started_at = session[:started_at] || session['started_at'] %>
+                      <%= Time.parse(started_at).strftime("%H:%M:%S") rescue 'N/A' %>
+                    </td>
+                  </tr>
+                <% end %>
+              </tbody>
+            </table>
+          <% else %>
+            <div class="p-4 text-center text-gray-500 text-xs">No recent sessions</div>
+          <% end %>
+        </div>
+      </div>
+      
+      <!-- Active Tables -->
+      <div class="border border-gray-300 rounded">
+        <div class="bg-gray-100 px-3 py-2 border-b border-gray-300">
+          <h3 class="text-xs font-medium text-gray-700">Most Active Tables</h3>
+        </div>
+        <div class="max-h-64 overflow-auto">
+          <% if @active_tables&.any? %>
+            <table class="compact-table w-full">
+              <thead>
+                <tr>
+                  <th class="text-left">Table</th>
+                  <th class="text-center">Operations</th>
+                  <th class="text-right">Changes</th>
+                </tr>
+              </thead>
+              <tbody>
+                <% @active_tables.first(10).each do |table_name, count| %>
+                  <tr class="hover:bg-blue-50">
+                    <td class="font-medium text-navy-dark">
+                      <%= link_to table_name, table_path(table_name), class: "text-navy-dark hover:text-blue-medium" %>
+                    </td>
+                    <td class="text-center">
+                      <div class="flex gap-1 justify-center">
+                        <span class="badge badge-insert" title="Inserts">I</span>
+                        <span class="badge badge-update" title="Updates">U</span>
+                        <span class="badge badge-delete" title="Deletes">D</span>
+                      </div>
+                    </td>
+                    <td class="text-right">
+                      <span class="text-sm font-medium"><%= count %></span>
+                    </td>
+                  </tr>
+                <% end %>
+              </tbody>
+            </table>
+          <% else %>
+            <div class="p-4 text-center text-gray-500 text-xs">No active tables</div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+
+    <!-- Query Activity Section -->
+    <div class="mt-4 border border-gray-300 rounded">
+      <div class="bg-gray-100 px-3 py-2 border-b border-gray-300">
+        <h3 class="text-xs font-medium text-gray-700">Query Activity</h3>
+      </div>
+      <div class="p-4">
+        <% if @query_stats&.dig(:by_operation)&.any? %>
+          <div class="grid grid-cols-4 gap-4 text-center">
+            <% @query_stats[:by_operation].each do |operation, count| %>
+              <div class="border border-gray-200 rounded p-2">
+                <div class="text-lg font-bold text-navy-dark"><%= count %></div>
+                <div class="text-xs text-gray-500 uppercase"><%= operation %></div>
+              </div>
+            <% end %>
+          </div>
+        <% else %>
+          <div class="text-center text-gray-500 text-xs">No query activity</div>
+        <% end %>
+      </div>
+    </div>
+
+    <!-- Quick Actions -->
+    <div class="mt-4 border border-gray-300 rounded">
+      <div class="bg-gray-100 px-3 py-2 border-b border-gray-300">
+        <h3 class="text-xs font-medium text-gray-700">Quick Actions</h3>
+      </div>
+      <div class="p-3">
+        <div class="flex gap-2">
+          <%= link_to "View All Sessions", sessions_path, 
+              class: "px-3 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700" %>
+          <%= link_to "Browse Tables", tables_path, 
+              class: "px-3 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700" %>
+          <%= link_to "SQL Logs", queries_path, 
+              class: "px-3 py-1 text-xs bg-purple-600 text-white rounded hover:bg-purple-700" %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/dbwatcher/queries/index.html.erb

@@ -0,0 +1,240 @@
+<div class="h-full flex flex-col" x-data="queryLogs()">
+  <!-- Header with embedded stats -->
+  <div class="h-10 bg-navy-dark text-white flex items-center px-4">
+    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
+      <path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/>
+    </svg>
+    <h1 class="text-sm font-medium">SQL Query Logs</h1>
+    
+    <!-- Quick Stats -->
+    <div class="ml-auto flex items-center gap-4 text-xs">
+      <span x-text="`${filteredQueries.length} queries`"></span>
+      <span class="text-gold-light" x-text="`${slowQueries.length} slow`"></span>
+    </div>
+  </div>
+  
+  <%= render 'dbwatcher/shared/tab_bar', tabs: [
+    { name: 'All Queries', active: true },
+    { name: 'Slow Queries', active: false },
+    { name: 'Recent', active: false }
+  ] %>
+  
+  <!-- Compact Toolbar -->
+  <div class="bg-gray-100 border-b border-gray-300 px-3 py-1 flex items-center gap-3">
+    <!-- Filter Controls -->
+    <select x-model="filters.operation" 
+            @change="applyFilters()"
+            class="compact-select">
+      <option value="">All Operations</option>
+      <option value="SELECT">SELECT</option>
+      <option value="INSERT">INSERT</option>
+      <option value="UPDATE">UPDATE</option>
+      <option value="DELETE">DELETE</option>
+    </select>
+    
+    <input type="text" 
+           x-model="filters.table"
+           @input="applyFilters()"
+           placeholder="Filter by table..."
+           class="compact-input flex-1 max-w-xs">
+    
+    <input type="number" 
+           x-model="filters.minDuration"
+           @input="applyFilters()"
+           placeholder="Min ms"
+           class="compact-input w-20">
+    
+    <input type="date" 
+           value="<%= @date %>"
+           @change="changeDate($event.target.value)"
+           class="compact-input">
+           
+    <!-- Time Range Filters -->
+    <input type="time" 
+           x-model="filters.startTime"
+           @input="applyFilters()"
+           placeholder="Start time"
+           title="Start time"
+           class="compact-input w-24">
+           
+    <input type="time" 
+           x-model="filters.endTime"
+           @input="applyFilters()"
+           placeholder="End time"
+           title="End time"
+           class="compact-input w-24">
+    
+    <button @click="clearFilters()" 
+            title="Clear all filters"
+            class="compact-button bg-gray-500 text-white hover:bg-gray-600">
+      Clear
+    </button>
+    
+    <div class="ml-auto flex items-center gap-2">
+      <button @click="exportQueries()" 
+              class="compact-button bg-white border border-gray-300 hover:bg-gray-50">
+        <svg class="w-3 h-3 inline mr-1" fill="currentColor" viewBox="0 0 20 20">
+          <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"/>
+        </svg>
+        Export
+      </button>
+      
+      <button @click="refreshData()" 
+              class="compact-button bg-blue-medium text-white hover:bg-blue-700">
+        <svg class="w-3 h-3 inline mr-1" fill="currentColor" viewBox="0 0 20 20">
+          <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"/>
+        </svg>
+        Refresh
+      </button>
+      
+      <%= button_to clear_queries_path, 
+                    method: :delete,
+                    class: "compact-button bg-red-600 text-white hover:bg-red-700",
+                    data: { 
+                      confirm: "Are you sure you want to clear all SQL query logs? This action cannot be undone." 
+                    } do %>
+        <svg class="w-3 h-3 inline mr-1" fill="currentColor" viewBox="0 0 20 20">
+          <path fill-rule="evenodd" d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
+          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 012 0v4a1 1 0 11-2 0V7zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V7a1 1 0 00-1-1z"/>
+        </svg>
+        Clear Logs
+      <% end %>
+    </div>
+  </div>
+  
+  <!-- Content Area -->
+  <div class="flex-1 overflow-auto">
+    <div class="h-full">
+      <table class="compact-table w-full">
+        <thead>
+          <tr>
+            <th class="text-left w-20">Time</th>
+            <th class="text-center w-16">Op</th>
+            <th class="text-left w-32">Tables</th>
+            <th class="text-right w-16">Duration</th>
+            <th class="text-left">SQL</th>
+          </tr>
+        </thead>
+        <tbody>
+          <template x-for="query in filteredQueries" :key="query.id">
+            <tr class="cursor-pointer hover:bg-blue-50" 
+                @click="selectQuery(query)"
+                :class="{ 'selected': selectedQuery?.id === query.id }">
+              <td class="text-xs text-gray-600" x-text="formatTime(query.timestamp)"></td>
+              <td class="text-center">
+                <span class="badge" 
+                      :class="`badge-${query.operation.toLowerCase()}`"
+                      x-text="query.operation.charAt(0)"></span>
+              </td>
+              <td class="font-medium text-navy-dark truncate" 
+                  :title="query.tables.join(', ')"
+                  x-text="query.tables.join(', ')"></td>
+              <td class="text-right text-xs" 
+                  :class="query.duration > 100 ? 'text-red-600 font-medium' : 'text-gray-600'"
+                  x-text="`${query.duration}ms`"></td>
+              <td class="font-mono text-xs truncate max-w-md" 
+                  :title="query.sql"
+                  x-text="query.sql"></td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+<script>
+function queryLogs() {
+  return {
+    filters: {
+      operation: '',
+      table: '',
+      minDuration: '',
+      startTime: '',
+      endTime: ''
+    },
+    selectedQuery: null,
+    queries: <%= @queries.to_json.html_safe %>,
+    
+    get filteredQueries() {
+      return this.queries.filter(query => {
+        if (this.filters.operation && query.operation !== this.filters.operation) return false;
+        if (this.filters.table && !query.tables.some(t => t.toLowerCase().includes(this.filters.table.toLowerCase()))) return false;
+        if (this.filters.minDuration && query.duration < parseFloat(this.filters.minDuration)) return false;
+        
+        // Time filtering
+        if (this.filters.startTime || this.filters.endTime) {
+          const queryTime = new Date(query.timestamp);
+          const queryTimeStr = queryTime.toTimeString().substr(0, 5); // HH:MM format
+          
+          if (this.filters.startTime && queryTimeStr < this.filters.startTime) return false;
+          if (this.filters.endTime && queryTimeStr > this.filters.endTime) return false;
+        }
+        
+        return true;
+      });
+    },
+    
+    get slowQueries() {
+      return this.queries.filter(q => q.duration > 100);
+    },
+    
+    selectQuery(query) {
+      this.selectedQuery = this.selectedQuery?.id === query.id ? null : query;
+    },
+    
+    formatTime(timestamp) {
+      return new Date(timestamp).toLocaleTimeString('en-US', { 
+        hour12: false, 
+        hour: '2-digit', 
+        minute: '2-digit', 
+        second: '2-digit' 
+      });
+    },
+    
+    applyFilters() {
+      // Filters are applied via computed property
+    },
+    
+    exportQueries() {
+      const data = this.filteredQueries.map(q => ({
+        time: this.formatTime(q.timestamp),
+        operation: q.operation,
+        tables: q.tables.join(', '),
+        duration: q.duration,
+        sql: q.sql
+      }));
+      
+      const csv = [
+        ['Time', 'Operation', 'Tables', 'Duration (ms)', 'SQL'],
+        ...data.map(row => [row.time, row.operation, row.tables, row.duration, row.sql])
+      ].map(row => row.map(cell => `"${cell}"`).join(',')).join('\n');
+      
+      const blob = new Blob([csv], { type: 'text/csv' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `queries-${new Date().toISOString().split('T')[0]}.csv`;
+      a.click();
+      URL.revokeObjectURL(url);
+    },
+    
+    refreshData() {
+      window.location.reload();
+    },
+    
+    changeDate(date) {
+      const params = new URLSearchParams(window.location.search);
+      params.set('date', date);
+      window.location.search = params.toString();
+    },
+    
+    clearFilters() {
+      this.filters.operation = '';
+      this.filters.table = '';
+      this.filters.minDuration = '';
+      this.filters.startTime = '';
+      this.filters.endTime = '';
+    }
+  }
+}
+</script>