arrayable enums, only use base ubuntu images, server controller tests, server frontend page fixes
This commit is contained in:
@@ -33,25 +33,62 @@ const serverProviders = [
|
||||
watch(
|
||||
() => form.provider,
|
||||
(provider) => {
|
||||
console.log(provider);
|
||||
loadLocations();
|
||||
},
|
||||
);
|
||||
|
||||
if (form.provider && !props.locations) {
|
||||
router.reload({
|
||||
only: ['locations'],
|
||||
data: {
|
||||
provider: form.provider,
|
||||
},
|
||||
async: true,
|
||||
});
|
||||
watch (
|
||||
() => form.location,
|
||||
(location) => {
|
||||
loadServerTypes();
|
||||
}
|
||||
)
|
||||
|
||||
loadLocations();
|
||||
loadServerTypes();
|
||||
|
||||
function loadLocations() {
|
||||
if (form.provider && !props.locations) {
|
||||
router.reload({
|
||||
only: ['locations'],
|
||||
data: {
|
||||
provider: form.provider,
|
||||
},
|
||||
async: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function loadServerTypes() {
|
||||
if (form.location && !props.serverTypes) {
|
||||
router.reload({
|
||||
only: ['serverTypes', 'images'],
|
||||
data: {
|
||||
provider: form.provider,
|
||||
location: form.location,
|
||||
},
|
||||
async: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Create Server" />
|
||||
|
||||
<AppLayout>
|
||||
<AppLayout
|
||||
:breadcrumbs="[
|
||||
{
|
||||
title: 'Servers',
|
||||
href: route('servers.index', {
|
||||
organisation: $page.props.organisation.id,
|
||||
}),
|
||||
},
|
||||
{
|
||||
title: 'Create',
|
||||
}
|
||||
]"
|
||||
>
|
||||
<div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<RadioButton
|
||||
@@ -65,17 +102,11 @@ if (form.provider && !props.locations) {
|
||||
</RadioButton>
|
||||
</div>
|
||||
<div v-if="form.provider" class="flex flex-wrap gap-2">
|
||||
<RadioButton
|
||||
v-for="location in locations"
|
||||
v-model="form.location"
|
||||
:value="location.id"
|
||||
:disabled="location.disabled"
|
||||
name="location"
|
||||
>
|
||||
<RadioButton v-for="location in locations" v-model="form.location" :value="location.id" :disabled="location.disabled" name="location">
|
||||
{{ location.city }}
|
||||
</RadioButton>
|
||||
</div>
|
||||
<div v-if="form.location" class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
|
||||
<div v-if="form.location" class="grid gap-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<RadioButton
|
||||
v-for="serverType in serverTypes?.sort((a, b) => a.cores - b.cores) ?? []"
|
||||
v-model="form.server_type"
|
||||
@@ -84,21 +115,17 @@ if (form.provider && !props.locations) {
|
||||
name="server-type"
|
||||
>
|
||||
<h5 class="text-lg font-semibold uppercase tracking-tight">{{ serverType.name }}</h5>
|
||||
<p class="text-sm opacity-60">{{ serverType.cores }} cores • {{ serverType.memory }} GB RAM • {{ serverType.disk }} GB disk</p>
|
||||
<p class="text-sm opacity-60">
|
||||
{{ serverType.cores }} cores • {{ serverType.memory }} GB RAM • {{ serverType.disk }} GB disk
|
||||
</p>
|
||||
</RadioButton>
|
||||
</div>
|
||||
<div v-if="form.server_type" class="flex gap-2 flex-wrap">
|
||||
<RadioButton
|
||||
v-for="image in images"
|
||||
v-model="form.image"
|
||||
:value="image.id"
|
||||
:disabled="image.disabled"
|
||||
name="image"
|
||||
>
|
||||
<div v-if="form.server_type" class="flex flex-wrap gap-2">
|
||||
<RadioButton v-for="image in images" v-model="form.image" :value="image.id" :disabled="image.disabled" name="image">
|
||||
<h5 class="text-lg font-semibold tracking-tight">{{ image.name }}</h5>
|
||||
</RadioButton>
|
||||
</div>
|
||||
<div class="flex justify-end items-center">
|
||||
<div class="flex items-center justify-end">
|
||||
<Button @click="form.post(route('servers.store', { organisation: $page.props.organisation.id }))">Submit</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
<script setup>
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import AppLayout from '@/layouts/AppLayout.vue';
|
||||
import { Head, Link } from '@inertiajs/vue3';
|
||||
|
||||
const props = defineProps({
|
||||
servers: {
|
||||
type: [Array, null],
|
||||
type: [Object, null],
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
@@ -14,27 +16,42 @@ const props = defineProps({
|
||||
<template>
|
||||
<Head title="Dashboard" />
|
||||
|
||||
<AppLayout :breadcrumbs="[
|
||||
{
|
||||
title: 'Servers',
|
||||
href: route('servers.index', {
|
||||
organisation: $page.props.organisation.id,
|
||||
}),
|
||||
},
|
||||
]">
|
||||
<AppLayout
|
||||
:breadcrumbs="[
|
||||
{
|
||||
title: 'Servers',
|
||||
href: route('servers.index', {
|
||||
organisation: $page.props.organisation.id,
|
||||
}),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="flex justify-between items-center gap-3 p-4">
|
||||
<h2 class="text-3xl font-bold tracking-tight">Servers</h2>
|
||||
<div>
|
||||
<Button :as="Link" :href="route('servers.create', {
|
||||
organisation: $page.props.organisation.id,
|
||||
})">Create</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-4 rounded-xl p-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Card v-for="server in servers.data" :key="`server{$servers.id}`" class="w-full relative">
|
||||
<Card v-for="server in servers.data" :key="`server{$servers.id}`" class="relative w-full">
|
||||
<CardHeader>
|
||||
<CardTitle>{{ server.name }}</CardTitle>
|
||||
<CardDescription
|
||||
><span class="inline-block rounded-md bg-green-200 px-2 text-xs uppercase text-green-800">{{ server.status }}</span> •
|
||||
<CardDescription>
|
||||
<Badge :variant="server.status === 'active' ? 'success' : 'secondary'">{{ server.status.replace('-', ' ') }}</Badge> •
|
||||
{{ server.ipv4 || server.ipv6 }}</CardDescription
|
||||
>
|
||||
</CardHeader>
|
||||
<Link :href="route('servers.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
server: server.id,
|
||||
})" class="absolute inset-0"></Link>
|
||||
<Link
|
||||
:href="
|
||||
route('servers.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
server: server.id,
|
||||
})
|
||||
"
|
||||
class="absolute inset-0"
|
||||
></Link>
|
||||
</Card>
|
||||
|
||||
<div>@todo pagination</div>
|
||||
|
||||
@@ -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 }} • {{ 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 }} •
|
||||
<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 }} •
|
||||
<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">
|
||||
|
||||
Reference in New Issue
Block a user