website refactor
This commit is contained in:
@@ -21,9 +21,8 @@ import {
|
||||
Zap,
|
||||
Terminal
|
||||
} from 'lucide-react';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { IconButton } from '@/ui/IconButton';
|
||||
import { Badge } from '@/ui/Badge';
|
||||
@@ -162,7 +161,7 @@ export function ErrorAnalyticsDashboard({
|
||||
|
||||
if (!isExpanded) {
|
||||
return (
|
||||
<Box position="fixed" bottom="4" left="4" zIndex={50}>
|
||||
<Stack position="fixed" bottom="4" left="4" zIndex={50}>
|
||||
<IconButton
|
||||
icon={Activity}
|
||||
onClick={() => setIsExpanded(true)}
|
||||
@@ -171,12 +170,12 @@ export function ErrorAnalyticsDashboard({
|
||||
size="lg"
|
||||
color="rgb(239, 68, 68)"
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
<Stack
|
||||
position="fixed"
|
||||
bottom="4"
|
||||
left="4"
|
||||
@@ -193,8 +192,8 @@ export function ErrorAnalyticsDashboard({
|
||||
maxHeight="80vh"
|
||||
>
|
||||
{/* Header */}
|
||||
<Box display="flex" alignItems="center" justifyContent="between" px={4} py={3} bg="bg-iron-gray/50" borderBottom borderColor="border-charcoal-outline">
|
||||
<Box display="flex" alignItems="center" gap={2}>
|
||||
<Stack display="flex" alignItems="center" justifyContent="between" px={4} py={3} bg="bg-iron-gray/50" borderBottom borderColor="border-charcoal-outline">
|
||||
<Stack display="flex" alignItems="center" gap={2}>
|
||||
<Icon icon={Activity} size={4} color="rgb(239, 68, 68)" />
|
||||
<Text size="sm" weight="semibold" color="text-white">Error Analytics</Text>
|
||||
{isDev && (
|
||||
@@ -202,8 +201,8 @@ export function ErrorAnalyticsDashboard({
|
||||
DEV
|
||||
</Badge>
|
||||
)}
|
||||
</Box>
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
</Stack>
|
||||
<Stack display="flex" alignItems="center" gap={1}>
|
||||
<IconButton
|
||||
icon={RefreshCw}
|
||||
onClick={updateStatsManual}
|
||||
@@ -218,18 +217,18 @@ export function ErrorAnalyticsDashboard({
|
||||
size="sm"
|
||||
title="Minimize"
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
{/* Tabs */}
|
||||
<Box display="flex" borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/30">
|
||||
<Stack display="flex" borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/30">
|
||||
{[
|
||||
{ id: 'errors', label: 'Errors', icon: AlertTriangle },
|
||||
{ id: 'api', label: 'API', icon: Globe },
|
||||
{ id: 'environment', label: 'Env', icon: Cpu },
|
||||
{ id: 'raw', label: 'Raw', icon: FileText },
|
||||
].map(tab => (
|
||||
<Box
|
||||
<Stack
|
||||
key={tab.id}
|
||||
as="button"
|
||||
type="button"
|
||||
@@ -256,12 +255,12 @@ export function ErrorAnalyticsDashboard({
|
||||
>
|
||||
{tab.label}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
))}
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{/* Content */}
|
||||
<Box flexGrow={1} overflow="auto" p={4}>
|
||||
<Stack flexGrow={1} overflow="auto" p={4}>
|
||||
<Stack gap={4}>
|
||||
{/* Search Bar */}
|
||||
{selectedTab === 'errors' && (
|
||||
@@ -278,53 +277,53 @@ export function ErrorAnalyticsDashboard({
|
||||
{selectedTab === 'errors' && stats && (
|
||||
<Stack gap={4}>
|
||||
{/* Error Summary */}
|
||||
<Box display="grid" gridCols={2} gap={2}>
|
||||
<Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Stack display="grid" gridCols={2} gap={2}>
|
||||
<Stack bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Text size="xs" color="text-gray-500" block>Total Errors</Text>
|
||||
<Text size="xl" weight="bold" color="text-red-400">{stats.totalErrors}</Text>
|
||||
</Box>
|
||||
<Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
</Stack>
|
||||
<Stack bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Text size="xs" color="text-gray-500" block>Error Types</Text>
|
||||
<Text size="xl" weight="bold" color="text-warning-amber">
|
||||
{Object.keys(stats.errorsByType).length}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
{/* Error Types Breakdown */}
|
||||
{Object.keys(stats.errorsByType).length > 0 && (
|
||||
<Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Box display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Stack bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Stack display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Icon icon={Bug} size={3} color="rgb(156, 163, 175)" />
|
||||
<Text size="xs" weight="semibold" color="text-gray-400">Error Types</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack gap={1} maxHeight="8rem" overflow="auto">
|
||||
{Object.entries(stats.errorsByType).map(([type, count]) => (
|
||||
<Box key={type} display="flex" justifyContent="between">
|
||||
<Stack key={type} display="flex" justifyContent="between">
|
||||
<Text size="xs" color="text-gray-300">{type}</Text>
|
||||
<Text size="xs" color="text-red-400" font="mono">{count}</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{/* Recent Errors */}
|
||||
{filteredRecentErrors.length > 0 && (
|
||||
<Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Box display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Stack bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Stack display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Icon icon={AlertTriangle} size={3} color="rgb(156, 163, 175)" />
|
||||
<Text size="xs" weight="semibold" color="text-gray-400">Recent Errors</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack gap={2} maxHeight="16rem" overflow="auto">
|
||||
{filteredRecentErrors.map((error, idx) => (
|
||||
<Box key={idx} bg="bg-deep-graphite" border borderColor="border-charcoal-outline" rounded="md" p={2}>
|
||||
<Box display="flex" justifyContent="between" alignItems="start" gap={2} mb={1}>
|
||||
<Stack key={idx} bg="bg-deep-graphite" border borderColor="border-charcoal-outline" rounded="md" p={2}>
|
||||
<Stack display="flex" justifyContent="between" alignItems="start" gap={2} mb={1}>
|
||||
<Text size="xs" font="mono" weight="bold" color="text-red-400" truncate>{error.type}</Text>
|
||||
<Text size="xs" color="text-gray-500" fontSize="10px">
|
||||
{new Date(error.timestamp).toLocaleTimeString()}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Text size="xs" color="text-gray-300" block mb={1}>{error.message}</Text>
|
||||
<Button
|
||||
variant="ghost"
|
||||
@@ -336,28 +335,28 @@ export function ErrorAnalyticsDashboard({
|
||||
>
|
||||
<Text size="xs" color="text-gray-500" fontSize="10px">Copy Details</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{/* Error Timeline */}
|
||||
{stats.errorsByTime.length > 0 && (
|
||||
<Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Box display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Stack bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Stack display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Icon icon={Clock} size={3} color="rgb(156, 163, 175)" />
|
||||
<Text size="xs" weight="semibold" color="text-gray-400">Last 10 Minutes</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack gap={1} maxHeight="8rem" overflow="auto">
|
||||
{stats.errorsByTime.map((point, idx) => (
|
||||
<Box key={idx} display="flex" justifyContent="between">
|
||||
<Stack key={idx} display="flex" justifyContent="between">
|
||||
<Text size="xs" color="text-gray-500">{point.time}</Text>
|
||||
<Text size="xs" color="text-red-400" font="mono">{point.count} errors</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
)}
|
||||
@@ -366,57 +365,57 @@ export function ErrorAnalyticsDashboard({
|
||||
{selectedTab === 'api' && stats && (
|
||||
<Stack gap={4}>
|
||||
{/* API Summary */}
|
||||
<Box display="grid" gridCols={2} gap={2}>
|
||||
<Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Stack display="grid" gridCols={2} gap={2}>
|
||||
<Stack bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Text size="xs" color="text-gray-500" block>Total Requests</Text>
|
||||
<Text size="xl" weight="bold" color="text-primary-blue">{stats.apiStats.totalRequests}</Text>
|
||||
</Box>
|
||||
<Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
</Stack>
|
||||
<Stack bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Text size="xs" color="text-gray-500" block>Success Rate</Text>
|
||||
<Text size="xl" weight="bold" color="text-performance-green">
|
||||
{formatPercentage(stats.apiStats.successful, stats.apiStats.totalRequests)}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
{/* API Stats */}
|
||||
<Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Box display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Stack bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Stack display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Icon icon={Globe} size={3} color="rgb(156, 163, 175)" />
|
||||
<Text size="xs" weight="semibold" color="text-gray-400">API Metrics</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack gap={1}>
|
||||
<Box display="flex" justifyContent="between">
|
||||
<Stack display="flex" justifyContent="between">
|
||||
<Text size="xs" color="text-gray-500">Successful</Text>
|
||||
<Text size="xs" color="text-performance-green" font="mono">{stats.apiStats.successful}</Text>
|
||||
</Box>
|
||||
<Box display="flex" justifyContent="between">
|
||||
</Stack>
|
||||
<Stack display="flex" justifyContent="between">
|
||||
<Text size="xs" color="text-gray-500">Failed</Text>
|
||||
<Text size="xs" color="text-red-400" font="mono">{stats.apiStats.failed}</Text>
|
||||
</Box>
|
||||
<Box display="flex" justifyContent="between">
|
||||
</Stack>
|
||||
<Stack display="flex" justifyContent="between">
|
||||
<Text size="xs" color="text-gray-500">Avg Duration</Text>
|
||||
<Text size="xs" color="text-warning-amber" font="mono">{formatDuration(stats.apiStats.averageDuration)}</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{/* Slowest Requests */}
|
||||
{stats.apiStats.slowestRequests.length > 0 && (
|
||||
<Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Box display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Stack bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Stack display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Icon icon={Zap} size={3} color="rgb(156, 163, 175)" />
|
||||
<Text size="xs" weight="semibold" color="text-gray-400">Slowest Requests</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack gap={1} maxHeight="10rem" overflow="auto">
|
||||
{stats.apiStats.slowestRequests.map((req, idx) => (
|
||||
<Box key={idx} display="flex" justifyContent="between" bg="bg-deep-graphite" p={1.5} rounded="sm" border borderColor="border-charcoal-outline">
|
||||
<Stack key={idx} display="flex" justifyContent="between" bg="bg-deep-graphite" p={1.5} rounded="sm" border borderColor="border-charcoal-outline">
|
||||
<Text size="xs" color="text-gray-300" truncate flexGrow={1}>{req.url}</Text>
|
||||
<Text size="xs" color="text-red-400" font="mono" ml={2}>{formatDuration(req.duration)}</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
)}
|
||||
@@ -425,103 +424,103 @@ export function ErrorAnalyticsDashboard({
|
||||
{selectedTab === 'environment' && stats && (
|
||||
<Stack gap={4}>
|
||||
{/* Environment Info */}
|
||||
<Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Box display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Stack bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Stack display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Icon icon={Cpu} size={3} color="rgb(156, 163, 175)" />
|
||||
<Text size="xs" weight="semibold" color="text-gray-400">Environment</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack gap={1}>
|
||||
<Box display="flex" justifyContent="between">
|
||||
<Stack display="flex" justifyContent="between">
|
||||
<Text size="xs" color="text-gray-500">Node Environment</Text>
|
||||
<Text size="xs" font="mono" weight="bold" color={stats.environment.mode === 'development' ? 'text-performance-green' : 'text-warning-amber'}>
|
||||
{stats.environment.mode}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
{stats.environment.version && (
|
||||
<Box display="flex" justifyContent="between">
|
||||
<Stack display="flex" justifyContent="between">
|
||||
<Text size="xs" color="text-gray-500">Version</Text>
|
||||
<Text size="xs" color="text-gray-300" font="mono">{stats.environment.version}</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
)}
|
||||
{stats.environment.buildTime && (
|
||||
<Box display="flex" justifyContent="between">
|
||||
<Stack display="flex" justifyContent="between">
|
||||
<Text size="xs" color="text-gray-500">Build Time</Text>
|
||||
<Text size="xs" color="text-gray-500" font="mono" fontSize="10px">{stats.environment.buildTime}</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{/* Browser Info */}
|
||||
<Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Box display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Stack bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Stack display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Icon icon={Globe} size={3} color="rgb(156, 163, 175)" />
|
||||
<Text size="xs" weight="semibold" color="text-gray-400">Browser</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack gap={1}>
|
||||
<Box display="flex" justifyContent="between">
|
||||
<Stack display="flex" justifyContent="between">
|
||||
<Text size="xs" color="text-gray-500">User Agent</Text>
|
||||
<Text size="xs" color="text-gray-300" truncate maxWidth="150px">{navigator.userAgent}</Text>
|
||||
</Box>
|
||||
<Box display="flex" justifyContent="between">
|
||||
</Stack>
|
||||
<Stack display="flex" justifyContent="between">
|
||||
<Text size="xs" color="text-gray-500">Language</Text>
|
||||
<Text size="xs" color="text-gray-300" font="mono">{navigator.language}</Text>
|
||||
</Box>
|
||||
<Box display="flex" justifyContent="between">
|
||||
</Stack>
|
||||
<Stack display="flex" justifyContent="between">
|
||||
<Text size="xs" color="text-gray-500">Platform</Text>
|
||||
<Text size="xs" color="text-gray-300" font="mono">{navigator.platform}</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{/* Performance */}
|
||||
<Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Box display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Stack bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Stack display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Icon icon={Activity} size={3} color="rgb(156, 163, 175)" />
|
||||
<Text size="xs" weight="semibold" color="text-gray-400">Performance</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack gap={1}>
|
||||
<Box display="flex" justifyContent="between">
|
||||
<Stack display="flex" justifyContent="between">
|
||||
<Text size="xs" color="text-gray-500">Viewport</Text>
|
||||
<Text size="xs" color="text-gray-300" font="mono">{window.innerWidth}x{window.innerHeight}</Text>
|
||||
</Box>
|
||||
<Box display="flex" justifyContent="between">
|
||||
</Stack>
|
||||
<Stack display="flex" justifyContent="between">
|
||||
<Text size="xs" color="text-gray-500">Screen</Text>
|
||||
<Text size="xs" color="text-gray-300" font="mono">{window.screen.width}x{window.screen.height}</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
{perf?.memory && (
|
||||
<Box display="flex" justifyContent="between">
|
||||
<Stack display="flex" justifyContent="between">
|
||||
<Text size="xs" color="text-gray-500">JS Heap</Text>
|
||||
<Text size="xs" color="text-gray-300" font="mono">
|
||||
{formatMemory(perf.memory.usedJSHeapSize)}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{/* Connection */}
|
||||
{nav?.connection && (
|
||||
<Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Box display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Stack bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Stack display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Icon icon={Zap} size={3} color="rgb(156, 163, 175)" />
|
||||
<Text size="xs" weight="semibold" color="text-gray-400">Network</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack gap={1}>
|
||||
<Box display="flex" justifyContent="between">
|
||||
<Stack display="flex" justifyContent="between">
|
||||
<Text size="xs" color="text-gray-500">Type</Text>
|
||||
<Text size="xs" color="text-gray-300" font="mono">{nav.connection.effectiveType}</Text>
|
||||
</Box>
|
||||
<Box display="flex" justifyContent="between">
|
||||
</Stack>
|
||||
<Stack display="flex" justifyContent="between">
|
||||
<Text size="xs" color="text-gray-500">Downlink</Text>
|
||||
<Text size="xs" color="text-gray-300" font="mono">{nav.connection.downlink}Mbps</Text>
|
||||
</Box>
|
||||
<Box display="flex" justifyContent="between">
|
||||
</Stack>
|
||||
<Stack display="flex" justifyContent="between">
|
||||
<Text size="xs" color="text-gray-500">RTT</Text>
|
||||
<Text size="xs" color="text-gray-300" font="mono">{nav.connection.rtt}ms</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
)}
|
||||
@@ -529,12 +528,12 @@ export function ErrorAnalyticsDashboard({
|
||||
{/* Raw Data Tab */}
|
||||
{selectedTab === 'raw' && stats && (
|
||||
<Stack gap={3}>
|
||||
<Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Box display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Stack bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Stack display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Icon icon={FileText} size={3} color="rgb(156, 163, 175)" />
|
||||
<Text size="xs" weight="semibold" color="text-gray-400">Export Options</Text>
|
||||
</Box>
|
||||
<Box display="flex" gap={2}>
|
||||
</Stack>
|
||||
<Stack display="flex" gap={2}>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={exportAllData}
|
||||
@@ -553,14 +552,14 @@ export function ErrorAnalyticsDashboard({
|
||||
>
|
||||
Copy Stats
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Box display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Stack bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Stack display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Icon icon={Trash2} size={3} color="rgb(156, 163, 175)" />
|
||||
<Text size="xs" weight="semibold" color="text-gray-400">Maintenance</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Button
|
||||
variant="danger"
|
||||
onClick={clearAllData}
|
||||
@@ -570,30 +569,30 @@ export function ErrorAnalyticsDashboard({
|
||||
>
|
||||
Clear All Logs
|
||||
</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Box display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Stack bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="md" p={3}>
|
||||
<Stack display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Icon icon={Terminal} size={3} color="rgb(156, 163, 175)" />
|
||||
<Text size="xs" weight="semibold" color="text-gray-400">Console Commands</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack gap={1} fontSize="10px">
|
||||
<Text color="text-gray-400" font="mono">• window.__GRIDPILOT_GLOBAL_HANDLER__</Text>
|
||||
<Text color="text-gray-400" font="mono">• window.__GRIDPILOT_API_LOGGER__</Text>
|
||||
<Text color="text-gray-400" font="mono">• window.__GRIDPILOT_REACT_ERRORS__</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{/* Footer */}
|
||||
<Box px={4} py={2} bg="bg-iron-gray/30" borderTop borderColor="border-charcoal-outline" display="flex" justifyContent="between" alignItems="center">
|
||||
<Stack px={4} py={2} bg="bg-iron-gray/30" borderTop borderColor="border-charcoal-outline" display="flex" justifyContent="between" alignItems="center">
|
||||
<Text size="xs" color="text-gray-500" fontSize="10px">Auto-refresh: {refreshInterval}ms</Text>
|
||||
{copied && <Text size="xs" color="text-performance-green" fontSize="10px">Copied!</Text>}
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user