Spaces:
Runtime error
Runtime error
File size: 4,937 Bytes
58faf93 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
'use client'
import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { useQueryClient } from '@tanstack/react-query'
import { Container, Title, Paper, TextInput, Group, Button, Radio } from '@mantine/core'
import { useGetConfig } from '@/lib/client/query'
import { updateConfig } from '@/lib/client/localstorage'
export default function SetupPage() {
const router = useRouter()
const { data: appConfig } = useGetConfig()
const [connectionString, setConnectionString] = useState(appConfig?.connectionString || '')
const [tenant, setTenant] = useState(appConfig?.tenant || 'default_tenant')
const [database, setDatabase] = useState(appConfig?.database || 'default_database')
const [authType, setAuthType] = useState(appConfig?.authType || 'no_auth')
const [username, setUsername] = useState(appConfig?.username || '')
const [password, setPassword] = useState(appConfig?.password || '')
const [token, setToken] = useState(appConfig?.token || '')
useEffect(() => {
if (appConfig != null && appConfig.connectionString) {
setConnectionString(appConfig.connectionString)
}
}, [appConfig])
const queryClient = useQueryClient()
const connectButtonClicked = () => {
let formattedConnectionString = connectionString.trim()
try {
// Add http:// if no protocol specified
if (!formattedConnectionString.startsWith('http://') && !formattedConnectionString.startsWith('https://')) {
formattedConnectionString = 'http://' + formattedConnectionString
}
// Parse the URL
const url = new URL(formattedConnectionString)
// If no port specified, add default port 8000
if (!url.port) {
url.port = '8000'
formattedConnectionString = url.toString()
}
// Remove trailing slash if exists
formattedConnectionString = formattedConnectionString.replace(/\/$/, '')
} catch (error) {
console.error(error)
alert('Invalid connection string format. Please use format: http://hostname:port or https://hostname:port')
return
}
updateConfig({
connectionString: formattedConnectionString,
authType,
username,
password,
token,
currentCollection: '',
tenant,
database,
})
queryClient.setQueryData(['config'], {
connectionString: formattedConnectionString,
tenant,
database,
})
router.push('/collections')
}
const backButtonClicked = () => {
router.push('/collections')
}
return (
<Container size={460} my={30}>
<Title order={1} ta="center">
Chromadb Admin
</Title>
<Paper withBorder shadow="md" p={30} radius="md" mt="xl">
<TextInput
label="Chroma connection string"
description="For example, http://localhost:8000"
placeholder="http://localhost:8000"
value={connectionString}
onChange={e => setConnectionString(e.currentTarget.value)}
/>
<TextInput
label="Tenant"
description="The tenant to set."
placeholder="default_tenant"
value={tenant}
onChange={e => setTenant(e.currentTarget.value)}
/>
<TextInput
label="Database"
description="The database to set."
placeholder="default_database"
value={database}
onChange={e => setDatabase(e.currentTarget.value)}
/>
<Radio.Group label="Authentication Type" value={authType} onChange={setAuthType} mt="md">
<Group mt="xs">
<Radio value="no_auth" label="No Auth" />
<Radio value="token" label="Token" />
<Radio value="basic" label="Basic" />
</Group>
</Radio.Group>
{authType === 'token' && (
<TextInput
label="Token"
placeholder="Enter your token"
mt="md"
value={token}
onChange={e => setToken(e.currentTarget.value)}
/>
)}
{authType === 'basic' && (
<div>
<TextInput
label="Username"
placeholder="Enter your username"
mt="md"
value={username}
onChange={e => setUsername(e.currentTarget.value)}
/>
<TextInput
label="Password"
placeholder="Enter your password"
mt="md"
value={password}
onChange={e => setPassword(e.currentTarget.value)}
type="password"
/>
</div>
)}
<Group mt="lg" justify="flex-end">
{appConfig?.connectionString && (
<Button variant="default" onClick={backButtonClicked}>
Back
</Button>
)}
<Button onClick={connectButtonClicked}>Connect</Button>
</Group>
</Paper>
</Container>
)
}
|