dbwatcher 1.1.0 → 1.1.2

data/app/controllers/dbwatcher/dashboard/system_info_controller.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Dbwatcher
+  module Dashboard
+    class SystemInfoController < BaseController
+      def refresh
+        system_info_storage.refresh_info
+
+        respond_to do |format|
+          format.json do
+            render json: refresh_success_response
+          end
+        end
+      rescue StandardError => e
+        respond_to do |format|
+          format.json do
+            render json: { success: false, error: e.message }, status: :internal_server_error
+          end
+        end
+      end
+
+      def clear_cache
+        system_info_storage.clear_cache
+
+        respond_to do |format|
+          format.json do
+            render json: clear_cache_success_response
+          end
+        end
+      rescue StandardError => e
+        respond_to do |format|
+          format.json do
+            render json: { success: false, error: e.message }, status: :internal_server_error
+          end
+        end
+      end
+
+      private
+
+      # Get system info storage instance
+      #
+      # @return [Storage::SystemInfoStorage] storage instance
+      def system_info_storage
+        @system_info_storage ||= Storage::SystemInfoStorage.new
+      end
+
+      def refresh_success_response
+        {
+          success: true,
+          message: "System information refreshed successfully",
+          data: system_info_storage.cached_info,
+          summary: system_info_storage.summary
+        }
+      end
+
+      def clear_cache_success_response
+        {
+          success: true,
+          message: "System information cache cleared successfully"
+        }
+      end
+    end
+  end
+end

data/app/controllers/dbwatcher/dashboard_controller.rb

@@ -7,6 +7,14 @@ module Dbwatcher
       @recent_sessions = dashboard_data[:recent_sessions]
       @active_tables = dashboard_data[:active_tables]
       @query_stats = dashboard_data[:query_stats]
+      @active_tab = params[:tab] || "overview"
+
+      # Add system information if enabled
+      return unless Dbwatcher.configuration.collect_system_info
+
+      @system_info_summary = system_info_storage.summary
+      @system_info = system_info_storage.cached_info
+      @info_age = system_info_storage.info_age
     end
 
     def clear_all
@@ -16,5 +24,14 @@ module Dbwatcher
         root_path
       )
     end
+
+    private
+
+    # Get system info storage instance
+    #
+    # @return [Storage::SystemInfoStorage] storage instance
+    def system_info_storage
+      @system_info_storage ||= Storage::SystemInfoStorage.new
+    end
   end
 end

data/app/controllers/dbwatcher/sessions_controller.rb

@@ -9,22 +9,9 @@ module Dbwatcher
     end
 
     def show
-      redirect_to changes_session_path(@session.id)
-    end
-
-    def changes
-      Rails.logger.info "SessionsController#changes: Loading changes for session #{@session.id}"
-      # No server-side data processing - API-first architecture
-    end
-
-    def summary
-      Rails.logger.info "SessionsController#summary: Loading summary for session #{@session.id}"
-      # No server-side data processing - API-first architecture
-    end
-
-    def diagrams
-      Rails.logger.info "SessionsController#diagrams: Loading diagrams for session #{@session.id}"
-      # No server-side data processing - API-first architecture
+      @active_tab = params[:tab] || "changes"
+      # Debug logging
+      Rails.logger.info "SessionsController#show: Session ID: #{@session.id.inspect}, Class: #{@session.class}"
     end
 
     def clear
@@ -41,8 +28,5 @@ module Dbwatcher
       @session = Storage.sessions.find(params[:id])
       handle_not_found("Session", sessions_path) unless @session
     end
-
-    # No longer needed with API-first architecture
-    # All data processing happens in API services and is loaded via JavaScript
   end
 end

data/app/helpers/dbwatcher/application_helper.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 module Dbwatcher
+  # rubocop:disable Metrics/ModuleLength
   module ApplicationHelper
     include FormattingHelper
     include SessionHelper
@@ -21,7 +22,11 @@ module Dbwatcher
         sessions: sessions_icon_svg,
         tables: tables_icon_svg,
         queries: queries_icon_svg,
-        performance: performance_icon_svg
+        performance: performance_icon_svg,
+        system: system_icon_svg,
+        memory: memory_icon_svg,
+        database: database_icon_svg,
+        runtime: runtime_icon_svg
       }
     end
 
@@ -60,19 +65,45 @@ module Dbwatcher
       SVG
     end
 
-    public
+    def system_icon_svg
+      <<~SVG
+        <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
+        </svg>
+      SVG
+    end
 
