UnifiedLogsPreview.tsx42 lines · main

1	import { useParams } from 'common'
2	import Image from 'next/image'
3
4	import { InlineLink } from '@/components/ui/InlineLink'
5	import { BASE_PATH } from '@/lib/constants'
6
7	export const UnifiedLogsPreview = () => {
8	const { ref = '_' } = useParams()
9
10	return (
11	<div className="space-y-2">
12	<p className="text-foreground-light text-sm mb-4">
13	Experience our enhanced Logs interface with improved filtering, real-time updates, and a
14	unified view across all your services. Built for better performance and easier debugging.
15	</p>
16	<p className="text-foreground-light text-sm mb-4">
17	This interface is only available for organizations on the Enterprise plan.
18	</p>
19
20	<Image
21	alt="new-logs-preview"
22	src={`${BASE_PATH}/img/previews/new-logs-preview.png`}
23	width={1296}
24	height={900}
25	className="rounded-sm border mb-4"
26	/>
27
28	<div className="space-y-2 mt-4!">
29	<p className="text-sm">Enabling this preview will:</p>
30	<ul className="list-disc pl-6 text-sm text-foreground-light space-y-1">
31	<li>
32	Replace the current Logs interface on the{' '}
33	<InlineLink href={`/project/${ref}/logs`}>Logs page</InlineLink> with a unified view
34	</li>
35	<li>Provide enhanced filtering capabilities and real-time log streaming</li>
36	<li>Improve performance with optimized data loading and virtualization</li>
37	<li>Offer a more modern interface with better search and navigation</li>
38	</ul>
39	</div>
40	</div>
41	)
42	}