|
| 1 | +import DateTime from '@/components/date-time'; |
| 2 | +import { Button } from '@/components/ui/button'; |
| 3 | +import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'; |
| 4 | +import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; |
| 5 | +import { PaginatedData } from '@/types'; |
| 6 | +import { Server } from '@/types/server'; |
| 7 | +import { ServerLog } from '@/types/server-log'; |
| 8 | +import { useQuery } from '@tanstack/react-query'; |
| 9 | +import { ChevronRightIcon, LogsIcon, RefreshCwIcon, XIcon } from 'lucide-react'; |
| 10 | +import { ReactNode, useEffect, useState } from 'react'; |
| 11 | +import { toast } from 'sonner'; |
| 12 | + |
| 13 | +interface LogEntry { |
| 14 | + id: number; |
| 15 | + content: string; |
| 16 | +} |
| 17 | + |
| 18 | +export function InstantLogs({ server, children }: { server: Server; children: ReactNode }) { |
| 19 | + const [open, setOpen] = useState(false); |
| 20 | + const [logEntry, setLogEntry] = useState<LogEntry | null>(null); |
| 21 | + const [page, setPage] = useState(1); |
| 22 | + const [logs, setLogs] = useState<ServerLog[]>([]); |
| 23 | + |
| 24 | + const query = useQuery<PaginatedData<ServerLog>>({ |
| 25 | + queryKey: ['instant-logs', server.id, page], |
| 26 | + queryFn: async () => { |
| 27 | + const response = await fetch(route('logs.json', { server: server.id, count: 15, page: page })); |
| 28 | + if (!response.ok) { |
| 29 | + toast.error('Failed to fetch logs'); |
| 30 | + throw new Error('Network response was not ok'); |
| 31 | + } |
| 32 | + const data = response.json(); |
| 33 | + const logs = (await data).data; |
| 34 | + if (page === 1) { |
| 35 | + setLogs(logs); |
| 36 | + } else { |
| 37 | + setLogs((prev) => [...new Set([...prev, ...logs])]); |
| 38 | + } |
| 39 | + setPage((await data).meta.current_page); |
| 40 | + return data; |
| 41 | + }, |
| 42 | + enabled: false, |
| 43 | + }); |
| 44 | + |
| 45 | + useEffect(() => { |
| 46 | + if (open && logs.length === 0) { |
| 47 | + query.refetch(); |
| 48 | + } |
| 49 | + }, [open, logs]); |
| 50 | + |
| 51 | + useEffect(() => { |
| 52 | + query.refetch(); |
| 53 | + }, [page]); |
| 54 | + |
| 55 | + const fetchLog = async (logId: number) => { |
| 56 | + if (logEntry?.id === logId) { |
| 57 | + setLogEntry(null); |
| 58 | + return; |
| 59 | + } |
| 60 | + setLogEntry({ |
| 61 | + id: logId, |
| 62 | + content: 'Loading...', |
| 63 | + }); |
| 64 | + const response = await fetch(route('logs.show', { server: server.id, log: logId })); |
| 65 | + if (!response.ok) { |
| 66 | + toast.error('Failed to fetch log'); |
| 67 | + throw new Error('Network response was not ok'); |
| 68 | + } |
| 69 | + const text = await response.text(); |
| 70 | + setLogEntry({ id: logId, content: text }); |
| 71 | + }; |
| 72 | + |
| 73 | + const loadMore = () => { |
| 74 | + setPage((prev) => prev + 1); |
| 75 | + }; |
| 76 | + |
| 77 | + const reset = () => { |
| 78 | + setLogs([]); |
| 79 | + setLogEntry(null); |
| 80 | + setPage(1); |
| 81 | + }; |
| 82 | + |
| 83 | + useEffect(() => { |
| 84 | + const handleKeydown = (event: KeyboardEvent) => { |
| 85 | + if (event.ctrlKey && event.shiftKey && event.key === 'L') { |
| 86 | + event.preventDefault(); |
| 87 | + setOpen(!open); |
| 88 | + } |
| 89 | + }; |
| 90 | + |
| 91 | + document.addEventListener('keydown', handleKeydown); |
| 92 | + return () => document.removeEventListener('keydown', handleKeydown); |
| 93 | + }, [open, setOpen]); |
| 94 | + |
| 95 | + return ( |
| 96 | + <Sheet open={open} onOpenChange={setOpen}> |
| 97 | + <SheetTrigger asChild>{children}</SheetTrigger> |
| 98 | + <SheetContent side="bottom" className="h-3/4" showClose={false}> |
| 99 | + <SheetHeader className="bg-muted/50 flex flex-row items-center justify-between border-b px-4 py-2"> |
| 100 | + <div className="flex items-center gap-2"> |
| 101 | + <LogsIcon className="h-4 w-4" /> |
| 102 | + <SheetTitle className="text-sm font-medium">Logs - {server.name}</SheetTitle> |
| 103 | + <SheetDescription className="sr-only">Logs</SheetDescription> |
| 104 | + </div> |
| 105 | + <div className="flex items-center gap-2"> |
| 106 | + <Tooltip delayDuration={0}> |
| 107 | + <TooltipTrigger asChild> |
| 108 | + <Button variant="ghost" size="icon" className="h-7 w-7" onClick={reset}> |
| 109 | + {query.isFetching ? <RefreshCwIcon className="h-3 w-3 animate-spin" /> : <RefreshCwIcon className="h-3 w-3" />} |
| 110 | + </Button> |
| 111 | + </TooltipTrigger> |
| 112 | + <TooltipContent>Reload</TooltipContent> |
| 113 | + </Tooltip> |
| 114 | + <Tooltip delayDuration={0}> |
| 115 | + <TooltipTrigger asChild> |
| 116 | + <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setOpen(false)}> |
| 117 | + <XIcon className="h-3 w-3" /> |
| 118 | + </Button> |
| 119 | + </TooltipTrigger> |
| 120 | + <TooltipContent>Close</TooltipContent> |
| 121 | + </Tooltip> |
| 122 | + </div> |
| 123 | + </SheetHeader> |
| 124 | + <div className="flex h-full flex-col overflow-y-auto"> |
| 125 | + {logs.map((log, index) => ( |
| 126 | + <div key={`log-${log.id}`}> |
| 127 | + <Button |
| 128 | + variant="ghost" |
| 129 | + className="flex w-full items-center justify-between rounded-none border-b px-4 py-2 font-mono text-xs" |
| 130 | + onClick={() => fetchLog(log.id)} |
| 131 | + tabIndex={index + 1} |
| 132 | + autoFocus={index === 0} |
| 133 | + > |
| 134 | + <div className="flex items-center gap-2"> |
| 135 | + <ChevronRightIcon className="size-4" /> |
| 136 | + <div>{log.name}</div> |
| 137 | + </div> |
| 138 | + <div className="text-muted-foreground text-xs"> |
| 139 | + <DateTime date={log.created_at} /> |
| 140 | + </div> |
| 141 | + </Button> |
| 142 | + {logEntry?.id === log.id && ( |
| 143 | + <div className="bg-muted/50 max-h-64 overflow-auto border-b px-4 py-2 font-mono text-xs whitespace-pre-wrap">{logEntry.content}</div> |
| 144 | + )} |
| 145 | + </div> |
| 146 | + ))} |
| 147 | + <Button variant="ghost" onClick={loadMore} tabIndex={logs.length + 1}> |
| 148 | + {query.isFetching ? 'Loading...' : 'Load More'} |
| 149 | + </Button> |
| 150 | + </div> |
| 151 | + </SheetContent> |
| 152 | + </Sheet> |
| 153 | + ); |
| 154 | +} |
0 commit comments