wowowowowo
This commit is contained in:
@@ -1,16 +1,16 @@
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import RadioButton from "@/components/RadioButton.vue";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import AppLayout from "@/layouts/AppLayout.vue";
|
||||
import { Head, router, useForm } from "@inertiajs/vue3";
|
||||
import { watch } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
providers: Array,
|
||||
locations: Array,
|
||||
serverTypes: Array,
|
||||
images: Array,
|
||||
});
|
||||
const props = defineProps<{
|
||||
providers?: Record<string, any>[];
|
||||
locations?: Record<string, any>[];
|
||||
serverTypes?: Record<string, any>[];
|
||||
images?: Record<string, any>[];
|
||||
}>();
|
||||
|
||||
const form = useForm({
|
||||
provider: null,
|
||||
@@ -30,7 +30,7 @@ watch(
|
||||
watch(
|
||||
() => form.location,
|
||||
(location) => {
|
||||
const selectedLoc = props.locations.find((loc) => loc.id === location)?.networkZone;
|
||||
const selectedLoc = props.locations?.find((loc) => loc.id === location)?.networkZone;
|
||||
form.network_zone = selectedLoc;
|
||||
loadServerTypes();
|
||||
},
|
||||
@@ -82,9 +82,10 @@ function loadServerTypes() {
|
||||
]"
|
||||
>
|
||||
<div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div class="flex flex-wrap gap-2" role="radiogroup" aria-label="Cloud provider">
|
||||
<RadioButton
|
||||
v-for="provider in providers"
|
||||
:key="provider.id"
|
||||
v-model="form.provider"
|
||||
:value="provider.id"
|
||||
:disabled="provider.disabled"
|
||||
@@ -93,9 +94,15 @@ function loadServerTypes() {
|
||||
{{ provider.name }}
|
||||
</RadioButton>
|
||||
</div>
|
||||
<div v-if="form.provider" class="flex flex-wrap gap-2">
|
||||
<div
|
||||
v-if="form.provider"
|
||||
class="flex flex-wrap gap-2"
|
||||
role="radiogroup"
|
||||
aria-label="Server location"
|
||||
>
|
||||
<RadioButton
|
||||
v-for="location in locations"
|
||||
:key="location.id"
|
||||
v-model="form.location"
|
||||
:value="location.id"
|
||||
:disabled="location.disabled"
|
||||
@@ -107,26 +114,36 @@ function loadServerTypes() {
|
||||
<div
|
||||
v-if="form.location"
|
||||
class="grid gap-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
|
||||
role="radiogroup"
|
||||
aria-label="Server type"
|
||||
>
|
||||
<RadioButton
|
||||
v-for="serverType in serverTypes?.sort((a, b) => a.cores - b.cores) ?? []"
|
||||
:key="serverType.id"
|
||||
v-model="form.server_type"
|
||||
:value="serverType.id"
|
||||
:disabled="serverType.disabled"
|
||||
name="server-type"
|
||||
:described-by="`server-type-${serverType.id}-description`"
|
||||
>
|
||||
<h5 class="text-lg font-semibold uppercase tracking-tight">
|
||||
{{ serverType.name }}
|
||||
</h5>
|
||||
<p class="text-sm opacity-60">
|
||||
<p :id="`server-type-${serverType.id}-description`" 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 flex-wrap gap-2">
|
||||
<div
|
||||
v-if="form.server_type"
|
||||
class="flex flex-wrap gap-2"
|
||||
role="radiogroup"
|
||||
aria-label="Server image"
|
||||
>
|
||||
<RadioButton
|
||||
v-for="image in images"
|
||||
:key="image.id"
|
||||
v-model="form.image"
|
||||
:value="image.id"
|
||||
:disabled="image.disabled"
|
||||
|
||||
@@ -1,16 +1,15 @@
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, 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";
|
||||
|
||||
const props = defineProps({
|
||||
servers: {
|
||||
type: [Object, null],
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
defineProps<{
|
||||
servers: Record<string, any>;
|
||||
networks: Record<string, any>[];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -27,7 +26,12 @@ const props = defineProps({
|
||||
]"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-3 p-4">
|
||||
<h2 class="text-3xl font-bold tracking-tight">Servers</h2>
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold tracking-tight">Servers</h2>
|
||||
<p class="mt-1 text-sm text-muted-foreground">
|
||||
Compute nodes, private networking, firewall status, and hosted services.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
:as="Link"
|
||||
@@ -36,14 +40,16 @@ const props = defineProps({
|
||||
organisation: $page.props.organisation.id,
|
||||
})
|
||||
"
|
||||
>Create</Button
|
||||
>
|
||||
<PlusIcon class="size-4" />
|
||||
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}`"
|
||||
:key="server.id"
|
||||
class="relative w-full"
|
||||
>
|
||||
<CardHeader>
|
||||
@@ -65,6 +71,91 @@ const props = defineProps({
|
||||
class="absolute inset-0"
|
||||
></Link>
|
||||
</Card>
|
||||
<Card v-if="servers.data.length === 0" class="md:col-span-2 lg:col-span-3">
|
||||
<CardHeader>
|
||||
<CardTitle>No servers yet</CardTitle>
|
||||
<CardDescription>
|
||||
Create the first server or continue onboarding to configure providers,
|
||||
source access, and registry details.
|
||||
</CardDescription>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button
|
||||
:as="Link"
|
||||
:href="
|
||||
route('servers.create', {
|
||||
organisation: $page.props.organisation.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
<PlusIcon class="size-4" />
|
||||
Create server
|
||||
</Button>
|
||||
<Button
|
||||
:as="Link"
|
||||
variant="secondary"
|
||||
:href="
|
||||
route('onboarding.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
})
|
||||
"
|
||||
>
|
||||
Onboarding
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
<section class="grid gap-4 p-4">
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold tracking-tight">Private Networks</h3>
|
||||
<p class="mt-1 text-sm text-muted-foreground">
|
||||
Provider network zones and the servers attached to each private range.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<Card v-for="network in networks" :key="network.id">
|
||||
<CardHeader>
|
||||
<CardTitle>{{ network.name }}</CardTitle>
|
||||
<CardDescription>
|
||||
{{ network.ip_range }} · {{ network.network_zone }} ·
|
||||
{{ network.servers.length }} servers
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<div class="grid gap-2 px-6 pb-6">
|
||||
<Link
|
||||
v-for="server in network.servers"
|
||||
:key="server.id"
|
||||
:href="
|
||||
route('servers.show', {
|
||||
organisation: $page.props.organisation.id,
|
||||
server: server.id,
|
||||
})
|
||||
"
|
||||
class="flex flex-wrap items-center justify-between gap-3 rounded-md border p-3 text-sm hover:bg-muted/50"
|
||||
>
|
||||
<span class="font-medium">{{ server.name }}</span>
|
||||
<span class="text-muted-foreground">
|
||||
{{ server.private_ip ?? "no private IP" }} ·
|
||||
{{ server.status.replace("-", " ") }}
|
||||
</span>
|
||||
</Link>
|
||||
<div
|
||||
v-if="network.servers.length === 0"
|
||||
class="rounded-md border border-dashed p-3 text-sm text-muted-foreground"
|
||||
>
|
||||
No servers attached.
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card v-if="networks.length === 0" class="border-dashed">
|
||||
<CardHeader>
|
||||
<CardTitle>No private networks</CardTitle>
|
||||
<CardDescription>
|
||||
Networks are created when the first server is provisioned for a provider zone.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import InputError from "@/components/InputError.vue";
|
||||
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 { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import AppLayout from "@/layouts/AppLayout.vue";
|
||||
import { Head, Link } from "@inertiajs/vue3";
|
||||
import { Head, Link, router, useForm } from "@inertiajs/vue3";
|
||||
import { useCycleList, useInterval } from "@vueuse/core";
|
||||
import {
|
||||
DatabaseIcon,
|
||||
@@ -12,18 +15,17 @@ import {
|
||||
LoaderCircleIcon,
|
||||
PlusIcon,
|
||||
RefreshCwIcon,
|
||||
Trash2Icon,
|
||||
} from "lucide-vue-next";
|
||||
import { ref, watch } from "vue";
|
||||
import { computed, watch } from "vue";
|
||||
|
||||
defineProps({
|
||||
const props = defineProps({
|
||||
server: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const selectedStep = ref(null);
|
||||
|
||||
const { state: provisionMessage, next } = useCycleList([
|
||||
"Provisioning your server...",
|
||||
"Updating dependencies...",
|
||||
@@ -32,11 +34,73 @@ const { state: provisionMessage, next } = useCycleList([
|
||||
"Configuring ssh...",
|
||||
"Installing docker...",
|
||||
]);
|
||||
const { counter, reset, pause, resume } = useInterval(5000, { controls: true });
|
||||
const { counter } = useInterval(5000, { controls: true });
|
||||
|
||||
watch(counter, () => {
|
||||
next();
|
||||
});
|
||||
|
||||
const activeProvisionOperation = computed(() =>
|
||||
props.server.operations?.find((operation) => operation.kind === "server_provision"),
|
||||
);
|
||||
|
||||
const firewallForm = useForm({
|
||||
type: "allow",
|
||||
ports: "",
|
||||
from: "",
|
||||
});
|
||||
|
||||
const addFirewallRule = (): void => {
|
||||
firewallForm.post(
|
||||
route("servers.firewall-rules.store", {
|
||||
organisation: props.server.organisation_id,
|
||||
server: props.server.id,
|
||||
}),
|
||||
{
|
||||
preserveScroll: true,
|
||||
onSuccess: () => firewallForm.reset("ports", "from"),
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
const destroyFirewallRule = (rule: Record<string, any>): void => {
|
||||
if (!window.confirm(`Remove ${rule.type} ${rule.ports}?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
router.delete(
|
||||
route("servers.firewall-rules.destroy", {
|
||||
organisation: props.server.organisation_id,
|
||||
server: props.server.id,
|
||||
firewallRule: rule.id,
|
||||
}),
|
||||
{
|
||||
preserveScroll: true,
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
const destroyServer = (): void => {
|
||||
if (!window.confirm(`Delete ${props.server.name}?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
router.delete(
|
||||
route("servers.destroy", {
|
||||
organisation: props.server.organisation_id,
|
||||
server: props.server.id,
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
const healServer = (): void => {
|
||||
router.post(
|
||||
route("servers.heal", {
|
||||
organisation: props.server.organisation_id,
|
||||
server: props.server.id,
|
||||
}),
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -70,6 +134,7 @@ watch(counter, () => {
|
||||
<div class="leading-none opacity-40">
|
||||
{{ server.ipv4 }} • {{ server.ipv6 }}
|
||||
</div>
|
||||
<Button size="sm" variant="destructive" @click="destroyServer">Delete</Button>
|
||||
</div>
|
||||
|
||||
<template v-if="server.status === 'active'">
|
||||
@@ -139,58 +204,99 @@ watch(counter, () => {
|
||||
<h3 class="mb-3 text-2xl font-semibold tracking-tight">Operations</h3>
|
||||
<Card>
|
||||
<CardContent class="py-4">
|
||||
<OperationTimeline :operations="server.service_operations" show-target />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="grid gap-4 lg:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Firewall</CardTitle>
|
||||
<CardDescription>Rules Keystone knows about for this server.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-4">
|
||||
<form class="grid gap-3 rounded-md border p-3" @submit.prevent="addFirewallRule">
|
||||
<div class="grid gap-3 md:grid-cols-[120px_1fr_1fr_auto] md:items-end">
|
||||
<div class="grid gap-2">
|
||||
<Label for="firewall_type">Action</Label>
|
||||
<select
|
||||
id="firewall_type"
|
||||
v-model="firewallForm.type"
|
||||
class="h-9 rounded-md border border-input bg-transparent px-3 text-sm"
|
||||
required
|
||||
>
|
||||
<option value="allow">allow</option>
|
||||
<option value="deny">deny</option>
|
||||
</select>
|
||||
<InputError :message="firewallForm.errors.type" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="firewall_ports">Ports</Label>
|
||||
<Input
|
||||
id="firewall_ports"
|
||||
v-model="firewallForm.ports"
|
||||
placeholder="80/tcp"
|
||||
required
|
||||
/>
|
||||
<InputError :message="firewallForm.errors.ports" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="firewall_from">Source</Label>
|
||||
<Input
|
||||
id="firewall_from"
|
||||
v-model="firewallForm.from"
|
||||
placeholder="any or CIDR"
|
||||
/>
|
||||
<InputError :message="firewallForm.errors.from" />
|
||||
</div>
|
||||
<Button type="submit" :disabled="firewallForm.processing">
|
||||
<PlusIcon class="size-4" />
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
<div
|
||||
v-for="operation in server.service_operations"
|
||||
:key="operation.id"
|
||||
class="flex gap-4"
|
||||
v-for="rule in server.firewall_rules"
|
||||
:key="rule.id"
|
||||
class="flex flex-wrap items-center justify-between gap-3 rounded-md border p-3 text-sm"
|
||||
>
|
||||
<div class="w-48 leading-none">{{ operation.target.name }}</div>
|
||||
<div class="w-full space-y-4">
|
||||
<div
|
||||
v-for="step in operation.steps"
|
||||
:key="step.id"
|
||||
class="flex items-center space-y-1"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<div class="text-sm font-semibold leading-none">
|
||||
{{ step.name ?? "Unnamed Step" }}
|
||||
</div>
|
||||
<div v-if="step.error_logs">
|
||||
<pre class="text-xs text-muted-foreground"
|
||||
>{{
|
||||
step.error_logs_excerpt.length !==
|
||||
step.error_logs
|
||||
? "... "
|
||||
: ""
|
||||
}}{{ step.error_logs_excerpt }}</pre
|
||||
>
|
||||
</div>
|
||||
<div v-else-if="step.logs">
|
||||
<pre class="text-xs text-muted-foreground"
|
||||
>{{
|
||||
step.logs_excerpt.length !== step.logs
|
||||
? "... "
|
||||
: ""
|
||||
}}{{ step.logs_excerpt }}</pre
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="link"
|
||||
@click="
|
||||
() => {
|
||||
selectedStep = step;
|
||||
}
|
||||
"
|
||||
>
|
||||
View
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium">{{ rule.type }} · {{ rule.ports }}</div>
|
||||
<div class="text-muted-foreground">
|
||||
{{ rule.from ? `from ${rule.from}` : "any source" }} ·
|
||||
{{ rule.status }}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
size="iconxs"
|
||||
variant="ghost"
|
||||
:aria-label="`Remove ${rule.type} ${rule.ports}`"
|
||||
@click="destroyFirewallRule(rule)"
|
||||
>
|
||||
<Trash2Icon class="size-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
v-if="server.firewall_rules.length === 0"
|
||||
class="rounded-md border border-dashed p-3 text-sm text-muted-foreground"
|
||||
>
|
||||
No firewall rules recorded.
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Private network</CardTitle>
|
||||
<CardDescription>Provider network membership.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="text-sm">
|
||||
<div v-if="server.network">
|
||||
<div class="font-medium">{{ server.network.name }}</div>
|
||||
<div class="text-muted-foreground">
|
||||
{{ server.network.ip_range }} · {{ server.network.network_zone }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-muted-foreground">No private network attached.</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
@@ -201,7 +307,12 @@ watch(counter, () => {
|
||||
<LoaderCircleIcon class="size-8 animate-spin" />
|
||||
</div>
|
||||
<div class="relative flex-grow">
|
||||
<OperationTimeline
|
||||
v-if="activeProvisionOperation"
|
||||
:operations="[activeProvisionOperation]"
|
||||
/>
|
||||
<Transition
|
||||
v-else
|
||||
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"
|
||||
@@ -213,37 +324,57 @@ watch(counter, () => {
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Button size="xs" disabled title="Services can be added after provisioning completes.">
|
||||
<PlusIcon class="size-4" />
|
||||
Add service
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<CardTitle>Server unavailable</CardTitle>
|
||||
<CardDescription>
|
||||
Service changes are disabled while this server is
|
||||
{{ server.status }}.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
v-if="server.status === 'provisioning-failed'"
|
||||
variant="secondary"
|
||||
@click="healServer"
|
||||
>
|
||||
<RefreshCwIcon class="size-4" />
|
||||
Queue heal check
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent v-if="server.operations?.length" class="pt-0">
|
||||
<OperationTimeline :operations="server.operations" />
|
||||
</CardContent>
|
||||
<CardContent v-else-if="server.status === 'provisioning-failed'" class="pt-0">
|
||||
<CardDescription>
|
||||
Keystone no longer has the provider root password. The heal check uses
|
||||
the managed SSH user and records the checks as a server operation.
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</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">
|
||||
WILL NOT BE SHOWN AGAIN:
|
||||
{{ $page.props.flash.server_credentials }}
|
||||
</div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Keystone uses its managed SSH key for subsequent operations. This password is
|
||||
informational for initial access only.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Dialog
|
||||
:open="!!selectedStep"
|
||||
@update:open="($event) => (!$event ? (selectedStep = null) : null)"
|
||||
>
|
||||
<DialogContent class="md:max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Logs for {{ selectedStep?.name }}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<section v-if="selectedStep?.logs">
|
||||
<h3 class="text-sm font-medium">Logs</h3>
|
||||
<pre class="text-xs text-muted-foreground">{{ selectedStep?.logs }}</pre>
|
||||
</section>
|
||||
<section v-if="selectedStep?.error_logs">
|
||||
<h3 class="text-sm font-medium">Error Logs</h3>
|
||||
<pre class="max-w-full overflow-x-scroll text-xs text-muted-foreground">{{
|
||||
selectedStep?.error_logs
|
||||
}}</pre>
|
||||
</section>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<!-- {{ server }} -->
|
||||
</div>
|
||||
</AppLayout>
|
||||
|
||||
Reference in New Issue
Block a user