dbviewer 0.4.8 → 0.5.1

data/app/views/layouts/dbviewer/application.html.erb

@@ -32,9 +32,11 @@
     /* Base styles and typography */
     body {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-      font-size: 0.95rem;
+      font-size: 0.875rem;
       line-height: 1.5;
       letter-spacing: -0.01em;
+      color: #464c54; /* More subdued text color for light theme */
+      background-color: #f5f6f9; /* Subtle gray background */
     }
 
     h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
@@ -43,11 +45,11 @@
       line-height: 1.25;
     }
     
-    /* Core layout styles */
+    /* Core layout styles - Grafana-like compact layout */
     .dbviewer-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
-    .dbviewer-navbar { height: 60px; }
-    .dbviewer-navbar-spacer { height: 60px; } /* Creates space for the fixed navbar */
-    .dbviewer-content { display: flex; flex: 1; min-height: calc(100vh - 60px); padding-top: 0; }
+    .dbviewer-navbar { height: 48px; } /* Reduced height for more compact header */
+    .dbviewer-navbar-spacer { height: 48px; } /* Creates space for the fixed navbar */
+    .dbviewer-content { display: flex; flex: 1; min-height: calc(100vh - 48px); padding-top: 0; }
     
     /* Smooth theme transitions */
     html {
@@ -67,19 +69,19 @@
       transition: color 0.2s ease, background-color 0.2s ease;
     }
 
-    /* Sidebar styles - enhanced for elegance */
+    /* Sidebar styles - enhanced for elegance with Grafana-like compact design */
     .dbviewer-sidebar {
-      width: 260px;
-      height: calc(100vh - 60px);
+      width: 240px; /* More compact sidebar width */
+      height: calc(100vh - 48px);
       position: fixed;
-      top: 60px; /* Positioned right below the fixed navbar */
+      top: 48px; /* Positioned right below the fixed navbar */
       left: 0;
       z-index: 1000;
       display: flex;
       flex-direction: column;
       transition: transform 0.3s ease-in-out, background-color 0.2s ease, border-color 0.2s ease;
-      overflow: hidden; /* Changed from overflow-y: auto */
-      box-shadow: 3px 0 20px rgba(0, 0, 0, 0.05);
+      overflow: hidden;
+      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.04); /* Subtler shadow */
     }
 
     /* Dark mode overrides */
@@ -94,7 +96,7 @@
     }
     
     .dbviewer-sidebar-header {
-      padding: 1.2rem 1.25rem;
+      padding: 0.8rem 1rem; /* Reduced padding for more compact header */
       font-weight: 600;
       align-items: center;
       justify-content: space-between;
@@ -157,7 +159,7 @@
     .dbviewer-sidebar-content {
       flex: 1;
       overflow-y: auto;
-      padding: 0.5rem 0;
+      padding: 0.25rem 0; /* Reduced padding */
       height: 100%;
       /* Improved scrollbar */
       scrollbar-width: thin;
@@ -183,9 +185,9 @@
     
     .dbviewer-main {
       flex: 1;
-      margin-left: 260px;
-      padding: 2rem 2.5rem;
-      padding-top: 1.5rem; /* Adjusted for fixed header */
+      margin-left: 240px; /* Reduced sidebar width */
+      padding: 1.2rem 1.5rem; /* Reduced padding for more compact look */
+      padding-top: 0.8rem; /* Adjusted for fixed header */
       min-width: 0;
       animation: fadeIn 0.5s ease-in-out;
       transition: all 0.3s ease;
@@ -281,19 +283,20 @@
       }
     }
     
-    /* Extra small screens */
+    /* Extra small screens - more compact for small devices */
     @media (max-width: 575.98px) {
-      .dbviewer-main { padding: 0.75rem; }
+      .dbviewer-main { padding: 0.6rem; }
       h1, .h1 { font-size: 1.6rem; }
       h2, .h2 { font-size: 1.4rem; }
       h3, .h3 { font-size: 1.2rem; }
       
       .btn-sm {
-        font-size: 0.8rem;
+        font-size: 0.75rem;
+        padding: 0.2rem 0.5rem;
       }
       
       .card-body {
-        padding: 1rem;
+        padding: 0.75rem;
       }
     }
     
@@ -343,30 +346,31 @@
       border-color: rgba(134, 183, 254, 0.7);
     }
     
