wowowowowo

2026-05-28 15:15:41 +01:00
parent 8f603122e2
commit 5b977c1f41
129 changed files with 9943 additions and 722 deletions
--- a/resources/js/pages/operations/Show.vue
+++ b/resources/js/pages/operations/Show.vue
@@ -0,0 +1,116 @@
+<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>