| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>BuildLogInsight Dashboard</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#eff6ff', |
| 100: '#dbeafe', |
| 200: '#bfdbfe', |
| 300: '#93c5fd', |
| 400: '#60a5fa', |
| 500: '#3b82f6', |
| 600: '#2563eb', |
| 700: '#1d4ed8', |
| 800: '#1e40af', |
| 900: '#1e3a8a', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .warning-badge { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| 100% { opacity: 1; } |
| } |
| |
| .log-entry:hover { |
| background-color: #f8fafc; |
| transition: background-color 0.2s ease; |
| } |
| |
| .build-timeline { |
| position: relative; |
| } |
| |
| .build-timeline::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| left: 12px; |
| width: 2px; |
| background-color: #e2e8f0; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| |
| <nav class="bg-primary-800 text-white shadow-lg"> |
| <div class="container mx-auto px-4"> |
| <div class="flex justify-between items-center py-4"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="activity" class="w-8 h-8"></i> |
| <span class="text-xl font-bold">BuildLogInsight</span> |
| </div> |
| <div class="hidden md:flex space-x-6"> |
| <a href="#" class="hover:text-primary-200 transition-colors">Dashboard</a> |
| <a href="#" class="hover:text-primary-200 transition-colors">Log Details</a> |
| <a href="#" class="hover:text-primary-200 transition-colors">Analytics</a> |
| <a href="#" class="hover:text-primary-200 transition-colors">Settings</a> |
| </div> |
| <button class="md:hidden"> |
| <i data-feather="menu" class="w-6 h-6"></i> |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center"> |
| <div class="rounded-full bg-primary-100 p-3 mr-4"> |
| <i data-feather="clock" class="text-primary-600 w-5 h-5"></i> |
| </div> |
| <div> |
| <p class="text-sm text-gray-500">Build Duration</p> |
| <h3 class="text-2xl font-bold">27.78s</h3> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center"> |
| <div class="rounded-full bg-red-100 p-3 mr-4"> |
| <i data-feather="alert-triangle" class="text-red-600 w-5 h-5"></i> |
| </div> |
| <div> |
| <p class="text-sm text-gray-500">Warnings</p> |
| <h3 class="text-2xl font-bold text-red-600">112</h3> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center"> |
| <div class="rounded-full bg-green-100 p-3 mr-4"> |
| <i data-feather="check-circle" class="text-green-600 w-5 h-5"></i> |
| </div> |
| <div> |
| <p class="text-sm text-gray-500">Errors</p> |
| <h3 class="text-2xl font-bold text-green-600">0</h3> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center"> |
| <div class="rounded-full bg-blue-100 p-3 mr-4"> |
| <i data-feather="box" class="text-blue-600 w-5 h-5"></i> |
| </div> |
| <div> |
| <p class="text-sm text-gray-500">Projects</p> |
| <h3 class="text-2xl font-bold">4</h3> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <h3 class="text-lg font-semibold mb-4">Warning Types Distribution</h3> |
| <canvas id="warningChart" height="250"></canvas> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <h3 class="text-lg font-semibold mb-4">Build Timeline</h3> |
| <canvas id="timelineChart" height="250"></canvas> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow mb-8"> |
| <div class="px-6 py-4 border-b border-gray-200"> |
| <h3 class="text-lg font-semibold">Projects Overview</h3> |
| </div> |
| <div class="divide-y divide-gray-200"> |
| <div class="px-6 py-4 flex justify-between items-center"> |
| <div> |
| <h4 class="font-medium">Sias.Cosseguro</h4> |
| <p class="text-sm text-gray-500">3 warnings</p> |
| </div> |
| <span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full warning-badge">Warnings</span> |
| </div> |
| <div class="px-6 py-4 flex justify-between items-center"> |
| <div> |
| <h4 class="font-medium">FileTests.Test</h4> |
| <p class="text-sm text-gray-500">2 warnings</p> |
| </div> |
| <span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full warning-badge">Warnings</span> |
| </div> |
| <div class="px-6 py-4 flex justify-between items-center"> |
| <div> |
| <h4 class="font-medium">IA_ConverterCommons</h4> |
| <p class="text-sm text-gray-500">5 warnings</p> |
| </div> |
| <span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full warning-badge">Warnings</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow"> |
| <div class="px-6 py-4 border-b border-gray-200"> |
| <h3 class="text-lg font-semibold">Recent Log Entries</h3> |
| </div> |
| <div class="divide-y divide-gray-200"> |
| <div class="px-6 py-4 log-entry"> |
| <div class="flex items-start space-x-3"> |
| <div class="mt-1"> |
| <i data-feather="info" class="text-blue-500 w-4 h-4"></i> |
| </div> |
| <div> |
| <p class="text-sm"><span class="font-medium">[INFO]</span> Build started 24/09/2025 18:55:27</p> |
| <p class="text-xs text-gray-500">Process: C:\Program Files\dotnet\dotnet.exe</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="px-6 py-4 log-entry"> |
| <div class="flex items-start space-x-3"> |
| <div class="mt-1"> |
| <i data-feather="alert-triangle" class="text-yellow-500 w-4 h-4"></i> |
| </div> |
| <div> |
| <p class="text-sm"><span class="font-medium">[WARNING]</span> CS8632: The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.</p> |
| <p class="text-xs text-gray-500">File: DatabaseConnection.cs(44,21)</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="px-6 py-4 log-entry"> |
| <div class="flex items-start space-x-3"> |
| <div class="mt-1"> |
| <i data-feather="alert-triangle" class="text-yellow-500 w-4 h-4"></i> |
| </div> |
| <div> |
| <p class="text-sm"><span class="font-medium">[WARNING]</span> Fody: Could not find a FodyWeavers.xml file at the project level</p> |
| <p class="text-xs text-gray-500">Project: Sias.Cosseguro</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="px-6 py-4 log-entry"> |
| <div class="flex items-start space-x-3"> |
| <div class="mt-1"> |
| <i data-feather="check-circle" class="text-green-500 w-4 h-4"></i> |
| </div> |
| <div> |
| <p class="text-sm"><span class="font-medium">[SUCCESS]</span> Build completed with 112 warnings, 0 errors</p> |
| <p class="text-xs text-gray-500">Time Elapsed: 00:00:27.78</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const warningCtx = document.getElementById('warningChart').getContext('2d'); |
| new Chart(warningCtx, { |
| type: 'doughnut', |
| data: { |
| labels: ['CS8632', 'CS0168', 'CS0219', 'ASP0014', 'xUnit1013', 'Fody'], |
| datasets: [{ |
| data: [3, 4, 1, 1, 1, 2], |
| backgroundColor: [ |
| '#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899' |
| ] |
| }] |
| }, |
| options: { |
| responsive: true, |
| plugins: { |
| legend: { |
| position: 'right' |
| } |
| } |
| } |
| }); |
| |
| |
| const timelineCtx = document.getElementById('timelineChart').getContext('2d'); |
| new Chart(timelineCtx, { |
| type: 'bar', |
| data: { |
| labels: ['Build Start', 'Solution Validation', 'Project Validation', 'Compilation', 'Build Complete'], |
| datasets: [{ |
| label: 'Time (seconds)', |
| data: [0, 2, 4, 20, 27.78], |
| backgroundColor: '#3B82F6' |
| }] |
| }, |
| options: { |
| responsive: true, |
| scales: { |
| y: { |
| beginAtZero: true, |
| title: { |
| display: true, |
| text: 'Seconds' |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| feather.replace(); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
