solidstats 3.0.0.beta.1 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dd313b23c968d18619f31b5157b96b2a9c75435398121e800deaf6c2e7d4bfd4
-  data.tar.gz: 1f7407373917b47d1ef56ebe7e03138cd36ef111517a930e0c8b6354bc2e389f
+  metadata.gz: 81043c13f33e9684bcc3ea3d99f47f63d9bd17873c1f6792988e9bf752a7e572
+  data.tar.gz: dc4c6a7edd2f8720197e0beba69752deb847bc72422a4c6351670d6f448a04bd
 SHA512:
-  metadata.gz: adcd27c59ddc3e68c8843583dd274d96312959155c3a0491f06540cd1eb474681bcb7de407b6d286bc1a9e97dd03b4e94099b3e40f5232a37929b3c2565e1cd2
-  data.tar.gz: 515a1510e1911e65f8b7784bf746341112f469de7800170923f3f3f716c537825fe742afa266ecb5fc091ad9c1e3c7aebfbef328eef964da69960a7b0d63506b
+  metadata.gz: ae9f6ca74cfe86e05cec7f9b0be6ce1b4621b3f672def7a08a1f94790fd81a8715da2c6927825ebf7c684ce3dbd84081a825a63268963af985ad0dcebbaddbc2
+  data.tar.gz: f856e1776b287e7ca34752b3a6ad27b2cdf842ac7b955fbf95f2e265a4bb45a9820b05bc2403f7c3d6f03301e35dca78890192f14344cfe176a952ecdcadac16

data/README.md

@@ -1,12 +1,27 @@
 Solidstats is a local-only Rails engine that shows your project's health at `/solidstats`. The dashboard provides real-time insights into your application's security, code quality, and development tasks.
 
 ## Features
+
+### Core Dashboard
 - Interactive security dashboard with real-time refresh capability
 - Comprehensive gem vulnerability analysis with severity breakdown
 - Visual security score rating (A+, B, C) and metrics
 - Bundler Audit scan with detailed remediation suggestions
 - Interactive vulnerability details with patched version information
 - Gem impact analysis showing affected gems by severity
+
+### Gem Metadata System
+- **Complete Gem Analysis Platform**: Comprehensive gem metadata dashboard with detailed information about all gems in your project
+- **Dual-View System**: Switch between table and grid layouts for optimal data presentation
+  - **Table View**: Sortable columns with gem name, version, description, dependencies, and status
+  - **Grid View**: Card-based layout with 3 cards per row (responsive: 3 on desktop, 2 on tablet, 1 on mobile)
+- **Advanced Filtering**: Real-time search and filtering across all gem attributes
+- **Dependency Analysis**: View gem dependencies with version compatibility information
+- **Status Monitoring**: Real-time health indicators and gem status tracking
+- **Download Statistics**: Popularity metrics and download statistics for gems
+- **License Information**: Security compliance and license tracking
+
+### System Monitoring
 - Log Size Monitor for tracking and managing application log files
 - Log file truncation tool for individual or all log files
 - LoadLens - Development performance monitoring with request tracking
@@ -14,6 +29,12 @@ Solidstats is a local-only Rails engine that shows your project's health at `/so
 - TODO/FIXME tracker with file hotspots
 - Test coverage summary
 
+### Architecture
+- **View Component Architecture**: Modern, maintainable component-based UI system
+- **Feature Generator System**: Automated scaffolding for rapid development
+- **CSS Component Architecture**: Organized, conflict-free styling with responsive design
+- **Cross-Browser Compatibility**: Enhanced support across modern browsers
+
 ## Compatibility
 
 - Ruby 2.7+: Compatible with Rails 6.1 through Rails 7.0
@@ -75,6 +96,18 @@ You can refresh the dashboard data at any time by clicking the "Refresh" button
 3. Show real-time feedback during the refresh process
 4. Update the "Last Updated" timestamp
 
