add information about version and build date to UI

.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.json

@@ -1,7 +1,7 @@
 {
   "name": "sql-to-logsql",
-  "private": true,
-  "version": "0.0.0",
+  "private": false,
+  "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/src/components/docs/Docs.tsx

@@ -3,21 +3,36 @@ 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";
+import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip.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>
+         <Tooltip>
+           <TooltipTrigger className={"cursor-pointer"} asChild={true}>
+             <Badge variant={"outline"}>{__APP_VERSION__ == '${VERSION}' ? 'local' : __APP_VERSION__}</Badge>
+           </TooltipTrigger>
+           <TooltipContent>
+             <div>Version: {__APP_VERSION__ == '${VERSION}' ? 'local' : __APP_VERSION__}</div>
+             <div>Build date: {__BUILD_DATE__}</div>
+           </TooltipContent>
+         </Tooltip>
+       </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/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

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

@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

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

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

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

@@ -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.config.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().toISOString()),
+  },
 });