136 lines
5.8 KiB
Vue
136 lines
5.8 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, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import AppLayout from "@/layouts/AppLayout.vue";
|
|
import { Head, Link } from "@inertiajs/vue3";
|
|
import { PlusIcon } from "lucide-vue-next";
|
|
|
|
defineProps<{
|
|
server: Record<string, any>;
|
|
service: Record<string, any>;
|
|
slices: Record<string, any>[];
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<Head :title="`${service.name} slices`" />
|
|
|
|
<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,
|
|
href: route('services.show', {
|
|
organisation: $page.props.organisation.id,
|
|
server: server.id,
|
|
service: service.id,
|
|
}),
|
|
},
|
|
{ title: 'Slices' },
|
|
]"
|
|
>
|
|
<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>
|
|
<h2 class="text-3xl font-bold tracking-tight">Slices</h2>
|
|
<p class="mt-1 text-sm text-muted-foreground">
|
|
{{ service.name }} · {{ slices.length }} slices
|
|
</p>
|
|
</div>
|
|
<Button
|
|
:as="Link"
|
|
:href="
|
|
route('service-slices.create', {
|
|
organisation: $page.props.organisation.id,
|
|
server: server.id,
|
|
service: service.id,
|
|
})
|
|
"
|
|
>
|
|
<PlusIcon class="size-4" />
|
|
Add slice
|
|
</Button>
|
|
</div>
|
|
|
|
<div class="grid gap-4">
|
|
<Card v-for="slice in slices" :key="slice.id">
|
|
<CardHeader>
|
|
<div class="flex flex-wrap items-start justify-between gap-3">
|
|
<div>
|
|
<CardTitle>
|
|
<Link
|
|
:href="
|
|
route('service-slices.show', {
|
|
organisation: $page.props.organisation.id,
|
|
server: server.id,
|
|
service: service.id,
|
|
slice: slice.id,
|
|
})
|
|
"
|
|
class="hover:underline"
|
|
>
|
|
{{ slice.name }}
|
|
</Link>
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{{ slice.environment?.application?.name ?? "Service" }}
|
|
<span v-if="slice.environment">/ {{ slice.environment.name }}</span>
|
|
</CardDescription>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<Badge variant="outline">{{ slice.type }}</Badge>
|
|
<Badge :variant="slice.status === 'active' ? 'success' : 'secondary'">
|
|
{{ slice.status }}
|
|
</Badge>
|
|
<Badge variant="outline">{{ slice.attachments.length }} attachments</Badge>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(18rem,24rem)]">
|
|
<pre class="overflow-x-auto rounded-md bg-muted p-3 text-xs">{{ JSON.stringify(slice.config ?? {}, null, 2) }}</pre>
|
|
<div>
|
|
<div class="mb-2 text-sm font-medium">Recent operations</div>
|
|
<OperationTimeline :operations="slice.operations" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card v-if="slices.length === 0" class="border-dashed">
|
|
<CardHeader>
|
|
<CardTitle>No slices</CardTitle>
|
|
<CardDescription>Create a slice for a service-level capability or managed attachment.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button
|
|
:as="Link"
|
|
variant="secondary"
|
|
:href="
|
|
route('service-slices.create', {
|
|
organisation: $page.props.organisation.id,
|
|
server: server.id,
|
|
service: service.id,
|
|
})
|
|
"
|
|
>
|
|
<PlusIcon class="size-4" />
|
|
Add slice
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|