-    # Generate operation badges for tables
-    def operation_badges
-      content_tag(:div, class: "flex gap-1 justify-center") do
-        [
-          content_tag(:span, "I", class: "badge badge-insert", title: "Inserts"),
-          content_tag(:span, "U", class: "badge badge-update", title: "Updates"),
-          content_tag(:span, "D", class: "badge badge-delete", title: "Deletes")
-        ].join.html_safe
-      end
+    def memory_icon_svg
+      <<~SVG
+        <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
+        </svg>
+      SVG
     end
 
+    def database_icon_svg
+      <<~SVG
+        <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
+        </svg>
+      SVG
+    end
+
+    def runtime_icon_svg
+      <<~SVG
+        <svg class="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+        </svg>
+      SVG
+    end
+
+    public
+
     # Create action buttons with consistent styling
     def action_button(text, path, color: "blue")
       link_to text, path, class: "px-3 py-1 text-xs bg-#{color}-600 text-white rounded hover:bg-#{color}-700"
@@ -100,4 +131,5 @@ module Dbwatcher
       end
     end
   end
+  # rubocop:enable Metrics/ModuleLength
 end

data/app/helpers/dbwatcher/diagram_helper.rb

@@ -2,39 +2,6 @@
 
 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"
@@ -51,60 +18,5 @@ module Dbwatcher
       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/views/dbwatcher/dashboard/_layout.html.erb

@@ -0,0 +1,27 @@
+<%# Dashboard Layout - Common structure for all dashboard pages %>
+<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">
+    <%= link_to root_path, class: "tab-item #{active_tab == 'overview' ? 'active' : ''}" do %>
+      Overview
+    <% end %>
+    <% if @system_info_summary && !@system_info_summary.empty? %>
+      <%= link_to root_path(tab: 'system_info'), class: "tab-item #{active_tab == 'system_info' ? 'active' : ''}" do %>
+        System Info
+      <% end %>
+    <% end %>
+  </div>
+
+  <!-- Content Area -->
+  <div class="flex-1 overflow-auto p-4">
+    <%= yield %>
+  </div>
+</div>

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

