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,6 +2,7 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-only -->
 
 <template>
+  <ServerConfigProvider>
     <ThemeProvider>
       <TitleProvider>
         <router-view v-slot="{ Component }">
@@ -16,6 +17,7 @@
         </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 dark:text-white">
+          <span class="block text-xl font-semibold">Akvorado</span>
           <span
-          class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"
-          >Akvorado</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)