Implement Keystone environment deployments
This commit is contained in:
72
resources/js/pages/applications/Create.vue
Normal file
72
resources/js/pages/applications/Create.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<script setup>
|
||||
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 form = useForm({
|
||||
name: '',
|
||||
repository_url: '',
|
||||
default_branch: 'main',
|
||||
environment_name: 'production',
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Create Application" />
|
||||
|
||||
<AppLayout
|
||||
:breadcrumbs="[
|
||||
{
|
||||
title: 'Applications',
|
||||
href: route('applications.index', {
|
||||
organisation: $page.props.organisation.id,
|
||||
}),
|
||||
},
|
||||
{
|
||||
title: 'Create',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<form
|
||||
class="flex h-full max-w-2xl flex-1 flex-col gap-5 p-4"
|
||||
@submit.prevent="form.post(route('applications.store', { organisation: $page.props.organisation.id }))"
|
||||
>
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold tracking-tight">Create Application</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="name">Name</Label>
|
||||
<Input id="name" v-model="form.name" type="text" required autofocus placeholder="Billing API" />
|
||||
<InputError :message="form.errors.name" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="repository_url">Repository SSH URL</Label>
|
||||
<Input id="repository_url" v-model="form.repository_url" type="text" required placeholder="git@example.com:org/repo.git" />
|
||||
<InputError :message="form.errors.repository_url" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<div class="grid gap-2">
|
||||
<Label for="default_branch">Default branch</Label>
|
||||
<Input id="default_branch" v-model="form.default_branch" type="text" required />
|
||||
<InputError :message="form.errors.default_branch" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="environment_name">Environment</Label>
|
||||
<Input id="environment_name" v-model="form.environment_name" type="text" required />
|
||||
<InputError :message="form.errors.environment_name" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end">
|
||||
<Button type="submit" :disabled="form.processing">Create</Button>
|
||||
</div>
|
||||
</form>
|
||||
</AppLayout>
|
||||
</template>
|
||||
@@ -1,7 +1,6 @@
|
||||
<script setup>
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import AppLayout from '@/layouts/AppLayout.vue';
|
||||
import { Head, Link } from '@inertiajs/vue3';
|
||||
|
||||
@@ -26,18 +25,26 @@ const props = defineProps({
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="flex justify-between items-center gap-3 p-4">
|
||||
<div class="flex items-center justify-between gap-3 p-4">
|
||||
<h2 class="text-3xl font-bold tracking-tight">Applications</h2>
|
||||
<div>
|
||||
<!-- <Button :as="Link" :href="route('applications.create', {
|
||||
organisation: $page.props.organisation.id,
|
||||
})">Create</Button> -->
|
||||
<Button
|
||||
:as="Link"
|
||||
:href="
|
||||
route('applications.create', {
|
||||
organisation: $page.props.organisation.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-4 rounded-xl p-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Card v-for="application in applications" :key="`application{$applications.id}`" class="relative w-full">
|
||||
<CardHeader>
|
||||
<CardTitle>{{ application.name }}</CardTitle>
|
||||
<CardDescription>{{ application.environments?.length ?? 0 }} environments</CardDescription>
|
||||
</CardHeader>
|
||||
<Link
|
||||
:href="
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import AppLayout from '@/layouts/AppLayout.vue';
|
||||
import { Head, Link } from '@inertiajs/vue3';
|
||||
import { ServerIcon } from 'lucide-vue-next';
|
||||
import { Head, Link, router } from '@inertiajs/vue3';
|
||||
import { BoxesIcon, ExternalLinkIcon, GitBranchIcon, KeyRoundIcon, RocketIcon } from 'lucide-vue-next';
|
||||
|
||||
const props = defineProps({
|
||||
application: {
|
||||
@@ -36,33 +37,154 @@ const props = defineProps({
|
||||
<h2 class="text-3xl font-bold tracking-tight">{{ application.name }}</h2>
|
||||
</div>
|
||||
|
||||
<Card v-if="application.deploy_key_public && !application.deploy_key_installed_at">
|
||||
<CardHeader>
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="min-w-0 space-y-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<KeyRoundIcon class="size-4" />
|
||||
<CardTitle>Repository Deploy Key</CardTitle>
|
||||
</div>
|
||||
<pre class="max-w-full overflow-x-auto rounded border bg-muted p-3 text-xs">{{ application.deploy_key_public }}</pre>
|
||||
</div>
|
||||
<Button
|
||||
class="shrink-0"
|
||||
@click="
|
||||
router.post(
|
||||
route('applications.verify-repository', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
}),
|
||||
)
|
||||
"
|
||||
>
|
||||
<GitBranchIcon class="size-4" />
|
||||
Verify
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
|
||||
<div>
|
||||
<div class="mb-3 flex items-center justify-between">
|
||||
<h3 class="text-2xl font-semibold tracking-tight">Server Instances</h3>
|
||||
<div>
|
||||
<!-- Add instance button would go here -->
|
||||
</div>
|
||||
<h3 class="text-2xl font-semibold tracking-tight">Environments</h3>
|
||||
</div>
|
||||
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Card v-for="instance in application.instances" :key="instance.id" class="relative">
|
||||
<Link
|
||||
class="absolute inset-0"
|
||||
:href="
|
||||
route('servers.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
server: instance.server.id,
|
||||
})
|
||||
"
|
||||
></Link>
|
||||
<Card v-for="environment in application.environments" :key="environment.id" class="relative">
|
||||
<CardHeader>
|
||||
<div class="flex items-center gap-2">
|
||||
<ServerIcon class="size-4" />
|
||||
<CardTitle>{{ instance.server.name }}</CardTitle>
|
||||
<Badge :variant="instance.status === 'active' ? 'success' : 'secondary'">{{
|
||||
instance.status.replace('-', ' ')
|
||||
}}</Badge>
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<BoxesIcon class="size-4" />
|
||||
<CardTitle>{{ environment.name }}</CardTitle>
|
||||
<Badge :variant="environment.status === 'active' ? 'success' : 'secondary'">{{
|
||||
environment.status.replace('-', ' ')
|
||||
}}</Badge>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Branch: {{ environment.branch }} • {{ environment.services?.length ?? 0 }} services
|
||||
</CardDescription>
|
||||
<div v-if="environment.variables?.length" class="mt-3 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex shrink-0 gap-2">
|
||||
<Button
|
||||
:as="Link"
|
||||
size="xs"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('environments.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
<ExternalLinkIcon class="size-4" />
|
||||
Open
|
||||
</Button>
|
||||
<Button
|
||||
size="xs"
|
||||
@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
|
||||
size="xs"
|
||||
variant="secondary"
|
||||
@click="
|
||||
router.post(
|
||||
route('environment-migrations.store', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
}),
|
||||
)
|
||||
"
|
||||
>
|
||||
Migrate
|
||||
</Button>
|
||||
<Button
|
||||
:as="Link"
|
||||
size="xs"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('environment-variables.create', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
Env
|
||||
</Button>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="secondary"
|
||||
@click="
|
||||
router.post(
|
||||
route('environment-workers.store', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
}),
|
||||
)
|
||||
"
|
||||
>
|
||||
Worker
|
||||
</Button>
|
||||
<Button
|
||||
:as="Link"
|
||||
size="xs"
|
||||
:href="
|
||||
route('environment-attachments.create', {
|
||||
organisation: $page.props.organisation.id,
|
||||
application: application.id,
|
||||
environment: environment.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
Attach
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<CardDescription> Branch: {{ instance.branch }} </CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user