+### Gem Metadata
+Comprehensive gem analysis and management platform featuring:
+- **Complete Gem Information**: Detailed metadata for all gems in your project including versions, descriptions, dependencies, and status
+- **Flexible Views**: 
+  - **Table View**: Sortable table with comprehensive gem information, perfect for detailed analysis
+  - **Grid View**: Card-based layout showing 3 gems per row with visual appeal and responsive design
+- **Advanced Search & Filtering**: Real-time filtering across gem names, descriptions, and dependencies
+- **Dependency Analysis**: View and analyze gem dependencies with version information
+- **Status Monitoring**: Health indicators and status tracking for all gems
+- **Download Metrics**: Popularity statistics and download information
+- **License Tracking**: Security compliance and license information for each gem
+
 ### Code Quality
 Displays code quality metrics, test coverage, and code health indicators.
 

data/app/assets/javascripts/solidstats/application.js

@@ -0,0 +1,257 @@
+// Solidstats JavaScript Application Manifest
+// This file includes all JavaScript modules for the Solidstats dashboard
+//
+//= require dashboard
+//= require_tree .
+
+// Initialize dashboard when DOM is ready
+document.addEventListener('DOMContentLoaded', function() {
+  console.log('🚀 Solidstats Dashboard JavaScript loaded');
+  
+  // Ensure dashboard module is available
+  if (typeof window.SolidstatsDashboard !== 'undefined') {
+    console.log('✅ Dashboard module loaded successfully');
+    
+    // Verify key functions are available
+    const requiredFunctions = ['init', 'navigateToSection', 'setupMainNavigation'];
+    const missingFunctions = requiredFunctions.filter(func => 
+      typeof window.SolidstatsDashboard[func] !== 'function'
+    );
+    
+    if (missingFunctions.length === 0) {
+      console.log('✅ All dashboard functions available');
+    } else {
+      console.warn('⚠️ Missing functions:', missingFunctions);
+    }
+  } else {
+    console.warn('⚠️ Dashboard module not found');
+    console.log('Available globals:', Object.keys(window).filter(k => k.includes('Solid')));
+  }
+});
+
+
+// Dashboard JavaScript functionality
+
+// Create the Solidstats Dashboard namespace
+window.SolidstatsDashboard = window.SolidstatsDashboard || {};
+
+// Main dashboard initialization
+window.SolidstatsDashboard.init = function() {
+  handleUrlNavigation();
+  setupEventListeners();
+};
+
+document.addEventListener('DOMContentLoaded', function() {
+  window.SolidstatsDashboard.init();
+});
+
+function handleUrlNavigation() {
+  // Parse URL hash for initial navigation
+  const hash = window.location.hash.substring(1);
+  if (hash) {
+    const [section, tab] = hash.split('/');
+    if (section) {
+      setTimeout(() => {
+        window.SolidstatsDashboard.navigateToSection(section, tab, true);
+      }, 100);
+    }
+  }
+}
+
+function setupEventListeners() {
+  window.SolidstatsDashboard.setupMainNavigation();
+  window.SolidstatsDashboard.setupTabNavigation();
+  window.SolidstatsDashboard.setupQuickNavigation();
+  window.SolidstatsDashboard.setupSummaryCardNavigation();
+}
+
+// Function to update URL hash with current state
+window.SolidstatsDashboard.updateUrlHash = function(section, tab = null) {
+  let hash = '#' + section;
+  if (tab) {
+    hash += '/' + tab;
+  }
+  history.replaceState(null, null, hash);
+};
+
+// Function to navigate to section and tab
+window.SolidstatsDashboard.navigateToSection = function(section, tab = null, shouldScroll = false) {
+  // Remove active class from all nav items and sections
+  document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
+  document.querySelectorAll('.dashboard-section').forEach(section => section.classList.remove('active'));
+  
+  // Add active class to matching nav item
+  const navItem = document.querySelector(`.nav-item[data-section="${section}"]`);
+  if (navItem) {
+    navItem.classList.add('active');
+  }
+  
+  // Show corresponding section
+  const sectionElement = document.getElementById(section);
+  if (sectionElement) {
+    sectionElement.classList.add('active');
+    
+    // If tab is specified, activate that tab
+    if (tab) {
+      const sectionEl = sectionElement;
+      if (sectionEl) {
+        // Deactivate all tabs first
+        sectionEl.querySelectorAll('.tab-item').forEach(item => item.classList.remove('active'));
+        sectionEl.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+        
+        // Activate the target tab
+        const targetTabItem = sectionEl.querySelector(`.tab-item[data-tab="${tab}"]`);
+        const targetTabContent = sectionEl.querySelector(`#${tab}`);
+        
+        if (targetTabItem) targetTabItem.classList.add('active');
+        if (targetTabContent) targetTabContent.classList.add('active');
+      }
+    }
+    
+    // Scroll to section if requested (with a small delay to ensure rendering)
+    if (shouldScroll) {
+      setTimeout(() => {
+        sectionElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }, 100);
+    }
+    
+    // Update URL hash
+    window.SolidstatsDashboard.updateUrlHash(section, tab);
+  }
+};
+
+// Main navigation
+window.SolidstatsDashboard.setupMainNavigation = function() {
+  document.querySelectorAll('.nav-item').forEach(function(navItem) {
+    navItem.addEventListener('click', function(e) {
+      e.preventDefault();
+      
+      // Get section ID from data attribute
+      const sectionId = this.getAttribute('data-section');
+      
+      // Navigate to the section
+      window.SolidstatsDashboard.navigateToSection(sectionId);
+    });
+  });
+};
+
+// Tab navigation
+window.SolidstatsDashboard.setupTabNavigation = function() {
+  document.querySelectorAll('.tab-item').forEach(function(tabItem) {
+    if (!tabItem.hasAttribute('disabled')) {
+      tabItem.addEventListener('click', function(e) {
+        e.preventDefault();
+        const tabContainer = this.closest('.dashboard-section');
+        const tabId = this.getAttribute('data-tab');
+        
+        // Find the current active section
+        const currentSection = tabContainer.id;
+        
+        // Remove active class from all tab items and tabs within this container
+        tabContainer.querySelectorAll('.tab-item').forEach(item => item.classList.remove('active'));
+        tabContainer.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+        
+        // Add active class to clicked item and corresponding tab
+        this.classList.add('active');
+        const targetContent = tabContainer.querySelector(`#${tabId}`);
+        if (targetContent) {
+          targetContent.classList.add('active');
+        }
+        
+        // Update URL hash with current section and tab
+        window.SolidstatsDashboard.updateUrlHash(currentSection, tabId);
+      });
+    }
+  });
+};
+
+// Quick navigation
+window.SolidstatsDashboard.setupQuickNavigation = function() {
+  document.querySelectorAll('.quick-nav-item').forEach(function(navItem) {
+    navItem.addEventListener('click', function(e) {
+      e.preventDefault();
+      const targetId = this.getAttribute('href').substring(1);
+      
+      // Navigate to the specified section
+      window.SolidstatsDashboard.navigateToSection(targetId);
+      
+      // Close the quick nav menu
+      document.querySelector('.quick-nav-menu').style.display = 'none';
+    });
+  });
+};
+
+// Summary card navigation
+window.SolidstatsDashboard.setupSummaryCardNavigation = function() {
+  document.querySelectorAll('.summary-card').forEach(function(card) {
+    card.addEventListener('click', function() {
+      const section = this.getAttribute('data-section');
+      const tab = this.getAttribute('data-tab');
+      
+      // Navigate to the specified section and tab, with scrolling
+      window.SolidstatsDashboard.navigateToSection(section, tab, true);
+    });
+  });
+};
+
+// Refresh functionality
+window.SolidstatsDashboard.refreshAudit = function() {
+  // Show loading indicator
+  const refreshButton = document.querySelector('.action-button');
+  const originalText = refreshButton.innerHTML;
+  refreshButton.innerHTML = '<span class="action-icon">⟳</span> Refreshing...';
+  refreshButton.disabled = true;
+  
+  // Make AJAX call to refresh endpoint
+  fetch('/solidstats/refresh', {
+    method: 'GET',
+    headers: {
+      'Accept': 'application/json',
+      'X-Requested-With': 'XMLHttpRequest'
+    },
+    credentials: 'same-origin'
+  })
+  .then(response => {
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  })
+  .then(data => {
+    // Update the dashboard with fresh data
+    location.reload();
+    
+    // Show success notification
+    window.SolidstatsDashboard.showNotification('Dashboard data refreshed successfully', 'success');
+    
+    // Reset button state
+    refreshButton.innerHTML = originalText;
+    refreshButton.disabled = false;
+  })
+  .catch(error => {
+    console.error('Error refreshing data:', error);
+    
+    // Show error notification
+    window.SolidstatsDashboard.showNotification('Failed to refresh data. Please try again.', 'error');
+    
+    // Reset button state
+    refreshButton.innerHTML = originalText;
+    refreshButton.disabled = false;
+  });
+};
+
+// Notification system
+window.SolidstatsDashboard.showNotification = function(message, type) {
+  // Simple notification system
+  const notification = document.createElement('div');
+  notification.className = `notification notification-${type}`;
+  notification.textContent = message;
+  
+  // Add to body
+  document.body.appendChild(notification);
+  
+  // Remove after 3 seconds
+  setTimeout(() => {
+    notification.remove();
+  }, 3000);
+};

