Validation, service form improvements

app/Http/Controllers/ServiceController.php

@@ -2,16 +2,36 @@
 
 namespace App\Http\Controllers;
 
+use App\Enums\ServiceCategory;
+use App\Enums\ServiceType;
+use App\Models\Server;
 use Illuminate\Http\Request;
+use Illuminate\Validation\Rule;
 
 class ServiceController extends Controller
 {
     public function create(Request $request)
     {
-        $server = $request->route('server');
+        $server = Server::findOrFail($request->route('server'));
 
         return inertia('services/Create', [
             'server' => $server,
+            'services' => config('keystone.services'),
+        ]);
+    }
+
+    public function store(Request $request)
+    {
+        // dd($request->all());
+        $request->validate([
+            'name' => ['required', 'string', 'max:255'],
+            'category' => ['required', Rule::enum(ServiceCategory::class)],
+            'type' => ['required', Rule::enum(ServiceType::class)],
+            'version' => ['required', 'string', function ($key, $value, $fail) use ($request) {
+                if (!isset(config('keystone.services')[$request->category][$request->type]['versions'][$value])) {
+                    $fail('The selected version is invalid.');
+                }
+            }],
         ]);
     }
 }

config/keystone.php

@@ -1,6 +1,8 @@
 <?php
 
 use App\Drivers\Postgres\Postgres17Driver;
+use App\Enums\ServiceCategory;
+use App\Enums\ServiceType;
 
 return [
     'drivers' => [
@@ -9,4 +11,105 @@ return [
         ],
     ],
     'internal_ip_base' => env('INTERNAL_IP_BASE', '192.168.2.'),
+
+    'services' => [
+        ServiceCategory::DATABASE->value => [
+            ServiceType::POSTGRES->value => [
+                'name' => ServiceType::POSTGRES,
+                'description' => 'PostgreSQL',
+                'versions' => [
+                    '17' => [
+                        'name' => 'PostgreSQL 17',
+                        'description' => 'PostgreSQL 17',
+                        'image' => 'postgres:17',
+                    ],
+                ],
+            ],
+            ServiceType::MYSQL->value => [
+                'name' => ServiceType::MYSQL,
+                'description' => 'MySQL',
+                'versions' => [
+                    '9.0' => [
+                        'name' => 'MySQL 9.2',
+                        'description' => 'MySQL 9.2',
+                        'image' => 'mysql:9.2'
+                    ],
+                ],
+            ],
+        ],
+        ServiceCategory::GATEWAY->value => [
+            ServiceType::NGINX->value => [
+                'name' => ServiceType::NGINX,
+                'description' => 'Nginx',
+                'versions' => [
+                    '1.27' => [
+                        'name' => 'Nginx 1.27',
+                        'description' => 'Nginx 1.27',
+                        'image' => 'nginx:1.27',
+                    ],
+                ],
+            ],
+            ServiceType::CADDY->value => [
+                'name' => ServiceType::CADDY,
+                'description' => 'Caddy',
+                'versions' => [
+                    '2.9' => [
+                        'name' => 'Caddy 2.9',
+                        'description' => 'Caddy 2.9',
+                        'image' => 'caddy:2.9'
+                    ],
+                ],
+            ],
+        ],
+        ServiceCategory::APPLICATION->value => [
+            ServiceType::PHP_FPM->value => [
+                'name' => ServiceType::PHP_FPM,
+                'description' => 'PHP-FPM',
+                'versions' => [
+                    '8.4' => [
+                        'name' => 'PHP 8.4',
+                        'description' => 'PHP 8.4',
+                        'image' => 'serversideup/php:8.4-fpm-nginx',
+                    ],
+                ],
+            ],
+            ServiceType::FRANKENPHP->value => [
+                'name' => ServiceType::FRANKENPHP,
+                'description' => 'FrankenPHP',
+                'versions' => [
+                    '1.5' => [
+                        'name' => 'FrankenPHP 1.5',
+                        'description' => 'FrankenPHP 1.5',
+                        'image' => 'dunglas/frankenphp:1.5-php8.4-bookworm',
+                    ],
+                ],
+            ],
+        ],
+        ServiceCategory::CACHE->value => [
+            ServiceType::REDIS->value => [
+                'name' => ServiceType::REDIS,
+                'description' => 'Redis',
+                'versions' => [
+                    '7.4' => [
+                        'name' => 'Redis 7.4',
+                        'description' => 'Redis 7.4',
+                        'image' => 'redis:7.4',
+                    ],
+                ],
+            ],
+            ServiceType::VALKEY->value => [
+                'name' => ServiceType::VALKEY,
+                'description' => 'Valkey',
+                'versions' => [
+                    '8.1' => [
+                        'name' => 'Valkey 8.1',
+                        'description' => 'Valkey 8.1',
+                        'image' => 'valkey/valkey:8.1',
+                    ],
+                ],
+            ],
+        ],
+        ServiceCategory::STORAGE->value => [
+        ],
+    ]
 ];

