dbwatcher 1.1.2 → 1.1.3

data/app/assets/stylesheets/dbwatcher/components/_timeline.scss

@@ -0,0 +1,326 @@
+// Timeline Component Styles
+// Provides styles for the interactive timeline visualization
+
+.timeline-container {
+  @apply h-full flex flex-col;
+}
+
+.timeline-controls {
+  @apply p-3 border-b border-gray-300 bg-gray-50;
+}
+
+.timeline-header {
+  @apply flex items-center justify-between mb-3;
+}
+
+.timeline-title {
+  @apply text-sm font-medium text-gray-900;
+}
+
+.timeline-zoom-controls {
+  @apply flex items-center gap-2;
+}
+
+.timeline-filter-controls {
+  @apply flex items-center gap-4 text-xs flex-wrap;
+}
+
+.timeline-filter-group {
+  @apply flex items-center gap-2;
+}
+
+.timeline-filter-label {
+  @apply text-gray-700 font-medium;
+}
+
+// Timeline visualization
+.timeline-visualization {
+  @apply flex-1 overflow-hidden;
+}
+
+.timeline-time-header {
+  @apply h-8 bg-gray-100 border-b border-gray-200 relative;
+}
+
+.timeline-time-scale {
+  @apply absolute inset-0 flex items-center px-4;
+}
+
+.timeline-content {
+  @apply flex-1 overflow-auto p-4 bg-white;
+}
+
+.timeline-track {
+  @apply relative h-16 bg-gray-50 rounded border border-gray-200 mb-4;
+}
+
+.timeline-line {
+  @apply absolute top-1/2 left-4 right-4 h-0.5 bg-gray-300 transform -translate-y-1/2;
+}
+
+.timeline-marker {
+  @apply absolute top-1/2 transform -translate-y-1/2 -translate-x-1/2 cursor-pointer;
+
+  .timeline-marker-dot {
+    @apply w-3 h-3 rounded-full border-2 border-white shadow-sm transition-transform;
+
+    &:hover {
+      @apply scale-125;
+    }
+  }
+}
+
+// Timeline statistics
+.timeline-stats {
+  @apply grid grid-cols-2 gap-4 text-xs;
+
+  @screen md {
+    @apply grid-cols-4;
+  }
+}
+
+.timeline-stat-card {
+  @apply bg-gray-50 p-3 rounded;
+}
+
+.timeline-stat-label {
+  @apply text-gray-500 font-medium;
+}
+
+.timeline-stat-value {
+  @apply text-lg font-bold text-gray-900;
+}
+
+.timeline-stat-detail {
+  @apply text-xs text-gray-500;
+}
+
+// Operation list
+.timeline-operations {
+  @apply mt-6;
+}
+
+.timeline-operations-title {
+  @apply text-sm font-medium text-gray-900 mb-3;
+}
+
+.timeline-operations-list {
+  @apply space-y-2 max-h-64 overflow-auto;
+}
+
+.timeline-operation-item {
+  @apply flex items-center justify-between p-2 bg-gray-50 rounded hover:bg-gray-100 cursor-pointer text-xs;
+}
+
+.timeline-operation-info {
+  @apply flex items-center gap-3;
+}
+
+.timeline-operation-marker {
+  @apply w-2 h-2 rounded-full;
+}
+
+.timeline-operation-type {
+  @apply font-medium;
+}
+
+.timeline-operation-table {
+  // No additional styles needed - uses default text
+}
+
+.timeline-operation-time {
+  @apply text-gray-500;
+}
+
+.timeline-operation-record {
+  @apply text-gray-500;
+}
+
+// Empty state
+.timeline-empty {
+  @apply text-center py-8 text-gray-500;
+}
+
+.timeline-empty-icon {
+  @apply w-12 h-12 mx-auto mb-4 text-gray-300;
+}
+
+.timeline-empty-text {
+  // No additional styles needed
+}
+
+.timeline-empty-action {
+  @apply mt-2 text-blue-600 underline;
+}
+
+// Loading state
+.timeline-loading {
+  @apply flex items-center justify-center h-64;
+}
+
+.timeline-loading-spinner {
+  @apply animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500;
+}
+
+.timeline-loading-text {
+  @apply ml-2 text-gray-600;
+}
+
+// Error state
+.timeline-error {
+  @apply p-4 bg-red-50 border border-red-200 rounded m-4;
+}
+
+.timeline-error-text {
+  @apply text-red-700;
+}
+
+.timeline-error-retry {
+  @apply mt-2 text-red-600 underline;
+}
+
+// Modal styles
+.timeline-modal-overlay {
+  @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
+}
+
+.timeline-modal-content {
+  @apply bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-96 overflow-auto;
+}
+
+.timeline-modal-header {
+  @apply p-4 border-b border-gray-200 flex justify-between items-center;
+}
+
+.timeline-modal-title {
+  @apply text-lg font-medium;
+}
+
+.timeline-modal-close {
+  @apply text-gray-400 hover:text-gray-600;
+}
+
+.timeline-modal-body {
+  @apply p-4;
+}
+
+.timeline-operation-details {
+  @apply grid grid-cols-1 gap-4 text-sm;
+
+  @screen md {
+    @apply grid-cols-2;
+  }
+}
+
+.timeline-operation-detail-item {
+  // No additional styles needed
+}
+
+.timeline-operation-detail-label {
+  @apply font-medium;
+}
+
+.timeline-operation-detail-value {
+  @apply ml-2;
+
+  &.operation-badge {
+    @apply px-2 py-1 rounded text-xs;
+  }
+
+  &.monospace {
+    @apply font-mono;
+  }
+
+  &.small {
+    @apply text-xs;
+  }
+}
+
+.timeline-changes-section {
+  @apply mt-4;
+}
+
+.timeline-changes-title {
+  @apply text-sm font-medium;
+}
+
+.timeline-changes-content {
+  @apply mt-2 p-3 bg-gray-50 rounded text-xs overflow-auto border max-h-32;
+}
+
+.timeline-metadata-section {
+  @apply mt-4;
+}
+
+.timeline-metadata-title {
+  @apply text-sm font-medium;
+}
+
+.timeline-metadata-grid {
+  @apply mt-2 grid grid-cols-2 gap-2 text-xs;
+}
+
+.timeline-metadata-item {
+  // No additional styles needed for items that are shown
+}
+
+.timeline-metadata-key {
+  @apply font-medium capitalize;
+}
+
+.timeline-metadata-value {
+  // No additional styles needed
+}
+
+// Responsive adjustments
+@screen sm {
+  .timeline-filter-controls {
+    @apply flex-nowrap;
+  }
+
+  .timeline-stats {
+    @apply grid-cols-4;
+  }
+}
+
+// Operation color classes
+.operation-insert {
+  @apply text-green-600 bg-green-100;
+}
+
+.operation-update {
+  @apply text-blue-600 bg-blue-100;
+}
+
+.operation-delete {
+  @apply text-red-600 bg-red-100;
+}
+
+.operation-select {
+  @apply text-purple-600 bg-purple-100;
+}
+
+// Transition classes for Alpine.js
+.timeline-transition-enter {
+  @apply transition ease-out duration-300;
+}
+
+.timeline-transition-enter-start {
+  @apply opacity-0;
+}
+
+.timeline-transition-enter-end {
+  @apply opacity-100;
+}
+
+.timeline-transition-leave {
+  @apply transition ease-in duration-200;
+}
+
+.timeline-transition-leave-start {
+  @apply opacity-100;
+}
+
+.timeline-transition-leave-end {
+  @apply opacity-0;
+}