-    /* Table structure and visualization components */
+    /* Table structure and visualization components - Grafana-inspired */
     .dbviewer-card { 
-      border-radius: 0.5rem;
+      border-radius: 3px; /* Smaller border radius for Grafana look */
       transition: all 0.2s ease;
       overflow: hidden;
-      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.08); 
+      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05); /* Subtler shadow */
       height: 100%;
     }
     
     .dbviewer-card:hover {
-      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 1px 6px rgba(0, 0, 0, 0.1);
-      transform: translateY(-2px);
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.06);
+      transform: translateY(-1px); /* Subtler hover effect */
     }
     
-    /* Improved card headers */
+    /* Improved card headers - more compact */
     .dbviewer-card .card-header {
       font-weight: 600;
-      padding: 1rem 1.25rem;
+      padding: 0.7rem 1rem; /* Reduced padding */
       border-bottom-width: 1px;
+      font-size: 0.95rem; /* Slightly smaller font */
     }
     
-    /* Card body padding */
+    /* Card body padding - more compact */
     .dbviewer-card .card-body {
-      padding: 1.25rem;
+      padding: 0.9rem 1rem; /* Reduced padding */
     }
     
     [data-bs-theme="light"] .dbviewer-card {
@@ -483,7 +487,7 @@
     /* List group styling for dark mode */
     [data-bs-theme="dark"] .list-group-item {
       background-color: var(--bs-dark);
-      border-color: rgba(255, 255, 255, 0.15);
+      border-color: rgba(255, 255, 255, 0.08); /* Subtler border */
       color: var(--bs-light);
     }
     
@@ -494,10 +498,10 @@
       z-index: 1;
     }
     
-    /* Equal height for timeline and structure cards */
+    /* Equal height for timeline and structure cards - Grafana-inspired compact layout */
     .two-column-layout .card { height: 100%; display: flex; flex-direction: column; }
-    .two-column-layout .card-body { flex: 1; display: flex; flex-direction: column; }
-    .two-column-layout .chart-container { flex: 1; min-height: 250px; }
+    .two-column-layout .card-body { flex: 1; display: flex; flex-direction: column; padding: 0.75rem; } /* Reduced padding */
+    .two-column-layout .chart-container { flex: 1; min-height: 220px; } /* Reduced min-height */
     .two-column-layout .structure-container { padding: 0; }
     .two-column-layout .tab-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
     .two-column-layout .tab-pane { flex: 1; overflow: hidden; }
@@ -560,24 +564,28 @@
       font-size: 1.2rem;
     }
     
-    /* Header styles for a more professional look */
+    /* Header styles for a more professional Grafana-like look */
     .navbar {
       transition: all 0.3s ease;
-      padding: 0.5rem 1rem;
-      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
+      padding: 0 0.75rem; /* Reduced horizontal padding */
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); /* Subtler shadow */
+      min-height: 48px; /* Fixed height */
     }
     
     .navbar-brand {
       font-weight: 600;
       letter-spacing: -0.01em;
+      font-size: 1.1rem; /* Smaller brand */
+      padding: 0.1rem 0; /* Reduced padding */
     }
     
     .nav-link {
       font-weight: 500;
-      padding: 0.5rem 0.8rem !important;
-      border-radius: 4px;
+      padding: 0.35rem 0.65rem !important; /* Reduced padding */
+      border-radius: 2px; /* Smaller radius for Grafana look */
       transition: all 0.2s ease;
-      margin: 0 2px;
+      margin: 0 1px; /* Reduced margin */
+      font-size: 0.9rem; /* Smaller font */
     }
     
     .nav-link.active {
@@ -602,11 +610,11 @@
       border-radius: 0;
       border-left: 0;
       border-right: 0;
-      padding: 0.75rem 1.25rem;
+      padding: 0.5rem 0.85rem; /* Reduced padding for compact look */
       transition: all 0.15s ease-in-out;
       position: relative;
       font-weight: 500;
-      font-size: 0.9rem;
+      font-size: 0.85rem; /* Smaller font for Grafana-like appearance */
     }
     
     .list-group-item:first-child {
@@ -679,23 +687,23 @@
       color: #adb5bd;
     }
     
