konnosDashboard
ConnectingState.tsx113 lines · main
1import { useParams } from 'common'
2import { ExternalLink, Loader, Monitor, Server } from 'lucide-react'
3import Link from 'next/link'
4import { useEffect, useRef } from 'react'
5import { Badge, Button } from 'ui'
6
7import ShimmerLine from '@/components/ui/ShimmerLine'
8import {
9 useInvalidateProjectDetailsQuery,
10 useSetProjectPostgrestStatus,
11 type Project,
12} from '@/data/projects/project-detail-query'
13import { DOCS_URL } from '@/lib/constants'
14import pingPostgrest from '@/lib/pingPostgrest'
15
16export interface ConnectingStateProps {
17 project: Project
18}
19
20const ConnectingState = ({ project }: ConnectingStateProps) => {
21 const { ref } = useParams()
22 const checkProjectConnectionIntervalRef = useRef<number>(null)
23
24 const { setProjectPostgrestStatus } = useSetProjectPostgrestStatus()
25 const { invalidateProjectDetailsQuery } = useInvalidateProjectDetailsQuery()
26
27 useEffect(() => {
28 if (!project.restUrl) return
29
30 // Check project connection status every 4 seconds
31 // pingPostgrest timeouts in 2s, wait for another 2s before checking again
32 checkProjectConnectionIntervalRef.current = window.setInterval(testProjectConnection, 4000)
33 return () => {
34 if (checkProjectConnectionIntervalRef.current) {
35 clearInterval(checkProjectConnectionIntervalRef.current)
36 }
37 }
38 }, [project])
39
40 const testProjectConnection = async () => {
41 const result = await pingPostgrest(project.ref)
42 if (result) {
43 if (checkProjectConnectionIntervalRef.current) {
44 clearInterval(checkProjectConnectionIntervalRef.current)
45 }
46 setProjectPostgrestStatus(project.ref, 'ONLINE')
47 await invalidateProjectDetailsQuery(project.ref)
48 }
49 }
50
51 return (
52 <>
53 <div className="mx-auto my-16 w-full max-w-7xl space-y-16">
54 <div className="mx-6 space-y-16">
55 <div className="flex flex-col space-y-4 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-6">
56 <h1 className="text-3xl">{project.name}</h1>
57 <div>
58 <Badge variant="success">
59 <div className="flex items-center gap-2">
60 <Loader className="animate-spin" size={12} />
61 <span>Connecting to project</span>
62 </div>
63 </Badge>
64 </div>
65 </div>
66 <div className="flex h-[500px] items-center justify-center rounded-sm border border-overlay bg-surface-100 p-8">
67 <div className="w-[440px] space-y-4">
68 <div className="mx-auto flex max-w-[300px] items-center justify-center">
69 <div>
70 <div className="flex items-center justify-center w-12 h-12 rounded-md border">
71 <Monitor className="text-foreground-light" size={30} strokeWidth={1.5} />
72 </div>
73 </div>
74 <ShimmerLine active />
75 <div>
76 <div className="flex items-center justify-center w-12 h-12 rounded-md border">
77 <Server className="text-foreground-light" size={30} strokeWidth={1.5} />
78 </div>
79 </div>
80 </div>
81
82 <div className="space-y-1">
83 <p className="text-center">Connecting to {project.name}</p>
84 <p className="text-center text-sm text-foreground-light">
85 If you are unable to connect after a few minutes, check your project's health to
86 verify if it's running into any resource constraints.
87 </p>
88 </div>
89
90 <div className="flex items-center justify-center space-x-2">
91 <Button asChild type="default">
92 <Link href={`/project/${ref}/settings/infrastructure`}>
93 Check database health
94 </Link>
95 </Button>
96 <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
97 <Link
98 href={`${DOCS_URL}/guides/troubleshooting?products=platform#unable-to-connect-to-your-briven-project`}
99 className="translate-y-px"
100 >
101 Troubleshooting
102 </Link>
103 </Button>
104 </div>
105 </div>
106 </div>
107 </div>
108 </div>
109 </>
110 )
111}
112
113export default ConnectingState