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/service-slices/Show.vue
+++ b/resources/js/pages/service-slices/Show.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import OperationTimeline from "@/components/operations/OperationTimeline.vue";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import AppLayout from "@/layouts/AppLayout.vue";
+import { Head, Link } from "@inertiajs/vue3";
+
+defineProps<{
+    server: Record<string, any>;
+    service: Record<string, any>;
+    slice: Record<string, any>;
+}>();
+</script>
+
+<template>
+    <Head :title="slice.name" />
+
+    <AppLayout
+        :breadcrumbs="[
+            {
+                title: service.name,
+                href: route('services.show', {
+                    organisation: $page.props.organisation.id,
+                    server: server.id,
+                    service: service.id,
+                }),
+            },
+            { title: slice.name },
+        ]"
+    >
+        <div class="flex h-full flex-1 flex-col gap-4 p-4">
+            <div>
+                <div class="flex flex-wrap items-center gap-2">
+                    <h2 class="text-3xl font-bold tracking-tight">{{ slice.name }}</h2>
+                    <Badge variant="outline">{{ slice.type }}</Badge>
+                    <Badge :variant="slice.status === 'active' ? 'success' : 'secondary'">
+                        {{ slice.status }}
+                    </Badge>
+                </div>
+                <p class="mt-1 text-sm text-muted-foreground">
+                    {{ slice.environment?.name ?? "Service-level slice" }}
+                </p>
+            </div>
+
+            <div class="grid gap-4 lg:grid-cols-2">
+                <Card>
+                    <CardHeader>
+                        <CardTitle>Configuration</CardTitle>
+                        <CardDescription>Credentials are stored encrypted and not revealed here.</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <pre class="overflow-x-auto rounded-md bg-muted p-3 text-xs">{{ JSON.stringify(slice.config ?? {}, null, 2) }}</pre>
+                    </CardContent>
+                </Card>
+
+                <Card>
+                    <CardHeader>
+                        <CardTitle>Attachments</CardTitle>
+                    </CardHeader>
+                    <CardContent class="grid gap-2">
+                        <Link
+                            v-for="attachment in slice.attachments"
+                            :key="attachment.id"
+                            :href="
+                                route('environment-attachments.edit', {
+                                    organisation: $page.props.organisation.id,
+                                    application: attachment.environment.application.id,
+                                    environment: attachment.environment.id,
+                                    attachment: attachment.id,
+                                })
+                            "
+                            class="rounded-md border p-3 text-sm hover:bg-muted/50"
+                        >
+                            <div class="font-medium">{{ attachment.role.replace('_', ' ') }}</div>
+                            <div class="text-muted-foreground">
+                                {{ attachment.environment.name }} ·
+                                {{ attachment.env_prefix ?? "default prefix" }}
+                            </div>
+                        </Link>
+                        <div
+                            v-if="slice.attachments.length === 0"
+                            class="rounded-md border border-dashed p-3 text-sm text-muted-foreground"
+                        >
+                            No attachments use this slice.
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+
+            <Card>
+                <CardHeader>
+                    <CardTitle>Slice Operations</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <OperationTimeline :operations="slice.operations" />
+                </CardContent>
+            </Card>
+        </div>
+    </AppLayout>
+</template>