-    /* Enhanced button styling */
+    /* Enhanced button styling - Grafana-inspired */
     .btn {
       font-weight: 500;
-      padding: 0.5rem 1rem;
-      border-radius: 0.375rem;
+      padding: 0.4rem 0.85rem; /* Reduced padding */
+      border-radius: 2px; /* Smaller radius for Grafana look */
       transition: all 0.2s ease;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
     }
     
     .btn-sm {
-      padding: 0.35rem 0.75rem;
-      font-size: 0.85rem;
+      padding: 0.25rem 0.6rem; /* Reduced padding */
+      font-size: 0.8rem; /* Smaller font size */
     }
     
     .btn-lg {
-      padding: 0.65rem 1.2rem;
-      font-size: 1.05rem;
+      padding: 0.5rem 1rem; /* Reduced padding */
+      font-size: 0.95rem; /* Smaller font size */
     }
     
     .btn:active {
@@ -760,23 +768,23 @@
       text-decoration: underline;
     }
     
-    /* Enhanced code blocks and SQL query styling */
+    /* Enhanced code blocks and SQL query styling - Grafana-inspired */
     pre, code {
       font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
-      border-radius: 4px;
+      border-radius: 2px; /* Smaller radius */
       transition: all 0.2s ease;
     }
     
     pre {
-      padding: 1rem;
-      margin-bottom: 1rem;
-      border-radius: 0.5rem;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+      padding: 0.75rem; /* Reduced padding */
+      margin-bottom: 0.75rem; /* Reduced margin */
+      border-radius: 2px; /* Smaller radius */
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
     }
     
     code {
-      font-size: 0.875em;
-      padding: 0.2em 0.4em;
+      font-size: 0.825em; /* Smaller font */
+      padding: 0.15em 0.3em; /* Reduced padding */
     }
     
     /* SQL query code in tables */
@@ -868,7 +876,7 @@
       color: #ffffff;
     }
     
-    /* Enhanced table styling */
+    /* Enhanced table styling - Grafana-like compact design */
     .table {
       margin-bottom: 0;
       width: 100%;
@@ -881,12 +889,12 @@
     }
     
     .table thead th {
-      padding: 1rem;
+      padding: 0.65rem 0.75rem; /* Reduced padding */
       font-weight: 600;
       border-top: 0;
       vertical-align: middle;
       letter-spacing: 0.01em;
-      font-size: 0.88rem;
+      font-size: 0.78rem; /* Smaller font */
       text-transform: uppercase;
       position: sticky;
       top: 0;
@@ -895,10 +903,10 @@
     }
     
     .table tbody td {
-      padding: 0.85rem 1rem;
+      padding: 0.5rem 0.75rem; /* Reduced padding */
       vertical-align: middle;
       border-color: var(--bs-border-color);
-      font-size: 0.92rem;
+      font-size: 0.85rem; /* Smaller font */
     }
     
     .table tbody tr:hover {
@@ -960,14 +968,21 @@
       color: #000 !important;
     }
     
-    /* Enhanced alert styling */
+    /* Badge styling - More Grafana-like */
+    .badge {
+      padding: 0.3em 0.5em;
+      font-size: 0.75em;
+      border-radius: 2px;
+    }
+    
+    /* Enhanced alert styling - Grafana-inspired */
     .alert {
-      border-radius: 0.5rem;
+      border-radius: 2px; /* Smaller radius for Grafana look */
       border-width: 0;
-      padding: 1rem 1.25rem;
-      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+      padding: 0.7rem 1rem; /* Reduced padding */
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
       position: relative;
-      border-left: 4px solid transparent;
+      border-left: 3px solid transparent; /* Thinner border */
     }
     
     .alert-info {
@@ -1091,40 +1106,40 @@
       background-color: var(--bs-light);
     }
     
-    /* Enhanced stat cards and metric icons */
+    /* Enhanced stat cards and metric icons - Grafana-inspired */
     .stat-card-bg {
       background: #ffffff;
-      border-radius: 0.75rem;
-      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+      border-radius: 3px; /* Smaller radius for Grafana look */
+      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.03);
       transition: all 0.3s ease;
       border: none;
     }
     
     .stat-card-bg:hover {
-      transform: translateY(-3px);
-      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+      transform: translateY(-1px); /* Subtler hover */
+      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
     }
     
     [data-bs-theme="dark"] .stat-card-bg {
       background-color: #212529;
-      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
     }
     
-    /* Enhanced metric icon styling */
+    /* Enhanced metric icon styling - Grafana-inspired */
     .metric-icon {
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 14px;
-      width: 65px;
-      height: 65px;
-      min-width: 65px;
+      border-radius: 3px; /* Smaller radius */
+      width: 50px; /* Smaller icon */
+      height: 50px; /* Smaller icon */
+      min-width: 50px; /* Smaller icon */
       text-align: center;
-      background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.2) 0%, rgba(var(--bs-primary-rgb), 0.1) 100%);
+      background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.15) 0%, rgba(var(--bs-primary-rgb), 0.08) 100%);
       color: var(--bs-primary);
