refactor: add sheet

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

@@ -84,40 +84,12 @@ export const columns: ColumnDef<LogEntry>[] = [
 			return (
 				<div className=" flex flex-col gap-2">
 					<div className="flex flex-row gap-3 w-full">
-						{format(new Date(log.time), "yyyy-MM-dd HH:mm:ss")}
+						{format(new Date(log.StartUTC), "yyyy-MM-dd HH:mm:ss")}
 					</div>
 				</div>
 			);
 		},
 	},
-	{
-		id: "actions",
-		enableHiding: false,
-		cell: ({ row }) => {
-			const container = row.original;
-
-			return (
-				<DropdownMenu>
-					<DropdownMenuTrigger asChild>
-						<Button variant="ghost" className="h-8 w-8 p-0">
-							<span className="sr-only">Open menu</span>
-							<MoreHorizontal className="h-4 w-4" />
-						</Button>
-					</DropdownMenuTrigger>
-					<DropdownMenuContent align="end">
-						<DropdownMenuLabel>Actions</DropdownMenuLabel>
-						{/* <ShowDockerModalLogs containerId={container.containerId}>
-							View Logs
-						</ShowDockerModalLogs>
-						<ShowContainerConfig containerId={container.containerId} />
-						<DockerTerminalModal containerId={container.containerId}>
-							Terminal
-						</DockerTerminalModal> */}
-					</DropdownMenuContent>
-				</DropdownMenu>
-			);
-		},
-	},
 ];
 function convertMicroseconds(microseconds: number): string {
 	if (microseconds < 1000) {

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, {
+	const { data, isLoading } = api.settings.readMonitoringConfig.useQuery(
-		refetchInterval: 1000,
+		undefined,
-	});
+		{
+			refetchInterval: 1000,
+		},
+	);
+	const [selectedRow, setSelectedRow] = useState<LogEntry>();
 	const { data: isLogRotateActive, refetch: refetchLogRotate } =
 		api.settings.getLogRotateStatus.useQuery();
 
@@ -284,6 +323,10 @@ export const ShowRequests = () => {
 										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) => (
@@ -302,15 +345,15 @@ export const ShowRequests = () => {
 												colSpan={columns.length}
 												className="h-24 text-center"
 											>
-												{/* {isLoading ? (
+												{isLoading ? (
-											<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+													<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-												<span className="text-muted-foreground text-lg font-medium">
+														<span className="text-muted-foreground text-lg font-medium">
-													Loading...
+															Loading...
-												</span>
+														</span>
-											</div>
+													</div>
-										) : (
+												) : (
-											<>No results.</>
+													<>No results.</>
-										)} */}
+												)}
 											</TableCell>
 										</TableRow>
 									)}
@@ -340,6 +383,58 @@ export const ShowRequests = () => {
 					</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>
 		</>
 	);
 };