feat: finish request filter by status code

apps/dokploy/__test__/requests/request.test.ts

@@ -0,0 +1,56 @@
+import { processLogs, parseRawConfig } from "@/server/utils/access-log/utils";
+import { describe, it, expect } from "vitest";
+const sampleLogEntry = `{"ClientAddr":"172.19.0.1:56732","ClientHost":"172.19.0.1","ClientPort":"56732","ClientUsername":"-","DownstreamContentSize":0,"DownstreamStatus":304,"Duration":14729375,"OriginContentSize":0,"OriginDuration":14051833,"OriginStatus":304,"Overhead":677542,"RequestAddr":"s222-umami-c381af.traefik.me","RequestContentSize":0,"RequestCount":122,"RequestHost":"s222-umami-c381af.traefik.me","RequestMethod":"GET","RequestPath":"/dashboard?_rsc=1rugv","RequestPort":"-","RequestProtocol":"HTTP/1.1","RequestScheme":"http","RetryAttempts":0,"RouterName":"s222-umami-60e104-47-web@docker","ServiceAddr":"10.0.1.15:3000","ServiceName":"s222-umami-60e104-47-web@docker","ServiceURL":{"Scheme":"http","Opaque":"","User":null,"Host":"10.0.1.15:3000","Path":"","RawPath":"","ForceQuery":false,"RawQuery":"","Fragment":"","RawFragment":""},"StartLocal":"2024-08-25T04:34:37.306691884Z","StartUTC":"2024-08-25T04:34:37.306691884Z","entryPointName":"web","level":"info","msg":"","time":"2024-08-25T04:34:37Z"}`;
+
+describe("processLogs", () => {
+	it("should process a single log entry correctly", () => {
+		const result = processLogs(sampleLogEntry);
+		expect(result).toHaveLength(1);
+		expect(result[0]).toEqual({
+			hour: "2024-08-25T04:00:00Z",
+			count: 1,
+		});
+	});
+
+	it("should process multiple log entries and group by hour", () => {
+		const sampleLogEntry = `{"ClientAddr":"172.19.0.1:58094","ClientHost":"172.19.0.1","ClientPort":"58094","ClientUsername":"-","DownstreamContentSize":50,"DownstreamStatus":200,"Duration":35914250,"OriginContentSize":50,"OriginDuration":35817959,"OriginStatus":200,"Overhead":96291,"RequestAddr":"s222-pocketbase-f4a6e5.traefik.me","RequestContentSize":0,"RequestCount":991,"RequestHost":"s222-pocketbase-f4a6e5.traefik.me","RequestMethod":"GET","RequestPath":"/api/logs/stats?filter=","RequestPort":"-","RequestProtocol":"HTTP/1.1","RequestScheme":"http","RetryAttempts":0,"RouterName":"s222-pocketbase-e94e25-44-web@docker","ServiceAddr":"10.0.1.12:80","ServiceName":"s222-pocketbase-e94e25-44-web@docker","ServiceURL":{"Scheme":"http","Opaque":"","User":null,"Host":"10.0.1.12:80","Path":"","RawPath":"","ForceQuery":false,"RawQuery":"","Fragment":"","RawFragment":""},"StartLocal":"2024-08-25T17:44:29.274072471Z","StartUTC":"2024-08-25T17:44:29.274072471Z","entryPointName":"web","level":"info","msg":"","time":"2024-08-25T17:44:29Z"}
+{"ClientAddr":"172.19.0.1:58108","ClientHost":"172.19.0.1","ClientPort":"58108","ClientUsername":"-","DownstreamContentSize":30975,"DownstreamStatus":200,"Duration":31406458,"OriginContentSize":30975,"OriginDuration":31046791,"OriginStatus":200,"Overhead":359667,"RequestAddr":"s222-pocketbase-f4a6e5.traefik.me","RequestContentSize":0,"RequestCount":992,"RequestHost":"s222-pocketbase-f4a6e5.traefik.me","RequestMethod":"GET","RequestPath":"/api/logs?page=1\u0026perPage=50\u0026sort=-rowid\u0026skipTotal=1\u0026filter=","RequestPort":"-","RequestProtocol":"HTTP/1.1","RequestScheme":"http","RetryAttempts":0,"RouterName":"s222-pocketbase-e94e25-44-web@docker","ServiceAddr":"10.0.1.12:80","ServiceName":"s222-pocketbase-e94e25-44-web@docker","ServiceURL":{"Scheme":"http","Opaque":"","User":null,"Host":"10.0.1.12:80","Path":"","RawPath":"","ForceQuery":false,"RawQuery":"","Fragment":"","RawFragment":""},"StartLocal":"2024-08-25T17:44:29.278990221Z","StartUTC":"2024-08-25T17:44:29.278990221Z","entryPointName":"web","level":"info","msg":"","time":"2024-08-25T17:44:29Z"}
+`;
+
+		const result = processLogs(sampleLogEntry);
+		expect(result).toHaveLength(1);
+		expect(result).toEqual([{ hour: "2024-08-25T17:00:00Z", count: 2 }]);
+	});
+
+	it("should return an empty array for empty input", () => {
+		expect(processLogs("")).toEqual([]);
+		expect(processLogs(null as any)).toEqual([]);
+		expect(processLogs(undefined as any)).toEqual([]);
+	});
+
+	it("should parse a single log entry correctly", () => {
+		const result = parseRawConfig(sampleLogEntry);
+		expect(result).toHaveLength(1);
+		expect(result[0]).toHaveProperty("ClientAddr", "172.19.0.1:56732");
+		expect(result[0]).toHaveProperty(
+			"StartUTC",
+			"2024-08-25T04:34:37.306691884Z",
+		);
+	});
+
+	it("should parse multiple log entries", () => {
+		const multipleEntries = `${sampleLogEntry}\n${sampleLogEntry}`;
+		const result = parseRawConfig(multipleEntries);
+		expect(result).toHaveLength(2);
+
+		for (const entry of result) {
+			expect(entry).toHaveProperty("ClientAddr", "172.19.0.1:56732");
+		}
+	});
+
+	it("should handle whitespace and empty lines", () => {
+		const entryWithWhitespace = `\n${sampleLogEntry}\n\n${sampleLogEntry}\n`;
+		const result = parseRawConfig(entryWithWhitespace);
+		expect(result).toHaveLength(2);
+	});
+});

