dbwatcher 1.1.1 → 1.1.3

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

@@ -13,3 +13,8 @@
 @import "components/forms";
 @import "components/badges";
 @import "components/diagrams";
+@import "components/tabulator";
+@import "components/timeline";
+
+// Vendor overrides - must be imported after our components
+@import "vendor/tabulator_overrides";

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

@@ -3,27 +3,7 @@
  * Operation and status indicators
  */
 
-/* Status badges */
-.badge-insert { 
-  background: var(--status-insert); 
-  color: white; 
-}
-
-.badge-update { 
-  background: var(--status-update); 
-  color: white; 
-}
-
-.badge-delete { 
-  background: var(--status-delete); 
-  color: white; 
-}
-
-.badge-select { 
-  background: var(--status-select); 
-  color: white; 
-}
-
+/* Base badge style */
 .badge {
   padding: 1px 6px;
   font-size: 10px;
@@ -31,8 +11,73 @@
   font-weight: 500;
   text-transform: uppercase;
   display: inline-block;
-  width: 18px;
+  min-width: 18px;
   height: 18px;
   line-height: 18px;
   text-align: center;
-}
+}
+
+/* Operation type badges */
+.badge-insert {
+  background: var(--status-insert, #10b981);
+  color: white;
+}
+
+.badge-update {
+  background: var(--status-update, #6CADDF);
+  color: white;
+}
+
+.badge-delete {
+  background: var(--status-delete, #ef4444);
+  color: white;
+}
+
+.badge-select {
+  background: var(--status-select, #6b7280);
+  color: white;
+}
+
+/* Status badges */
+.badge-success {
+  background: var(--status-insert, #10b981);
+  color: white;
+}
+
+.badge-primary {
+  background: var(--blue-medium, #3b82f6);
+  color: white;
+}
+
+.badge-warning {
+  background: var(--status-warning, #f59e0b);
+  color: white;
+}
+
+.badge-error {
+  background: var(--status-delete, #ef4444);
+  color: white;
+}
+
+/* Badge sizes */
+.badge-sm {
+  font-size: 9px;
+  padding: 0px 4px;
+  height: 16px;
+  line-height: 16px;
+}
+
+.badge-lg {
+  font-size: 11px;
+  padding: 2px 8px;
+  height: 20px;
+  line-height: 16px;
+}
+
+/* Changes table specific badges */
+.changes-table-badge {
+  width: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -12,6 +12,7 @@
   border-spacing: 0;
 }
 
+/* Header styles */
 .compact-table th {
   padding: 4px 8px;
   font-weight: 500;
@@ -27,6 +28,18 @@
   height: 32px;
 }
 
+/* Cell styles */
+.compact-table td {
+  padding: 2px 8px;
+  border-right: 1px solid var(--border-light);
+  border-bottom: 1px solid var(--border-light);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: top;
+}
+
+/* Sticky columns */
 /* Enhanced sticky header styling */
 .compact-table th.sticky-left-0 {
   position: sticky;
@@ -49,16 +62,6 @@
   box-shadow: 2px 0px 3px rgba(0,0,0,0.05);
 }
 
-.compact-table td {
-  padding: 2px 8px;
-  border-right: 1px solid var(--border-light);
-  border-bottom: 1px solid var(--border-light);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: top;
-}
-
 /* Enhanced sticky cell styling */
 .compact-table td.sticky-left-0 {
   position: sticky;
@@ -84,19 +87,6 @@
   box-shadow: 2px 0px 3px rgba(0,0,0,0.05);
 }
 
-/* Special cell formatting */
-.compact-table td.highlight-change {
-  background-color: var(--highlight-change);
-}
-
-.compact-table td.highlight-new {
-  color: #047857;
-}
-
-.compact-table td.highlight-deleted {
-  color: #b91c1c;
-}
-
 /* Row styles */
 .compact-table tr:hover td:not(.sticky-left-0):not(.sticky-left-1):not(.sticky-left-2) {
   background-color: rgba(243, 244, 246, 0.7);
@@ -118,7 +108,7 @@
   background-color: #e6f3ff;
 }
 
-/* Smart column width distribution */
+/* Text overflow handling */
 .compact-table th,
 .compact-table td {
   overflow: hidden;
@@ -126,7 +116,7 @@
   white-space: nowrap;
 }
 
-/* Fixed widths for sticky columns only */
+/* Fixed widths for common columns */
 .compact-table th:first-child,
 .compact-table td:first-child {
   width: 60px;
@@ -151,12 +141,79 @@
   font-size: 11px;
 }
 
+/* Sessions table specific overrides */
+.sessions-table th:nth-child(2),
+.sessions-table td:nth-child(2) {
+  width: 22%;
+  min-width: 160px;
+  max-width: 260px;
+  text-align: left;
+  padding-left: 16px;
+}
+
+/* Enhanced sessions table styling */
+.sessions-table tr {
+  border-bottom: 1px solid var(--border-light);
+  transition: all 0.15s ease;
+}
+
+.sessions-table tr:hover {
+  background-color: rgba(230, 243, 255, 0.5);
+}
+
+.sessions-table td {
+  padding: 6px 8px;
+  vertical-align: middle;
+}
+
+.sessions-table td:first-child .font-mono {
+  color: var(--navy-dark);
+  font-weight: 500;
+  background: var(--gray-50);
+  padding: 2px 4px;
+  border-radius: 3px;
+  border: 1px solid var(--border-medium);
+  display: inline-block;
+}
+
+.sessions-table .badge {
+  min-width: 60px;
+  width: auto;
+  height: auto;
+  padding: 2px 8px;
+}
+
+.sessions-table .actions-cell {
+  width: 80px;
+}
+
+.sessions-table .actions-cell .compact-button {
+  transition: transform 0.15s ease, background-color 0.15s ease;
+}
+
+.sessions-table .actions-cell .compact-button:hover {
+  transform: translateY(-1px);
+}
+
 /* Font styling for specific column types */
 .compact-table .text-right {
   font-family: monospace;
 }
 
+/* Special cell formatting */
+.compact-table td.highlight-change {
+  background-color: var(--highlight-change);
+}
+
+.compact-table td.highlight-new {
+  color: #047857;
+}
+
+.compact-table td.highlight-deleted {
+  color: #b91c1c;
+}
+
 /* Highlight colors */
 .highlight-change { background: var(--highlight-change); }
 .highlight-new { background: var(--highlight-new); }
-.highlight-deleted { background: var(--highlight-deleted); }
+.highlight-deleted { background: var(--highlight-deleted); }

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

@@ -2,7 +2,7 @@
  * Diagram Component Styles
  */
 
-// Code view styles
+/* Code view container */
 .diagram-code-view {
   position: relative;
   height: 100%;
@@ -20,7 +20,7 @@
   }
 }
 
-// Mermaid diagram container
+/* Mermaid diagram container */
 [x-ref="diagramContainer"] {
   .mermaid {
     overflow: auto;
@@ -28,7 +28,7 @@
   }
 }
 
-// Code container scrollbar styling
+/* Code container scrollbar styling */
 pre[x-ref="codeContainer"] {
   &::-webkit-scrollbar {
     width: 8px;

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

@@ -52,4 +52,13 @@
   background: white;
   color: var(--navy-dark);
   font-weight: 500;
+}
+
+/* Tab content styles */
+.tab-content {
+  display: none;
+}
+
+.tab-content.active {
+  display: block;
 }

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

@@ -0,0 +1,248 @@
+// Tabulator Component Styles
+// Custom styling for the Tabulator.js library used in DBWatcher
+
+// Base Tabulator styling
+.tabulator {
+  font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
+  font-size: 12px;
+  border: none;
+  background: white;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin: 0;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  // Header styling
+  .tabulator-header {
+    background: #f3f3f3;
+    border-bottom: 2px solid #e8e8e8;
+    font-size: 11px;
+
+    .tabulator-col {
+      background: #f3f3f3;
+      border-right: 1px solid #e8e8e8;
+      padding: 4px 8px;
+      font-weight: 500;
+      text-transform: none;
+      height: 32px;
+      text-align: left;
+      position: sticky;
+      top: 0;
+      z-index: 10;
+
+      // Sticky columns in header
+      &.sticky-left-0 {
+        position: sticky;
+        left: 0;
+        z-index: 20;
+        background: #f3f3f3;
+        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+      }
+
+      &.sticky-left-1 {
+        position: sticky;
+        left: 60px;
+        z-index: 19;
+        background: #f3f3f3;
+        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+      }
+
+      &.sticky-left-2 {
+        position: sticky;
+        left: 108px;
+        z-index: 18;
+        background: #f3f3f3;
+        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+
+  // Table body styling
+  .tabulator-tableholder {
+    .tabulator-table {
+      .tabulator-row {
+        background: white;
+        border-bottom: 1px solid #f0f0f0;
+        min-height: auto;
+        transition: background-color 0.15s ease;
+
+        &:hover {
+          background: #f3f4f6;
+        }
+
+        // Row colors based on operation
+        &.operation-insert {
+          background-color: rgba(16, 185, 129, 0.05);
+          &:hover {
+            background-color: rgba(16, 185, 129, 0.1);
+          }
+        }
+
+        &.operation-update {
+          background-color: rgba(108, 173, 223, 0.05);
+          &:hover {
+            background-color: rgba(108, 173, 223, 0.1);
+          }
+        }
+
+        &.operation-delete {
+          background-color: rgba(239, 68, 68, 0.05);
+          &:hover {
+            background-color: rgba(239, 68, 68, 0.1);
+          }
+        }
+
+        // Cell styling
+        .tabulator-cell {
+          border-right: 1px solid #f0f0f0;
+          padding: 2px 8px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          vertical-align: top;
+          font-size: 12px;
+          height: auto;
+          min-height: 28px;
+
+          // Special styling for cells with multi-line content
+          &:has(.space-y-1) {
+            white-space: normal;
+            height: auto;
+            padding: 4px 8px;
+          }
+
+          // Sticky columns in body
+          &.sticky-left-0 {
+            position: sticky;
+            left: 0;
+            background: white;
+            z-index: 5;
+            box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+          }
+
+          &.sticky-left-1 {
+            position: sticky;
+            left: 60px;
+            background: white;
+            z-index: 4;
+            box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+          }
+
+          &.sticky-left-2 {
+            position: sticky;
+            left: 108px;
+            background: white;
+            z-index: 3;
+            box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+          }
+        }
+
+        // Hover state for sticky cells
+        &:hover {
+          .tabulator-cell {
+            &.sticky-left-0,
+            &.sticky-left-1,
+            &.sticky-left-2 {
+              background: #f9fafb;
+            }
+          }
+        }
+
+        // Operation-specific sticky cell backgrounds
+        &.operation-insert .tabulator-cell {
+          &.sticky-left-0, &.sticky-left-1, &.sticky-left-2 {
+            background-color: rgba(16, 185, 129, 0.05);
+          }
+        }
+
+        &.operation-update .tabulator-cell {
+          &.sticky-left-0, &.sticky-left-1, &.sticky-left-2 {
+            background-color: rgba(108, 173, 223, 0.05);
+          }
+        }
+
+        &.operation-delete .tabulator-cell {
+          &.sticky-left-0, &.sticky-left-1, &.sticky-left-2 {
+            background-color: rgba(239, 68, 68, 0.05);
+          }
+        }
+
+        // Operation-specific sticky cell hover backgrounds
+        &.operation-insert:hover .tabulator-cell {
+          &.sticky-left-0, &.sticky-left-1, &.sticky-left-2 {
+            background-color: rgba(16, 185, 129, 0.1);
+          }
+        }
+
+        &.operation-update:hover .tabulator-cell {
+          &.sticky-left-0, &.sticky-left-1, &.sticky-left-2 {
+            background-color: rgba(108, 173, 223, 0.1);
+          }
+        }
+
+        &.operation-delete:hover .tabulator-cell {
+          &.sticky-left-0, &.sticky-left-1, &.sticky-left-2 {
+            background-color: rgba(239, 68, 68, 0.1);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Row detail styling for expanded rows
+.row-detail {
+  border-top: 1px solid #e5e7eb;
+  background: #f9fafb;
+  padding: 0;
+
+  td {
+    padding: 8px;
+    vertical-align: top;
+    border-right: 1px solid #e5e7eb;
+  }
+
+  h4 {
+    font-weight: 600;
+    color: #374151;
+    margin-bottom: 8px;
+  }
+
+  // Sticky column in expanded view
+  .sticky-left-0 {
+    position: sticky;
+    left: 0;
+    z-index: 5;
+    background: #f9fafb;
+    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+    width: 268px;
+    min-width: 268px;
+  }
+}
+
+// Expand button styling
+.expand-btn {
+  padding: 2px;
+  border-radius: 2px;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background-color: #f3f4f6;
+  }
+}
+
+// Table container
+.table-container {
+  min-height: 200px;
+  width: 100%;
+  overflow: auto;
+  border-bottom-left-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+
+// Column selector dropdown
+.column-selector {
+  right: 1rem;
+  margin-top: -2px;
+  z-index: 100;
+}