dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-14 21:59:16 +03:00
Code Issues Packages Projects Releases Wiki Activity

Removes unneeded files that were consolidated into ConnectionPooling

Browse Source
This commit is contained in:
Terry Sutton committed 2022-05-19 10:47:02 -02:30
1 parent 8176a0fcd8
commit fcd221e984
6 files changed
+41 -296
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

studio/components/interfaces/Database/Pooling/BouncerSettings.tsx
-73
View File
@@ -1,73 +0,0 @@
import { FC, useState, useEffect } from 'react'
import { observer } from 'mobx-react-lite'
import { Typography } from '@supabase/ui'
import { useStore } from 'hooks'
import { pluckObjectFields } from 'lib/helpers'
import Loading from 'components/ui/Loading'
import PgBouncerConfig from './PgBouncerConfig'
import Panel from 'components/to-be-cleaned/Panel'
interface Props {}
const BouncerSettings: FC<Props> = ({}) => {
const { ui, app } = useStore()
const projectRef = ui.selectedProject?.ref ?? 'default'
const [isLoading, setIsLoading] = useState<boolean>(true)
const [poolingConfiguration, setPoolingConfiguration] = useState<any>()
useEffect(() => {
fetchPoolingConfiguration()
}, [])
const fetchPoolingConfiguration = async () => {
setIsLoading(true)
const response = await app.database.getPoolingConfiguration(projectRef)
setPoolingConfiguration(response)
setIsLoading(false)
}
if (isLoading) return <Loading />
if (poolingConfiguration.error) {
return (
<div className="p-4">
<Typography.Text type="secondary">Error loading pooling configuration</Typography.Text>
</div>
)
}
const { project } = poolingConfiguration
// for older projects
if (!project.pgbouncer_enabled && project.pool_mode == null)
return (
<Panel
title={
<Typography.Title key="panel-title" level={5} className="mb-0">
Connection Pooling is not available for this project
</Typography.Title>
}
>
<Panel.Content>
<Typography.Text type="secondary">Please start a new project to enable this feature.</Typography.Text>
</Panel.Content>
</Panel>
)
const formModel = project
const DB_FIELDS = ['db_host', 'db_name', 'db_port', 'db_user', 'inserted_at']
const connectionInfo = pluckObjectFields(formModel, DB_FIELDS)
const BOUNCER_FIELDS = [
'default_pool_size',
'ignore_startup_parameters',
'pool_mode',
'pgbouncer_enabled',
]
const bouncerInfo = pluckObjectFields(formModel, BOUNCER_FIELDS)
return (
<PgBouncerConfig config={bouncerInfo} projectRef={projectRef} />
)
}
export default observer(BouncerSettings)
studio/components/interfaces/Database/Pooling/ConnectionPoolingSettings.tsx → studio/components/interfaces/Database/Pooling/ConnectionPooling.tsx
+37 -32
View File
@@ -15,7 +15,7 @@ import { Input } from '@supabase/ui'
interface Props {}
const BouncerSettings: FC<Props> = ({}) => {
const ConnectionPooling: FC<Props> = () => {
const { ui, app } = useStore()
const projectRef = ui.selectedProject?.ref ?? 'default'
@@ -70,31 +70,28 @@ const BouncerSettings: FC<Props> = ({}) => {
]
const bouncerInfo = pluckObjectFields(formModel, BOUNCER_FIELDS)
console.log()
return (
<PgbouncerConfig projectRef={projectRef} config={bouncerInfo} portNumber={connectionInfo.db_port} />
<PgbouncerConfig projectRef={projectRef} bouncerInfo={bouncerInfo} connectionInfo={connectionInfo} />
)
}
export default observer(BouncerSettings)
export default observer(ConnectionPooling)
interface ConfigProps {
projectRef: string
config: any,
portNumber: number
bouncerInfo: {default_pool_size: number, ignore_startup_parameters: 'string', pool_mode: string, pgbouncer_enabled: boolean},
connectionInfo: {db_host: string, db_name: string, db_port: number, db_user: string, inserted_at: string}
}
export const PgbouncerConfig: FC<ConfigProps> = observer(({ projectRef, config, portNumber }) => {
export const PgbouncerConfig: FC<ConfigProps> = observer(({ projectRef, bouncerInfo, connectionInfo }) => {
const { ui } = useStore()
const [updates, setUpdates] = useState<any>({
// pgbouncer_status: config.pgbouncer_status,
pgbouncer_enabled: config.pgbouncer_enabled,
pool_mode: config.pool_mode || 'transaction',
default_pool_size: config.default_pool_size || '',
ignore_startup_parameters: config.ignore_startup_parameters || '',
pgbouncer_enabled: bouncerInfo.pgbouncer_enabled,
pool_mode: bouncerInfo.pool_mode || 'transaction',
default_pool_size: bouncerInfo.default_pool_size || '',
ignore_startup_parameters: bouncerInfo.ignore_startup_parameters || '',
})
const updateConfig = async (updatedConfig: any) => {
@@ -152,31 +149,20 @@ export const PgbouncerConfig: FC<ConfigProps> = observer(({ projectRef, config,
return (
<SchemaFormPanel
title="Connection Pooling Settings"
title="Connection Pooling"
schema={formSchema}
model={updates}
submitLabel="Save"
cancelLabel="Cancel"
onChangeModel={(model: any) => setUpdates(model)}
onSubmit={(model: any) => updateConfig(model)}
onReset={() => setUpdates(config)}
onReset={() => setUpdates(bouncerInfo)}
>
<div className="space-y-6 py-4">
<ToggleField name="pgbouncer_enabled" />
<Divider light />
<Input
className="input-mono"
layout="horizontal"
readOnly
copy
disabled
value={portNumber}
label="Port"
/>
<Divider light />
{/* <AutoField name="pgbouncer_status" disabled={true} /> */}
{updates.pgbouncer_enabled && (
<>
<AutoField
@@ -199,14 +185,33 @@ export const PgbouncerConfig: FC<ConfigProps> = observer(({ projectRef, config,
</p>
</div>
<Divider light />
{/* <AutoField
name="default_pool_size"
showInlineError
errorMessage="Value must be within 1 and 20"
/> */}
<AutoField name="ignore_startup_parameters" />
</>
)}
<Divider light />
<Input
className="input-mono"
layout="horizontal"
readOnly
copy
disabled
value={connectionInfo.db_port}
label="Port"
/>
<Divider light />
<Input
className="input-mono"
layout="vertical"
readOnly
copy
disabled
label="Connection string"
value={
`postgres://${connectionInfo.db_user}:[YOUR-PASSWORD]@` +
`${connectionInfo.db_host}:${connectionInfo.db_port}` +
`/${connectionInfo.db_name}`
}
/>
</div>
</SchemaFormPanel>
)
studio/components/interfaces/Database/Pooling/DownloadCertificate.tsx
-34
View File
@@ -1,34 +0,0 @@
import { FC } from 'react'
import { Button, IconDownload } from '@supabase/ui'
interface Props {
createdAt: string
}
const DownloadCertificate: FC<Props> = ({ createdAt }) => {
// instances before 3 : 08 pm sgt 29th April don't have certs installed
if (new Date(createdAt) < new Date('2021-04-30')) return null
const env = process.env.NEXT_PUBLIC_ENVIRONMENT === 'prod' ? 'prod' : 'staging'
return (
<div className="w-full flex items-center justify-between">
<div>
<p className="block">SSL Connection</p>
<div>
<p className="text-sm text-scale-1100">
Use this certificate to prevent snooping and man-in-the-middle attacks.
</p>
</div>
</div>
<Button type="default" icon={<IconDownload />}>
<a
href={`https://supabase-downloads.s3-ap-southeast-1.amazonaws.com/${env}/ssl/${env}-ca-2021.crt`}
>
Download Certificate
</a>
</Button>
</div>
)
}
export default DownloadCertificate
studio/components/interfaces/Database/Pooling/PgBouncerConfig.tsx
-146
View File
@@ -1,146 +0,0 @@
import { FC, useState } from 'react'
import { observer } from 'mobx-react-lite'
import Divider from 'components/ui/Divider'
import { AutoField } from 'uniforms-bootstrap4'
import { useStore } from 'hooks'
import { API_URL } from 'lib/constants'
import { patch } from 'lib/common/fetch'
import ToggleField from 'components/to-be-cleaned/forms/ToggleField'
import SchemaFormPanel from 'components/to-be-cleaned/forms/SchemaFormPanel'
import { Input } from '@supabase/ui'
interface Props {
projectRef: string
config: any
}
const PgbouncerConfig: FC<Props> = ({ projectRef, config }) => {
const { ui } = useStore()
const [updates, setUpdates] = useState<any>({
// pgbouncer_status: config.pgbouncer_status,
pgbouncer_enabled: config.pgbouncer_enabled,
pool_mode: config.pool_mode || 'transaction',
default_pool_size: config.default_pool_size || '',
ignore_startup_parameters: config.ignore_startup_parameters || '',
})
const updateConfig = async (updatedConfig: any) => {
try {
const response = await patch(`${API_URL}/props/pooling/${projectRef}/config`, updatedConfig)
if (response.error) {
throw response.error
} else {
setUpdates({ ...response.project })
ui.setNotification({ category: 'success', message: 'Successfully saved settings' })
}
} catch (error: any) {
ui.setNotification({
category: 'error',
message: `Failed to update config: ${error.message}`,
})
}
}
const formSchema = {
properties: {
pgbouncer_enabled: {
title: 'Enabled',
type: 'boolean',
help: 'Activates / deactivates Connection Pooling.',
},
pool_mode: {
title: 'Pool Mode',
type: 'string',
options: [
{
label: 'Transaction',
value: 'transaction',
},
{
label: 'Session',
value: 'session',
},
{
label: 'Statement',
value: 'statement',
},
],
},
ignore_startup_parameters: {
title: 'Ignore Startup Parameters',
type: 'string',
readOnly: true,
help: 'Defaults are either blank or "extra_float_digits"',
},
},
required: ['pool_mode'],
type: 'object',
}
return (
<>
<SchemaFormPanel
title="Connection Pooling Settings"
schema={formSchema}
model={updates}
submitLabel="Save"
cancelLabel="Cancel"
onChangeModel={(model: any) => setUpdates(model)}
onSubmit={(model: any) => updateConfig(model)}
onReset={() => setUpdates(config)}
>
<div className="space-y-6 py-4">
<ToggleField name="pgbouncer_enabled" />
<Divider light />
<Input
className="input-mono"
layout="horizontal"
readOnly
copy
disabled
value="44444444444444"
label="Port"
/>
<Divider light />
{/* <AutoField name="pgbouncer_status" disabled={true} /> */}
{updates.pgbouncer_enabled && (
<>
<AutoField
name="pool_mode"
showInlineError
errorMessage="You must select one of the three options"
/>
<div className="flex !mt-1" style={{ marginLeft: 'calc(33% + 0.5rem)' }}>
<p className="text-sm text-scale-900">
Specify when a connection can be returned to the pool. To find out the most
suitable mode for your use case,{' '}
<a
className="text-green-900"
target="_blank"
href="https://supabase.com/docs/guides/database/connecting-to-postgres#connection-pool"
>
click here
</a>
.
</p>
</div>
<Divider light />
{/* <AutoField
name="default_pool_size"
showInlineError
errorMessage="Value must be within 1 and 20"
/> */}
<AutoField name="ignore_startup_parameters" />
</>
)}
</div>
</SchemaFormPanel>
</>
)
}
export default observer(PgbouncerConfig)
studio/components/interfaces/Database/index.ts
+2 -2
View File
@@ -11,7 +11,7 @@ import PublicationsTables from './Publications/PublicationsTables'
import BackupsList from './Backups/BackupsList'
import BouncerSettings from './Pooling/BouncerSettings'
import ConnectionPooling from './Pooling/ConnectionPooling'
import CreateTrigger from './Triggers/CreateTrigger'
import DeleteTrigger from './Triggers/DeleteTrigger'
@@ -28,7 +28,7 @@ export {
PublicationsList,
PublicationsTables,
BackupsList,
BouncerSettings,
ConnectionPooling,
CreateTrigger,
DeleteTrigger,
CreateFunction,
studio/pages/project/[ref]/settings/database.tsx
+2 -9
View File
@@ -21,17 +21,12 @@ import Panel from 'components/to-be-cleaned/Panel'
import { ProjectUsageMinimal } from 'components/to-be-cleaned/Usage'
import DateRangePicker from 'components/to-be-cleaned/DateRangePicker'
import ChartHandler from 'components/to-be-cleaned/Charts/ChartHandler'
import { BouncerSettings } from 'components/interfaces/Database'
import ConnectionPoolingSettings from 'components/interfaces/Database/Pooling/ConnectionPoolingSettings'
import ConnectionPooling from 'components/interfaces/Database/Pooling/ConnectionPooling'
dayjs.extend(customParseFormat)
dayjs.extend(timezone)
dayjs.extend(utc)
const ProjectSettings = () => {
const router = useRouter()
const { ref } = router.query
@@ -43,11 +38,9 @@ const ProjectSettings = () => {
<SettingsLayout title="Database">
<div className="content w-full h-full overflow-y-auto">
<div className="w-full px-4 py-4 max-w-5xl">
<ConnectionPoolingSettings />
<BouncerSettings />
<Usage project={project} />
<GeneralSettings projectRef={ref} />
{/* move bouncer settings back down here ->>>>>>>>>>>>> <BouncerSettings /> */}
<ConnectionPooling />
</div>
</div>
</SettingsLayout>