176 lines
7.3 KiB
Vue
176 lines
7.3 KiB
Vue
<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, router } from "@inertiajs/vue3";
|
|
import { PencilIcon, PlusIcon, Trash2Icon } from "lucide-vue-next";
|
|
|
|
const props = defineProps<{
|
|
application: Record<string, any>;
|
|
environment: Record<string, any>;
|
|
routes: Record<string, any>[];
|
|
}>();
|
|
|
|
const destroyRoute = (routeAttachment: Record<string, any>): void => {
|
|
const domain = routeAttachment.service_slice?.config?.domain ?? routeAttachment.service_slice?.name;
|
|
|
|
if (!window.confirm(`Remove gateway route ${domain}?`)) {
|
|
return;
|
|
}
|
|
|
|
router.delete(
|
|
route("gateway.routes.destroy", {
|
|
organisation: route().params.organisation,
|
|
application: props.application.id,
|
|
environment: props.environment.id,
|
|
route: routeAttachment.id,
|
|
}),
|
|
{ preserveScroll: true },
|
|
);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Head :title="`${environment.name} gateway routes`" />
|
|
|
|
<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,
|
|
href: route('environments.show', {
|
|
organisation: $page.props.organisation.id,
|
|
application: application.id,
|
|
environment: environment.id,
|
|
}),
|
|
},
|
|
{ title: 'Gateway routes' },
|
|
]"
|
|
>
|
|
<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">Gateway Routes</h2>
|
|
<p class="mt-1 text-sm text-muted-foreground">
|
|
Domains, path prefixes, TLS state, and Caddy route slices.
|
|
</p>
|
|
</div>
|
|
<Button
|
|
:as="Link"
|
|
:href="
|
|
route('gateway.routes.create', {
|
|
organisation: $page.props.organisation.id,
|
|
application: application.id,
|
|
environment: environment.id,
|
|
})
|
|
"
|
|
>
|
|
<PlusIcon class="size-4" />
|
|
Add route
|
|
</Button>
|
|
</div>
|
|
|
|
<div class="grid gap-4">
|
|
<Card v-for="routeAttachment in routes" :key="routeAttachment.id">
|
|
<CardHeader>
|
|
<div class="flex flex-wrap items-start justify-between gap-3">
|
|
<div>
|
|
<CardTitle>
|
|
{{ routeAttachment.service_slice?.config?.domain ?? "Unassigned domain" }}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{{ routeAttachment.service?.name }} ·
|
|
{{ routeAttachment.service_slice?.name ?? "route slice" }}
|
|
</CardDescription>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<Badge variant="outline">
|
|
{{ routeAttachment.service_slice?.config?.path_prefix ?? "/" }}
|
|
</Badge>
|
|
<Badge
|
|
:variant="
|
|
routeAttachment.service_slice?.config?.tls_enabled === false
|
|
? 'secondary'
|
|
: 'success'
|
|
"
|
|
>
|
|
TLS
|
|
{{
|
|
routeAttachment.service_slice?.config?.tls_enabled === false
|
|
? "disabled"
|
|
: "enabled"
|
|
}}
|
|
</Badge>
|
|
<Badge variant="outline">
|
|
{{
|
|
routeAttachment.service_slice?.config?.certificate_status ??
|
|
"pending"
|
|
}}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent class="flex flex-wrap gap-2">
|
|
<Button
|
|
:as="Link"
|
|
size="xs"
|
|
variant="secondary"
|
|
:href="
|
|
route('gateway.routes.edit', {
|
|
organisation: $page.props.organisation.id,
|
|
application: application.id,
|
|
environment: environment.id,
|
|
route: routeAttachment.id,
|
|
})
|
|
"
|
|
>
|
|
<PencilIcon class="size-4" />
|
|
Edit
|
|
</Button>
|
|
<Button size="xs" variant="ghost" @click="destroyRoute(routeAttachment)">
|
|
<Trash2Icon class="size-4" />
|
|
Remove
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card v-if="routes.length === 0" class="border-dashed">
|
|
<CardHeader>
|
|
<CardTitle>No gateway routes</CardTitle>
|
|
<CardDescription>
|
|
Add a route to connect a domain and path prefix to a Caddy gateway.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button
|
|
:as="Link"
|
|
variant="secondary"
|
|
:href="
|
|
route('gateway.routes.create', {
|
|
organisation: $page.props.organisation.id,
|
|
application: application.id,
|
|
environment: environment.id,
|
|
})
|
|
"
|
|
>
|
|
<PlusIcon class="size-4" />
|
|
Add route
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|