pgtune/src/components/configurationForm.vue

<script setup>
import { reactive, ref } from 'vue'
import {
  DB_TYPE_WEB,
  DB_TYPE_OLTP,
  DB_TYPE_DW,
  DB_TYPE_DESKTOP,
  DB_TYPE_MIXED,
  DB_VERSIONS,
  OS_LINUX,
  OS_MAC,
  OS_WINDOWS,
  SIZE_UNIT_TB,
  SIZE_UNIT_GB,
  SIZE_UNIT_MB,
  HARD_DRIVE_SSD,
  HARD_DRIVE_NVME,
  HARD_DRIVE_SAN,
  HARD_DRIVE_HDD,
  DB_SIZE_LESS_RAM,
  DB_SIZE_MID_RAM,
  DB_SIZE_GREATER_RAM,
} from '../utils/constants/configuration'
import { validationSchema as schema } from '../utils/validation'
import { useRoute, useRouter } from 'vue-router'
import { calculateSettings } from '../utils/calculator'

const route = useRoute()
const router = useRouter()

const query = route.query

const dbVersions = ref(
  DB_VERSIONS.map((version) => ({
    label: String(version),
    value: version,
  })),
)

const osTypes = ref([
  {
    label: 'Linux',
    value: OS_LINUX,
  },
  {
    label: 'OS X',
    value: OS_MAC,
  },
  {
    label: 'Windows',
    value: OS_WINDOWS,
  },
])

const dbTypes = ref([
  {
    label: 'Web application',
    value: DB_TYPE_WEB,
  },
  {
    label: 'Online transaction processing system',
    value: DB_TYPE_OLTP,
  },
  {
    label: 'Data warehouse',
    value: DB_TYPE_DW,
  },
  {
    label: 'Desktop application',
    value: DB_TYPE_DESKTOP,
  },
  {
    label: 'Mixed type of application',
    value: DB_TYPE_MIXED,
  },
])

const ramUnits = ref([SIZE_UNIT_TB, SIZE_UNIT_GB, SIZE_UNIT_MB])

const dataStorages = ref([
  {
    label: 'NVMe storage',
    value: HARD_DRIVE_NVME,
  },
  {
    label: 'SSD storage',
    value: HARD_DRIVE_SSD,
  },
  {
    label: 'Network (SAN) storage',
    value: HARD_DRIVE_SAN,
  },
  {
    label: 'HDD storage',
    value: HARD_DRIVE_HDD,
  },
])

const dataSizes = ref([
  {
    label: 'Less than RAM',
    value: DB_SIZE_LESS_RAM,
  },
  {
    label: '1x - 3x RAM',
    value: DB_SIZE_MID_RAM,
  },
  {
    label: 'More than 3x RAM',
    value: DB_SIZE_GREATER_RAM,
  },
])

const state = reactive({
  dbVersion: query?.dbVersion ? parseInt(query.dbVersion) : 18,
  osType: query?.osType ?? OS_LINUX,
  dbType: query?.dbType ?? DB_TYPE_WEB,
  totalMemory: query?.totalMemory ? parseInt(query.totalMemory) : undefined,
  totalMemoryUnit: query?.totalMemoryUnit ?? SIZE_UNIT_GB,
  cpuNum: query?.cpuNum ? parseInt(query.cpuNum) : 1,
  connectionNum: query?.connectionNum ? parseInt(query.connectionNum) : 100,
  hdType: query?.hdType ?? HARD_DRIVE_NVME,
  dbSize: query?.dbSize ?? DB_SIZE_LESS_RAM,
})

const onSubmit = async () => {
  await router.push({ name: 'Index', query: { ...state } })
  console.log(calculateSettings({ ...state }))
}
</script>

<template>
  <UForm class="space-y-4" :state :schema @submit="onSubmit">
    <UFormField
      label="DB version"
      help="PostgreSQL version (find out via 'SELECT version();')"
      name="dbVersion"
    >
      <USelect v-model="state.dbVersion" :items="dbVersions" class="w-full" />
    </UFormField>
    <UFormField
      label="OS Type"
      help="Operation system of the PostgreSQL server host"
      name="osType"
    >
      <USelect v-model="state.osType" :items="osTypes" class="w-full" />
    </UFormField>
    <UFormField
      label="DB type"
      help="What type of application is PostgreSQL used for"
      name="dbType"
    >
      <USelect v-model="state.dbType" :items="dbTypes" class="w-full" />
    </UFormField>
    <div class="flex items-start gap-4">
      <UFormField
        label="Total memory (RAM)"
        help="How much memory can PostgreSQL use"
        required
        name="totalMemory"
        class="grow"
      >
        <UInputNumber
          v-model="state.totalMemory"
          class="w-full"
          placeholder="Total memory (RAM) (* required)"
        />
      </UFormField>
      <UFormField required name="totalMemoryUnit" label="Unit">
        <USelect v-model="state.totalMemoryUnit" :items="ramUnits" />
      </UFormField>
    </div>
    <UFormField
      label="Number of CPUs"
      help="Number of CPUs, which PostgreSQL can use. CPUs = N threads per core * N cores per socket * N sockets"
      name="cpuNum"
    >
      <UInputNumber
        v-model="state.cpuNum"
        class="w-full"
        placeholder="Number of CPUs"
      />
    </UFormField>
    <UFormField
      label="Number of connections"
      help="Maximum number of PostgreSQL client connections"
      name="connectionNum"
    >
      <UInputNumber
        v-model="state.connectionNum"
        class="w-full"
        placeholder="Number of connections"
      />
    </UFormField>
    <UFormField
      label="Data storage"
      help="Type of data storage device"
      name="hdType"
    >
      <USelect v-model="state.hdType" :items="dataStorages" class="w-full" />
    </UFormField>
    <UFormField
      label="Total data size"
      help="Estimated total size of your database compared to total server RAM"
      name="dbSize"
    >
      <USelect v-model="state.dbSize" :items="dataSizes" class="w-full" />
    </UFormField>
    <UButton size="xl" label="GENERATE" block type="submit" class="h-16" />
  </UForm>
</template>