ff5b39241a
fixed cache Refactoring from app router to page router Refactoring from app router to page router Add authentication with JWT base ui done protect the dashboard added transitions styling type trick added cleanup Add enable-disable logic add transactional emails Improvements on delay and frontend added description on select implement auth with magic link migrate to mariadb webhook signature working Adding async processing with queues Implemented webhook reply functionality Add son execution logs update status logic Add recent activity monitoring to sons show son performance in dashboard add readme implement listmonk connector listmonk-connector-v1 Create CODE_OF_CONDUCT.md Create LICENSE
96 lines
2.9 KiB
TypeScript
96 lines
2.9 KiB
TypeScript
import React, { useState } from "react";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { Button } from "@/components/ui/button";
|
|
import { WebhookDetailsDialog } from "@/components/WebhookDetailsDialog";
|
|
import { useWebhookLogs } from "@/hooks/useWebhookLogs";
|
|
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
|
|
|
export const WebhookTable: React.FC = () => {
|
|
const { logs, loading, error, fetchNextPage } = useWebhookLogs();
|
|
const [selectedLogId, setSelectedLogId] = useState<string | null>(null);
|
|
|
|
if (loading) return <TableSkeleton />;
|
|
if (error) return <ErrorDisplay message={error.message} />;
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Webhook Logs</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Timestamp</TableHead>
|
|
<TableHead>Method</TableHead>
|
|
<TableHead>Path</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead>Duration (ms)</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{logs.map((log) => (
|
|
<TableRow
|
|
key={log.id}
|
|
onClick={() => setSelectedLogId(log.id)}
|
|
className="cursor-pointer hover:bg-muted"
|
|
>
|
|
<TableCell>
|
|
{new Date(log.timestamp).toLocaleString()}
|
|
</TableCell>
|
|
<TableCell>{log.method}</TableCell>
|
|
<TableCell>{log.path}</TableCell>
|
|
<TableCell>{log.status_code}</TableCell>
|
|
<TableCell>{log.duration}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
<div className="mt-4 flex justify-center">
|
|
<Button onClick={fetchNextPage}>Load More</Button>
|
|
</div>
|
|
</CardContent>
|
|
{selectedLogId && (
|
|
<WebhookDetailsDialog
|
|
logId={selectedLogId}
|
|
onClose={() => setSelectedLogId(null)}
|
|
/>
|
|
)}
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
const TableSkeleton: React.FC = () => (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Webhook Logs</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-2">
|
|
<div className="h-8 bg-gray-200 rounded animate-pulse" />
|
|
<div className="h-8 bg-gray-200 rounded animate-pulse" />
|
|
<div className="h-8 bg-gray-200 rounded animate-pulse" />
|
|
<div className="h-8 bg-gray-200 rounded animate-pulse" />
|
|
<div className="h-8 bg-gray-200 rounded animate-pulse" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
|
|
const ErrorDisplay: React.FC<{ message: string }> = ({ message }) => (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Error</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-red-500">{message}</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|