103 lines
3.7 KiB
Vue
103 lines
3.7 KiB
Vue
<script setup>
|
|
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 { AlertTriangleIcon } from 'lucide-vue-next';
|
|
|
|
const props = defineProps({
|
|
server: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
service: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
backupAvailable: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const form = useForm({
|
|
image_digest: props.service.available_image_digest ?? props.service.current_image_digest ?? '',
|
|
backup_requested: false,
|
|
});
|
|
</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="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>
|
|
|
|
<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"
|
|
@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>
|