wowowowowo
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import InputError from "@/components/InputError.vue";
|
||||
import RadioButton from "@/components/RadioButton.vue";
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -18,9 +18,9 @@ import {
|
||||
} from "lucide-vue-next";
|
||||
import { watch } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
services: Object,
|
||||
});
|
||||
const props = defineProps<{
|
||||
services: Record<string, Record<string, string[]>>;
|
||||
}>();
|
||||
|
||||
const form = useForm({
|
||||
name: null,
|
||||
@@ -29,7 +29,16 @@ const form = useForm({
|
||||
version: null,
|
||||
});
|
||||
|
||||
function getIcon(category) {
|
||||
const deployPolicyDefaults = {
|
||||
[ServiceCategory.APPLICATION]: "with_environment",
|
||||
[ServiceCategory.DATABASE]: "dependency_only",
|
||||
[ServiceCategory.CACHE]: "dependency_only",
|
||||
[ServiceCategory.GATEWAY]: "manual_or_on_route_change",
|
||||
[ServiceCategory.STORAGE]: "manual",
|
||||
[ServiceCategory.BUILDER]: "manual",
|
||||
};
|
||||
|
||||
function getIcon(category: string) {
|
||||
switch (category) {
|
||||
case ServiceCategory.DATABASE:
|
||||
return DatabaseIcon;
|
||||
@@ -46,7 +55,7 @@ function getIcon(category) {
|
||||
}
|
||||
}
|
||||
|
||||
function generateServiceName() {
|
||||
function generateServiceName(): string {
|
||||
let str = "";
|
||||
|
||||
if (form.category) {
|
||||
@@ -89,27 +98,41 @@ watch([() => form.category, () => form.type, () => form.version], () => {
|
||||
]"
|
||||
>
|
||||
<div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
|
||||
<div class="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div
|
||||
class="grid gap-2 md:grid-cols-2 lg:grid-cols-3"
|
||||
role="radiogroup"
|
||||
aria-label="Service category"
|
||||
>
|
||||
<RadioButton
|
||||
v-for="(category, categoryKey) in ServiceCategory"
|
||||
:key="category"
|
||||
v-model="form.category"
|
||||
:value="category"
|
||||
name="category"
|
||||
class="flex gap-3 py-3"
|
||||
:described-by="`service-category-${category}-description`"
|
||||
>
|
||||
<component :is="getIcon(category)" class="size-5" />
|
||||
<div>
|
||||
<h4 class="mb-1 text-lg font-semibold leading-none tracking-tighter">
|
||||
{{ category }}
|
||||
</h4>
|
||||
<p class="text-sm">{{ serviceCategoryDescriptions[categoryKey] }}</p>
|
||||
<p :id="`service-category-${category}-description`" class="text-sm">
|
||||
{{ serviceCategoryDescriptions[categoryKey] }}
|
||||
</p>
|
||||
</div>
|
||||
</RadioButton>
|
||||
</div>
|
||||
|
||||
<div v-if="form.category" class="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div
|
||||
v-if="form.category"
|
||||
class="grid gap-2 md:grid-cols-2 lg:grid-cols-3"
|
||||
role="radiogroup"
|
||||
aria-label="Service type"
|
||||
>
|
||||
<RadioButton
|
||||
v-for="service in services[form.category]"
|
||||
v-for="service in services[form.category] ?? []"
|
||||
:key="service.name"
|
||||
v-model="form.type"
|
||||
:value="service.name"
|
||||
name="type"
|
||||
@@ -119,11 +142,23 @@ watch([() => form.category, () => form.type, () => form.version], () => {
|
||||
{{ service.name }}
|
||||
</h4>
|
||||
</RadioButton>
|
||||
<div
|
||||
v-if="!services[form.category]"
|
||||
class="rounded-md border border-dashed p-4 text-sm text-muted-foreground md:col-span-2 lg:col-span-3"
|
||||
>
|
||||
No service drivers are configured for {{ form.category }} services yet.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="form.type" class="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div
|
||||
v-if="form.type"
|
||||
class="grid gap-2 md:grid-cols-2 lg:grid-cols-3"
|
||||
role="radiogroup"
|
||||
aria-label="Service version"
|
||||
>
|
||||
<RadioButton
|
||||
v-for="(version, versionKey) in services[form.category][form.type].versions"
|
||||
:key="versionKey"
|
||||
v-model="form.version"
|
||||
:value="versionKey"
|
||||
name="version"
|
||||
@@ -135,6 +170,10 @@ watch([() => form.category, () => form.type, () => form.version], () => {
|
||||
</RadioButton>
|
||||
</div>
|
||||
|
||||
<div v-if="form.category" class="rounded-md border bg-muted/30 p-3 text-sm">
|
||||
Default deploy policy: {{ deployPolicyDefaults[form.category]?.replace("_", " ") }}
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="name">Name</Label>
|
||||
<Input
|
||||
|
||||
@@ -1,22 +1,50 @@
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import InputError from "@/components/InputError.vue";
|
||||
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, useForm } from "@inertiajs/vue3";
|
||||
import { Head, router, useForm } from "@inertiajs/vue3";
|
||||
|
||||
const props = defineProps({
|
||||
server: { type: Object, required: true },
|
||||
service: { type: Object, required: true },
|
||||
});
|
||||
const props = defineProps<{
|
||||
server: Record<string, any>;
|
||||
service: Record<string, any>;
|
||||
deployPolicies: string[];
|
||||
}>();
|
||||
|
||||
const serviceConfig = props.service.config ?? {};
|
||||
|
||||
const form = useForm({
|
||||
name: props.service.name,
|
||||
desired_replicas: props.service.desired_replicas,
|
||||
default_cpu_limit: props.service.default_cpu_limit,
|
||||
default_memory_limit_mb: props.service.default_memory_limit_mb,
|
||||
deploy_policy: props.service.deploy_policy,
|
||||
version_track: props.service.version_track,
|
||||
available_image_digest: props.service.available_image_digest ?? "",
|
||||
process_roles: props.service.process_roles?.join(", ") ?? "",
|
||||
migration_mode: serviceConfig.migration_mode ?? "",
|
||||
migration_timing: serviceConfig.migration_timing ?? "",
|
||||
migration_command: serviceConfig.migration_command ?? "",
|
||||
health_path: serviceConfig.health_path ?? "/up",
|
||||
backup_enabled: Boolean(serviceConfig.backup_enabled),
|
||||
backup_command: serviceConfig.backup_command ?? "",
|
||||
});
|
||||
|
||||
const destroyService = (): void => {
|
||||
if (!window.confirm(`Delete ${props.service.name}?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
router.delete(
|
||||
route("services.destroy", {
|
||||
organisation: props.server.organisation_id,
|
||||
server: props.server.id,
|
||||
service: props.service.id,
|
||||
}),
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -47,7 +75,7 @@ const form = useForm({
|
||||
]"
|
||||
>
|
||||
<form
|
||||
class="flex h-full max-w-2xl flex-1 flex-col gap-5 p-4"
|
||||
class="flex h-full max-w-4xl flex-1 flex-col gap-5 p-4"
|
||||
@submit.prevent="
|
||||
form.put(
|
||||
route('services.update', {
|
||||
@@ -58,52 +86,161 @@ const form = useForm({
|
||||
)
|
||||
"
|
||||
>
|
||||
<h2 class="text-3xl font-bold tracking-tight">Edit {{ service.name }}</h2>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="name">Name</Label>
|
||||
<Input id="name" v-model="form.name" type="text" required />
|
||||
<InputError :message="form.errors.name" />
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold tracking-tight">Edit {{ service.name }}</h2>
|
||||
<p class="mt-1 text-sm text-muted-foreground">
|
||||
Deployment, runtime, migration, scheduler role, and health-check defaults.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<div class="grid gap-2">
|
||||
<Label for="desired_replicas">Replicas</Label>
|
||||
<Input
|
||||
id="desired_replicas"
|
||||
v-model="form.desired_replicas"
|
||||
type="number"
|
||||
min="0"
|
||||
max="25"
|
||||
/>
|
||||
<InputError :message="form.errors.desired_replicas" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="default_cpu_limit">CPU</Label>
|
||||
<Input
|
||||
id="default_cpu_limit"
|
||||
v-model="form.default_cpu_limit"
|
||||
type="number"
|
||||
min="0.125"
|
||||
max="64"
|
||||
step="0.125"
|
||||
/>
|
||||
<InputError :message="form.errors.default_cpu_limit" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="default_memory_limit_mb">Memory MB</Label>
|
||||
<Input
|
||||
id="default_memory_limit_mb"
|
||||
v-model="form.default_memory_limit_mb"
|
||||
type="number"
|
||||
min="64"
|
||||
max="1048576"
|
||||
/>
|
||||
<InputError :message="form.errors.default_memory_limit_mb" />
|
||||
</div>
|
||||
</div>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Runtime</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-4">
|
||||
<div class="grid gap-2">
|
||||
<Label for="name">Name</Label>
|
||||
<Input id="name" v-model="form.name" type="text" required />
|
||||
<InputError :message="form.errors.name" />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<div class="grid gap-2">
|
||||
<Label for="desired_replicas">Replicas</Label>
|
||||
<Input
|
||||
id="desired_replicas"
|
||||
v-model="form.desired_replicas"
|
||||
type="number"
|
||||
min="0"
|
||||
max="25"
|
||||
/>
|
||||
<InputError :message="form.errors.desired_replicas" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="default_cpu_limit">CPU</Label>
|
||||
<Input
|
||||
id="default_cpu_limit"
|
||||
v-model="form.default_cpu_limit"
|
||||
type="number"
|
||||
min="0.125"
|
||||
max="64"
|
||||
step="0.125"
|
||||
/>
|
||||
<InputError :message="form.errors.default_cpu_limit" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="default_memory_limit_mb">Memory MB</Label>
|
||||
<Input
|
||||
id="default_memory_limit_mb"
|
||||
v-model="form.default_memory_limit_mb"
|
||||
type="number"
|
||||
min="64"
|
||||
max="1048576"
|
||||
/>
|
||||
<InputError :message="form.errors.default_memory_limit_mb" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Deployment</CardTitle>
|
||||
<CardDescription>Stateful services can track available image updates.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-4 md:grid-cols-2">
|
||||
<div class="grid gap-2">
|
||||
<Label for="deploy_policy">Deploy policy</Label>
|
||||
<select
|
||||
id="deploy_policy"
|
||||
v-model="form.deploy_policy"
|
||||
class="h-9 rounded-md border border-input bg-transparent px-3 text-sm"
|
||||
>
|
||||
<option v-for="policy in deployPolicies" :key="policy" :value="policy">
|
||||
{{ policy.replace("_", " ") }}
|
||||
</option>
|
||||
</select>
|
||||
<InputError :message="form.errors.deploy_policy" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="version_track">Version track</Label>
|
||||
<Input id="version_track" v-model="form.version_track" />
|
||||
<InputError :message="form.errors.version_track" />
|
||||
</div>
|
||||
<div class="grid gap-2 md:col-span-2">
|
||||
<Label for="available_image_digest">Available image digest</Label>
|
||||
<Input id="available_image_digest" v-model="form.available_image_digest" />
|
||||
<InputError :message="form.errors.available_image_digest" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Roles, Migrations & Health</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-4 md:grid-cols-2">
|
||||
<div class="grid gap-2 md:col-span-2">
|
||||
<Label for="process_roles">Process roles</Label>
|
||||
<Input id="process_roles" v-model="form.process_roles" placeholder="web, scheduler" />
|
||||
<InputError :message="form.errors.process_roles" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="migration_mode">Migration mode</Label>
|
||||
<Input id="migration_mode" v-model="form.migration_mode" />
|
||||
<InputError :message="form.errors.migration_mode" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="migration_timing">Migration timing</Label>
|
||||
<Input id="migration_timing" v-model="form.migration_timing" />
|
||||
<InputError :message="form.errors.migration_timing" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="migration_command">Migration command</Label>
|
||||
<Input id="migration_command" v-model="form.migration_command" />
|
||||
<InputError :message="form.errors.migration_command" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="health_path">Health path</Label>
|
||||
<Input id="health_path" v-model="form.health_path" />
|
||||
<InputError :message="form.errors.health_path" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Backups</CardTitle>
|
||||
<CardDescription>
|
||||
Enabled backups can be run before guided stateful service updates.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-4">
|
||||
<label class="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
v-model="form.backup_enabled"
|
||||
type="checkbox"
|
||||
class="rounded border-input"
|
||||
/>
|
||||
Enable pre-update backup option
|
||||
</label>
|
||||
<InputError :message="form.errors.backup_enabled" />
|
||||
<div class="grid gap-2">
|
||||
<Label for="backup_command">Backup command</Label>
|
||||
<Input
|
||||
id="backup_command"
|
||||
v-model="form.backup_command"
|
||||
placeholder="pg_dump --format=custom app > /home/keystone/backups/pre-update.dump"
|
||||
/>
|
||||
<InputError :message="form.errors.backup_command" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div class="flex flex-wrap justify-between gap-2">
|
||||
<Button type="button" variant="destructive" @click="destroyService">
|
||||
Delete service
|
||||
</Button>
|
||||
<Button type="submit" :disabled="form.processing">Save</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,15 +1,18 @@
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import OperationTimeline from "@/components/operations/OperationTimeline.vue";
|
||||
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 } from "@inertiajs/vue3";
|
||||
import { PencilIcon } from "lucide-vue-next";
|
||||
import { PencilIcon, PlusIcon } from "lucide-vue-next";
|
||||
|
||||
const props = defineProps({
|
||||
server: { type: Object, required: true },
|
||||
service: { type: Object, required: true },
|
||||
});
|
||||
defineProps<{
|
||||
server?: Record<string, any> | null;
|
||||
service: Record<string, any>;
|
||||
environment?: Record<string, any> | null;
|
||||
application?: Record<string, any> | null;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -17,17 +20,41 @@ const props = defineProps({
|
||||
|
||||
<AppLayout
|
||||
:breadcrumbs="[
|
||||
{
|
||||
title: 'Servers',
|
||||
href: route('servers.index', { organisation: $page.props.organisation.id }),
|
||||
},
|
||||
{
|
||||
title: server.name,
|
||||
href: route('servers.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
server: server.id,
|
||||
}),
|
||||
},
|
||||
...(application && environment
|
||||
? [
|
||||
{
|
||||
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: 'Servers',
|
||||
href: route('servers.index', { organisation: $page.props.organisation.id }),
|
||||
},
|
||||
{
|
||||
title: server?.name ?? 'Server',
|
||||
href: route('servers.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
server: server?.id,
|
||||
}),
|
||||
},
|
||||
]),
|
||||
{ title: service.name },
|
||||
]"
|
||||
>
|
||||
@@ -43,6 +70,7 @@ const props = defineProps({
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
v-if="server"
|
||||
:as="Link"
|
||||
variant="secondary"
|
||||
:href="
|
||||
@@ -70,7 +98,21 @@ const props = defineProps({
|
||||
:key="replica.id"
|
||||
class="rounded-md border p-3 text-sm"
|
||||
>
|
||||
<div class="font-medium">{{ replica.container_name }}</div>
|
||||
<Link
|
||||
v-if="server"
|
||||
:href="
|
||||
route('service-replicas.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
server: server?.id,
|
||||
service: service.id,
|
||||
replica: replica.id,
|
||||
})
|
||||
"
|
||||
class="font-medium hover:underline"
|
||||
>
|
||||
{{ replica.container_name }}
|
||||
</Link>
|
||||
<div v-else class="font-medium">{{ replica.container_name }}</div>
|
||||
<div class="text-muted-foreground">
|
||||
{{ replica.status }} · {{ replica.health_status }}
|
||||
</div>
|
||||
@@ -80,7 +122,40 @@ const props = defineProps({
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Slices</CardTitle>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<CardTitle>Slices</CardTitle>
|
||||
<div v-if="server" class="flex items-center gap-2">
|
||||
<Button
|
||||
:as="Link"
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
:href="
|
||||
route('service-slices.index', {
|
||||
organisation: $page.props.organisation.id,
|
||||
server: server?.id,
|
||||
service: service.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
View all
|
||||
</Button>
|
||||
<Button
|
||||
:as="Link"
|
||||
size="xs"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('service-slices.create', {
|
||||
organisation: $page.props.organisation.id,
|
||||
server: server?.id,
|
||||
service: service.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
<PlusIcon class="size-4" />
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-2">
|
||||
<div
|
||||
@@ -88,7 +163,21 @@ const props = defineProps({
|
||||
:key="slice.id"
|
||||
class="rounded-md border p-3 text-sm"
|
||||
>
|
||||
<div class="font-medium">{{ slice.name }}</div>
|
||||
<Link
|
||||
v-if="server"
|
||||
:href="
|
||||
route('service-slices.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
server: server?.id,
|
||||
service: service.id,
|
||||
slice: slice.id,
|
||||
})
|
||||
"
|
||||
class="font-medium hover:underline"
|
||||
>
|
||||
{{ slice.name }}
|
||||
</Link>
|
||||
<div v-else class="font-medium">{{ slice.name }}</div>
|
||||
<div class="text-muted-foreground">{{ slice.type }}</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
@@ -98,20 +187,58 @@ const props = defineProps({
|
||||
<CardHeader>
|
||||
<CardTitle>Operations</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<OperationTimeline :operations="service.operations" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 lg:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Endpoints</CardTitle>
|
||||
<CardDescription>Network endpoints registered for this service.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-2">
|
||||
<div
|
||||
v-for="operation in service.operations"
|
||||
:key="operation.id"
|
||||
class="flex items-center justify-between rounded-md border p-3 text-sm"
|
||||
v-for="endpoint in service.endpoints"
|
||||
:key="endpoint.id"
|
||||
class="rounded-md border p-3 text-sm"
|
||||
>
|
||||
<span>{{ operation.kind.replace("_", " ") }}</span>
|
||||
<Badge
|
||||
:variant="
|
||||
operation.status === 'completed' ? 'success' : 'secondary'
|
||||
"
|
||||
>{{ operation.status.replace("_", " ") }}</Badge
|
||||
>
|
||||
<div class="font-medium">
|
||||
{{ endpoint.scope }} · {{ endpoint.hostname }}:{{ endpoint.port }}
|
||||
</div>
|
||||
<div class="text-muted-foreground">
|
||||
{{ endpoint.ip_address ?? "no IP" }} · priority
|
||||
{{ endpoint.priority }} · {{ endpoint.health_status }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="service.endpoints.length === 0"
|
||||
class="rounded-md border border-dashed p-3 text-sm text-muted-foreground"
|
||||
>
|
||||
No endpoints registered.
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Compose</CardTitle>
|
||||
<CardDescription>Generated artifact location on the target server.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<pre class="overflow-x-auto rounded-md bg-muted p-3 text-xs">/home/keystone/services/{{ service.id }}/compose.yml</pre>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card v-if="service.type === 'caddy'">
|
||||
<CardHeader>
|
||||
<CardTitle>Caddyfile</CardTitle>
|
||||
<CardDescription>Gateway route configuration generated on the server.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<pre class="overflow-x-auto rounded-md bg-muted p-3 text-xs">/home/keystone/gateway/Caddyfile</pre>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@@ -1,32 +1,40 @@
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import InputError from "@/components/InputError.vue";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, 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, useForm } from "@inertiajs/vue3";
|
||||
import { Head, router, useForm } from "@inertiajs/vue3";
|
||||
import { AlertTriangleIcon } from "lucide-vue-next";
|
||||
|
||||
const props = defineProps({
|
||||
server: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
service: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
backupAvailable: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const props = defineProps<{
|
||||
server: Record<string, any>;
|
||||
service: Record<string, any>;
|
||||
backupAvailable: boolean;
|
||||
}>();
|
||||
|
||||
const form = useForm({
|
||||
image_digest: props.service.available_image_digest ?? props.service.current_image_digest ?? "",
|
||||
backup_requested: false,
|
||||
confirmation: "",
|
||||
});
|
||||
|
||||
const useAvailableDigest = () => {
|
||||
form.image_digest = props.service.available_image_digest ?? form.image_digest;
|
||||
};
|
||||
|
||||
const resolveLatestDigest = (): void => {
|
||||
router.post(
|
||||
route("service-updates.resolve", {
|
||||
organisation: route().params.organisation,
|
||||
server: props.server.id,
|
||||
service: props.service.id,
|
||||
}),
|
||||
{},
|
||||
{ preserveScroll: true },
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -71,6 +79,28 @@ const form = useForm({
|
||||
place, starts the new image, and then runs a health check.
|
||||
</div>
|
||||
|
||||
<div class="rounded-md border bg-muted/30 p-3 text-sm">
|
||||
Latest known digest:
|
||||
<code>{{ service.available_image_digest ?? "not resolved yet" }}</code>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="secondary"
|
||||
class="ml-2"
|
||||
@click="resolveLatestDigest"
|
||||
>
|
||||
Resolve latest minor
|
||||
</Button>
|
||||
<Button
|
||||
v-if="service.available_image_digest"
|
||||
size="xs"
|
||||
variant="secondary"
|
||||
class="ml-2"
|
||||
@click="useAvailableDigest"
|
||||
>
|
||||
Use latest known
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="image_digest">Image digest</Label>
|
||||
<Input
|
||||
@@ -81,6 +111,12 @@ const form = useForm({
|
||||
<InputError :message="form.errors.image_digest" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="confirmation">Type {{ service.name }} to confirm downtime</Label>
|
||||
<Input id="confirmation" v-model="form.confirmation" />
|
||||
<InputError :message="form.errors.confirmation" />
|
||||
</div>
|
||||
|
||||
<label v-if="backupAvailable" class="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
v-model="form.backup_requested"
|
||||
@@ -92,7 +128,7 @@ const form = useForm({
|
||||
|
||||
<div class="flex justify-end">
|
||||
<Button
|
||||
:disabled="form.processing"
|
||||
:disabled="form.processing || form.confirmation !== service.name"
|
||||
@click="
|
||||
form.post(
|
||||
route('service-updates.store', {
|
||||
|
||||
Reference in New Issue
Block a user