diff --git a/src/frontend/components/ErrorDataTable.tsx b/src/frontend/components/ErrorDataTable.tsx index 9a2fee1..7c73515 100644 --- a/src/frontend/components/ErrorDataTable.tsx +++ b/src/frontend/components/ErrorDataTable.tsx @@ -1,23 +1,23 @@ -import { - Table, - Badge, - Text, - Paper, - Group, - Drawer, - Stack, - Divider, - Code, - Button, +import { + Badge, Box, + Button, + Code, + Divider, + Drawer, + Group, + Paper, ScrollArea, + Stack, + Table, + Text, Title } from '@mantine/core' import { useDisclosure } from '@mantine/hooks' -import { useState } from 'react' import { useQuery } from '@tanstack/react-query' import { Link } from '@tanstack/react-router' -import { TbMessageReport, TbHistory, TbExternalLink, TbBug } from 'react-icons/tb' +import { useState } from 'react' +import { TbBug, TbExternalLink, TbHistory, TbMessageReport } from 'react-icons/tb' export interface ErrorDataTableProps { appId?: string @@ -26,6 +26,7 @@ export interface ErrorDataTableProps { export function ErrorDataTable({ appId }: ErrorDataTableProps) { const [opened, { open, close }] = useDisclosure(false) const [selectedError, setSelectedError] = useState(null) + const [showStackTrace, setShowStackTrace] = useState(false) const { data: bugsData, isLoading } = useQuery({ queryKey: ['bugs', appId], @@ -36,11 +37,12 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) { const handleRowClick = (error: any) => { setSelectedError(error) + setShowStackTrace(false) open() } const getSeverityColor = (sev: string) => { - switch(sev?.toUpperCase()) { + switch (sev?.toUpperCase()) { case 'OPEN': return 'red' case 'IN_PROGRESS': return 'orange' case 'ON_HOLD': return 'yellow' @@ -90,10 +92,10 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) { ) : bugs.map((error: any) => ( - handleRowClick(error)} - style={{ cursor: 'pointer' }} + handleRowClick(error)} + style={{ cursor: 'pointer' }} > {error.description} @@ -107,7 +109,7 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) { - {new Date(error.createdAt).toLocaleString()} + {new Date(error.createdAt).toLocaleString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })} @@ -146,8 +148,8 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) { - REPORTER - {selectedError.user?.name || selectedError.userId || 'System'} + SOURCE + {selectedError.source} APP VERSION @@ -158,16 +160,23 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) { - STACK TRACE - - {selectedError.stackTrace} - + + STACK TRACE + + + {showStackTrace && ( + + {selectedError.stackTrace} + + )} - - - - - )} diff --git a/src/frontend/routes/apps.$appId.errors.tsx b/src/frontend/routes/apps.$appId.errors.tsx index 25055bb..83bbd51 100644 --- a/src/frontend/routes/apps.$appId.errors.tsx +++ b/src/frontend/routes/apps.$appId.errors.tsx @@ -57,11 +57,16 @@ function AppErrorsPage() { const [showLogs, setShowLogs] = useState>({}) + const [showStackTrace, setShowStackTrace] = useState>({}) const toggleLogs = (bugId: string) => { setShowLogs((prev) => ({ ...prev, [bugId]: !prev[bugId] })) } + const toggleStackTrace = (bugId: string) => { + setShowStackTrace((prev) => ({ ...prev, [bugId]: !prev[bugId] })) + } + const { data, isLoading, refetch } = useQuery({ queryKey: ['bugs', { page, search, app, status }], queryFn: () => @@ -511,7 +516,7 @@ function AppErrorsPage() { - {new Date(bug.createdAt).toLocaleString()} • {bug.appId?.toUpperCase()} • v{bug.affectedVersion} + {new Date(bug.createdAt).toLocaleString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })} • {bug.appId?.toUpperCase()} • v{bug.affectedVersion} @@ -564,19 +569,31 @@ function AppErrorsPage() { {/* Stack Trace */} {bug.stackTrace && ( - STACK TRACE - - {bug.stackTrace} - + + STACK TRACE + + + + + {bug.stackTrace} + + )} diff --git a/src/frontend/routes/bug-reports.tsx b/src/frontend/routes/bug-reports.tsx index 34e0462..aeb4417 100644 --- a/src/frontend/routes/bug-reports.tsx +++ b/src/frontend/routes/bug-reports.tsx @@ -535,7 +535,7 @@ function ListErrorsPage() { - {new Date(bug.createdAt).toLocaleString()} • {bug.appId?.toUpperCase()} • v{bug.affectedVersion} + {new Date(bug.createdAt).toLocaleString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })} • {bug.appId?.toUpperCase()} • v{bug.affectedVersion}