wowowowowo
This commit is contained in:
@@ -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