wowowowowo
This commit is contained in:
@@ -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