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

Update columns.tsx

Browse Source
This commit is contained in:
usopp
2024-12-01 19:42:56 +01:00
committed by GitHub
parent 2daa159e29
commit 5f6516ab7d
1 changed files with 85 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,92 +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 items-center flex-row gap-3 "> <div className="flex items-center flex-row gap-3 ">
{log.RequestMethod}{" "} {log.RequestMethod}{" "}
<div className="inline-flex items-center gap-2 bg-muted p-1 rounded"> <div className="inline-flex items-center gap-2 bg-muted p-1 rounded">
<span>{log.RequestAddr}</span> <span>{log.RequestAddr}</span>
</div> </div>
{log.RequestPath.length > 100 {log.RequestPath.length > 100
? `${log.RequestPath.slice(0, 82)}...` ? `${log.RequestPath.slice(0, 82)}...`
: log.RequestPath} : log.RequestPath}
</div> </div>
<div className="flex flex-row gap-3 w-full"> <div className="flex flex-row gap-3 w-full">
<Badge variant={getStatusColor(log.OriginStatus)}> <Badge variant={getStatusColor(log.OriginStatus)}>
Status: {log.OriginStatus} Status: {log.OriginStatus}
</Badge> </Badge>
<Badge variant={"secondary"}> <Badge variant={"secondary"}>
Exec Time: {`${log.Duration / 1000000000}s`} Exec Time: {`${log.Duration / 1000000000}s`}
</Badge> </Badge>
<Badge variant={"secondary"}>IP: {log.ClientAddr}</Badge> <Badge variant={"secondary"}>IP: {log.ClientAddr}</Badge>
</div> </div>
</div> </div>
); );
}, },
}, },
{ {
accessorKey: "time", accessorKey: "time",
header: ({ column }) => { header: ({ column }) => {
return ( return (
<Button <Button
variant="ghost" variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
> >
Time Time
<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 w-full"> <div className="flex flex-row gap-3 w-full">
{format(new Date(log.StartUTC), "yyyy-MM-dd HH:mm:ss")} {format(new Date(log.StartUTC), "yyyy-MM-dd HH:mm:ss")}
</div> </div>
</div> </div>
); );
}, },
}, },
]; ];