zyflow 0.6.4

package/src/components/alerts/AlertCenter.tsx

@@ -0,0 +1,239 @@
+import { useState } from 'react'
+import { Bell, Settings, RefreshCw, BarChart3, Github, Loader2 } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { useAlerts, useAlertStats, useSyncGitHubActions, useGitHubAuthStatus } from '@/hooks/useAlerts'
+import type { AlertSource, AlertSeverity, AlertStatus } from '@/hooks/useAlerts'
+import { AlertList } from './AlertList'
+import { AlertDetail } from './AlertDetail'
+import { AlertSettings } from './AlertSettings'
+import { AlertDashboard } from './AlertDashboard'
+
+interface AlertCenterProps {
+  projectId?: string
+}
+
+export function AlertCenter({ projectId }: AlertCenterProps) {
+  const [selectedAlertId, setSelectedAlertId] = useState<string | null>(null)
+  const [showSettings, setShowSettings] = useState(false)
+  const [showDashboard, setShowDashboard] = useState(false)
+  const [filter, setFilter] = useState<{
+    source?: AlertSource
+    severity?: AlertSeverity
+    status?: AlertStatus
+  }>({})
+
+  // projectId를 포함한 필터로 쿼리
+  const alertsFilter = { ...filter, projectId }
+  const { data: alertsData, isLoading, refetch } = useAlerts(alertsFilter)
+  const { data: stats } = useAlertStats(projectId)
+  const { data: authStatus } = useGitHubAuthStatus()
+  const syncGitHub = useSyncGitHubActions()
+
+  const handleSelectAlert = (alertId: string) => {
+    setSelectedAlertId(alertId)
+    setShowSettings(false)
+  }
+
+  const handleBack = () => {
+    setSelectedAlertId(null)
+    setShowSettings(false)
+    setShowDashboard(false)
+  }
+
+  const handleSyncGitHub = async () => {
+    try {
+      // 프로젝트 ID를 포함하여 GitHub 동기화
+      const result = await syncGitHub.mutateAsync({ projectId })
+      if (result.newAlerts > 0) {
+        refetch()
+      }
+    } catch (error) {
+      console.error('Failed to sync GitHub Actions:', error)
+    }
+  }
+
+  if (showSettings) {
+    return <AlertSettings onBack={handleBack} />
+  }
+
+  if (showDashboard) {
+    return <AlertDashboard onBack={handleBack} />
+  }
+
+  if (selectedAlertId) {
+    return <AlertDetail alertId={selectedAlertId} onBack={handleBack} />
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b px-4 py-3">
+        <div className="flex items-center gap-2">
+          <Bell className="h-5 w-5" />
+          <span className="font-medium">Alerts</span>
+          {stats && stats.total > 0 && (
+            <span className="rounded-full bg-red-500 px-2 py-0.5 text-xs text-white">
+              {stats.total}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-1">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleSyncGitHub}
+                  disabled={syncGitHub.isPending || !authStatus?.authenticated}
+                  title="Sync GitHub Actions"
+                >
+                  {syncGitHub.isPending ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <Github className="h-4 w-4" />
+                  )}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {authStatus?.authenticated ? (
+                  <div className="text-xs">
+                    <p>Sync GitHub Actions ({authStatus.method === 'pat' ? 'PAT' : 'CLI'})</p>
+                    <p className="text-muted-foreground">@{authStatus.user}</p>
+                    {syncGitHub.data && (
+                      <p className="text-muted-foreground">
+                        Last: {syncGitHub.data.newAlerts} new, {syncGitHub.data.skipped} skipped
+                      </p>
+                    )}
+                  </div>
+                ) : (
+                  <div className="text-xs text-yellow-500">
+                    <p>GitHub 인증 필요</p>
+                    <p className="text-muted-foreground">
+                      .env에 GITHUB_PERSONAL_ACCESS_TOKEN 설정
+                    </p>
+                  </div>
+                )}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => refetch()}
+            disabled={isLoading}
+            title="Refresh"
+          >
+            <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setShowDashboard(true)}
+            title="Dashboard"
+          >
+            <BarChart3 className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setShowSettings(true)}
+            title="Settings"
+          >
+            <Settings className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Stats Summary */}
+      {stats && (
+        <div className="flex gap-4 border-b px-4 py-2 text-xs">
+          <div className="flex items-center gap-1">
+            <span className="h-2 w-2 rounded-full bg-red-500" />
+            <span>Critical: {stats.bySeverity?.critical || 0}</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="h-2 w-2 rounded-full bg-yellow-500" />
+            <span>Warning: {stats.bySeverity?.warning || 0}</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="h-2 w-2 rounded-full bg-blue-500" />
+            <span>Info: {stats.bySeverity?.info || 0}</span>
+          </div>
+        </div>
+      )}
+
+      {/* Filters */}
+      <div className="flex gap-2 border-b px-4 py-2">
+        <Select
+          value={filter.source || 'all'}
+          onValueChange={(v) => setFilter({ ...filter, source: v === 'all' ? undefined : v as AlertSource })}
+        >
+          <SelectTrigger className="h-8 w-[100px] text-xs">
+            <SelectValue placeholder="Source" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Sources</SelectItem>
+            <SelectItem value="github">GitHub</SelectItem>
+            <SelectItem value="vercel">Vercel</SelectItem>
+            <SelectItem value="sentry">Sentry</SelectItem>
+            <SelectItem value="supabase">Supabase</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Select
+          value={filter.severity || 'all'}
+          onValueChange={(v) => setFilter({ ...filter, severity: v === 'all' ? undefined : v as AlertSeverity })}
+        >
+          <SelectTrigger className="h-8 w-[100px] text-xs">
+            <SelectValue placeholder="Severity" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All</SelectItem>
+            <SelectItem value="critical">Critical</SelectItem>
+            <SelectItem value="warning">Warning</SelectItem>
+            <SelectItem value="info">Info</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Select
+          value={filter.status || 'all'}
+          onValueChange={(v) => setFilter({ ...filter, status: v === 'all' ? undefined : v as AlertStatus })}
+        >
+          <SelectTrigger className="h-8 w-[100px] text-xs">
+            <SelectValue placeholder="Status" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All</SelectItem>
+            <SelectItem value="pending">Pending</SelectItem>
+            <SelectItem value="processing">Processing</SelectItem>
+            <SelectItem value="resolved">Resolved</SelectItem>
+            <SelectItem value="ignored">Ignored</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Alert List */}
+      <div className="flex-1 overflow-auto">
+        <AlertList
+          alerts={alertsData?.alerts || []}
+          isLoading={isLoading}
+          onSelectAlert={handleSelectAlert}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/alerts/AlertDashboard.tsx

