This PR implements a comprehensive dashboard for visualizing log data in Serilog UI, providing users with immediate insights into their application logs through interactive charts and key statistics.

🎯 Features Added

Backend API

• New /api/dashboard endpoint that returns aggregated log statistics
• Universal data provider support for all existing sinks:
  • SQLite, MongoDB, PostgreSQL, SQL Server, MySQL, RavenDB, Elasticsearch
• Dashboard data model providing:
  • Total logs count
  • Logs count by levels (with breakdown)
  • Today's log count
  • Today's error level logs count
• Integrated authentication and error handling using existing middleware

Frontend Dashboard

• Interactive dashboard component built with React + TypeScript
• Tab navigation allowing users to switch between "Logs" view and "Dashboard" view
• Rich data visualizations using Recharts library:
  • Statistics cards displaying key metrics
  • Bar chart showing log distribution by level
  • Pie chart showing percentage breakdown by level
• Responsive design that works on desktop and mobile devices
• Color-coded log levels for better visual distinction
• Real-time data fetching with React Query integration

📊 Dashboard Statistics

The dashboard displays exactly what was requested:

• ✅ Total logs count
• ✅ Logs count by levels
• ✅ Today's log count
• ✅ Today's error level logs count
• ✅ Visual charts for all above metrics

🛠️ Implementation Details

Backend Changes

• Extended IDataProvider interface with FetchDashboardAsync method
• Implemented dashboard queries for all data providers with optimized SQL/NoSQL queries
• Added new DashboardModel for structured data transfer
• Updated middleware routing to handle /api/dashboard endpoint
• Added comprehensive unit tests

Frontend Changes

• Created Dashboard component with interactive charts
• Added TabbedAppBody component for navigation between views
• Integrated Recharts library for professional chart visualizations
• Implemented useQueryDashboard hook for data fetching
• Added responsive grid layouts using Mantine UI components

🧪 Testing

• Unit tests for dashboard endpoint functionality
• Mock providers for testing different scenarios
• Error handling tests for robustness
• Comprehensive PostgreSQL dashboard tests with 5 test methods covering:
  • Dashboard model structure validation
  • Data consistency checks (today ≤ total, errors ≤ today)
  • Level aggregation testing
  • Edge case handling (empty databases)
  • Additional column configuration support
• Both .NET backend and React frontend build successfully

🎨 User Experience

The dashboard provides a Kibana-style experience that helps users:

• Quickly assess overall log volume and patterns
• Identify error trends and spikes
• Monitor daily log activity
• Understand log level distribution
• Navigate seamlessly between detailed logs and high-level statistics

📱 Screenshots

The dashboard features a clean, professional interface with:

• Statistics cards showing key metrics at a glance
• Interactive bar charts for level distribution
• Pie charts for percentage breakdowns
• Seamless tab navigation between logs and dashboard views

This implementation provides immediate value to users by offering visual insights into their log data, making it easier to monitor application health and identify issues quickly.

Fixes #153.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.