dbwatcher 1.1.0 → 1.1.2

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

@@ -1,265 +0,0 @@
-<!-- Changes Content - Hybrid Tabulator Implementation with Original UI Structure -->
-<div class="h-full"
-     x-data="changesTableHybrid({ sessionId: '<%= @session.id %>' })">
-
-  <!-- Loading State -->
-  <div x-show="loading" class="flex items-center justify-center h-64">
-    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
-    <span class="ml-2 text-gray-600">Loading changes...</span>
-  </div>
-
-  <!-- Error State -->
-  <div x-show="error" class="p-4 bg-red-50 border border-red-200 rounded">
-    <p class="text-red-700" x-text="error"></p>
-    <button @click="loadChangesData()" class="mt-2 text-red-600 underline">Retry</button>
-  </div>
-
-  <!-- No Data State -->
-  <div x-show="!loading && !error && Object.keys(tableData).length === 0"
-       class="flex flex-col items-center justify-center h-64">
-    <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-    </svg>
-    <p class="mt-2 text-gray-500">No changes data available</p>
-  </div>
-
-  <!-- Multiple Tables - Original UI Structure -->
-  <template x-if="!loading && !error && Object.keys(tableData).length > 0">
-    <div class="h-full overflow-auto">
-      <template x-for="[tableName, tableInfo] in Object.entries(tableData)" :key="tableName">
-        <div class="border-b border-gray-300" x-data="{ expanded: true }">
-          <!-- Table Header with Column Controls -->
-          <div class="bg-gray-100 px-3 py-2 flex items-center cursor-pointer"
-               @click="expanded = !expanded"
-               :id="`table-${tableName}`">
-            <svg class="w-3 h-3 mr-2 transition-transform"
-                 :class="{ 'rotate-90': expanded }"
-                 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 gap-2 mr-4">
-              <template x-for="[op, count] in Object.entries(tableInfo.operations || {})" :key="op">
-                <span x-show="count > 0" class="badge" :class="`badge-${op.toLowerCase()}`" x-text="count"></span>
-              </template>
-            </div>
-
-            <!-- Column Visibility Button -->
-            <button @click.stop="toggleColumnSelector(tableName)"
-                    class="text-xs bg-white border border-gray-300 px-2 py-1 rounded hover:bg-gray-50 relative">
-              Columns
-            </button>
-          </div>
-
-          <!-- Column Selector Dropdown -->
-          <div x-show="showColumnSelector === tableName"
-               x-transition
-               @click.away="showColumnSelector = null"
-               class="absolute z-50 bg-white border border-gray-300 rounded shadow-lg p-3 max-h-64 overflow-auto"
-               style="right: 1rem; margin-top: -2px;">
-            <div class="text-xs font-medium mb-2">Select Visible Columns:</div>
-            <div class="space-y-1 min-w-48">
-              <template x-for="column in tableInfo.columns" :key="column">
-                <label class="flex items-center text-xs hover:bg-gray-50 p-1 rounded">
-                  <input type="checkbox"
-                         :checked="isColumnVisible(tableName, column)"
-                         @change="toggleColumnVisibility(tableName, column)"
-                         class="mr-2">
-                  <span class="flex-1" x-text="column"></span>
-                </label>
-              </template>
-            </div>
-            <div class="mt-2 pt-2 border-t border-gray-200 flex gap-1">
-              <button @click="selectAllColumns(tableName)"
-                      class="text-xs bg-blue-600 text-white px-2 py-1 rounded hover:bg-blue-700">All</button>
-              <button @click="selectNoneColumns(tableName)"
-                      class="text-xs bg-gray-600 text-white px-2 py-1 rounded hover:bg-gray-700">None</button>
-            </div>
-          </div>
-
-          <!-- Tabulator Container for This Table -->
-          <div x-show="expanded" x-collapse>
-            <div :id="`changes-table-${tableName}`" class="table-container"></div>
-          </div>
-        </div>
-      </template>
-    </div>
-  </template>
-</div>
-
-<!-- Custom Tabulator Styles -->
-<style>
-  /* Override Tabulator styles to match current design */
-  .tabulator {
-    font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace !important;
-    font-size: 12px !important;
-    border: none;
-    background: white;
-    border-collapse: separate;
-    border-spacing: 0;
-  }
-
-  .tabulator .tabulator-header {
-    background: #f3f3f3 !important;
-    border-bottom: 2px solid #e8e8e8 !important;
-    font-size: 11px !important;
-  }
-
-  .tabulator .tabulator-header .tabulator-col {
-    background: #f3f3f3 !important;
-    border-right: 1px solid #e8e8e8 !important;
-    padding: 4px 8px !important;
-    font-weight: 500 !important;
-    text-transform: none !important;
-    height: 32px !important;
-    text-align: left;
-    position: sticky;
-    top: 0;
-    z-index: 10;
-  }
-
-  .tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
-    background: white !important;
-    border-bottom: 1px solid #f0f0f0 !important;
-    min-height: auto;
-  }
-
-  .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover {
-    background: #f3f4f6 !important;
-  }
-
-  .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
-    border-right: 1px solid #f0f0f0 !important;
-    padding: 2px 8px !important;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    vertical-align: top;
-    font-size: 12px !important;
-    height: auto;
-    min-height: 28px;
-  }
-
-  /* Override for UPDATE operation cells to allow multi-line */
-  .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell:has(.space-y-1) {
-    white-space: normal;
-    height: auto;
-    padding: 4px 8px !important;
-  }
-
-  /* Maintain sticky columns exactly as current */
-  .tabulator .tabulator-header .tabulator-col.sticky-left-0 {
-    position: sticky !important;
-    left: 0 !important;
-    z-index: 20 !important;
-    background: #f3f3f3 !important;
-    box-shadow: 2px 0 4px rgba(0,0,0,0.1) !important;
-  }
-
-  .tabulator .tabulator-header .tabulator-col.sticky-left-1 {
-    position: sticky !important;
-    left: 60px !important;
-    z-index: 19 !important;
-    background: #f3f3f3 !important;
-    box-shadow: 2px 0 4px rgba(0,0,0,0.1) !important;
-  }
-
-  .tabulator .tabulator-header .tabulator-col.sticky-left-2 {
-    position: sticky !important;
-    left: 108px !important;
-    z-index: 18 !important;
-    background: #f3f3f3 !important;
-    box-shadow: 2px 0 4px rgba(0,0,0,0.1) !important;
-  }
-
-  .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.sticky-left-0 {
-    position: sticky !important;
-    left: 0 !important;
-    background: white !important;
-    z-index: 5 !important;
-    box-shadow: 2px 0 4px rgba(0,0,0,0.05) !important;
-  }
-
-  .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.sticky-left-1 {
-    position: sticky !important;
-    left: 60px !important;
-    background: white !important;
-    z-index: 4 !important;
-    box-shadow: 2px 0 4px rgba(0,0,0,0.05) !important;
-  }
-
-  .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.sticky-left-2 {
-    position: sticky !important;
-    left: 108px !important;
-    background: white !important;
-    z-index: 3 !important;
-    box-shadow: 2px 0 4px rgba(0,0,0,0.05) !important;
-  }
-
-  .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover .tabulator-cell.sticky-left-0,
-  .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover .tabulator-cell.sticky-left-1,
-  .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover .tabulator-cell.sticky-left-2 {
-    background: #f9fafb !important;
-  }
-
-  /* Operation badges */
-  .badge-insert { background: #10b981; color: white; }
-  .badge-update { background: #6CADDF; color: white; }
-  .badge-delete { background: #ef4444; color: white; }
-  .badge-select { background: #6b7280; color: white; }
-
-  .badge {
-    padding: 1px 6px;
-    font-size: 10px;
-    border-radius: 3px;
-    font-weight: 500;
-    text-transform: uppercase;
-    display: inline-block;
-    width: 18px;
-    height: 18px;
-    line-height: 18px;
-    text-align: center;
-  }
-
-  /* Row detail styling */
-  .row-detail {
-    border-top: 1px solid #e5e7eb;
-    background: #f9fafb;
-    padding: 0;
-  }
-
-  .row-detail td {
-    padding: 8px !important;
-    vertical-align: top !important;
-    border-right: 1px solid #e5e7eb !important;
-  }
-
-  .row-detail h4 {
-    font-weight: 600;
-    color: #374151;
-    margin-bottom: 8px;
-  }
-
-  /* Maintain sticky positioning in expanded rows - combined first 3 columns */
-  .row-detail .sticky-left-0 {
-    position: sticky !important;
-    left: 0 !important;
-    z-index: 5 !important;  /* Lower z-index to prevent overlay issues */
-    background: #f9fafb !important;  /* Match row-detail background */
-    box-shadow: 2px 0 4px rgba(0,0,0,0.1) !important;
-    width: 268px !important;
-    min-width: 268px !important;
-  }
-
-  /* Expand button styling */
-  .expand-btn {
-    padding: 2px;
-    border-radius: 2px;
-    transition: all 0.15s ease;
-  }
-
-  .expand-btn:hover {
-    background-color: #f3f4f6;
-  }
-</style>

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

@@ -1,12 +0,0 @@
-<!-- Tab Bar -->
-<div class="tab-bar">
-  <div class="tab-item"
-       :class="{ active: activeTab === 'changes' }"
-       @click="setActiveTab('changes')">Changes</div>
-  <div class="tab-item"
-       :class="{ active: activeTab === 'summary' }"
-       @click="setActiveTab('summary')">Summary</div>
-  <div class="tab-item"
-       :class="{ active: activeTab === 'diagrams' }"
-       @click="setActiveTab('diagrams')">Diagrams</div>
-</div>

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

@@ -1,21 +0,0 @@
-<div class="h-full flex flex-col">
-  <%= render partial: 'session_header', locals: { session: @session } %>
-
-  <!-- Tab Bar with URL-based navigation -->
-  <div class="tab-bar">
-    <%= link_to changes_session_path(@session.id), class: "tab-item active" do %>
-      Changes
-    <% end %>
-    <%= link_to summary_session_path(@session.id), class: "tab-item" do %>
-      Summary
-    <% end %>
-    <%= link_to diagrams_session_path(@session.id), class: "tab-item" do %>
-      Diagrams
-    <% end %>
-  </div>
-
-  <!-- Changes Content -->
-  <div class="flex-1 overflow-auto">
-    <%= render partial: 'changes_tab', locals: { tables_summary: @tables_summary } %>
-  </div>
-</div>

data/app/views/dbwatcher/sessions/components/changes/_filters.html.erb

@@ -1,44 +0,0 @@
-<div class="flex flex-wrap items-center gap-4">
-  <div class="flex items-center gap-2">
-    <label for="table-filter" class="text-sm font-medium text-gray-700">Table:</label>
-    <select id="table-filter"
-            x-model="filters.table"
-            @change="applyFilters()"
-            class="compact-select">
-      <option value="">All Tables</option>
-      <% if defined?(tables_summary) && tables_summary %>
-        <% tables_summary.keys.each do |table_name| %>
-          <option value="<%= table_name %>" <%= 'selected' if filters && filters[:table] == table_name %>><%= table_name %></option>
-        <% end %>
-      <% end %>
-    </select>
-  </div>
-
-  <div class="flex items-center gap-2">
-    <label for="operation-filter" class="text-sm font-medium text-gray-700">Operation:</label>
-    <select id="operation-filter"
-            x-model="filters.operation"
-            @change="applyFilters()"
-            class="compact-select">
-      <option value="">All Operations</option>
-      <option value="INSERT" <%= 'selected' if filters && filters[:operation] == 'INSERT' %>>INSERT</option>
-      <option value="UPDATE" <%= 'selected' if filters && filters[:operation] == 'UPDATE' %>>UPDATE</option>
-      <option value="DELETE" <%= 'selected' if filters && filters[:operation] == 'DELETE' %>>DELETE</option>
-    </select>
-  </div>
-
-  <div class="flex items-center gap-2">
-    <button @click="clearFilters()"
-            class="text-sm text-gray-500 hover:text-gray-700 underline">
-      Clear Filters
-    </button>
-  </div>
-
-  <div class="ml-auto flex items-center gap-2" x-show="loading">
-    <svg class="animate-spin h-4 w-4 text-blue-500" fill="none" viewBox="0 0 24 24">
-      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-    </svg>
-    <span class="text-sm text-gray-500">Loading...</span>
-  </div>
-</div>

data/app/views/dbwatcher/sessions/components/changes/_table_list.html.erb

@@ -1,96 +0,0 @@
-<!-- Table List Navigation -->
-<div class="bg-white border-b border-gray-200 p-4">
-  <h3 class="text-sm font-medium text-gray-900 mb-3">Tables with Changes</h3>
-  <div class="flex flex-wrap gap-2">
-    <template x-for="[tableName, summary] in Object.entries(tablesData)" :key="tableName">
-      <button
-        @click="scrollToTable(tableName)"
-        class="px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded-md transition-colors">
-        <span x-text="tableName"></span>
-        <span class="ml-1 text-gray-500" x-text="`(${Object.values(summary.changes || {}).reduce((sum, count) => sum + count, 0)})`"></span>
-      </button>
-    </template>
-  </div>
-</div>
-
-<!-- Table Details -->
-<template x-for="[tableName, summary] in Object.entries(tablesData)" :key="tableName">
-  <div :id="`table-${tableName}`" class="border-b border-gray-300" :data-table-name="tableName">
-    <!-- Table Header -->
-    <div class="bg-gray-50 px-4 py-3 border-b border-gray-200">
-      <div class="flex items-center justify-between">
-        <div class="flex items-center space-x-3">
-          <h4 class="text-sm font-medium text-gray-900" x-text="tableName"></h4>
-          <div class="flex space-x-2">
-            <template x-for="[operation, count] in Object.entries(summary.changes || {})" :key="operation">
-              <span :class="getOperationClass(operation)" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium">
-                <span x-text="`${operation}: ${count}`"></span>
-              </span>
-            </template>
-          </div>
-        </div>
-        <button
-          @click="toggleColumnSelector(tableName)"
-          class="text-sm text-blue-600 hover:text-blue-800">
-          Configure Columns
-        </button>
-      </div>
-    </div>
-
-    <!-- Column Selector -->
-    <div x-show="showColumnSelector === tableName" x-collapse class="bg-gray-50 px-4 py-3 border-b border-gray-200">
-      <div class="flex items-center justify-between mb-2">
-        <span class="text-sm font-medium text-gray-700">Column Visibility</span>
-        <div class="space-x-2">
-          <button @click="selectAllColumns(tableName)" class="text-xs text-blue-600 hover:text-blue-800">All</button>
-          <button @click="selectNoneColumns(tableName)" class="text-xs text-blue-600 hover:text-blue-800">None</button>
-        </div>
-      </div>
-      <div class="grid grid-cols-4 gap-2">
-        <template x-for="[column, visible] in Object.entries(tableColumns[tableName] || {})" :key="column">
-          <label class="flex items-center space-x-2">
-            <input
-              type="checkbox"
-              :checked="visible"
-              @change="tableColumns[tableName][column] = $event.target.checked"
-              class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
-            <span class="text-xs text-gray-700" x-text="column"></span>
-          </label>
-        </template>
-      </div>
-    </div>
-
-    <!-- Table Content -->
-    <div class="overflow-auto">
-      <table class="compact-table w-full">
-        <thead>
-          <tr class="sticky top-0 bg-gray-100 z-10">
-            <th class="text-center w-16 sticky left-0 bg-gray-100 z-20 border-r border-gray-300">
-              <span class="text-xs">Op</span>
-            </th>
-            <th class="text-left w-24 sticky bg-gray-100 z-20 border-r border-gray-300">Time</th>
-            <template x-for="[column, visible] in Object.entries(tableColumns[tableName] || {})" :key="column">
-              <th x-show="visible" class="text-left min-w-32 px-2" x-text="column"></th>
-            </template>
-          </tr>
-        </thead>
-        <tbody>
-          <template x-for="(change, index) in summary.changes || []" :key="index">
-            <tr class="hover:bg-gray-50">
-              <td class="text-center sticky left-0 bg-white z-10">
-                <span :class="getOperationClass(change.operation)" class="inline-block w-2 h-2 rounded-full"></span>
-              </td>
-              <td class="sticky bg-white z-10" x-text="formatTimestamp(change.timestamp)"></td>
-              <template x-for="[column, visible] in Object.entries(tableColumns[tableName] || {})" :key="column">
-                <td x-show="visible" class="px-2">
-                  <span x-text="change.data?.[column] || '--'"></span>
-                  <span x-show="hasColumnChanges(change, column)" class="ml-1 text-xs text-orange-600">*</span>
-                </td>
-              </template>
-            </tr>
-          </template>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</template>

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

@@ -1,21 +0,0 @@
-<div class="h-full flex flex-col">
-  <%= render partial: 'session_header', locals: { session: @session } %>
-
-  <!-- Tab Bar with URL-based navigation -->
-  <div class="tab-bar">
-    <%= link_to changes_session_path(@session.id), class: "tab-item" do %>
-      Changes
-    <% end %>
-    <%= link_to summary_session_path(@session.id), class: "tab-item" do %>
-      Summary
-    <% end %>
-    <%= link_to diagrams_session_path(@session.id), class: "tab-item active" do %>
-      Diagrams
-    <% end %>
-  </div>
-
-  <!-- Diagrams Content -->
-  <div class="flex-1 overflow-auto">
-    <%= render partial: 'diagrams_tab' %>
-  </div>
-</div>

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

@@ -1,8 +0,0 @@
-<div class="h-full flex flex-col" x-data="sessionNavigation('<%= @session.id %>')">
-  <%= render 'dbwatcher/sessions/shared/session_header', session: @session %>
-  <%= render 'dbwatcher/sessions/shared/navigation' %>
-
-  <div class="flex-1 overflow-auto">
-    <%= yield %>
-  </div>
-</div>

data/app/views/dbwatcher/sessions/shared/_navigation.html.erb

@@ -1,35 +0,0 @@
-<nav class="bg-white border-b border-gray-200" x-data="sessionNavigation('<%= @session.id %>')">
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="flex justify-between h-16">
-      <div class="flex">
-        <div class="flex-shrink-0 flex items-center">
-          <h1 class="text-xl font-semibold text-gray-900">
-            Session <%= @session.id %>
-          </h1>
-        </div>
-        <div class="ml-6 flex space-x-8">
-          <a href="<%= changes_session_path(@session.id) %>"
-             @click.prevent="$store.session.setView('changes')"
-             :class="$store.session.currentView === 'changes' ? 'border-blue-500 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
-             class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors">
-            Changes
-          </a>
-
-          <a href="<%= summary_session_path(@session.id) %>"
-             @click.prevent="$store.session.setView('summary')"
-             :class="$store.session.currentView === 'summary' ? 'border-blue-500 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
-             class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors">
-            Summary
-          </a>
-
-          <a href="<%= diagrams_session_path(@session.id) %>"
-             @click.prevent="$store.session.setView('diagrams')"
-             :class="$store.session.currentView === 'diagrams' ? 'border-blue-500 text-gray-900' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
-             class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors">
-            Diagrams
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</nav>

data/app/views/dbwatcher/sessions/shared/_session_header.html.erb

@@ -1,25 +0,0 @@
-<div class="bg-white border-b border-gray-200 px-4 py-3">
-  <div class="flex items-center justify-between">
-    <div class="flex items-center space-x-4">
-      <h1 class="text-xl font-semibold text-gray-900">
-        Session <%= display_session_id(session.id) %>
-      </h1>
-      <div class="text-sm text-gray-500">
-        <% if session.started_at %>
-          <% started_time = session.started_at.is_a?(String) ? session.started_at : session.started_at.strftime('%Y-%m-%d %H:%M:%S') %>
-          <span>Started: <%= started_time %></span>
-        <% else %>
-          <span>Started: Unknown</span>
-        <% end %>
-        <% if session.ended_at %>
-          <% ended_time = session.ended_at.is_a?(String) ? session.ended_at : session.ended_at.strftime('%Y-%m-%d %H:%M:%S') %>
-          <span class="ml-4">Ended: <%= ended_time %></span>
-        <% end %>
-      </div>
-    </div>
-
-    <div class="flex items-center space-x-3">
-      <%= link_to 'All Sessions', sessions_path, class: 'text-sm text-blue-600 hover:text-blue-800' %>
-    </div>
-  </div>
-</div>

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

@@ -1,21 +0,0 @@
-<div class="h-full flex flex-col">
-  <%= render partial: 'session_header', locals: { session: @session } %>
-
-  <!-- Tab Bar with URL-based navigation -->
-  <div class="tab-bar">
-    <%= link_to changes_session_path(@session.id), class: "tab-item" do %>
-      Changes
-    <% end %>
-    <%= link_to summary_session_path(@session.id), class: "tab-item active" do %>
-      Summary
-    <% end %>
-    <%= link_to diagrams_session_path(@session.id), class: "tab-item" do %>
-      Diagrams
-    <% end %>
-  </div>
-
-  <!-- Summary Content -->
-  <div class="flex-1 overflow-auto">
-    <%= render partial: 'summary_tab', locals: { tables_summary: @tables_summary } %>
-  </div>
-</div>