data/app/assets/javascripts/solidstats/dashboard.js

@@ -0,0 +1,179 @@
+// Dashboard JavaScript functionality
+
+// Create the Solidstats Dashboard namespace
+window.SolidstatsDashboard = window.SolidstatsDashboard || {};
+
+// Main dashboard initialization
+window.SolidstatsDashboard.init = function() {
+  handleUrlNavigation();
+  setupEventListeners();
+};
+
+document.addEventListener('DOMContentLoaded', function() {
+  window.SolidstatsDashboard.init();
+});
+
+function handleUrlNavigation() {
+  // Parse URL hash for initial navigation
+  const hash = window.location.hash.substring(1);
+  if (hash) {
+    const [section, tab] = hash.split('/');
+    if (section) {
+      setTimeout(() => {
+        window.SolidstatsDashboard.navigateToSection(section, tab, true);
+      }, 100);
+    }
+  }
+}
+
+function setupEventListeners() {
+  window.SolidstatsDashboard.setupMainNavigation();
+  window.SolidstatsDashboard.setupTabNavigation();
+  window.SolidstatsDashboard.setupQuickNavigation();
+  window.SolidstatsDashboard.setupSummaryCardNavigation();
+}
+
+// Function to update URL hash with current state
+window.SolidstatsDashboard.updateUrlHash = function(section, tab = null) {
+  let hash = '#' + section;
+  if (tab) {
+    hash += '/' + tab;
+  }
+  history.replaceState(null, null, hash);
+};
+
+// Function to navigate to section and tab
+window.SolidstatsDashboard.navigateToSection = function(section, tab = null, shouldScroll = false) {
+  // Remove active class from all nav items and sections
+  document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
+  document.querySelectorAll('.dashboard-section').forEach(section => section.classList.remove('active'));
+  
+  // Add active class to matching nav item
+  const navItem = document.querySelector(`.nav-item[data-section="${section}"]`);
+  if (navItem) {
+    navItem.classList.add('active');
+  }
+  
+  // Show corresponding section
+  const sectionElement = document.getElementById(section);
+  if (sectionElement) {
+    sectionElement.classList.add('active');
+    
+    // If tab is specified, activate that tab
+    if (tab) {
+      const sectionEl = sectionElement;
+      if (sectionEl) {
+        // Deactivate all tabs first
+        sectionEl.querySelectorAll('.tab-item').forEach(item => item.classList.remove('active'));
+        sectionEl.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+        
+        // Activate the target tab
+        const targetTabItem = sectionEl.querySelector(`.tab-item[data-tab="${tab}"]`);
+        const targetTabContent = sectionEl.querySelector(`#${tab}`);
+        
+        if (targetTabItem) targetTabItem.classList.add('active');
+        if (targetTabContent) targetTabContent.classList.add('active');
+      }
+    }
+    
+    // Scroll to section if requested (with a small delay to ensure rendering)
+    if (shouldScroll) {
+      setTimeout(() => {
+        sectionElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }, 100);
+    }
+    
+    // Update URL hash
+    window.SolidstatsDashboard.updateUrlHash(section, tab);
+  }
+};
+
+// Main navigation
+window.SolidstatsDashboard.setupMainNavigation = function() {
+  document.querySelectorAll('.nav-item').forEach(function(navItem) {
+    navItem.addEventListener('click', function(e) {
+      e.preventDefault();
+      
+      // Get section ID from data attribute
+      const sectionId = this.getAttribute('data-section');
+      
+      // Navigate to the section
+      window.SolidstatsDashboard.navigateToSection(sectionId);
+    });
+  });
+};
+
+// Tab navigation
+window.SolidstatsDashboard.setupTabNavigation = function() {
+  document.querySelectorAll('.tab-item').forEach(function(tabItem) {
+    if (!tabItem.hasAttribute('disabled')) {
+      tabItem.addEventListener('click', function(e) {
+        e.preventDefault();
+        const tabContainer = this.closest('.dashboard-section');
+        const tabId = this.getAttribute('data-tab');
+        
+        // Find the current active section
+        const currentSection = tabContainer.id;
+        
+        // Remove active class from all tab items and tabs within this container
+        tabContainer.querySelectorAll('.tab-item').forEach(item => item.classList.remove('active'));
+        tabContainer.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+        
+        // Add active class to clicked item and corresponding tab
+        this.classList.add('active');
+        const targetContent = tabContainer.querySelector(`#${tabId}`);
+        if (targetContent) {
+          targetContent.classList.add('active');
+        }
+        
+        // Update URL hash with current section and tab
+        window.SolidstatsDashboard.updateUrlHash(currentSection, tabId);
+      });
+    }
+  });
+};
+
+// Quick navigation
+window.SolidstatsDashboard.setupQuickNavigation = function() {
+  document.querySelectorAll('.quick-nav-item').forEach(function(navItem) {
+    navItem.addEventListener('click', function(e) {
+      e.preventDefault();
+      const targetId = this.getAttribute('href').substring(1);
+      
+      // Navigate to the specified section
+      window.SolidstatsDashboard.navigateToSection(targetId);
+      
+      // Close the quick nav menu
+      document.querySelector('.quick-nav-menu').style.display = 'none';
+    });
+  });
+};
+
+// Summary card navigation
+window.SolidstatsDashboard.setupSummaryCardNavigation = function() {
+  document.querySelectorAll('.summary-card').forEach(function(card) {
+    card.addEventListener('click', function() {
+      const section = this.getAttribute('data-section');
+      const tab = this.getAttribute('data-tab');
+      
+      // Navigate to the specified section and tab, with scrolling
+      window.SolidstatsDashboard.navigateToSection(section, tab, true);
+    });
+  });
+};
+
+// Notification system
+window.SolidstatsDashboard.showNotification = function(message, type) {
+  // Simple notification system
+  const notification = document.createElement('div');
+  notification.className = `notification notification-${type}`;
+  notification.textContent = message;
+  
+  // Add to body
+  document.body.appendChild(notification);
+  
+  // Remove after 3 seconds
+  setTimeout(() => {
+    notification.remove();
+  }, 3000);
+};