data/app/controllers/dbwatcher/api/v1/sessions_controller.rb

@@ -6,12 +6,12 @@ module Dbwatcher
       class SessionsController < BaseController
         before_action :find_session, except: [:diagram_types]
 
-        def changes_data
-          Rails.logger.info "API::V1::SessionsController#changes_data: Getting changes for session #{@session.id}"
+        def tables_data
+          Rails.logger.info "API::V1::SessionsController#tables_data: Getting tables for session #{@session.id}"
 
-          # Paginated, filtered changes data
+          # Paginated, filtered tables data
           # Convert ActionController::Parameters to a hash before passing to service
-          service = Dbwatcher::Services::Api::ChangesDataService.new(@session, filter_params.to_h)
+          service = Dbwatcher::Services::Api::TablesDataService.new(@session, filter_params.to_h)
           render json: service.call
         end
 
@@ -39,6 +39,20 @@ module Dbwatcher
           end
         end
 
+        def timeline_data
+          Rails.logger.info "API::V1::SessionsController#timeline_data: Getting timeline for session #{@session.id}"
+
+          # Timeline data processed from session changes
+          service = Dbwatcher::Services::TimelineDataService.new(@session)
+          result = service.call
+
+          if result[:errors].any?
+            render json: { error: result[:errors].first[:message] }, status: :unprocessable_entity
+          else
+            render json: result
+          end
+        end
+
         def diagram_types
           Rails.logger.info "API::V1::SessionsController#diagram_types: Getting available diagram types"
 

