dbwatcher 1.1.0 → 1.1.2

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;
+}

data/app/assets/stylesheets/dbwatcher/vendor/_tabulator_overrides.scss

@@ -0,0 +1,37 @@
+/**
+ * Tabulator Vendor Overrides
+ * Overrides for the Tabulator.js vendor CSS
+ */
+
+// Override specific vendor styles that can't be handled in our component CSS
+.tabulator {
+  // Force our font settings
+  font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace !important;
+
+  // Ensure proper header styling
+  .tabulator-header {
+    background: #f3f3f3 !important;
+
+    .tabulator-col {
+      background: #f3f3f3 !important;
+    }
+  }
+
+  // Ensure proper row styling
+  .tabulator-tableholder .tabulator-table .tabulator-row {
+    background: white !important;
+
+    &:hover {
+      background: #f3f4f6 !important;
+    }
+
+    // Ensure proper hover state for sticky cells
+    &:hover .tabulator-cell {
+      &.sticky-left-0,
+      &.sticky-left-1,
+      &.sticky-left-2 {
+        background: #f9fafb !important;
+      }
+    }
+  }
+}

data/app/controllers/dbwatcher/api/v1/system_info_controller.rb

@@ -0,0 +1,180 @@
+# frozen_string_literal: true
+
+module Dbwatcher
+  module Api
+    module V1
+      # System information API controller
+      #
+      # Provides RESTful API endpoints for system information access.
+      # Supports JSON responses for programmatic access to system data.
+      # rubocop:disable Metrics/ClassLength
+      class SystemInfoController < BaseController
+        before_action :ensure_system_info_enabled
+
+        # Get complete system information
+        #
+        # @return [void]
+        def index
+          info = system_info_storage.cached_info
+
+          render json: {
+            status: :ok,
+            data: info,
+            timestamp: Time.current.iso8601,
+            cache_age: system_info_storage.info_age&.round(2)
+          }
+        rescue StandardError => e
+          log_error "API: Failed to get system information: #{e.message}"
+          render json: { error: e.message }, status: :internal_server_error
+        end
+
+        # Refresh system information
+        #
+        # @return [void]
+        def refresh
+          info = system_info_storage.refresh_info
+
+          render json: {
+            status: :ok,
+            data: info,
+            timestamp: Time.current.iso8601,
+            message: "System information refreshed successfully"
+          }
+        rescue StandardError => e
+          log_error "API: Failed to refresh system information: #{e.message}"
+          render json: { error: e.message }, status: :internal_server_error
+        end
+
+        # Get machine information only
+        #
+        # @return [void]
+        def machine
+          info = system_info_storage.cached_info
+
+          render json: {
+            status: :ok,
+            data: info[:machine] || {},
+            timestamp: Time.current.iso8601,
+            cache_age: system_info_storage.info_age&.round(2)
+          }
+        rescue StandardError => e
+          log_error "API: Failed to get machine information: #{e.message}"
+          render json: { error: e.message }, status: :internal_server_error
+        end
+
+        # Get database information only
+        #
+        # @return [void]
+        def database
+          info = system_info_storage.cached_info
+
+          render json: {
+            status: :ok,
+            data: info[:database] || {},
+            timestamp: Time.current.iso8601,
+            cache_age: system_info_storage.info_age&.round(2)
+          }
+        rescue StandardError => e
+          log_error "API: Failed to get database information: #{e.message}"
+          render json: { error: e.message }, status: :internal_server_error
+        end
+
+        # Get runtime information only
+        #
+        # @return [void]
+        def runtime
+          info = system_info_storage.cached_info
+
+          render json: {
+            status: :ok,
+            data: info[:runtime] || {},
+            timestamp: Time.current.iso8601,
+            cache_age: system_info_storage.info_age&.round(2)
+          }
+        rescue StandardError => e
+          log_error "API: Failed to get runtime information: #{e.message}"
+          render json: { error: e.message }, status: :internal_server_error
+        end
+
+        # Get system information summary
+        #
+        # @return [void]
+        def summary
+          summary_data = system_info_storage.summary
+
+          render json: {
+            status: :ok,
+            data: summary_data,
+            timestamp: Time.current.iso8601
+          }
+        rescue StandardError => e
+          log_error "API: Failed to get system info summary: #{e.message}"
+          render json: { error: e.message }, status: :internal_server_error
+        end
+
+        # Clear system information cache
+        #
+        # @return [void]
+        def clear_cache
+          system_info_storage.clear_cache
+
+          render json: {
+            status: :ok,
+            message: "System information cache cleared successfully",
+            timestamp: Time.current.iso8601
+          }
+        rescue StandardError => e
+          log_error "API: Failed to clear cache: #{e.message}"
+          render json: { error: e.message }, status: :internal_server_error
+        end
+
+        # Get cache status and metadata
+        #
+        # @return [void]
+        # rubocop:disable Metrics/MethodLength
+        def cache_status
+          info_available = system_info_storage.info_available?
+          cache_age = system_info_storage.info_age
+
+          render json: {
+            status: :ok,
+            data: {
+              cache_available: info_available,
+              cache_age: cache_age&.round(2),
+              cache_expired: cache_age && cache_age > Dbwatcher.configuration.system_info_cache_duration,
+              max_cache_age: Dbwatcher.configuration.system_info_cache_duration,
+              refresh_interval: Dbwatcher.configuration.system_info_refresh_interval
+            },
+            timestamp: Time.current.iso8601
+          }
+        rescue StandardError => e
+          log_error "API: Failed to get cache status: #{e.message}"
+          render json: { error: e.message }, status: :internal_server_error
+        end
+        # rubocop:enable Metrics/MethodLength
+
+        private
+
+        # Get system info storage instance
+        #
+        # @return [Storage::SystemInfoStorage] storage instance
+        def system_info_storage
+          @system_info_storage ||= Storage::SystemInfoStorage.new
+        end
+
+        # Check if system information collection is enabled
+        #
+        # @return [void]
+        def ensure_system_info_enabled
+          return if Dbwatcher.configuration.collect_system_info
+
+          render json: {
+            error: "System information collection is disabled",
+            status: :forbidden
+          }, status: :forbidden
+        end
+      end
+      # rubocop:enable Metrics/ClassLength
+    end
+  end
+end