data/app/assets/stylesheets/solidstats/application.css

@@ -10,6 +10,11 @@
  * files in this directory. Styles in this file should be added after the last require_* statement.
  * It is generally better to create a new file per style scope.
  *
- *= require_tree .
+ *= require_tree ./components
  *= require_self
  */
+
+/* Base Solidstats styles */
+.solidstats-dashboard {
+  font-family: system-ui, -apple-system, sans-serif;
+}

data/app/controllers/solidstats/dashboard_controller.rb

@@ -1,7 +1,7 @@
 module Solidstats
   class DashboardController < ApplicationController
-    layout 'solidstats/dashboard'
-    
+    layout "solidstats/dashboard"
+
     TODO_CACHE_FILE = Rails.root.join("tmp", "solidstats_todos.json")
     AUDIT_CACHE_HOURS = 12 # Configure how many hours before refreshing
 
@@ -10,7 +10,7 @@ module Solidstats
       # Load dashboard cards from JSON file
       @dashboard_cards = load_dashboard_cards
       @quick_actions = quick_actions_data
-      render 'dashboard'
+      render "dashboard"
     end
 
     def refresh
@@ -21,8 +21,11 @@ module Solidstats
       Solidstats::StylePatrolService.refresh_cache
       Solidstats::CoverageCompassService.refresh_cache
       Solidstats::LoadLensService.scan_and_cache
