98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
import { Head, router } from '@inertiajs/react';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { DataTable } from '@/components/data-table';
|
|
import { useState } from 'react';
|
|
import { getColumns, SystemLog } from './partials/columns';
|
|
import system from '@/routes/system';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue
|
|
} from "@/components/ui/select";
|
|
import { LogDetailModal } from './partials/log-detail-modal';
|
|
|
|
interface Props {
|
|
logFiles: string[];
|
|
selectedFile: string;
|
|
logs: SystemLog[];
|
|
}
|
|
|
|
export default function SystemLogIndex({ logFiles, selectedFile, logs }: Props) {
|
|
const [viewingLog, setViewingLog] = useState<SystemLog | null>(null);
|
|
|
|
const columns = getColumns({
|
|
onView: (log) => setViewingLog(log)
|
|
});
|
|
|
|
const onFileChange = (file: string) => {
|
|
router.get(system.logs.index().url, { file }, {
|
|
preserveState: true,
|
|
preserveScroll: true,
|
|
only: ['logs', 'selectedFile']
|
|
});
|
|
};
|
|
|
|
return (
|
|
|
|
<div className="flex flex-col gap-6 p-6">
|
|
<Head title="Logs" />
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">Logs</h1>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-medium">File Log:</span>
|
|
<Select value={selectedFile} onValueChange={onFileChange}>
|
|
<SelectTrigger className="w-[250px]">
|
|
<SelectValue placeholder="Pilih file" />
|
|
</SelectTrigger>
|
|
<SelectContent align="end">
|
|
{logFiles.map((file) => (
|
|
<SelectItem key={file} value={file}>
|
|
{file}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm p-5">
|
|
<CardContent className="p-0">
|
|
<DataTable
|
|
columns={columns}
|
|
data={logs}
|
|
filters={[
|
|
{
|
|
columnId: 'level',
|
|
title: 'Level',
|
|
options: [
|
|
{ label: 'ERROR', value: 'ERROR' },
|
|
{ label: 'WARNING', value: 'WARNING' },
|
|
{ label: 'INFO', value: 'INFO' },
|
|
{ label: 'DEBUG', value: 'DEBUG' },
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<LogDetailModal
|
|
log={viewingLog}
|
|
onClose={() => setViewingLog(null)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
SystemLogIndex.layout = {
|
|
breadcrumbs: [
|
|
{ title: 'Sistem' },
|
|
],
|
|
};
|