added version in the UI

Author: Piotr

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "logdy-ui",
   "private": true,
-  "version": "0.13.1",
+  "version": "0.13.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -21,6 +21,7 @@
     "vue-json-pretty": "^2.4.0"
   },
   "devDependencies": {
+    "@types/node": "^22.9.1",
     "@vitejs/plugin-vue": "^4.5.2",
     "monaco-editor": "^v0.37.0-dev.20230314",
     "typescript": "^5.3.3",

package.json

@@ -47,6 +47,7 @@ const changeTraceResolution = (delta: number) => {
 }
 
 const leftColHidden = ref<boolean>(false)
+const version = __APP_VERSION__
 
 storageLogs.startClearingUnknowns()
 
@@ -577,6 +578,9 @@ const updateSampleLine = () => {
         <div class="logo">
           <a href="https://logdy.dev" target="_blank"><img src="/logdy-transparent.png" /></a>
         </div>
+        <div>
+          <span style="font-size: 11px; opacity: 0.6;">v{{ version }}</span>
+        </div>
         <div class="docs link-style">
           <a href="https://logdy.dev/docs/quick-start" target="_blank">Docs
           </a>
@@ -678,10 +682,10 @@ const updateSampleLine = () => {
               <td class="cell" v-if="store.correlationFilter" style="min-width: 50px;">
                 <div v-if="store.tracesRows[row.id] && store.tracesRows[row.id].id === row.id" class="trace-block"
                   v-tooltip="store.tracesRows[row.id].label || ''" :style="{
-    width: store.tracesRows[row.id].width / traceResolution + 'px',
-    marginLeft: store.tracesRows[row.id].offset / traceResolution + 'px',
-    ...store.tracesRows[row.id].style
-  }">
+                    width: store.tracesRows[row.id].width / traceResolution + 'px',
+                    marginLeft: store.tracesRows[row.id].offset / traceResolution + 'px',
+                    ...store.tracesRows[row.id].style
+                  }">
                   {{ store.tracesRows[row.id].label || '&nbsp' }}
                 </div>
                 <template v-else>-</template>

src/App.vue

@@ -15,7 +15,7 @@
     .left {
       display: flex;
       align-items: center;
-  
+
       .logo img {
         height: 40px;
       }

src/app.scss

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

src/vite-env.d.ts

@@ -17,6 +17,9 @@ const monacoEditorPlugin = isObjectWithDefaultFunction(monacoEditorPluginModule)
 export default defineConfig({
   plugins: [vue(), monacoEditorPlugin({ languageWorkers: ['typescript'] })],
   base: "",
+  define: {
+    '__APP_VERSION__': JSON.stringify(process.env.npm_package_version),
+  },
   server: {
     host: "0.0.0.0",
     port: 1001,