apps/dokploy/components/dashboard/requests/columns.tsx

@@ -1,18 +1,27 @@
 import type { ColumnDef } from "@tanstack/react-table";
-import { ArrowUpDown, MoreHorizontal } from "lucide-react";
+import { ArrowUpDown } from "lucide-react";
 import * as React from "react";
 import { Button } from "@/components/ui/button";
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuLabel,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-
 import { Badge } from "@/components/ui/badge";
 import type { LogEntry } from "./show-requests";
 import { format } from "date-fns";
 
+export const getStatusColor = (status: number) => {
+	if (status >= 100 && status < 200) {
+		return "outline";
+	}
+	if (status >= 200 && status < 300) {
+		return "default";
+	}
+	if (status >= 300 && status < 400) {
+		return "outline";
+	}
+	if (status >= 400 && status < 500) {
+		return "destructive";
+	}
+	return "destructive";
+};
+
 export const columns: ColumnDef<LogEntry>[] = [
 	{
 		accessorKey: "level",
@@ -52,13 +61,11 @@ export const columns: ColumnDef<LogEntry>[] = [
 						{log.RequestMethod} {log.RequestPath}
 					</div>
 					<div className="flex flex-row gap-3 w-full">
-						<Badge
-							variant={log.OriginStatus <= 200 ? "default" : "destructive"}
-						>
+						<Badge variant={getStatusColor(log.OriginStatus)}>
 							Status: {log.OriginStatus}
 						</Badge>
 						<Badge variant={"secondary"}>
-							Exec Time: {convertMicroseconds(log.Duration)}
+							Exec Time: {`${log.Duration / 1000000000}s`}
 						</Badge>
 						<Badge variant={"secondary"}>IP: {log.ClientAddr}</Badge>
 					</div>
@@ -91,12 +98,3 @@ export const columns: ColumnDef<LogEntry>[] = [
 		},
 	},
 ];
-function convertMicroseconds(microseconds: number): string {
-	if (microseconds < 1000) {
-		return `${microseconds} µs`;
-	}
-	if (microseconds < 1000000) {
-		return `${(microseconds / 1000).toFixed(2)} ms`;
-	}
-	return `${(microseconds / 1000000).toFixed(2)} s`;
-}

apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx

@@ -0,0 +1,78 @@
+import { api } from "@/utils/api";
+import {
+	Area,
+	AreaChart,
+	CartesianGrid,
+	ResponsiveContainer,
+	XAxis,
+	YAxis,
+} from "recharts";
+import {
+	type ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from "@/components/ui/chart";
+
+const chartConfig = {
+	views: {
+		label: "Page Views",
+	},
+	count: {
+		label: "Count",
+		color: "hsl(var(--chart-1))",
+	},
+} satisfies ChartConfig;
+
+export const RequestDistributionChart = () => {
+	const { data: stats } = api.settings.readStats.useQuery();
+
+	return (
+		<ResponsiveContainer width="100%" height={200}>
+			<ChartContainer config={chartConfig}>
+				<AreaChart
+					accessibilityLayer
+					data={stats || []}
+					margin={{
+						left: 12,
+						right: 12,
+					}}
+				>
+					<CartesianGrid vertical={false} />
+					<XAxis
+						dataKey="hour"
+						tickLine={false}
+						axisLine={false}
+						tickMargin={8}
+						tickFormatter={(value) =>
+							new Date(value).toLocaleTimeString([], {
+								hour: "2-digit",
+								minute: "2-digit",
+							})
+						}
+					/>
+					<YAxis tickLine={false} axisLine={false} tickMargin={8} />
+					<ChartTooltip
+						cursor={false}
+						content={<ChartTooltipContent indicator="line" />}
+						labelFormatter={(value) =>
+							new Date(value).toLocaleString([], {
+								month: "short",
+								day: "numeric",
+								hour: "2-digit",
+								minute: "2-digit",
+							})
+						}
+					/>
+					<Area
+						dataKey="count"
+						type="natural"
+						fill="hsl(var(--chart-1))"
+						fillOpacity={0.4}
+						stroke="hsl(var(--chart-1))"
+					/>
+				</AreaChart>
+			</ChartContainer>
+		</ResponsiveContainer>
+	);
+};

apps/dokploy/components/dashboard/requests/requests-table.tsx

@@ -0,0 +1,340 @@
+import { api } from "@/utils/api";
+import {
+	type SortingState,
+	type PaginationState,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getSortedRowModel,
+	useReactTable,
+	type ColumnFiltersState,
+	type VisibilityState,
+	flexRender,
+} from "@tanstack/react-table";
+import { useMemo, useState } from "react";
+import type { LogEntry } from "./show-requests";
+import { Badge } from "@/components/ui/badge";
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetHeader,
+	SheetTitle,
+} from "@/components/ui/sheet";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { columns, getStatusColor } from "./columns";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+	ChevronDown,
+	Copy,
+	Download,
+	InfoIcon,
+	CheckCircle2Icon,
+	TrendingUpIcon,
+	Globe,
+	Server,
+} from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { DataTableFacetedFilter } from "./status-request-filter";
+
+export const priorities = [
+	{
+		label: "100 - 199",
+		value: "info",
+		icon: InfoIcon,
+	},
+	{
+		label: "200 - 299",
+		value: "success",
+		icon: CheckCircle2Icon,
+	},
+	{
+		label: "300 - 399",
+		value: "redirect",
+		icon: TrendingUpIcon,
+	},
+	{
+		label: "400 - 499",
+		value: "client",
+		icon: Globe,
+	},
+	{
+		label: "500 - 599",
+		value: "server",
+		icon: Server,
+	},
+];
+export const RequestsTable = () => {
+	const [statusFilter, setStatusFilter] = useState<string[]>([]);
+	const [search, setSearch] = useState("");
+	const [selectedRow, setSelectedRow] = useState<LogEntry>();
+	const [sorting, setSorting] = useState<SortingState>([]);
+	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+	const [rowSelection, setRowSelection] = useState({});
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+	const [pagination, setPagination] = useState<PaginationState>({
+		pageIndex: 0,
+		pageSize: 10,
+	});
+
+	const { data: statsLogs, isLoading } = api.settings.readStatsLogs.useQuery({
+		sort: sorting[0],
+		page: pagination,
+		search,
+		status: statusFilter,
+	});
+
+	const pageCount = useMemo(() => {
+		if (statsLogs?.totalCount) {
+			return Math.ceil(statsLogs.totalCount / pagination.pageSize);
+		}
+		return -1;
+	}, [statsLogs?.totalCount, pagination.pageSize]);
+
+	const table = useReactTable({
+		data: statsLogs?.data ?? [],
+		columns,
+		onPaginationChange: setPagination,
+		onSortingChange: setSorting,
+		pageCount: pageCount,
+		onColumnFiltersChange: setColumnFilters,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		onColumnVisibilityChange: setColumnVisibility,
+		onRowSelectionChange: setRowSelection,
+		manualPagination: true,
+		state: {
+			pagination,
+			sorting,
+			columnFilters,
+			columnVisibility,
+			rowSelection,
+		},
+	});
+
+	const formatValue = (key: string, value: any) => {
+		if (typeof value === "object" && value !== null) {
+			return JSON.stringify(value, null, 2);
+		}
+		if (key === "Duration" || key === "OriginDuration" || key === "Overhead") {
+			return `${value / 1000000000} s`;
+		}
+		if (key === "level") {
+			return <Badge variant="secondary">{value}</Badge>;
+		}
+		if (key === "RequestMethod") {
+			return <Badge variant="outline">{value}</Badge>;
+		}
+		if (key === "DownstreamStatus" || key === "OriginStatus") {
+			return <Badge variant={getStatusColor(value)}>{value}</Badge>;
+		}
+		return value;
+	};
+
+	return (
+		<>
+			<div className="flex flex-col gap-6 w-full ">
+				<div className="mt-6 grid gap-4 pb-20 w-full">
+					<div className="flex flex-col gap-4  w-full overflow-auto">
+						<div className="flex items-center gap-2 max-sm:flex-wrap">
+							<Input
+								placeholder="Filter by name..."
+								value={search}
+								onChange={(event) => setSearch(event.target.value)}
+								className="md:max-w-sm"
+							/>
+							<DataTableFacetedFilter
+								value={statusFilter}
+								setValue={setStatusFilter}
+								title="Status"
+								options={priorities}
+							/>
+							<DropdownMenu>
+								<DropdownMenuTrigger asChild>
+									<Button
+										variant="outline"
+										className="sm:ml-auto max-sm:w-full"
+									>
+										Columns <ChevronDown className="ml-2 h-4 w-4" />
+									</Button>
+								</DropdownMenuTrigger>
+								<DropdownMenuContent align="end">
+									{table
+										.getAllColumns()
+										.filter((column) => column.getCanHide())
+										.map((column) => {
+											return (
+												<DropdownMenuCheckboxItem
+													key={column.id}
+													className="capitalize"
+													checked={column.getIsVisible()}
+													onCheckedChange={(value) =>
+														column.toggleVisibility(!!value)
+													}
+												>
+													{column.id}
+												</DropdownMenuCheckboxItem>
+											);
+										})}
+								</DropdownMenuContent>
+							</DropdownMenu>
+						</div>
+						<div className="rounded-md border ">
+							<Table>
+								<TableHeader>
+									{table.getHeaderGroups().map((headerGroup) => (
+										<TableRow key={headerGroup.id}>
+											{headerGroup.headers.map((header) => {
+												return (
+													<TableHead key={header.id}>
+														{header.isPlaceholder
+															? null
+															: flexRender(
+																	header.column.columnDef.header,
+																	header.getContext(),
+																)}
+													</TableHead>
+												);
+											})}
+										</TableRow>
+									))}
+								</TableHeader>
+								<TableBody>
+									{table.getRowModel().rows?.length ? (
+										table.getRowModel().rows.map((row) => (
+											<TableRow
+												key={row.id}
+												className="cursor-pointer"
+												onClick={() => {
+													setSelectedRow(row.original);
+												}}
+												data-state={row.getIsSelected() && "selected"}
+											>
+												{row.getVisibleCells().map((cell) => (
+													<TableCell key={cell.id}>
+														{flexRender(
+															cell.column.columnDef.cell,
+															cell.getContext(),
+														)}
+													</TableCell>
+												))}
+											</TableRow>
+										))
+									) : (
+										<TableRow>
+											<TableCell
+												colSpan={columns.length}
+												className="h-24 text-center"
+											>
+												{isLoading ? (
+													<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+														<span className="text-muted-foreground text-lg font-medium">
+															Loading...
+														</span>
+													</div>
+												) : (
+													<>No results.</>
+												)}
+											</TableCell>
+										</TableRow>
+									)}
+								</TableBody>
+							</Table>
+						</div>
+						<div className="flex items-center justify-end space-x-2 py-4">
+							{statsLogs?.totalCount && (
+								<span className="text-muted-foreground text-sm">
+									Showing{" "}
+									{Math.min(
+										pagination.pageIndex * pagination.pageSize + 1,
+										statsLogs.totalCount,
+									)}{" "}
+									to{" "}
+									{Math.min(
+										(pagination.pageIndex + 1) * pagination.pageSize,
+										statsLogs.totalCount,
+									)}{" "}
+									of {statsLogs.totalCount} entries
+								</span>
+							)}
+							<div className="space-x-2 flex flex-wrap">
+								<Button
+									variant="outline"
+									size="sm"
+									onClick={() => table.previousPage()}
+									disabled={!table.getCanPreviousPage()}
+								>
+									Previous
+								</Button>
+								<Button
+									variant="outline"
+									size="sm"
+									onClick={() => table.nextPage()}
+									disabled={!table.getCanNextPage()}
+								>
+									Next
+								</Button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<Sheet
+				open={!!selectedRow}
+				onOpenChange={(open) => setSelectedRow(undefined)}
+			>
+				<SheetContent className="sm:max-w-[740px]  flex flex-col">
+					<SheetHeader>
+						<SheetTitle>Request log</SheetTitle>
+						<SheetDescription>
+							Details of the request log entry.
+						</SheetDescription>
+					</SheetHeader>
+					<ScrollArea className="flex-grow mt-4 pr-4">
+						<div className="border rounded-md">
+							<Table>
+								<TableBody>
+									{Object.entries(selectedRow || {}).map(([key, value]) => (
+										<TableRow key={key}>
+											<TableCell className="font-medium">{key}</TableCell>
+											<TableCell className="truncate break-words break-before-all whitespace-pre-wrap">
+												{key === "RequestAddr" ? (
+													<div className="flex items-center gap-2 bg-muted p-1 rounded">
+														<span>{value}</span>
+														<Copy className="h-4 w-4 text-muted-foreground cursor-pointer" />
+													</div>
+												) : (
+													formatValue(key, value)
+												)}
+											</TableCell>
+										</TableRow>
+									))}
+								</TableBody>
+							</Table>
+						</div>
+					</ScrollArea>
+					<div className="mt-4 pt-4 border-t">
+						<Button variant="outline" className="w-full gap-2">
+							<Download className="h-4 w-4" />
+							Download as JSON
+						</Button>
+					</div>
+				</SheetContent>
+			</Sheet>
+		</>
+	);
+};

apps/dokploy/components/dashboard/requests/show-requests.tsx

@@ -1,128 +1,22 @@
 import { api, type RouterOutputs } from "@/utils/api";
-import {
-	type ColumnFiltersState,
-	type SortingState,
-	type VisibilityState,
-	flexRender,
-	getCoreRowModel,
-	getFilteredRowModel,
-	getPaginationRowModel,
-	getSortedRowModel,
-	useReactTable,
-} from "@tanstack/react-table";
 import * as React from "react";
-import {
-	Area,
-	AreaChart,
-	Bar,
-	BarChart,
-	CartesianGrid,
-	ResponsiveContainer,
-	XAxis,
-	YAxis,
-} from "recharts";
 import {
 	Card,
 	CardContent,
 	CardDescription,
-	CardFooter,
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import {
-	type ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-} from "@/components/ui/chart";
-import {
-	Sheet,
-	SheetContent,
-	SheetDescription,
-	SheetHeader,
-	SheetTitle,
-	SheetTrigger,
-} from "@/components/ui/sheet";
-
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import {
-	ChevronDown,
-	Copy,
-	Download,
-	MoreHorizontal,
-	TrendingUp,
-} from "lucide-react";
-import {
-	DropdownMenu,
-	DropdownMenuCheckboxItem,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-	Table,
-	TableBody,
-	TableCaption,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/components/ui/table";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { columns } from "./columns";
-import { Input } from "@/components/ui/input";
 import { toast } from "sonner";
-import { useEffect, useState } from "react";
-import { ScrollArea } from "@/components/ui/scroll-area";
+import { RequestDistributionChart } from "./request-distribution-chart";
+import { RequestsTable } from "./requests-table";
 
 export type LogEntry = NonNullable<
-	RouterOutputs["settings"]["readMonitoringConfig"]["data"]
+	RouterOutputs["settings"]["readStatsLogs"]["data"]
 >[0];
 
-const chartConfig = {
-	views: {
-		label: "Page Views",
-	},
-	count: {
-		label: "Count",
-		color: "hsl(var(--chart-1))",
-	},
-} satisfies ChartConfig;
-
-const requestLog = {
-	id: "zagp0jxukx0mw7h",
-	level: "ERROR (8)",
-	created: "2024-08-25 05:33:45.366 UTC",
-	"data.execTime": "0.056928ms",
-	"data.type": "request",
-	"data.auth": "guest",
-	"data.status": "404",
-	"data.method": "GET",
-	"data.url": "/favicon.ico",
-	"data.referer": "http://testing2-pocketbase-8d9cd5-5-161-87-31.traefik.me/",
-	"data.remoteIp": "10.0.1.184",
-	"data.userIp": "179.49.119.201",
-	"data.userAgent":
-		"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36",
-	"data.error": "Not Found.",
-	"data.details": "code=404, message=Not Found",
-};
 export const ShowRequests = () => {
-	const { data, isLoading } = api.settings.readMonitoringConfig.useQuery(
-		undefined,
-		{
-			refetchInterval: 1000,
-		},
-	);
-	const [selectedRow, setSelectedRow] = useState<LogEntry>();
 	const { data: isLogRotateActive, refetch: refetchLogRotate } =
 		api.settings.getLogRotateStatus.useQuery();
 
@@ -130,32 +24,6 @@ export const ShowRequests = () => {
 	const { mutateAsync: deactivateLogRotate } =
 		api.settings.deactivateLogRotate.useMutation();
 
-	const [sorting, setSorting] = React.useState<SortingState>([]);
-	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-		[],
-	);
-	const [columnVisibility, setColumnVisibility] =
-		React.useState<VisibilityState>({});
-	const [rowSelection, setRowSelection] = React.useState({});
-
-	const table = useReactTable({
-		data: data?.data ?? [],
-		columns,
-		onSortingChange: setSorting,
-		onColumnFiltersChange: setColumnFilters,
-		getCoreRowModel: getCoreRowModel(),
-		getPaginationRowModel: getPaginationRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		getFilteredRowModel: getFilteredRowModel(),
-		onColumnVisibilityChange: setColumnVisibility,
-		onRowSelectionChange: setRowSelection,
-		state: {
-			sorting,
-			columnFilters,
-			columnVisibility,
-			rowSelection,
-		},
-	});
 	return (
 		<>
 			<Card className="bg-transparent mt-10">
@@ -201,240 +69,10 @@ export const ShowRequests = () => {
 					</div>
 				</CardHeader>
 				<CardContent>
-					<ResponsiveContainer width="100%" height={200}>
-						<ChartContainer config={chartConfig}>
-							<AreaChart
-								accessibilityLayer
-								data={data?.hourlyData || []}
-								margin={{
-									left: 12,
-									right: 12,
-								}}
-							>
-								<CartesianGrid vertical={false} />
-								<XAxis
-									dataKey="hour"
-									tickLine={false}
-									axisLine={false}
-									tickMargin={8}
-									tickFormatter={(value) =>
-										new Date(value).toLocaleTimeString([], {
-											hour: "2-digit",
-											minute: "2-digit",
-										})
-									}
-								/>
-								<YAxis tickLine={false} axisLine={false} tickMargin={8} />
-								<ChartTooltip
-									cursor={false}
-									content={<ChartTooltipContent indicator="line" />}
-									labelFormatter={(value) =>
-										new Date(value).toLocaleString([], {
-											month: "short",
-											day: "numeric",
-											hour: "2-digit",
-											minute: "2-digit",
-										})
-									}
-								/>
-								<Area
-									dataKey="count"
-									type="natural"
-									fill="hsl(var(--chart-1))"
-									fillOpacity={0.4}
-									stroke="hsl(var(--chart-1))"
-								/>
-							</AreaChart>
-						</ChartContainer>
-					</ResponsiveContainer>
+					<RequestDistributionChart />
 				</CardContent>
 			</Card>
-
-			<div className="flex flex-col gap-6 w-full">
-				<div className="mt-6 grid gap-4 pb-20 w-full">
-					<div className="flex flex-col gap-4  w-full overflow-auto">
-						<div className="flex items-center gap-2 max-sm:flex-wrap">
-							<Input
-								placeholder="Filter by name..."
-								value={
-									(table
-										.getColumn("RequestPath")
-										?.getFilterValue() as string) ?? ""
-								}
-								onChange={(event) =>
-									table
-										.getColumn("RequestPath")
-										?.setFilterValue(event.target.value)
-								}
-								className="md:max-w-sm"
-							/>
-							<DropdownMenu>
-								<DropdownMenuTrigger asChild>
-									<Button
-										variant="outline"
-										className="sm:ml-auto max-sm:w-full"
-									>
-										Columns <ChevronDown className="ml-2 h-4 w-4" />
-									</Button>
-								</DropdownMenuTrigger>
-								<DropdownMenuContent align="end">
-									{table
-										.getAllColumns()
-										.filter((column) => column.getCanHide())
-										.map((column) => {
-											return (
-												<DropdownMenuCheckboxItem
-													key={column.id}
-													className="capitalize"
-													checked={column.getIsVisible()}
-													onCheckedChange={(value) =>
-														column.toggleVisibility(!!value)
-													}
-												>
-													{column.id}
-												</DropdownMenuCheckboxItem>
-											);
-										})}
-								</DropdownMenuContent>
-							</DropdownMenu>
-						</div>
-						<div className="rounded-md border">
-							<Table>
-								<TableHeader>
-									{table.getHeaderGroups().map((headerGroup) => (
-										<TableRow key={headerGroup.id}>
-											{headerGroup.headers.map((header) => {
-												return (
-													<TableHead key={header.id}>
-														{header.isPlaceholder
-															? null
-															: flexRender(
-																	header.column.columnDef.header,
-																	header.getContext(),
-																)}
-													</TableHead>
-												);
-											})}
-										</TableRow>
-									))}
-								</TableHeader>
-								<TableBody>
-									{table.getRowModel().rows?.length ? (
-										table.getRowModel().rows.map((row) => (
-											<TableRow
-												key={row.id}
-												className="cursor-pointer"
-												onClick={() => {
-													setSelectedRow(row.original);
-												}}
-												data-state={row.getIsSelected() && "selected"}
-											>
-												{row.getVisibleCells().map((cell) => (
-													<TableCell key={cell.id}>
-														{flexRender(
-															cell.column.columnDef.cell,
-															cell.getContext(),
-														)}
-													</TableCell>
-												))}
-											</TableRow>
-										))
-									) : (
-										<TableRow>
-											<TableCell
-												colSpan={columns.length}
-												className="h-24 text-center"
-											>
-												{isLoading ? (
-													<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-														<span className="text-muted-foreground text-lg font-medium">
-															Loading...
-														</span>
-													</div>
-												) : (
-													<>No results.</>
-												)}
-											</TableCell>
-										</TableRow>
-									)}
-								</TableBody>
-							</Table>
-						</div>
-						<div className="flex items-center justify-end space-x-2 py-4">
-							<div className="space-x-2 flex flex-wrap">
-								<Button
-									variant="outline"
-									size="sm"
-									onClick={() => table.previousPage()}
-									disabled={!table.getCanPreviousPage()}
-								>
-									Previous
-								</Button>
-								<Button
-									variant="outline"
-									size="sm"
-									onClick={() => table.nextPage()}
-									disabled={!table.getCanNextPage()}
-								>
-									Next
-								</Button>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<Sheet
-				open={!!selectedRow}
-				onOpenChange={(open) => setSelectedRow(undefined)}
-			>
-				<SheetContent className="w-[400px] sm:w-[540px] sm:max-w-none flex flex-col">
-					<SheetHeader>
-						<SheetTitle>Request log</SheetTitle>
-						<SheetDescription>
-							Details of the request log entry.
-						</SheetDescription>
-					</SheetHeader>
-					<ScrollArea className="flex-grow mt-4 pr-4">
-						<div className="border rounded-md">
-							<Table>
-								<TableBody>
-									{Object.entries(requestLog).map(([key, value]) => (
-										<TableRow key={key}>
-											<TableCell className="font-medium">{key}</TableCell>
-											<TableCell>
-												{key === "id" ? (
-													<div className="flex items-center gap-2 bg-muted p-1 rounded">
-														<span>{value}</span>
-														<Copy className="h-4 w-4 text-muted-foreground" />
-													</div>
-												) : key === "level" ? (
-													<Badge variant="destructive">{value}</Badge>
-												) : key === "data.error" ? (
-													<Badge variant="destructive" className="font-normal">
-														{value}
-													</Badge>
-												) : key === "data.details" ? (
-													<div className="bg-muted p-2 rounded text-xs">
-														{value}
-													</div>
-												) : (
-													value
-												)}
-											</TableCell>
-										</TableRow>
-									))}
-								</TableBody>
-							</Table>
-						</div>
-					</ScrollArea>
-					<div className="mt-4 pt-4 border-t">
-						<Button variant="outline" className="w-full gap-2">
-							<Download className="h-4 w-4" />
-							Download as JSON
-						</Button>
-					</div>
-				</SheetContent>
-			</Sheet>
+			<RequestsTable />
 		</>
 	);
 };

apps/dokploy/components/dashboard/requests/status-request-filter.tsx

@@ -0,0 +1,138 @@
+import { cn } from "@/lib/utils";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	CommandSeparator,
+} from "@/components/ui/command";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { CheckIcon, PlusCircle } from "lucide-react";
+
+interface DataTableFacetedFilterProps {
+	value?: string[];
+	setValue?: (value: string[]) => void;
+	title?: string;
+	options: {
+		label: string;
+		value: string;
+		icon?: React.ComponentType<{ className?: string }>;
+	}[];
+}
+
+export function DataTableFacetedFilter({
+	value = [],
+	setValue,
+	title,
+	options,
+}: DataTableFacetedFilterProps) {
+	const selectedValues = new Set(value as string[]);
+
+	return (
+		<Popover>
+			<PopoverTrigger asChild>
+				<Button variant="outline" size="sm" className="h-8 border-dashed">
+					<PlusCircle className="mr-2 h-4 w-4" />
+					{title}
+					{selectedValues?.size > 0 && (
+						<>
+							<Separator orientation="vertical" className="mx-2 h-4" />
+							<Badge
+								variant="secondary"
+								className="rounded-sm px-1 font-normal lg:hidden"
+							>
+								{selectedValues.size}
+							</Badge>
+							<div className="hidden space-x-1 lg:flex">
+								{selectedValues.size > 2 ? (
+									<Badge
+										variant="secondary"
+										className="rounded-sm px-1 font-normal"
+									>
+										{selectedValues.size} selected
+									</Badge>
+								) : (
+									options
+										.filter((option) => selectedValues.has(option.value))
+										.map((option) => (
+											<Badge
+												variant="secondary"
+												key={option.value}
+												className="rounded-sm px-1 font-normal"
+											>
+												{option.label}
+											</Badge>
+										))
+								)}
+							</div>
+						</>
+					)}
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-[200px] p-0" align="start">
+				<Command>
+					<CommandInput placeholder={title} />
+					<CommandList>
+						<CommandEmpty>No results found.</CommandEmpty>
+						<CommandGroup>
+							{options.map((option) => {
+								const isSelected = selectedValues.has(option.value);
+								return (
+									<CommandItem
+										key={option.value}
+										onSelect={() => {
+											if (isSelected) {
+												selectedValues.delete(option.value);
+											} else {
+												selectedValues.add(option.value);
+											}
+											const filterValues = Array.from(selectedValues);
+											setValue?.(filterValues.length ? filterValues : []);
+										}}
+									>
+										<div
+											className={cn(
+												"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+												isSelected
+													? "bg-primary text-primary-foreground"
+													: "opacity-50 [&_svg]:invisible",
+											)}
+										>
+											<CheckIcon className={cn("h-4 w-4")} />
+										</div>
+										{option.icon && (
+											<option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+										)}
+										<span>{option.label}</span>
+									</CommandItem>
+								);
+							})}
+						</CommandGroup>
+						{selectedValues.size > 0 && (
+							<>
+								<CommandSeparator />
+								<CommandGroup>
+									<CommandItem
+										onSelect={() => setValue?.([])}
+										className="justify-center text-center"
+									>
+										Clear filters
+									</CommandItem>
+								</CommandGroup>
+							</>
+						)}
+					</CommandList>
+				</Command>
+			</PopoverContent>
+		</Popover>
+	);
+}

apps/dokploy/components/ui/sheet.tsx

@@ -29,7 +29,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-	"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+	"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-300",
 	{
 		variants: {
 			side: {

apps/dokploy/package.json

@@ -128,7 +128,9 @@
 		"ws": "8.16.0",
 		"xterm-addon-fit": "^0.8.0",
 		"zod": "^3.23.4",
-		"zod-form-data": "^2.0.2"
+		"zod-form-data": "^2.0.2",
+		"@radix-ui/react-primitive": "2.0.0",
+		"@radix-ui/react-use-controllable-state": "1.1.0"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.8.3",

apps/dokploy/server/api/routers/settings.ts

@@ -3,6 +3,7 @@ import {
 	apiAssignDomain,
 	apiEnableDashboard,
 	apiModifyTraefikConfig,
+	apiReadStatsLogs,
 	apiReadTraefikConfig,
 	apiSaveSSHKey,
 	apiTraefikConfig,
@@ -350,14 +351,22 @@ export const settingsRouter = createTRPCRouter({
 		return false;
 	}),
 
-	readMonitoringConfig: adminProcedure.query(() => {
+	readStatsLogs: adminProcedure.input(apiReadStatsLogs).query(({ input }) => {
+		const rawConfig = readMonitoringConfig();
+		const parsedConfig = parseRawConfig(
+			rawConfig as string,
+			input.page,
+			input.sort,
+			input.search,
+			input.status,
+		);
+
+		return parsedConfig;
+	}),
+	readStats: adminProcedure.query(() => {
 		const rawConfig = readMonitoringConfig();
-		const parsedConfig = parseRawConfig(rawConfig as string);
 		const processedLogs = processLogs(rawConfig as string);
-		return {
-			data: parsedConfig || [],
-			hourlyData: processedLogs || [],
-		};
+		return processedLogs || [];
 	}),
 	activateLogRotate: adminProcedure.mutation(async () => {
 		await logRotationManager.activate();

apps/dokploy/server/db/schema/admin.ts

@@ -98,3 +98,15 @@ export const apiReadTraefikConfig = z.object({
 export const apiEnableDashboard = z.object({
 	enableDashboard: z.boolean().optional(),
 });
+
+export const apiReadStatsLogs = z.object({
+	page: z
+		.object({
+			pageIndex: z.number(),
+			pageSize: z.number(),
+		})
+		.optional(),
+	status: z.string().array().optional(),
+	search: z.string().optional(),
+	sort: z.object({ id: z.string(), desc: z.boolean() }).optional(),
+});

apps/dokploy/server/utils/access-log/utils.ts

@@ -1,6 +1,5 @@
-interface LogEntry {
-	StartUTC: string;
-}
+import _ from "lodash";
+import type { LogEntry } from "./types";
 
 interface HourlyData {
 	hour: string;
@@ -8,45 +7,107 @@ interface HourlyData {
 }
 
 export function processLogs(logString: string): HourlyData[] {
-	const hourlyData: Record<string, number> = {};
-
-	if (!logString || logString?.length === 0) {
+	if (_.isEmpty(logString)) {
 		return [];
 	}
 
-	const logEntries = logString.trim().split("\n");
+	const hourlyData = _(logString)
+		.split("\n")
+		.compact()
+		.map((entry) => {
+			try {
+				const log: LogEntry = JSON.parse(entry);
+				const date = new Date(log.StartUTC);
+				return `${date.toISOString().slice(0, 13)}:00:00Z`;
+			} catch (error) {
+				console.error("Error parsing log entry:", error);
+				return null;
+			}
+		})
+		.compact()
+		.countBy()
+		.map((count, hour) => ({ hour, count }))
+		.value();
 
-	for (const entry of logEntries) {
-		try {
-			const log: LogEntry = JSON.parse(entry);
-			const date = new Date(log.StartUTC);
-			const hourKey = `${date.toISOString().slice(0, 13)}:00:00Z`; // Agrupa por hora
-
-			hourlyData[hourKey] = (hourlyData[hourKey] || 0) + 1;
-		} catch (error) {
-			console.error("Error parsing log entry:", error);
-		}
-	}
-
-	return Object.entries(hourlyData)
-		.map(([hour, count]) => ({ hour, count }))
-		.sort((a, b) => new Date(a.hour).getTime() - new Date(b.hour).getTime());
+	return _.sortBy(hourlyData, (entry) => new Date(entry.hour).getTime());
 }
 
-export function parseRawConfig(rawConfig: string): LogEntry[] {
+interface PageInfo {
+	pageIndex: number;
+	pageSize: number;
+}
+
+interface SortInfo {
+	id: string;
+	desc: boolean;
+}
+
+export function parseRawConfig(
+	rawConfig: string,
+	page?: PageInfo,
+	sort?: SortInfo,
+	search?: string,
+	status?: string[],
+): { data: LogEntry[]; totalCount: number } {
 	try {
-		if (!rawConfig || rawConfig?.length === 0) {
-			return [];
+		if (_.isEmpty(rawConfig)) {
+			return { data: [], totalCount: 0 };
 		}
-		const jsonLines = rawConfig
+
+		let parsedLogs = _(rawConfig)
 			.split("\n")
-			.filter((line) => line.trim() !== "");
+			.compact()
+			.map((line) => JSON.parse(line) as LogEntry)
+			.value();
 
-		const parsedConfig = jsonLines.map((line) => JSON.parse(line) as LogEntry);
+		if (search) {
+			parsedLogs = parsedLogs.filter((log) =>
+				log.RequestPath.toLowerCase().includes(search.toLowerCase()),
+			);
+		}
 
-		return parsedConfig;
+		if (status && status.length > 0) {
+			parsedLogs = parsedLogs.filter((log) =>
+				status.some((range) => isStatusInRange(log.DownstreamStatus, range)),
+			);
+		}
+
+		const totalCount = parsedLogs.length;
+
+		if (sort) {
+			parsedLogs = _.orderBy(
+				parsedLogs,
+				[sort.id],
+				[sort.desc ? "desc" : "asc"],
+			);
+		} else {
+			parsedLogs = _.orderBy(parsedLogs, ["time"], ["desc"]);
+		}
+
+		if (page) {
+			const startIndex = page.pageIndex * page.pageSize;
+			parsedLogs = parsedLogs.slice(startIndex, startIndex + page.pageSize);
+		}
+
+		return { data: parsedLogs, totalCount };
 	} catch (error) {
 		console.error("Error parsing rawConfig:", error);
 		throw new Error("Failed to parse rawConfig");
 	}
 }
+const isStatusInRange = (status: number, range: string) => {
+	switch (range) {
+		case "info":
+			return status >= 100 && status <= 199;
+		case "success":
+			return status >= 200 && status <= 299;
+		case "redirect":
+			return status >= 300 && status <= 399;
+		case "client":
+			return status >= 400 && status <= 499;
+		case "server":
+			return status >= 500 && status <= 599;
+		default:
+			return false;
+	}
+};

pnpm-lock.yaml

@@ -159,6 +159,9 @@ importers:
       '@radix-ui/react-popover':
         specifier: ^1.0.7
         version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive':
+        specifier: 2.0.0
+        version: 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-progress':
         specifier: ^1.0.3
         version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -189,6 +192,9 @@ importers:
       '@radix-ui/react-tooltip':
         specifier: ^1.0.7
         version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-controllable-state':
+        specifier: 1.1.0
+        version: 1.1.0(@types/react@18.3.3)(react@18.2.0)
       '@react-email/components':
         specifier: ^0.0.21
         version: 0.0.21(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -14047,7 +14053,7 @@ snapshots:
       eslint: 8.45.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.45.0))(eslint@8.45.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1)(eslint@8.45.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.45.0))(eslint@8.45.0))(eslint@8.45.0)
       eslint-plugin-jsx-a11y: 6.9.0(eslint@8.45.0)
       eslint-plugin-react: 7.35.0(eslint@8.45.0)
       eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.45.0)
@@ -14071,7 +14077,7 @@ snapshots:
       enhanced-resolve: 5.17.1
       eslint: 8.45.0
       eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.45.0))(eslint@8.45.0))(eslint@8.45.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1)(eslint@8.45.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.45.0))(eslint@8.45.0))(eslint@8.45.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
       is-core-module: 2.15.0
@@ -14093,7 +14099,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1)(eslint@8.45.0):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.45.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.45.0))(eslint@8.45.0))(eslint@8.45.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5