dbwatcher 0.1.5 → 1.0.0

data/app/views/dbwatcher/tables/changes.html.erb

@@ -0,0 +1,225 @@
+<div class="h-full flex flex-col" x-data="tableView()">
+  <!-- Compact Header -->
+  <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="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11 4a1 1 0 10-2 0v4a1 1 0 102 0V7zm-3 1a1 1 0 10-2 0v3a1 1 0 102 0V8zM8 9a1 1 0 00-2 0v2a1 1 0 102 0V9z" clip-rule="evenodd"/>
+    </svg>
+    <h1 class="text-sm font-medium">Table: <%= @table_name %></h1>
+    
+    <!-- Quick Stats -->
+    <div class="ml-auto flex items-center gap-4 text-xs">
+      <span x-text="`${filteredRecords.length} records`"></span>
+      <span class="text-gold-light" x-text="`${totalChanges} changes`"></span>
+    </div>
+  </div>
+  
+  <!-- Tab Bar -->
+  <div class="tab-bar">
+    <div class="tab-item active">Changes</div>
+    <div class="tab-item">Schema</div>
+    <div class="tab-item">Statistics</div>
+  </div>
+  
+  <!-- Compact Toolbar -->
+  <div class="bg-gray-100 border-b border-gray-300 px-3 py-1 flex items-center gap-3">
+    <input type="text" 
+           x-model="searchTerm"
+           placeholder="Filter records..."
+           class="compact-input flex-1 max-w-xs">
+    
+    <select x-model="selectedSession" 
+            class="compact-select">
+      <option value="">All Sessions</option>
+      <% @sessions.each do |session_id| %>
+        <% session = Dbwatcher::Storage.sessions.find(session_id) %>
+        <% if session %>
+          <option value="<%= session_id %>"><%= session.name %></option>
+        <% end %>
+      <% end %>
+    </select>
+    
+    <select x-model="selectedOperation" 
+            class="compact-select">
+      <option value="">All Operations</option>
+      <option value="INSERT">INSERT</option>
+      <option value="UPDATE">UPDATE</option>
+      <option value="DELETE">DELETE</option>
+    </select>
+    
+    <div class="ml-auto flex items-center gap-2">
+      <button @click="exportData()" 
+              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>
+    </div>
+  </div>
+  
+  
+  <!-- Content -->
+  <div class="flex-1 overflow-auto">
+    <% if @records&.any? %>
+      <table class="compact-table w-full">
+        <thead>
+          <tr>
+            <th class="text-center w-16">Op</th>
+            <th class="text-left w-24">Session</th>
+            <th class="text-left w-20">Time</th>
+            <% if @records&.any? %>
+              <% sample_record = @records.values.first.first[:record_snapshot] %>
+              <% if sample_record %>
+                <% sample_record.keys.each do |column| %>
+                  <th class="text-left"><%= column.to_s.humanize %></th>
+                <% end %>
+              <% end %>
+            <% end %>
+          </tr>
+        </thead>
+        <tbody>
+          <template x-for="record in filteredRecords" :key="record.id">
+            <tr class="cursor-pointer hover:bg-blue-50" 
+                @click="selectRecord(record)"
+                :class="{ 'selected': selectedRecord?.id === record.id }">
+              <td class="text-center">
+                <span class="badge" 
+                      :class="`badge-${record.operation.toLowerCase()}`"
+                      x-text="record.operation.charAt(0)"></span>
+              </td>
+              <td class="truncate text-xs" 
+                  :title="record.session_name"
+                  x-text="record.session_name"></td>
+              <td class="text-xs text-gray-600" 
+                  x-text="formatTime(record.timestamp)"></td>
+            <template x-for="[key, value] in Object.entries(record.record_snapshot || {})" :key="key">
+              <td class="truncate max-w-32" 
+                  :title="value"
+                  :class="{
+                    'highlight-change': record.operation === 'UPDATE' && record.previous_values && record.previous_values[key] !== value,
+                    'highlight-new': record.operation === 'INSERT',
+                    'highlight-deleted': record.operation === 'DELETE'
+                  }"
+                  x-text="value"></td>
+            </template>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+    <% else %>
+      <div class="flex items-center justify-center h-full text-gray-500">
+        <div class="text-center">
+          <svg class="mx-auto h-8 w-8 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" 
+                  d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
+          </svg>
+          <p class="text-sm">No changes recorded for this table</p>
+          <p class="text-xs text-gray-400 mt-1">Changes will appear here when database operations are tracked</p>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
+<script>
+function tableView() {
+  return {
+    searchTerm: '',
+    selectedSession: '',
+    selectedOperation: '',
+    selectedRecord: null,
+    records: <%= (@records || {}).to_json.html_safe %>,
+    
+    get flatRecords() {
+      const flat = [];
+      Object.entries(this.records).forEach(([recordId, changes]) => {
+        changes.forEach(change => {
+          flat.push({
+            id: `${recordId}-${change.timestamp}`,
+            record_id: recordId,
+            operation: change.operation,
+            timestamp: change.timestamp,
+            session_name: change.session_name,
+            record_snapshot: change.record_snapshot,
+            previous_values: change.previous_values,
+            changes: change.changes
+          });
+        });
+      });
+      return flat.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
+    },
+    
+    get filteredRecords() {
+      return this.flatRecords.filter(record => {
+        if (this.searchTerm) {
+          const searchLower = this.searchTerm.toLowerCase();
+          const recordText = JSON.stringify(record.record_snapshot || {}).toLowerCase();
+          if (!recordText.includes(searchLower)) return false;
+        }
+        
+        if (this.selectedSession && !record.session_name.includes(this.selectedSession)) return false;
+        if (this.selectedOperation && record.operation !== this.selectedOperation) return false;
+        
+        return true;
+      });
+    },
+    
+    get totalChanges() {
+      return this.flatRecords.length;
+    },
+    
+    selectRecord(record) {
+      this.selectedRecord = this.selectedRecord?.id === record.id ? null : record;
+    },
+    
+    formatTime(timestamp) {
+      return new Date(timestamp).toLocaleTimeString('en-US', { 
+        hour12: false, 
+        hour: '2-digit', 
+        minute: '2-digit', 
+        second: '2-digit' 
+      });
+    },
+    
+    exportData() {
+      const data = this.filteredRecords.map(record => ({
+        record_id: record.record_id,
+        operation: record.operation,
+        timestamp: record.timestamp,
+        session: record.session_name,
+        ...record.record_snapshot
+      }));
+      
+      if (data.length === 0) return;
+      
+      const headers = ['Record ID', 'Operation', 'Timestamp', 'Session', ...Object.keys(data[0]).filter(k => !['record_id', 'operation', 'timestamp', 'session'].includes(k))];
+      const csv = [
+        headers,
+        ...data.map(row => headers.map(h => {
+          const key = h.toLowerCase().replace(' ', '_');
+          return row[key] || row[h] || '';
+        }))
+      ].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 = `table-<%= @table_name %>-changes.csv`;
+      a.click();
+      URL.revokeObjectURL(url);
+    },
+    
+    refreshData() {
+      window.location.reload();
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,123 @@
+<%# Tables Index Page %>
+<div class="h-full flex flex-col">
+  <%= render 'dbwatcher/shared/header', title: 'Database Tables', subtitle: "#{@tables.count} tables" %>
+  
+  <%= render 'dbwatcher/shared/tab_bar', tabs: [
+    { name: 'All Tables', active: true },
+    { name: 'Modified', active: false },
+    { name: 'Recent', active: false }
+  ] %>
+  
+  <!-- Toolbar -->
+  <div class="h-8 bg-gray-100 border-b border-gray-300 flex items-center px-4 gap-2">
+    <input type="text" placeholder="Filter tables..." 
+           class="compact-input flex-1 max-w-xs"
+           x-data="" x-model="searchTerm" 
+           @input="filterTables()">
+    <select class="compact-select">
+      <option>All Types</option>
+      <option>User Tables</option>
+      <option>System Tables</option>
+    </select>
+    <button class="compact-button bg-blue-medium text-white hover:bg-blue-dark">
+      Refresh
+    </button>
+  </div>
+  
+  <!-- Content Area -->
+  <div class="flex-1 overflow-auto">
+    <table class="compact-table w-full">
+      <thead>
+        <tr>
+          <th class="text-left">Table Name</th>
+          <th class="text-center">Changes</th>
+          <th class="text-center">Last Modified</th>
+          <th class="text-center">Operations</th>
+          <th class="text-right">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @tables.each do |table| %>
+          <% next if table[:name].nil? || table[:name].empty? %>
+          <tr class="hover:bg-gray-50">
+            <td class="font-medium text-navy-dark">
+              <div class="flex items-center gap-2">
+                <svg class="w-3 h-3 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11 4a1 1 0 10-2 0v4a1 1 0 102 0V7zm-3 1a1 1 0 10-2 0v3a1 1 0 102 0V8zM8 9a1 1 0 00-2 0v2a1 1 0 102 0V9z" clip-rule="evenodd"/>
+                </svg>
+                <%= link_to table[:name], table_path(table[:name]), class: "text-navy-dark hover:text-blue-medium" %>
+              </div>
+            </td>
+            <td class="text-center">
+              <% if table[:change_count] > 0 %>
+                <span class="badge bg-blue-medium text-white"><%= table[:change_count] %></span>
+              <% else %>
+                <span class="text-gray-400">-</span>
+              <% end %>
+            </td>
+            <td class="text-center text-gray-600">
+              <% if table[:last_change] %>
+                <%= Time.parse(table[:last_change].to_s).strftime("%m/%d %H:%M") rescue table[:last_change] %>
+              <% else %>
+                <span class="text-gray-400">No changes</span>
+              <% end %>
+            </td>
+            <td class="text-center">
+              <div class="flex gap-1 justify-center">
+                <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>
+            </td>
+            <td class="text-right">
+              <div class="flex gap-1 justify-end">
+                <%= link_to changes_table_path(table[:name]), 
+                    class: "compact-button bg-gray-500 text-white hover:bg-gray-600", 
+                    title: "View Changes" do %>
+                  <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+                          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+                  </svg>
+                <% end %>
+                <%= link_to table_path(table[:name]), 
+                    class: "compact-button bg-navy-dark text-white hover:bg-blue-medium", 
+                    title: "Table Details" do %>
+                  <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                  </svg>
+                <% end %>
+              </div>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+  
+  <!-- Status Bar -->
+  <div class="h-6 bg-gray-100 border-t border-gray-300 flex items-center px-4 text-xs text-gray-600">
+    <%= @tables.count %> tables total • 
+    <%= @tables.count { |t| t[:change_count] > 0 } %> with changes •
+    Last updated: <%= Time.current.strftime("%H:%M:%S") %>
+  </div>
+</div>
+
+<script>
+function filterTables() {
+  // Simple table filtering functionality
+  const searchTerm = document.querySelector('input[x-model="searchTerm"]').value.toLowerCase();
+  const rows = document.querySelectorAll('tbody tr');
+  
+  rows.forEach(row => {
+    const tableName = row.querySelector('td').textContent.toLowerCase();
+    if (tableName.includes(searchTerm)) {
+      row.style.display = '';
+    } else {
+      row.style.display = 'none';
+    }
+  });
+}
+</script>

data/app/views/dbwatcher/tables/show.html.erb

@@ -0,0 +1,86 @@
+<!-- DBWatcher Table Detail View -->
+<div class="h-full flex flex-col">
+  <!-- Compact Header -->
+  <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="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11 4a1 1 0 10-2 0v4a1 1 0 102 0V7zm-3 1a1 1 0 10-2 0v3a1 1 0 102 0V8zM8 9a1 1 0 00-2 0v2a1 1 0 102 0V9z" clip-rule="evenodd"/>
+    </svg>
+    <h1 class="text-sm font-medium">Table: <%= @table_name %></h1>
+    
+    <!-- Quick Stats -->
+    <div class="ml-auto flex items-center gap-4 text-xs">
+      <span class="text-blue-light"><%= @changes.count %> changes</span>
+      <span class="text-gold-light"><%= @sessions.count %> sessions</span>
+    </div>
+  </div>
+  
+  <!-- Tab Bar -->
+  <div class="tab-bar">
+    <div class="tab-item active">Changes</div>
+    <div class="tab-item">Schema</div>
+    <div class="tab-item">Statistics</div>
+  </div>
+  
+  <!-- Content -->
+  <div class="flex-1 overflow-auto p-4">
+    <% if @changes.any? %>
+      <!-- Changes Table -->
+      <div class="bg-white rounded border border-gray-300">
+        <table class="compact-table w-full">
+          <thead>
+            <tr>
+              <th class="text-left">Record ID</th>
+              <th class="text-left">Operation</th>
+              <th class="text-left">Session</th>
+              <th class="text-left">Timestamp</th>
+              <th class="text-right">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% @changes.each do |change| %>
+              <tr class="hover:bg-gray-50">
+                <td class="font-mono text-xs"><%= change["record_id"] || change[:record_id] %></td>
+                <td>
+                  <% operation = change[:operation] %>
+                  <span class="badge <%= case operation
+                    when 'INSERT' then 'badge-insert'
+                    when 'UPDATE' then 'badge-update'
+                    when 'DELETE' then 'badge-delete'
+                    else 'bg-gray-500 text-white'
+                    end %>">
+                    <%= operation %>
+                  </span>
+                </td>
+                <td class="text-xs text-gray-600 truncate max-w-xs">
+                  <%= change[:session_name] || change[:session_id] %>
+                </td>
+                <td class="text-xs text-gray-500">
+                  <% timestamp = change[:timestamp] %>
+                  <%= Time.parse(timestamp.to_s).strftime("%Y-%m-%d %H:%M:%S") rescue timestamp %>
+                </td>
+                <td class="text-right">
+                  <%= link_to "View Details", changes_table_path(@table_name), 
+                      class: "text-xs text-indigo-600 hover:text-indigo-900" %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+      
+    <% else %>
+      <!-- Empty State -->
+      <div class="text-center py-12">
+        <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="currentColor" viewBox="0 0 20 20">
+          <path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11 4a1 1 0 10-2 0v4a1 1 0 102 0V7zm-3 1a1 1 0 10-2 0v3a1 1 0 102 0V8zM8 9a1 1 0 00-2 0v2a1 1 0 102 0V9z" clip-rule="evenodd"/>
+        </svg>
+        <h3 class="text-lg font-medium text-gray-900 mb-2">No Changes Found</h3>
+        <p class="text-gray-500">This table hasn't been modified in any tracked sessions.</p>
+        <div class="mt-4">
+          <%= link_to "Back to Tables", tables_path, 
+              class: "text-indigo-600 hover:text-indigo-900" %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>