data/app/controllers/dbwatcher/sessions_controller.rb

@@ -9,7 +9,7 @@ module Dbwatcher
     end
 
     def show
-      @active_tab = params[:tab] || "changes"
+      @active_tab = params[:tab] || "tables"
       # Debug logging
       Rails.logger.info "SessionsController#show: Session ID: #{@session.id.inspect}, Class: #{@session.class}"
     end

data/app/views/dbwatcher/sessions/_layout.html.erb

@@ -5,8 +5,11 @@
 
   <!-- Tab Bar -->
   <div class="tab-bar">
-    <%= link_to session_path(session.id, tab: 'changes'), class: "tab-item #{active_tab == 'changes' ? 'active' : ''}" do %>
-      Changes
+    <%= link_to session_path(session.id, tab: 'tables'), class: "tab-item #{active_tab == 'tables' ? 'active' : ''}" do %>
+      Tables
+    <% end %>
+    <%= link_to session_path(session.id, tab: 'timeline'), class: "tab-item #{active_tab == 'timeline' ? 'active' : ''}" do %>
+      Timeline
     <% end %>
     <%= link_to session_path(session.id, tab: 'summary'), class: "tab-item #{active_tab == 'summary' ? 'active' : ''}" do %>
       Summary

data/app/views/dbwatcher/sessions/_summary.html.erb

@@ -59,7 +59,7 @@
           <div class="grid grid-cols-4 gap-3">
             <template x-for="table in summaryData.tables_breakdown" :key="table.table_name">
               <div class="bg-gray-50 border border-gray-200 p-2 hover:bg-gray-100 cursor-pointer transition-colors"
-                   @click="window.location.href=`/dbwatcher/sessions/${summaryData.session_id}/changes?table=${table.table_name}`">
+                   @click="window.location.href=`/dbwatcher/sessions/${summaryData.session_id}?tab=tables`">
                 <h4 class="text-xs font-medium text-gray-800 mb-2 truncate" x-text="table.table_name"></h4>
                 <div class="space-y-1">
                   <template x-for="(count, op) in table.operations" :key="op">

data/app/views/dbwatcher/sessions/{_changes.html.erb → _tables.html.erb}

@@ -26,9 +26,82 @@
 
   <!-- Multiple Tables - Enhanced UI Structure -->
   <template x-if="!loading && !error && Object.keys(tableData).length > 0">
