harry/keystone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Harry Bayliss
2026-06-08 22:09:57 +01:00
parent 3a851db08f
commit 85c44296ac
58 changed files with 2292 additions and 847 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
resources/js/pages/services/Edit.vue
View File

@@ -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, router, useForm } from "@inertiajs/vue3";
@@ -146,20 +153,27 @@ const destroyService = (): void => {
<Card>
<CardHeader>
<CardTitle>Deployment</CardTitle>
<CardDescription>Stateful services can track available image updates.</CardDescription>
<CardDescription
>Stateful services can track available image updates.</CardDescription
>
</CardHeader>
<CardContent class="grid gap-4 md:grid-cols-2">
<div class="grid gap-2">
<Label for="deploy_policy">Deploy policy</Label>
<select
id="deploy_policy"
v-model="form.deploy_policy"
class="h-9 rounded-md border border-input bg-transparent px-3 text-sm"
>
<option v-for="policy in deployPolicies" :key="policy" :value="policy">
{{ policy.replace("_", " ") }}
</option>
</select>
<Select v-model="form.deploy_policy">
<SelectTrigger id="deploy_policy">
<SelectValue placeholder="Select deploy policy" />
</SelectTrigger>
<SelectContent>
<SelectItem
v-for="policy in deployPolicies"
:key="policy"
:value="policy"
>
{{ policy.replace("_", " ") }}
</SelectItem>
</SelectContent>
</Select>
<InputError :message="form.errors.deploy_policy" />
</div>
<div class="grid gap-2">
@@ -182,7 +196,11 @@ const destroyService = (): void => {
<CardContent class="grid gap-4 md:grid-cols-2">
<div class="grid gap-2 md:col-span-2">
<Label for="process_roles">Process roles</Label>
<Input id="process_roles" v-model="form.process_roles" placeholder="web, scheduler" />
<Input
id="process_roles"
v-model="form.process_roles"
placeholder="web, scheduler"
/>
<InputError :message="form.errors.process_roles" />
</div>
<div class="grid gap-2">

28
resources/js/pages/services/Show.vue
View File

@@ -24,7 +24,9 @@ defineProps<{
? [
{
title: 'Applications',
href: route('applications.index', { organisation: $page.props.organisation.id }),
href: route('applications.index', {
organisation: $page.props.organisation.id,
}),
},
{
title: application.name,
@@ -45,7 +47,9 @@ defineProps<{
: [
{
title: 'Servers',
href: route('servers.index', { organisation: $page.props.organisation.id }),
href: route('servers.index', {
organisation: $page.props.organisation.id,
}),
},
{
title: server?.name ?? 'Server',
@@ -197,7 +201,9 @@ defineProps<{
<Card>
<CardHeader>
<CardTitle>Endpoints</CardTitle>
<CardDescription>Network endpoints registered for this service.</CardDescription>
<CardDescription
>Network endpoints registered for this service.</CardDescription
>
</CardHeader>
<CardContent class="grid gap-2">
<div
@@ -225,20 +231,28 @@ defineProps<{
<Card>
<CardHeader>
<CardTitle>Compose</CardTitle>
<CardDescription>Generated artifact location on the target server.</CardDescription>
<CardDescription
>Generated artifact location on the target server.</CardDescription
>
</CardHeader>
<CardContent>
<pre class="overflow-x-auto rounded-md bg-muted p-3 text-xs">/home/keystone/services/{{ service.id }}/compose.yml</pre>
<pre class="overflow-x-auto rounded-md bg-muted p-3 text-xs">
/home/keystone/services/{{ service.id }}/compose.yml</pre
>
</CardContent>
</Card>
<Card v-if="service.type === 'caddy'">
<CardHeader>
<CardTitle>Caddyfile</CardTitle>
<CardDescription>Gateway route configuration generated on the server.</CardDescription>
<CardDescription
>Gateway route configuration generated on the server.</CardDescription
>
</CardHeader>
<CardContent>
<pre class="overflow-x-auto rounded-md bg-muted p-3 text-xs">/home/keystone/gateway/Caddyfile</pre>
<pre class="overflow-x-auto rounded-md bg-muted p-3 text-xs">
/home/keystone/gateway/Caddyfile</pre
>
</CardContent>
</Card>
</div>

4
resources/js/pages/services/updates/Create.vue
View File

@@ -112,7 +112,9 @@ const resolveLatestDigest = (): void => {
</div>
<div class="grid gap-2">
<Label for="confirmation">Type {{ service.name }} to confirm downtime</Label>
<Label for="confirmation"
>Type {{ service.name }} to confirm downtime</Label
>
<Input id="confirmation" v-model="form.confirmation" />
<InputError :message="form.errors.confirmation" />
</div>