dbwatcher 1.0.0 → 1.1.0

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

@@ -0,0 +1,449 @@
+/**
+ * Diagrams Component
+ * API-first implementation for DBWatcher diagrams tab
+ */
+
+// Register component with DBWatcher
+DBWatcher.registerComponent('diagrams', function(config) {
+  // Ensure we have a sessionId from config or elsewhere
+  const sessionId = config.sessionId || config.session_id || (config.session && config.session.id);
+
+  return Object.assign(DBWatcher.BaseComponent(config), {
+    // Component-specific state
+    sessionId: sessionId,
+    diagramTypes: {},
+    selectedType: 'database_tables',
+    diagramContent: null,
+    panZoomInstance: null,
+    generating: false,
+    showCodeView: false, // Add state for code view toggle
+
+    // Component initialization
+    componentInit() {
+      // Validate sessionId before proceeding
+      if (!this.sessionId) {
+        console.error('No session ID available in component. Config was:', config);
+        this.handleError(new Error('No session ID provided'));
+        return;
+      }
+
+      // First load available diagram types from API
+      this.loadDiagramTypes().then(() => {
+        // Then load the actual diagram
+        this.loadDiagram();
+      });
+    },
+
+    // Component cleanup
+    componentDestroy() {
+      this.safelyDestroyPanZoom();
+    },
+
+    // Load available diagram types from API
+    async loadDiagramTypes() {
+      this.setLoading(true);
+      this.clearError();
+
+      try {
+        const url = `/dbwatcher/api/v1/sessions/diagram_types`;
+        const data = await this.fetchData(url);
+
+        if (data.types) {
+          this.diagramTypes = data.types;
+
+          // If URL has type parameter, use it, otherwise use default
+          const urlParams = new URLSearchParams(window.location.search);
+          const typeParam = urlParams.get('diagram_type');
+
+          if (typeParam && this.diagramTypes[typeParam]) {
+            this.selectedType = typeParam;
+          } else if (data.default_type) {
+            this.selectedType = data.default_type;
+          }
+        } else {
+          throw new Error('No diagram types received');
+        }
+      } catch (error) {
+        this.handleError(error);
+      } finally {
+        this.setLoading(false);
+      }
+    },
+
+    // Load diagram data from API
+    async loadDiagram() {
+      if (!this.sessionId) {
+        console.error('No session ID provided to diagrams component');
+        this.handleError(new Error('No session ID provided'));
+        return;
+      }
+
+      this.generating = true;
+      this.clearError();
+
+      try {
+        const url = `/dbwatcher/api/v1/sessions/${this.sessionId}/diagram_data?type=${this.selectedType}`;
+        const data = await this.fetchData(url);
+
+        if (data.content) {
+          this.diagramContent = data.content;
+          // Update URL to reflect current diagram type
+          this.updateURL();
+          // Wait for DOM update
+          this.$nextTick(() => this.renderDiagram());
+        } else {
+          throw new Error('No diagram content received');
+        }
+      } catch (error) {
+        this.handleError(error);
+      } finally {
+        this.generating = false;
+      }
+    },
+
+    // Update URL with current diagram type
+    updateURL() {
+      const url = new URL(window.location.href);
+      const params = new URLSearchParams(url.search);
+
+      params.set('diagram_type', this.selectedType);
+
+      // Update URL without full page reload
+      url.search = params.toString();
+      window.history.replaceState({}, '', url.toString());
+    },
+
+    // Change diagram type
+    async changeType(newType) {
+      if (this.selectedType === newType) return;
+
+      this.selectedType = newType;
+      this.updateURL();
+      await this.loadDiagram();
+    },
+
+    // Render diagram using MermaidService
+    async renderDiagram() {
+      const container = this.$refs.diagramContainer;
+
+      if (!container || !this.diagramContent) {
+        return;
+      }
+
+      try {
+        // Cleanup previous pan/zoom instance safely
+        this.safelyDestroyPanZoom();
+
+        if (!window.MermaidService) {
+          throw new Error('MermaidService not available');
+        }
+
+        // Set container to full height to maximize diagram display area
+        container.style.height = '100%';
+        container.style.minHeight = '500px';
+
+        // Maximize diagram within its container
+        this.maximizeInContainer(container);
+
+        // Render with MermaidService
+        const result = await window.MermaidService.render(
+          this.diagramContent,
+          container,
+          {
+            fit: true,
+            center: true,
+            zoomEnabled: true,
+            panEnabled: true,
+            controlIconsEnabled: true
+          }
+        );
+
+        // Store pan/zoom instance if created
+        if (result && result.panZoom) {
+          this.panZoomInstance = result.panZoom;
+          console.log('Pan/zoom instance initialized successfully');
+        } else {
+          console.warn('Pan/zoom instance was not created');
+        }
+      } catch (error) {
+        this.handleError(error);
+      }
+    },
+
+    // Safely destroy pan zoom instance with error handling
+    safelyDestroyPanZoom() {
+      if (!this.panZoomInstance) return;
+
+      try {
+        this.panZoomInstance.destroy();
+      } catch (error) {
+        console.warn('Error destroying pan zoom instance:', error);
+      } finally {
+        this.panZoomInstance = null;
+      }
+    },
+
+    // Zoom controls
+    zoomIn() {
+      if (!this.panZoomInstance) return;
+
+      try {
+        this.panZoomInstance.zoomIn();
+      } catch (error) {
+        console.warn('Error zooming in:', error);
+      }
+    },
+
+    zoomOut() {
+      if (!this.panZoomInstance) return;
+
+      try {
+        this.panZoomInstance.zoomOut();
+      } catch (error) {
+        console.warn('Error zooming out:', error);
+      }
+    },
+
+    resetZoom() {
+      if (!this.panZoomInstance) return;
+
+      try {
+        this.panZoomInstance.resetZoom();
+        this.panZoomInstance.center();
+      } catch (error) {
+        console.warn('Error resetting zoom:', error);
+      }
+    },
+
+    // Reset view - alias for resetZoom for consistency with template
+    resetView() {
+      this.resetZoom();
+    },
+
+    // Download diagram as SVG
+    downloadSVG() {
+      const svgElement = this.$refs.diagramContainer?.querySelector('svg');
+      if (!svgElement) return;
+
+      try {
+        const svgData = new XMLSerializer().serializeToString(svgElement);
+        const blob = new Blob([svgData], { type: 'image/svg+xml' });
+        const url = URL.createObjectURL(blob);
+
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `dbwatcher-${this.selectedType}-diagram.svg`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+
+        URL.revokeObjectURL(url);
+      } catch (error) {
+        this.handleError(new Error('Failed to download SVG'));
+      }
+    },
+
+    // Toggle code view
+    toggleCodeView() {
+      this.showCodeView = !this.showCodeView;
+
+      // If showing code view, ensure the code is properly displayed
+      if (this.showCodeView && this.diagramContent) {
+        const codeContainer = this.$refs.codeContainer;
+        if (codeContainer) {
+          codeContainer.textContent = this.diagramContent;
+
+          // Ensure container is properly scrollable for large content
+          setTimeout(() => {
+            // Reset scroll position to top when showing code
+            const container = codeContainer.parentElement;
+            if (container) {
+              container.scrollTop = 0;
+            }
+
+            // Add specific handling for very large content
+            if (codeContainer.scrollHeight > window.innerHeight * 0.8) {
+              codeContainer.classList.add('large-content');
+            } else {
+              codeContainer.classList.remove('large-content');
+            }
+          }, 10);
+        }
+      }
+    },
+
+    // Copy diagram code to clipboard
+    copyDiagramCode() {
+      if (!this.diagramContent) return;
+
+      try {
+        navigator.clipboard.writeText(this.diagramContent).then(() => {
+          // Show a temporary success message
+          const copyBtn = this.$refs.copyButton;
+          if (copyBtn) {
+            const originalText = copyBtn.textContent;
+            copyBtn.textContent = 'Copied!';
+            copyBtn.classList.add('bg-green-500');
+
+            setTimeout(() => {
+              copyBtn.textContent = originalText;
+              copyBtn.classList.remove('bg-green-500');
+            }, 2000);
+          }
+        });
+      } catch (error) {
+        console.error('Failed to copy code:', error);
+      }
+    },
+
+    // Get diagram type metadata
+    getDiagramTypeInfo(type) {
+      return this.availableTypes[type] || {
+        display_name: type,
+        description: ''
+      };
+    },
+
+    // Maximize diagram within its container
+    maximizeInContainer(container) {
+      if (!container) return;
+
+      // Apply styles to ensure diagram fills available container space
+      const containerStyles = {
+        height: '100%',
+        minHeight: '500px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        position: 'relative',
+        padding: '0.75rem',
+        margin: '0',
+        boxSizing: 'border-box',
+        borderRadius: '0.375rem'
+      };
+
+      Object.assign(container.style, containerStyles);
+
+      // Find SVG element and ensure it fills the container
+      const svgElement = container.querySelector('svg');
+      if (svgElement) {
+        // Make SVG responsive and fit container with enhanced styling
+        const svgStyles = {
+          width: '100%',
+          height: '100%',
+          maxWidth: '100%',
+          maxHeight: '100%',
+          display: 'block',
+          margin: 'auto',
+          borderRadius: '0.25rem',
+          boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)'
+        };
+
+        Object.assign(svgElement.style, svgStyles);
+
+        // Update SVG attributes for proper scaling
+        if (!svgElement.getAttribute('preserveAspectRatio')) {
+          svgElement.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+        }
+
+        // Ensure dimensions are set
+        const containerWidth = container.clientWidth || 800;
+        const containerHeight = container.clientHeight || 600;
+
+        if (!svgElement.getAttribute('width') || !svgElement.getAttribute('height')) {
+          svgElement.setAttribute('width', containerWidth.toString());
+          svgElement.setAttribute('height', containerHeight.toString());
+        }
+
+        if (!svgElement.getAttribute('viewBox')) {
+          svgElement.setAttribute('viewBox', `0 0 ${containerWidth} ${containerHeight}`);
+        }
+      }
+
+      // Ensure any child div is also maximized
+      const childDiv = container.querySelector('div.mermaid-diagram');
+      if (childDiv) {
+        const childStyles = {
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          margin: '0',
+          padding: '0.5rem',
+          borderRadius: '0.375rem',
+          backgroundColor: '#f9fafb'
+        };
+
+        Object.assign(childDiv.style, childStyles);
+      }
+    },
+
+
+
+    // Error handling with user-friendly message and diagnostic logging
+    handleError(error) {
+      console.error('Error in diagrams component:', error);
+
+      // If we have a diagram container, display a user-friendly error
+      if (this.$refs.diagramContainer) {
+        this.$refs.diagramContainer.innerHTML = `
+          <div class="p-6 text-center bg-gray-50 rounded-md border border-gray-200 shadow-sm">
+            <div class="text-red-600 mb-3 font-medium">Error loading diagram</div>
+            <div class="text-sm text-gray-600 mb-4 p-2 bg-red-50 rounded border border-red-100">${error.message}</div>
+            <div class="mt-4">
+              <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 shadow-sm"
+                      onclick="window.location.reload()">
+                Refresh Page
+              </button>
+            </div>
+          </div>
+        `;
+      }
+
+      // Add additional diagnostic logging
+      if (error.stack) {
+        console.debug('Error stack:', error.stack);
+      }
+
+      // Cleanup any existing pan/zoom instance
+      this.safelyDestroyPanZoom();
+    }
+  });
+});
+
+// Immediate fallback registration for Alpine.js
+if (window.Alpine && window.Alpine.data) {
+  window.Alpine.data('diagrams', (config = {}) => {
+    console.log('Direct Alpine registration for diagrams called with config:', config);
+    if (window.DBWatcher && window.DBWatcher.components && window.DBWatcher.components.diagrams) {
+      return window.DBWatcher.components.diagrams(config);
+    } else {
+      console.error('DBWatcher diagrams component not available, providing fallback');
+      return {
+        error: 'Component not initialized',
+        init() {
+          this.error = 'DBWatcher not properly initialized';
+        }
+      };
+    }
+  });
+}
+
+// Also add a global function as a backup
+window.diagrams = function(config = {}) {
+  console.log('Global diagrams function called with config:', config);
+  if (window.DBWatcher && window.DBWatcher.components && window.DBWatcher.components.diagrams) {
+    return window.DBWatcher.components.diagrams(config);
+  } else {
+    console.error('DBWatcher diagrams component not available in global function');
+    return {
+      error: 'Component not initialized',
+      init() {
+        this.error = 'DBWatcher not properly initialized';
+      }
+    };
+  }
+};

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

