dbwatcher 1.1.2 → 1.1.4

data/app/assets/javascripts/dbwatcher/components/timeline.js

@@ -0,0 +1,211 @@
+/**
+ * Timeline Component
+ * Interactive timeline visualization for database operations
+ * API-first implementation for DBWatcher timeline tab
+ */
+
+// Register component with DBWatcher
+(function() {
+  function registerTimeline() {
+    if (window.DBWatcher && window.DBWatcher.ComponentRegistry) {
+      DBWatcher.ComponentRegistry.register('timeline', function(config) {
+        return Object.assign(DBWatcher.BaseComponent(config), {
+          // Component-specific state
+          sessionId: config.sessionId,
+          timelineData: [],
+          filteredData: [],
+          metadata: {},
+
+          // Filter state
+          filters: {
+            tables: [],
+            searchText: ""
+          },
+          tableSearch: "",
+
+          // Component initialization
+          componentInit() {
+            this.loadTimelineData();
+            this.setupEventListeners();
+          },
+
+          // Component cleanup
+          componentDestroy() {
+            // Clean up any event listeners or intervals
+          },
+
+          // Load timeline data from API
+          async loadTimelineData() {
+            if (!this.sessionId) {
+              console.error('No session ID provided to timeline component');
+              this.handleError(new Error('No session ID provided'));
+              return;
+            }
+
+            this.setLoading(true);
+            this.clearError();
+
+            try {
+              const url = `/dbwatcher/api/v1/sessions/${this.sessionId}/timeline_data`;
+              const data = await this.fetchData(url);
+
+              if (!data.error) {
+                this.timelineData = data.timeline || [];
+                this.metadata = data.metadata || {};
+                this.filteredData = [...this.timelineData];
+
+                this.setupInitialView();
+              } else {
+                throw new Error(data.error || 'No timeline data received');
+              }
+            } catch (error) {
+              this.handleError(error);
+            } finally {
+              this.setLoading(false);
+            }
+          },
+
+          // Setup initial view after data load
+          setupInitialView() {
+            // Initialize filters based on available data
+            if (this.metadata.tables_affected) {
+              // Set up available filter options but don't apply any filters initially
+            }
+          },
+
+          // Setup event listeners
+          setupEventListeners() {
+            // Reserved for future keyboard shortcuts
+          },
+
+          // ==========================================
+          // Filtering functionality
+          // ==========================================
+
+          // Apply all filters to timeline data
+          applyFilters() {
+            this.filteredData = this.timelineData.filter((entry) => {
+              return (
+                this.matchesTableFilter(entry) &&
+                this.matchesSearchFilter(entry)
+              );
+            });
+          },
+
+          // Filter by table name
+          matchesTableFilter(entry) {
+            return (
+              this.filters.tables.length === 0 ||
+              this.filters.tables.includes(entry.table_name)
+            );
+          },
+
+          // Filter by search text
+          matchesSearchFilter(entry) {
+            if (!this.filters.searchText) return true;
+
+            const searchLower = this.filters.searchText.toLowerCase();
+            return (
+              entry.table_name.toLowerCase().includes(searchLower) ||
+              entry.operation.toLowerCase().includes(searchLower) ||
+              (entry.record_id && entry.record_id.toString().includes(searchLower))
+            );
+          },
+
+          // Clear all filters
+          clearFilters() {
+            this.filters = {
+              tables: [],
+              searchText: ""
+            };
+            this.applyFilters();
+          },
+
+          // ==========================================
+          // Utility methods
+          // ==========================================
+
+          // Format timestamp for display
+          formatTimestamp(timestamp) {
+            if (!timestamp) return 'N/A';
+            return this.formatDate(new Date(timestamp), 'MMM dd, yyyy HH:mm:ss');
+          },
+
+          // Format duration in milliseconds
+          formatDuration(ms) {
+            if (!ms || ms < 0) return '0ms';
+            if (ms < 1000) return `${ms}ms`;
+            if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+            return `${(ms / 60000).toFixed(1)}m`;
+          },
+
+          // Get color for operation type
+          getOperationColor(operation) {
+            const colors = {
+              INSERT: "#10b981", // green
+              UPDATE: "#f59e0b", // amber
+              DELETE: "#ef4444", // red
+              SELECT: "#3b82f6"  // blue
+            };
+            return colors[operation] || "#6b7280";
+          },
+
+          // Get operation icon
+          getOperationIcon(operation) {
+            const icons = {
+              INSERT: "plus",
+              UPDATE: "pencil",
+              DELETE: "trash",
+              SELECT: "eye"
+            };
+            return icons[operation] || "circle";
+          },
+
+          // Get available tables for filtering
+          getAvailableTables() {
+            return this.metadata.tables_affected || [];
+          },
+
+          // Get available operations for filtering
+          getAvailableOperations() {
+            return Object.keys(this.metadata.operation_counts || {});
+          },
+
+          // Get operation count for display
+          getOperationCount(operation) {
+            return this.metadata.operation_counts?.[operation] || 0;
+          },
+
+          // Get total filtered operations count
+          getTotalFilteredOperations() {
+            return this.filteredData.length;
+          },
+
+          // Get session statistics
+          getSessionStats() {
+            return {
+              totalOperations: this.timelineData.length,
+              filteredOperations: this.filteredData.length,
+              tablesAffected: this.getAvailableTables().length,
+              sessionDuration: this.metadata.session_duration || 'N/A',
+              timeRange: this.metadata.time_range || {}
+            };
+          },
+
+          // Format relative time from session start
+          formatRelativeTime(operation) {
+            if (!operation) return '00:00';
+            return operation.relative_time || '00:00';
+          }
+        });  // End of Object.assign
+      });  // End of registerComponent
+      console.log('✅ Timeline component registered successfully');
+    } else {
+      console.warn('DBWatcher ComponentRegistry not ready, retrying timeline registration...');
+      setTimeout(registerTimeline, 100);
+    }
+  }
+
+  // Register immediately without waiting for DOM
+  registerTimeline();
+})();

