Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

style: add RequestAddr in the requests table

Browse Source
This commit is contained in:
190km
2024-12-01 19:29:16 +01:00
parent 63998f71ec
commit 2daa159e29
1 changed files with 85 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
apps/dokploy/components/dashboard/requests/columns.tsx
View File

@@ -7,89 +7,92 @@ import * as React from "react";
import type { LogEntry } from "./show-requests"; import type { LogEntry } from "./show-requests";
export const getStatusColor = (status: number) => { export const getStatusColor = (status: number) => {
if (status >= 100 && status < 200) { if (status >= 100 && status < 200) {
return "outline"; return "outline";
} }
if (status >= 200 && status < 300) { if (status >= 200 && status < 300) {
return "default"; return "default";
} }
if (status >= 300 && status < 400) { if (status >= 300 && status < 400) {
return "outline"; return "outline";
} }
if (status >= 400 && status < 500) { if (status >= 400 && status < 500) {
return "destructive"; return "destructive";
} }
return "destructive"; return "destructive";
}; };
export const columns: ColumnDef<LogEntry>[] = [ export const columns: ColumnDef<LogEntry>[] = [
{ {
accessorKey: "level", accessorKey: "level",
header: ({ column }) => { header: ({ column }) => {
return <Button variant="ghost">Level</Button>; return <Button variant="ghost">Level</Button>;
}, },
cell: ({ row }) => { cell: ({ row }) => {
return <div>{row.original.level}</div>; return <div>{row.original.level}</div>;
}, },
}, },
{ {
accessorKey: "RequestPath", accessorKey: "RequestPath",
header: ({ column }) => { header: ({ column }) => {
return ( return (
<Button <Button
variant="ghost" variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
> >
Message Message
<ArrowUpDown className="ml-2 h-4 w-4" /> <ArrowUpDown className="ml-2 h-4 w-4" />
</Button> </Button>
); );
}, },
cell: ({ row }) => { cell: ({ row }) => {
const log = row.original; const log = row.original;
return ( return (
<div className=" flex flex-col gap-2"> <div className=" flex flex-col gap-2">
<div className="flex flex-row gap-3 "> <div className="flex items-center flex-row gap-3 ">
{log.RequestMethod}{" "} {log.RequestMethod}{" "}
{log.RequestPath.length > 100 <div className="inline-flex items-center gap-2 bg-muted p-1 rounded">
? `${log.RequestPath.slice(0, 82)}...` <span>{log.RequestAddr}</span>
: log.RequestPath} </div>
</div> {log.RequestPath.length > 100
<div className="flex flex-row gap-3 w-full"> ? `${log.RequestPath.slice(0, 82)}...`
<Badge variant={getStatusColor(log.OriginStatus)}> : log.RequestPath}
Status: {log.OriginStatus} </div>
</Badge> <div className="flex flex-row gap-3 w-full">
<Badge variant={"secondary"}> <Badge variant={getStatusColor(log.OriginStatus)}>
Exec Time: {`${log.Duration / 1000000000}s`} Status: {log.OriginStatus}
</Badge> </Badge>
<Badge variant={"secondary"}>IP: {log.ClientAddr}</Badge> <Badge variant={"secondary"}>
</div> Exec Time: {`${log.Duration / 1000000000}s`}
</div> </Badge>
); <Badge variant={"secondary"}>IP: {log.ClientAddr}</Badge>
}, </div>
}, </div>
{ );
accessorKey: "time", },
header: ({ column }) => { },
return ( {
<Button accessorKey: "time",
variant="ghost" header: ({ column }) => {
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} return (
> <Button
Time variant="ghost"
<ArrowUpDown className="ml-2 h-4 w-4" /> onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
</Button> >
); Time
}, <ArrowUpDown className="ml-2 h-4 w-4" />
cell: ({ row }) => { </Button>
const log = row.original; );
return ( },
<div className=" flex flex-col gap-2"> cell: ({ row }) => {
<div className="flex flex-row gap-3 w-full"> const log = row.original;
{format(new Date(log.StartUTC), "yyyy-MM-dd HH:mm:ss")} return (
</div> <div className=" flex flex-col gap-2">
</div> <div className="flex flex-row gap-3 w-full">
); {format(new Date(log.StartUTC), "yyyy-MM-dd HH:mm:ss")}
}, </div>
}, </div>
);
},
},
]; ];