calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-08-16 01:09:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

create basic public inference resource

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
messages/en-US.json
+1 -1
View File
@@ -1689,7 +1689,7 @@
"aiProviderRoutingModeUrl": "Upstream URL", "aiProviderRoutingModeUrl": "Upstream URL",
"aiProviderRoutingModeUrlDescription": "Call a public or private API base URL", "aiProviderRoutingModeUrlDescription": "Call a public or private API base URL",
"aiProviderRoutingModeTarget": "Site Targets", "aiProviderRoutingModeTarget": "Site Targets",
"aiProviderRoutingModeTargetDescription": "Route through HTTPS targets on your sites", "aiProviderRoutingModeTargetDescription": "Route through targets on your sites",
"aiProviderRoutingModeTargetNote": "After creating this provider, configure site targets on the Network Settings tab.", "aiProviderRoutingModeTargetNote": "After creating this provider, configure site targets on the Network Settings tab.",
"aiProviderTargetNoOne": "This provider doesn't have any targets. Add a target to route requests through your sites.", "aiProviderTargetNoOne": "This provider doesn't have any targets. Add a target to route requests through your sites.",
"aiProviderSkipTlsVerification": "Skip TLS Verification", "aiProviderSkipTlsVerification": "Skip TLS Verification",
src/app/[orgId]/settings/ai-providers/[providerId]/network/page.tsx
+30 -35
View File
@@ -225,11 +225,6 @@ export default function AiProviderNetworkPage() {
}} }}
/> />
</FormControl> </FormControl>
<FormDescription>
{t(
"aiProviderRoutingModeDescription"
)}
</FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
@@ -237,6 +232,36 @@ export default function AiProviderNetworkPage() {
</SettingsFormCell> </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 && ( {showUpstream && (
<SettingsFormCell span="half"> <SettingsFormCell span="half">
<FormField <FormField
@@ -280,36 +305,6 @@ export default function AiProviderNetworkPage() {
/> />
</SettingsFormCell> </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> </SettingsFormGrid>
</form> </form>
</Form> </Form>
src/app/[orgId]/settings/ai-providers/create/page.tsx
+30 -35
View File
@@ -371,11 +371,6 @@ export default function CreateAiProviderPage() {
}} }}
/> />
</FormControl> </FormControl>
<FormDescription>
{t(
"aiProviderRoutingModeDescription"
)}
</FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
@@ -383,6 +378,36 @@ export default function CreateAiProviderPage() {
</SettingsFormCell> </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 && ( {showUpstream && (
<SettingsFormCell span="half"> <SettingsFormCell span="half">
<FormField <FormField
@@ -426,36 +451,6 @@ export default function CreateAiProviderPage() {
/> />
</SettingsFormCell> </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> </SettingsFormGrid>
</SettingsSectionForm> </SettingsSectionForm>
src/app/[orgId]/settings/resources/public/[niceId]/general/page.tsx
+16 -8
View File
@@ -114,14 +114,20 @@ export default function GeneralForm() {
.refine( .refine(
(data) => { (data) => {
// For non-HTTP resources, proxyPort should be defined // 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; return data.proxyPort !== undefined;
} }
// For HTTP resources, proxyPort should be undefined // For HTTP resources, proxyPort should be undefined
return data.proxyPort === 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 is required for non-HTTP resources"
: "Port number should not be set for HTTP resources", : "Port number should not be set for HTTP resources",
path: ["proxyPort"] path: ["proxyPort"]
@@ -153,7 +159,7 @@ export default function GeneralForm() {
let resourcePolicyId: number | null | undefined; let resourcePolicyId: number | null | undefined;
if (!["tcp", "udp"].includes(resource.mode)) { if (!["tcp", "udp", "inference"].includes(resource.mode)) {
if (hasResourcePolicies || selectedSharedPolicyId === null) { if (hasResourcePolicies || selectedSharedPolicyId === null) {
resourcePolicyId = selectedSharedPolicyId; resourcePolicyId = selectedSharedPolicyId;
} }
@@ -339,7 +345,7 @@ export default function GeneralForm() {
/> />
</SettingsFormCell> </SettingsFormCell>
{!["http", "ssh", "rdp", "vnc"].includes( {!["http", "ssh", "rdp", "vnc", "inference"].includes(
resource.mode resource.mode
) && ( ) && (
<SettingsFormCell span="half"> <SettingsFormCell span="half">
@@ -393,7 +399,7 @@ export default function GeneralForm() {
</SettingsFormCell> </SettingsFormCell>
)} )}
{["http", "ssh", "rdp", "vnc"].includes( {["http", "ssh", "rdp", "vnc", "inference"].includes(
resource.mode resource.mode
) && ( ) && (
<SettingsFormCell span="full"> <SettingsFormCell span="full">
@@ -453,9 +459,11 @@ export default function GeneralForm() {
</div> </div>
</SettingsFormCell> </SettingsFormCell>
)} )}
{ !["tcp", "udp"].includes( {!["tcp", "udp", "inference"].includes(
resource.mode resource.mode
) && !env.flags.disableEnterpriseFeatures && ( ) &&
!env.flags
.disableEnterpriseFeatures && (
<> <>
<SettingsFormCell span="full"> <SettingsFormCell span="full">
<SettingsSubsectionHeader> <SettingsSubsectionHeader>
src/app/[orgId]/settings/resources/public/[niceId]/inference/page.tsx
+15
View File
@@ -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`
);
}
src/app/[orgId]/settings/resources/public/[niceId]/layout.tsx
+23 -10
View File
@@ -82,16 +82,29 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
redirect(`/${params.orgId}/settings/resources`); redirect(`/${params.orgId}/settings/resources`);
} }
const navItems = [ const isInference = resource.mode === "inference";
{
title: t("general"), const navItems = isInference
href: `/{orgId}/settings/resources/public/{niceId}/general` ? [
}, {
{ title: t("general"),
title: t(`${resource.mode}Settings`), href: `/{orgId}/settings/resources/public/{niceId}/general`
href: `/{orgId}/settings/resources/public/{niceId}/${resource.mode}` },
} {
]; 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)) { if (["http", "ssh", "rdp", "vnc"].includes(resource.mode)) {
navItems.push( navItems.push(
src/app/[orgId]/settings/resources/public/[niceId]/providers/page.tsx
+232
View File
@@ -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>
);
}
src/app/[orgId]/settings/resources/public/create/page.tsx
+131 -22
View File
@@ -72,6 +72,10 @@ import {
LocalTarget, LocalTarget,
ProxyResourceTargetsForm ProxyResourceTargetsForm
} from "@app/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm"; } from "@app/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm";
import {
AiProvidersSelector,
type SelectedAiProvider
} from "@app/components/AiProvidersSelector";
import { AxiosResponse } from "axios"; import { AxiosResponse } from "axios";
import { ChevronsUpDown, ExternalLink } from "lucide-react"; import { ChevronsUpDown, ExternalLink } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
@@ -245,6 +249,10 @@ export default function Page() {
// Target management state (managed by ProxyResourceTargetsForm; mirrored here for onSubmit) // Target management state (managed by ProxyResourceTargetsForm; mirrored here for onSubmit)
const [targets, setTargets] = useState<LocalTarget[]>([]); const [targets, setTargets] = useState<LocalTarget[]>([]);
const [selectedProviders, setSelectedProviders] = useState<
SelectedAiProvider[]
>([]);
const [showProvidersError, setShowProvidersError] = useState(false);
// SSH-specific state // SSH-specific state
const [sshServerMode, setSshServerMode] = useState<"standard" | "native">( const [sshServerMode, setSshServerMode] = useState<"standard" | "native">(
@@ -333,7 +341,7 @@ export default function Page() {
!env.flags.disableEnterpriseFeatures; !env.flags.disableEnterpriseFeatures;
const availableTypes = useMemo((): NewResourceType[] => { const availableTypes = useMemo((): NewResourceType[] => {
const base: NewResourceType[] = ["http"]; const base: NewResourceType[] = ["http", "inference"];
if (enterpriseModesAllowed) { if (enterpriseModesAllowed) {
base.push("ssh", "rdp", "vnc"); base.push("ssh", "rdp", "vnc");
} }
@@ -347,6 +355,9 @@ export default function Page() {
if (!availableTypes.includes(resourceType)) { if (!availableTypes.includes(resourceType)) {
setResourceType("http"); setResourceType("http");
} }
if (resourceType !== "inference") {
setShowProvidersError(false);
}
}, [availableTypes, resourceType]); }, [availableTypes, resourceType]);
const baseResourceFormSchema = useMemo( const baseResourceFormSchema = useMemo(
@@ -478,29 +489,42 @@ export default function Page() {
? finalizeSubdomainSanitize(httpData.subdomain, true) ? finalizeSubdomainSanitize(httpData.subdomain, true)
: undefined; : 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, { Object.assign(payload, {
subdomain: sanitizedSubdomain subdomain: sanitizedSubdomain
? toASCII(sanitizedSubdomain) ? toASCII(sanitizedSubdomain)
: undefined, : undefined,
domainId: httpData.domainId, domainId: httpData.domainId,
protocol: "tcp", protocol: "tcp",
mode: resourceType, mode: resourceType
pamMode,
authDaemonMode: effectiveMode,
authDaemonPort: effectivePort || undefined
}); });
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 { } else {
const tcpUdpData = tcpUdpForm.getValues(); const tcpUdpData = tcpUdpForm.getValues();
Object.assign(payload, { Object.assign(payload, {
@@ -529,7 +553,11 @@ export default function Page() {
const newNiceId = res.data.data.niceId; const newNiceId = res.data.data.niceId;
setNiceId(newNiceId); setNiceId(newNiceId);
if (resourceType === "http") { if (resourceType === "inference") {
router.push(
`/${orgId}/settings/resources/public/${newNiceId}/general`
);
} else if (resourceType === "http") {
if (targets.length > 0) { if (targets.length > 0) {
try { try {
for (const target of targets) { for (const target of targets) {
@@ -754,16 +782,17 @@ export default function Page() {
let typeLabels: Partial<Record<NewResourceType, string>> = { let typeLabels: Partial<Record<NewResourceType, string>> = {
http: "HTTP", http: "HTTP",
inference: t("createInternalResourceDialogModeInference"),
tcp: "TCP", tcp: "TCP",
udp: "UDP" udp: "UDP"
}; };
if (enterpriseModesAllowed) { if (enterpriseModesAllowed) {
typeLabels = { typeLabels = {
...typeLabels, ...typeLabels,
ssh: "SSH", ssh: "SSH",
rdp: "RDP", 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"> <div className="flex justify-end space-x-2 mt-8">
<Button <Button
type="button" type="button"
@@ -1399,6 +1493,16 @@ export default function Page() {
const tcpValid = !isHttpResource const tcpValid = !isHttpResource
? await tcpUdpForm.trigger() ? await tcpUdpForm.trigger()
: true; : true;
const providersValid =
resourceType !== "inference" ||
selectedProviders.length > 0;
if (
resourceType === "inference" &&
!providersValid
) {
setShowProvidersError(true);
}
if ( if (
resourceType === "ssh" && resourceType === "ssh" &&
@@ -1423,13 +1527,18 @@ export default function Page() {
baseValid && baseValid &&
domainValid && domainValid &&
tcpValid && tcpValid &&
bgValid bgValid &&
providersValid
) { ) {
onSubmit(); onSubmit();
} }
}} }}
loading={createLoading} loading={createLoading}
disabled={!areAllTargetsValid() || browserGatewayDisabled || createLoading} disabled={
!areAllTargetsValid() ||
browserGatewayDisabled ||
createLoading
}
> >
{t("resourceCreate")} {t("resourceCreate")}
</Button> </Button>
src/components/PublicResourcesTable.tsx
+16 -4
View File
@@ -312,6 +312,12 @@ export default function PublicResourcesTable({
{ {
value: "vnc", value: "vnc",
label: t("vncTitle") label: t("vncTitle")
},
{
value: "inference",
label: t(
"createInternalResourceDialogModeInference"
)
} }
]} ]}
selectedValue={ selectedValue={
@@ -334,7 +340,11 @@ export default function PublicResourcesTable({
? resourceRow.ssl ? resourceRow.ssl
? "HTTPS" ? "HTTPS"
: "HTTP" : "HTTP"
: resourceRow.mode?.toUpperCase()} : resourceRow.mode === "inference"
? t(
"createInternalResourceDialogModeInference"
)
: resourceRow.mode?.toUpperCase()}
</span> </span>
); );
} }
@@ -428,7 +438,7 @@ export default function PublicResourcesTable({
const resourceRow = row.original; const resourceRow = row.original;
if ( if (
!["http", "ssh", "rdp", "vnc"].includes( !["http", "ssh", "rdp", "vnc", "inference"].includes(
resourceRow.mode || "" resourceRow.mode || ""
) )
) { ) {
@@ -894,7 +904,9 @@ function ResourceEnabledForm({
resource, resource,
onToggleResourceEnabled onToggleResourceEnabled
}: ResourceEnabledFormProps) { }: ResourceEnabledFormProps) {
const enabled = ["http", "ssh", "rdp", "vnc"].includes(resource.mode || "") const enabled = ["http", "ssh", "rdp", "vnc", "inference"].includes(
resource.mode || ""
)
? !!resource.domainId && resource.enabled ? !!resource.domainId && resource.enabled
: resource.enabled; : resource.enabled;
const [optimisticEnabled, setOptimisticEnabled] = useOptimistic(enabled); const [optimisticEnabled, setOptimisticEnabled] = useOptimistic(enabled);
@@ -912,7 +924,7 @@ function ResourceEnabledForm({
<Switch <Switch
checked={optimisticEnabled} checked={optimisticEnabled}
disabled={ disabled={
(["http", "ssh", "rdp", "vnc"].includes( (["http", "ssh", "rdp", "vnc", "inference"].includes(
resource.mode || "" resource.mode || ""
) && ) &&
!resource.domainId) || !resource.domainId) ||
src/components/ResourceInfoBox.tsx
+44 -30
View File
@@ -30,15 +30,21 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
const fullUrl = `${resource.ssl ? "https" : "http"}://${toUnicode(resource.fullDomain || "")}`; const fullUrl = `${resource.ssl ? "https" : "http"}://${toUnicode(resource.fullDomain || "")}`;
const isDomainResource = [
"http",
"ssh",
"rdp",
"vnc",
"inference"
].includes(resource.mode);
const showCertificate = !!( const showCertificate = !!(
["http", "ssh", "rdp", "vnc"].includes(resource.mode) && isDomainResource &&
resource.domainId && resource.domainId &&
resource.fullDomain && resource.fullDomain &&
build != "oss" build != "oss"
); );
const showType = !!( const showType = !!(isDomainResource && resource.mode);
["http", "ssh", "rdp", "vnc"].includes(resource.mode) && resource.mode const showAuth = resource.mode !== "inference";
);
const showHealth = const showHealth =
!["ssh", "rdp", "vnc"].includes(resource.mode || "") && !["ssh", "rdp", "vnc"].includes(resource.mode || "") &&
!!resource.health && !!resource.health &&
@@ -47,7 +53,7 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
const numSections = [ const numSections = [
true, // URL or Protocol true, // URL or Protocol
true, // Authentication or Port showAuth || !isDomainResource, // Authentication or Port
showType, showType,
showCertificate, showCertificate,
showHealth, showHealth,
@@ -66,7 +72,7 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
</span> </span>
</InfoSectionContent> </InfoSectionContent>
</InfoSection> */} </InfoSection> */}
{["http", "ssh", "rdp", "vnc"].includes(resource.mode) ? ( {isDomainResource ? (
<> <>
<InfoSection> <InfoSection>
<InfoSectionTitle>URL</InfoSectionTitle> <InfoSectionTitle>URL</InfoSectionTitle>
@@ -94,33 +100,39 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
? resource.ssl ? resource.ssl
? "HTTPS" ? "HTTPS"
: "HTTP" : "HTTP"
: resource.mode?.toUpperCase()} : resource.mode === "inference"
? t(
"createInternalResourceDialogModeInference"
)
: resource.mode?.toUpperCase()}
</span> </span>
</InfoSectionContent> </InfoSectionContent>
</InfoSection> </InfoSection>
)} )}
<InfoSection> {showAuth && (
<InfoSectionTitle> <InfoSection>
{t("authentication")} <InfoSectionTitle>
</InfoSectionTitle> {t("authentication")}
<InfoSectionContent> </InfoSectionTitle>
{authInfo.password || <InfoSectionContent>
authInfo.pincode || {authInfo.password ||
authInfo.sso || authInfo.pincode ||
authInfo.whitelist || authInfo.sso ||
authInfo.headerAuth ? ( authInfo.whitelist ||
<div className="flex items-center space-x-2"> authInfo.headerAuth ? (
<ShieldCheck className="w-4 h-4 flex-shrink-0 text-green-500" /> <div className="flex items-center space-x-2">
<span>{t("protected")}</span> <ShieldCheck className="w-4 h-4 flex-shrink-0 text-green-500" />
</div> <span>{t("protected")}</span>
) : ( </div>
<div className="flex items-center space-x-2"> ) : (
<ShieldOff className="w-4 h-4 flex-shrink-0 text-yellow-500" /> <div className="flex items-center space-x-2">
<span>{t("notProtected")}</span> <ShieldOff className="w-4 h-4 flex-shrink-0 text-yellow-500" />
</div> <span>{t("notProtected")}</span>
)} </div>
</InfoSectionContent> )}
</InfoSection> </InfoSectionContent>
</InfoSection>
)}
</> </>
) : ( ) : (
<> <>
@@ -138,7 +150,9 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
<InfoSectionTitle>{t("port")}</InfoSectionTitle> <InfoSectionTitle>{t("port")}</InfoSectionTitle>
<InfoSectionContent> <InfoSectionContent>
<CopyToClipboard <CopyToClipboard
text={resource.proxyPort!.toString()} text={
resource.proxyPort?.toString() ?? ""
}
isLink={false} isLink={false}
/> />
</InfoSectionContent> </InfoSectionContent>
src/lib/queries.ts
+20
View File
@@ -1300,6 +1300,26 @@ export const resourceQueries = {
return res.data.data.providers; return res.data.data.providers;
} }
}), }),
resourceAiProviders: ({ resourceId }: { resourceId: number }) =>
queryOptions({
queryKey: ["RESOURCES", resourceId, "AI_PROVIDERS"] as const,
queryFn: async ({ signal, meta }) => {
const res = await meta!.api.get<
AxiosResponse<{
providers: Array<{
providerId: number;
modelAccessMode: "catalog" | "allowlist";
name: string;
type: string;
enabled: boolean;
}>;
}>
>(`/resource/${resourceId}/ai-providers`, {
signal
});
return res.data.data.providers;
}
}),
resourceTargets: ({ resourceId }: { resourceId: number }) => resourceTargets: ({ resourceId }: { resourceId: number }) =>
queryOptions({ queryOptions({
queryKey: ["RESOURCES", resourceId, "TARGETS"] as const, queryKey: ["RESOURCES", resourceId, "TARGETS"] as const,