282 lines
10 KiB
TypeScript
282 lines
10 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { usePathname } from "next/navigation";
|
|
import {
|
|
X,
|
|
Database,
|
|
Minimize2,
|
|
Maximize2,
|
|
Clock,
|
|
CircleDot,
|
|
Layout,
|
|
RefreshCw,
|
|
Globe,
|
|
Filter,
|
|
Calendar,
|
|
} from "lucide-react";
|
|
import type { RequestTiming } from "@/types/debug";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useDebug } from "@/contexts/DebugContext";
|
|
|
|
function formatTime(timestamp: string) {
|
|
const date = new Date(timestamp);
|
|
return date.toLocaleTimeString("fr-FR", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
second: "2-digit",
|
|
});
|
|
}
|
|
|
|
function formatDuration(duration: number) {
|
|
return Math.round(duration);
|
|
}
|
|
|
|
type FilterType = "all" | "current-page" | "api" | "cache" | "mongodb" | "page-render";
|
|
|
|
export function DebugInfo() {
|
|
const { logs, setLogs, clearLogs, isRefreshing, setIsRefreshing } = useDebug();
|
|
const [isMinimized, setIsMinimized] = useState(false);
|
|
const [filter, setFilter] = useState<FilterType>("all");
|
|
const [showFilters, setShowFilters] = useState(false);
|
|
const pathname = usePathname();
|
|
const { t } = useTranslation();
|
|
|
|
const fetchLogs = async () => {
|
|
try {
|
|
setIsRefreshing(true);
|
|
const response = await fetch("/api/debug");
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setLogs(data);
|
|
}
|
|
} catch (error) {
|
|
console.error("Erreur lors de la récupération des logs:", error);
|
|
} finally {
|
|
setIsRefreshing(false);
|
|
}
|
|
};
|
|
|
|
// Fonction pour déterminer si une requête appartient à la page courante
|
|
const isCurrentPageRequest = (log: RequestTiming): boolean => {
|
|
if (log.pageRender) {
|
|
return log.pageRender.page === pathname;
|
|
}
|
|
// Pour les requêtes API, on considère qu'elles appartiennent à la page courante
|
|
// si elles ont été faites récemment (dans les 30 dernières secondes)
|
|
const logTime = new Date(log.timestamp).getTime();
|
|
const now = Date.now();
|
|
return now - logTime < 30000; // 30 secondes
|
|
};
|
|
|
|
// Filtrer les logs selon le filtre sélectionné
|
|
const filteredLogs = logs.filter((log) => {
|
|
switch (filter) {
|
|
case "current-page":
|
|
return isCurrentPageRequest(log);
|
|
case "api":
|
|
return !log.fromCache && !log.mongoAccess && !log.pageRender;
|
|
case "cache":
|
|
return log.fromCache;
|
|
case "mongodb":
|
|
return log.mongoAccess;
|
|
case "page-render":
|
|
return log.pageRender;
|
|
default:
|
|
return true;
|
|
}
|
|
});
|
|
|
|
const sortedLogs = [...filteredLogs].reverse();
|
|
|
|
return (
|
|
<div
|
|
className={`fixed bottom-4 right-4 bg-zinc-900/90 backdrop-blur-md border border-zinc-700 rounded-lg shadow-lg p-4 text-zinc-100 z-50 ${
|
|
isMinimized ? "w-auto" : "w-[800px] max-h-[50vh] overflow-auto"
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between mb-4 sticky top-0 bg-zinc-900/90 backdrop-blur-md pb-2">
|
|
<div className="flex items-center gap-2">
|
|
<h2 className="font-bold text-lg">{t("debug.title")}</h2>
|
|
{!isMinimized && (
|
|
<span className="text-xs text-zinc-400">
|
|
{sortedLogs.length} {t("debug.entries", { count: sortedLogs.length })}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{!isMinimized && (
|
|
<button
|
|
onClick={() => setShowFilters(!showFilters)}
|
|
className={`hover:bg-zinc-700/80 hover:backdrop-blur-md rounded-full p-1.5 ${showFilters ? "bg-zinc-700/80 backdrop-blur-md" : ""}`}
|
|
aria-label="Filtres"
|
|
>
|
|
<Filter className="h-5 w-5" />
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={fetchLogs}
|
|
className="hover:bg-zinc-700/80 hover:backdrop-blur-md rounded-full p-1.5"
|
|
aria-label={t("debug.actions.refresh")}
|
|
disabled={isRefreshing}
|
|
>
|
|
<RefreshCw className={`h-5 w-5 ${isRefreshing ? "animate-spin" : ""}`} />
|
|
</button>
|
|
<button
|
|
onClick={() => setIsMinimized(!isMinimized)}
|
|
className="hover:bg-zinc-700/80 hover:backdrop-blur-md rounded-full p-1.5"
|
|
aria-label={t(isMinimized ? "debug.actions.maximize" : "debug.actions.minimize")}
|
|
>
|
|
{isMinimized ? <Maximize2 className="h-5 w-5" /> : <Minimize2 className="h-5 w-5" />}
|
|
</button>
|
|
<button
|
|
onClick={clearLogs}
|
|
className="hover:bg-zinc-700/80 hover:backdrop-blur-md rounded-full p-1.5"
|
|
aria-label={t("debug.actions.clear")}
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{!isMinimized && showFilters && (
|
|
<div className="mb-4 p-3 bg-zinc-800/80 backdrop-blur-md rounded-lg">
|
|
<div className="flex flex-wrap gap-2">
|
|
{[
|
|
{ key: "all", label: "Toutes", icon: Calendar },
|
|
{ key: "current-page", label: "Page courante", icon: Layout },
|
|
{ key: "api", label: "API", icon: Globe },
|
|
{ key: "cache", label: "Cache", icon: Database },
|
|
{ key: "mongodb", label: "MongoDB", icon: CircleDot },
|
|
{ key: "page-render", label: "Rendu", icon: Layout },
|
|
].map(({ key, label, icon: Icon }) => (
|
|
<button
|
|
key={key}
|
|
onClick={() => setFilter(key as FilterType)}
|
|
className={`flex items-center gap-1 px-3 py-1.5 rounded-full text-xs transition-colors ${
|
|
filter === key
|
|
? "bg-blue-600 text-white"
|
|
: "bg-zinc-700 text-zinc-300 hover:bg-zinc-600"
|
|
}`}
|
|
>
|
|
<Icon className="h-3 w-3" />
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{!isMinimized && (
|
|
<div className="space-y-3">
|
|
{sortedLogs.length === 0 ? (
|
|
<p className="text-sm opacity-75">{t("debug.noRequests")}</p>
|
|
) : (
|
|
sortedLogs.map((log, index) => {
|
|
const isCurrentPage = isCurrentPageRequest(log);
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={`text-sm space-y-1.5 p-2 rounded border-l-2 ${
|
|
isCurrentPage
|
|
? "bg-blue-900/20 border-blue-500"
|
|
: "bg-zinc-800 border-zinc-700"
|
|
}`}
|
|
>
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex items-center gap-2 min-w-0 flex-1">
|
|
{log.fromCache && (
|
|
<div
|
|
title={t("debug.tooltips.cache", { type: log.cacheType || "DEFAULT" })}
|
|
className="flex-shrink-0"
|
|
>
|
|
<Database className="h-4 w-4" />
|
|
</div>
|
|
)}
|
|
{log.mongoAccess && (
|
|
<div
|
|
title={t("debug.tooltips.mongodb", {
|
|
operation: log.mongoAccess.operation,
|
|
})}
|
|
className="flex-shrink-0"
|
|
>
|
|
<CircleDot className="h-4 w-4 text-blue-400" />
|
|
</div>
|
|
)}
|
|
{log.pageRender && (
|
|
<div
|
|
title={t("debug.tooltips.pageRender", { page: log.pageRender.page })}
|
|
className="flex-shrink-0"
|
|
>
|
|
<Layout className="h-4 w-4 text-purple-400" />
|
|
</div>
|
|
)}
|
|
{!log.fromCache && !log.mongoAccess && !log.pageRender && (
|
|
<div title={t("debug.tooltips.apiCall")} className="flex-shrink-0">
|
|
<Globe className="h-4 w-4 text-rose-400" />
|
|
</div>
|
|
)}
|
|
<span className="font-medium truncate" title={log.url}>
|
|
{log.url}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-3 flex-shrink-0">
|
|
<div
|
|
className="flex items-center gap-1 text-zinc-400"
|
|
title={t("debug.tooltips.logTime")}
|
|
>
|
|
<Clock className="h-3 w-3" />
|
|
<span>{formatTime(log.timestamp)}</span>
|
|
</div>
|
|
<span
|
|
className={`${
|
|
log.pageRender
|
|
? "text-purple-400"
|
|
: log.mongoAccess
|
|
? "text-blue-400"
|
|
: log.fromCache
|
|
? "text-emerald-400"
|
|
: "text-rose-400"
|
|
}`}
|
|
>
|
|
{formatDuration(log.duration)}ms
|
|
</span>
|
|
{log.mongoAccess && (
|
|
<span className="text-blue-400" title={t("debug.tooltips.mongoAccess")}>
|
|
+{formatDuration(log.mongoAccess.duration)}ms
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="h-1.5 bg-zinc-700 rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full ${
|
|
log.pageRender
|
|
? "bg-purple-500"
|
|
: log.fromCache
|
|
? "bg-emerald-500"
|
|
: "bg-rose-500"
|
|
}`}
|
|
style={{
|
|
width: `${Math.min((log.duration / 1000) * 100, 100)}%`,
|
|
}}
|
|
/>
|
|
{log.mongoAccess && (
|
|
<div
|
|
className="h-full bg-blue-500"
|
|
style={{
|
|
width: `${Math.min((log.mongoAccess.duration / 1000) * 100, 100)}%`,
|
|
marginTop: "-6px",
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|