117 lines
4.2 KiB
Vue
117 lines
4.2 KiB
Vue
<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, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import AppLayout from "@/layouts/AppLayout.vue";
|
|
import { Head, Link, router, usePoll } from "@inertiajs/vue3";
|
|
|
|
defineProps<{
|
|
operation: Record<string, any>;
|
|
}>();
|
|
|
|
const label = (value?: string | null): string => value?.replaceAll("_", " ").replaceAll("-", " ") ?? "";
|
|
|
|
usePoll(5000, {}, { keepAlive: true });
|
|
|
|
const retryOperation = (operation: Record<string, any>): void => {
|
|
router.post(
|
|
route("operations.retry", {
|
|
organisation: route().params.organisation,
|
|
operation: operation.id,
|
|
}),
|
|
);
|
|
};
|
|
|
|
const cancelOperation = (operation: Record<string, any>): void => {
|
|
router.post(
|
|
route("operations.cancel", {
|
|
organisation: route().params.organisation,
|
|
operation: operation.id,
|
|
}),
|
|
);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Head :title="`Operation ${operation.hash}`" />
|
|
|
|
<AppLayout
|
|
:breadcrumbs="[
|
|
{
|
|
title: 'Operations',
|
|
href: route('operations.index', { organisation: $page.props.organisation.id }),
|
|
},
|
|
{ title: operation.hash },
|
|
]"
|
|
>
|
|
<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>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<h2 class="text-3xl font-bold tracking-tight">{{ label(operation.kind) }}</h2>
|
|
<Badge variant="outline">{{ operation.hash }}</Badge>
|
|
<Badge :variant="operation.status === 'completed' ? 'success' : 'secondary'">
|
|
{{ label(operation.status) }}
|
|
</Badge>
|
|
</div>
|
|
<p class="mt-1 text-sm text-muted-foreground">
|
|
Started {{ operation.started_at ?? "not yet" }} · Finished
|
|
{{ operation.finished_at ?? "not yet" }}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
v-if="operation.status === 'failed'"
|
|
variant="secondary"
|
|
@click="retryOperation(operation)"
|
|
>
|
|
Re-run
|
|
</Button>
|
|
<Button
|
|
v-if="['pending', 'in-progress'].includes(operation.status)"
|
|
variant="secondary"
|
|
@click="cancelOperation(operation)"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
:as="Link"
|
|
variant="secondary"
|
|
:href="
|
|
route('operations.logs', {
|
|
organisation: $page.props.organisation.id,
|
|
operation: operation.id,
|
|
})
|
|
"
|
|
>
|
|
Download logs
|
|
</Button>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Target</CardTitle>
|
|
</CardHeader>
|
|
<CardContent class="grid gap-2 text-sm">
|
|
<div>{{ operation.target?.name ?? `#${operation.target_id}` }}</div>
|
|
<div class="text-muted-foreground">{{ operation.target_type }}</div>
|
|
<Link
|
|
v-if="operation.parent"
|
|
:href="
|
|
route('operations.show', {
|
|
organisation: $page.props.organisation.id,
|
|
operation: operation.parent.id,
|
|
})
|
|
"
|
|
class="hover:underline"
|
|
>
|
|
Parent: {{ operation.parent.hash }}
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<OperationTimeline :operations="[operation]" />
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|