190 lines
8 KiB
TypeScript
190 lines
8 KiB
TypeScript
import { Button } from "@minmon/ui/components/button";
|
|
import { StatusBadge } from "@minmon/ui/components/status-badge";
|
|
import { useForm } from "@tanstack/react-form";
|
|
import { useMutation, useQuery } from "@tanstack/react-query";
|
|
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
|
import { useEffect } from "react";
|
|
import { toast } from "sonner";
|
|
import { DetailCard, FormCard, PageSection, QueryStateCard, SelectField, TextAreaField, TextField } from "@/components/dashboard-ui";
|
|
import { queryClient, trpc, trpcClient } from "@/utils/trpc";
|
|
|
|
export const Route = createFileRoute("/dashboard/services_/$serviceId")({
|
|
component: RouteComponent,
|
|
});
|
|
|
|
type ServiceFormValues = {
|
|
serverId: string;
|
|
name: string;
|
|
type: "web_app" | "mail" | "database" | "api" | "proxy" | "other";
|
|
internalPort: string;
|
|
externalPort: string;
|
|
protocol: "http" | "https" | "tcp" | "udp" | "other";
|
|
status: "active" | "down" | "maintenance";
|
|
description: string;
|
|
};
|
|
|
|
const serviceTypeOptions = [
|
|
{ value: "web_app", label: "Web app" },
|
|
{ value: "mail", label: "Mail" },
|
|
{ value: "database", label: "Database" },
|
|
{ value: "api", label: "API" },
|
|
{ value: "proxy", label: "Proxy" },
|
|
{ value: "other", label: "Other" },
|
|
] as const;
|
|
|
|
const serviceProtocolOptions = [
|
|
{ value: "http", label: "HTTP" },
|
|
{ value: "https", label: "HTTPS" },
|
|
{ value: "tcp", label: "TCP" },
|
|
{ value: "udp", label: "UDP" },
|
|
{ value: "other", label: "Other" },
|
|
] as const;
|
|
|
|
const serviceStatusOptions = [
|
|
{ value: "active", label: "Active" },
|
|
{ value: "down", label: "Down" },
|
|
{ value: "maintenance", label: "Maintenance" },
|
|
] as const;
|
|
|
|
function RouteComponent() {
|
|
const { serviceId } = Route.useParams();
|
|
const navigate = useNavigate();
|
|
const service = useQuery(trpc.services.byId.queryOptions({ id: serviceId }));
|
|
const servers = useQuery(trpc.servers.list.queryOptions());
|
|
|
|
const updateService = useMutation({
|
|
mutationFn: async (values: ServiceFormValues) =>
|
|
trpcClient.services.update.mutate({
|
|
id: serviceId,
|
|
serverId: values.serverId,
|
|
name: values.name,
|
|
type: values.type,
|
|
internalPort: values.internalPort ? Number(values.internalPort) : null,
|
|
externalPort: values.externalPort ? Number(values.externalPort) : null,
|
|
protocol: values.protocol,
|
|
status: values.status,
|
|
description: values.description || null,
|
|
}),
|
|
onSuccess: async () => {
|
|
toast.success("Service updated");
|
|
await queryClient.invalidateQueries();
|
|
},
|
|
onError: (error) => toast.error(error.message),
|
|
});
|
|
|
|
const defaultValues: ServiceFormValues = {
|
|
serverId: "",
|
|
name: "",
|
|
type: "web_app",
|
|
internalPort: "",
|
|
externalPort: "",
|
|
protocol: "http",
|
|
status: "active",
|
|
description: "",
|
|
};
|
|
|
|
const form = useForm({
|
|
defaultValues,
|
|
onSubmit: async ({ value }) => {
|
|
await updateService.mutateAsync(value);
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!service.data) {
|
|
return;
|
|
}
|
|
|
|
form.reset({
|
|
serverId: service.data.serverId,
|
|
name: service.data.name,
|
|
type: service.data.type,
|
|
internalPort: service.data.internalPort?.toString() ?? "",
|
|
externalPort: service.data.externalPort?.toString() ?? "",
|
|
protocol: service.data.protocol,
|
|
status: service.data.status,
|
|
description: service.data.description ?? "",
|
|
});
|
|
}, [service.data, form]);
|
|
|
|
if (service.isLoading || servers.isLoading) {
|
|
return <QueryStateCard title="Loading service" description="Fetching the selected service details." />;
|
|
}
|
|
|
|
if (service.isError || servers.isError || !service.data || !servers.data) {
|
|
return <QueryStateCard title="Service unavailable" description="The requested service could not be loaded." />;
|
|
}
|
|
|
|
const serverOptions = servers.data.map((item) => ({
|
|
value: item.id,
|
|
label: `${item.name} (${item.id})`,
|
|
}));
|
|
|
|
return (
|
|
<div className="grid gap-6">
|
|
<PageSection title={service.data.name} description="View and edit the selected service.">
|
|
<DetailCard
|
|
title="Service summary"
|
|
description="Current configuration and domain relationship summary."
|
|
rows={[
|
|
{ label: "Status", value: <StatusBadge variant={service.data.status === "active" ? "success" : service.data.status === "down" ? "destructive" : "warning"}>{service.data.status}</StatusBadge> },
|
|
{ label: "Server ID", value: service.data.serverId },
|
|
{ label: "Service type", value: service.data.type },
|
|
{ label: "Protocol", value: service.data.protocol },
|
|
{ label: "Internal port", value: service.data.internalPort ?? "-" },
|
|
{ label: "External port", value: service.data.externalPort ?? "-" },
|
|
{ label: "Related domains", value: String(service.data.summary.domains) },
|
|
]}
|
|
/>
|
|
</PageSection>
|
|
|
|
<form
|
|
className="grid gap-4"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
form.handleSubmit();
|
|
}}
|
|
>
|
|
<FormCard
|
|
title="Edit service"
|
|
description="Update ports, protocol, status, and description."
|
|
footer={
|
|
<>
|
|
<Button type="button" variant="ghost" onClick={() => navigate({ to: "/dashboard/services" })}>
|
|
Back
|
|
</Button>
|
|
<form.Subscribe selector={(state) => ({ isSubmitting: state.isSubmitting })}>
|
|
{({ isSubmitting }) => <Button type="submit" loading={isSubmitting}>Save changes</Button>}
|
|
</form.Subscribe>
|
|
</>
|
|
}
|
|
>
|
|
<form.Field name="serverId">
|
|
{(field) => (
|
|
<SelectField
|
|
label="Server"
|
|
name={field.name}
|
|
value={field.state.value}
|
|
onBlur={field.handleBlur}
|
|
onValueChange={field.handleChange}
|
|
description="Select the server that owns this service."
|
|
placeholder="Select a server"
|
|
options={serverOptions}
|
|
/>
|
|
)}
|
|
</form.Field>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<form.Field name="name">{(field) => <TextField label="Service name" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
|
|
<form.Field name="type">{(field) => <SelectField label="Service type" name={field.name} value={field.state.value} onBlur={field.handleBlur} onValueChange={(value) => field.handleChange(value as ServiceFormValues["type"])} placeholder="Select service type" options={[...serviceTypeOptions]} />}</form.Field>
|
|
<form.Field name="internalPort">{(field) => <TextField label="Internal port" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
|
|
<form.Field name="externalPort">{(field) => <TextField label="External port" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
|
|
<form.Field name="protocol">{(field) => <SelectField label="Protocol" name={field.name} value={field.state.value} onBlur={field.handleBlur} onValueChange={(value) => field.handleChange(value as ServiceFormValues["protocol"])} placeholder="Select protocol" options={[...serviceProtocolOptions]} />}</form.Field>
|
|
<form.Field name="status">{(field) => <SelectField label="Status" name={field.name} value={field.state.value} onBlur={field.handleBlur} onValueChange={(value) => field.handleChange(value as ServiceFormValues["status"])} placeholder="Select service status" options={[...serviceStatusOptions]} />}</form.Field>
|
|
</div>
|
|
<form.Field name="description">{(field) => <TextAreaField label="Description" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
|
|
</FormCard>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|