initial commit

2025-03-16 07:38:30 -06:00 · 2025-03-16 07:38:30 -06:00 · 8a67761c9a
commit 8a67761c9a
83 changed files with 15510 additions and 0 deletions
--- a/components/api-logs.tsx
+++ b/components/api-logs.tsx
@ -0,0 +1,134 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Trash2, RefreshCw, FileText } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+
+interface LogEntry {
+  id: string;
+  timestamp: string;
+  method: string;
+  url: string;
+  status: number;
+  duration: number;
+}
+
+export function ApiLogs() {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchLogs = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/vultr/logs');
+      if (!response.ok) {
+        throw new Error('Failed to fetch logs');
+      }
+      const data = await response.json();
+      setLogs(data.logs || []);
+    } catch (error) {
+      console.error('Error fetching logs:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const clearLogs = async () => {
+    try {
+      const response = await fetch('/api/vultr/logs', {
+        method: 'DELETE',
+      });
+      if (!response.ok) {
+        throw new Error('Failed to clear logs');
+      }
+      setLogs([]);
+    } catch (error) {
+      console.error('Error clearing logs:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchLogs();
+  }, []);
+
+  const getMethodColor = (method: string) => {
+    const colors: Record<string, string> = {
+      GET: 'bg-blue-500/10 text-blue-500 dark:bg-blue-500/20',
+      POST: 'bg-green-500/10 text-green-500 dark:bg-green-500/20',
+      PUT: 'bg-amber-500/10 text-amber-500 dark:bg-amber-500/20',
+      DELETE: 'bg-red-500/10 text-red-500 dark:bg-red-500/20',
+    };
+    return colors[method] || 'bg-gray-500/10 text-gray-500 dark:bg-gray-500/20';
+  };
+
+  const getStatusColor = (status: number) => {
+    if (status >= 200 && status < 300) {
+      return 'bg-green-500/10 text-green-500 dark:bg-green-500/20';
+    } else if (status >= 300 && status < 400) {
+      return 'bg-blue-500/10 text-blue-500 dark:bg-blue-500/20';
+    } else if (status >= 400 && status < 500) {
+      return 'bg-amber-500/10 text-amber-500 dark:bg-amber-500/20';
+    } else {
+      return 'bg-red-500/10 text-red-500 dark:bg-red-500/20';
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex justify-between items-center mb-4">
+        <h3 className="text-lg font-medium">API Request Logs</h3>
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm" onClick={fetchLogs}>
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Refresh
+          </Button>
+          <Button variant="outline" size="sm" onClick={clearLogs}>
+            <Trash2 className="h-4 w-4 mr-2" />
+            Clear
+          </Button>
+        </div>
+      </div>
+
+      {logs.length === 0 ? (
+        <div className="flex flex-col items-center justify-center h-full py-12 text-center">
+          <FileText className="h-12 w-12 text-muted-foreground opacity-50 mb-4" />
+          <h3 className="text-lg font-medium">No API Logs</h3>
+          <p className="text-sm text-muted-foreground mt-2 max-w-md">
+            There are no API request logs to display. Logs will appear here as you interact with the Vultr API.
+          </p>
+        </div>
+      ) : (
+        <ScrollArea className="h-[calc(100vh-300px)]">
+          <div className="space-y-3 pr-4">
+            {logs.map((log) => (
+              <Card key={log.id} className="overflow-hidden">
+                <CardContent className="p-4">
+                  <div className="flex items-center justify-between mb-2">
+                    <div className="flex items-center gap-2">
+                      <Badge className={getMethodColor(log.method)}>
+                        {log.method}
+                      </Badge>
+                      <Badge className={getStatusColor(log.status)}>
+                        {log.status}
+                      </Badge>
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                      {new Date(log.timestamp).toLocaleString()}
+                    </div>
+                  </div>
+                  <div className="text-sm font-mono break-all">{log.url}</div>
+                  <div className="text-xs text-muted-foreground mt-1">
+                    Duration: {log.duration}ms
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </ScrollArea>
+      )}
+    </div>
+  );
+}