syahdan/minmon
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs: add report draft and dashboard form refinements

Browse source
This commit is contained in:
Syahdan 2026-04-29 21:27:36 +07:00
parent 4e0cf0140f
commit 441e709193
26 changed files with 1700 additions and 505 deletions
Download patch file Download diff file Expand all files Collapse all files

46
apps/web/src/routes/dashboard.services_.$serviceId.tsx
View file

@ -5,7 +5,7 @@ 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, TextAreaField, TextField } from "@/components/dashboard-ui";
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")({
@ -23,6 +23,29 @@ type ServiceFormValues = {
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();
@ -92,6 +115,11 @@ function RouteComponent() {
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.">
@ -134,23 +162,25 @@ function RouteComponent() {
>
<form.Field name="serverId">
{(field) => (
<TextField
label="Server ID"
<SelectField
label="Server"
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(", ")}`}
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) => <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="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) => <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>
<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>