diff --git a/apps/dokploy/components/dashboard/requests/columns.tsx b/apps/dokploy/components/dashboard/requests/columns.tsx index 0d8de250f..7a3c19391 100644 --- a/apps/dokploy/components/dashboard/requests/columns.tsx +++ b/apps/dokploy/components/dashboard/requests/columns.tsx @@ -84,40 +84,12 @@ export const columns: ColumnDef[] = [ return (
- {format(new Date(log.time), "yyyy-MM-dd HH:mm:ss")} + {format(new Date(log.StartUTC), "yyyy-MM-dd HH:mm:ss")}
); }, }, - { - id: "actions", - enableHiding: false, - cell: ({ row }) => { - const container = row.original; - - return ( - - - - - - Actions - {/* - View Logs - - - - Terminal - */} - - - ); - }, - }, ]; function convertMicroseconds(microseconds: number): string { if (microseconds < 1000) { diff --git a/apps/dokploy/components/dashboard/requests/show-requests.tsx b/apps/dokploy/components/dashboard/requests/show-requests.tsx index fd4f8cb09..5100309eb 100644 --- a/apps/dokploy/components/dashboard/requests/show-requests.tsx +++ b/apps/dokploy/components/dashboard/requests/show-requests.tsx @@ -35,6 +35,15 @@ import { ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart"; +import { + Sheet, + SheetContent, + SheetDescription, + SheetHeader, + SheetTitle, + SheetTrigger, +} from "@/components/ui/sheet"; + import { Select, SelectContent, @@ -42,7 +51,13 @@ import { SelectTrigger, SelectValue, } from "@/components/ui/select"; -import { ChevronDown, MoreHorizontal, TrendingUp } from "lucide-react"; +import { + ChevronDown, + Copy, + Download, + MoreHorizontal, + TrendingUp, +} from "lucide-react"; import { DropdownMenu, DropdownMenuCheckboxItem, @@ -65,7 +80,8 @@ import { Button } from "@/components/ui/button"; import { columns } from "./columns"; import { Input } from "@/components/ui/input"; import { toast } from "sonner"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; +import { ScrollArea } from "@/components/ui/scroll-area"; export type LogEntry = NonNullable< RouterOutputs["settings"]["readMonitoringConfig"]["data"] @@ -80,10 +96,33 @@ const chartConfig = { 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 } = api.settings.readMonitoringConfig.useQuery(undefined, { - refetchInterval: 1000, - }); + const { data, isLoading } = api.settings.readMonitoringConfig.useQuery( + undefined, + { + refetchInterval: 1000, + }, + ); + const [selectedRow, setSelectedRow] = useState(); const { data: isLogRotateActive, refetch: refetchLogRotate } = api.settings.getLogRotateStatus.useQuery(); @@ -284,6 +323,10 @@ export const ShowRequests = () => { table.getRowModel().rows.map((row) => ( { + setSelectedRow(row.original); + }} data-state={row.getIsSelected() && "selected"} > {row.getVisibleCells().map((cell) => ( @@ -302,15 +345,15 @@ export const ShowRequests = () => { colSpan={columns.length} className="h-24 text-center" > - {/* {isLoading ? ( -
- - Loading... - -
- ) : ( - <>No results. - )} */} + {isLoading ? ( +
+ + Loading... + +
+ ) : ( + <>No results. + )}
)} @@ -340,6 +383,58 @@ export const ShowRequests = () => { + setSelectedRow(undefined)} + > + + + Request log + + Details of the request log entry. + + + +
+ + + {Object.entries(requestLog).map(([key, value]) => ( + + {key} + + {key === "id" ? ( +
+ {value} + +
+ ) : key === "level" ? ( + {value} + ) : key === "data.error" ? ( + + {value} + + ) : key === "data.details" ? ( +
+ {value} +
+ ) : ( + value + )} +
+
+ ))} +
+
+
+
+
+ +
+
+
); };