Skip to content

Commit 79bb2de

Browse files
aldotobingaldotobing
committed
Improve log info display and fix timestamp formatting
1 parent aff2aac commit 79bb2de

File tree

3 files changed

+244
-85
lines changed

3 files changed

+244
-85
lines changed

‎components/HttpMethodsChart.tsx‎

Lines changed: 112 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,25 @@ export function HttpMethodsChart({ data, className = "", onFilter, activeFilter,
5858
const [isModalOpen, setIsModalOpen] = useState(false);
5959
const chartRef = useRef<ChartJS<"doughnut">>(null);
6060

61+
// Function to format Nginx timestamp
62+
const formatNginxTimestamp = (timestamp: string) => {
63+
try {
64+
// Nginx timestamp format: 11/Aug/2025:03:30:00 +0700
65+
// Parse the timestamp properly
66+
const match = timestamp.match(/(\d{2})\/(\w{3})\/(\d{4}):(\d{2}):(\d{2}):(\d{2})/);
67+
if (match) {
68+
const [, day, month, year, hour, minute] = match;
69+
// Return an even shorter format: "08/11 03:30"
70+
return `${month}/${day} ${hour}:${minute}`;
71+
}
72+
// If parsing fails, return the original timestamp
73+
return timestamp;
74+
} catch (error) {
75+
// If any error occurs, return the original timestamp
76+
return timestamp;
77+
}
78+
};
79+
6180
useEffect(() => {
6281
const darkMode = document.documentElement.classList.contains("dark");
6382
setIsDarkMode(darkMode);
@@ -324,11 +343,22 @@ export function HttpMethodsChart({ data, className = "", onFilter, activeFilter,
324343
>
325344
<div className="flex justify-between items-center p-5 border-b border-gray-200/50 dark:border-gray-700/50">
326345
<div>
327-
<h3 className="text-xl font-bold text-gray-900 dark:text-white">
328-
{selectedMethod} Requests
329-
</h3>
330-
<p className="text-sm text-gray-500 dark:text-gray-400">
331-
{methodLogs.length} logs found
346+
<div className="flex items-center gap-3">
347+
<span
348+
className="px-3 py-1.5 rounded-lg text-sm font-semibold"
349+
style={{
350+
backgroundColor: `${HTTP_METHOD_COLORS[selectedMethod as keyof typeof HTTP_METHOD_COLORS]?.base}20` || 'rgba(99, 102, 241, 0.2)',
351+
color: HTTP_METHOD_COLORS[selectedMethod as keyof typeof HTTP_METHOD_COLORS]?.base || '#6366f1'
352+
}}
353+
>
354+
{selectedMethod}
355+
</span>
356+
<h3 className="text-xl font-bold text-gray-900 dark:text-white">
357+
Request Details
358+
</h3>
359+
</div>
360+
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
361+
Showing {methodLogs.length} logs
332362
</p>
333363
</div>
334364
<button
@@ -345,56 +375,109 @@ export function HttpMethodsChart({ data, className = "", onFilter, activeFilter,
345375
{methodLogs.slice(0, 50).map((log, index) => (
346376
<div
347377
key={index}
348-
className="bg-white dark:bg-gray-700/30 p-4 rounded-xl border border-gray-200/50 dark:border-gray-600/30 shadow-sm hover:shadow-md transition-shadow duration-200"
378+
className="bg-white dark:bg-gray-700/30 p-4 rounded-xl border border-gray-200/50 dark:border-gray-600/30 shadow-sm hover:shadow-md transition-all duration-200"
349379
>
350380
<div className="flex items-start gap-3">
351381
<span
352-
className="px-2.5 py-1 rounded-lg text-xs font-semibold flex-shrink-0 mt-1"
382+
className="px-2.5 py-1 rounded-lg text-xs font-semibold flex-shrink-0 mt-1 flex items-center gap-1"
353383
style={{
354384
backgroundColor: `${HTTP_METHOD_COLORS[selectedMethod as keyof typeof HTTP_METHOD_COLORS]?.base}20` || 'rgba(99, 102, 241, 0.2)',
355385
color: HTTP_METHOD_COLORS[selectedMethod as keyof typeof HTTP_METHOD_COLORS]?.base || '#6366f1'
356386
}}
357387
>
388+
<ArrowRightLeft className="w-3 h-3" />
358389
{log.method}
359390
</span>
360391
<div className="flex-1 min-w-0">
361-
<div className="text-gray-800 dark:text-gray-200 text-sm break-all mb-2">
392+
<div className="text-gray-800 dark:text-gray-200 text-sm font-medium break-all mb-2">
362393
{log.path}
363394
</div>
364-
<div className="flex flex-wrap gap-3 text-xs">
365-
<span className="text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-700/50 px-2 py-1 rounded">
366-
Status: {log.status}
367-
</span>
368-
<span className="text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-700/50 px-2 py-1 rounded">
369-
Size: {log.bodyBytesSent}
370-
</span>
371-
<span className="text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-700/50 px-2 py-1 rounded">
372-
IP: {log.ipAddress}
373-
</span>
374-
<span className="text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700/50 px-2 py-1 rounded">
375-
{log.timestamp}
376-
</span>
395+
396+
<div className="grid grid-cols-2 gap-2">
397+
<div className="flex items-center gap-2 bg-gray-50 dark:bg-gray-700/50 p-2 rounded-lg">
398+
<div className="bg-green-100 dark:bg-green-900/30 p-1 rounded-lg">
399+
<Zap className="w-3 h-3 text-green-600 dark:text-green-400" />
400+
</div>
401+
<div>
402+
<div className="text-xs text-gray-500 dark:text-gray-400">Status</div>
403+
<div className="text-xs font-medium text-gray-800 dark:text-gray-200">{log.status}</div>
404+
</div>
405+
</div>
406+
407+
<div className="flex items-center gap-2 bg-gray-50 dark:bg-gray-700/50 p-2 rounded-lg">
408+
<div className="bg-blue-100 dark:bg-blue-900/30 p-1 rounded-lg">
409+
<Server className="w-3 h-3 text-blue-600 dark:text-blue-400" />
410+
</div>
411+
<div>
412+
<div className="text-xs text-gray-500 dark:text-gray-400">Size</div>
413+
<div className="text-xs font-medium text-gray-800 dark:text-gray-200">{log.bodyBytesSent} bytes</div>
414+
</div>
415+
</div>
416+
417+
<div className="flex items-center gap-2 bg-gray-50 dark:bg-gray-700/50 p-2 rounded-lg">
418+
<div className="bg-purple-100 dark:bg-purple-900/30 p-1 rounded-lg">
419+
<AlertTriangle className="w-3 h-3 text-purple-600 dark:text-purple-400" />
420+
</div>
421+
<div>
422+
<div className="text-xs text-gray-500 dark:text-gray-400">IP</div>
423+
<div className="text-xs font-medium text-gray-800 dark:text-gray-200 font-mono">{log.ipAddress}</div>
424+
</div>
425+
</div>
426+
427+
<div className="flex items-center gap-2 bg-gray-50 dark:bg-gray-700/50 p-2 rounded-lg">
428+
<div className="bg-amber-100 dark:bg-amber-900/30 p-1 rounded-lg">
429+
<svg xmlns="http://www.w3.org/2000/svg" className="w-3 h-3 text-amber-600 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
430+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
431+
</svg>
432+
</div>
433+
<div>
434+
<div className="text-xs text-gray-500 dark:text-gray-400">Time</div>
435+
<div className="text-xs font-medium text-gray-800 dark:text-gray-200">{formatNginxTimestamp(log.timestamp)}</div>
436+
</div>
437+
</div>
377438
</div>
439+
440+
{log.userAgent && (
441+
<div className="mt-3 pt-3 border-t border-gray-200/50 dark:border-gray-600/30">
442+
<div className="text-xs text-gray-500 dark:text-gray-400 mb-1">User Agent</div>
443+
<div className="text-sm text-gray-700 dark:text-gray-300 break-all bg-gray-50 dark:bg-gray-700/30 p-2 rounded">
444+
{log.userAgent}
445+
</div>
446+
</div>
447+
)}
448+
449+
{log.referer && log.referer !== '-' && (
450+
<div className="mt-2">
451+
<div className="text-xs text-gray-500 dark:text-gray-400 mb-1">Referrer</div>
452+
<div className="text-sm text-gray-700 dark:text-gray-300 break-all bg-gray-50 dark:bg-gray-700/30 p-2 rounded">
453+
{log.referer}
454+
</div>
455+
</div>
456+
)}
378457
</div>
379458
</div>
380459
</div>
381460
))}
382461
{methodLogs.length > 50 && (
383-
<div className="text-center py-3 bg-gray-100/50 dark:bg-gray-700/30 rounded-lg">
384-
<p className="text-gray-600 dark:text-gray-300 text-sm">
385-
Showing first 50 of {methodLogs.length} logs
386-
</p>
462+
<div className="text-center py-4 bg-gray-100/50 dark:bg-gray-700/30 rounded-lg mt-2">
463+
<div className="inline-flex items-center gap-2 text-gray-600 dark:text-gray-300 text-sm">
464+
<AlertTriangle className="w-4 h-4" />
465+
<span>Showing first 50 of {methodLogs.length} logs</span>
466+
</div>
387467
</div>
388468
)}
389469
</div>
390470
) : (
391471
<div className="text-center py-16">
392-
<Server className="h-16 w-16 mx-auto text-gray-300 dark:text-gray-600 mb-4" />
393-
<h4 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
394-
No logs found
472+
<div className="mx-auto w-24 h-24 bg-gray-100 dark:bg-gray-700/50 rounded-full flex items-center justify-center mb-6">
473+
<Server className="h-12 w-12 text-gray-400 dark:text-gray-500" />
474+
</div>
475+
<h4 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
476+
No Request Logs Found
395477
</h4>
396478
<p className="text-gray-500 dark:text-gray-400 max-w-md mx-auto">
397-
No logs were found for the {selectedMethod} method. This might indicate that no requests of this type were made during the monitoring period.
479+
No logs were found for the <span className="font-semibold text-gray-900 dark:text-white">{selectedMethod}</span> method.
480+
This might indicate that no requests of this type were made during the monitoring period.
398481
</p>
399482
</div>
400483
)}

0 commit comments

Comments
 (0)