105 lines
3.1 KiB
TypeScript
105 lines
3.1 KiB
TypeScript
import { ColumnDef } from '@tanstack/react-table';
|
|
import { DataTableColumnHeader } from '@/components/data-table-column-header';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Eye } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
|
|
|
export interface SystemLog {
|
|
id: number;
|
|
timestamp: string;
|
|
env: string;
|
|
level: string;
|
|
message: string;
|
|
}
|
|
|
|
interface ColumnProps {
|
|
onView: (log: SystemLog) => void;
|
|
}
|
|
|
|
const getLevelColor = (level: string) => {
|
|
switch (level.toUpperCase()) {
|
|
case 'EMERGENCY':
|
|
case 'ALERT':
|
|
case 'CRITICAL':
|
|
case 'ERROR':
|
|
return 'destructive';
|
|
case 'WARNING':
|
|
return 'outline'; // Fallback if no warning variant
|
|
case 'NOTICE':
|
|
case 'INFO':
|
|
return 'secondary';
|
|
case 'DEBUG':
|
|
return 'outline';
|
|
default:
|
|
return 'default';
|
|
}
|
|
}
|
|
|
|
export const getColumns = ({ onView }: ColumnProps): ColumnDef<SystemLog>[] => [
|
|
{
|
|
accessorKey: "timestamp",
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="Waktu" />
|
|
),
|
|
cell: ({ row }) => <span className="font-mono text-xs text-nowrap">{row.original.timestamp}</span>,
|
|
meta: { title: "Waktu" },
|
|
},
|
|
{
|
|
accessorKey: "level",
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="Level" />
|
|
),
|
|
cell: ({ row }) => {
|
|
const level = row.original.level;
|
|
return (
|
|
<Badge variant={getLevelColor(level) as any}>
|
|
{level}
|
|
</Badge>
|
|
);
|
|
},
|
|
meta: { title: "Level" },
|
|
},
|
|
{
|
|
accessorKey: "message",
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="Pesan" />
|
|
),
|
|
cell: ({ row }) => {
|
|
const message = row.original.message;
|
|
return (
|
|
<div className="max-w-[400px] lg:max-w-[600px] truncate font-sans text-xs" title={message}>
|
|
{message}
|
|
</div>
|
|
);
|
|
},
|
|
meta: { title: "Pesan" },
|
|
},
|
|
{
|
|
id: "actions",
|
|
header: "Aksi",
|
|
cell: ({ row }) => {
|
|
const log = row.original;
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => onView(log)}
|
|
>
|
|
<Eye className="size-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Detail</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
},
|
|
meta: { title: "Aksi" },
|
|
},
|
|
];
|