data/app/assets/javascripts/dbwatcher/dbwatcher.js

@@ -101,6 +101,11 @@ window.DBWatcher = {
     return factory(config);
   },
 
+  // Get component (alias for createComponent for compatibility)
+  getComponent(name, config = {}) {
+    return this.createComponent(name, config);
+  },
+
   // Register a component using the ComponentRegistry
   register(name, factory) {
     if (!this.ComponentRegistry) {

data/app/assets/stylesheets/dbwatcher/application.css

@@ -1,7 +1,7 @@
 /**
  * DBWatcher Application Styles
  * Compiled CSS for all components
- * Generated at 2025-07-09 21:44:32 +0700
+ * Generated at 2025-07-11 21:59:56 +0700
  */
 
 /**
@@ -747,6 +747,303 @@ pre[x-ref="codeContainer"]::-webkit-scrollbar-thumb:hover {
   z-index: 100;
 }
 
+.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 {
+  @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 .timeline-marker-dot {
+  @apply w-3 h-3 rounded-full border-2 border-white shadow-sm transition-transform;
+}
+
+.timeline-marker .timeline-marker-dot:hover {
+  @apply scale-125;
+}
+
+.timeline-stats {
+  @apply grid grid-cols-2 gap-4 text-xs;
+}
+
+@screen md {
+  .timeline-stats {
+    @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;
+}
+
+.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-time {
+  @apply text-gray-500;
+}
+
+.timeline-operation-record {
+  @apply text-gray-500;
+}
+
+.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-action {
+  @apply mt-2 text-blue-600 underline;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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 {
+  .timeline-operation-details {
+    @apply grid-cols-2;
+  }
+}
+
+.timeline-operation-detail-label {
+  @apply font-medium;
+}
+
+.timeline-operation-detail-value {
+  @apply ml-2;
+}
+
+.timeline-operation-detail-value.operation-badge {
+  @apply px-2 py-1 rounded text-xs;
+}
+
+.timeline-operation-detail-value.monospace {
+  @apply font-mono;
+}
+
+.timeline-operation-detail-value.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-key {
+  @apply font-medium capitalize;
+}
+
+@screen sm {
+  .timeline-filter-controls {
+    @apply flex-nowrap;
+  }
+  .timeline-stats {
+    @apply grid-cols-4;
+  }
+}
+
+.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;
+}
+
+.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;
+}
+
 /**
  * Tabulator Vendor Overrides
  * Overrides for the Tabulator.js vendor CSS

data/app/assets/stylesheets/dbwatcher/application.scss

@@ -14,6 +14,7 @@
 @import "components/badges";
 @import "components/diagrams";
 @import "components/tabulator";
+@import "components/timeline";
 
 // Vendor overrides - must be imported after our components
 @import "vendor/tabulator_overrides";