konnosDashboard
InfrastructureInfo.tsx248 lines · main
1import { useParams } from 'common'
2import Link from 'next/link'
3import {
4 Badge,
5 Button,
6 Input,
7 InputGroup,
8 InputGroupAddon,
9 InputGroupInput,
10 Tooltip,
11 TooltipContent,
12 TooltipTrigger,
13} from 'ui'
14import { Admonition } from 'ui-patterns/admonition'
15import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
16import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
17
18import { ProjectUpgradeAlert } from '../General/Infrastructure/ProjectUpgradeAlert'
19import {
20 ReadReplicasWarning,
21 ValidationErrorsWarning,
22 ValidationWarningsAdmonition,
23} from './UpgradeWarnings'
24import { NoticeBar } from '@/components/interfaces/DiskManagement/ui/NoticeBar'
25import {
26 ScaffoldContainer,
27 ScaffoldDivider,
28 ScaffoldSection,
29 ScaffoldSectionContent,
30 ScaffoldSectionDetail,
31} from '@/components/layouts/Scaffold'
32import AlertError from '@/components/ui/AlertError'
33import { useProjectUpgradeEligibilityQuery } from '@/data/config/project-upgrade-eligibility-query'
34import { useProjectServiceVersionsQuery } from '@/data/projects/project-service-versions'
35import { useReadReplicasQuery } from '@/data/read-replicas/replicas-query'
36import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
37import { useIsOrioleDb, useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
38
39export const InfrastructureInfo = () => {
40 const { ref } = useParams()
41 const { data: project } = useSelectedProjectQuery()
42
43 const {
44 projectAuthAll: authEnabled,
45 projectSettingsDatabaseUpgrades: showDatabaseUpgrades,
46 databaseReplication: showReplication,
47 } = useIsFeatureEnabled([
48 'project_auth:all',
49 'project_settings:database_upgrades',
50 'database:replication',
51 ])
52
53 const {
54 data,
55 error,
56 isPending: isLoadingUpgradeEligibility,
57 isError: isErrorUpgradeEligibility,
58 isSuccess: isSuccessUpgradeEligibility,
59 } = useProjectUpgradeEligibilityQuery({
60 projectRef: ref,
61 })
62
63 const {
64 data: serviceVersions,
65 error: serviceVersionsError,
66 isPending: isLoadingServiceVersions,
67 isError: isErrorServiceVersions,
68 isSuccess: isSuccessServiceVersions,
69 } = useProjectServiceVersionsQuery({ projectRef: ref })
70
71 const { data: databases } = useReadReplicasQuery({ projectRef: ref })
72 const { current_app_version, current_app_version_release_channel, latest_app_version } =
73 data || {}
74
75 const isOnLatestVersion = current_app_version === latest_app_version
76 const currentPgVersion = (current_app_version ?? '')
77 .split('briven-postgres-')[1]
78 ?.replace('-orioledb', '')
79 const isVisibleReleaseChannel =
80 current_app_version_release_channel &&
81 !['ga', 'withdrawn'].includes(current_app_version_release_channel)
82 ? current_app_version_release_channel
83 : undefined
84 const isOrioleDb = useIsOrioleDb()
85 const latestPgVersion = (latest_app_version ?? '').split('briven-postgres-')[1]
86
87 const isInactive = project?.status === 'INACTIVE'
88 const hasReadReplicas = (databases ?? []).length > 1
89
90 return (
91 <>
92 <ScaffoldDivider />
93
94 {project?.cloud_provider !== 'FLY' && showReplication && (
95 <ScaffoldContainer>
96 <ScaffoldSection isFullWidth>
97 <NoticeBar
98 visible={true}
99 type="default"
100 title="Management of read replicas has moved"
101 description="Read replicas is now managed under Replication in the Database section."
102 actions={
103 <Button type="default" asChild>
104 <Link href={`/project/${ref}/database/replication`} className="no-underline!">
105 Go to Replication
106 </Link>
107 </Button>
108 }
109 />
110 </ScaffoldSection>
111 </ScaffoldContainer>
112 )}
113
114 <ScaffoldContainer>
115 <ScaffoldSection>
116 <ScaffoldSectionDetail>
117 <h4 className="text-base capitalize m-0">Service versions</h4>
118 <p className="text-foreground-light text-sm pr-8 mt-1">
119 Service versions and upgrade eligibility for your provisioned instance.
120 </p>
121 </ScaffoldSectionDetail>
122 <ScaffoldSectionContent>
123 {isInactive ? (
124 <Admonition
125 type="note"
126 showIcon={false}
127 title="Service versions cannot be retrieved while project is paused"
128 description="Restoring the project will update Postgres to the newest version"
129 />
130 ) : (
131 <>
132 {/* [Joshen] Double check why we need this waterfall loading behaviour here */}
133 {isLoadingUpgradeEligibility && <GenericSkeletonLoader />}
134 {isErrorUpgradeEligibility && (
135 <AlertError error={error} subject="Failed to retrieve Postgres version" />
136 )}
137 {isSuccessUpgradeEligibility && (
138 <>
139 {isLoadingServiceVersions && <GenericSkeletonLoader />}
140 {isErrorServiceVersions && (
141 <AlertError
142 error={serviceVersionsError}
143 subject="Failed to retrieve versions"
144 />
145 )}
146 {isSuccessServiceVersions && (
147 <>
148 {authEnabled && (
149 <FormItemLayout
150 label="Auth version"
151 layout="vertical"
152 isReactForm={false}
153 >
154 <Input readOnly disabled value={serviceVersions?.gotrue ?? ''} />
155 </FormItemLayout>
156 )}
157 <FormItemLayout
158 label="PostgREST version"
159 layout="vertical"
160 isReactForm={false}
161 >
162 <Input readOnly disabled value={serviceVersions?.postgrest ?? ''} />
163 </FormItemLayout>
164 <FormItemLayout
165 label="Postgres version"
166 layout="vertical"
167 isReactForm={false}
168 >
169 <InputGroup>
170 <InputGroupInput
171 readOnly
172 disabled
173 value={
174 currentPgVersion || serviceVersions?.['briven-postgres'] || ''
175 }
176 />
177 <InputGroupAddon align="inline-end">
178 {[
179 isVisibleReleaseChannel && (
180 <Tooltip key="release-channel">
181 <TooltipTrigger>
182 <Badge variant="warning" className="mr-1">
183 {isVisibleReleaseChannel}
184 </Badge>
185 </TooltipTrigger>
186 <TooltipContent side="bottom" className="w-44 text-center">
187 This project uses a {isVisibleReleaseChannel} database version
188 release
189 </TooltipContent>
190 </Tooltip>
191 ),
192 isOrioleDb && (
193 <Tooltip key="orioledb">
194 <TooltipTrigger>
195 <Badge variant="default" className="mr-1">
196 OrioleDB
197 </Badge>
198 </TooltipTrigger>
199 <TooltipContent side="bottom" className="w-44 text-center">
200 This project uses OrioleDB
201 </TooltipContent>
202 </Tooltip>
203 ),
204 isOnLatestVersion && (
205 <Tooltip key="latest-version">
206 <TooltipTrigger>
207 <Badge variant="success" className="mr-1">
208 Latest
209 </Badge>
210 </TooltipTrigger>
211 <TooltipContent side="bottom" className="w-52 text-center">
212 Project is on the latest version of Postgres that Briven
213 supports
214 </TooltipContent>
215 </Tooltip>
216 ),
217 ]}
218 </InputGroupAddon>
219 </InputGroup>
220 </FormItemLayout>
221 </>
222 )}
223
224 {showDatabaseUpgrades && data && data.eligible ? (
225 hasReadReplicas ? (
226 <ReadReplicasWarning latestPgVersion={latestPgVersion} />
227 ) : (
228 <ProjectUpgradeAlert />
229 )
230 ) : null}
231
232 {showDatabaseUpgrades && data && !data.eligible && (
233 <ValidationErrorsWarning validationErrors={data.validation_errors} />
234 )}
235
236 {showDatabaseUpgrades && data && data.warnings && (
237 <ValidationWarningsAdmonition warnings={data.warnings} />
238 )}
239 </>
240 )}
241 </>
242 )}
243 </ScaffoldSectionContent>
244 </ScaffoldSection>
245 </ScaffoldContainer>
246 </>
247 )
248}