mirror of
https://github.com/fosrl/pangolin.git
synced 2026-08-14 08:19:51 +02:00
show ai gateway resource details in launcher
This commit is contained in:
miloschwartz
@@ -368,56 +368,65 @@ export default function CreatePrivateResourcePage() {
|
||||
/>
|
||||
</SettingsFormCell>
|
||||
|
||||
{mode === "http" ||
|
||||
(mode === "inference" && (
|
||||
<SettingsFormCell span="full">
|
||||
<FormItem>
|
||||
<DomainPicker
|
||||
orgId={orgId}
|
||||
cols={2}
|
||||
hideFreeDomain
|
||||
onDomainChange={(
|
||||
res
|
||||
) => {
|
||||
if (!res) {
|
||||
{(mode === "http" ||
|
||||
mode === "inference") && (
|
||||
<SettingsFormCell span="full">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="httpConfigDomainId"
|
||||
render={() => (
|
||||
<FormItem>
|
||||
<DomainPicker
|
||||
orgId={orgId}
|
||||
cols={2}
|
||||
hideFreeDomain
|
||||
onDomainChange={(
|
||||
res
|
||||
) => {
|
||||
if (!res) {
|
||||
form.setValue(
|
||||
"httpConfigSubdomain",
|
||||
null
|
||||
);
|
||||
form.setValue(
|
||||
"httpConfigDomainId",
|
||||
null
|
||||
);
|
||||
form.setValue(
|
||||
"httpConfigFullDomain",
|
||||
null
|
||||
);
|
||||
return;
|
||||
}
|
||||
form.setValue(
|
||||
"httpConfigSubdomain",
|
||||
null
|
||||
res.subdomain ??
|
||||
null
|
||||
);
|
||||
form.setValue(
|
||||
"httpConfigDomainId",
|
||||
null
|
||||
res.domainId,
|
||||
{
|
||||
shouldValidate: true
|
||||
}
|
||||
);
|
||||
form.setValue(
|
||||
"httpConfigFullDomain",
|
||||
null
|
||||
res.fullDomain
|
||||
);
|
||||
return;
|
||||
}
|
||||
form.setValue(
|
||||
"httpConfigSubdomain",
|
||||
res.subdomain ??
|
||||
null
|
||||
);
|
||||
form.setValue(
|
||||
"httpConfigDomainId",
|
||||
res.domainId
|
||||
);
|
||||
form.setValue(
|
||||
"httpConfigFullDomain",
|
||||
res.fullDomain
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<FormMessage />
|
||||
<FormDescription>
|
||||
{t(
|
||||
"resourceDomainDescription"
|
||||
)}
|
||||
</FormDescription>
|
||||
</FormItem>
|
||||
</SettingsFormCell>
|
||||
))}
|
||||
}}
|
||||
/>
|
||||
<FormMessage />
|
||||
<FormDescription>
|
||||
{t(
|
||||
"resourceDomainDescription"
|
||||
)}
|
||||
</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</SettingsFormCell>
|
||||
)}
|
||||
|
||||
{(mode === "host" ||
|
||||
(mode === "ssh" && !isNativeSsh)) && (
|
||||
|
||||
@@ -124,13 +124,17 @@ export function PrivateResourceInfoSections({
|
||||
siteResource.fullDomain &&
|
||||
build != "oss"
|
||||
);
|
||||
const showPortRestrictions =
|
||||
isPanel &&
|
||||
siteResource.mode !== "http" &&
|
||||
siteResource.mode !== "inference";
|
||||
|
||||
const numSections =
|
||||
2 +
|
||||
(showDestination ? 1 : 0) +
|
||||
(showAlias ? 1 : 0) +
|
||||
(showCertificate ? 1 : 0) +
|
||||
(isPanel ? 1 : 0);
|
||||
(showPortRestrictions ? 1 : 0);
|
||||
|
||||
const sections = (
|
||||
<InfoSections cols={numSections} layout={isPanel ? "panel" : "default"}>
|
||||
@@ -194,7 +198,7 @@ export function PrivateResourceInfoSections({
|
||||
</InfoSection>
|
||||
) : null}
|
||||
|
||||
{isPanel ? (
|
||||
{showPortRestrictions ? (
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>{t("portRestrictions")}</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
|
||||
@@ -17,6 +17,7 @@ import type {
|
||||
LauncherViewConfig
|
||||
} from "@server/routers/launcher/types";
|
||||
import {
|
||||
LAUNCHER_AI_GATEWAY_GROUP_KEY,
|
||||
LAUNCHER_NO_SITE_GROUP_KEY,
|
||||
LAUNCHER_UNLABELED_GROUP_KEY
|
||||
} from "@server/routers/launcher/types";
|
||||
@@ -148,9 +149,11 @@ export function LauncherGroupSection({
|
||||
const groupTitle =
|
||||
group.groupKey === LAUNCHER_UNLABELED_GROUP_KEY
|
||||
? t("resourceLauncherUnlabeled")
|
||||
: group.groupKey === LAUNCHER_NO_SITE_GROUP_KEY
|
||||
? t("resourceLauncherNoSite")
|
||||
: group.name;
|
||||
: group.groupKey === LAUNCHER_AI_GATEWAY_GROUP_KEY
|
||||
? t("resourceLauncherAiGateway")
|
||||
: group.groupKey === LAUNCHER_NO_SITE_GROUP_KEY
|
||||
? t("resourceLauncherNoSite")
|
||||
: group.name;
|
||||
|
||||
return (
|
||||
<Collapsible
|
||||
|
||||
@@ -2,6 +2,10 @@
|
||||
|
||||
import { CollapsibleTrigger } from "@app/components/ui/collapsible";
|
||||
import type { LauncherGroup } from "@server/routers/launcher/types";
|
||||
import {
|
||||
LAUNCHER_AI_GATEWAY_GROUP_KEY,
|
||||
LAUNCHER_NO_SITE_GROUP_KEY
|
||||
} from "@server/routers/launcher/types";
|
||||
import { ChevronDown, ChevronLeft } from "lucide-react";
|
||||
|
||||
type LauncherGroupTriggerProps = {
|
||||
@@ -21,6 +25,13 @@ function LauncherGroupStatusDot({ group }: { group: LauncherGroup }) {
|
||||
}
|
||||
|
||||
if (group.groupType === "site") {
|
||||
if (
|
||||
group.groupKey === LAUNCHER_AI_GATEWAY_GROUP_KEY ||
|
||||
group.groupKey === LAUNCHER_NO_SITE_GROUP_KEY
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (
|
||||
(group.siteType === "newt" || group.siteType === "wireguard") &&
|
||||
typeof group.siteOnline === "boolean"
|
||||
@@ -47,11 +58,11 @@ export function LauncherGroupTrigger({
|
||||
title,
|
||||
isOpen
|
||||
}: LauncherGroupTriggerProps) {
|
||||
const statusDot = <LauncherGroupStatusDot group={group} />;
|
||||
|
||||
return (
|
||||
<CollapsibleTrigger className="flex w-full items-center gap-2.5 rounded-md bg-accent px-4 py-2.5 text-left transition-colors cursor-pointer">
|
||||
{group.groupType === "site" || group.groupType === "label" ? (
|
||||
<LauncherGroupStatusDot group={group} />
|
||||
) : null}
|
||||
{statusDot}
|
||||
<span className="flex min-w-0 items-center gap-2.5 text-sm font-semibold text-foreground">
|
||||
<span className="truncate">
|
||||
{title} ({group.itemCount})
|
||||
|
||||
@@ -0,0 +1,223 @@
|
||||
"use client";
|
||||
|
||||
import CopyToClipboard from "@app/components/CopyToClipboard";
|
||||
import {
|
||||
SettingsSection,
|
||||
SettingsSectionBody,
|
||||
SettingsSectionDescription,
|
||||
SettingsSectionHeader,
|
||||
SettingsSectionTitle,
|
||||
SettingsSubsectionDescription,
|
||||
SettingsSubsectionHeader,
|
||||
SettingsSubsectionTitle
|
||||
} from "@app/components/Settings";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { createApiClient, formatAxiosError } from "@app/lib/api";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { toast } from "@app/hooks/useToast";
|
||||
import { launcherQueries } from "@app/lib/queries";
|
||||
import type {
|
||||
GetMyVirtualApiKeyResponse,
|
||||
VirtualApiKeyWithResources
|
||||
} from "@server/routers/virtualApiKey/types";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useState } from "react";
|
||||
|
||||
type LauncherInferenceApiKeysSectionProps = {
|
||||
orgId: string;
|
||||
resourceGuid: string;
|
||||
};
|
||||
|
||||
function keyPreview(virtualApiKeyId: string, lastChars: string): string {
|
||||
return `vk-${virtualApiKeyId}••••${lastChars}`;
|
||||
}
|
||||
|
||||
function useRevealSecret(orgId: string, virtualApiKeyId: string) {
|
||||
const t = useTranslations();
|
||||
const api = createApiClient(useEnvContext());
|
||||
const [credential, setCredential] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const revealSecret = () => {
|
||||
if (credential || loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
api.get<AxiosResponse<GetMyVirtualApiKeyResponse>>(
|
||||
`/org/${orgId}/my-virtual-api-keys/${virtualApiKeyId}`
|
||||
)
|
||||
.then((res) => {
|
||||
const secret = res.data.data.virtualApiKey.secret;
|
||||
if (secret) {
|
||||
setCredential(`vk-${virtualApiKeyId}.${secret}`);
|
||||
} else {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("virtualApiKeysErrorFetchSecret"),
|
||||
description: t(
|
||||
"virtualApiKeysErrorFetchSecretDescription"
|
||||
)
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("virtualApiKeysErrorFetchSecret"),
|
||||
description: formatAxiosError(
|
||||
e,
|
||||
t("virtualApiKeysErrorFetchSecretDescription")
|
||||
)
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
return { credential, loading, revealSecret };
|
||||
}
|
||||
|
||||
function PanelKeySecret({
|
||||
orgId,
|
||||
virtualApiKeyId,
|
||||
lastChars
|
||||
}: {
|
||||
orgId: string;
|
||||
virtualApiKeyId: string;
|
||||
lastChars: string;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
const preview = keyPreview(virtualApiKeyId, lastChars);
|
||||
const { credential, loading, revealSecret } = useRevealSecret(
|
||||
orgId,
|
||||
virtualApiKeyId
|
||||
);
|
||||
const displayValue = credential ?? preview;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className="min-w-0 flex-1">
|
||||
<CopyToClipboard
|
||||
text={displayValue}
|
||||
displayText={displayValue}
|
||||
/>
|
||||
</div>
|
||||
{!credential ? (
|
||||
<Button
|
||||
variant="link"
|
||||
size="sm"
|
||||
className="shrink-0 px-0 h-auto"
|
||||
loading={loading}
|
||||
onClick={revealSecret}
|
||||
>
|
||||
{t("myVirtualApiKeysRevealSecret")}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ManualKeyRow({
|
||||
orgId,
|
||||
keyRow
|
||||
}: {
|
||||
orgId: string;
|
||||
keyRow: VirtualApiKeyWithResources;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<div className="space-y-1 min-w-0">
|
||||
<p className="font-medium truncate">
|
||||
{keyRow.name || t("myVirtualApiKeysUnnamed")}
|
||||
</p>
|
||||
{keyRow.description ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{keyRow.description}
|
||||
</p>
|
||||
) : null}
|
||||
<PanelKeySecret
|
||||
orgId={orgId}
|
||||
virtualApiKeyId={keyRow.virtualApiKeyId}
|
||||
lastChars={keyRow.lastChars}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function LauncherInferenceApiKeysSection({
|
||||
orgId,
|
||||
resourceGuid
|
||||
}: LauncherInferenceApiKeysSectionProps) {
|
||||
const t = useTranslations();
|
||||
const { data, isPending, isError } = useQuery(
|
||||
launcherQueries.myVirtualApiKeys(orgId, resourceGuid)
|
||||
);
|
||||
|
||||
return (
|
||||
<SettingsSection>
|
||||
<SettingsSectionHeader>
|
||||
<SettingsSectionTitle>
|
||||
{t("resourceLauncherApiKeys")}
|
||||
</SettingsSectionTitle>
|
||||
<SettingsSectionDescription>
|
||||
{t("resourceLauncherApiKeysDescription")}
|
||||
</SettingsSectionDescription>
|
||||
</SettingsSectionHeader>
|
||||
<SettingsSectionBody>
|
||||
{isPending ? (
|
||||
<div className="flex items-center justify-center py-6 text-muted-foreground">
|
||||
<Loader2 className="size-5 animate-spin" />
|
||||
</div>
|
||||
) : null}
|
||||
{isError ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("resourceLauncherApiKeysError")}
|
||||
</p>
|
||||
) : null}
|
||||
{!isPending && !isError && data ? (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-1 min-w-0">
|
||||
<p className="font-medium">
|
||||
{t("resourceLauncherApiKeysIdentity")}
|
||||
</p>
|
||||
<PanelKeySecret
|
||||
orgId={orgId}
|
||||
virtualApiKeyId={data.userKey.virtualApiKeyId}
|
||||
lastChars={data.userKey.lastChars}
|
||||
/>
|
||||
</div>
|
||||
{data.manualKeys.length > 0 ? (
|
||||
<div>
|
||||
<SettingsSubsectionHeader>
|
||||
<SettingsSubsectionTitle>
|
||||
{t("resourceLauncherApiKeysManual")}
|
||||
</SettingsSubsectionTitle>
|
||||
<SettingsSubsectionDescription>
|
||||
{t(
|
||||
"myVirtualApiKeysManualResourceDescription"
|
||||
)}
|
||||
</SettingsSubsectionDescription>
|
||||
</SettingsSubsectionHeader>
|
||||
<div className="space-y-3">
|
||||
{data.manualKeys.map((keyRow) => (
|
||||
<ManualKeyRow
|
||||
key={keyRow.virtualApiKeyId}
|
||||
orgId={orgId}
|
||||
keyRow={keyRow}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
SettingsSection,
|
||||
SettingsSectionBody,
|
||||
SettingsSectionDescription,
|
||||
SettingsSectionHeader,
|
||||
SettingsSectionTitle
|
||||
} from "@app/components/Settings";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { launcherQueries } from "@app/lib/queries";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
|
||||
const COLLAPSED_ROWS = 5;
|
||||
const GRID_COLUMNS = 2;
|
||||
|
||||
type LauncherInferenceModelsSectionProps = {
|
||||
orgId: string;
|
||||
params:
|
||||
| {
|
||||
resourceType: "public";
|
||||
resourceId: number;
|
||||
}
|
||||
| {
|
||||
resourceType: "site";
|
||||
siteResourceId: number;
|
||||
};
|
||||
};
|
||||
|
||||
export function LauncherInferenceModelsSection({
|
||||
orgId,
|
||||
params
|
||||
}: LauncherInferenceModelsSectionProps) {
|
||||
const t = useTranslations();
|
||||
const { data, isPending, isError } = useQuery(
|
||||
launcherQueries.aiModels(orgId, params)
|
||||
);
|
||||
const models = data?.models ?? [];
|
||||
const [listExpanded, setListExpanded] = useState(false);
|
||||
const [clipHeight, setClipHeight] = useState<number | null>(null);
|
||||
const gridRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const collapsedLimit = GRID_COLUMNS * COLLAPSED_ROWS;
|
||||
const hasOverflow = models.length > collapsedLimit;
|
||||
const isCollapsed = hasOverflow && !listExpanded;
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasOverflow) {
|
||||
setListExpanded(false);
|
||||
}
|
||||
}, [hasOverflow]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!isCollapsed || !gridRef.current) {
|
||||
setClipHeight(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const children = Array.from(gridRef.current.children) as HTMLElement[];
|
||||
const lastVisible = children[collapsedLimit - 1];
|
||||
if (!lastVisible) {
|
||||
setClipHeight(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const gridTop = gridRef.current.getBoundingClientRect().top;
|
||||
const cardBottom = lastVisible.getBoundingClientRect().bottom;
|
||||
// Peek slightly into the next row so the fade has content to soften.
|
||||
setClipHeight(cardBottom - gridTop + 12);
|
||||
}, [isCollapsed, collapsedLimit, models]);
|
||||
|
||||
return (
|
||||
<SettingsSection>
|
||||
<SettingsSectionHeader>
|
||||
<SettingsSectionTitle>
|
||||
{t("resourceLauncherAvailableModels")}
|
||||
</SettingsSectionTitle>
|
||||
<SettingsSectionDescription>
|
||||
{t("resourceLauncherAvailableModelsDescription")}
|
||||
</SettingsSectionDescription>
|
||||
</SettingsSectionHeader>
|
||||
<SettingsSectionBody>
|
||||
{isPending ? (
|
||||
<div className="flex items-center justify-center py-6 text-muted-foreground">
|
||||
<Loader2 className="size-5 animate-spin" />
|
||||
</div>
|
||||
) : null}
|
||||
{isError ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("resourceLauncherAvailableModelsError")}
|
||||
</p>
|
||||
) : null}
|
||||
{!isPending && !isError && models.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("resourceLauncherAvailableModelsEmpty")}
|
||||
</p>
|
||||
) : null}
|
||||
{!isPending && !isError && models.length > 0 ? (
|
||||
<div>
|
||||
<div className="relative">
|
||||
<div
|
||||
ref={gridRef}
|
||||
className={cn(
|
||||
"grid grid-cols-2 gap-2",
|
||||
isCollapsed && "overflow-hidden"
|
||||
)}
|
||||
style={
|
||||
isCollapsed && clipHeight != null
|
||||
? { maxHeight: clipHeight }
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{models.map((model) => (
|
||||
<div
|
||||
key={model.modelId}
|
||||
className="flex min-w-0 flex-col gap-0.5 rounded-md border border-input px-2.5 py-2"
|
||||
>
|
||||
<span className="block truncate font-mono text-xs font-medium">
|
||||
{model.modelKey}
|
||||
</span>
|
||||
{model.providerName ? (
|
||||
<span className="block truncate text-xs text-muted-foreground">
|
||||
{model.providerName}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{isCollapsed ? (
|
||||
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-t from-card from-25% via-card/80 to-transparent" />
|
||||
) : null}
|
||||
</div>
|
||||
{isCollapsed ? (
|
||||
<div className="relative z-10 flex justify-center pt-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="text"
|
||||
size="sm"
|
||||
className="bg-card px-2 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => setListExpanded(true)}
|
||||
>
|
||||
{t("aiProviderModelsViewMore", {
|
||||
count: models.length - collapsedLimit
|
||||
})}
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
{hasOverflow && listExpanded ? (
|
||||
<div className="flex justify-center pt-1">
|
||||
<Button
|
||||
type="button"
|
||||
variant="text"
|
||||
size="sm"
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
onClick={() => setListExpanded(false)}
|
||||
>
|
||||
{t("aiProviderModelsViewLess")}
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
);
|
||||
}
|
||||
@@ -8,6 +8,8 @@ import {
|
||||
InfoSectionTitle
|
||||
} from "@app/components/InfoSection";
|
||||
import { PrivateResourceInfoSections } from "@app/components/PrivateResourceInfoBox";
|
||||
import { LauncherInferenceApiKeysSection } from "@app/components/resource-launcher/LauncherInferenceApiKeysSection";
|
||||
import { LauncherInferenceModelsSection } from "@app/components/resource-launcher/LauncherInferenceModelsSection";
|
||||
import {
|
||||
SettingsSection,
|
||||
SettingsSectionBody,
|
||||
@@ -146,7 +148,8 @@ function HealthStatusDisplay({
|
||||
);
|
||||
}
|
||||
|
||||
const PUBLIC_AUTH_BROWSER_MODES = ["http", "ssh", "rdp", "vnc"];
|
||||
const PUBLIC_AUTH_METHODS_MODES = ["http", "ssh", "rdp", "vnc"];
|
||||
const PUBLIC_AUTH_BADGE_MODES = [...PUBLIC_AUTH_METHODS_MODES, "inference"];
|
||||
|
||||
function AuthMethodStatusDisplay({ enabled }: { enabled: boolean }) {
|
||||
const t = useTranslations();
|
||||
@@ -227,20 +230,24 @@ function PublicResourceAuthMethods({
|
||||
}
|
||||
|
||||
function PublicResourceDetails({
|
||||
orgId,
|
||||
launcherResource,
|
||||
resource,
|
||||
authInfo
|
||||
}: {
|
||||
orgId: string;
|
||||
launcherResource: LauncherResource;
|
||||
resource: GetResourceResponse;
|
||||
authInfo: GetResourceAuthInfoResponse;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
const supportsAuth = PUBLIC_AUTH_BROWSER_MODES.includes(
|
||||
resource.mode || ""
|
||||
);
|
||||
const mode = resource.mode || "";
|
||||
const isInference = mode === "inference";
|
||||
const showAuthBadge = PUBLIC_AUTH_BADGE_MODES.includes(mode);
|
||||
const showAuthMethods = PUBLIC_AUTH_METHODS_MODES.includes(mode);
|
||||
const showHealth = !isInference;
|
||||
const authState = derivePublicAuthState(resource.mode, authInfo);
|
||||
const infoSectionCount = supportsAuth ? 4 : 3;
|
||||
const infoSectionCount = 2 + (showAuthBadge ? 1 : 0) + (showHealth ? 1 : 0);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
@@ -275,7 +282,7 @@ function PublicResourceDetails({
|
||||
/>
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
{supportsAuth ? (
|
||||
{showAuthBadge ? (
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("authentication")}
|
||||
@@ -295,30 +302,54 @@ function PublicResourceDetails({
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
) : null}
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>{t("health")}</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
<HealthStatusDisplay health={resource.health} />
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
{showHealth ? (
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>
|
||||
{t("health")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
<HealthStatusDisplay
|
||||
health={resource.health}
|
||||
/>
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
) : null}
|
||||
</InfoSections>
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
{supportsAuth ? (
|
||||
{showAuthMethods ? (
|
||||
<PublicResourceAuthMethods authInfo={authInfo} />
|
||||
) : null}
|
||||
{isInference ? (
|
||||
<>
|
||||
<LauncherInferenceModelsSection
|
||||
orgId={orgId}
|
||||
params={{
|
||||
resourceType: "public",
|
||||
resourceId: resource.resourceId
|
||||
}}
|
||||
/>
|
||||
<LauncherInferenceApiKeysSection
|
||||
orgId={orgId}
|
||||
resourceGuid={resource.resourceGuid}
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PrivateResourceDetails({
|
||||
orgId,
|
||||
launcherResource,
|
||||
resource
|
||||
}: {
|
||||
orgId: string;
|
||||
launcherResource: LauncherResource;
|
||||
resource: GetSiteResourceResponse;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
const isInference = resource.mode === "inference";
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
@@ -365,6 +396,15 @@ function PrivateResourceDetails({
|
||||
/>
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
{isInference ? (
|
||||
<LauncherInferenceModelsSection
|
||||
orgId={orgId}
|
||||
params={{
|
||||
resourceType: "site",
|
||||
siteResourceId: resource.siteResourceId
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -405,6 +445,7 @@ function LauncherResourcePanelBody({
|
||||
if (detail.resourceType === "public") {
|
||||
return (
|
||||
<PublicResourceDetails
|
||||
orgId={orgId}
|
||||
launcherResource={resource}
|
||||
resource={detail.data}
|
||||
authInfo={detail.authInfo}
|
||||
@@ -414,6 +455,7 @@ function LauncherResourcePanelBody({
|
||||
|
||||
return (
|
||||
<PrivateResourceDetails
|
||||
orgId={orgId}
|
||||
launcherResource={resource}
|
||||
resource={detail.data}
|
||||
/>
|
||||
|
||||
@@ -37,7 +37,7 @@ export type LauncherAccessFields = {
|
||||
export function formatPublicResourceAccess(
|
||||
resource: PublicResourceAccessInput
|
||||
): LauncherAccessFields {
|
||||
const browserModes = ["http", "ssh", "rdp", "vnc"];
|
||||
const browserModes = ["http", "ssh", "rdp", "vnc", "inference"];
|
||||
if (!browserModes.includes(resource.mode)) {
|
||||
const port = resource.proxyPort?.toString() ?? "";
|
||||
return {
|
||||
@@ -66,16 +66,8 @@ export function formatPublicResourceAccess(
|
||||
export function formatSiteResourceAccess(
|
||||
resource: SiteResourceAccessInput
|
||||
): LauncherAccessFields {
|
||||
if (resource.alias) {
|
||||
return {
|
||||
accessDisplay: resource.alias,
|
||||
accessCopyValue: resource.alias,
|
||||
accessUrl: null
|
||||
};
|
||||
}
|
||||
|
||||
if (
|
||||
(resource.mode === "http" || resource.mode == "inference") &&
|
||||
(resource.mode === "http" || resource.mode === "inference") &&
|
||||
resource.fullDomain
|
||||
) {
|
||||
const url = `${resource.ssl ? "https" : "http"}://${resource.fullDomain}`;
|
||||
@@ -86,6 +78,14 @@ export function formatSiteResourceAccess(
|
||||
};
|
||||
}
|
||||
|
||||
if (resource.alias) {
|
||||
return {
|
||||
accessDisplay: resource.alias,
|
||||
accessCopyValue: resource.alias,
|
||||
accessUrl: null
|
||||
};
|
||||
}
|
||||
|
||||
const destination = formatSiteResourceDestinationDisplay({
|
||||
mode: resource.mode as SiteResourceDestinationInput["mode"],
|
||||
destination: resource.destination,
|
||||
|
||||
@@ -4,7 +4,7 @@ import type { GetSiteResourceResponse } from "@server/routers/siteResource/getSi
|
||||
|
||||
export type PublicAuthState = "protected" | "not_protected" | "none";
|
||||
|
||||
const BROWSER_MODES = ["http", "ssh", "rdp", "vnc"];
|
||||
const BROWSER_MODES = ["http", "ssh", "rdp", "vnc", "inference"];
|
||||
|
||||
export function derivePublicAuthState(
|
||||
mode: string | null,
|
||||
@@ -37,6 +37,10 @@ export function formatPublicResourceType(
|
||||
return resource.ssl ? "HTTPS" : "HTTP";
|
||||
}
|
||||
|
||||
if (resource.mode === "inference") {
|
||||
return "Inference";
|
||||
}
|
||||
|
||||
const mode = (resource.mode || "").toLowerCase();
|
||||
if (mode === "tcp") {
|
||||
return "TCP";
|
||||
|
||||
@@ -34,6 +34,8 @@ import type {
|
||||
ListLauncherSitesResponse,
|
||||
ListLauncherViewsResponse
|
||||
} from "@server/routers/launcher/types";
|
||||
import type { ListLauncherAiModelsResponse } from "@server/routers/launcher/listLauncherAiModels";
|
||||
import type { ListMyVirtualApiKeysResponse } from "@server/routers/virtualApiKey/types";
|
||||
import type { GetResourcePolicyResponse } from "@server/routers/policy";
|
||||
import type {
|
||||
GetResourcePoliciesResponse,
|
||||
@@ -1776,5 +1778,69 @@ export const launcherQueries = {
|
||||
data: res.data.data
|
||||
};
|
||||
}
|
||||
}),
|
||||
aiModels: (
|
||||
orgId: string,
|
||||
params:
|
||||
| {
|
||||
resourceType: "public";
|
||||
resourceId: number;
|
||||
}
|
||||
| {
|
||||
resourceType: "site";
|
||||
siteResourceId: number;
|
||||
}
|
||||
| null
|
||||
) =>
|
||||
queryOptions({
|
||||
queryKey: ["ORG", orgId, "LAUNCHER", "AI_MODELS", params] as const,
|
||||
enabled: params != null,
|
||||
queryFn: async ({ signal, meta }) => {
|
||||
if (!params) {
|
||||
throw new Error("Resource params are required");
|
||||
}
|
||||
|
||||
if (params.resourceType === "public") {
|
||||
const res = await meta!.api.get<
|
||||
AxiosResponse<ListLauncherAiModelsResponse>
|
||||
>(
|
||||
`/org/${orgId}/launcher/resource/${params.resourceId}/ai-models`,
|
||||
{ signal }
|
||||
);
|
||||
return res.data.data;
|
||||
}
|
||||
|
||||
const res = await meta!.api.get<
|
||||
AxiosResponse<ListLauncherAiModelsResponse>
|
||||
>(
|
||||
`/org/${orgId}/launcher/site-resource/${params.siteResourceId}/ai-models`,
|
||||
{ signal }
|
||||
);
|
||||
return res.data.data;
|
||||
}
|
||||
}),
|
||||
myVirtualApiKeys: (orgId: string, resourceGuid: string | null) =>
|
||||
queryOptions({
|
||||
queryKey: [
|
||||
"ORG",
|
||||
orgId,
|
||||
"LAUNCHER",
|
||||
"MY_VIRTUAL_API_KEYS",
|
||||
resourceGuid
|
||||
] as const,
|
||||
enabled: Boolean(resourceGuid),
|
||||
queryFn: async ({ signal, meta }) => {
|
||||
if (!resourceGuid) {
|
||||
throw new Error("resourceGuid is required");
|
||||
}
|
||||
|
||||
const res = await meta!.api.get<
|
||||
AxiosResponse<ListMyVirtualApiKeysResponse>
|
||||
>(
|
||||
`/org/${orgId}/my-virtual-api-keys?resourceGuid=${encodeURIComponent(resourceGuid)}`,
|
||||
{ signal }
|
||||
);
|
||||
return res.data.data;
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user