83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
import type { ColumnDef } from '@tanstack/react-table';
|
|
import { Eye } from 'lucide-react';
|
|
import { DataTableColumnHeader } from '@/components/data-table-column-header';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import { getLevelColor } from '@/lib/log-helpers';
|
|
import type { SystemLog } from '@/types';
|
|
|
|
interface ColumnProps {
|
|
onView: (log: SystemLog) => void;
|
|
}
|
|
|
|
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" },
|
|
},
|
|
];
|