Skip to content

Commit 5720c8d

Browse files
chrisbbreuerchrisbbreuer
committed
chore: wip
1 parent 01a6628 commit 5720c8d

File tree

1 file changed

+119
-19
lines changed
  • storage/framework/defaults/views/dashboard/cloud

1 file changed

+119
-19
lines changed

‎storage/framework/defaults/views/dashboard/cloud/index.vue

Lines changed: 119 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ interface ServerConfig {
2424
bunVersion?: string
2525
database?: string
2626
databaseName?: string
27+
searchEngine?: string
2728
userData?: string
2829
}
2930
@@ -652,17 +653,20 @@ export class StacksInfrastructureStack extends cdk.Stack {
652653
const addServer = () => {
653654
const id = Object.keys(cloudConfig.value.servers).length + 1
654655
const key = `app${id}`
655-
cloudConfig.value.servers[key] = {
656-
name: `app-server-${id}`,
656+
const newServer: ServerConfig = {
657+
name: `app-${generateServerName('app')}`,
657658
domain: 'stacksjs.org',
658659
region: 'us-east-1',
659660
type: 'app',
660-
size: 't3.micro',
661+
size: 't3.micro' as InstanceType,
661662
diskSize: 20,
662663
serverOS: defaultServerOS,
663664
bunVersion: defaultBunVersion,
665+
database: 'sqlite',
666+
databaseName: 'stacks',
667+
searchEngine: 'meilisearch'
664668
}
665-
// Set edit mode for new server
669+
cloudConfig.value.servers[key] = newServer
666670
editMode.value[key] = true
667671
}
668672
@@ -730,6 +734,72 @@ const saveWorkerConfig = async () => {
730734
const formatFieldName = (field: string) => {
731735
return field.charAt(0).toUpperCase() + field.slice(1)
732736
}
737+
738+
// Add these functions after the formatFieldName function
739+
const adjectives = [
740+
'weathered', 'cosmic', 'stellar', 'quantum', 'nebula', 'astral', 'galactic', 'lunar', 'solar', 'celestial',
741+
'mystic', 'ethereal', 'void', 'nova', 'pulsar', 'quasar', 'cosmic', 'starlit', 'orbital', 'meteor',
742+
'ancient', 'blazing', 'crystal', 'digital', 'electric', 'fusion', 'glowing', 'hyper', 'infinite', 'kinetic',
743+
'luminous', 'magnetic', 'neon', 'omega', 'plasma', 'radiant', 'sonic', 'temporal', 'ultra', 'virtual',
744+
'wild', 'xenon', 'zero', 'atomic', 'binary', 'cyber', 'dynamic', 'eternal', 'flux', 'gamma'
745+
]
746+
747+
const nouns = [
748+
'galaxy', 'nebula', 'star', 'comet', 'aurora', 'horizon', 'nova', 'zenith', 'cosmos', 'orbit',
749+
'vertex', 'prism', 'nexus', 'cipher', 'matrix', 'beacon', 'pulse', 'echo', 'flux', 'core',
750+
'aegis', 'blade', 'cloud', 'dawn', 'edge', 'forge', 'grid', 'helix', 'iris', 'jade',
751+
'knight', 'light', 'mist', 'node', 'oasis', 'path', 'quark', 'rift', 'sage', 'titan',
752+
'unity', 'vortex', 'wave', 'xray', 'yeti', 'zephyr', 'atlas', 'byte', 'crest', 'delta'
753+
]
754+
755+
const generateServerName = (type: string) => {
756+
const adj = adjectives[Math.floor(Math.random() * adjectives.length)]
757+
const noun = nouns[Math.floor(Math.random() * nouns.length)]
758+
return `${adj}-${noun}`
759+
}
760+
761+
// Update server name when type changes
762+
const updateServerName = (server: ServerConfig, type: string) => {
763+
const prefix = type === 'app' ? 'app' :
764+
type === 'web' ? 'web' :
765+
type === 'worker' ? 'worker' :
766+
type === 'cache' ? 'cache' :
767+
type === 'database' ? 'db' :
768+
type === 'search' ? 'search' :
769+
type === 'loadbalancer' ? 'lb' : 'server'
770+
771+
server.name = `${prefix}-${generateServerName(type)}`
772+
}
773+
774+
// Update the updateServerDefaults function
775+
const updateServerDefaults = (server: ServerConfig) => {
776+
// Reset database and search engine based on server type
777+
if (server.type === 'web') {
778+
server.database = ''
779+
server.searchEngine = ''
780+
} else if (server.type === 'loadbalancer' || server.type === 'cache') {
781+
server.database = ''
782+
server.searchEngine = ''
783+
server.bunVersion = ''
784+
} else if (server.type === 'database') {
785+
server.searchEngine = ''
786+
server.bunVersion = ''
787+
server.database = server.database || 'sqlite'
788+
server.databaseName = server.databaseName || 'stacks'
789+
} else if (server.type === 'search') {
790+
server.database = ''
791+
server.databaseName = ''
792+
server.bunVersion = ''
793+
server.searchEngine = server.searchEngine || 'meilisearch'
794+
}
795+
}
796+
797+
// Add a watcher for server type changes
798+
watch(() => Object.values(cloudConfig.value.servers), (servers) => {
799+
servers.forEach(server => {
800+
updateServerDefaults(server)
801+
})
802+
}, { deep: true })
733803
</script>
734804

735805
<template>
@@ -886,11 +956,20 @@ const formatFieldName = (field: string) => {
886956
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
887957
<div>
888958
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
889-
<input
890-
v-model="workerConfig.name"
891-
type="text"
892-
class="block w-full h-9 text-sm border-0 rounded-md bg-gray-50 dark:bg-blue-gray-600 py-1.5 px-3 text-gray-900 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 focus:ring-2 focus:ring-blue-600"
893-
>
959+
<div class="flex gap-2">
960+
<input
961+
v-model="workerConfig.name"
962+
type="text"
963+
class="block w-full h-10 text-sm border-0 rounded-md bg-gray-50 dark:bg-blue-gray-600 py-2 px-3 text-gray-900 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 focus:ring-2 focus:ring-blue-600 transition-colors duration-200"
964+
>
965+
<button
966+
@click="workerConfig.name = generateServerName('worker')"
967+
type="button"
968+
class="inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-blue-600 rounded-md shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 transition-colors duration-200"
969+
>
970+
<div class="i-heroicons-sparkles w-5 h-5"></div>
971+
</button>
972+
</div>
894973
</div>
895974

896975
<div>
@@ -1060,11 +1139,20 @@ const formatFieldName = (field: string) => {
10601139
<div v-else class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
10611140
<div>
10621141
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
1063-
<input
1064-
v-model="server.name"
1065-
type="text"
1066-
class="block w-full h-10 text-sm border-0 rounded-md bg-gray-50 dark:bg-blue-gray-600 py-2 px-3 text-gray-900 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 focus:ring-2 focus:ring-blue-600 transition-colors duration-200"
1067-
>
1142+
<div class="flex gap-2">
1143+
<input
1144+
v-model="server.name"
1145+
type="text"
1146+
class="block w-full h-10 text-sm border-0 rounded-md bg-gray-50 dark:bg-blue-gray-600 py-2 px-3 text-gray-900 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 focus:ring-2 focus:ring-blue-600 transition-colors duration-200"
1147+
>
1148+
<button
1149+
@click="server.name = generateServerName(server.type)"
1150+
type="button"
1151+
class="inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-blue-600 rounded-md shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 transition-colors duration-200"
1152+
>
1153+
<div class="i-heroicons-sparkles w-5 h-5"></div>
1154+
</button>
1155+
</div>
10681156
</div>
10691157
<div>
10701158
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Domain</label>
@@ -1091,6 +1179,7 @@ const formatFieldName = (field: string) => {
10911179
<select
10921180
v-model="server.type"
10931181
:disabled="!editMode[key]"
1182+
@change="updateServerName(server, server.type)"
10941183
class="block w-full h-10 text-sm border-0 rounded-md bg-gray-50 dark:bg-blue-gray-600 py-2 px-3 text-gray-900 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 focus:ring-2 focus:ring-blue-600 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
10951184
>
10961185
<option v-for="type in serverTypes" :key="type.value" :value="type.value">
@@ -1099,31 +1188,31 @@ const formatFieldName = (field: string) => {
10991188
</select>
11001189
</div>
11011190
</div>
1102-
<div>
1191+
<div v-if="['app', 'web', 'worker'].includes(server.type)">
11031192
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Bun Version</label>
11041193
<select
11051194
v-model="server.bunVersion"
11061195
class="block w-full h-10 text-sm border-0 rounded-md bg-gray-50 dark:bg-blue-gray-600 py-2 px-3 text-gray-900 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 focus:ring-2 focus:ring-blue-600 transition-colors duration-200"
11071196
>
1197+
<option value="" disabled>Select a version</option>
11081198
<option v-for="version in bunVersions" :key="version" :value="version">
11091199
{{ version }}
11101200
</option>
11111201
</select>
11121202
</div>
1113-
<div>
1203+
<div v-if="!['loadbalancer', 'cache', 'search', 'database'].includes(server.type)">
11141204
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Database</label>
11151205
<select
11161206
v-model="server.database"
11171207
class="block w-full h-10 text-sm border-0 rounded-md bg-gray-50 dark:bg-blue-gray-600 py-2 px-3 text-gray-900 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 focus:ring-2 focus:ring-blue-600 transition-colors duration-200"
11181208
>
1119-
<option value="">None</option>
1209+
<option value="" v-if="server.type !== 'database'">None</option>
11201210
<option value="mysql">MySQL</option>
11211211
<option value="postgresql">PostgreSQL</option>
11221212
<option value="sqlite">SQLite</option>
1123-
<option value="mongodb">MongoDB</option>
11241213
</select>
11251214
</div>
1126-
<div v-if="server.database">
1215+
<div v-if="server.database && !['loadbalancer', 'cache', 'search'].includes(server.type)">
11271216
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Database Name</label>
11281217
<input
11291218
v-model="server.databaseName"
@@ -1152,6 +1241,17 @@ const formatFieldName = (field: string) => {
11521241
class="block w-full h-10 text-sm border-0 rounded-md bg-gray-50 dark:bg-blue-gray-600 py-2 px-3 text-gray-900 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 focus:ring-2 focus:ring-blue-600 transition-colors duration-200"
11531242
>
11541243
</div>
1244+
<div v-if="!['loadbalancer', 'cache', 'search', 'database'].includes(server.type)">
1245+
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Search Engine</label>
1246+
<select
1247+
v-model="server.searchEngine"
1248+
class="block w-full h-10 text-sm border-0 rounded-md bg-gray-50 dark:bg-blue-gray-600 py-2 px-3 text-gray-900 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 focus:ring-2 focus:ring-blue-600 transition-colors duration-200"
1249+
>
1250+
<option value="">None</option>
1251+
<option value="meilisearch">Meilisearch</option>
1252+
<option value="typesense">Typesense</option>
1253+
</select>
1254+
</div>
11551255
<div class="sm:col-span-2 lg:col-span-3">
11561256
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">User Data Script</label>
11571257
<textarea

0 commit comments

Comments
 (0)