Implement Keystone environment deployments
This commit is contained in:
195
resources/js/pages/environments/Show.vue
Normal file
195
resources/js/pages/environments/Show.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<script setup>
|
||||
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, router } from '@inertiajs/vue3';
|
||||
import { DatabaseIcon, GitBranchIcon, ListChecksIcon, PlusIcon, RocketIcon, ServerIcon, SettingsIcon } from 'lucide-vue-next';
|
||||
|
||||
const props = defineProps({
|
||||
application: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
environment: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head :title="`${environment.name} 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: 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>
|
||||
<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>
|
||||
<p class="mt-1 text-sm text-muted-foreground"><GitBranchIcon class="mr-1 inline size-4" />{{ environment.branch }}</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,
|
||||
}),
|
||||
)
|
||||
"
|
||||
>
|
||||
<RocketIcon class="size-4" />
|
||||
Deploy
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
@click="
|
||||
router.post(
|
||||
route('environment-migrations.store', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
}),
|
||||
)
|
||||
"
|
||||
>
|
||||
<ListChecksIcon class="size-4" />
|
||||
Migrate
|
||||
</Button>
|
||||
<Button
|
||||
:as="Link"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('environment-attachments.create', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
<PlusIcon class="size-4" />
|
||||
Attach
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
v-if="service.server_id"
|
||||
:as="Link"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('services.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
server: service.server_id,
|
||||
service: service.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
<SettingsIcon class="size-4" />
|
||||
Open
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Operations</CardTitle>
|
||||
</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">
|
||||
<span class="font-medium">{{ operation.kind.replace('_', ' ') }}</span>
|
||||
<Badge :variant="operation.status === 'completed' ? 'success' : 'secondary'">{{ operation.status.replace('_', ' ') }}</Badge>
|
||||
</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" />
|
||||
{{ attachment.role.replace('_', ' ') }}
|
||||
</div>
|
||||
<p class="mt-1 text-muted-foreground">{{ attachment.service?.name }} · {{ attachment.service_slice?.name ?? 'service level' }}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<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>
|
||||
<Button
|
||||
:as="Link"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('environment-variables.create', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
<PlusIcon class="size-4" />
|
||||
Add
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
Reference in New Issue
Block a user