show newt version on site

messages/en-US.json

@@ -763,6 +763,7 @@
     "newtEndpoint": "Endpoint",
     "newtId": "ID",
     "newtSecretKey": "Secret",
+    "newtVersion": "Version",
     "architecture": "Architecture",
     "sites": "Sites",
     "siteWgAnyClients": "Use any WireGuard client to connect. You will have to address internal resources using the peer IP.",

server/routers/site/getSite.ts

@@ -42,9 +42,12 @@ async function query(siteId?: number, niceId?: string, orgId?: string) {
     }
 }
 
-export type GetSiteResponse = NonNullable<
+type SiteQueryRow = NonNullable<Awaited<ReturnType<typeof query>>>;
-    Awaited<ReturnType<typeof query>>
+
->["sites"] & { newtId: string | null };
+export type GetSiteResponse = SiteQueryRow["sites"] & {
+    newtId: string | null;
+    newtVersion: string | null;
+};
 
 registry.registerPath({
     method: "get",
@@ -100,7 +103,8 @@ export async function getSite(
 
         const data: GetSiteResponse = {
             ...site.sites,
-            newtId: site.newt ? site.newt.newtId : null
+            newtId: site.newt ? site.newt.newtId : null,
+            newtVersion: site.newt?.version ?? null
         };
 
         return response<GetSiteResponse>(res, {

src/components/SiteInfoCard.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { useSiteContext } from "@app/hooks/useSiteContext";
 import {
     InfoSection,
@@ -9,41 +9,29 @@ import {
     InfoSectionTitle
 } from "@app/components/InfoSection";
 import { useTranslations } from "next-intl";
-import { useEnvContext } from "@app/hooks/useEnvContext";
 
 type SiteInfoCardProps = {};
 
-export default function SiteInfoCard({}: SiteInfoCardProps) {
+function formatPublicEndpoint(endpoint: string) {
-    const { site, updateSite } = useSiteContext();
+    return endpoint.includes(":")
-    const t = useTranslations();
+        ? endpoint.substring(0, endpoint.lastIndexOf(":"))
-    const { env } = useEnvContext();
+        : endpoint;
-
-    const getConnectionTypeString = (type: string) => {
-        if (type === "newt") {
-            return "Newt";
-        } else if (type === "wireguard") {
-            return "WireGuard";
-        } else if (type === "local") {
-            return t("local");
-        } else {
-            return t("unknown");
 }
-    };
 
-    return (
+export default function SiteInfoCard({}: SiteInfoCardProps) {
-        <Alert>
+    const { site } = useSiteContext();
-            <AlertDescription>
+    const t = useTranslations();
-                <InfoSections cols={site.endpoint ? 4 : 3}>
+
+    const identifierSection = (
         <InfoSection>
             <InfoSectionTitle>{t("identifier")}</InfoSectionTitle>
             <InfoSectionContent>{site.niceId}</InfoSectionContent>
         </InfoSection>
-                    {(site.type == "newt" || site.type == "wireguard") && (
+    );
-                        <>
+
+    const statusSection = (
         <InfoSection>
-                                <InfoSectionTitle>
+            <InfoSectionTitle>{t("status")}</InfoSectionTitle>
-                                    {t("status")}
-                                </InfoSectionTitle>
             <InfoSectionContent>
                 {site.online ? (
                     <div className="text-green-500 flex items-center space-x-2">
@@ -58,28 +46,100 @@ export default function SiteInfoCard({}: SiteInfoCardProps) {
                 )}
             </InfoSectionContent>
         </InfoSection>
-                        </>
+    );
-                    )}
+
+    const endpointSection = site.endpoint ? (
+        <InfoSection>
+            <InfoSectionTitle>{t("publicIpEndpoint")}</InfoSectionTitle>
+            <InfoSectionContent>
+                {formatPublicEndpoint(site.endpoint)}
+            </InfoSectionContent>
+        </InfoSection>
+    ) : null;
+
+    if (site.type === "newt") {
+        return (
+            <Alert>
+                <AlertDescription>
+                    <InfoSections cols={site.endpoint ? 5 : 4}>
+                        {identifierSection}
+                        {statusSection}
                         <InfoSection>
                             <InfoSectionTitle>
                                 {t("connectionType")}
                             </InfoSectionTitle>
-                        <InfoSectionContent>
+                            <InfoSectionContent>Newt</InfoSectionContent>
-                            {getConnectionTypeString(site.type)}
-                        </InfoSectionContent>
                         </InfoSection>
-                    {site.endpoint && (
                         <InfoSection>
                             <InfoSectionTitle>
-                                {t("publicIpEndpoint")}
+                                {t("newtVersion")}
                             </InfoSectionTitle>
                             <InfoSectionContent>
-                                {site.endpoint.includes(":")
+                                {site.newtVersion
-                                    ? site.endpoint.substring(0, site.endpoint.lastIndexOf(":"))
+                                    ? `v${site.newtVersion}`
-                                    : site.endpoint}
+                                    : "-"}
                             </InfoSectionContent>
                         </InfoSection>
-                    )}
+                        {endpointSection}
+                    </InfoSections>
+                </AlertDescription>
+            </Alert>
+        );
+    }
+
+    if (site.type === "wireguard") {
+        return (
+            <Alert>
+                <AlertDescription>
+                    <InfoSections cols={site.endpoint ? 4 : 3}>
+                        {identifierSection}
+                        {statusSection}
+                        <InfoSection>
+                            <InfoSectionTitle>
+                                {t("connectionType")}
+                            </InfoSectionTitle>
+                            <InfoSectionContent>WireGuard</InfoSectionContent>
+                        </InfoSection>
+                        {endpointSection}
+                    </InfoSections>
+                </AlertDescription>
+            </Alert>
+        );
+    }
+
+    if (site.type === "local") {
+        return (
+            <Alert>
+                <AlertDescription>
+                    <InfoSections cols={site.endpoint ? 3 : 2}>
+                        {identifierSection}
+                        <InfoSection>
+                            <InfoSectionTitle>
+                                {t("connectionType")}
+                            </InfoSectionTitle>
+                            <InfoSectionContent>
+                                {t("local")}
+                            </InfoSectionContent>
+                        </InfoSection>
+                        {endpointSection}
+                    </InfoSections>
+                </AlertDescription>
+            </Alert>
+        );
+    }
+
+    return (
+        <Alert>
+            <AlertDescription>
+                <InfoSections cols={site.endpoint ? 3 : 2}>
+                    {identifierSection}
+                    <InfoSection>
+                        <InfoSectionTitle>
+                            {t("connectionType")}
+                        </InfoSectionTitle>
+                        <InfoSectionContent>{t("unknown")}</InfoSectionContent>
+                    </InfoSection>
+                    {endpointSection}
                 </InfoSections>
             </AlertDescription>
         </Alert>