Complete Real-Time Metrics Dashboard with Throughput Tracking#23
Merged
Conversation
…osing brace in slideInLeft animation) - Fixed JavaScript duplicate createMessageElement function - Improved message display consistency - Resolved modal and layout rendering issues
Features: - Real-time metrics dashboard with WebSocket updates - Tab navigation between Messages and Dashboard - System metrics: Connected users, CDC events, messages/min, Kafka topics - Operation distribution chart (percentage-based) - Real-time CDC activity tracking - 24h operation history Fixes: - Fixed header sizing consistency across different viewports - Added nav-tabs-container wrapper for proper alignment - Reverted to percentage-based fill for operation bars - Fixed sidebar layout in messages tab - Improved responsive design for tabs - Show user count instead of names to prevent overflow
Improvements: - Added 4 breakpoints: 1024px, 768px, 480px, 360px - Large tablets (1024px): Adjusted layouts and reduced padding - Tablets (768px): Stack elements vertically, hide tab text, show icons - Mobile (480px): Compact spacing, hide unnecessary elements, single column grids - Small mobile (360px): Ultra-compact mode for smallest devices Layout fixes: - Fixed charts container to use min(100%, 400px) for better mobile support - Fixed stats grid to use min(100%, 280px) for responsive cards - Added proper overflow handling for long text - Ensured all grids collapse to single column on mobile Typography scaling: - Progressive font size reduction across breakpoints - Headers scale from 1.5rem -> 1.25rem -> 1rem -> 0.875rem - Body text scales appropriately for readability Dashboard responsive: - Metrics cards stack on mobile - Charts take full width on tablets and mobile - Operation bars maintain visibility with reduced height - System info grid collapses to single column Added utility classes: - Text truncation and word wrap utilities - Scrollable containers with touch support - Image responsiveness - Smooth scrolling - Prevent horizontal overflow All UI elements now resize well across: - Desktop (1400px+) - Laptop (1024px - 1400px) - Tablet (768px - 1024px) - Mobile (480px - 768px) - Small mobile (360px - 480px) - Extra small (< 360px)
Changes: - Removed max-width: 1400px from .app-container - Removed max-width: 1200px from .header-content - Removed max-width: 1200px from .nav-tabs-container - Removed max-width: 1200px from .footer-content - Removed max-width: 800px from .message-form - Changed all to width: 100% for full viewport utilization - Removed box-shadow from app-container (no longer needed without margin) - Removed margin: 0 auto centering from all main containers - Updated responsive breakpoints to remove redundant max-width overrides The app now fills the entire browser width, eliminating side margins and making better use of available screen real estate on all devices.
Problem: - Kafka Topics metric was hardcoded to 128 in the dashboard - No actual connection to Kafka to fetch real topic count - Misleading data displayed to users Solution: - Added AIOKafkaAdminClient integration to ConnectionManager - Implemented fetch_kafka_topics_count() async method - Fetches actual topic count from Kafka cluster - Filters out internal topics (starting with __) - Caches topic count to avoid repeated failures - Added error handling for Kafka connection issues Backend changes: - Updated ConnectionManager to track kafka_topics_count - Added kafka_bootstrap_servers configuration - Integrated Kafka admin client calls in metrics endpoint - Returns actual topic count in metrics API response Frontend changes: - Updated JavaScript to display metrics.kafka_topics - Changed initial HTML value from '128' to '-' (loading state) - Shows actual count once Kafka data is fetched Features: - Real-time topic count updates every 2 seconds - Graceful fallback if Kafka is unavailable - Filters internal Kafka topics for accurate user-facing count - Uses existing aiokafka dependency (no new packages) Testing: - Verified with actual Kafka cluster (shows 4 topics) - Tested error handling when Kafka is unavailable - Dashboard now displays real data instead of hardcoded value
Contributor
Author
|
@AndrGab pls review |
AndrGab
approved these changes
Oct 11, 2025
Owner
AndrGab
left a comment
AndrGab
left a comment
There was a problem hiding this comment.
you are doing a great job ❤️
thx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Files modified:
connection_manager.py,websockets.py,script.js,styles.css,index.html