Files
pgtune/src/components/configurationForm.vue
T
2026-09-06 04:04:59 +03:00

105 lines
2.9 KiB
Vue

<script setup>
import { ref } from 'vue'
const dbVersions = ref(['18', '17', '16', '15', '14', '13', '12', '11', '10'])
const dbVersion = ref('18')
const osTypes = ref(['Linux', 'Windows', 'OS X'])
const osType = ref('Linux')
const dbTypes = ref([
'Web application',
'Online transaction processing system',
'Data warehouse',
'Desktop application',
'Mixed type of application',
])
const dbType = ref('Web application')
const totalRam = ref()
const ramUnits = ref(['TB', 'GB', 'MB'])
const ramUnit = ref('GB')
const totalCPUs = ref(1)
const totalConnections = ref(100)
const dataStorages = ref([
'NVME storage',
'SSD storage',
'Network (SAN) storage',
'HDD storage',
])
const dataStorage = ref('SSD storage')
const dataSizes = ref(['Less than RAM', 'RAM - 3xRAM', 'More than 3xRAM'])
const dataSize = ref('Less than RAM')
</script>
<template>
<UForm class="space-y-4">
<UFormField
label="DB version"
help="PostgreSQL version (find out via 'SELECT version();')"
>
<USelect v-model="dbVersion" :items="dbVersions" class="w-full" />
</UFormField>
<UFormField
label="OS Type"
help="Operation system of the PostgreSQL server host"
>
<USelect v-model="osType" :items="osTypes" class="w-full" />
</UFormField>
<UFormField
label="DB type"
help="What type of application is PostgreSQL used for"
>
<USelect v-model="dbType" :items="dbTypes" class="w-full" />
</UFormField>
<UFormField
label="Total memory (RAM)"
help="How much memory can PostgreSQL use"
required
>
<div class="flex items-center gap-4">
<UInputNumber
v-model="totalRam"
class="grow"
placeholder="Total memory (RAM) (* required)"
/>
<USelect v-model="ramUnit" :items="ramUnits" />
</div>
</UFormField>
<UFormField
label="Number of CPUs"
help="Number of CPUs, which PostgreSQL can use. CPUs = N threads per core * N cores per socket * N sockets"
>
<UInputNumber
v-model="totalCPUs"
class="w-full"
placeholder="Number of CPUs"
/>
</UFormField>
<UFormField
label="Number of connections"
help="Maximum number of PostgreSQL client connections"
>
<UInputNumber
v-model="totalConnections"
class="w-full"
placeholder="Number of connections"
/>
</UFormField>
<UFormField label="Data storage" help="Type of data storage device">
<USelect v-model="dataStorage" :items="dataStorages" class="w-full" />
</UFormField>
<UFormField
label="Total data size"
help="Estimated total size of your database compared to total server RAM"
>
<USelect v-model="dataSize" :items="dataSizes" class="w-full" />
</UFormField>
<UButton size="xl" label="GENERATE" block type="submit" class="h-16" />
</UForm>
</template>