@@ -0,0 +1,211 @@
+import { Clock, CheckCircle, Zap, AlertTriangle, TrendingUp, TrendingDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import {
+  useDashboardStats,
+  useAlertPatterns,
+  formatResolutionTime,
+  formatChange,
+  getSourceIcon,
+} from '@/hooks/useAlerts'
+
+interface AlertDashboardProps {
+  onBack: () => void
+}
+
+export function AlertDashboard({ onBack }: AlertDashboardProps) {
+  const { data: stats, isLoading: statsLoading } = useDashboardStats()
+  const { data: patterns } = useAlertPatterns(undefined, 5)
+
+  if (statsLoading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        Loading...
+      </div>
+    )
+  }
+
+  const weekChange = stats ? formatChange(stats.weekOverWeekChange) : { text: '-', isPositive: false }
+
+  return (
+    <div className="flex h-full flex-col overflow-auto">
+      {/* Header */}
+      <div className="border-b px-4 py-3">
+        <div className="flex items-center justify-between">
+          <span className="font-medium">Dashboard</span>
+          <button
+            onClick={onBack}
+            className="text-xs text-muted-foreground hover:text-foreground"
+          >
+            ← Back to Alerts
+          </button>
+        </div>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="p-4 space-y-4">
+        {/* Main Stats */}
+        <div className="grid grid-cols-2 gap-3">
+          {/* Today's Alerts */}
+          <div className="rounded-lg border p-3">
+            <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
+              <AlertTriangle className="h-3 w-3" />
+              Today
+            </div>
+            <div className="text-2xl font-semibold">
+              {stats?.todayAlerts ?? 0}
+            </div>
+            {stats?.criticalToday ? (
+              <div className="text-xs text-red-500 mt-1">
+                {stats.criticalToday} critical
+              </div>
+            ) : null}
+          </div>
+
+          {/* Pending */}
+          <div className="rounded-lg border p-3">
+            <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
+              <Clock className="h-3 w-3" />
+              Pending
+            </div>
+            <div className="text-2xl font-semibold text-yellow-500">
+              {stats?.pendingAlerts ?? 0}
+            </div>
+          </div>
+
+          {/* Resolution Rate */}
+          <div className="rounded-lg border p-3">
+            <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
+              <CheckCircle className="h-3 w-3" />
+              Resolution Rate
+            </div>
+            <div className="text-2xl font-semibold text-green-500">
+              {stats?.resolutionRate ?? 0}%
+            </div>
+            <div className="text-xs text-muted-foreground mt-1">
+              Last 7 days
+            </div>
+          </div>
+
+          {/* Auto-fix Rate */}
+          <div className="rounded-lg border p-3">
+            <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
+              <Zap className="h-3 w-3" />
+              Auto-fix Rate
+            </div>
+            <div className="text-2xl font-semibold text-blue-500">
+              {stats?.autoFixRate ?? 0}%
+            </div>
+            <div className="text-xs text-muted-foreground mt-1">
+              {stats?.autoFixedCount ?? 0} auto / {stats?.manualFixedCount ?? 0} manual
+            </div>
+          </div>
+        </div>
+
+        {/* Trend & Avg Time */}
+        <div className="grid grid-cols-2 gap-3">
+          {/* Week over Week */}
+          <div className="rounded-lg border p-3">
+            <div className="text-xs text-muted-foreground mb-1">
+              Week over Week
+            </div>
+            <div className={cn(
+              'flex items-center gap-1 text-lg font-semibold',
+              weekChange.isPositive ? 'text-green-500' : 'text-red-500'
+            )}>
+              {weekChange.isPositive ? (
+                <TrendingDown className="h-4 w-4" />
+              ) : (
+                <TrendingUp className="h-4 w-4" />
+              )}
+              {weekChange.text}
+            </div>
+            <div className="text-xs text-muted-foreground mt-1">
+              {weekChange.isPositive ? 'Fewer alerts' : 'More alerts'}
+            </div>
+          </div>
+
+          {/* Avg Resolution Time */}
+          <div className="rounded-lg border p-3">
+            <div className="text-xs text-muted-foreground mb-1">
+              Avg. Resolution
+            </div>
+            <div className="text-lg font-semibold">
+              {stats?.avgResolutionTimeHours != null
+                ? `${stats.avgResolutionTimeHours}h`
+                : '-'}
+            </div>
+            <div className="text-xs text-muted-foreground mt-1">
+              Last 30 days
+            </div>
+          </div>
+        </div>
+
+        {/* Top Patterns */}
+        {patterns && patterns.length > 0 && (
+          <div className="space-y-2">
+            <div className="text-xs font-medium text-muted-foreground">
+              Top Alert Patterns
+            </div>
+            <div className="rounded-lg border divide-y">
+              {patterns.map((pattern) => (
+                <div key={pattern.id} className="p-2">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm">{getSourceIcon(pattern.source)}</span>
+                    <span className="text-xs font-medium flex-1 truncate">
+                      {pattern.type}
+                    </span>
+                    <span className="text-xs text-muted-foreground">
+                      {pattern.resolution_count}x
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-4 mt-1 text-xs text-muted-foreground">
+                    <span className="text-green-500">
+                      {Math.round((pattern.success_rate || 0) * 100)}% auto-fix
+                    </span>
+                    <span>
+                      Avg: {formatResolutionTime(pattern.avg_resolution_time)}
+                    </span>
+                  </div>
+                  {pattern.recommended_fix && (
+                    <div className="mt-1 text-xs text-muted-foreground truncate">
+                      💡 {pattern.recommended_fix}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Quick Actions */}
+        <div className="space-y-2">
+          <div className="text-xs font-medium text-muted-foreground">
+            Quick Actions
+          </div>
+          <div className="grid grid-cols-2 gap-2">
+            <button
+              onClick={onBack}
+              className="rounded-lg border p-3 text-left hover:bg-muted/50 transition-colors"
+            >
+              <div className="text-sm font-medium">View Alerts</div>
+              <div className="text-xs text-muted-foreground">
+                {stats?.pendingAlerts ?? 0} pending
+              </div>
+            </button>
+            <button
+              className="rounded-lg border p-3 text-left hover:bg-muted/50 transition-colors"
+              disabled
+            >
+              <div className="text-sm font-medium text-muted-foreground">
+                Configure Webhooks
+              </div>
+              <div className="text-xs text-muted-foreground">
+                Settings
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}