150 lines
5.6 KiB
Vue
150 lines
5.6 KiB
Vue
<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, router, useForm } from "@inertiajs/vue3";
|
|
import { AlertTriangleIcon } from "lucide-vue-next";
|
|
|
|
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>
|
|
<Head :title="`Update ${service.name}`" />
|
|
|
|
<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,
|
|
}),
|
|
},
|
|
{
|
|
title: service.name,
|
|
},
|
|
{
|
|
title: 'Update',
|
|
},
|
|
]"
|
|
>
|
|
<div class="flex h-full flex-1 flex-col gap-4 p-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<div class="flex items-center gap-3">
|
|
<AlertTriangleIcon class="size-5 text-amber-600" />
|
|
<CardTitle>Stateful service update</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent class="space-y-4">
|
|
<div
|
|
class="rounded-md border border-amber-200 bg-amber-50 p-3 text-sm text-amber-950 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-100"
|
|
>
|
|
This update stops the running container, keeps the named Docker volume in
|
|
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
|
|
id="image_digest"
|
|
v-model="form.image_digest"
|
|
placeholder="sha256:..."
|
|
/>
|
|
<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"
|
|
type="checkbox"
|
|
class="size-4 rounded border-input"
|
|
/>
|
|
Run configured backup first
|
|
</label>
|
|
|
|
<div class="flex justify-end">
|
|
<Button
|
|
:disabled="form.processing || form.confirmation !== service.name"
|
|
@click="
|
|
form.post(
|
|
route('service-updates.store', {
|
|
organisation: $page.props.organisation.id,
|
|
server: server.id,
|
|
service: service.id,
|
|
}),
|
|
)
|
|
"
|
|
>
|
|
Create update operation
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|