feat: add health API to retrieve application version and display in sidebar

Signed-off-by: Noste <83548733+Noooste@users.noreply.github.com>

.github/workflows/build.yml

@@ -51,6 +51,7 @@ jobs:
           context: .
           platforms: ${{ matrix.platform }}
           labels: ${{ steps.meta.outputs.labels }}
+          build-args: VERSION=${{ steps.meta.outputs.version }}
           cache-from: type=gha,scope=build-${{ matrix.platform }}
           cache-to: type=gha,mode=max,scope=build-${{ matrix.platform }}
           outputs: type=image,name=${{ secrets.DOCKER_REGISTRY }},push-by-digest=true,name-canonical=true,push=true

Dockerfile

@@ -29,12 +29,14 @@ RUN --mount=type=cache,target=/go/pkg/mod \
 
 COPY backend .
 
+ARG VERSION=dev
+
 RUN --mount=type=cache,target=/root/.cache/go-build \
     swag init
 
 RUN --mount=type=cache,target=/go/pkg/mod \
     --mount=type=cache,target=/root/.cache/go-build \
-    CGO_ENABLED=0 GOOS=${TARGETOS} GOARCH=${TARGETARCH} go build -a -installsuffix cgo -o garage-ui .
+    CGO_ENABLED=0 GOOS=${TARGETOS} GOARCH=${TARGETARCH} go build -a -installsuffix cgo -ldflags "-X main.version=${VERSION}" -o garage-ui .
 
 FROM alpine:3.23.3
 

backend/main.go

@@ -54,7 +54,7 @@ import (
 //	@name						Authorization
 //	@description				Type "Bearer" followed by a space and JWT token.
 
-const version = "0.1.0"
+var version = "dev"
 
 func main() {
 	// Parse command-line flags

frontend/src/components/layout/sidebar.tsx

@@ -3,6 +3,8 @@ import {cn} from '@/lib/utils';
 import {Database, Key, LayoutDashboard, LogOut, Server, User} from 'lucide-react';
 import {useAuthStore} from '@/store/auth-store';
 import {Button} from '@/components/ui/button';
+import { useQuery } from '@tanstack/react-query';
+import { healthApi, garageApi } from '@/lib/api';
 
 interface NavItem {
   title: string;
@@ -46,6 +48,24 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
     logout();
   };
 
+  const { data: uiVersion } = useQuery({
+    queryKey: ['ui-version'],
+    queryFn: healthApi.getVersion,
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  });
+
+  const { data: nodeInfo } = useQuery({
+    queryKey: ['garage-version'],
+    queryFn: () => garageApi.getNodeInfo('self'),
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  });
+
+  const garageVersion = nodeInfo
+    ? Object.values(nodeInfo.success)[0]?.garageVersion
+    : undefined;
+
   return (
     <div
       className={cn(
@@ -107,6 +127,13 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
           </Button>
         </div>
       )}
+      {(uiVersion || garageVersion) && (
+        <div className="px-4 pb-3 text-xs text-muted-foreground text-center">
+          {uiVersion && `UI ${uiVersion}`}
+          {uiVersion && garageVersion && ' | '}
+          {garageVersion && `Garage ${garageVersion}`}
+        </div>
+      )}
     </div>
   );
 }

frontend/src/lib/api.ts

@@ -158,6 +158,14 @@ export const authApi = {
   },
 };
 
+// Health API
+export const healthApi = {
+  getVersion: async (): Promise<string> => {
+    const response = await api.get('/v1/health');
+    return response.data.data.version as string;
+  },
+};
+
 // Bucket API
 export const bucketsApi = {
   list: async (): Promise<Bucket[]> => {