-      
-      redirect_to solidstats_dashboard_path, notice: 'Dashboard data refreshed successfully!'
+
+      respond_to do |format|
+        format.html { redirect_to solidstats_dashboard_path, notice: "Dashboard data refreshed successfully!" }
+        format.json { render json: { status: "success", message: "Dashboard data refreshed successfully!" } }
+      end
     end
 
     private
@@ -30,39 +33,39 @@ module Solidstats
     def quick_actions_data
       [
         {
-          icon: 'refresh-cw',
-          label: 'Refresh Data',
-          color: 'blue',
-          action: 'refresh_dashboard'
+          icon: "refresh-cw",
+          label: "Refresh Data",
+          color: "blue",
+          action: "refresh_path"
         },
         {
-          icon: 'settings',
-          label: 'Configure',
-          color: 'purple',
-          action: 'open_settings'
+          icon: "settings",
+          label: "Configure",
+          color: "purple",
+          action: "#"
         },
         {
-          icon: 'download',
-          label: 'Export',
-          color: 'green',
-          action: 'export_data'
+          icon: "download",
+          label: "Export",
+          color: "green",
+          action: "#"
         },
         {
-          icon: 'bell',
-          label: 'Alerts',
-          color: 'orange',
-          action: 'view_alerts'
+          icon: "bell",
+          label: "Alerts",
+          color: "orange",
+          action: "#"
         }
       ]
     end
 
     def load_dashboard_cards
       json_file_path = Rails.root.join("solidstats", "summary.json")
