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:
@@ -1,22 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
import OperationTimeline from "@/components/operations/OperationTimeline.vue";
|
||||
import SpecRow from "@/components/environments/SpecRow.vue";
|
||||
import TopologyCard from "@/components/environments/TopologyCard.vue";
|
||||
import InputError from "@/components/InputError.vue";
|
||||
import OperationTimeline from "@/components/operations/OperationTimeline.vue";
|
||||
import StatusIndicator from "@/components/StatusIndicator.vue";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import AppLayout from "@/layouts/AppLayout.vue";
|
||||
import { Head, Link, router, useForm } from "@inertiajs/vue3";
|
||||
import {
|
||||
BoxIcon,
|
||||
ChevronDownIcon,
|
||||
DatabaseIcon,
|
||||
GitBranchIcon,
|
||||
GlobeIcon,
|
||||
LayersIcon,
|
||||
ListChecksIcon,
|
||||
PencilIcon,
|
||||
PlusIcon,
|
||||
RocketIcon,
|
||||
ServerIcon,
|
||||
SettingsIcon,
|
||||
ShieldCheckIcon,
|
||||
ZapIcon,
|
||||
} from "lucide-vue-next";
|
||||
import { computed } from "vue";
|
||||
|
||||
@@ -38,13 +48,24 @@ const gatewayAttachments = computed(() =>
|
||||
props.environment.attachments.filter((attachment) => attachment.role === "gateway"),
|
||||
);
|
||||
|
||||
const gatewayCutovers = computed(() =>
|
||||
props.environment.operations.filter((operation) => operation.kind === "gateway_cutover"),
|
||||
const resourceAttachments = computed(() =>
|
||||
props.environment.attachments.filter((attachment) => attachment.role !== "gateway"),
|
||||
);
|
||||
|
||||
const attachmentIcons: Record<string, object | Function> = {
|
||||
database: DatabaseIcon,
|
||||
cache: ZapIcon,
|
||||
queue: ListChecksIcon,
|
||||
storage: BoxIcon,
|
||||
gateway: GlobeIcon,
|
||||
custom: ServerIcon,
|
||||
};
|
||||
|
||||
const attachmentIcon = (role: string): object | Function => attachmentIcons[role] ?? ServerIcon;
|
||||
|
||||
const caddyfilePreviewFor = (attachmentId: number): string =>
|
||||
props.gatewayRoutePreviews.find((preview) => preview.attachment_id === attachmentId)?.caddyfile ??
|
||||
"# No route preview available";
|
||||
props.gatewayRoutePreviews.find((preview) => preview.attachment_id === attachmentId)
|
||||
?.caddyfile ?? "# No route preview available";
|
||||
|
||||
const deployForm = useForm({
|
||||
target_commit: "",
|
||||
@@ -83,37 +104,40 @@ const deployEnvironment = (): void => {
|
||||
{ title: environment.name },
|
||||
]"
|
||||
>
|
||||
<div class="flex h-full flex-1 flex-col gap-4 p-4">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="mx-auto w-full max-w-7xl space-y-6 p-4">
|
||||
<!-- Header -->
|
||||
<div class="flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 class="text-3xl font-bold tracking-tight">{{ environment.name }}</h2>
|
||||
<Badge
|
||||
:variant="environment.status === 'active' ? 'success' : 'secondary'"
|
||||
>{{ environment.status.replace("-", " ") }}</Badge
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<h2 class="text-2xl font-bold tracking-tight">{{ environment.name }}</h2>
|
||||
<StatusIndicator :status="environment.status" size="md" />
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground"
|
||||
>
|
||||
<span class="flex items-center gap-1.5">
|
||||
<GitBranchIcon class="size-4" />{{ environment.branch }}
|
||||
</span>
|
||||
<span>
|
||||
Scheduler:
|
||||
{{
|
||||
environment.scheduler_enabled
|
||||
? `${environment.scheduler_mode} on ${
|
||||
environment.services?.find(
|
||||
(service) =>
|
||||
service.id ===
|
||||
environment.scheduler_target_service_id,
|
||||
)?.name ?? "selected service"
|
||||
}`
|
||||
: "disabled"
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<p class="mt-1 text-sm text-muted-foreground">
|
||||
<GitBranchIcon class="mr-1 inline size-4" />{{ environment.branch }}
|
||||
</p>
|
||||
<p class="mt-1 text-sm text-muted-foreground">
|
||||
Scheduler:
|
||||
{{
|
||||
environment.scheduler_enabled
|
||||
? `${environment.scheduler_mode} on ${
|
||||
environment.services?.find(
|
||||
(service) =>
|
||||
service.id === environment.scheduler_target_service_id,
|
||||
)?.name ?? "selected service"
|
||||
}`
|
||||
: "disabled"
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button
|
||||
:as="Link"
|
||||
variant="secondary"
|
||||
:as="Link"
|
||||
:href="
|
||||
route('environments.edit', {
|
||||
organisation: $page.props.organisation.id,
|
||||
@@ -141,8 +165,8 @@ const deployEnvironment = (): void => {
|
||||
Migrate
|
||||
</Button>
|
||||
<Button
|
||||
:as="Link"
|
||||
variant="secondary"
|
||||
:as="Link"
|
||||
:href="
|
||||
route('environment-attachments.create', {
|
||||
organisation: $page.props.organisation.id,
|
||||
@@ -154,48 +178,27 @@ const deployEnvironment = (): void => {
|
||||
<PlusIcon class="size-4" />
|
||||
Attach
|
||||
</Button>
|
||||
<Button
|
||||
:disabled="deploymentRequirements.registryRequired || deployForm.processing"
|
||||
:title="
|
||||
deploymentRequirements.registryRequired
|
||||
? 'Configure a registry before deploying to multiple servers.'
|
||||
: undefined
|
||||
"
|
||||
@click="deployEnvironment"
|
||||
>
|
||||
<RocketIcon class="size-4" />
|
||||
Deploy
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<Card
|
||||
v-if="deploymentRequirements.registryRequired"
|
||||
class="border-amber-300 bg-amber-50 dark:bg-amber-950/30"
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle>Deploy Target</CardTitle>
|
||||
<CardDescription>
|
||||
Deploy the current {{ environment.branch }} branch head, or pin this
|
||||
deployment to a specific commit SHA.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form class="flex flex-col gap-3 md:flex-row md:items-end" @submit.prevent="deployEnvironment">
|
||||
<div class="grid flex-1 gap-2">
|
||||
<Label for="target_commit">Commit SHA</Label>
|
||||
<Input
|
||||
id="target_commit"
|
||||
v-model="deployForm.target_commit"
|
||||
placeholder="Leave blank to resolve the branch head"
|
||||
maxlength="40"
|
||||
/>
|
||||
<InputError :message="deployForm.errors.target_commit" />
|
||||
</div>
|
||||
<Button
|
||||
type="submit"
|
||||
:disabled="deploymentRequirements.registryRequired || deployForm.processing"
|
||||
:title="
|
||||
deploymentRequirements.registryRequired
|
||||
? 'Configure a registry before deploying to multiple servers.'
|
||||
: undefined
|
||||
"
|
||||
>
|
||||
<RocketIcon class="size-4" />
|
||||
Deploy
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card v-if="deploymentRequirements.registryRequired" class="border-amber-200 bg-amber-50">
|
||||
<CardHeader>
|
||||
<CardTitle>Registry Required</CardTitle>
|
||||
<CardTitle>Registry required</CardTitle>
|
||||
<CardDescription>
|
||||
This environment spans {{ deploymentRequirements.serverCount }} servers.
|
||||
Configure a registry before deploying so every server can pull the same
|
||||
@@ -217,275 +220,179 @@ const deployEnvironment = (): void => {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div class="grid gap-4 lg:grid-cols-[2fr_1fr]">
|
||||
<div class="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Services</CardTitle>
|
||||
<CardDescription
|
||||
>{{ environment.services?.length ?? 0 }} runtime and managed
|
||||
services</CardDescription
|
||||
>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-3">
|
||||
<div
|
||||
v-for="service in environment.services"
|
||||
:key="service.id"
|
||||
class="rounded-md border p-3"
|
||||
>
|
||||
<div class="flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<ServerIcon class="size-4" />
|
||||
<h3 class="font-semibold">{{ service.name }}</h3>
|
||||
<Badge variant="outline">{{ service.type }}</Badge>
|
||||
</div>
|
||||
<p class="mt-1 text-sm text-muted-foreground">
|
||||
{{ service.replicas?.length ?? 0 }} replicas ·
|
||||
{{ service.slices?.length ?? 0 }} slices ·
|
||||
{{ service.status?.replace("-", " ") }}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
:as="Link"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('environment-services.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: environment.application_id,
|
||||
environment: environment.id,
|
||||
service: service.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
<SettingsIcon class="size-4" />
|
||||
Open
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<!-- Topology -->
|
||||
<div class="grid gap-4 lg:grid-cols-3">
|
||||
<!-- Network -->
|
||||
<div class="space-y-3">
|
||||
<h3 class="px-1 text-sm font-medium text-muted-foreground">Network</h3>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Operations</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<OperationTimeline :operations="environment.operations" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<CardTitle>Builds</CardTitle>
|
||||
<CardDescription>
|
||||
Recent artifacts planned or built for this environment.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
:as="Link"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('build-artifacts.index', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
View all
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-2">
|
||||
<div
|
||||
v-for="artifact in environment.build_artifacts"
|
||||
:key="artifact.id"
|
||||
class="rounded-md border p-3 text-sm"
|
||||
<TopologyCard
|
||||
v-for="attachment in gatewayAttachments"
|
||||
:key="attachment.id"
|
||||
:icon="GlobeIcon"
|
||||
title="Gateway"
|
||||
:subtitle="attachment.service_slice?.config?.domain ?? 'Unassigned domain'"
|
||||
:status="attachment.service_slice?.config?.certificate_status ?? 'pending'"
|
||||
>
|
||||
<SpecRow
|
||||
:icon="GlobeIcon"
|
||||
label="Domain"
|
||||
:value="attachment.service_slice?.config?.domain ?? 'not set'"
|
||||
/>
|
||||
<SpecRow
|
||||
:icon="ServerIcon"
|
||||
label="Path"
|
||||
:value="attachment.service_slice?.config?.path_prefix ?? '/'"
|
||||
/>
|
||||
<SpecRow :icon="ShieldCheckIcon" label="TLS">
|
||||
<StatusIndicator
|
||||
:status="
|
||||
attachment.service_slice?.config?.tls_enabled === false
|
||||
? 'disabled'
|
||||
: 'enabled'
|
||||
"
|
||||
/>
|
||||
</SpecRow>
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger
|
||||
class="flex w-full items-center justify-between pt-1 text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<Badge variant="outline">{{ artifact.status }}</Badge>
|
||||
<span class="font-medium">{{ artifact.commit_sha }}</span>
|
||||
<span class="text-muted-foreground">{{ artifact.image_tag }}</span>
|
||||
</div>
|
||||
<p class="mt-1 text-muted-foreground">
|
||||
{{ artifact.registry_ref ?? "No registry ref" }}
|
||||
<span v-if="artifact.image_digest">
|
||||
· {{ artifact.image_digest }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
v-if="environment.build_artifacts.length === 0"
|
||||
class="rounded-md border border-dashed p-4 text-sm text-muted-foreground"
|
||||
>
|
||||
No builds recorded for this environment.
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Attachments</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-2">
|
||||
<div
|
||||
v-for="attachment in environment.attachments"
|
||||
:key="attachment.id"
|
||||
class="rounded-md border p-3 text-sm"
|
||||
>
|
||||
<div class="flex items-center gap-2 font-medium">
|
||||
<DatabaseIcon class="size-4" />
|
||||
<Link
|
||||
:href="
|
||||
route('environment-attachments.edit', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
attachment: attachment.id,
|
||||
})
|
||||
"
|
||||
class="hover:underline"
|
||||
>
|
||||
{{ attachment.role.replace("_", " ") }}
|
||||
</Link>
|
||||
</div>
|
||||
<p class="mt-1 text-muted-foreground">
|
||||
{{ attachment.service?.name }} ·
|
||||
{{ attachment.service_slice?.name ?? "service level" }}
|
||||
</p>
|
||||
<div
|
||||
v-if="attachment.role === 'gateway'"
|
||||
class="mt-2 grid gap-1 text-xs text-muted-foreground"
|
||||
>
|
||||
<div>
|
||||
Domain:
|
||||
{{ attachment.service_slice?.config?.domain ?? "not set" }}
|
||||
</div>
|
||||
<div>
|
||||
Path:
|
||||
{{ attachment.service_slice?.config?.path_prefix ?? "/" }}
|
||||
· TLS
|
||||
{{
|
||||
attachment.service_slice?.config?.tls_enabled === false
|
||||
? "disabled"
|
||||
: "enabled"
|
||||
}}
|
||||
</div>
|
||||
<div>
|
||||
Certificate:
|
||||
{{
|
||||
attachment.service_slice?.config?.certificate_status ??
|
||||
"pending"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card v-if="gatewayAttachments.length > 0">
|
||||
<CardHeader>
|
||||
<div class="flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<CardTitle>Gateway Cutover</CardTitle>
|
||||
<CardDescription>
|
||||
Route validation, reload, upstream health, and drain sequence.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
:as="Link"
|
||||
size="xs"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('gateway.routes.index', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
Manage routes
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-3">
|
||||
<div
|
||||
v-for="attachment in gatewayAttachments"
|
||||
:key="attachment.id"
|
||||
class="rounded-md border p-3 text-sm"
|
||||
>
|
||||
<div class="font-medium">
|
||||
{{ attachment.service_slice?.config?.domain ?? "Unassigned domain" }}
|
||||
</div>
|
||||
<div class="text-muted-foreground">
|
||||
Caddyfile: /home/keystone/gateway/Caddyfile
|
||||
</div>
|
||||
View Caddyfile
|
||||
<ChevronDownIcon class="size-3.5" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<pre class="mt-2 overflow-x-auto rounded-md bg-muted p-3 text-xs">{{
|
||||
caddyfilePreviewFor(attachment.id)
|
||||
}}</pre>
|
||||
<div class="mt-2 flex flex-wrap gap-2">
|
||||
<Badge variant="outline">Render route</Badge>
|
||||
<Badge variant="outline">Health check</Badge>
|
||||
<Badge variant="outline">Reload gateway</Badge>
|
||||
<Badge variant="outline">Drain old upstream</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<OperationTimeline :operations="gatewayCutovers" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card v-else>
|
||||
<CardHeader>
|
||||
<div class="flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<CardTitle>Gateway Routes</CardTitle>
|
||||
<CardDescription>
|
||||
No gateway routes are configured for this environment.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
:as="Link"
|
||||
size="xs"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('gateway.routes.index', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
Manage routes
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</TopologyCard>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Variables</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="flex flex-wrap gap-2">
|
||||
<Badge
|
||||
v-for="variable in environment.variables"
|
||||
:key="variable.id"
|
||||
:variant="variable.source === 'user' ? 'secondary' : 'outline'"
|
||||
>
|
||||
{{ variable.key }} · {{ variable.source.replace("_", " ") }}
|
||||
<span v-if="!variable.overridable"> · locked</span>
|
||||
</Badge>
|
||||
<Card v-if="gatewayAttachments.length === 0" class="border-dashed">
|
||||
<CardContent class="space-y-3 p-5 text-center">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
No gateway routes configured.
|
||||
</p>
|
||||
<Button
|
||||
:as="Link"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('environment-variables.index', {
|
||||
route('gateway.routes.index', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
Manage routes
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Compute -->
|
||||
<div class="space-y-3">
|
||||
<h3 class="px-1 text-sm font-medium text-muted-foreground">Compute</h3>
|
||||
|
||||
<TopologyCard
|
||||
v-for="service in environment.services"
|
||||
:key="service.id"
|
||||
:icon="ServerIcon"
|
||||
:title="service.name"
|
||||
:subtitle="service.type"
|
||||
:status="service.status"
|
||||
>
|
||||
<SpecRow
|
||||
:icon="LayersIcon"
|
||||
label="Replicas"
|
||||
:value="service.replicas?.length ?? 0"
|
||||
/>
|
||||
<SpecRow
|
||||
:icon="LayersIcon"
|
||||
label="Slices"
|
||||
:value="service.slices?.length ?? 0"
|
||||
/>
|
||||
<SpecRow
|
||||
:icon="ServerIcon"
|
||||
label="Deploy policy"
|
||||
:value="service.deploy_policy ?? 'default'"
|
||||
/>
|
||||
<Button
|
||||
:as="Link"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
class="mt-1 w-full"
|
||||
:href="
|
||||
route('environment-services.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: environment.application_id,
|
||||
environment: environment.id,
|
||||
service: service.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
<SettingsIcon class="size-4" />
|
||||
Open service
|
||||
</Button>
|
||||
</TopologyCard>
|
||||
|
||||
<Card v-if="(environment.services?.length ?? 0) === 0" class="border-dashed">
|
||||
<CardContent class="p-5 text-center text-sm text-muted-foreground">
|
||||
No services in this environment.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Resources -->
|
||||
<div class="space-y-3">
|
||||
<h3 class="px-1 text-sm font-medium text-muted-foreground">Resources</h3>
|
||||
|
||||
<TopologyCard
|
||||
v-for="attachment in resourceAttachments"
|
||||
:key="attachment.id"
|
||||
:icon="attachmentIcon(attachment.role)"
|
||||
:title="attachment.role.replaceAll('_', ' ')"
|
||||
:subtitle="attachment.service?.name"
|
||||
>
|
||||
<SpecRow
|
||||
:icon="ServerIcon"
|
||||
label="Service"
|
||||
:value="attachment.service?.name ?? '—'"
|
||||
/>
|
||||
<SpecRow
|
||||
:icon="LayersIcon"
|
||||
label="Slice"
|
||||
:value="attachment.service_slice?.name ?? 'service level'"
|
||||
/>
|
||||
<Button
|
||||
:as="Link"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
class="mt-1 w-full"
|
||||
:href="
|
||||
route('environment-attachments.edit', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
attachment: attachment.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
<SettingsIcon class="size-4" />
|
||||
Edit attachment
|
||||
</Button>
|
||||
</TopologyCard>
|
||||
|
||||
<Card v-if="resourceAttachments.length === 0" class="border-dashed">
|
||||
<CardContent class="space-y-3 p-5 text-center">
|
||||
<p class="text-sm text-muted-foreground">No resources attached.</p>
|
||||
<Button
|
||||
:as="Link"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('environment-attachments.create', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
@@ -493,43 +400,152 @@ const deployEnvironment = (): void => {
|
||||
"
|
||||
>
|
||||
<PlusIcon class="size-4" />
|
||||
Manage
|
||||
Attach resource
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Variables -->
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Service policy</CardTitle>
|
||||
<CardDescription>
|
||||
Migration and scheduler-related defaults exposed by current
|
||||
services.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-2 text-sm">
|
||||
<div
|
||||
v-for="service in environment.services"
|
||||
:key="service.id"
|
||||
class="rounded-md border p-3"
|
||||
>
|
||||
<div class="font-medium">{{ service.name }}</div>
|
||||
<div class="text-muted-foreground">
|
||||
Deploy policy: {{ service.deploy_policy ?? "default" }} ·
|
||||
Roles: {{ service.process_roles?.join(", ") || "none" }}
|
||||
</div>
|
||||
<div class="text-muted-foreground">
|
||||
Migration:
|
||||
{{
|
||||
service.config?.migration_mode ??
|
||||
service.config?.migration_timing ??
|
||||
"not configured"
|
||||
}}
|
||||
</div>
|
||||
<CardHeader class="pb-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<CardTitle class="text-base">Variables</CardTitle>
|
||||
<Button
|
||||
:as="Link"
|
||||
size="xs"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('environment-variables.index', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
Manage
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent class="flex flex-wrap gap-2">
|
||||
<Badge
|
||||
v-for="variable in environment.variables"
|
||||
:key="variable.id"
|
||||
:variant="variable.source === 'user' ? 'secondary' : 'outline'"
|
||||
>
|
||||
{{ variable.key }}
|
||||
<span v-if="!variable.overridable"> · locked</span>
|
||||
</Badge>
|
||||
<span
|
||||
v-if="(environment.variables?.length ?? 0) === 0"
|
||||
class="text-sm text-muted-foreground"
|
||||
>
|
||||
No variables set.
|
||||
</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Deploy a specific commit -->
|
||||
<Collapsible>
|
||||
<Card>
|
||||
<CollapsibleTrigger class="w-full">
|
||||
<CardHeader class="flex-row items-center justify-between">
|
||||
<div class="text-left">
|
||||
<CardTitle class="text-base">Deploy a specific commit</CardTitle>
|
||||
<CardDescription>
|
||||
Pin this deployment to a commit SHA instead of the branch head.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<ChevronDownIcon class="size-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<CardContent>
|
||||
<form
|
||||
class="flex flex-col gap-3 md:flex-row md:items-end"
|
||||
@submit.prevent="deployEnvironment"
|
||||
>
|
||||
<div class="grid flex-1 gap-2">
|
||||
<Label for="target_commit">Commit SHA</Label>
|
||||
<Input
|
||||
id="target_commit"
|
||||
v-model="deployForm.target_commit"
|
||||
placeholder="Leave blank to resolve the branch head"
|
||||
maxlength="40"
|
||||
/>
|
||||
<InputError :message="deployForm.errors.target_commit" />
|
||||
</div>
|
||||
<Button
|
||||
type="submit"
|
||||
:disabled="
|
||||
deploymentRequirements.registryRequired ||
|
||||
deployForm.processing
|
||||
"
|
||||
>
|
||||
<RocketIcon class="size-4" />
|
||||
Deploy commit
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
|
||||
<!-- Activity -->
|
||||
<div class="grid gap-4 lg:grid-cols-[2fr_1fr]">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle class="text-base">Operations</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<OperationTimeline :operations="environment.operations" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div class="flex items-center justify-between">
|
||||
<CardTitle class="text-base">Builds</CardTitle>
|
||||
<Button
|
||||
:as="Link"
|
||||
size="xs"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('build-artifacts.index', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
View all
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-2">
|
||||
<div
|
||||
v-for="artifact in environment.build_artifacts"
|
||||
:key="artifact.id"
|
||||
class="rounded-md border p-3 text-sm"
|
||||
>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<StatusIndicator :status="artifact.status" />
|
||||
<span class="font-mono text-xs">{{ artifact.commit_sha }}</span>
|
||||
</div>
|
||||
<p class="mt-1 truncate text-xs text-muted-foreground">
|
||||
{{ artifact.registry_ref ?? "No registry ref" }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
v-if="(environment.build_artifacts?.length ?? 0) === 0"
|
||||
class="rounded-md border border-dashed p-4 text-sm text-muted-foreground"
|
||||
>
|
||||
No builds recorded.
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user