wowowowowo
This commit is contained in:
81
resources/js/pages/environments/Create.vue
Normal file
81
resources/js/pages/environments/Create.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<script setup lang="ts">
|
||||
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 AppLayout from "@/layouts/AppLayout.vue";
|
||||
import { Head, useForm } from "@inertiajs/vue3";
|
||||
|
||||
const props = defineProps<{
|
||||
application: Record<string, any>;
|
||||
}>();
|
||||
|
||||
const form = useForm({
|
||||
name: "",
|
||||
branch: props.application.default_branch ?? "main",
|
||||
php_version: "8.4",
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Create Environment" />
|
||||
|
||||
<AppLayout
|
||||
:breadcrumbs="[
|
||||
{
|
||||
title: 'Applications',
|
||||
href: route('applications.index', { organisation: $page.props.organisation.id }),
|
||||
},
|
||||
{
|
||||
title: application.name,
|
||||
href: route('applications.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
}),
|
||||
},
|
||||
{ title: 'Create Environment' },
|
||||
]"
|
||||
>
|
||||
<form
|
||||
class="flex h-full max-w-2xl flex-1 flex-col gap-5 p-4"
|
||||
@submit.prevent="
|
||||
form.post(
|
||||
route('environments.store', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
}),
|
||||
)
|
||||
"
|
||||
>
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold tracking-tight">Create Environment</h2>
|
||||
<p class="mt-1 text-sm text-muted-foreground">
|
||||
A Laravel web service is created with scheduler and migration defaults.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="name">Name</Label>
|
||||
<Input id="name" v-model="form.name" required placeholder="staging" />
|
||||
<InputError :message="form.errors.name" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<div class="grid gap-2">
|
||||
<Label for="branch">Branch</Label>
|
||||
<Input id="branch" v-model="form.branch" required />
|
||||
<InputError :message="form.errors.branch" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="php_version">PHP version</Label>
|
||||
<Input id="php_version" v-model="form.php_version" required />
|
||||
<InputError :message="form.errors.php_version" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<Button type="submit" :disabled="form.processing">Create environment</Button>
|
||||
</div>
|
||||
</form>
|
||||
</AppLayout>
|
||||
</template>
|
||||
213
resources/js/pages/environments/Edit.vue
Normal file
213
resources/js/pages/environments/Edit.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<script setup lang="ts">
|
||||
import InputError from "@/components/InputError.vue";
|
||||
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 AppLayout from "@/layouts/AppLayout.vue";
|
||||
import { Head, router, useForm } from "@inertiajs/vue3";
|
||||
|
||||
const props = defineProps<{
|
||||
application: Record<string, any>;
|
||||
environment: Record<string, any>;
|
||||
schedulerModes: string[];
|
||||
buildStrategies: string[];
|
||||
}>();
|
||||
|
||||
const buildConfig = props.environment.build_config ?? {};
|
||||
|
||||
const form = useForm({
|
||||
name: props.environment.name,
|
||||
branch: props.environment.branch,
|
||||
status: props.environment.status,
|
||||
scheduler_enabled: Boolean(props.environment.scheduler_enabled),
|
||||
scheduler_target_service_id: props.environment.scheduler_target_service_id ?? "",
|
||||
scheduler_mode: props.environment.scheduler_mode ?? "single",
|
||||
build_strategy: buildConfig.build_strategy ?? "target_server",
|
||||
php_version: buildConfig.php_version ?? "8.4",
|
||||
document_root: buildConfig.document_root ?? "public",
|
||||
health_path: buildConfig.health_path ?? "/up",
|
||||
js_package_manager: buildConfig.js_package_manager ?? "bun",
|
||||
js_build_command: buildConfig.js_build_command ?? "",
|
||||
});
|
||||
|
||||
const destroyEnvironment = (): void => {
|
||||
if (!window.confirm(`Delete ${props.environment.name}?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
router.delete(
|
||||
route("environments.destroy", {
|
||||
organisation: props.application.organisation_id,
|
||||
application: props.application.id,
|
||||
environment: props.environment.id,
|
||||
}),
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head :title="`Edit ${environment.name}`" />
|
||||
|
||||
<AppLayout
|
||||
:breadcrumbs="[
|
||||
{
|
||||
title: application.name,
|
||||
href: route('applications.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
}),
|
||||
},
|
||||
{
|
||||
title: environment.name,
|
||||
href: route('environments.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
}),
|
||||
},
|
||||
{ title: 'Edit' },
|
||||
]"
|
||||
>
|
||||
<form
|
||||
class="flex h-full max-w-4xl flex-1 flex-col gap-5 p-4"
|
||||
@submit.prevent="
|
||||
form.put(
|
||||
route('environments.update', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
}),
|
||||
)
|
||||
"
|
||||
>
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold tracking-tight">Environment Settings</h2>
|
||||
<p class="mt-1 text-sm text-muted-foreground">
|
||||
Branch, scheduler, build strategy, and health check configuration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Overview</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-4 md:grid-cols-3">
|
||||
<div class="grid gap-2">
|
||||
<Label for="name">Name</Label>
|
||||
<Input id="name" v-model="form.name" required />
|
||||
<InputError :message="form.errors.name" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="branch">Branch</Label>
|
||||
<Input id="branch" v-model="form.branch" required />
|
||||
<InputError :message="form.errors.branch" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="status">Status</Label>
|
||||
<Input id="status" v-model="form.status" required />
|
||||
<InputError :message="form.errors.status" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Scheduler</CardTitle>
|
||||
<CardDescription>Choose where scheduled commands should run.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-4 md:grid-cols-3">
|
||||
<label class="flex items-center gap-2 text-sm">
|
||||
<input v-model="form.scheduler_enabled" type="checkbox" class="size-4" />
|
||||
Enabled
|
||||
</label>
|
||||
<div class="grid gap-2">
|
||||
<Label for="scheduler_target_service_id">Target service</Label>
|
||||
<select
|
||||
id="scheduler_target_service_id"
|
||||
v-model="form.scheduler_target_service_id"
|
||||
class="h-9 rounded-md border border-input bg-transparent px-3 text-sm"
|
||||
>
|
||||
<option value="">No target</option>
|
||||
<option
|
||||
v-for="service in environment.services"
|
||||
:key="service.id"
|
||||
:value="service.id"
|
||||
>
|
||||
{{ service.name }}
|
||||
</option>
|
||||
</select>
|
||||
<InputError :message="form.errors.scheduler_target_service_id" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="scheduler_mode">Mode</Label>
|
||||
<select
|
||||
id="scheduler_mode"
|
||||
v-model="form.scheduler_mode"
|
||||
class="h-9 rounded-md border border-input bg-transparent px-3 text-sm"
|
||||
>
|
||||
<option v-for="mode in schedulerModes" :key="mode" :value="mode">
|
||||
{{ mode.replace("_", " ") }}
|
||||
</option>
|
||||
</select>
|
||||
<InputError :message="form.errors.scheduler_mode" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Build & Health</CardTitle>
|
||||
<CardDescription>Defaults used by deploy planning and runtime checks.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-4 md:grid-cols-2">
|
||||
<div class="grid gap-2">
|
||||
<Label for="build_strategy">Build strategy</Label>
|
||||
<select
|
||||
id="build_strategy"
|
||||
v-model="form.build_strategy"
|
||||
class="h-9 rounded-md border border-input bg-transparent px-3 text-sm"
|
||||
>
|
||||
<option v-for="strategy in buildStrategies" :key="strategy" :value="strategy">
|
||||
{{ strategy.replace("_", " ") }}
|
||||
</option>
|
||||
</select>
|
||||
<InputError :message="form.errors.build_strategy" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="php_version">PHP version</Label>
|
||||
<Input id="php_version" v-model="form.php_version" />
|
||||
<InputError :message="form.errors.php_version" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="document_root">Document root</Label>
|
||||
<Input id="document_root" v-model="form.document_root" />
|
||||
<InputError :message="form.errors.document_root" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="health_path">Health path</Label>
|
||||
<Input id="health_path" v-model="form.health_path" />
|
||||
<InputError :message="form.errors.health_path" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="js_package_manager">JS package manager</Label>
|
||||
<Input id="js_package_manager" v-model="form.js_package_manager" />
|
||||
<InputError :message="form.errors.js_package_manager" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="js_build_command">JS build command</Label>
|
||||
<Input id="js_build_command" v-model="form.js_build_command" />
|
||||
<InputError :message="form.errors.js_build_command" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div class="flex flex-wrap justify-between gap-2">
|
||||
<Button type="button" variant="destructive" @click="destroyEnvironment">
|
||||
Delete environment
|
||||
</Button>
|
||||
<Button type="submit" :disabled="form.processing">Save settings</Button>
|
||||
</div>
|
||||
</form>
|
||||
</AppLayout>
|
||||
</template>
|
||||
89
resources/js/pages/environments/Index.vue
Normal file
89
resources/js/pages/environments/Index.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<script setup lang="ts">
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import AppLayout from "@/layouts/AppLayout.vue";
|
||||
import { Head, Link } from "@inertiajs/vue3";
|
||||
import { BoxesIcon, PlusIcon } from "lucide-vue-next";
|
||||
|
||||
defineProps<{
|
||||
applications: Record<string, any>[];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Environments" />
|
||||
|
||||
<AppLayout
|
||||
:breadcrumbs="[
|
||||
{
|
||||
title: 'Environments',
|
||||
href: route('environments.index', { organisation: $page.props.organisation.id }),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<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>
|
||||
<h2 class="text-3xl font-bold tracking-tight">Environments</h2>
|
||||
<p class="mt-1 text-sm text-muted-foreground">
|
||||
Deployment units across all applications.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
:as="Link"
|
||||
:href="route('applications.create', { organisation: $page.props.organisation.id })"
|
||||
>
|
||||
<PlusIcon class="size-4" />
|
||||
Application
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4">
|
||||
<Card v-for="application in applications" :key="application.id">
|
||||
<CardHeader>
|
||||
<CardTitle>{{ application.name }}</CardTitle>
|
||||
<CardDescription>
|
||||
{{ application.environments?.length ?? 0 }} environments
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Link
|
||||
v-for="environment in application.environments"
|
||||
:key="environment.id"
|
||||
:href="
|
||||
route('environments.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
})
|
||||
"
|
||||
class="rounded-md border p-3 hover:bg-muted/50"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<BoxesIcon class="size-4" />
|
||||
<span class="font-medium">{{ environment.name }}</span>
|
||||
<Badge :variant="environment.status === 'active' ? 'success' : 'secondary'">
|
||||
{{ environment.status.replace('-', ' ') }}
|
||||
</Badge>
|
||||
</div>
|
||||
<p class="mt-2 text-sm text-muted-foreground">
|
||||
{{ environment.branch }} · {{ environment.services_count }} services ·
|
||||
{{ environment.build_artifacts_count }} builds
|
||||
</p>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card v-if="applications.every((application) => !application.environments?.length)">
|
||||
<CardHeader>
|
||||
<CardTitle>No environments yet</CardTitle>
|
||||
<CardDescription>
|
||||
Create an application to provision its first environment.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
@@ -1,29 +1,67 @@
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import OperationTimeline from "@/components/operations/OperationTimeline.vue";
|
||||
import InputError from "@/components/InputError.vue";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
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 AppLayout from "@/layouts/AppLayout.vue";
|
||||
import { Head, Link, router } from "@inertiajs/vue3";
|
||||
import { Head, Link, router, useForm } from "@inertiajs/vue3";
|
||||
import {
|
||||
DatabaseIcon,
|
||||
GitBranchIcon,
|
||||
ListChecksIcon,
|
||||
PencilIcon,
|
||||
PlusIcon,
|
||||
RocketIcon,
|
||||
ServerIcon,
|
||||
SettingsIcon,
|
||||
} from "lucide-vue-next";
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
application: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
environment: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
const props = defineProps<{
|
||||
application: Record<string, any>;
|
||||
environment: Record<string, any>;
|
||||
deploymentRequirements: {
|
||||
registryRequired: boolean;
|
||||
registryCount: number;
|
||||
serverCount: number;
|
||||
};
|
||||
gatewayRoutePreviews: {
|
||||
attachment_id: number;
|
||||
caddyfile: string;
|
||||
}[];
|
||||
}>();
|
||||
|
||||
const gatewayAttachments = computed(() =>
|
||||
props.environment.attachments.filter((attachment) => attachment.role === "gateway"),
|
||||
);
|
||||
|
||||
const gatewayCutovers = computed(() =>
|
||||
props.environment.operations.filter((operation) => operation.kind === "gateway_cutover"),
|
||||
);
|
||||
|
||||
const caddyfilePreviewFor = (attachmentId: number): string =>
|
||||
props.gatewayRoutePreviews.find((preview) => preview.attachment_id === attachmentId)?.caddyfile ??
|
||||
"# No route preview available";
|
||||
|
||||
const deployForm = useForm({
|
||||
target_commit: "",
|
||||
});
|
||||
|
||||
const deployEnvironment = (): void => {
|
||||
deployForm.post(
|
||||
route("environment-deployments.store", {
|
||||
organisation: route().params.organisation,
|
||||
application: props.application.id,
|
||||
environment: props.environment.id,
|
||||
}),
|
||||
{
|
||||
preserveScroll: true,
|
||||
},
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -58,21 +96,34 @@ const props = defineProps({
|
||||
<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
|
||||
@click="
|
||||
router.post(
|
||||
route('environment-deployments.store', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
}),
|
||||
)
|
||||
:as="Link"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('environments.edit', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
<RocketIcon class="size-4" />
|
||||
Deploy
|
||||
<PencilIcon class="size-4" />
|
||||
Settings
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
@@ -106,6 +157,66 @@ const props = defineProps({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<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>
|
||||
<CardDescription>
|
||||
This environment spans {{ deploymentRequirements.serverCount }} servers.
|
||||
Configure a registry before deploying so every server can pull the same
|
||||
artifact.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button
|
||||
:as="Link"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('registries.create', {
|
||||
organisation: $page.props.organisation.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
Add registry
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div class="grid gap-4 lg:grid-cols-[2fr_1fr]">
|
||||
<div class="space-y-4">
|
||||
<Card>
|
||||
@@ -136,14 +247,14 @@ const props = defineProps({
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
v-if="service.server_id"
|
||||
:as="Link"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('services.show', {
|
||||
route('environment-services.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
server: service.server_id,
|
||||
application: environment.application_id,
|
||||
environment: environment.id,
|
||||
service: service.id,
|
||||
})
|
||||
"
|
||||
@@ -160,21 +271,59 @@ const props = defineProps({
|
||||
<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="operation in environment.operations"
|
||||
:key="operation.id"
|
||||
class="flex items-center justify-between rounded-md border p-3"
|
||||
v-for="artifact in environment.build_artifacts"
|
||||
:key="artifact.id"
|
||||
class="rounded-md border p-3 text-sm"
|
||||
>
|
||||
<span class="font-medium">{{
|
||||
operation.kind.replace("_", " ")
|
||||
}}</span>
|
||||
<Badge
|
||||
:variant="
|
||||
operation.status === 'completed' ? 'success' : 'secondary'
|
||||
"
|
||||
>{{ operation.status.replace("_", " ") }}</Badge
|
||||
>
|
||||
<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>
|
||||
@@ -193,16 +342,131 @@ const props = defineProps({
|
||||
>
|
||||
<div class="flex items-center gap-2 font-medium">
|
||||
<DatabaseIcon class="size-4" />
|
||||
{{ attachment.role.replace("_", " ") }}
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Variables</CardTitle>
|
||||
@@ -221,7 +485,7 @@ const props = defineProps({
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('environment-variables.create', {
|
||||
route('environment-variables.index', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
@@ -229,10 +493,41 @@ const props = defineProps({
|
||||
"
|
||||
>
|
||||
<PlusIcon class="size-4" />
|
||||
Add
|
||||
Manage
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user