add information about version and build date to UI

Author: Amper

.github/workflows/release.yml

@@ -23,9 +23,28 @@ jobs:
         with:
           go-version: 1.25.1
 
+      - name: Setup Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: 24
+
       - name: Check licenses and vulnerabilities
         run: make check
 
+      - name: Set version
+      - name: Update package.json version
+        run: |
+          if [[ "${{ github.ref_type }}" == "tag" ]]; then
+            TAG_VERSION=$(echo "${{ github.ref_name }}" | sed 's/^v//')
+          else
+            LATEST_TAG=$(git tag --sort=-version:refname | grep -E '^v[0-9]+\.[0-9]+\.[0-9]+(-.*)?$' | head -n 1)
+            [ -z "$LATEST_TAG" ] && { echo "No release tag found"; exit 1; }
+            TAG_VERSION=$(echo "$LATEST_TAG" | sed 's/^v//')
+            echo "Using latest tag: $LATEST_TAG"
+          fi
+          sed -i "s/\${VERSION}/$TAG_VERSION/g" server.json
+          echo "Version: $TAG_VERSION"
+
       - name: Run ui build
         run: make ui-build
 

cmd/sql-to-logsql/web/ui/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "sql-to-logsql",
   "private": true,
-  "version": "0.0.0",
+  "version": "${VERSION}",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",
-    "@types/node": "^24.5.2",
+    "@types/node": "^24.7.0",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^5.0.3",

cmd/sql-to-logsql/web/ui/package.json

@@ -3,21 +3,28 @@ import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/co
 import {InfoIcon, LinkIcon} from "lucide-react";
 import {Button} from "@/components/ui/button.tsx";
 import {Separator} from "@/components/ui/separator.tsx";
+import {Badge} from "@/components/ui/badge.tsx";
 
 export function Docs() {
   return (
    <Card className={"w-full min-w-[20rem] max-lg:hidden"}>
      <CardHeader>
-       <CardTitle>Information about SQL to LogsQL</CardTitle>
+       <CardTitle className={"flex flex-row gap-2 items-center"}>
+         <span>Information about SQL to LogsQL</span>
+         <Badge variant={"outline"}>{__APP_VERSION__}</Badge>
+         <Badge variant={"outline"}>{__BUILD_DATE__}</Badge>
+       </CardTitle>
        <CardDescription>Service that helps to query VictoriaLogs with SQL</CardDescription>
      </CardHeader>
      <CardContent>
-       <a href={"https://github.com/VictoriaMetrics/sql-to-logsql"} target={"_blank"}>
+       <div className={"flex gap-2 items-center"}>
+         <a href={"https://github.com/VictoriaMetrics/sql-to-logsql"} target={"_blank"}>
            <Button variant={"link"} className={"cursor-pointer"}>
-               <LinkIcon />
-               Source code and documentation
+             <LinkIcon />
+             Source code and documentation
            </Button>
-       </a>
+         </a>
+       </div>
        <Separator className={"mt-2 ml-3"} />
        <Accordion
            type="single"

cmd/sql-to-logsql/web/ui/src/components/docs/Docs.tsx

@@ -31,5 +31,8 @@
       ]
     }
   },
-  "include": ["src"]
+  "include": [
+    "src",
+    "vite-env.d.ts"
+  ]
 }

cmd/sql-to-logsql/web/ui/tsconfig.app.json

@@ -0,0 +1,4 @@
+/// <reference types="vite/client" />
+
+declare const __APP_VERSION__: string
+declare const __BUILD_DATE__: string

cmd/sql-to-logsql/web/ui/vite-env.d.ts

@@ -16,4 +16,8 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  define: {
+    '__APP_VERSION__': JSON.stringify(process.env.npm_package_version),
+    '__BUILD_DATE__': JSON.stringify(new Date().toDateString()),
+  },
 });