wowowowowo
This commit is contained in:
108
resources/js/pages/service-slices/Create.vue
Normal file
108
resources/js/pages/service-slices/Create.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<script setup lang="ts">
|
||||
import InputError from "@/components/InputError.vue";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import AppLayout from "@/layouts/AppLayout.vue";
|
||||
import { Head, useForm } from "@inertiajs/vue3";
|
||||
|
||||
defineProps<{
|
||||
server: Record<string, any>;
|
||||
service: Record<string, any>;
|
||||
environments: Record<string, any>[];
|
||||
}>();
|
||||
|
||||
const form = useForm({
|
||||
name: "",
|
||||
type: "manual",
|
||||
environment_id: "",
|
||||
status: "pending",
|
||||
config: "{}",
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Create Slice" />
|
||||
|
||||
<AppLayout
|
||||
:breadcrumbs="[
|
||||
{
|
||||
title: service.name,
|
||||
href: route('services.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
server: server.id,
|
||||
service: service.id,
|
||||
}),
|
||||
},
|
||||
{ title: 'Create Slice' },
|
||||
]"
|
||||
>
|
||||
<form
|
||||
class="flex h-full max-w-2xl flex-1 flex-col gap-5 p-4"
|
||||
@submit.prevent="
|
||||
form.post(
|
||||
route('service-slices.store', {
|
||||
organisation: $page.props.organisation.id,
|
||||
server: server.id,
|
||||
service: service.id,
|
||||
}),
|
||||
)
|
||||
"
|
||||
>
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold tracking-tight">Create Slice</h2>
|
||||
<p class="mt-1 text-sm text-muted-foreground">
|
||||
Advanced manual slice creation for service-level resources.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="name">Name</Label>
|
||||
<Input id="name" v-model="form.name" required />
|
||||
<InputError :message="form.errors.name" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<div class="grid gap-2">
|
||||
<Label for="type">Type</Label>
|
||||
<Input id="type" v-model="form.type" required />
|
||||
<InputError :message="form.errors.type" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="status">Status</Label>
|
||||
<Input id="status" v-model="form.status" required />
|
||||
<InputError :message="form.errors.status" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="environment_id">Environment</Label>
|
||||
<select
|
||||
id="environment_id"
|
||||
v-model="form.environment_id"
|
||||
class="h-9 rounded-md border border-input bg-transparent px-3 text-sm"
|
||||
>
|
||||
<option value="">Service-level</option>
|
||||
<option v-for="environment in environments" :key="environment.id" :value="environment.id">
|
||||
{{ environment.name }}
|
||||
</option>
|
||||
</select>
|
||||
<InputError :message="form.errors.environment_id" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="config">Config JSON</Label>
|
||||
<textarea
|
||||
id="config"
|
||||
v-model="form.config"
|
||||
class="min-h-28 rounded-md border border-input bg-transparent px-3 py-2 text-sm"
|
||||
></textarea>
|
||||
<InputError :message="form.errors.config" />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<Button type="submit" :disabled="form.processing">Create slice</Button>
|
||||
</div>
|
||||
</form>
|
||||
</AppLayout>
|
||||
</template>
|
||||
135
resources/js/pages/service-slices/Index.vue
Normal file
135
resources/js/pages/service-slices/Index.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<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>
|
||||
100
resources/js/pages/service-slices/Show.vue
Normal file
100
resources/js/pages/service-slices/Show.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user