@@ -0,0 +1,188 @@
+<%# Dashboard Overview Tab Content %>
+<!-- Overview Tab Content -->
+<div class="tab-content active" data-tab-content="overview">
+  <!-- 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>
+
+  <!-- System Information Summary -->
+  <% if @system_info_summary && !@system_info_summary.empty? %>
+    <div class="grid grid-cols-4 gap-3 mb-4">
+      <!-- System Load Card -->
+      <%= render 'dbwatcher/shared/stats_card',
+          label: 'System Load',
+          value: @system_info_summary[:cpu_load] ? "#{@system_info_summary[:cpu_load]}" : 'N/A',
+          description: '1min avg',
+          icon_html: stats_icon(:system) %>
+
+      <!-- Memory Usage Card -->
+      <%= render 'dbwatcher/shared/stats_card',
+          label: 'Memory Usage',
+          value: @system_info_summary[:memory_usage] ? "#{@system_info_summary[:memory_usage]}%" : 'N/A',
+          value_class: (@system_info_summary[:memory_usage] && @system_info_summary[:memory_usage] > 80) ? 'text-red-600' : 'text-navy-dark',
+          description: 'of total',
+          icon_html: stats_icon(:memory) %>
+
+      <!-- DB Connections Card -->
+      <%= render 'dbwatcher/shared/stats_card',
+          label: 'DB Connections',
+          value: @system_info_summary[:active_connections] || 'N/A',
+          description: 'active',
+          icon_html: stats_icon(:database) %>
+
+      <!-- Runtime Info Card -->
+      <%= render 'dbwatcher/shared/stats_card',
+          label: 'Ruby/Rails',
+          value: @system_info_summary[:ruby_version] || 'N/A',
+          description: @system_info_summary[:rails_version] ? "Rails #{@system_info_summary[:rails_version]}" : 'Ruby only',
+          icon_html: stats_icon(:runtime) %>
+    </div>
+  <% end %>
+
+  <!-- Two Column Layout -->
+  <div class="grid grid-cols-2 gap-4">
+    <!-- Recent Sessions -->
+    <div class="border border-gray-200 rounded-lg shadow-sm">
+      <div class="bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-3 border-b border-gray-200 rounded-t-lg">
+        <div class="flex items-center">
+          <svg class="w-4 h-4 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+          <h3 class="text-sm font-semibold text-gray-800">Recent Sessions</h3>
+        </div>
+      </div>
+      <div class="max-h-64 overflow-auto">
+        <% if @recent_sessions&.any? %>
+          <div class="divide-y divide-gray-100">
+            <% @recent_sessions.each_with_index do |session, index| %>
+              <div class="px-4 py-3 hover:bg-gray-50 transition-colors duration-150">
+                <div class="flex items-center justify-between">
+                  <div class="flex-1 min-w-0">
+                    <% session_id = session[:id] || session['id'] %>
+                    <% session_name = (session[:name] || session['name']).to_s.gsub(/^HTTP \w+ /, '') %>
+                    <%= link_to session_path(session_id), class: "block" do %>
+                      <div class="flex items-center">
+                        <div class="h-2 w-2 bg-blue-400 rounded-full mr-3"></div>
+                        <p class="text-sm font-medium text-gray-900 truncate" title="<%= session_name %>">
+                          <%= session_name %>
+                        </p>
+                      </div>
+                    <% end %>
+                    <div class="flex items-center mt-1">
+                      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                        <%= session[:change_count] || session['change_count'] || 0 %> changes
+                      </span>
+                      <span class="ml-2 text-xs text-gray-500">
+                        <% started_at = session[:started_at] || session['started_at'] %>
+                        <%= Time.parse(started_at).strftime("%H:%M:%S") rescue 'N/A' %>
+                      </span>
+                    </div>
+                  </div>
+                  <div class="ml-4 flex-shrink-0">
+                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            <% end %>
+          </div>
+        <% else %>
+          <div class="p-8 text-center text-gray-500">
+            <svg class="w-8 h-8 mx-auto text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+            <p class="text-sm">No recent sessions</p>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+    <!-- Active Tables -->
+    <div class="border border-gray-200 rounded-lg shadow-sm">
+      <div class="bg-gradient-to-r from-green-50 to-emerald-50 px-4 py-3 border-b border-gray-200 rounded-t-lg">
+        <div class="flex items-center">
+          <svg class="w-4 h-4 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"/>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5a2 2 0 012-2h2a2 2 0 012 2v2H8V5z"/>
+          </svg>
+          <h3 class="text-sm font-semibold text-gray-800">Most Active Tables</h3>
+        </div>
+      </div>
+      <div class="max-h-64 overflow-auto">
+        <% if @active_tables&.any? %>
+          <div class="divide-y divide-gray-100">
+            <% @active_tables.first(10).each_with_index do |(table_name, count), index| %>
+              <div class="px-4 py-3 hover:bg-gray-50 transition-colors duration-150">
+                <div class="flex items-center justify-between">
+                  <div class="flex-1 min-w-0">
+                    <%= link_to table_path(table_name), class: "block" do %>
+                      <div class="flex items-center">
+                        <div class="h-2 w-2 bg-green-400 rounded-full mr-3"></div>
+                        <p class="text-sm font-medium text-gray-900 truncate" title="<%= table_name %>">
+                          <%= table_name %>
+                        </p>
+                      </div>
+                    <% end %>
+                    <div class="flex items-center mt-1">
+                      <div class="flex gap-1">
+                        <span class="badge badge-insert text-xs" title="Inserts">I</span>
+                        <span class="badge badge-update text-xs" title="Updates">U</span>
+                        <span class="badge badge-delete text-xs" title="Deletes">D</span>
+                      </div>
+                      <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                        <%= count %> changes
+                      </span>
+                    </div>
+                  </div>
+                  <div class="ml-4 flex-shrink-0">
+                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            <% end %>
+          </div>
+        <% else %>
+          <div class="p-8 text-center text-gray-500">
+            <svg class="w-8 h-8 mx-auto text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"/>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5a2 2 0 012-2h2a2 2 0 012 2v2H8V5z"/>
+            </svg>
+            <p class="text-sm">No active tables</p>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,22 @@
+<div class="system-info-container">
+  <div class="flex items-center justify-between mb-4">
+    <h2 class="text-lg font-semibold text-gray-800">System Information</h2>
+    <div class="flex items-center gap-2">
+      <% if @system_info&.dig(:collected_at) %>
+        <span class="text-sm text-gray-500">
+          Last updated: <%= time_ago_in_words(Time.parse(@system_info[:collected_at])) %> ago
+        </span>
+      <% end %>
+      <button id="refresh-system-info" class="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
+        Refresh
+      </button>
+      <button id="clear-cache-system-info" class="px-3 py-1 text-sm bg-red-600 text-white rounded hover:bg-red-700 transition-colors">
+        Clear Cache
+      </button>
+    </div>
+  </div>
+
+  <div id="system-info-content">
+    <%= render 'dbwatcher/dashboard/system_info_content' %>
+  </div>
+</div>