-      
+
       begin
         # Read and parse the JSON file
         json_data = JSON.parse(File.read(json_file_path))
-        
+
         # Transform the JSON data into the format expected by the view
         json_data.map do |name, data|
           {
@@ -77,23 +80,13 @@ module Solidstats
         end
       rescue Errno::ENOENT
         Rails.logger.warn("Summary JSON file not found, generating initial data...")
-        generate_initial_data
-        retry
+        # Fallback to empty array if JSON is invalid
+        []
       rescue JSON::ParserError => e
         Rails.logger.error("Error parsing summary JSON: #{e.message}")
         # Fallback to empty array if JSON is invalid
         []
       end
     end
-
-    def generate_initial_data
-      # Force a scan to create initial data if missing
-      Solidstats::LogSizeMonitorService.scan_and_cache
-      Solidstats::BundlerAuditService.scan_and_cache
-      Solidstats::MyTodoService.collect_todos
-      Solidstats::StylePatrolService.refresh_cache
-      Solidstats::CoverageCompassService.refresh_cache
-      Solidstats::DevLogParserService.scan_and_cache
-    end
   end
 end

data/app/controllers/solidstats/gem_metadata_controller.rb

@@ -0,0 +1,12 @@
+module Solidstats
+  class GemMetadataController < ApplicationController
+    def refresh
+      @gems = Solidstats::GemMetadata::FetcherService.call(nil, true)
+
+      respond_to do |format|
+        format.html { redirect_to "/solidstats#gem-metadata", notice: "Gem metadata refreshed successfully." }
+        format.json { render json: { gems: @gems } }
+      end
+    end
+  end
+end