harry/keystone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

arrayable enums, only use base ubuntu images, server controller tests, server frontend page fixes

Browse Source
This commit is contained in:
Harry (hjbdev)
2025-04-01 15:57:40 +00:00
parent d6a0fb3838
commit 4ff9b05cb4
20 changed files with 387 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
resources/js/pages/servers/Show.vue
View File

@@ -3,7 +3,9 @@ import { Badge } from '@/components/ui/badge';
import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import AppLayout from '@/layouts/AppLayout.vue';
import { Head } from '@inertiajs/vue3';
import { DatabaseIcon, Layers2Icon } from 'lucide-vue-next';
import { useCycleList, useInterval } from '@vueuse/core';
import { DatabaseIcon, Layers2Icon, LoaderCircleIcon } from 'lucide-vue-next';
import { watch } from 'vue';
const props = defineProps({
server: {
@@ -11,6 +13,20 @@ const props = defineProps({
required: true,
},
});
const { state: provisionMessage, next } = useCycleList([
'Provisioning your server...',
'Updating dependencies...',
'Tightening security...',
'Installing packages...',
'Configuring ssh...',
'Installing docker...',
]);
const { counter, reset, pause, resume } = useInterval(5000, { controls: true });
watch(counter, () => {
next();
});
</script>
<template>
@@ -42,24 +58,48 @@ const props = defineProps({
<div class="leading-none opacity-40">{{ server.ipv4 }} &bull; {{ server.ipv6 }}</div>
</div>
<div>
<h3 class="text-2xl font-semibold tracking-tight mb-3">Services</h3>
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<Card v-for="service in server.services" :key="service.id">
<CardHeader>
<div class="flex items-center gap-2">
<DatabaseIcon v-if="service.category === 'database'" class="size-5 opacity-50" />
<CardTitle>{{ service.name }}</CardTitle>
<Badge :variant="service.status === 'active' ? 'success' : 'secondary'">{{ service.status.replace('-', ' ') }}</Badge>
</div>
<CardDescription>
<span class="capitalize">{{ service.type }}</span> {{ service.version }} &bull;
<Layers2Icon class="inline-block size-4" /> {{ service.slices?.length }} slices
</CardDescription>
</CardHeader>
</Card>
<template v-if="server.status === 'active'">
<div>
<h3 class="mb-3 text-2xl font-semibold tracking-tight">Services</h3>
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<Card v-for="service in server.services" :key="service.id">
<CardHeader>
<div class="flex items-center gap-2">
<DatabaseIcon v-if="service.category === 'database'" class="size-5 opacity-50" />
<CardTitle>{{ service.name }}</CardTitle>
<Badge :variant="service.status === 'active' ? 'success' : 'secondary'">{{
service.status.replace('-', ' ')
}}</Badge>
</div>
<CardDescription>
<span class="capitalize">{{ service.type }}</span> {{ service.version }} &bull;
<Layers2Icon class="inline-block size-4" /> {{ service.slices?.length }} slices
</CardDescription>
</CardHeader>
</Card>
</div>
</div>
</div>
</template>
<template v-else-if="server.status === 'provisioning'">
<div class="flex items-center gap-4 py-6">
<div class="flex-0 flex-shrink">
<LoaderCircleIcon class="size-8 animate-spin" />
</div>
<div class="relative flex-grow">
<Transition
enter-active-class="transition duration-500 ease-in-out"
enter-from-class="opacity-0 -translate-x-4"
enter-to-class="opacity-100 translate-x-0"
leave-active-class="transition absolute left-0 duration-500 ease-in-out"
leave-from-class="opacity-100 translate-x-0"
leave-to-class="opacity-0 translate-x-4"
>
<div :key="provisionMessage">{{ provisionMessage }}</div>
</Transition>
</div>
</div>
</template>
<template> Something else </template>
<div v-if="$page.props.flash?.server_credentials" class="p-5">
<div class="mb-4 text-sm font-medium text-gray-900 dark:text-white">