-    <div class="h-full overflow-auto p-2 bg-gray-50">
-      <template x-for="[tableName, tableInfo] in Object.entries(tableData)" :key="tableName">
-        <div class="mb-4 bg-white border border-gray-200 rounded shadow-sm" x-data="{ expanded: true }">
+    <div class="h-full flex flex-col bg-gray-50">
+      <!-- Filter Header -->
+      <div class="p-3 border-b border-gray-300 bg-gray-50">
+        <div class="flex items-center justify-between gap-4">
+          <h3 class="text-sm font-medium text-gray-900">Tables View</h3>
+          <div class="flex items-center gap-3 text-xs">
+            <!-- Search Filter -->
+            <input type="text" 
+                   x-model="filters.search" 
+                   @input="applyFilters()"
+                   placeholder="Search..."
+                   class="px-2 py-1 border border-gray-300 rounded text-xs w-32 focus:outline-none focus:ring-1 focus:ring-blue-medium">
+            
+            <!-- Operation Filter -->
+            <select x-model="filters.operation" 
+                    @change="applyFilters()"
+                    class="px-2 py-1 border border-gray-300 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-medium">
+              <option value="">All Operations</option>
+              <template x-for="operation in getAvailableOperations()" :key="operation">
+                <option :value="operation" x-text="operation"></option>
+              </template>
+            </select>
+            
+            <!-- Multi-Table Filter -->
+            <div class="relative" x-data="{ showTableFilter: false }">
+              <button @click="showTableFilter = !showTableFilter" 
+                      class="text-xs bg-white border border-gray-300 px-2 py-1 rounded hover:bg-gray-50 flex items-center gap-1">
+                <span x-text="filters.selectedTables.length === 0 ? 'All Tables' : `${filters.selectedTables.length} Tables`"></span>
+                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                </svg>
+              </button>
+              
+              <div x-show="showTableFilter" 
+                   x-transition
+                   @click.away="showTableFilter = false"
+                   class="absolute top-full right-0 mt-1 bg-white border border-gray-300 rounded shadow-lg z-50 min-w-48 max-h-48 overflow-auto">
+                <div class="p-2 border-b border-gray-200 flex gap-2">
+                  <button @click="selectAllTables(); showTableFilter = false"
+                          class="text-xs text-blue-medium hover:text-navy-dark underline">
+                    All
+                  </button>
+                  <button @click="clearTableFilters()"
+                          class="text-xs text-blue-medium hover:text-navy-dark underline">
+                    None
+                  </button>
+                </div>
+                <div class="p-1">
+                  <template x-for="tableName in getAvailableTables()" :key="tableName">
+                    <label class="flex items-center gap-2 p-1 rounded hover:bg-gray-100 cursor-pointer">
+                      <input type="checkbox" 
+                             :value="tableName" 
+                             x-model="filters.selectedTables" 
+                             @change="applyFilters()"
+                             class="form-checkbox h-3 w-3 text-blue-medium">
+                      <span class="text-xs text-gray-700" x-text="tableName"></span>
+                    </label>
+                  </template>
+                </div>
+              </div>
+            </div>
+            
+            <!-- Clear Filters -->
+            <button @click="clearAllFilters()" 
+                    class="text-xs bg-white border border-gray-300 px-2 py-1 rounded hover:bg-gray-50">
+              Clear
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Tables Content -->
+      <div class="flex-1 overflow-auto p-2">
+        <template x-for="[tableName, tableInfo] in Object.entries(tableData)" :key="tableName">
+        <div x-show="filters.selectedTables.length === 0 || filters.selectedTables.includes(tableName)" 
+             class="mb-4 bg-white border border-gray-200 rounded shadow-sm" x-data="{ expanded: true }">
           <!-- Table Header with Column Controls -->
           <div class="bg-gray-100 px-3 py-2 flex items-center cursor-pointer border-b border-gray-200"
                @click="expanded = !expanded"
@@ -38,7 +111,12 @@
                  fill="currentColor" viewBox="0 0 20 20">
               <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 111.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
             </svg>
-            <h3 class="text-sm font-medium text-gray-900 flex-1" x-text="tableName"></h3>
+            <div class="flex-1">
+              <h3 class="text-sm font-medium text-gray-900" x-text="tableName"></h3>
+              <div class="text-xs text-gray-500 mt-1" x-show="tableInfo.model_class">
+                <span x-text="tableInfo.model_class"></span>
+              </div>
+            </div>
             <div class="flex gap-2 mr-4">
               <template x-for="[op, count] in Object.entries(tableInfo.operations || {})" :key="op">
                 <span x-show="count > 0" class="badge changes-table-badge" :class="`badge-${op.toLowerCase()}`" x-text="count"></span>
@@ -85,7 +163,8 @@
             <div :id="`changes-table-${tableName}`" class="table-container"></div>
           </div>
         </div>
-      </template>
+        </template>
+      </div>
     </div>
   </template>
 </div>