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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 85 additions and 85 deletions
Show Stats 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";
export const getStatusColor = (status: number) => {
if (status >= 100 && status < 200) {
return "outline";
}
if (status >= 200 && status < 300) {
return "default";
}
if (status >= 300 && status < 400) {
return "outline";
}
if (status >= 400 && status < 500) {
return "destructive";
}
return "destructive";
if (status >= 100 && status < 200) {
return "outline";
}
if (status >= 200 && status < 300) {
return "default";
}
if (status >= 300 && status < 400) {
return "outline";
}
if (status >= 400 && status < 500) {
return "destructive";
}
return "destructive";
};
export const columns: ColumnDef<LogEntry>[] = [
{
accessorKey: "level",
header: ({ column }) => {
return <Button variant="ghost">Level</Button>;
},
cell: ({ row }) => {
return <div>{row.original.level}</div>;
},
},
{
accessorKey: "RequestPath",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Message
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
const log = row.original;
return (
<div className=" flex flex-col gap-2">
<div className="flex items-center flex-row gap-3 ">
{log.RequestMethod}{" "}
<div className="inline-flex items-center gap-2 bg-muted p-1 rounded">
<span>{log.RequestAddr}</span>
</div>
{log.RequestPath.length > 100
? `${log.RequestPath.slice(0, 82)}...`
: log.RequestPath}
</div>
<div className="flex flex-row gap-3 w-full">
<Badge variant={getStatusColor(log.OriginStatus)}>
Status: {log.OriginStatus}
</Badge>
<Badge variant={"secondary"}>
Exec Time: {`${log.Duration / 1000000000}s`}
</Badge>
<Badge variant={"secondary"}>IP: {log.ClientAddr}</Badge>
</div>
</div>
);
},
},
{
accessorKey: "time",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Time
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
const log = row.original;
return (
<div className=" flex flex-col gap-2">
<div className="flex flex-row gap-3 w-full">
{format(new Date(log.StartUTC), "yyyy-MM-dd HH:mm:ss")}
</div>
</div>
);
},
},
{
accessorKey: "level",
header: ({ column }) => {
return <Button variant="ghost">Level</Button>;
},
cell: ({ row }) => {
return <div>{row.original.level}</div>;
},
},
{
accessorKey: "RequestPath",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Message
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
const log = row.original;
return (
<div className=" flex flex-col gap-2">
<div className="flex items-center flex-row gap-3 ">
{log.RequestMethod}{" "}
<div className="inline-flex items-center gap-2 bg-muted p-1 rounded">
<span>{log.RequestAddr}</span>
</div>
{log.RequestPath.length > 100
? `${log.RequestPath.slice(0, 82)}...`
: log.RequestPath}
</div>
<div className="flex flex-row gap-3 w-full">
<Badge variant={getStatusColor(log.OriginStatus)}>
Status: {log.OriginStatus}
</Badge>
<Badge variant={"secondary"}>
Exec Time: {`${log.Duration / 1000000000}s`}
</Badge>
<Badge variant={"secondary"}>IP: {log.ClientAddr}</Badge>
</div>
</div>
);
},
},
{
accessorKey: "time",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Time
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
const log = row.original;
return (
<div className=" flex flex-col gap-2">
<div className="flex flex-row gap-3 w-full">
{format(new Date(log.StartUTC), "yyyy-MM-dd HH:mm:ss")}
</div>
</div>
);
},
},
];