resources/js/enums/FirewallRuleStatus.js

@@ -1,7 +1,7 @@
 // This is a generated file. 
 
 export default {
-    "UNINSTALLED": "uninstalled",
+    "NOT_INSTALLED": "not-installed",
     "INSTALLED": "installed",
     "FAILED": "failed",
     "REMOVED": "removed"

resources/js/pages/services/Create.vue

@@ -1,20 +1,23 @@
 <script setup>
+import InputError from '@/components/InputError.vue';
+import RadioButton from '@/components/RadioButton.vue';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import ServiceCategory, { DescriptionMap as serviceCategoryDescriptions } from '@/enums/ServiceCategory';
 import AppLayout from '@/layouts/AppLayout.vue';
 import { Head, useForm } from '@inertiajs/vue3';
-import { Label } from '@/components/ui/label';
-import { Input } from '@/components/ui/input';
-import InputError from '@/components/InputError.vue';
-import ServiceCategory, { DescriptionMap as serviceCategoryDescriptions } from '@/enums/ServiceCategory';
-import RadioButton from '@/components/RadioButton.vue';
 import { AppWindowIcon, ArchiveIcon, DatabaseIcon, DatabaseZapIcon, DoorOpenIcon } from 'lucide-vue-next';
 
-const props = defineProps({});
+const props = defineProps({
+    services: Object,
+});
 
 const form = useForm({
     name: null,
     category: null,
-    type: null,
+    service: null,
+    version: null,
 });
 
 function getIcon(category) {
@@ -55,38 +58,54 @@ function getIcon(category) {
         ]"
     >
         <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
-            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-2">
+            <div class="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
                 <RadioButton
                     v-for="(category, categoryKey) in ServiceCategory"
                     v-model="form.category"
                     :value="category"
                     name="category"
-                    class="py-3 flex gap-3"
+                    class="flex gap-3 py-3"
                 >
                     <component :is="getIcon(category)" class="size-5" />
                     <div>
-                        <h4 class="text-lg font-semibold tracking-tighter leading-none mb-1">{{ category }}</h4>
+                        <h4 class="mb-1 text-lg font-semibold leading-none tracking-tighter">{{ category }}</h4>
                         <p class="text-sm">{{ serviceCategoryDescriptions[categoryKey] }}</p>
                     </div>
                 </RadioButton>
             </div>
 
+            <div v-if="form.category" class="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
+                <RadioButton
+                    v-for="service in services[form.category]"
+                    v-model="form.service"
+                    :value="service.name"
+                    name="service"
+                    class="py-3"
+                >
+                    <h4 class="mb-1 text-lg font-semibold leading-none tracking-tighter">{{ service.name }}</h4>
+                </RadioButton>
+            </div>
+
+            <div v-if="form.service" class="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
+                <RadioButton
+                    v-for="version in services[form.category][form.service].versions"
+                    v-model="form.version"
+                    :value="version.name"
+                    name="version"
+                    class="py-3"
+                >
+                    <h4 class="mb-1 text-lg font-semibold leading-none tracking-tighter">{{ version.name }}</h4>
+                </RadioButton>
+            </div>
+
             <div class="grid gap-2">
                 <Label for="name">Name</Label>
-                <Input
+                <Input id="name" type="text" required autofocus :tabindex="1" v-model="form.name" placeholder="postgres-db" />
-                    id="name"
-                    type="text"
-                    required
-                    autofocus
-                    :tabindex="1"
-                    v-model="form.name"
-                    placeholder="postgres-db"
-                />
                 <InputError :message="form.errors.name" />
             </div>
 
             <div class="flex items-center justify-end">
-                <Button @click="form.post(route('servers.store', { organisation: $page.props.organisation.id }))">Submit</Button>
+                <Button @click="form.post(route('services.store', { organisation: $page.props.organisation.id, server: $page.props.server.id }))">Submit</Button>
             </div>
         </div>
     </AppLayout>