gitea
This commit is contained in:
@@ -1,146 +1,206 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect } from 'react'
|
||||
import { useRouter, useParams } from 'next/navigation'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { monitorAPI } from '@/lib/api'
|
||||
import { isAuthenticated } from '@/lib/auth'
|
||||
|
||||
export default function MonitorHistoryPage() {
|
||||
const router = useRouter()
|
||||
const params = useParams()
|
||||
const id = params?.id as string
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAuthenticated()) {
|
||||
router.push('/login')
|
||||
}
|
||||
}, [router])
|
||||
|
||||
const { data: monitorData } = useQuery({
|
||||
queryKey: ['monitor', id],
|
||||
queryFn: async () => {
|
||||
const response = await monitorAPI.get(id)
|
||||
return response.monitor
|
||||
},
|
||||
})
|
||||
|
||||
const { data: historyData, isLoading } = useQuery({
|
||||
queryKey: ['history', id],
|
||||
queryFn: async () => {
|
||||
const response = await monitorAPI.history(id)
|
||||
return response.snapshots
|
||||
},
|
||||
})
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center">
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const snapshots = historyData || []
|
||||
const monitor = monitorData
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<header className="border-b bg-white">
|
||||
<div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => router.push('/dashboard')}
|
||||
className="text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
← Back
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">
|
||||
{monitor?.name || 'Monitor History'}
|
||||
</h1>
|
||||
{monitor && (
|
||||
<p className="text-sm text-gray-600 break-all">{monitor.url}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
|
||||
<h2 className="mb-4 text-xl font-semibold">Check History</h2>
|
||||
|
||||
{snapshots.length === 0 ? (
|
||||
<div className="rounded-lg bg-white p-12 text-center shadow">
|
||||
<p className="text-gray-600">No history yet</p>
|
||||
<p className="mt-2 text-sm text-gray-500">
|
||||
The first check will happen soon
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{snapshots.map((snapshot: any) => (
|
||||
<div
|
||||
key={snapshot.id}
|
||||
className={`rounded-lg bg-white p-4 shadow ${
|
||||
snapshot.changed ? 'border-l-4 border-l-blue-500' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={`rounded px-2 py-1 text-xs font-medium ${
|
||||
snapshot.changed
|
||||
? 'bg-blue-100 text-blue-800'
|
||||
: 'bg-gray-100 text-gray-800'
|
||||
}`}
|
||||
>
|
||||
{snapshot.changed ? 'Changed' : 'No Change'}
|
||||
</span>
|
||||
{snapshot.error_message && (
|
||||
<span className="rounded bg-red-100 px-2 py-1 text-xs font-medium text-red-800">
|
||||
Error
|
||||
</span>
|
||||
)}
|
||||
<span className="text-sm text-gray-600">
|
||||
{new Date(snapshot.created_at).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 flex gap-4 text-sm text-gray-600">
|
||||
<span>HTTP {snapshot.http_status}</span>
|
||||
<span>{snapshot.response_time}ms</span>
|
||||
{snapshot.change_percentage && (
|
||||
<span>{snapshot.change_percentage.toFixed(2)}% changed</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{snapshot.error_message && (
|
||||
<p className="mt-2 text-sm text-red-600">
|
||||
{snapshot.error_message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{snapshot.html_content && (
|
||||
<button
|
||||
onClick={() =>
|
||||
router.push(`/monitors/${id}/snapshot/${snapshot.id}`)
|
||||
}
|
||||
className="rounded-md border px-3 py-1 text-sm hover:bg-gray-50"
|
||||
>
|
||||
View Details
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
'use client'
|
||||
|
||||
import { useRouter, useParams } from 'next/navigation'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { monitorAPI } from '@/lib/api'
|
||||
import { DashboardLayout } from '@/components/layout/dashboard-layout'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
export default function MonitorHistoryPage() {
|
||||
const router = useRouter()
|
||||
const params = useParams()
|
||||
const id = params?.id as string
|
||||
|
||||
const { data: monitorData } = useQuery({
|
||||
queryKey: ['monitor', id],
|
||||
queryFn: async () => {
|
||||
const response = await monitorAPI.get(id)
|
||||
return response.monitor
|
||||
},
|
||||
})
|
||||
|
||||
const { data: historyData, isLoading } = useQuery({
|
||||
queryKey: ['history', id],
|
||||
queryFn: async () => {
|
||||
const response = await monitorAPI.history(id)
|
||||
return response.snapshots
|
||||
},
|
||||
})
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
|
||||
<p className="text-muted-foreground">Loading history...</p>
|
||||
</div>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
)
|
||||
}
|
||||
|
||||
const snapshots = historyData || []
|
||||
const monitor = monitorData
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
{/* Page Header */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<Button variant="ghost" size="sm" onClick={() => router.push('/monitors')} className="gap-2">
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">{monitor?.name || 'Monitor History'}</h1>
|
||||
{monitor && (
|
||||
<p className="text-sm text-muted-foreground mt-1 truncate max-w-lg">{monitor.url}</p>
|
||||
)}
|
||||
</div>
|
||||
{monitor && (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await monitorAPI.exportAuditTrail(id, 'json');
|
||||
} catch (e) {
|
||||
console.error('Export failed:', e);
|
||||
}
|
||||
}}
|
||||
className="gap-2"
|
||||
>
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
JSON
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await monitorAPI.exportAuditTrail(id, 'csv');
|
||||
} catch (e) {
|
||||
console.error('Export failed:', e);
|
||||
}
|
||||
}}
|
||||
className="gap-2"
|
||||
>
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
CSV
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* History List */}
|
||||
<div>
|
||||
<h2 className="mb-4 text-lg font-semibold">Check History</h2>
|
||||
|
||||
{snapshots.length === 0 ? (
|
||||
<Card className="text-center">
|
||||
<CardContent className="py-12">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
|
||||
<svg className="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="mb-2 text-lg font-semibold">No history yet</h3>
|
||||
<p className="text-muted-foreground">The first check will happen soon</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{snapshots.map((snapshot: any) => {
|
||||
// Determine border color based on HTTP status
|
||||
const getBorderColor = () => {
|
||||
if (snapshot.httpStatus >= 400 || snapshot.errorMessage) {
|
||||
return 'border-l-4 border-l-red-500' // Error (4xx, 5xx)
|
||||
}
|
||||
if (snapshot.httpStatus >= 200 && snapshot.httpStatus < 300) {
|
||||
if (snapshot.changed) {
|
||||
return 'border-l-4 border-l-green-500' // Success with change
|
||||
}
|
||||
return 'border-l-4 border-l-blue-400' // Success no change (neutral)
|
||||
}
|
||||
return 'border-l-4 border-l-blue-400' // Default neutral
|
||||
}
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={snapshot.id}
|
||||
className={`transition-all ${getBorderColor()}`}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{snapshot.changed ? (
|
||||
<Badge variant="default">Changed</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary">No Change</Badge>
|
||||
)}
|
||||
{snapshot.errorMessage && (
|
||||
<Badge variant="destructive">Error</Badge>
|
||||
)}
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{new Date(snapshot.createdAt).toLocaleString(undefined, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 flex flex-wrap gap-4 text-sm text-muted-foreground">
|
||||
<span>HTTP {snapshot.httpStatus}</span>
|
||||
<span>{snapshot.responseTime}ms</span>
|
||||
{snapshot.changePercentage && (
|
||||
<span>{Number(snapshot.changePercentage).toFixed(2)}% changed</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{snapshot.errorMessage && (
|
||||
<p className="mt-2 text-sm text-destructive">{snapshot.errorMessage}</p>
|
||||
)}
|
||||
|
||||
{snapshot.summary && (
|
||||
<div className="mt-3 p-3 bg-muted/50 rounded-md text-sm">
|
||||
<p className="font-medium text-foreground mb-1">Summary</p>
|
||||
<p>{snapshot.summary}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => router.push(`/monitors/${id}/snapshot/${snapshot.id}`)}
|
||||
>
|
||||
{snapshot.errorMessage ? 'View Error' : 'View Details'}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
)
|
||||
}
|
||||
|
||||
240
frontend/app/monitors/[id]/snapshot/[snapshotId]/page.tsx
Normal file
240
frontend/app/monitors/[id]/snapshot/[snapshotId]/page.tsx
Normal file
@@ -0,0 +1,240 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter, useParams } from 'next/navigation'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { monitorAPI } from '@/lib/api'
|
||||
import { DashboardLayout } from '@/components/layout/dashboard-layout'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued'
|
||||
|
||||
export default function SnapshotDetailsPage() {
|
||||
const router = useRouter()
|
||||
const params = useParams()
|
||||
const monitorId = params?.id as string
|
||||
const snapshotId = params?.snapshotId as string
|
||||
const [showHtml, setShowHtml] = useState(false)
|
||||
|
||||
const { data: monitorData } = useQuery({
|
||||
queryKey: ['monitor', monitorId],
|
||||
queryFn: async () => {
|
||||
const response = await monitorAPI.get(monitorId)
|
||||
return response.monitor
|
||||
},
|
||||
})
|
||||
|
||||
const { data: snapshotData, isLoading } = useQuery({
|
||||
queryKey: ['snapshot', monitorId, snapshotId],
|
||||
queryFn: async () => {
|
||||
const response = await monitorAPI.snapshot(monitorId, snapshotId)
|
||||
return response.snapshot
|
||||
},
|
||||
})
|
||||
|
||||
const { data: historyData } = useQuery({
|
||||
queryKey: ['history', monitorId],
|
||||
queryFn: async () => {
|
||||
const response = await monitorAPI.history(monitorId, 2)
|
||||
return response.snapshots
|
||||
}
|
||||
})
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
|
||||
<p className="text-muted-foreground">Loading snapshot...</p>
|
||||
</div>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
)
|
||||
}
|
||||
|
||||
const snapshot = snapshotData
|
||||
const monitor = monitorData
|
||||
const previousSnapshot = historyData?.find((s: any) =>
|
||||
new Date(s.createdAt) < new Date(snapshot?.createdAt)
|
||||
)
|
||||
|
||||
if (!snapshot) {
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<div className="flex flex-col items-center justify-center py-12 gap-4">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
|
||||
<svg className="h-8 w-8 text-destructive" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-lg font-medium">Snapshot not found</p>
|
||||
<Button variant="outline" onClick={() => router.push(`/monitors/${monitorId}`)}>
|
||||
Back to History
|
||||
</Button>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
{/* Page Header */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<Button variant="ghost" size="sm" onClick={() => router.push(`/monitors/${monitorId}`)} className="gap-2">
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Back to History
|
||||
</Button>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold">Snapshot Details</h1>
|
||||
{monitor && (
|
||||
<p className="text-sm text-muted-foreground mt-1">{monitor.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Snapshot Info Card */}
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<CardTitle>Snapshot Information</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm text-muted-foreground">Status</p>
|
||||
{snapshot.changed ? (
|
||||
<Badge variant="default">Changed</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary">No Change</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm text-muted-foreground">Created At</p>
|
||||
<p className="font-medium">
|
||||
{new Date(snapshot.createdAt).toLocaleString(undefined, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm text-muted-foreground">HTTP Status</p>
|
||||
<Badge variant={snapshot.httpStatus >= 400 ? 'destructive' : 'success'}>
|
||||
{snapshot.httpStatus || 'N/A'}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm text-muted-foreground">Response Time</p>
|
||||
<p className="font-medium">{snapshot.responseTime}ms</p>
|
||||
</div>
|
||||
|
||||
{snapshot.changePercentage && (
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm text-muted-foreground">Change Percentage</p>
|
||||
<p className="font-medium text-primary">
|
||||
{Number(snapshot.changePercentage).toFixed(2)}%
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{snapshot.errorMessage && (
|
||||
<div className="mt-6 rounded-lg bg-destructive/10 p-4">
|
||||
<p className="text-sm font-medium text-destructive">Error</p>
|
||||
<p className="text-sm text-destructive/80 mt-1">{snapshot.errorMessage}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Change Summary */}
|
||||
{snapshot.summary && (
|
||||
<div className="mt-6 rounded-lg bg-blue-50 border border-blue-200 p-4">
|
||||
<p className="text-sm font-medium text-blue-900">Change Summary</p>
|
||||
<p className="text-sm text-blue-700 mt-1">{snapshot.summary}</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Diff Viewer */}
|
||||
{snapshot.changed && previousSnapshot && (
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<CardTitle>Changes Detected</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="max-h-[500px] overflow-auto rounded-lg border border-border">
|
||||
<ReactDiffViewer
|
||||
oldValue={previousSnapshot.textContent || ''}
|
||||
newValue={snapshot.textContent || ''}
|
||||
splitView={true}
|
||||
compareMethod={DiffMethod.WORDS}
|
||||
useDarkTheme={false}
|
||||
styles={{
|
||||
variables: {
|
||||
light: {
|
||||
diffViewerBackground: 'hsl(40 14% 97%)',
|
||||
addedBackground: 'rgba(34, 197, 94, 0.1)',
|
||||
addedGutterBackground: 'rgba(34, 197, 94, 0.2)',
|
||||
removedBackground: 'rgba(239, 68, 68, 0.1)',
|
||||
removedGutterBackground: 'rgba(239, 68, 68, 0.2)',
|
||||
wordAddedBackground: 'rgba(34, 197, 94, 0.3)',
|
||||
wordRemovedBackground: 'rgba(239, 68, 68, 0.3)',
|
||||
addedGutterColor: '#166534',
|
||||
removedGutterColor: '#991b1b',
|
||||
gutterBackground: 'hsl(35 18% 88%)',
|
||||
gutterBackgroundDark: 'hsl(35 18% 85%)',
|
||||
codeFoldBackground: 'hsl(35 15% 82%)',
|
||||
codeFoldGutterBackground: 'hsl(35 15% 80%)',
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Text Content when no change */}
|
||||
{!snapshot.changed && snapshot.textContent && (
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<CardTitle>Text Content</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<pre className="max-h-96 overflow-auto rounded-lg bg-muted p-4 text-sm whitespace-pre-wrap scrollbar-thin">
|
||||
{snapshot.textContent}
|
||||
</pre>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* HTML Content Toggle */}
|
||||
{snapshot.htmlContent && (
|
||||
<Card>
|
||||
<CardHeader className="flex-row items-center justify-between space-y-0">
|
||||
<CardTitle>HTML Content</CardTitle>
|
||||
<Button variant="outline" size="sm" onClick={() => setShowHtml(!showHtml)}>
|
||||
{showHtml ? 'Hide HTML' : 'Show HTML'}
|
||||
</Button>
|
||||
</CardHeader>
|
||||
{showHtml && (
|
||||
<CardContent>
|
||||
<pre className="max-h-96 overflow-auto rounded-lg bg-foreground p-4 text-sm text-green-400 whitespace-pre-wrap scrollbar-thin">
|
||||
{snapshot.htmlContent}
|
||||
</pre>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
</DashboardLayout>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user