Restructure UX and seed a fully simulated organisation
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:
@@ -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>
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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" }}
|
||||
|
||||
Reference in New Issue
Block a user