Restructure UX and seed a fully simulated organisation
Some checks failed
CI / Tests (push) Failing after 56s
CI / Lint (push) Failing after 1m35s

Rework the dashboard, environment topology view, header navigation, and
status rendering, and standardise selects on a shadcn-vue component.

Replace the thin database seeder with a SimulatedEnvironmentSeeder that
builds a fully wired, mostly-running organisation (ACTIVE server fleet,
managed + GHCR registries, Gitea source provider, ClipBin app with
production/staging environments, services, slices, endpoints, managed
variables, build artifacts, and a completed/in-progress/failed operations
history) so the new UI renders against realistic data.
This commit is contained in:
2026-06-08 22:09:57 +01:00
parent 3a851db08f
commit 85c44296ac
58 changed files with 2292 additions and 847 deletions

View File

@@ -3,6 +3,13 @@ import InputError from "@/components/InputError.vue";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import AppLayout from "@/layouts/AppLayout.vue";
import { Head, useForm } from "@inertiajs/vue3";
@@ -77,16 +84,20 @@ const form = useForm({
<div class="grid gap-2">
<Label for="environment_id">Environment</Label>
<select
id="environment_id"
v-model="form.environment_id"
class="h-9 rounded-md border border-input bg-transparent px-3 text-sm"
>
<option value="">Service-level</option>
<option v-for="environment in environments" :key="environment.id" :value="environment.id">
{{ environment.name }}
</option>
</select>
<Select v-model="form.environment_id">
<SelectTrigger id="environment_id">
<SelectValue placeholder="Service-level" />
</SelectTrigger>
<SelectContent>
<SelectItem
v-for="environment in environments"
:key="environment.id"
:value="String(environment.id)"
>
{{ environment.name }}
</SelectItem>
</SelectContent>
</Select>
<InputError :message="form.errors.environment_id" />
</div>

View File

@@ -86,20 +86,30 @@ defineProps<{
</CardTitle>
<CardDescription>
{{ slice.environment?.application?.name ?? "Service" }}
<span v-if="slice.environment">/ {{ slice.environment.name }}</span>
<span v-if="slice.environment"
>/ {{ slice.environment.name }}</span
>
</CardDescription>
</div>
<div class="flex flex-wrap gap-2">
<Badge variant="outline">{{ slice.type }}</Badge>
<Badge :variant="slice.status === 'active' ? 'success' : 'secondary'">
<Badge
:variant="slice.status === 'active' ? 'success' : 'secondary'"
>
{{ slice.status }}
</Badge>
<Badge variant="outline">{{ slice.attachments.length }} attachments</Badge>
<Badge variant="outline"
>{{ slice.attachments.length }} attachments</Badge
>
</div>
</div>
</CardHeader>
<CardContent class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(18rem,24rem)]">
<pre class="overflow-x-auto rounded-md bg-muted p-3 text-xs">{{ JSON.stringify(slice.config ?? {}, null, 2) }}</pre>
<CardContent
class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(18rem,24rem)]"
>
<pre class="overflow-x-auto rounded-md bg-muted p-3 text-xs">{{
JSON.stringify(slice.config ?? {}, null, 2)
}}</pre>
<div>
<div class="mb-2 text-sm font-medium">Recent operations</div>
<OperationTimeline :operations="slice.operations" />
@@ -110,7 +120,10 @@ defineProps<{
<Card v-if="slices.length === 0" class="border-dashed">
<CardHeader>
<CardTitle>No slices</CardTitle>
<CardDescription>Create a slice for a service-level capability or managed attachment.</CardDescription>
<CardDescription
>Create a slice for a service-level capability or managed
attachment.</CardDescription
>
</CardHeader>
<CardContent>
<Button

View File

@@ -46,10 +46,15 @@ defineProps<{
<Card>
<CardHeader>
<CardTitle>Configuration</CardTitle>
<CardDescription>Credentials are stored encrypted and not revealed here.</CardDescription>
<CardDescription
>Credentials are stored encrypted and not revealed
here.</CardDescription
>
</CardHeader>
<CardContent>
<pre class="overflow-x-auto rounded-md bg-muted p-3 text-xs">{{ JSON.stringify(slice.config ?? {}, null, 2) }}</pre>
<pre class="overflow-x-auto rounded-md bg-muted p-3 text-xs">{{
JSON.stringify(slice.config ?? {}, null, 2)
}}</pre>
</CardContent>
</Card>
@@ -71,7 +76,7 @@ defineProps<{
"
class="rounded-md border p-3 text-sm hover:bg-muted/50"
>
<div class="font-medium">{{ attachment.role.replace('_', ' ') }}</div>
<div class="font-medium">{{ attachment.role.replace("_", " ") }}</div>
<div class="text-muted-foreground">
{{ attachment.environment.name }} ·
{{ attachment.env_prefix ?? "default prefix" }}