cowch/lst_v3
1
0
Fork 0
Code Issues 20 Pull Requests Actions Packages Projects Releases 10 Wiki Activity

refactor(logs): refactored to show the submodule and stack as well to make it more easy to watch

Browse Source
This commit is contained in:
cowchmonkey@gmail.com
2026-06-01 15:21:17 -05:00
parent bb7931d6c8
commit 45a0dee9ca
2 changed files with 196 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/components/ui/badge.tsx Normal file
View File

@@ -0,0 +1,49 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"
import { cn } from "@/lib/utils"
const badgeVariants = cva(
"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
secondary:
"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
destructive:
"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
outline:
"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
ghost:
"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
link: "text-primary underline-offset-4 hover:underline",
},
},
defaultVariants: {
variant: "default",
},
}
)
function Badge({
className,
variant = "default",
asChild = false,
...props
}: React.ComponentProps<"span"> &
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
const Comp = asChild ? Slot.Root : "span"
return (
<Comp
data-slot="badge"
data-variant={variant}
className={cn(badgeVariants({ variant }), className)}
{...props}
/>
)
}
export { Badge, badgeVariants }

249
frontend/src/routes/admin/logs.tsx
View File

@@ -1,6 +1,16 @@
import { createFileRoute, redirect } from "@tanstack/react-router"; import { createFileRoute, redirect } from "@tanstack/react-router";
import { createColumnHelper } from "@tanstack/react-table";
import { format } from "date-fns-tz";
import { useSocketRoom } from "@/hooks/socket.io.hook"; import { useSocketRoom } from "@/hooks/socket.io.hook";
import { authClient } from "@/lib/auth-client"; import { authClient } from "@/lib/auth-client";
import { Badge } from "../../components/ui/badge";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "../../components/ui/tooltip";
import LstTable from "../../lib/tableStuff/LstTable";
import SearchableHeader from "../../lib/tableStuff/SearchableHeader";
export const Route = createFileRoute("/admin/logs")({ export const Route = createFileRoute("/admin/logs")({
beforeLoad: async ({ location }) => { beforeLoad: async ({ location }) => {
@@ -37,117 +47,152 @@ interface LogEntry {
[key: string]: any; // catch any extra fields [key: string]: any; // catch any extra fields
} }
function LevelBadge({ level }: { level: number }) { function LevelBadge({ level }: { level: string }) {
const config: Record<number, { label: string; className: string }> = { const config: Record<string, { label: string; className: string }> = {
10: { label: "TRACE", className: "bg-gray-100 text-gray-600" }, trace: { label: "TRACE", className: "bg-gray-100 text-gray-600" },
20: { label: "DEBUG", className: "bg-blue-100 text-blue-700" }, debug: { label: "DEBUG", className: "bg-blue-50 text-blue-700" },
30: { label: "INFO", className: "bg-green-100 text-green-700" }, info: { label: "INFO", className: "bg-green-50 text-green-700" },
40: { label: "WARN", className: "bg-yellow-100 text-yellow-700" }, warn: { label: "WARN", className: "bg-yellow-100 text-yellow-700" },
50: { label: "ERROR", className: "bg-red-100 text-red-700" }, error: { label: "ERROR", className: "bg-red-50 text-red-700" },
60: { label: "FATAL", className: "bg-purple-100 text-purple-700" }, fatal: { label: "FATAL", className: "bg-purple-100 text-purple-700" },
}; };
const { label, className } = config[level] ?? { const badge = config[level];
label: String(level),
className: "bg-gray-100",
};
return ( return (
<span className={`px-2 py-0.5 rounded text-xs font-medium ${className}`}> <Badge
{label} className={`rounded px-2 py-0.5 text-xs font-medium ${
</span> badge?.className ?? "bg-gray-100 text-gray-600"
}`}
>
{badge?.label ?? level}
</Badge>
); );
} }
function RouteComponent() { function RouteComponent() {
const { data: logs, info: logsInfo } = useSocketRoom<LogEntry>("logs"); const { data: logs } = useSocketRoom<LogEntry>("logs");
//const { user } = Route.useRouteContext(); const columnHelper = createColumnHelper<any>();
//const router = useRouter(); const column = [
// const [logs, setLogs] = useState<LogEntry[]>([]); columnHelper.accessor("createdAt", {
// const [logsInfo, setLogInfo] = useState( header: ({ column }) => <SearchableHeader column={column} title="Time" />,
// "No logs yet — join the room to start receiving", filterFn: "includesString",
// ); cell: (i) => format(i.getValue(), "MM/dd/yyyy HH:mm:ss"),
}),
columnHelper.accessor("level", {
header: ({ column }) => (
<SearchableHeader column={column} title="Level" searchable={true} />
),
filterFn: "includesString",
cell: (i) => <LevelBadge level={i.getValue()} />,
}),
columnHelper.accessor("module", {
header: ({ column }) => (
<SearchableHeader column={column} title="Module" />
),
filterFn: "includesString",
cell: (i) => i.getValue(),
}),
columnHelper.accessor("subModule", {
header: ({ column }) => (
<SearchableHeader column={column} title="Submodule" />
),
filterFn: "includesString",
cell: (i) => i.getValue(),
}),
columnHelper.accessor("hostname", {
header: ({ column }) => (
<SearchableHeader column={column} title="Client" />
),
filterFn: "includesString",
cell: (i) => i.getValue(),
}),
columnHelper.accessor("message", {
header: ({ column }) => (
<SearchableHeader column={column} title="Message" />
),
filterFn: "includesString",
cell: (i) => i.getValue(),
}),
columnHelper.accessor("stack", {
header: ({ column }) => (
<SearchableHeader column={column} title="Stack" />
),
filterFn: "includesString",
cell: (i) => {
const stack = i.row.original.stack;
if (!stack) return <span className="text-muted-foreground">—</span>;
// useEffect(() => { return (
// // Connect if not already connected <Tooltip>
// if (!socket.connected) { <TooltipTrigger>
// socket.connect(); <button
// } type="button"
className="max-w-[350px] truncate text-left font-mono text-xs text-muted-foreground hover:text-foreground"
// socket.on("connect", () => { >
// socket.emit("join-room", "logs"); {stack.length !== 0 ? "Hover to see stack error" : "-"}
// }); </button>
</TooltipTrigger>
// socket.emit("join-room", "logs"); <TooltipContent
// socket.on( side="left"
// "room-update", align="start"
// (data: { payloads: LogEntry[]; roomId: string }) => { className="max-w-[900px] bg-zinc-950 text-zinc-50"
// setLogs((prev) => [...data.payloads, ...prev]); >
// }, <pre className="max-h-[500px] overflow-auto whitespace-pre-wrap rounded-md p-3 text-xs leading-relaxed">
// ); <code>{JSON.stringify(stack, null, 2)}</code>
</pre>
// socket.on("room-error", (data) => { </TooltipContent>
// setLogInfo(data.message); </Tooltip>
// }); );
},
// // socket.on("logs", (data) => { }),
// // console.log(data); ];
// // setLogs((prev) => [...data.payloads, ...prev]);
// // });
// // Cleanup listeners on unmount
// return () => {
// socket.emit("leave-room", "logs");
// socket.off("room-update");
// socket.off("room-error");
// socket.off("logs");
// };
// }, []);
return ( return (
<div> // <div>
{/* Log Table */} // {/* Log Table */}
<div className="rounded border overflow-auto max-h-[600px]"> // <div className="rounded border overflow-auto max-h-[600px]">
<table className="w-full text-sm"> // <table className="w-full text-sm">
<thead className="bg-muted sticky top-0"> // <thead className="bg-muted sticky top-0">
<tr> // <tr>
<th className="text-left px-3 py-2">Time</th> // <th className="text-left px-3 py-2">Time</th>
<th className="text-left px-3 py-2">Level</th> // <th className="text-left px-3 py-2">Level</th>
<th className="text-left px-3 py-2">Module</th> // <th className="text-left px-3 py-2">Module</th>
<th className="text-left px-3 py-2">Host</th> // <th className="text-left px-3 py-2">Host</th>
<th className="text-left px-3 py-2">Message</th> // <th className="text-left px-3 py-2">Message</th>
</tr> // </tr>
</thead> // </thead>
<tbody> // <tbody>
{logs.length === 0 ? ( // {logs.length === 0 ? (
<tr> // <tr>
<td // <td
colSpan={6} // colSpan={6}
className="text-center py-6 text-muted-foreground" // className="text-center py-6 text-muted-foreground"
> // >
{logsInfo} // {logsInfo}
</td> // </td>
</tr> // </tr>
) : ( // ) : (
logs.map((log, i) => ( // logs.map((log, i) => (
<tr // <tr
key={`${log.id}-${i}`} // key={`${log.id}-${i}`}
className="border-t hover:bg-muted/50" // className="border-t hover:bg-muted/50"
> // >
<td className="px-3 py-2 whitespace-nowrap"> // <td className="px-3 py-2 whitespace-nowrap">
{new Date(log.createdAt).toLocaleTimeString()} // {new Date(log.createdAt).toLocaleTimeString()}
</td> // </td>
<td className="px-3 py-2"> // <td className="px-3 py-2">
<LevelBadge level={log.level} /> // <LevelBadge level={log.level} />
</td> // </td>
<td className="px-3 py-2">{log.module}</td> // <td className="px-3 py-2">{log.module}</td>
<td className="px-3 py-2">{log.hostname}</td> // <td className="px-3 py-2">{log.hostname}</td>
<td className="px-3 py-2 max-w-sm truncate">{log.message}</td> // <td className="px-3 py-2 max-w-sm truncate">{log.message}</td>
</tr> // </tr>
)) // ))
)} // )}
</tbody> // </tbody>
</table> // </table>
</div> // </div>
</div> // </div>
<LstTable data={logs} columns={column} pageSize={50} />
); );
} }