apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-07-16 23:01:06 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: clean up formatting and indentation in MessageDetails component

Browse source
This commit is contained in:
Anish Sarkar 2025-10-13 21:20:33 +05:30
parent 19c748bf97
commit ea509b7d57
1 changed files with 67 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

124
surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
View file

@ -123,52 +123,52 @@ const logStatusConfig = {
} as const; } as const;
function MessageDetails({ function MessageDetails({
message, message,
taskName, taskName,
metadata, metadata,
createdAt, createdAt,
children, children,
}: { }: {
message: string; message: string;
taskName?: string; taskName?: string;
metadata?: any; metadata?: any;
createdAt?: string; createdAt?: string;
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<AlertDialog> <AlertDialog>
<AlertDialogTrigger asChild>{children}</AlertDialogTrigger> <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
<AlertDialogContent className="max-w-3xl w-full"> <AlertDialogContent className="max-w-3xl w-full">
<div className="flex items-start justify-between gap-4"> <div className="flex items-start justify-between gap-4">
<div> <div>
<AlertDialogTitle className="text-lg">Log details</AlertDialogTitle> <AlertDialogTitle className="text-lg">Log details</AlertDialogTitle>
{createdAt && ( {createdAt && (
<p className="text-xs text-muted-foreground mt-1"> <p className="text-xs text-muted-foreground mt-1">
{new Date(createdAt).toLocaleString()} {new Date(createdAt).toLocaleString()}
</p> </p>
)} )}
</div> </div>
<div className="shrink-0"> <div className="shrink-0">
<AlertDialogCancel className="text-sm">Close</AlertDialogCancel> <AlertDialogCancel className="text-sm">Close</AlertDialogCancel>
</div> </div>
</div> </div>
<div className="mt-4 space-y-4"> <div className="mt-4 space-y-4">
{taskName && ( {taskName && (
<div className="text-xs text-muted-foreground font-mono bg-muted/50 px-2 py-1 rounded inline-block"> <div className="text-xs text-muted-foreground font-mono bg-muted/50 px-2 py-1 rounded inline-block">
{taskName} {taskName}
</div> </div>
)} )}
<div className="bg-muted p-3 rounded max-h-[40vh] overflow-auto text-sm whitespace-pre-wrap"> <div className="bg-muted p-3 rounded max-h-[40vh] overflow-auto text-sm whitespace-pre-wrap">
{message} {message}
</div> </div>
</div> </div>
<AlertDialogFooter /> <AlertDialogFooter />
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>
); );
} }
const columns: ColumnDef<Log>[] = [ const columns: ColumnDef<Log>[] = [
@ -271,19 +271,27 @@ const columns: ColumnDef<Log>[] = [
const createdAt = row.getValue("created_at") as string; const createdAt = row.getValue("created_at") as string;
return ( return (
<MessageDetails message={message} taskName={taskName} metadata={row.original.log_metadata} createdAt={createdAt}> <MessageDetails
<div className="flex flex-col gap-1 max-w-[400px] cursor-pointer"> message={message}
{taskName && ( taskName={taskName}
<div className="text-xs text-muted-foreground font-mono bg-muted/50 px-2 py-1 rounded truncate" title={taskName}> metadata={row.original.log_metadata}
{taskName} createdAt={createdAt}
</div> >
)} <div className="flex flex-col gap-1 max-w-[400px] cursor-pointer">
<div className="text-sm truncate" title={message}> {taskName && (
{message.length > 100 ? `${message.substring(0, 100)}...` : message} <div
</div> className="text-xs text-muted-foreground font-mono bg-muted/50 px-2 py-1 rounded truncate"
</div> title={taskName}
</MessageDetails> >
); {taskName}
</div>
)}
<div className="text-sm truncate" title={message}>
{message.length > 100 ? `${message.substring(0, 100)}...` : message}
</div>
</div>
</MessageDetails>
);
}, },
size: 400, size: 400,
}, },
@ -954,19 +962,21 @@ function LogsTable({
{row.getVisibleCells().map((cell: any) => { {row.getVisibleCells().map((cell: any) => {
const isCreatedAt = cell.column.id === "created_at"; const isCreatedAt = cell.column.id === "created_at";
const isMessage = cell.column.id === "message"; const isMessage = cell.column.id === "message";
return ( return (
<TableCell <TableCell
key={cell.id} key={cell.id}
className={cn( className={cn(
"px-4 py-3 align-middle overflow-hidden", "px-4 py-3 align-middle overflow-hidden",
isCreatedAt ? "whitespace-nowrap text-xs text-muted-foreground text-right" : "", isCreatedAt
? "whitespace-nowrap text-xs text-muted-foreground text-right"
: "",
isMessage ? "overflow-hidden" : "" isMessage ? "overflow-hidden" : ""
)} )}
> >
{flexRender(cell.column.columnDef.cell, cell.getContext())} {flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell> </TableCell>
); );
})} })}
</motion.tr> </motion.tr>
)) ))
) : ( ) : (