-      font-size: 1.6rem;
+      font-size: 1.4rem; /* Smaller icon */
       transition: all 0.3s ease;
-      box-shadow: 0 3px 10px rgba(var(--bs-primary-rgb), 0.1);
+      box-shadow: 0 1px 5px rgba(var(--bs-primary-rgb), 0.08);
     }
     
     .stat-card-bg:hover .metric-icon {
@@ -1181,17 +1196,28 @@
       transition: all 0.2s ease;
     }
     
-    /* Improved table hover effect */
+    /* Improved table hover effect - Grafana-like */
     .table-hover > tbody > tr:hover {
       transition: all 0.15s ease;
     }
     
     [data-bs-theme="light"] .table-hover > tbody > tr:hover {
-      background-color: rgba(13, 110, 253, 0.04);
+      background-color: rgba(13, 110, 253, 0.03); /* Subtler hover */
     }
     
     [data-bs-theme="dark"] .table-hover > tbody > tr:hover {
-      background-color: rgba(13, 110, 253, 0.07);
+      background-color: rgba(13, 110, 253, 0.05); /* Subtler hover */
+    }
+    
+    /* Grafana-inspired grid layout adjustments */
+    .row {
+      margin-right: -0.5rem;
+      margin-left: -0.5rem;
+    }
+    
+    .row > [class^="col-"] {
+      padding-right: 0.5rem;
+      padding-left: 0.5rem;
     }
     
     /* Button press effect */
@@ -1228,6 +1254,80 @@
     [data-bs-theme="dark"] html::-webkit-scrollbar-thumb {
       background-color: rgba(255, 255, 255, 0.2);
     }
