ui: add remaining dashboard detail routes
This commit is contained in:
parent
cb0d4d7809
commit
afd60706c3
4 changed files with 537 additions and 0 deletions
144
apps/web/src/routes/dashboard.domains.$domainId.tsx
Normal file
144
apps/web/src/routes/dashboard.domains.$domainId.tsx
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
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 { toast } from "sonner";
|
||||
import { DetailCard, FormCard, PageSection, QueryStateCard, TextAreaField, TextField } from "@/components/dashboard-ui";
|
||||
import { queryClient, trpc, trpcClient } from "@/utils/trpc";
|
||||
|
||||
export const Route = createFileRoute("/dashboard/domains/$domainId")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
type DomainFormValues = {
|
||||
serviceId: string;
|
||||
name: string;
|
||||
expectedServerIp: string;
|
||||
remarks: string;
|
||||
};
|
||||
|
||||
function dnsStatusVariant(status: "MATCH" | "MISMATCH" | "UNRESOLVED") {
|
||||
if (status === "MATCH") return "success" as const;
|
||||
if (status === "MISMATCH") return "warning" as const;
|
||||
return "destructive" as const;
|
||||
}
|
||||
|
||||
function RouteComponent() {
|
||||
const { domainId } = Route.useParams();
|
||||
const navigate = useNavigate();
|
||||
const domain = useQuery(trpc.domains.byId.queryOptions({ id: domainId }));
|
||||
const services = useQuery(trpc.domains.serviceOptions.queryOptions());
|
||||
|
||||
const updateDomain = useMutation({
|
||||
mutationFn: async (values: DomainFormValues) =>
|
||||
trpcClient.domains.update.mutate({
|
||||
id: domainId,
|
||||
serviceId: values.serviceId || undefined,
|
||||
name: values.name,
|
||||
expectedServerIp: values.expectedServerIp || undefined,
|
||||
remarks: values.remarks || null,
|
||||
}),
|
||||
onSuccess: async () => {
|
||||
toast.success("Domain updated");
|
||||
await queryClient.invalidateQueries();
|
||||
},
|
||||
onError: (error) => toast.error(error.message),
|
||||
});
|
||||
const checkDns = useMutation({
|
||||
mutationFn: async () => trpcClient.domains.check.mutate({ id: domainId }),
|
||||
onSuccess: async () => {
|
||||
toast.success("DNS check completed");
|
||||
await queryClient.invalidateQueries();
|
||||
},
|
||||
onError: (error) => toast.error(error.message),
|
||||
});
|
||||
|
||||
if (domain.isLoading || services.isLoading) {
|
||||
return <QueryStateCard title="Loading domain" description="Fetching the selected domain details." />;
|
||||
}
|
||||
|
||||
if (domain.isError || services.isError || !domain.data || !services.data) {
|
||||
return <QueryStateCard title="Domain unavailable" description="The requested domain could not be loaded." />;
|
||||
}
|
||||
|
||||
const defaultValues: DomainFormValues = {
|
||||
serviceId: domain.data.serviceId,
|
||||
name: domain.data.name,
|
||||
expectedServerIp: domain.data.expectedServerIp,
|
||||
remarks: domain.data.remarks ?? "",
|
||||
};
|
||||
|
||||
const form = useForm({
|
||||
defaultValues,
|
||||
onSubmit: async ({ value }) => {
|
||||
await updateDomain.mutateAsync(value);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="grid gap-6">
|
||||
<PageSection title={domain.data.name} description="View DNS check results and edit this domain record.">
|
||||
<DetailCard
|
||||
title="Domain DNS result"
|
||||
description="Stored check result and IP comparison summary."
|
||||
rows={[
|
||||
{ label: "Status", value: <StatusBadge variant={dnsStatusVariant(domain.data.resolutionStatus)}>{domain.data.resolutionStatus}</StatusBadge> },
|
||||
{ label: "Expected IP", value: domain.data.expectedServerIp },
|
||||
{ label: "Last resolved IP", value: domain.data.lastResolvedIp || "-" },
|
||||
{ label: "Resolved IPv4 list", value: domain.data.lastResolvedIps.join(", ") || "-" },
|
||||
{ label: "Last checked at", value: domain.data.lastCheckedAt ? new Date(domain.data.lastCheckedAt).toLocaleString() : "-" },
|
||||
{ label: "Check message", value: domain.data.lastCheckMessage || "-" },
|
||||
]}
|
||||
/>
|
||||
</PageSection>
|
||||
|
||||
<form
|
||||
className="grid gap-4"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<FormCard
|
||||
title="Edit domain"
|
||||
description="Update the attached service, expected IP, and remarks."
|
||||
footer={
|
||||
<>
|
||||
<Button type="button" variant="ghost" onClick={() => navigate({ to: "/dashboard/domains" })}>
|
||||
Back
|
||||
</Button>
|
||||
<div className="flex gap-2">
|
||||
<Button type="button" variant="outline" onClick={() => checkDns.mutate()}>
|
||||
Check DNS
|
||||
</Button>
|
||||
<form.Subscribe selector={(state) => ({ isSubmitting: state.isSubmitting })}>
|
||||
{({ isSubmitting }) => <Button type="submit">{isSubmitting ? "Saving..." : "Save changes"}</Button>}
|
||||
</form.Subscribe>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form.Field name="serviceId">
|
||||
{(field) => (
|
||||
<TextField
|
||||
label="Service ID"
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
description={`Available: ${services.data.map((item) => `${item.name} (${item.id})`).join(", ")}`}
|
||||
/>
|
||||
)}
|
||||
</form.Field>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<form.Field name="name">{(field) => <TextField label="Domain name" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
|
||||
<form.Field name="expectedServerIp">{(field) => <TextField label="Expected server IP" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
|
||||
</div>
|
||||
<form.Field name="remarks">{(field) => <TextAreaField label="Remarks" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
|
||||
</FormCard>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
122
apps/web/src/routes/dashboard.notes.$noteId.tsx
Normal file
122
apps/web/src/routes/dashboard.notes.$noteId.tsx
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
import { Button } from "@minmon/ui/components/button";
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
||||
import { toast } from "sonner";
|
||||
import { DetailCard, FormCard, PageSection, QueryStateCard, TextAreaField, TextField } from "@/components/dashboard-ui";
|
||||
import { queryClient, trpc, trpcClient } from "@/utils/trpc";
|
||||
|
||||
export const Route = createFileRoute("/dashboard/notes/$noteId")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
type NoteFormValues = {
|
||||
serverId: string;
|
||||
title: string;
|
||||
category: string;
|
||||
content: string;
|
||||
};
|
||||
|
||||
function RouteComponent() {
|
||||
const { noteId } = Route.useParams();
|
||||
const navigate = useNavigate();
|
||||
const note = useQuery(trpc.notes.byId.queryOptions({ id: noteId }));
|
||||
const servers = useQuery(trpc.servers.list.queryOptions());
|
||||
|
||||
const updateNote = useMutation({
|
||||
mutationFn: async (values: NoteFormValues) =>
|
||||
trpcClient.notes.update.mutate({
|
||||
id: noteId,
|
||||
serverId: values.serverId,
|
||||
title: values.title,
|
||||
category: values.category || null,
|
||||
content: values.content,
|
||||
}),
|
||||
onSuccess: async () => {
|
||||
toast.success("Note updated");
|
||||
await queryClient.invalidateQueries();
|
||||
},
|
||||
onError: (error) => toast.error(error.message),
|
||||
});
|
||||
|
||||
if (note.isLoading || servers.isLoading) {
|
||||
return <QueryStateCard title="Loading note" description="Fetching the selected note details." />;
|
||||
}
|
||||
|
||||
if (note.isError || servers.isError || !note.data || !servers.data) {
|
||||
return <QueryStateCard title="Note unavailable" description="The requested note could not be loaded." />;
|
||||
}
|
||||
|
||||
const defaultValues: NoteFormValues = {
|
||||
serverId: note.data.serverId,
|
||||
title: note.data.title,
|
||||
category: note.data.category ?? "",
|
||||
content: note.data.content,
|
||||
};
|
||||
|
||||
const form = useForm({
|
||||
defaultValues,
|
||||
onSubmit: async ({ value }) => {
|
||||
await updateNote.mutateAsync(value);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="grid gap-6">
|
||||
<PageSection title={note.data.title} description="View and edit this note.">
|
||||
<DetailCard
|
||||
title="Note summary"
|
||||
description="Current note metadata and content preview."
|
||||
rows={[
|
||||
{ label: "Server ID", value: note.data.serverId },
|
||||
{ label: "Category", value: note.data.category || "-" },
|
||||
{ label: "Updated", value: new Date(note.data.updatedAt).toLocaleString() },
|
||||
{ label: "Content", value: note.data.content },
|
||||
]}
|
||||
/>
|
||||
</PageSection>
|
||||
|
||||
<form
|
||||
className="grid gap-4"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<FormCard
|
||||
title="Edit note"
|
||||
description="Update note content and category."
|
||||
footer={
|
||||
<>
|
||||
<Button type="button" variant="ghost" onClick={() => navigate({ to: "/dashboard/notes" })}>
|
||||
Back
|
||||
</Button>
|
||||
<form.Subscribe selector={(state) => ({ isSubmitting: state.isSubmitting })}>
|
||||
{({ isSubmitting }) => <Button type="submit">{isSubmitting ? "Saving..." : "Save changes"}</Button>}
|
||||
</form.Subscribe>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form.Field name="serverId">
|
||||
{(field) => (
|
||||
<TextField
|
||||
label="Server ID"
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
description={`Available: ${servers.data.map((item) => `${item.name} (${item.id})`).join(", ")}`}
|
||||
/>
|
||||
)}
|
||||
</form.Field>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<form.Field name="title">{(field) => <TextField label="Title" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
|
||||
<form.Field name="category">{(field) => <TextField label="Category" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
|
||||
</div>
|
||||
<form.Field name="content">{(field) => <TextAreaField label="Content" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} className="min-h-40" />}</form.Field>
|
||||
</FormCard>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
129
apps/web/src/routes/dashboard.servers.$serverId.tsx
Normal file
129
apps/web/src/routes/dashboard.servers.$serverId.tsx
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
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 { toast } from "sonner";
|
||||
import { DetailCard, FormCard, PageSection, QueryStateCard, TextAreaField, TextField } from "@/components/dashboard-ui";
|
||||
import { queryClient, trpc, trpcClient } from "@/utils/trpc";
|
||||
|
||||
export const Route = createFileRoute("/dashboard/servers/$serverId")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
type ServerFormValues = {
|
||||
name: string;
|
||||
primaryIpAddress: string;
|
||||
secondaryIpAddress: string;
|
||||
operatingSystem: string;
|
||||
location: string;
|
||||
provider: string;
|
||||
description: string;
|
||||
status: "active" | "maintenance" | "inactive";
|
||||
};
|
||||
|
||||
function RouteComponent() {
|
||||
const { serverId } = Route.useParams();
|
||||
const navigate = useNavigate();
|
||||
const server = useQuery(trpc.servers.byId.queryOptions({ id: serverId }));
|
||||
|
||||
const updateServer = useMutation({
|
||||
mutationFn: async (values: ServerFormValues) =>
|
||||
trpcClient.servers.update.mutate({
|
||||
id: serverId,
|
||||
...values,
|
||||
secondaryIpAddress: values.secondaryIpAddress || null,
|
||||
operatingSystem: values.operatingSystem || null,
|
||||
location: values.location || null,
|
||||
provider: values.provider || null,
|
||||
description: values.description || null,
|
||||
}),
|
||||
onSuccess: async () => {
|
||||
toast.success("Server updated");
|
||||
await queryClient.invalidateQueries();
|
||||
},
|
||||
onError: (error) => toast.error(error.message),
|
||||
});
|
||||
|
||||
if (server.isLoading) {
|
||||
return <QueryStateCard title="Loading server" description="Fetching the selected server details." />;
|
||||
}
|
||||
|
||||
if (server.isError || !server.data) {
|
||||
return <QueryStateCard title="Server unavailable" description="The requested server could not be loaded." />;
|
||||
}
|
||||
|
||||
const defaultValues: ServerFormValues = {
|
||||
name: server.data.name,
|
||||
primaryIpAddress: server.data.primaryIpAddress,
|
||||
secondaryIpAddress: server.data.secondaryIpAddress ?? "",
|
||||
operatingSystem: server.data.operatingSystem ?? "",
|
||||
location: server.data.location ?? "",
|
||||
provider: server.data.provider ?? "",
|
||||
description: server.data.description ?? "",
|
||||
status: server.data.status,
|
||||
};
|
||||
|
||||
const form = useForm({
|
||||
defaultValues,
|
||||
onSubmit: async ({ value }) => {
|
||||
await updateServer.mutateAsync(value);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="grid gap-6">
|
||||
<PageSection title={server.data.name} description="View and edit the selected server.">
|
||||
<DetailCard
|
||||
title="Server summary"
|
||||
description="Relationship and status summary for this server."
|
||||
rows={[
|
||||
{ label: "Status", value: <StatusBadge variant={server.data.status === "active" ? "success" : server.data.status === "maintenance" ? "warning" : "neutral"}>{server.data.status}</StatusBadge> },
|
||||
{ label: "Primary IP", value: server.data.primaryIpAddress },
|
||||
{ label: "Secondary IP", value: server.data.secondaryIpAddress || "-" },
|
||||
{ label: "Operating system", value: server.data.operatingSystem || "-" },
|
||||
{ label: "Location", value: server.data.location || "-" },
|
||||
{ label: "Provider", value: server.data.provider || "-" },
|
||||
{ label: "Services", value: String(server.data.summary.services) },
|
||||
{ label: "Notes", value: String(server.data.summary.notes) },
|
||||
]}
|
||||
/>
|
||||
</PageSection>
|
||||
|
||||
<form
|
||||
className="grid gap-4"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<FormCard
|
||||
title="Edit server"
|
||||
description="Update server information and keep the dashboard records current."
|
||||
footer={
|
||||
<>
|
||||
<Button type="button" variant="ghost" onClick={() => navigate({ to: "/dashboard/servers" })}>
|
||||
Back
|
||||
</Button>
|
||||
<form.Subscribe selector={(state) => ({ isSubmitting: state.isSubmitting })}>
|
||||
{({ isSubmitting }) => <Button type="submit">{isSubmitting ? "Saving..." : "Save changes"}</Button>}
|
||||
</form.Subscribe>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<form.Field name="name">{(field) => <TextField label="Server name" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
|
||||
<form.Field name="primaryIpAddress">{(field) => <TextField label="Primary IP address" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
|
||||
<form.Field name="secondaryIpAddress">{(field) => <TextField label="Secondary IP address" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
|
||||
<form.Field name="operatingSystem">{(field) => <TextField label="Operating system" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
|
||||
<form.Field name="location">{(field) => <TextField label="Location" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
|
||||
<form.Field name="provider">{(field) => <TextField label="Provider" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />}</form.Field>
|
||||
<form.Field name="status">{(field) => <TextField label="Status" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value as "active" | "maintenance" | "inactive")} />}</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>
|
||||
);
|
||||
}
|
||||
142
apps/web/src/routes/dashboard.services.$serviceId.tsx
Normal file
142
apps/web/src/routes/dashboard.services.$serviceId.tsx
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
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 { toast } from "sonner";
|
||||
import { DetailCard, FormCard, PageSection, QueryStateCard, 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;
|
||||
};
|
||||
|
||||
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),
|
||||
});
|
||||
|
||||
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 defaultValues: ServiceFormValues = {
|
||||
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 ?? "",
|
||||
};
|
||||
|
||||
const form = useForm({
|
||||
defaultValues,
|
||||
onSubmit: async ({ value }) => {
|
||||
await updateService.mutateAsync(value);
|
||||
},
|
||||
});
|
||||
|
||||
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">{isSubmitting ? "Saving..." : "Save changes"}</Button>}
|
||||
</form.Subscribe>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form.Field name="serverId">
|
||||
{(field) => (
|
||||
<TextField
|
||||
label="Server ID"
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
description={`Available: ${servers.data.map((item) => `${item.name} (${item.id})`).join(", ")}`}
|
||||
/>
|
||||
)}
|
||||
</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) => <TextField label="Service type" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value as ServiceFormValues["type"])} />}</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) => <TextField label="Protocol" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value as ServiceFormValues["protocol"])} />}</form.Field>
|
||||
<form.Field name="status">{(field) => <TextField label="Status" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value as ServiceFormValues["status"])} />}</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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue