feat: Add git versioning information on UI

    * Include a VITE_VERSION derived from git describe.
    * Include frontend sidebar information showing VITE_VERSION.

    Closes #1611

Signed-off-by: Alan Peixinho <alan.peixinho@profusion.mobi>

Author: alanpeixinho

.github/workflows/deploy-containers.yaml

@@ -57,11 +57,17 @@ jobs:
       digest: ${{ steps.build.outputs.digest }}
     steps:
       - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
 
       - name: Compute image prefix
         id: meta
         run: echo "prefix=${REGISTRY}/${GITHUB_REPOSITORY,,}" >> "$GITHUB_OUTPUT"
 
+      - name: Compute app version
+        id: version
+        run: echo "value=$(git describe --tags --always)" >> "$GITHUB_OUTPUT"
+
       - name: Log in to GHCR
         uses: docker/login-action@v3
         with:
@@ -79,6 +85,8 @@ jobs:
           context: .
           file: ./dashboard/Dockerfile
           push: true
+          build-args: |
+            VITE_APP_VERSION=${{ steps.version.outputs.value }}
           tags: |
             ${{ steps.meta.outputs.prefix }}/dashboard-frontend:latest
             ${{ steps.meta.outputs.prefix }}/dashboard-frontend:${{ github.sha }}

.github/workflows/deploy-staging.yaml

@@ -67,6 +67,8 @@ jobs:
             cp ~/.env-staging dashboard-staging/.env &&
             cd dashboard-staging &&
             git checkout ${GITHUB_SHA} &&
+            git fetch --tags --depth 1 || true &&
+            export APP_VERSION=\$(git describe --tags --always) &&
             docker compose down &&
             docker compose build --no-cache &&
             docker compose up -d

dashboard/Dockerfile

@@ -8,6 +8,9 @@ RUN npm install -g pnpm@10.33.3 && pnpm install --frozen-lockfile
 
 COPY dashboard/. ./
 
+ARG VITE_APP_VERSION
+ENV VITE_APP_VERSION=$VITE_APP_VERSION
+
 RUN pnpm build
 
 # Stage 2: Copy the static files from the builder stage

dashboard/src/components/SideMenu/SideMenuContent.tsx

@@ -124,6 +124,10 @@ const SideMenuContent = ({
         <div className="flex w-full flex-col space-y-0">
           {dashboardElements}
         </div>
+        <Separator className="bg-on-secondary-10 my-4" />
+        <span className="block w-full px-4 text-xs break-words text-white/40">
+          {import.meta.env.VITE_APP_VERSION}
+        </span>
       </NavigationMenuList>
     </NavigationMenu>
   );

dashboard/vite.config.ts

@@ -1,14 +1,29 @@
 import path from 'path';
+import { execSync } from 'node:child_process';
+
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import tailwindcss from '@tailwindcss/vite';
 
 import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
 
+const appVersion =
+  process.env.VITE_APP_VERSION ||
+  ((): string => {
+    try {
+      return execSync('git describe --tags --always --dirty').toString().trim();
+    } catch {
+      return 'unknown';
+    }
+  })();
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [tailwindcss(), tsconfigPaths(), react(), TanStackRouterVite()],
+  define: {
+    'import.meta.env.VITE_APP_VERSION': JSON.stringify(appVersion),
+  },
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),

docker-compose.yml

@@ -114,6 +114,8 @@ services:
         build:
             context: .
             dockerfile: ./dashboard/Dockerfile
+            args:
+                VITE_APP_VERSION: ${APP_VERSION:-}
         image: ${IMAGE_REGISTRY:-ghcr.io}/${IMAGE_REPOSITORY:-local}/dashboard-frontend:${IMAGE_TAG:-latest}
         volumes:
             - static-data:/data/static