Merge remote-tracking branch 'upstream/dev' into feature-i18n

src/app/[orgId]/settings/resources/[resourceId]/ResourceInfoBox.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { ArrowRight, InfoIcon, ShieldCheck, ShieldOff } from "lucide-react";
+import { InfoIcon, ShieldCheck, ShieldOff } from "lucide-react";
 import { useResourceContext } from "@app/hooks/useResourceContext";
-import { Separator } from "@app/components/ui/separator";
 import CopyToClipboard from "@app/components/CopyToClipboard";
 import {
     InfoSection,
@@ -11,14 +10,18 @@ import {
     InfoSections,
     InfoSectionTitle
 } from "@app/components/InfoSection";
-import Link from "next/link";
-import { Switch } from "@app/components/ui/switch";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useDockerSocket } from "@app/hooks/useDockerSocket";
 import { useTranslations } from "next-intl";
 
 type ResourceInfoBoxType = {};
 
 export default function ResourceInfoBox({}: ResourceInfoBoxType) {
-    const { resource, authInfo } = useResourceContext();
+    const { resource, authInfo, site } = useResourceContext();
+    const api = createApiClient(useEnvContext());
+
+    const { isEnabled, isAvailable } = useDockerSocket(resource.siteId);
     const t = useTranslations();
 
     let fullUrl = `${resource.ssl ? "https" : "http"}://${resource.fullDomain}`;
@@ -30,7 +33,7 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
                 {t('resourceInfo')}
             </AlertTitle>
             <AlertDescription className="mt-4">
-                <InfoSections cols={4}>
+                <InfoSections cols={isEnabled ? 5 : 4}>
                     {resource.http ? (
                         <>
                             <InfoSection>
@@ -69,6 +72,24 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
                                     {resource.siteName}
                                 </InfoSectionContent>
                             </InfoSection>
+                            {isEnabled && (
+                                <InfoSection>
+                                    <InfoSectionTitle>Socket</InfoSectionTitle>
+                                    <InfoSectionContent>
+                                        {isAvailable ? (
+                                            <span className="text-green-500 flex items-center space-x-2">
+                                                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                                                <span>Online</span>
+                                            </span>
+                                        ) : (
+                                            <span className="text-neutral-500 flex items-center space-x-2">
+                                                <div className="w-2 h-2 bg-gray-500 rounded-full"></div>
+                                                <span>Offline</span>
+                                            </span>
+                                        )}
+                                    </InfoSectionContent>
+                                </InfoSection>
+                            )}
                         </>
                     ) : (
                         <>
@@ -94,7 +115,9 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
                     <InfoSection>
                         <InfoSectionTitle>{t('visibility')}</InfoSectionTitle>
                         <InfoSectionContent>
-                            <span>{resource.enabled ? t('enabled') : t('disabled')}</span>
+                            <span>
+                                {resource.enabled ? t('enabled') : t('disabled')}
+                            </span>
                         </InfoSectionContent>
                     </InfoSection>
                 </InfoSections>

src/app/[orgId]/settings/resources/[resourceId]/layout.tsx

@@ -13,15 +13,7 @@ import { GetOrgResponse } from "@server/routers/org";
 import OrgProvider from "@app/providers/OrgProvider";
 import { cache } from "react";
 import ResourceInfoBox from "./ResourceInfoBox";
-import {
-    Breadcrumb,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator
-} from "@app/components/ui/breadcrumb";
-import Link from "next/link";
+import { GetSiteResponse } from "@server/routers/site";
 import { getTranslations } from 'next-intl/server';
 
 interface ResourceLayoutProps {
@@ -37,6 +29,7 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
 
     let authInfo = null;
     let resource = null;
+    let site = null;
     try {
         const res = await internal.get<AxiosResponse<GetResourceResponse>>(
             `/resource/${params.resourceId}`,
@@ -51,6 +44,19 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
         redirect(`/${params.orgId}/settings/resources`);
     }
 
+    // Fetch site info
+    if (resource.siteId) {
+        try {
+            const res = await internal.get<AxiosResponse<GetSiteResponse>>(
+                `/site/${resource.siteId}`,
+                await authCookieHeader()
+            );
+            site = res.data.data;
+        } catch {
+            redirect(`/${params.orgId}/settings/resources`);
+        }
+    }
+
     try {
         const res = await internal.get<
             AxiosResponse<GetResourceAuthInfoResponse>
@@ -112,7 +118,11 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
             />
 
             <OrgProvider org={org}>
-                <ResourceProvider resource={resource} authInfo={authInfo}>
+                <ResourceProvider
+                    site={site}
+                    resource={resource}
+                    authInfo={authInfo}
+                >
                     <div className="space-y-6">
                         <ResourceInfoBox />
                         <HorizontalTabs items={navItems}>

src/app/[orgId]/settings/resources/[resourceId]/proxy/page.tsx

@@ -41,7 +41,6 @@ import {
     TableBody,
     TableCaption,
     TableCell,
-    TableContainer,
     TableHead,
     TableHeader,
     TableRow
@@ -73,6 +72,7 @@ import {
     CollapsibleContent,
     CollapsibleTrigger
 } from "@app/components/ui/collapsible";
+import { ContainersSelector } from "@app/components/ContainersSelector";
 import { useTranslations } from "next-intl";
 
 const addTargetSchema = z.object({
@@ -163,6 +163,9 @@ export default function ReverseProxyTargets(props: {
         } as z.infer<typeof addTargetSchema>
     });
 
+    const watchedIp = addTargetForm.watch("ip");
+    const watchedPort = addTargetForm.watch("port");
+
     const tlsSettingsForm = useForm<TlsSettingsValues>({
         resolver: zodResolver(tlsSettingsSchema),
         defaultValues: {
@@ -762,12 +765,32 @@ export default function ReverseProxyTargets(props: {
                                     control={addTargetForm.control}
                                     name="ip"
                                     render={({ field }) => (
-                                        <FormItem>
+                                        <FormItem className="relative">
                                             <FormLabel>{t('targetAddr')}</FormLabel>
                                             <FormControl>
                                                 <Input id="ip" {...field} />
                                             </FormControl>
                                             <FormMessage />
+                                            {site && (
+                                                <ContainersSelector
+                                                    site={site}
+                                                    onContainerSelect={(
+                                                        hostname,
+                                                        port
+                                                    ) => {
+                                                        addTargetForm.setValue(
+                                                            "ip",
+                                                            hostname
+                                                        );
+                                                        if (port) {
+                                                            addTargetForm.setValue(
+                                                                "port",
+                                                                port
+                                                            );
+                                                        }
+                                                    }}
+                                                />
+                                            )}
                                         </FormItem>
                                     )}
                                 />
@@ -793,12 +816,7 @@ export default function ReverseProxyTargets(props: {
                                     type="submit"
                                     variant="outlinePrimary"
                                     className="mt-6"
-                                    disabled={
-                                        !(
-                                            addTargetForm.getValues("ip") &&
-                                            addTargetForm.getValues("port")
-                                        )
-                                    }
+                                    disabled={!(watchedIp && watchedPort)}
                                 >
                                     {t('targetSubmit')}
                                 </Button>