Design

2026-09-06 04:04:59 +03:00
commit 83a975ba3c
44 changed files with 6558 additions and 0 deletions
@@ -0,0 +1,104 @@
+<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>