console: display running version

cmd/console.go

@@ -60,6 +60,7 @@ manage collected flows.`,
 		if err := ConsoleOptions.Parse(cmd.OutOrStdout(), "console", &config); err != nil {
 			return err
 		}
+		config.Console.Version = Version
 
 		r, err := reporter.New(config.Reporting)
 		if err != nil {

console/config.go

@@ -3,13 +3,25 @@
 
 package console
 
+import (
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+)
+
 // Configuration describes the configuration for the console component.
 type Configuration struct {
 	// ServeLiveFS serve files from the filesystem instead of the embedded versions.
-	ServeLiveFS bool
+	ServeLiveFS bool `yaml:"-"`
+	// Version is the version to display to the user.
+	Version string `yaml:"-"`
 }
 
 // DefaultConfiguration represents the default configuration for the console component.
 func DefaultConfiguration() Configuration {
 	return Configuration{}
 }
+
+func (c *Component) configHandlerFunc(gc *gin.Context) {
+	gc.JSON(http.StatusOK, gin.H{"version": c.config.Version})
+}

console/config_test.go

@@ -0,0 +1,26 @@
+// SPDX-FileCopyrightText: 2022 Free Mobile
+// SPDX-License-Identifier: AGPL-3.0-only
+
+package console
+
+import (
+	"testing"
+
+	"github.com/gin-gonic/gin"
+
+	"akvorado/common/helpers"
+)
+
+func TestConfigHandler(t *testing.T) {
+	config := DefaultConfiguration()
+	config.Version = "1.2.3"
+	_, h, _, _ := NewMock(t, config)
+	helpers.TestHTTPEndpoints(t, h.Address, helpers.HTTPEndpointCases{
+		{
+			URL: "/api/v0/console/configuration",
+			JSONOutput: gin.H{
+				"version": "1.2.3",
+			},
+		},
+	})
+}

console/frontend/src/App.vue

@@ -2,20 +2,22 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-only -->
 
 <template>
-  <ThemeProvider>
-    <TitleProvider>
-      <router-view v-slot="{ Component }">
-        <UserProvider>
-          <div class="flex h-full max-h-screen flex-col print:block">
-            <NavigationBar class="flex-none print:hidden" />
-            <main class="relative flex grow overflow-y-auto">
-              <component :is="Component" />
-            </main>
-          </div>
-        </UserProvider>
-      </router-view>
-    </TitleProvider>
-  </ThemeProvider>
+  <ServerConfigProvider>
+    <ThemeProvider>
+      <TitleProvider>
+        <router-view v-slot="{ Component }">
+          <UserProvider>
+            <div class="flex h-full max-h-screen flex-col print:block">
+              <NavigationBar class="flex-none print:hidden" />
+              <main class="relative flex grow overflow-y-auto">
+                <component :is="Component" />
+              </main>
+            </div>
+          </UserProvider>
+        </router-view>
+      </TitleProvider>
+    </ThemeProvider>
+  </ServerConfigProvider>
 </template>
 
 <script setup>
@@ -25,4 +27,5 @@ import NavigationBar from "@/components/NavigationBar.vue";
 import TitleProvider from "@/components/TitleProvider.vue";
 import ThemeProvider from "@/components/ThemeProvider.vue";
 import UserProvider from "@/components/UserProvider.vue";
+import ServerConfigProvider from "@/components/ServerConfigProvider.vue";
 </script>

console/frontend/src/components/NavigationBar.vue

@@ -11,13 +11,17 @@
       <router-link to="/" class="flex items-center">
         <img
           src="@/assets/images/akvorado.svg"
-          class="mr-3 h-6 sm:h-9"
+          class="mr-3 h-9"
           alt="Akvorado Logo"
         />
-        <span
-          class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"
-          >Akvorado</span
-        >
+        <span class="self-center dark:text-white">
+          <span class="block text-xl font-semibold">Akvorado</span>
+          <span
+            class="block max-w-[8em] overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-4 text-gray-600 dark:text-gray-400"
+          >
+            {{ serverConfiguration?.version }}
+          </span>
+        </span>
       </router-link>
       <div class="flex md:order-2">
         <DarkModeSwitcher />
@@ -64,7 +68,7 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, inject } from "vue";
 import { useRoute } from "vue-router";
 import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
 import {
@@ -77,6 +81,7 @@ import {
 import DarkModeSwitcher from "@/components/DarkModeSwitcher.vue";
 import UserMenu from "@/components/UserMenu.vue";
 
+const serverConfiguration = inject("server-configuration");
 const route = useRoute();
 const navigation = computed(() => [
   { name: "Home", icon: HomeIcon, link: "/", current: route.path == "/" },

console/frontend/src/components/ServerConfigProvider.vue

@@ -0,0 +1,16 @@
+<!-- SPDX-FileCopyrightText: 2022 Free Mobile -->
+<!-- SPDX-License-Identifier: AGPL-3.0-only -->
+
+<template>
+  <slot></slot>
+</template>
+
+<script setup>
+import { provide, readonly } from "vue";
+import { useFetch } from "@vueuse/core";
+
+// TODO: handle error
+const { data } = useFetch("/api/v0/console/configuration").get().json();
+
+provide("server-configuration", readonly(data));
+</script>

console/root.go

@@ -83,6 +83,7 @@ func (c *Component) Start() error {
 
 	c.d.HTTP.AddHandler("/", netHTTP.HandlerFunc(c.assetsHandlerFunc))
 	endpoint := c.d.HTTP.GinRouter.Group("/api/v0/console", c.d.Auth.UserAuthentication())
+	endpoint.GET("/configuration", c.configHandlerFunc)
 	endpoint.GET("/docs/:name", c.docsHandlerFunc)
 	endpoint.GET("/widget/flow-last", c.widgetFlowLastHandlerFunc)
 	endpoint.GET("/widget/flow-rate", c.widgetFlowRateHandlerFunc)