launchbase 1.1.2 → 1.1.4

package/template/frontend/src/pages/EdgeFunctions.tsx

@@ -0,0 +1,478 @@
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { 
+  Code, Plus, Play, Trash2, Zap, 
+  Search, Clock, Activity, RefreshCw
+} from 'lucide-react'
+import { useToast } from '@/components/Toast'
+
+interface EdgeFunction {
+  id: string
+  name: string
+  slug: string
+  runtime: string
+  sourceCode: string
+  status: string
+  deployedAt: string | null
+  deploymentUrl: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+interface EdgeFunctionLog {
+  id: string
+  status: string
+  duration: number
+  input: Record<string, any> | null
+  output: Record<string, any> | null
+  error: string | null
+  triggeredBy: string | null
+  createdAt: string
+}
+
+const RUNTIMES = [
+  { value: 'nodejs18', label: 'Node.js 18' },
+  { value: 'nodejs20', label: 'Node.js 20' },
+  { value: 'python311', label: 'Python 3.11' },
+  { value: 'go121', label: 'Go 1.21' },
+]
+
+export function EdgeFunctions() {
+  const queryClient = useQueryClient()
+  const toast = useToast()
+  
+  const [searchQuery, setSearchQuery] = useState('')
+  const [showCreateModal, setShowCreateModal] = useState(false)
+  const [showEditModal, setShowEditModal] = useState(false)
+  const [showLogsModal, setShowLogsModal] = useState(false)
+  const [selectedFunction, setSelectedFunction] = useState<EdgeFunction | null>(null)
+  const [functionLogs, setFunctionLogs] = useState<EdgeFunctionLog[]>([])
+  
+  const [newFunction, setNewFunction] = useState({
+    name: '',
+    slug: '',
+    runtime: 'nodejs18',
+    sourceCode: `export default async function handler(req, res) {
+  // Your code here
+  res.json({ message: 'Hello World' })
+}`,
+  })
+
+  // Fetch functions
+  const { data: functionsData, isLoading } = useQuery({
+    queryKey: ['edge-functions'],
+    queryFn: async () => {
+      const res = await fetch('/api/functions')
+      if (!res.ok) throw new Error('Failed to fetch functions')
+      return res.json()
+    }
+  })
+
+  const functions = functionsData?.functions || []
+  const stats = functionsData?.stats || { total: 0, deployed: 0, draft: 0, invocations: 0 }
+
+  // Create function mutation
+  const createMutation = useMutation({
+    mutationFn: async () => {
+      const res = await fetch('/api/functions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(newFunction)
+      })
+      if (!res.ok) {
+        const error = await res.json()
+        throw new Error(error.message || 'Failed to create function')
+      }
+      return res.json()
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['edge-functions'] })
+      setShowCreateModal(false)
+      setNewFunction({
+        name: '',
+        slug: '',
+        runtime: 'nodejs18',
+        sourceCode: `export default async function handler(req, res) {
+  // Your code here
+  res.json({ message: 'Hello World' })
+}`,
+      })
+      toast.success('Function created successfully')
+    },
+    onError: (error: Error) => {
+      toast.error(error.message)
+    }
+  })
+
+  // Deploy function mutation
+  const deployMutation = useMutation({
+    mutationFn: async (functionId: string) => {
+      const res = await fetch(`/api/functions/${functionId}/deploy`, {
+        method: 'POST'
+      })
+      if (!res.ok) {
+        const error = await res.json()
+        throw new Error(error.message || 'Failed to deploy function')
+      }
+      return res.json()
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['edge-functions'] })
+      toast.success('Function deployed successfully')
+    },
+    onError: (error: Error) => {
+      toast.error(error.message)
+    }
+  })
+
+  // Delete function mutation
+  const deleteMutation = useMutation({
+    mutationFn: async (functionId: string) => {
+      const res = await fetch(`/api/functions/${functionId}`, {
+        method: 'DELETE'
+      })
+      if (!res.ok) {
+        const error = await res.json()
+        throw new Error(error.message || 'Failed to delete function')
+      }
+      return res.json()
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['edge-functions'] })
+      toast.success('Function deleted successfully')
+    },
+    onError: (error: Error) => {
+      toast.error(error.message)
+    }
+  })
+
+  // Fetch logs
+  const fetchLogs = async (functionId: string) => {
+    try {
+      const res = await fetch(`/api/functions/${functionId}/logs`)
+      if (res.ok) {
+        const data = await res.json()
+        setFunctionLogs(data.logs || [])
+      }
+    } catch (error) {
+      console.error('Failed to fetch logs:', error)
+    }
+  }
+
+  const handleCreate = () => {
+    if (!newFunction.name.trim()) {
+      toast.error('Function name is required')
+      return
+    }
+    const slug = newFunction.slug || newFunction.name.toLowerCase().replace(/[^a-z0-9]/g, '-')
+    createMutation.mutate()
+  }
+
+  const handleNameChange = (name: string) => {
+    const slug = name.toLowerCase().replace(/[^a-z0-9]/g, '-')
+    setNewFunction({ ...newFunction, name, slug })
+  }
+
+  const filteredFunctions = functions.filter((f: EdgeFunction) => 
+    f.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    f.slug.toLowerCase().includes(searchQuery.toLowerCase())
+  )
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'deployed': return 'bg-green-100 text-green-700'
+      case 'draft': return 'bg-yellow-100 text-yellow-700'
+      case 'failed': return 'bg-red-100 text-red-700'
+      default: return 'bg-gray-100 text-gray-700'
+    }
+  }
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Edge Functions</h1>
+          <p className="text-gray-500 mt-1">Serverless functions for your project</p>
+        </div>
+        <button
+          onClick={() => setShowCreateModal(true)}
+          className="px-4 py-2 bg-primary text-white rounded-lg font-medium hover:bg-primary-600 flex items-center gap-2"
+        >
+          <Plus className="w-4 h-4" />
+          Create Function
+        </button>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+        <div className="bg-white rounded-lg border p-4">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-blue-100 rounded-lg">
+              <Code className="w-5 h-5 text-blue-600" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold">{stats.total}</p>
+              <p className="text-sm text-gray-500">Functions</p>
+            </div>
+          </div>
+        </div>
+        <div className="bg-white rounded-lg border p-4">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-green-100 rounded-lg">
+              <Play className="w-5 h-5 text-green-600" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold">{stats.deployed}</p>
+              <p className="text-sm text-gray-500">Deployed</p>
+            </div>
+          </div>
+        </div>
+        <div className="bg-white rounded-lg border p-4">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-yellow-100 rounded-lg">
+              <Clock className="w-5 h-5 text-yellow-600" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold">{stats.draft}</p>
+              <p className="text-sm text-gray-500">Draft</p>
+            </div>
+          </div>
+        </div>
+        <div className="bg-white rounded-lg border p-4">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-purple-100 rounded-lg">
+              <Activity className="w-5 h-5 text-purple-600" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold">{stats.invocations.toLocaleString()}</p>
+              <p className="text-sm text-gray-500">Invocations</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Search */}
+      <div className="mb-6">
+        <div className="relative max-w-md">
+          <Search className="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+          <input
+            type="text"
+            placeholder="Search functions..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 border rounded-lg"
+          />
+        </div>
+      </div>
+
+      {/* Functions List */}
+      <div className="bg-white rounded-lg border overflow-hidden">
+        {isLoading ? (
+          <div className="p-8 text-center text-gray-500">Loading functions...</div>
+        ) : filteredFunctions.length === 0 ? (
+          <div className="p-8 text-center">
+            <Zap className="w-12 h-12 text-gray-300 mx-auto mb-4" />
+            <p className="text-gray-500">No functions created yet</p>
+            <button
+              onClick={() => setShowCreateModal(true)}
+              className="mt-4 text-primary hover:underline"
+            >
+              Create your first function
+            </button>
+          </div>
+        ) : (
+          <table className="w-full">
+            <thead className="bg-gray-50 border-b">
+              <tr>
+                <th className="text-left px-4 py-3 text-sm font-medium text-gray-500">Name</th>
+                <th className="text-left px-4 py-3 text-sm font-medium text-gray-500">Status</th>
+                <th className="text-left px-4 py-3 text-sm font-medium text-gray-500">Runtime</th>
+                <th className="text-left px-4 py-3 text-sm font-medium text-gray-500">Last Deployed</th>
+                <th className="text-right px-4 py-3 text-sm font-medium text-gray-500">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {filteredFunctions.map((func: EdgeFunction) => (
+                <tr key={func.id} className="hover:bg-gray-50">
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-3">
+                      <div className="w-8 h-8 bg-primary-100 rounded flex items-center justify-center">
+                        <Code className="w-4 h-4 text-primary-600" />
+                      </div>
+                      <div>
+                        <p className="font-medium text-gray-900">{func.name}</p>
+                        <p className="text-sm text-gray-500">/{func.slug}</p>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className={`px-2 py-1 text-xs rounded-full ${getStatusColor(func.status)}`}>
+                      {func.status}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 text-sm text-gray-500">{func.runtime}</td>
+                  <td className="px-4 py-3 text-sm text-gray-500">
+                    {func.deployedAt ? new Date(func.deployedAt).toLocaleDateString() : 'Never'}
+                  </td>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center justify-end gap-2">
+                      <button 
+                        onClick={() => deployMutation.mutate(func.id)}
+                        className="p-1 hover:bg-green-100 rounded"
+                        title="Deploy"
+                        disabled={deployMutation.isPending}
+                      >
+                        <Play className="w-4 h-4 text-gray-400 hover:text-green-500" />
+                      </button>
+                      <button 
+                        onClick={() => {
+                          setSelectedFunction(func)
+                          fetchLogs(func.id)
+                          setShowLogsModal(true)
+                        }}
+                        className="p-1 hover:bg-blue-100 rounded"
+                        title="View Logs"
+                      >
+                        <Activity className="w-4 h-4 text-gray-400 hover:text-blue-500" />
+                      </button>
+                      <button 
+                        onClick={() => {
+                          if (confirm('Are you sure you want to delete this function?')) {
+                            deleteMutation.mutate(func.id)
+                          }
+                        }}
+                        className="p-1 hover:bg-red-100 rounded"
+                        title="Delete"
+                      >
+                        <Trash2 className="w-4 h-4 text-gray-400 hover:text-red-500" />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      {/* Create Function Modal */}
+      {showCreateModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+            <h2 className="text-xl font-bold mb-4">Create Edge Function</h2>
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
+                <input
+                  type="text"
+                  value={newFunction.name}
+                  onChange={(e) => handleNameChange(e.target.value)}
+                  className="w-full px-3 py-2 border rounded-lg"
+                  placeholder="my-function"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Slug</label>
+                <input
+                  type="text"
+                  value={newFunction.slug}
+                  onChange={(e) => setNewFunction({ ...newFunction, slug: e.target.value })}
+                  className="w-full px-3 py-2 border rounded-lg"
+                  placeholder="my-function"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Runtime</label>
+                <select
+                  value={newFunction.runtime}
+                  onChange={(e) => setNewFunction({ ...newFunction, runtime: e.target.value })}
+                  className="w-full px-3 py-2 border rounded-lg"
+                >
+                  {RUNTIMES.map(r => (
+                    <option key={r.value} value={r.value}>{r.label}</option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Code</label>
+                <textarea
+                  value={newFunction.sourceCode}
+                  onChange={(e) => setNewFunction({ ...newFunction, sourceCode: e.target.value })}
+                  className="w-full px-3 py-2 border rounded-lg font-mono text-sm"
+                  rows={12}
+                />
+              </div>
+            </div>
+            <div className="flex justify-end gap-3 mt-6">
+              <button
+                onClick={() => setShowCreateModal(false)}
+                className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleCreate}
+                disabled={createMutation.isPending}
+                className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-600 disabled:opacity-50"
+              >
+                {createMutation.isPending ? 'Creating...' : 'Create Function'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Logs Modal */}
+      {showLogsModal && selectedFunction && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 w-full max-w-3xl max-h-[90vh] overflow-y-auto">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-xl font-bold">Logs - {selectedFunction.name}</h2>
+              <button
+                onClick={() => fetchLogs(selectedFunction.id)}
+                className="p-2 hover:bg-gray-100 rounded"
+              >
+                <RefreshCw className="w-4 h-4" />
+              </button>
+            </div>
+            {functionLogs.length === 0 ? (
+              <p className="text-gray-500 text-center py-8">No logs yet</p>
+            ) : (
+              <div className="space-y-2">
+                {functionLogs.map((log) => (
+                  <div key={log.id} className="p-3 bg-gray-50 rounded-lg">
+                    <div className="flex items-center justify-between mb-2">
+                      <span className={`px-2 py-1 text-xs rounded ${
+                        log.status === 'success' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'
+                      }`}>
+                        {log.status}
+                      </span>
+                      <span className="text-xs text-gray-500">
+                        {new Date(log.createdAt).toLocaleString()}
+                      </span>
+                    </div>
+                    <p className="text-sm text-gray-600">Duration: {log.duration}ms</p>
+                    {log.error && (
+                      <p className="text-sm text-red-500 mt-1">{log.error}</p>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+            <div className="flex justify-end mt-6">
+              <button
+                onClick={() => {
+                  setShowLogsModal(false)
+                  setFunctionLogs([])
+                }}
+                className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}