Add dashboard for visualizing log data with charts and statistics

[Copilot]

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

🎨 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

🧪 Testing

• Unit tests for dashboard endpoint functionality
• Mock providers for testing different scenarios
• Error handling tests for robustness
• Both .NET backend and React frontend build successfully

📱 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.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• downloads.mongodb.org
  • Triggering command: /home/REDACTED/work/serilog-ui/serilog-ui/samples/WebApp/bin/Debug/net8.0/WebApp (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list

---

💡 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.

[mo-esmp]

@copilot could you split the PR into two separate ones—one for backend changes and one for frontend changes?