create basic public inference resource

This commit is contained in:
miloschwartz
2026-08-04 17:26:57 -04:00
parent 1696fc37a8
commit 149eb17b27
11 changed files with 558 additions and 145 deletions
@@ -225,11 +225,6 @@ export default function AiProviderNetworkPage() {
}}
/>
</FormControl>
<FormDescription>
{t(
"aiProviderRoutingModeDescription"
)}
</FormDescription>
<FormMessage />
</FormItem>
)}
@@ -237,6 +232,36 @@ export default function AiProviderNetworkPage() {
</SettingsFormCell>
)}
<SettingsFormCell span="full">
<FormField
control={form.control}
name="skipTlsVerification"
render={({ field }) => (
<FormItem>
<FormControl>
<SwitchInput
id="edit-skip-tls"
label={t(
"aiProviderSkipTlsVerification"
)}
description={t(
"aiProviderSkipTlsVerificationDescription"
)}
checked={
field.value ??
false
}
onCheckedChange={
field.onChange
}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
{showUpstream && (
<SettingsFormCell span="half">
<FormField
@@ -280,36 +305,6 @@ export default function AiProviderNetworkPage() {
/>
</SettingsFormCell>
)}
<SettingsFormCell span="half">
<FormField
control={form.control}
name="skipTlsVerification"
render={({ field }) => (
<FormItem>
<FormControl>
<SwitchInput
id="edit-skip-tls"
label={t(
"aiProviderSkipTlsVerification"
)}
description={t(
"aiProviderSkipTlsVerificationDescription"
)}
checked={
field.value ??
false
}
onCheckedChange={
field.onChange
}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
</SettingsFormGrid>
</form>
</Form>
@@ -371,11 +371,6 @@ export default function CreateAiProviderPage() {
}}
/>
</FormControl>
<FormDescription>
{t(
"aiProviderRoutingModeDescription"
)}
</FormDescription>
<FormMessage />
</FormItem>
)}
@@ -383,6 +378,36 @@ export default function CreateAiProviderPage() {
</SettingsFormCell>
)}
<SettingsFormCell span="full">
<FormField
control={form.control}
name="skipTlsVerification"
render={({ field }) => (
<FormItem>
<FormControl>
<SwitchInput
id="skip-tls"
label={t(
"aiProviderSkipTlsVerification"
)}
description={t(
"aiProviderSkipTlsVerificationDescription"
)}
checked={
field.value ??
false
}
onCheckedChange={
field.onChange
}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
{showUpstream && (
<SettingsFormCell span="half">
<FormField
@@ -426,36 +451,6 @@ export default function CreateAiProviderPage() {
/>
</SettingsFormCell>
)}
<SettingsFormCell span="half">
<FormField
control={form.control}
name="skipTlsVerification"
render={({ field }) => (
<FormItem>
<FormControl>
<SwitchInput
id="skip-tls"
label={t(
"aiProviderSkipTlsVerification"
)}
description={t(
"aiProviderSkipTlsVerificationDescription"
)}
checked={
field.value ??
false
}
onCheckedChange={
field.onChange
}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
</SettingsFormGrid>
</SettingsSectionForm>
@@ -114,14 +114,20 @@ export default function GeneralForm() {
.refine(
(data) => {
// For non-HTTP resources, proxyPort should be defined
if (!["http", "ssh", "rdp", "vnc"].includes(resource.mode)) {
if (
!["http", "ssh", "rdp", "vnc", "inference"].includes(
resource.mode
)
) {
return data.proxyPort !== undefined;
}
// For HTTP resources, proxyPort should be undefined
return data.proxyPort === undefined;
},
{
message: !["http", "ssh", "rdp", "vnc"].includes(resource.mode)
message: !["http", "ssh", "rdp", "vnc", "inference"].includes(
resource.mode
)
? "Port number is required for non-HTTP resources"
: "Port number should not be set for HTTP resources",
path: ["proxyPort"]
@@ -153,7 +159,7 @@ export default function GeneralForm() {
let resourcePolicyId: number | null | undefined;
if (!["tcp", "udp"].includes(resource.mode)) {
if (!["tcp", "udp", "inference"].includes(resource.mode)) {
if (hasResourcePolicies || selectedSharedPolicyId === null) {
resourcePolicyId = selectedSharedPolicyId;
}
@@ -339,7 +345,7 @@ export default function GeneralForm() {
/>
</SettingsFormCell>
{!["http", "ssh", "rdp", "vnc"].includes(
{!["http", "ssh", "rdp", "vnc", "inference"].includes(
resource.mode
) && (
<SettingsFormCell span="half">
@@ -393,7 +399,7 @@ export default function GeneralForm() {
</SettingsFormCell>
)}
{["http", "ssh", "rdp", "vnc"].includes(
{["http", "ssh", "rdp", "vnc", "inference"].includes(
resource.mode
) && (
<SettingsFormCell span="full">
@@ -453,9 +459,11 @@ export default function GeneralForm() {
</div>
</SettingsFormCell>
)}
{ !["tcp", "udp"].includes(
resource.mode
) && !env.flags.disableEnterpriseFeatures && (
{!["tcp", "udp", "inference"].includes(
resource.mode
) &&
!env.flags
.disableEnterpriseFeatures && (
<>
<SettingsFormCell span="full">
<SettingsSubsectionHeader>
@@ -0,0 +1,15 @@
import type { Metadata } from "next";
import { redirect } from "next/navigation";
export const metadata: Metadata = {
title: "Public Resource"
};
export default async function PublicResourceInferencePage(props: {
params: Promise<{ niceId: string; orgId: string }>;
}) {
const params = await props.params;
redirect(
`/${params.orgId}/settings/resources/public/${params.niceId}/providers`
);
}
@@ -82,16 +82,29 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
redirect(`/${params.orgId}/settings/resources`);
}
const navItems = [
{
title: t("general"),
href: `/{orgId}/settings/resources/public/{niceId}/general`
},
{
title: t(`${resource.mode}Settings`),
href: `/{orgId}/settings/resources/public/{niceId}/${resource.mode}`
}
];
const isInference = resource.mode === "inference";
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"),
href: `/{orgId}/settings/resources/public/{niceId}/general`
},
{
title: t(`${resource.mode}Settings`),
href: `/{orgId}/settings/resources/public/{niceId}/${resource.mode}`
}
];
if (["http", "ssh", "rdp", "vnc"].includes(resource.mode)) {
navItems.push(
@@ -0,0 +1,232 @@
"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())
.min(1, t("aiResourceProvidersRequired"))
}),
[t]
);
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>
);
}
@@ -72,6 +72,10 @@ import {
LocalTarget,
ProxyResourceTargetsForm
} from "@app/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm";
import {
AiProvidersSelector,
type SelectedAiProvider
} from "@app/components/AiProvidersSelector";
import { AxiosResponse } from "axios";
import { ChevronsUpDown, ExternalLink } from "lucide-react";
import { useTranslations } from "next-intl";
@@ -245,6 +249,10 @@ export default function Page() {
// Target management state (managed by ProxyResourceTargetsForm; mirrored here for onSubmit)
const [targets, setTargets] = useState<LocalTarget[]>([]);
const [selectedProviders, setSelectedProviders] = useState<
SelectedAiProvider[]
>([]);
const [showProvidersError, setShowProvidersError] = useState(false);
// SSH-specific state
const [sshServerMode, setSshServerMode] = useState<"standard" | "native">(
@@ -333,7 +341,7 @@ export default function Page() {
!env.flags.disableEnterpriseFeatures;
const availableTypes = useMemo((): NewResourceType[] => {
const base: NewResourceType[] = ["http"];
const base: NewResourceType[] = ["http", "inference"];
if (enterpriseModesAllowed) {
base.push("ssh", "rdp", "vnc");
}
@@ -347,6 +355,9 @@ export default function Page() {
if (!availableTypes.includes(resourceType)) {
setResourceType("http");
}
if (resourceType !== "inference") {
setShowProvidersError(false);
}
}, [availableTypes, resourceType]);
const baseResourceFormSchema = useMemo(
@@ -478,29 +489,42 @@ export default function Page() {
? finalizeSubdomainSanitize(httpData.subdomain, true)
: undefined;
const effectiveMode = isNative
? "native"
: standardDaemonLocation;
const portVal = sshDaemonPortForm.getValues().authDaemonPort;
const effectivePort =
!isNative &&
standardDaemonLocation === "remote" &&
pamMode === "push" &&
portVal
? Number(portVal)
: undefined;
Object.assign(payload, {
subdomain: sanitizedSubdomain
? toASCII(sanitizedSubdomain)
: undefined,
domainId: httpData.domainId,
protocol: "tcp",
mode: resourceType,
pamMode,
authDaemonMode: effectiveMode,
authDaemonPort: effectivePort || undefined
mode: resourceType
});
if (resourceType === "inference") {
Object.assign(payload, {
aiProviders: selectedProviders.map((provider) => ({
providerId: parseInt(provider.id, 10),
modelAccessMode: "catalog"
}))
});
} else if (resourceType === "ssh") {
const effectiveMode = isNative
? "native"
: standardDaemonLocation;
const portVal =
sshDaemonPortForm.getValues().authDaemonPort;
const effectivePort =
!isNative &&
standardDaemonLocation === "remote" &&
pamMode === "push" &&
portVal
? Number(portVal)
: undefined;
Object.assign(payload, {
pamMode,
authDaemonMode: effectiveMode,
authDaemonPort: effectivePort || undefined
});
}
} else {
const tcpUdpData = tcpUdpForm.getValues();
Object.assign(payload, {
@@ -529,7 +553,11 @@ export default function Page() {
const newNiceId = res.data.data.niceId;
setNiceId(newNiceId);
if (resourceType === "http") {
if (resourceType === "inference") {
router.push(
`/${orgId}/settings/resources/public/${newNiceId}/general`
);
} else if (resourceType === "http") {
if (targets.length > 0) {
try {
for (const target of targets) {
@@ -754,16 +782,17 @@ export default function Page() {
let typeLabels: Partial<Record<NewResourceType, string>> = {
http: "HTTP",
inference: t("createInternalResourceDialogModeInference"),
tcp: "TCP",
udp: "UDP"
};
if (enterpriseModesAllowed) {
typeLabels = {
typeLabels = {
...typeLabels,
ssh: "SSH",
rdp: "RDP",
vnc: "VNC",
vnc: "VNC"
};
}
@@ -1376,6 +1405,71 @@ export default function Page() {
/>
)}
{resourceType === "inference" && (
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("aiResourceProviders")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t(
"aiResourceProvidersDescription"
)}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<SettingsSectionForm variant="half">
<SettingsFormGrid>
<SettingsFormCell span="full">
<div className="space-y-2">
<Label>
{t(
"aiResourceProviders"
)}
</Label>
<AiProvidersSelector
orgId={
orgId as string
}
selectedProviders={
selectedProviders
}
onSelectProviders={(
providers
) => {
setSelectedProviders(
providers
);
if (
providers.length >
0
) {
setShowProvidersError(
false
);
}
}}
/>
<p className="text-sm text-muted-foreground">
{t(
"aiResourceProvidersHelp"
)}
</p>
{showProvidersError && (
<p className="text-sm text-destructive">
{t(
"aiResourceProvidersRequired"
)}
</p>
)}
</div>
</SettingsFormCell>
</SettingsFormGrid>
</SettingsSectionForm>
</SettingsSectionBody>
</SettingsSection>
)}
<div className="flex justify-end space-x-2 mt-8">
<Button
type="button"
@@ -1399,6 +1493,16 @@ export default function Page() {
const tcpValid = !isHttpResource
? await tcpUdpForm.trigger()
: true;
const providersValid =
resourceType !== "inference" ||
selectedProviders.length > 0;
if (
resourceType === "inference" &&
!providersValid
) {
setShowProvidersError(true);
}
if (
resourceType === "ssh" &&
@@ -1423,13 +1527,18 @@ export default function Page() {
baseValid &&
domainValid &&
tcpValid &&
bgValid
bgValid &&
providersValid
) {
onSubmit();
}
}}
loading={createLoading}
disabled={!areAllTargetsValid() || browserGatewayDisabled || createLoading}
disabled={
!areAllTargetsValid() ||
browserGatewayDisabled ||
createLoading
}
>
{t("resourceCreate")}
</Button>