calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-08-07 04:58:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add domain to the resource selection

Browse Source
This commit is contained in:
Owen
2026-08-06 12:03:40 -04:00
parent 6564bfe8ae
commit fb896d6c0f
11 changed files with 590 additions and 570 deletions
Download Patch File Download Diff File Expand all files Collapse all files
messages/en-US.json
+2
View File
@@ -1771,6 +1771,8 @@
"aiResourceProvidersUpdated": "Providers updated", "aiResourceProvidersUpdated": "Providers updated",
"aiResourceProvidersErrorUpdate": "Failed to update providers", "aiResourceProvidersErrorUpdate": "Failed to update providers",
"aiResourceAliasRequired": "Alias is required for inference resources", "aiResourceAliasRequired": "Alias is required for inference resources",
"aiResourceDomainConfiguration": "Domain configuration",
"aiResourceDomainConfigurationDescription": "Choose the domain clients will use to reach this inference resource.",
"sidebarApiKeys": "API Keys", "sidebarApiKeys": "API Keys",
"sidebarProvisioning": "Provisioning", "sidebarProvisioning": "Provisioning",
"sidebarSettings": "Settings", "sidebarSettings": "Settings",
server/routers/siteResource/createSiteResource.ts
+12 -8
View File
@@ -168,7 +168,7 @@ const createSiteResourceSchema = z
) )
.refine( .refine(
(data) => { (data) => {
// destination is only optional for ssh mode with native authDaemonMode // destination is only optional for ssh mode with native authDaemonMode or inference
if ( if (
(data.mode === "ssh" && data.authDaemonMode === "native") || (data.mode === "ssh" && data.authDaemonMode === "native") ||
data.mode == "inference" data.mode == "inference"
@@ -182,7 +182,7 @@ const createSiteResourceSchema = z
}, },
{ {
message: message:
"Destination is required unless mode is ssh with authDaemonMode native" "Destination is required unless mode is ssh with authDaemonMode native or inference"
} }
) )
.refine( .refine(
@@ -509,7 +509,15 @@ export async function createSiteResource(
const existingResource = await db const existingResource = await db
.select() .select()
.from(siteResources) .from(siteResources)
.where(eq(siteResources.fullDomain, fullDomain)); .where(
and(
eq(siteResources.fullDomain, fullDomain),
ne(
siteResources.requiresExitNodeConnection,
mode == "inference"
)
)
); // exclude looking at the ones on exit nodes if this is an inference resource
if (existingResource.length > 0) { if (existingResource.length > 0) {
return next( return next(
@@ -529,11 +537,7 @@ export async function createSiteResource(
.where( .where(
and( and(
eq(siteResources.orgId, orgId), eq(siteResources.orgId, orgId),
eq(siteResources.alias, alias.trim()), eq(siteResources.alias, alias.trim())
ne(
siteResources.requiresExitNodeConnection,
mode == "inference"
) // exclude looking at the ones on exit nodes if this is an inference resource
) )
) )
.limit(1); .limit(1);
server/routers/siteResource/updateSiteResource.ts
+11 -7
View File
@@ -172,7 +172,7 @@ const updateSiteResourceSchema = z
}, },
{ {
message: message:
"Destination is required unless mode is ssh with authDaemonMode native" "Destination is required unless mode is ssh with authDaemonMode native or inference"
} }
) )
.refine( .refine(
@@ -481,7 +481,15 @@ export async function updateSiteResource(
const [existingDomain] = await db const [existingDomain] = await db
.select() .select()
.from(siteResources) .from(siteResources)
.where(eq(siteResources.fullDomain, fullDomain)); .where(
and(
eq(siteResources.fullDomain, fullDomain),
ne(
siteResources.requiresExitNodeConnection,
mode == "inference"
)
)
); // exclude looking at the ones on exit nodes if this is an inference resource
if ( if (
existingDomain && existingDomain &&
@@ -511,11 +519,7 @@ export async function updateSiteResource(
and( and(
eq(siteResources.orgId, existingSiteResource.orgId), eq(siteResources.orgId, existingSiteResource.orgId),
eq(siteResources.alias, alias.trim()), eq(siteResources.alias, alias.trim()),
ne(siteResources.siteResourceId, siteResourceId), // exclude self ne(siteResources.siteResourceId, siteResourceId) // exclude self
ne(
siteResources.requiresExitNodeConnection,
mode == "inference"
) // exclude looking at the ones on exit nodes if this is an inference resource
) )
) )
.limit(1); .limit(1);
src/app/[orgId]/settings/resources/private/[niceId]/general/page.tsx
+3 -27
View File
@@ -24,9 +24,7 @@ import {
} from "@app/components/ui/form"; } from "@app/components/ui/form";
import { Input } from "@app/components/ui/input"; import { Input } from "@app/components/ui/input";
import { SwitchInput } from "@app/components/SwitchInput"; import { SwitchInput } from "@app/components/SwitchInput";
import { PrivateResourceAliasField } from "@app/components/PrivateResourceDestinationFields";
import { createGeneralFormSchema } from "@app/lib/privateResourceForm"; import { createGeneralFormSchema } from "@app/lib/privateResourceForm";
import { asAnyControl, asAnyWatch } from "@app/lib/formControlUtils";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useActionState, useMemo } from "react"; import { useActionState, useMemo } from "react";
@@ -37,12 +35,8 @@ import { useSaveSiteResource } from "@app/hooks/useSaveSiteResource";
export default function PrivateResourceGeneralPage() { export default function PrivateResourceGeneralPage() {
const t = useTranslations(); const t = useTranslations();
const { save, siteResource } = useSaveSiteResource(); const { save, siteResource } = useSaveSiteResource();
const isInference = siteResource.mode === "inference";
const formSchema = useMemo( const formSchema = useMemo(() => createGeneralFormSchema(t), [t]);
() => createGeneralFormSchema(t, { requireAlias: isInference }),
[t, isInference]
);
type FormValues = z.infer<typeof formSchema>; type FormValues = z.infer<typeof formSchema>;
const form = useForm<FormValues>({ const form = useForm<FormValues>({
@@ -50,8 +44,7 @@ export default function PrivateResourceGeneralPage() {
defaultValues: { defaultValues: {
name: siteResource.name, name: siteResource.name,
niceId: siteResource.niceId, niceId: siteResource.niceId,
enabled: siteResource.enabled, enabled: siteResource.enabled
alias: siteResource.alias ?? null
} }
}); });
@@ -63,13 +56,7 @@ export default function PrivateResourceGeneralPage() {
await save({ await save({
name: data.name, name: data.name,
niceId: data.niceId, niceId: data.niceId,
enabled: data.enabled, enabled: data.enabled
...(isInference
? {
mode: "inference" as const,
alias: data.alias
}
: {})
}); });
}, null); }, null);
@@ -165,17 +152,6 @@ export default function PrivateResourceGeneralPage() {
)} )}
/> />
</SettingsFormCell> </SettingsFormCell>
{isInference && (
<SettingsFormCell span="half">
<PrivateResourceAliasField
control={asAnyControl(
form.control
)}
watch={asAnyWatch(form.watch)}
labelPrefix="edit"
/>
</SettingsFormCell>
)}
</SettingsFormGrid> </SettingsFormGrid>
</form> </form>
</Form> </Form>
src/app/[orgId]/settings/resources/private/[niceId]/inference/page.tsx
+314 -11
View File
@@ -1,15 +1,318 @@
import type { Metadata } from "next"; "use client";
import { redirect } from "next/navigation";
export const metadata: Metadata = { import {
title: "Private Resource" SettingsContainer,
}; SettingsFormCell,
SettingsFormGrid,
SettingsSection,
SettingsSectionBody,
SettingsSectionDescription,
SettingsSectionFooter,
SettingsSectionForm,
SettingsSectionHeader,
SettingsSectionTitle,
SettingsSubsectionDescription,
SettingsSubsectionHeader,
SettingsSubsectionTitle
} from "@app/components/Settings";
import {
AiProvidersSelector,
type SelectedAiProvider
} from "@app/components/AiProvidersSelector";
import DomainPicker from "@app/components/DomainPicker";
import { Button } from "@app/components/ui/button";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage
} from "@app/components/ui/form";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useSaveSiteResource } from "@app/hooks/useSaveSiteResource";
import { useSiteResourceContext } from "@app/hooks/useSiteResourceContext";
import { toast } from "@app/hooks/useToast";
import { createApiClient, formatAxiosError } from "@app/lib/api";
import { resourceQueries } from "@app/lib/queries";
import { zodResolver } from "@hookform/resolvers/zod";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useActionState, useEffect, useMemo, useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
export default async function PrivateResourceInferencePage(props: { export default function PrivateResourceInferencePage() {
params: Promise<{ niceId: string; orgId: string }>; const t = useTranslations();
}) { const router = useRouter();
const params = await props.params; const { env } = useEnvContext();
redirect( const api = createApiClient({ env });
`/${params.orgId}/settings/resources/private/${params.niceId}/providers` const queryClient = useQueryClient();
const { siteResource } = useSiteResourceContext();
const { save } = useSaveSiteResource();
useEffect(() => {
if (siteResource.mode !== "inference") {
router.replace(
`/${siteResource.orgId}/settings/resources/private/${siteResource.niceId}/general`
);
}
}, [router, siteResource.mode, siteResource.niceId, siteResource.orgId]);
const formSchema = useMemo(
() =>
z.object({
providerIds: z.array(z.number().int().positive()),
httpConfigSubdomain: z.string().nullish(),
httpConfigDomainId: z.string().nullish(),
httpConfigFullDomain: z.string().nullish()
}),
[]
);
type FormValues = z.infer<typeof formSchema>;
const [selectedProviders, setSelectedProviders] = useState<
SelectedAiProvider[]
>([]);
const attachedQuery = useQuery({
...resourceQueries.siteResourceAiProviders({
siteResourceId: siteResource.id
}),
enabled: siteResource.mode === "inference"
});
const form = useForm<FormValues>({
resolver: zodResolver(formSchema),
defaultValues: {
providerIds: [],
httpConfigSubdomain: siteResource.subdomain ?? null,
httpConfigDomainId: siteResource.domainId ?? null,
httpConfigFullDomain: siteResource.fullDomain ?? null
}
});
const httpConfigSubdomain = form.watch("httpConfigSubdomain");
const httpConfigDomainId = form.watch("httpConfigDomainId");
const httpConfigFullDomain = form.watch("httpConfigFullDomain");
useEffect(() => {
if (!attachedQuery.data) return;
const providers = attachedQuery.data.map((provider) => ({
id: String(provider.providerId),
text: provider.name
}));
setSelectedProviders(providers);
form.setValue(
"providerIds",
attachedQuery.data.map((p) => p.providerId)
);
}, [attachedQuery.data, form]);
const [, formAction, saveLoading] = useActionState(async () => {
const isValid = await form.trigger();
if (!isValid) return;
const data = form.getValues();
try {
await save({
mode: "inference",
httpConfigSubdomain: data.httpConfigSubdomain,
httpConfigDomainId: data.httpConfigDomainId,
httpConfigFullDomain: data.httpConfigFullDomain
});
await api.post(`/site-resource/${siteResource.id}/ai-providers`, {
providers: data.providerIds.map((providerId) => ({
providerId,
modelAccessMode: "catalog"
}))
});
await queryClient.invalidateQueries(
resourceQueries.siteResourceAiProviders({
siteResourceId: siteResource.id
})
);
toast({
title: t("success"),
description: t("aiResourceProvidersUpdated")
});
} catch (error) {
toast({
variant: "destructive",
title: t("aiResourceProvidersErrorUpdate"),
description: formatAxiosError(
error,
t("aiResourceProvidersErrorUpdate")
)
});
}
}, null);
if (siteResource.mode !== "inference") {
return null;
}
return (
<SettingsContainer>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("aiResourceProviders")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t("aiResourceProvidersDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<SettingsSectionForm variant="half">
<Form {...form}>
<form
action={formAction}
id="private-resource-providers-form"
>
<SettingsFormGrid>
<SettingsFormCell span="full">
<FormField
control={form.control}
name="providerIds"
render={() => (
<FormItem>
<FormLabel>
{t(
"aiResourceProviders"
)}
</FormLabel>
<FormControl>
<AiProvidersSelector
orgId={
siteResource.orgId
}
selectedProviders={
selectedProviders
}
disabled={
attachedQuery.isLoading ||
saveLoading
}
onSelectProviders={(
providers
) => {
setSelectedProviders(
providers
);
form.setValue(
"providerIds",
providers.map(
(p) =>
parseInt(
p.id,
10
)
),
{
shouldValidate: true
}
);
}}
/>
</FormControl>
<FormDescription>
{t(
"aiResourceProvidersHelp"
)}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
<SettingsFormCell span="full">
<SettingsSubsectionHeader>
<SettingsSubsectionTitle>
{t(
"aiResourceDomainConfiguration"
)}
</SettingsSubsectionTitle>
<SettingsSubsectionDescription>
{t(
"aiResourceDomainConfigurationDescription"
)}
</SettingsSubsectionDescription>
</SettingsSubsectionHeader>
</SettingsFormCell>
<SettingsFormCell span="full">
<DomainPicker
key={`inference-domain-${siteResource.id}`}
orgId={siteResource.orgId}
cols={2}
hideFreeDomain
defaultSubdomain={
httpConfigSubdomain ??
undefined
}
defaultDomainId={
httpConfigDomainId ??
undefined
}
defaultFullDomain={
httpConfigFullDomain ??
undefined
}
onDomainChange={(res) => {
if (res === null) {
form.setValue(
"httpConfigSubdomain",
null
);
form.setValue(
"httpConfigDomainId",
null
);
form.setValue(
"httpConfigFullDomain",
null
);
return;
}
form.setValue(
"httpConfigSubdomain",
res.subdomain ?? null
);
form.setValue(
"httpConfigDomainId",
res.domainId
);
form.setValue(
"httpConfigFullDomain",
res.fullDomain
);
}}
/>
</SettingsFormCell>
</SettingsFormGrid>
</form>
</Form>
</SettingsSectionForm>
</SettingsSectionBody>
<SettingsSectionFooter>
<Button
type="submit"
form="private-resource-providers-form"
loading={saveLoading}
disabled={attachedQuery.isLoading}
>
{t("saveSettings")}
</Button>
</SettingsSectionFooter>
</SettingsSection>
</SettingsContainer>
); );
} }
src/app/[orgId]/settings/resources/private/[niceId]/layout.tsx
+14 -31
View File
@@ -55,37 +55,20 @@ export default async function PrivateResourceLayout(
| "sshSettings" | "sshSettings"
| "inferenceSettings"; | "inferenceSettings";
const isInference = siteResource.mode === "inference"; const navItems = [
{
const navItems = isInference title: t("general"),
? [ href: `/{orgId}/settings/resources/private/{niceId}/general`
{ },
title: t("general"), {
href: `/{orgId}/settings/resources/private/{niceId}/general` title: t(modeSettingsKey),
}, href: `/{orgId}/settings/resources/private/{niceId}/${siteResource.mode}`
{ },
title: t("aiResourceProviders"), {
href: `/{orgId}/settings/resources/private/{niceId}/providers` title: t("authentication"),
}, href: `/{orgId}/settings/resources/private/{niceId}/access`
{ }
title: t("authentication"), ];
href: `/{orgId}/settings/resources/private/{niceId}/access`
}
]
: [
{
title: t("general"),
href: `/{orgId}/settings/resources/private/{niceId}/general`
},
{
title: t(modeSettingsKey),
href: `/{orgId}/settings/resources/private/{niceId}/${siteResource.mode}`
},
{
title: t("authentication"),
href: `/{orgId}/settings/resources/private/{niceId}/access`
}
];
return ( return (
<> <>
src/app/[orgId]/settings/resources/private/[niceId]/providers/page.tsx
-230
View File
@@ -1,230 +0,0 @@
"use client";
import {
SettingsContainer,
SettingsFormCell,
SettingsFormGrid,
SettingsSection,
SettingsSectionBody,
SettingsSectionDescription,
SettingsSectionFooter,
SettingsSectionForm,
SettingsSectionHeader,
SettingsSectionTitle
} from "@app/components/Settings";
import {
AiProvidersSelector,
type SelectedAiProvider
} from "@app/components/AiProvidersSelector";
import { Button } from "@app/components/ui/button";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage
} from "@app/components/ui/form";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useSiteResourceContext } from "@app/hooks/useSiteResourceContext";
import { toast } from "@app/hooks/useToast";
import { createApiClient, formatAxiosError } from "@app/lib/api";
import { resourceQueries } from "@app/lib/queries";
import { zodResolver } from "@hookform/resolvers/zod";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useActionState, useEffect, useMemo, useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
export default function PrivateResourceProvidersPage() {
const t = useTranslations();
const router = useRouter();
const { env } = useEnvContext();
const api = createApiClient({ env });
const queryClient = useQueryClient();
const { siteResource } = useSiteResourceContext();
useEffect(() => {
if (siteResource.mode !== "inference") {
router.replace(
`/${siteResource.orgId}/settings/resources/private/${siteResource.niceId}/general`
);
}
}, [router, siteResource.mode, siteResource.niceId, siteResource.orgId]);
const formSchema = useMemo(
() =>
z.object({
providerIds: z.array(z.number().int().positive())
}),
[]
);
type FormValues = z.infer<typeof formSchema>;
const [selectedProviders, setSelectedProviders] = useState<
SelectedAiProvider[]
>([]);
const attachedQuery = useQuery({
...resourceQueries.siteResourceAiProviders({
siteResourceId: siteResource.id
}),
enabled: siteResource.mode === "inference"
});
const form = useForm<FormValues>({
resolver: zodResolver(formSchema),
defaultValues: {
providerIds: []
}
});
useEffect(() => {
if (!attachedQuery.data) return;
const providers = attachedQuery.data.map((provider) => ({
id: String(provider.providerId),
text: provider.name
}));
setSelectedProviders(providers);
form.reset({
providerIds: attachedQuery.data.map((p) => p.providerId)
});
}, [attachedQuery.data, form]);
const [, formAction, saveLoading] = useActionState(async () => {
const isValid = await form.trigger();
if (!isValid) return;
const data = form.getValues();
try {
await api.post(`/site-resource/${siteResource.id}/ai-providers`, {
providers: data.providerIds.map((providerId) => ({
providerId,
modelAccessMode: "catalog"
}))
});
await queryClient.invalidateQueries(
resourceQueries.siteResourceAiProviders({
siteResourceId: siteResource.id
})
);
toast({
title: t("success"),
description: t("aiResourceProvidersUpdated")
});
} catch (error) {
toast({
variant: "destructive",
title: t("aiResourceProvidersErrorUpdate"),
description: formatAxiosError(
error,
t("aiResourceProvidersErrorUpdate")
)
});
}
}, null);
if (siteResource.mode !== "inference") {
return null;
}
return (
<SettingsContainer>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("aiResourceProviders")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t("aiResourceProvidersDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<SettingsSectionForm variant="half">
<Form {...form}>
<form
action={formAction}
id="private-resource-providers-form"
>
<SettingsFormGrid>
<SettingsFormCell span="full">
<FormField
control={form.control}
name="providerIds"
render={() => (
<FormItem>
<FormLabel>
{t(
"aiResourceProviders"
)}
</FormLabel>
<FormControl>
<AiProvidersSelector
orgId={
siteResource.orgId
}
selectedProviders={
selectedProviders
}
disabled={
attachedQuery.isLoading ||
saveLoading
}
onSelectProviders={(
providers
) => {
setSelectedProviders(
providers
);
form.setValue(
"providerIds",
providers.map(
(p) =>
parseInt(
p.id,
10
)
),
{
shouldValidate: true
}
);
}}
/>
</FormControl>
<FormDescription>
{t(
"aiResourceProvidersHelp"
)}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
</SettingsFormGrid>
</form>
</Form>
</SettingsSectionForm>
</SettingsSectionBody>
<SettingsSectionFooter>
<Button
type="submit"
form="private-resource-providers-form"
loading={saveLoading}
disabled={attachedQuery.isLoading}
>
{t("saveSettings")}
</Button>
</SettingsSectionFooter>
</SettingsSection>
</SettingsContainer>
);
}
src/app/[orgId]/settings/resources/public/[niceId]/inference/page.tsx
+226 -11
View File
@@ -1,15 +1,230 @@
import type { Metadata } from "next"; "use client";
import { redirect } from "next/navigation";
export const metadata: Metadata = { import {
title: "Public Resource" SettingsContainer,
}; SettingsFormCell,
SettingsFormGrid,
SettingsSection,
SettingsSectionBody,
SettingsSectionDescription,
SettingsSectionFooter,
SettingsSectionForm,
SettingsSectionHeader,
SettingsSectionTitle
} from "@app/components/Settings";
import {
AiProvidersSelector,
type SelectedAiProvider
} from "@app/components/AiProvidersSelector";
import { Button } from "@app/components/ui/button";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage
} from "@app/components/ui/form";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useResourceContext } from "@app/hooks/useResourceContext";
import { toast } from "@app/hooks/useToast";
import { createApiClient, formatAxiosError } from "@app/lib/api";
import { resourceQueries } from "@app/lib/queries";
import { zodResolver } from "@hookform/resolvers/zod";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useActionState, useEffect, useMemo, useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
export default async function PublicResourceInferencePage(props: { export default function PublicResourceInferencePage() {
params: Promise<{ niceId: string; orgId: string }>; const t = useTranslations();
}) { const router = useRouter();
const params = await props.params; const { env } = useEnvContext();
redirect( const api = createApiClient({ env });
`/${params.orgId}/settings/resources/public/${params.niceId}/providers` const queryClient = useQueryClient();
const { resource } = useResourceContext();
useEffect(() => {
if (resource.mode !== "inference") {
router.replace(
`/${resource.orgId}/settings/resources/public/${resource.niceId}/general`
);
}
}, [router, resource.mode, resource.niceId, resource.orgId]);
const formSchema = useMemo(
() =>
z.object({
providerIds: z.array(z.number().int().positive())
}),
[]
);
type FormValues = z.infer<typeof formSchema>;
const [selectedProviders, setSelectedProviders] = useState<
SelectedAiProvider[]
>([]);
const attachedQuery = useQuery({
...resourceQueries.resourceAiProviders({
resourceId: resource.resourceId
}),
enabled: resource.mode === "inference"
});
const form = useForm<FormValues>({
resolver: zodResolver(formSchema),
defaultValues: {
providerIds: []
}
});
useEffect(() => {
if (!attachedQuery.data) return;
const providers = attachedQuery.data.map((provider) => ({
id: String(provider.providerId),
text: provider.name
}));
setSelectedProviders(providers);
form.reset({
providerIds: attachedQuery.data.map((p) => p.providerId)
});
}, [attachedQuery.data, form]);
const [, formAction, saveLoading] = useActionState(async () => {
const isValid = await form.trigger();
if (!isValid) return;
const data = form.getValues();
try {
await api.post(`/resource/${resource.resourceId}/ai-providers`, {
providers: data.providerIds.map((providerId) => ({
providerId,
modelAccessMode: "catalog"
}))
});
await queryClient.invalidateQueries(
resourceQueries.resourceAiProviders({
resourceId: resource.resourceId
})
);
toast({
title: t("success"),
description: t("aiResourceProvidersUpdated")
});
} catch (error) {
toast({
variant: "destructive",
title: t("aiResourceProvidersErrorUpdate"),
description: formatAxiosError(
error,
t("aiResourceProvidersErrorUpdate")
)
});
}
}, null);
if (resource.mode !== "inference") {
return null;
}
return (
<SettingsContainer>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("aiResourceProviders")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t("aiResourceProvidersDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<SettingsSectionForm variant="half">
<Form {...form}>
<form
action={formAction}
id="public-resource-providers-form"
>
<SettingsFormGrid>
<SettingsFormCell span="full">
<FormField
control={form.control}
name="providerIds"
render={() => (
<FormItem>
<FormLabel>
{t(
"aiResourceProviders"
)}
</FormLabel>
<FormControl>
<AiProvidersSelector
orgId={
resource.orgId
}
selectedProviders={
selectedProviders
}
disabled={
attachedQuery.isLoading ||
saveLoading
}
onSelectProviders={(
providers
) => {
setSelectedProviders(
providers
);
form.setValue(
"providerIds",
providers.map(
(p) =>
parseInt(
p.id,
10
)
),
{
shouldValidate: true
}
);
}}
/>
</FormControl>
<FormDescription>
{t(
"aiResourceProvidersHelp"
)}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
</SettingsFormGrid>
</form>
</Form>
</SettingsSectionForm>
</SettingsSectionBody>
<SettingsSectionFooter>
<Button
type="submit"
form="public-resource-providers-form"
loading={saveLoading}
disabled={attachedQuery.isLoading}
>
{t("saveSettings")}
</Button>
</SettingsSectionFooter>
</SettingsSection>
</SettingsContainer>
); );
} }
src/app/[orgId]/settings/resources/public/[niceId]/layout.tsx
+1 -14
View File
@@ -82,20 +82,7 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
redirect(`/${params.orgId}/settings/resources`); redirect(`/${params.orgId}/settings/resources`);
} }
const isInference = resource.mode === "inference"; const navItems = [
const navItems = isInference
? [
{
title: t("general"),
href: `/{orgId}/settings/resources/public/{niceId}/general`
},
{
title: t("aiResourceProviders"),
href: `/{orgId}/settings/resources/public/{niceId}/providers`
}
]
: [
{ {
title: t("general"), title: t("general"),
href: `/{orgId}/settings/resources/public/{niceId}/general` href: `/{orgId}/settings/resources/public/{niceId}/general`
src/app/[orgId]/settings/resources/public/[niceId]/providers/page.tsx
-230
View File
@@ -1,230 +0,0 @@
"use client";
import {
SettingsContainer,
SettingsFormCell,
SettingsFormGrid,
SettingsSection,
SettingsSectionBody,
SettingsSectionDescription,
SettingsSectionFooter,
SettingsSectionForm,
SettingsSectionHeader,
SettingsSectionTitle
} from "@app/components/Settings";
import {
AiProvidersSelector,
type SelectedAiProvider
} from "@app/components/AiProvidersSelector";
import { Button } from "@app/components/ui/button";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage
} from "@app/components/ui/form";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useResourceContext } from "@app/hooks/useResourceContext";
import { toast } from "@app/hooks/useToast";
import { createApiClient, formatAxiosError } from "@app/lib/api";
import { resourceQueries } from "@app/lib/queries";
import { zodResolver } from "@hookform/resolvers/zod";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useActionState, useEffect, useMemo, useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
export default function PublicResourceProvidersPage() {
const t = useTranslations();
const router = useRouter();
const { env } = useEnvContext();
const api = createApiClient({ env });
const queryClient = useQueryClient();
const { resource } = useResourceContext();
useEffect(() => {
if (resource.mode !== "inference") {
router.replace(
`/${resource.orgId}/settings/resources/public/${resource.niceId}/general`
);
}
}, [router, resource.mode, resource.niceId, resource.orgId]);
const formSchema = useMemo(
() =>
z.object({
providerIds: z.array(z.number().int().positive())
}),
[]
);
type FormValues = z.infer<typeof formSchema>;
const [selectedProviders, setSelectedProviders] = useState<
SelectedAiProvider[]
>([]);
const attachedQuery = useQuery({
...resourceQueries.resourceAiProviders({
resourceId: resource.resourceId
}),
enabled: resource.mode === "inference"
});
const form = useForm<FormValues>({
resolver: zodResolver(formSchema),
defaultValues: {
providerIds: []
}
});
useEffect(() => {
if (!attachedQuery.data) return;
const providers = attachedQuery.data.map((provider) => ({
id: String(provider.providerId),
text: provider.name
}));
setSelectedProviders(providers);
form.reset({
providerIds: attachedQuery.data.map((p) => p.providerId)
});
}, [attachedQuery.data, form]);
const [, formAction, saveLoading] = useActionState(async () => {
const isValid = await form.trigger();
if (!isValid) return;
const data = form.getValues();
try {
await api.post(`/resource/${resource.resourceId}/ai-providers`, {
providers: data.providerIds.map((providerId) => ({
providerId,
modelAccessMode: "catalog"
}))
});
await queryClient.invalidateQueries(
resourceQueries.resourceAiProviders({
resourceId: resource.resourceId
})
);
toast({
title: t("success"),
description: t("aiResourceProvidersUpdated")
});
} catch (error) {
toast({
variant: "destructive",
title: t("aiResourceProvidersErrorUpdate"),
description: formatAxiosError(
error,
t("aiResourceProvidersErrorUpdate")
)
});
}
}, null);
if (resource.mode !== "inference") {
return null;
}
return (
<SettingsContainer>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("aiResourceProviders")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t("aiResourceProvidersDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<SettingsSectionForm variant="half">
<Form {...form}>
<form
action={formAction}
id="public-resource-providers-form"
>
<SettingsFormGrid>
<SettingsFormCell span="full">
<FormField
control={form.control}
name="providerIds"
render={() => (
<FormItem>
<FormLabel>
{t(
"aiResourceProviders"
)}
</FormLabel>
<FormControl>
<AiProvidersSelector
orgId={
resource.orgId
}
selectedProviders={
selectedProviders
}
disabled={
attachedQuery.isLoading ||
saveLoading
}
onSelectProviders={(
providers
) => {
setSelectedProviders(
providers
);
form.setValue(
"providerIds",
providers.map(
(p) =>
parseInt(
p.id,
10
)
),
{
shouldValidate: true
}
);
}}
/>
</FormControl>
<FormDescription>
{t(
"aiResourceProvidersHelp"
)}
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
</SettingsFormGrid>
</form>
</Form>
</SettingsSectionForm>
</SettingsSectionBody>
<SettingsSectionFooter>
<Button
type="submit"
form="public-resource-providers-form"
loading={saveLoading}
disabled={attachedQuery.isLoading}
>
{t("saveSettings")}
</Button>
</SettingsSectionFooter>
</SettingsSection>
</SettingsContainer>
);
}
src/lib/privateResourceForm.ts
+7 -1
View File
@@ -305,7 +305,13 @@ export function buildUpdateSiteResourcePayload(
typeof data.alias === "string" && typeof data.alias === "string" &&
data.alias.trim() data.alias.trim()
? data.alias ? data.alias
: null : null,
domainId: data.httpConfigDomainId
? data.httpConfigDomainId
: undefined,
subdomain: data.httpConfigSubdomain
? data.httpConfigSubdomain
: undefined
}), }),
...((data.mode === "host" || data.mode === "cidr") && { ...((data.mode === "host" || data.mode === "cidr") && {
tcpPortRangeString: data.tcpPortRangeString, tcpPortRangeString: data.tcpPortRangeString,