196 lines
9.4 KiB
Vue
196 lines
9.4 KiB
Vue
<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>
|