+    
+    /* Grafana-like panel enhancements */
+    body {
+      color: #464c54; /* More subdued text color for light theme */
+      background-color: #f5f6f9; /* Subtle gray background */
+    }
+    
+    [data-bs-theme="dark"] body {
+      background-color: #161719; /* Darker background for dark theme */
+      color: #d8d9da; /* Softer text color for dark theme */
+    }
+    
+    /* Make font sizes consistently smaller for more compact look */
+    body {
+      font-size: 0.875rem;
+    }
+    
+    h1, .h1 { font-size: 1.6rem; }
+    h2, .h2 { font-size: 1.4rem; }
+    h3, .h3 { font-size: 1.2rem; }
+    h4, .h4 { font-size: 1.1rem; }
+    h5, .h5 { font-size: 1rem; }
+    
+    /* Unify panel appearance */
+    .card, .list-group {
+      box-shadow: 0 0 4px rgba(0, 0, 0, 0.06);
+      border: none;
+      border-radius: 2px;
+    }
+    
+    [data-bs-theme="dark"] .card,
+    [data-bs-theme="dark"] .list-group {
+      box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
+      background-color: #212124;
+    }
+    
+    /* Improved tab styling */
+    .nav-tabs {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    }
+    
+    .nav-tabs .nav-link {
+      border: none;
+      border-bottom: 2px solid transparent;
+      background-color: transparent;
+      padding: 0.5rem 0.75rem;
+      margin-bottom: -1px;
+      font-size: 0.9rem;
+    }
+    
+    .nav-tabs .nav-link.active {
+      border-bottom-color: var(--bs-primary);
+      color: var(--bs-primary);
+    }
+    
+    [data-bs-theme="dark"] .nav-tabs {
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+    
+    /* Remove excessive margins between elements */
+    .row + .row,
+    .card + .card {
+      margin-top: 0.75rem;
+    }
+    
+    /* Elegant form controls */
+    .form-control, .form-select {
+      padding: 0.4rem 0.6rem;
+      font-size: 0.875rem;
+      height: auto;
+      border-radius: 2px;
+    }
+    
+    /* Add this right above the style closing tag */
   </style>
 </head>
 <body>

data/app/views/layouts/dbviewer/shared/_sidebar.html.erb

@@ -1,6 +1,5 @@
 <div class="dbviewer-sidebar-top">
   <div class="dbviewer-table-filter-container p-1 mb-0">
-    <i class="bi bi-search dbviewer-table-filter-icon"></i>
     <input type="text" class="form-control form-control-sm dbviewer-table-filter mb-0" 
            id="tableSearch" placeholder="Filter tables..." aria-label="Filter tables">
   </div>

data/config/routes.rb

@@ -19,13 +19,24 @@ Dbviewer::Engine.routes.draw do
   # Homepage and API endpoints
   get "dashboard", to: "home#index", as: :dashboard
 
-  # Analytics API endpoints
-  get "api/analytics", to: "home#analytics" # Legacy/combined endpoint
-  get "api/records", to: "home#records"
-  get "api/tables", to: "home#tables_count"
-  get "api/relationships", to: "home#relationships_count"
-  get "api/database_size", to: "home#database_size"
-  get "api/recent_queries", to: "home#recent_queries"
+  namespace :api do
+    resources :tables, only: [ :index ] do
+      collection do
+        get "records"
+        get "relationships_count"
+      end
+    end
+
+    resource :database, only: [], controller: "database" do
+      get "size"
+    end
+
+    resources :queries, only: [] do
+      collection do
+        get "recent"
+      end
+    end
+  end
 
   root to: "home#index"
 end

data/lib/dbviewer/database_manager.rb

@@ -180,8 +180,48 @@ module Dbviewer
       @cache_manager.clear_all
     end
 
+    # Calculate the total size of the database schema
+    # @return [Integer, nil] Database size in bytes or nil if unsupported
+    def fetch_schema_size
+      case adapter_name
+      when /mysql/
+        fetch_mysql_size
+      when /postgres/
+        fetch_postgres_size
+      when /sqlite/
+        fetch_sqlite_size
+      else
+        nil # Unsupported database type for size calculation
+      end
+    end
+
     private
 
+    def fetch_mysql_size
+      query = "SELECT SUM(data_length + index_length) AS size FROM information_schema.TABLES WHERE table_schema = DATABASE()"
+      fetch_size_from_query(query)
+    end
+
+    def fetch_postgres_size
+      query = "SELECT pg_database_size(current_database()) AS size"
+      fetch_size_from_query(query)
+    end
+
+    def fetch_sqlite_size
+      page_count = fetch_sqlite_pragma_value("page_count")
+      page_size = fetch_sqlite_pragma_value("page_size")
+      page_count * page_size
+    end
+
+    def fetch_sqlite_pragma_value(pragma_name)
+      execute_sqlite_pragma(pragma_name).first.values.first.to_i
+    end
+
+    def fetch_size_from_query(query)
+      result = execute_query(query).first
+      result ? result["size"].to_i : nil
+    end
+
     # Ensure we have a valid database connection
     # @return [ActiveRecord::ConnectionAdapters::AbstractAdapter] The database connection
     def ensure_connection

data/lib/dbviewer/engine.rb

@@ -20,8 +20,23 @@ module Dbviewer
     initializer "dbviewer.notifications" do
       ActiveSupport::Notifications.subscribe("sql.active_record") do |*args|
         event = ActiveSupport::Notifications::Event.new(*args)
+
+        next if skip_internal_query?(event)
+
         Logger.instance.add(event)
       end
     end
+
+    private
+
+    def skip_internal_query?(event)
+      caller_locations = caller_locations(1)
+      return false unless caller_locations
+
+      # Look for dbviewer in the call stack
+      caller_locations.any? { |l| l.path.include?("dbviewer") }
+    rescue
+      false
+    end
   end
 end

data/lib/dbviewer/logger.rb

@@ -12,7 +12,6 @@ module Dbviewer
     def add(event)
       # Return early if query logging is disabled
       return unless Dbviewer.configuration.enable_query_logging
-      return if QueryParser.should_skip_query?(event)
 
       current_time = Time.now
       @storage.add({

data/lib/dbviewer/query_parser.rb

@@ -68,15 +68,5 @@ module Dbviewer
     rescue
       []
     end
-
-    # Determine if a query should be skipped based on content
-    def self.should_skip_query?(event)
-      event.payload[:name] == "SCHEMA" ||
-      event.payload[:sql].include?("SHOW TABLES") ||
-      event.payload[:sql].include?("sqlite_master") ||
-      event.payload[:sql].include?("information_schema") ||
-      event.payload[:sql].include?("pg_catalog") ||
-      from_dbviewer?(event)
-    end
   end
 end

data/lib/dbviewer/version.rb

@@ -1,3 +1,3 @@
 module Dbviewer
-  VERSION = "0.4.8"
+  VERSION = "0.5.1"
 end