@@ -0,0 +1,234 @@
+/**
+ * Summary Component
+ * API-first implementation for DBWatcher summary tab
+ */
+
+// Register component with DBWatcher
+DBWatcher.registerComponent('summary', function(config) {
+  return Object.assign(DBWatcher.BaseComponent(config), {
+    // Component-specific state
+    sessionId: config.sessionId,
+    summaryData: {},
+    autoRefresh: config.autoRefresh || false,
+    refreshInterval: null,
+
+    // Component initialization
+    componentInit() {
+      // Always load from API in API-first architecture
+      this.loadSummaryData();
+
+      // Setup auto-refresh if enabled
+      if (this.autoRefresh) {
+        this.startAutoRefresh();
+      }
+    },
+
+    // Component cleanup
+    componentDestroy() {
+      this.stopAutoRefresh();
+    },
+
+    // Load summary data from API
+    async loadSummaryData() {
+      if (!this.sessionId) {
+        console.error('No session ID provided to summary component');
+        this.handleError(new Error('No session ID provided'));
+        return;
+      }
+
+      this.setLoading(true);
+      this.clearError();
+
+      try {
+        const url = `/dbwatcher/api/v1/sessions/${this.sessionId}/summary_data`;
+        const data = await this.fetchData(url);
+
+        if (!data.error) {
+          // API returns complete data structure including tables_breakdown and enhanced_stats
+          this.summaryData = data;
+        } else {
+          throw new Error(data.error || 'No summary data received');
+        }
+      } catch (error) {
+        this.handleError(error);
+      } finally {
+        this.setLoading(false);
+      }
+    },
+
+    // Toggle auto-refresh
+    toggleAutoRefresh() {
+      this.autoRefresh = !this.autoRefresh;
+
+      if (this.autoRefresh) {
+        this.startAutoRefresh();
+      } else {
+        this.stopAutoRefresh();
+      }
+    },
+
+    // Start auto-refresh interval
+    startAutoRefresh() {
+      if (this.refreshInterval) return;
+
+      this.refreshInterval = setInterval(() => {
+        this.loadSummaryData();
+      }, 30000); // 30 seconds
+    },
+
+    // Stop auto-refresh
+    stopAutoRefresh() {
+      if (this.refreshInterval) {
+        clearInterval(this.refreshInterval);
+        this.refreshInterval = null;
+      }
+    },
+
+    // Get total changes count
+    getTotalChanges() {
+      return this.summaryData.enhanced_stats?.total_changes || 0;
+    },
+
+    // Get total tables count
+    getTotalTables() {
+      return this.summaryData.enhanced_stats?.tables_count || 0;
+    },
+
+    // Get operation breakdown for charts
+    getOperationBreakdown() {
+      return this.summaryData.enhanced_stats?.operations_breakdown || { "INSERT": 0, "UPDATE": 0, "DELETE": 0 };
+    },
+
+    // Get table activity data for visualization
+    getTableActivity() {
+      if (!this.summaryData.tables_breakdown) return [];
+
+      return this.summaryData.tables_breakdown.map(table => ({
+        name: table.table_name,
+        total: table.change_count,
+        ...table.operations
+      }));
+    },
+
+    // Format percentage
+    formatPercentage(value, total) {
+      if (!total || total === 0) return '0%';
+      const percentage = (value / total) * 100;
+      return `${percentage.toFixed(1)}%`;
+    },
+
+    // Get operation color class
+    getOperationColor(operation) {
+      const colors = {
+        insert: 'text-green-600 bg-green-100',
+        update: 'text-blue-600 bg-blue-100',
+        delete: 'text-red-600 bg-red-100'
+      };
+      return colors[operation] || 'text-gray-600 bg-gray-100';
+    },
+
+    // Get activity level class
+    getActivityLevel(count) {
+      if (count === 0) return 'activity-none';
+      if (count < 10) return 'activity-low';
+      if (count < 50) return 'activity-medium';
+      if (count < 100) return 'activity-high';
+      return 'activity-very-high';
+    },
+
+    // Format duration using timing info
+    formatDuration() {
+      if (!this.summaryData.timing) return '--';
+      const timing = this.summaryData.timing;
+
+      if (timing.duration === null) return '--';
+
+      const ms = timing.duration;
+      if (ms < 1000) return `${ms}ms`;
+      if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+      if (ms < 3600000) return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`;
+
+      const hours = Math.floor(ms / 3600000);
+      const minutes = Math.floor((ms % 3600000) / 60000);
+      return `${hours}h ${minutes}m`;
+    },
+
+    // Format start time
+    formatStartTime() {
+      if (!this.summaryData.timing?.started_at) return '--';
+      return this.formatDate(this.summaryData.timing.started_at, 'MMM dd, yyyy HH:mm:ss');
+    },
+
+    // Format end time
+    formatEndTime() {
+      if (!this.summaryData.timing?.ended_at) return 'Active';
+      return this.formatDate(this.summaryData.timing.ended_at, 'MMM dd, yyyy HH:mm:ss');
+    },
+
+    // Format operations per minute
+    formatOperationsPerMinute() {
+      if (!this.summaryData.enhanced_stats) return '0';
+
+      const duration = this.calculateDurationInMinutes();
+      if (duration <= 0) return '0';
+
+      const totalOps = this.summaryData.enhanced_stats.total_changes || 0;
+      const opsPerMin = totalOps / duration;
+      return opsPerMin.toFixed(1);
+    },
+
+    // Format peak activity time range
+    formatPeakActivity() {
+      if (!this.summaryData.enhanced_stats || !this.summaryData.enhanced_stats.peak_activity) {
+        return 'N/A';
+      }
+
+      const peak = this.summaryData.enhanced_stats.peak_activity;
+      return `${peak.count} / ${peak.period}s`;
+    },
+
+    // Calculate duration in minutes for stats
+    calculateDurationInMinutes() {
+      if (!this.summaryData.timing) return 0;
+
+      const start = new Date(this.summaryData.timing.started_at);
+      const end = this.summaryData.timing.ended_at ?
+        new Date(this.summaryData.timing.ended_at) :
+        new Date();
+
+      return (end - start) / (1000 * 60); // Convert ms to minutes
+    },
+
+    // Enhanced time formatting methods
+    formatStartTime() {
+      if (!this.summaryData.timing || !this.summaryData.timing.started_at) return 'N/A';
+      return new Date(this.summaryData.timing.started_at).toLocaleString();
+    },
+
+    formatEndTime() {
+      if (!this.summaryData.timing) return 'N/A';
+      if (!this.summaryData.timing.ended_at) return 'Active';
+      return new Date(this.summaryData.timing.ended_at).toLocaleString();
+    },
+
+    formatDuration() {
+      if (!this.summaryData.timing) return 'N/A';
+
+      const duration = this.summaryData.timing.duration;
+      if (!duration) return 'N/A';
+
+      if (duration < 60) {
+        return `${duration}s`;
+      } else if (duration < 3600) {
+        const minutes = Math.floor(duration / 60);
+        const seconds = duration % 60;
+        return `${minutes}m ${seconds}s`;
+      } else {
+        const hours = Math.floor(duration / 3600);
+        const minutes = Math.floor((duration % 3600) / 60);
+        const seconds = duration % 60;
+        return `${hours}h ${minutes}m ${seconds}s`;
+      }
+    },
+  });
+});