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:
@@ -4,6 +4,13 @@ import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
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, Link, useForm } from "@inertiajs/vue3";
|
||||
|
||||
@@ -60,41 +67,44 @@ const form = useForm({
|
||||
<CardContent class="grid gap-3 text-sm">
|
||||
<div class="grid gap-2">
|
||||
<Label for="repository_type">Repository type</Label>
|
||||
<select
|
||||
id="repository_type"
|
||||
v-model="form.repository_type"
|
||||
class="h-9 rounded-md border border-input bg-transparent px-3 text-sm"
|
||||
required
|
||||
>
|
||||
<option
|
||||
v-for="(type, key) in repositoryTypes"
|
||||
:key="key"
|
||||
:value="type"
|
||||
>
|
||||
{{ type }}
|
||||
</option>
|
||||
</select>
|
||||
<Select v-model="form.repository_type" required>
|
||||
<SelectTrigger id="repository_type">
|
||||
<SelectValue placeholder="Select a type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="(type, key) in repositoryTypes"
|
||||
:key="key"
|
||||
:value="type"
|
||||
>
|
||||
{{ type }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<InputError :message="form.errors.repository_type" />
|
||||
</div>
|
||||
<div v-if="sourceProviders.length" class="grid gap-2">
|
||||
<Label for="source_provider_id">Source provider</Label>
|
||||
<select
|
||||
id="source_provider_id"
|
||||
v-model="form.source_provider_id"
|
||||
class="h-9 rounded-md border border-input bg-transparent px-3 text-sm"
|
||||
>
|
||||
<option value="">No provider</option>
|
||||
<option
|
||||
v-for="provider in sourceProviders"
|
||||
:key="provider.id"
|
||||
:value="provider.id"
|
||||
>
|
||||
{{ provider.name }} · {{ provider.type }}
|
||||
</option>
|
||||
</select>
|
||||
<Select v-model="form.source_provider_id">
|
||||
<SelectTrigger id="source_provider_id">
|
||||
<SelectValue placeholder="No provider" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="provider in sourceProviders"
|
||||
:key="provider.id"
|
||||
:value="String(provider.id)"
|
||||
>
|
||||
{{ provider.name }} · {{ provider.type }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<InputError :message="form.errors.source_provider_id" />
|
||||
</div>
|
||||
<div v-else class="flex flex-wrap items-center justify-between gap-3 rounded-md border border-dashed p-3">
|
||||
<div
|
||||
v-else
|
||||
class="flex flex-wrap items-center justify-between gap-3 rounded-md border border-dashed p-3"
|
||||
>
|
||||
<span class="text-muted-foreground">
|
||||
No source provider is configured yet. SSH URLs still work, but adding a
|
||||
provider documents which Git host this repository belongs to.
|
||||
@@ -103,7 +113,11 @@ const form = useForm({
|
||||
:as="Link"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
:href="route('source-providers.create', { organisation: $page.props.organisation.id })"
|
||||
:href="
|
||||
route('source-providers.create', {
|
||||
organisation: $page.props.organisation.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
Add provider
|
||||
</Button>
|
||||
|
||||
@@ -4,6 +4,13 @@ import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
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, router, useForm } from "@inertiajs/vue3";
|
||||
|
||||
@@ -79,38 +86,38 @@ const destroyApplication = (): void => {
|
||||
<CardContent class="grid gap-4">
|
||||
<div class="grid gap-2">
|
||||
<Label for="repository_type">Repository type</Label>
|
||||
<select
|
||||
id="repository_type"
|
||||
v-model="form.repository_type"
|
||||
class="h-9 rounded-md border border-input bg-transparent px-3 text-sm"
|
||||
required
|
||||
>
|
||||
<option
|
||||
v-for="(type, key) in repositoryTypes"
|
||||
:key="key"
|
||||
:value="type"
|
||||
>
|
||||
{{ type }}
|
||||
</option>
|
||||
</select>
|
||||
<Select v-model="form.repository_type" required>
|
||||
<SelectTrigger id="repository_type">
|
||||
<SelectValue placeholder="Select repository type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="(type, key) in repositoryTypes"
|
||||
:key="key"
|
||||
:value="type"
|
||||
>
|
||||
{{ type }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<InputError :message="form.errors.repository_type" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="source_provider_id">Source provider</Label>
|
||||
<select
|
||||
id="source_provider_id"
|
||||
v-model="form.source_provider_id"
|
||||
class="h-9 rounded-md border border-input bg-transparent px-3 text-sm"
|
||||
>
|
||||
<option value="">No provider</option>
|
||||
<option
|
||||
v-for="provider in sourceProviders"
|
||||
:key="provider.id"
|
||||
:value="provider.id"
|
||||
>
|
||||
{{ provider.name }} · {{ provider.type }}
|
||||
</option>
|
||||
</select>
|
||||
<Select v-model="form.source_provider_id">
|
||||
<SelectTrigger id="source_provider_id">
|
||||
<SelectValue placeholder="No provider" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="provider in sourceProviders"
|
||||
:key="provider.id"
|
||||
:value="String(provider.id)"
|
||||
>
|
||||
{{ provider.name }} · {{ provider.type }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<InputError :message="form.errors.source_provider_id" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
|
||||
@@ -45,11 +45,7 @@ defineProps<{
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-4 rounded-xl p-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Card
|
||||
v-for="application in applications"
|
||||
:key="application.id"
|
||||
class="relative w-full"
|
||||
>
|
||||
<Card v-for="application in applications" :key="application.id" class="relative w-full">
|
||||
<CardHeader>
|
||||
<CardTitle>{{ application.name }}</CardTitle>
|
||||
<CardDescription
|
||||
|
||||
@@ -79,7 +79,9 @@ defineProps<{
|
||||
<CardTitle>Repository Deploy Key</CardTitle>
|
||||
<Badge
|
||||
:variant="
|
||||
application.deploy_key_installed_at ? 'success' : 'secondary'
|
||||
application.deploy_key_installed_at
|
||||
? 'success'
|
||||
: 'secondary'
|
||||
"
|
||||
>
|
||||
{{
|
||||
@@ -140,8 +142,8 @@ defineProps<{
|
||||
<CardTitle>Registry required before deployment</CardTitle>
|
||||
<CardDescription>
|
||||
This organisation has {{ deploymentRequirements.serverCount }}
|
||||
servers and no registry. Multi-server deployments need a registry
|
||||
so every server can pull the same build artifact.
|
||||
servers and no registry. Multi-server deployments need a registry so
|
||||
every server can pull the same build artifact.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
@@ -310,7 +312,8 @@ defineProps<{
|
||||
@click="
|
||||
router.post(
|
||||
route('environment-migrations.store', {
|
||||
organisation: $page.props.organisation.id,
|
||||
organisation:
|
||||
$page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
}),
|
||||
@@ -335,7 +338,8 @@ defineProps<{
|
||||
@click="
|
||||
router.post(
|
||||
route('environment-workers.store', {
|
||||
organisation: $page.props.organisation.id,
|
||||
organisation:
|
||||
$page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
}),
|
||||
@@ -372,7 +376,9 @@ defineProps<{
|
||||
>
|
||||
<Badge variant="outline">{{ artifact.status }}</Badge>
|
||||
<span>{{ artifact.commit_sha }}</span>
|
||||
<span v-if="artifact.image_digest">{{ artifact.image_digest }}</span>
|
||||
<span v-if="artifact.image_digest">{{
|
||||
artifact.image_digest
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
Reference in New Issue
Block a user