step name

app/Http/Controllers/ServerController.php

@@ -143,7 +143,7 @@ class ServerController extends Controller
         $server = $organisation->servers()->findOrFail($request->route('server'));
 
         return inertia('servers/Show', [
-            'server' => $server->load('services.slices'),
+            'server' => $server->load('services.slices', 'serviceDeployments.steps', 'serviceDeployments.target'),
         ]);
     }
 }

app/Jobs/Services/DeployService.php

@@ -33,6 +33,7 @@ class DeployService implements ShouldQueue
         $deploymentPlan = $driver->getDeploymentPlan($this->deployment->hash);
         foreach ($deploymentPlan->steps as $index => $plannedStep) {
             $step = $this->deployment->steps()->create([
+                'name' => $plannedStep->name,
                 'order' => $index + 1,
                 'status' => DeploymentStatus::PENDING,
                 'script' => $plannedStep->getSafeScript(),

database/migrations/2025_03_31_141005_create_steps_table.php

@@ -12,6 +12,7 @@ return new class extends Migration
         Schema::create('steps', function (Blueprint $table) {
             $table->id();
             $table->foreignIdFor(Deployment::class);
+            $table->string('name');
             $table->integer('order');
             $table->string('status');
             $table->longText('script');

resources/js/pages/servers/Show.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Badge } from '@/components/ui/badge';
-import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
+import { Card, CardDescription, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
 import AppLayout from '@/layouts/AppLayout.vue';
 import { Head, Link } from '@inertiajs/vue3';
 import { useCycleList, useInterval } from '@vueuse/core';
@@ -64,10 +64,16 @@ watch(counter, () => {
                     <div class="mb-3 flex items-center justify-between">
                         <h3 class="text-2xl font-semibold tracking-tight">Services</h3>
                         <div>
-                            <Button :as="Link" :href="route('services.create', {
+                            <Button
+                                :as="Link"
+                                :href="
+                                    route('services.create', {
                                         organisation: $page.props.organisation.id,
                                         server: server.id,
-                            })" size="xs">
+                                    })
+                                "
+                                size="xs"
+                            >
                                 <PlusIcon class="size-4" />
                                 Add
                             </Button>
@@ -91,6 +97,21 @@ watch(counter, () => {
                         </Card>
                     </div>
                 </div>
+                <div>
+                    <h3 class="mb-3 text-2xl font-semibold tracking-tight">Deployments</h3>
+                    <Card>
+                        <CardContent class="py-4">
+                            <div v-for="deployment in server.service_deployments" class="flex gap-4">
+                                <div class="w-48">{{ deployment.target.name }}</div>
+                                <div>
+                                    <div v-for="step in deployment.steps">
+                                        {{ step }}
+                                    </div>
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
             </template>
             <template v-else-if="server.status === 'provisioning'">
                 <div class="flex items-center gap-4 py-6">