Allow configuration of client and org subnets

This commit is contained in:
Owen
2025-04-16 22:00:24 -04:00
parent 569635f3ed
commit db0328fa71
10 changed files with 218 additions and 48 deletions

View File

@@ -59,6 +59,9 @@ const createClientFormSchema = z.object({
}),
siteIds: z.array(z.number()).min(1, {
message: "Select at least one site."
}),
subnet: z.string().min(1, {
message: "Subnet is required."
})
});
@@ -66,7 +69,8 @@ type CreateClientFormValues = z.infer<typeof createClientFormSchema>;
const defaultValues: Partial<CreateClientFormValues> = {
name: "",
siteIds: []
siteIds: [],
subnet: ""
};
type CreateClientFormProps = {
@@ -151,6 +155,11 @@ export default function CreateClientForm({
setClientDefaults(data);
const olmConfig = `olm --id ${data?.olmId} --secret ${data?.olmSecret} --endpoint ${env.app.dashboardUrl}`;
setOlmCommand(olmConfig);
// Set the subnet value from client defaults
if (data?.subnet) {
form.setValue("subnet", data.subnet);
}
}
});
};
@@ -191,6 +200,7 @@ export default function CreateClientForm({
siteIds: data.siteIds,
olmId: clientDefaults.olmId,
secret: clientDefaults.olmSecret,
subnet: data.subnet,
type: "olm"
} as CreateClientBody;
@@ -249,6 +259,27 @@ export default function CreateClientForm({
)}
/>
<FormField
control={form.control}
name="subnet"
render={({ field }) => (
<FormItem>
<FormLabel>Subnet</FormLabel>
<FormControl>
<Input
autoComplete="off"
placeholder="Subnet"
{...field}
/>
</FormControl>
<FormDescription>
The subnet that this client will use for connectivity.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="siteIds"
@@ -387,4 +418,4 @@ export default function CreateClientForm({
</Form>
</div>
);
}
}

View File

@@ -1,5 +1,4 @@
"use client";
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import { Button } from "@app/components/ui/button";
import { useOrgContext } from "@app/hooks/useOrgContext";
@@ -22,17 +21,9 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { formatAxiosError } from "@app/lib/api";
import { AlertTriangle, Trash2 } from "lucide-react";
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle
} from "@/components/ui/card";
import { AxiosResponse } from "axios";
import { DeleteOrgResponse, ListOrgsResponse } from "@server/routers/org";
import { redirect, useRouter } from "next/navigation";
import { useRouter } from "next/navigation";
import {
SettingsContainer,
SettingsSection,
@@ -44,27 +35,28 @@ import {
SettingsSectionFooter
} from "@app/components/Settings";
// Updated schema to include subnet field
const GeneralFormSchema = z.object({
name: z.string()
name: z.string(),
subnet: z.string().optional()
});
type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
export default function GeneralPage() {
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const { orgUser } = userOrgUserContext();
const router = useRouter();
const { org } = useOrgContext();
const api = createApiClient(useEnvContext());
const [loadingDelete, setLoadingDelete] = useState(false);
const [loadingSave, setLoadingSave] = useState(false);
const form = useForm<GeneralFormValues>({
resolver: zodResolver(GeneralFormSchema),
defaultValues: {
name: org?.org.name
name: org?.org.name,
subnet: org?.org.subnet || "" // Add default value for subnet
},
mode: "onChange"
});
@@ -75,12 +67,10 @@ export default function GeneralPage() {
const res = await api.delete<AxiosResponse<DeleteOrgResponse>>(
`/org/${org?.org.orgId}`
);
toast({
title: "Organization deleted",
description: "The organization and its data has been deleted."
});
if (res.status === 200) {
pickNewOrgAndNavigate();
}
@@ -102,7 +92,6 @@ export default function GeneralPage() {
async function pickNewOrgAndNavigate() {
try {
const res = await api.get<AxiosResponse<ListOrgsResponse>>(`/orgs`);
if (res.status === 200) {
if (res.data.data.orgs.length > 0) {
const orgId = res.data.data.orgs[0].orgId;
@@ -130,14 +119,14 @@ export default function GeneralPage() {
setLoadingSave(true);
await api
.post(`/org/${org?.org.orgId}`, {
name: data.name
name: data.name,
subnet: data.subnet // Include subnet in the API request
})
.then(() => {
toast({
title: "Organization updated",
description: "The organization has been updated."
});
router.refresh();
})
.catch((e) => {
@@ -182,7 +171,6 @@ export default function GeneralPage() {
string={org?.org.name || ""}
title="Delete Organization"
/>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
@@ -192,7 +180,6 @@ export default function GeneralPage() {
Manage your organization details and configuration
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<SettingsSectionForm>
<Form {...form}>
@@ -218,11 +205,31 @@ export default function GeneralPage() {
</FormItem>
)}
/>
{/* New FormField for subnet input */}
<FormField
control={form.control}
name="subnet"
render={({ field }) => (
<FormItem>
<FormLabel>Subnet</FormLabel>
<FormControl>
<Input
{...field}
placeholder="e.g., 192.168.1.0/24"
/>
</FormControl>
<FormMessage />
<FormDescription>
The subnet for this organization's network configuration.
</FormDescription>
</FormItem>
)}
/>
</form>
</Form>
</SettingsSectionForm>
</SettingsSectionBody>
<SettingsSectionFooter>
<Button
type="submit"
@@ -234,7 +241,6 @@ export default function GeneralPage() {
</Button>
</SettingsSectionFooter>
</SettingsSection>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
@@ -245,7 +251,6 @@ export default function GeneralPage() {
be certain.
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionFooter>
<Button
variant="destructive"
@@ -260,4 +265,4 @@ export default function GeneralPage() {
</SettingsSection>
</SettingsContainer>
);
}
}