console: add a configuration option for widgets on the home page

console/config.go

@@ -17,6 +17,8 @@ type Configuration struct {
 	Version string `yaml:"-"`
 	// DefaultVisualizeOptions define some defaults for the "visualize" tab.
 	DefaultVisualizeOptions VisualizeOptionsConfiguration
+	// HomepageTopWidgets defines the list of widgets to display on the home page.
+	HomepageTopWidgets []string `validate:"dive,oneof=src-as dst-as src-country dst-country exporter protocol etype src-port dst-port"`
 }
 
 // VisualizeOptionsConfiguration defines options for the "visualize" tab.
@@ -40,6 +42,7 @@ func DefaultConfiguration() Configuration {
 			Filter:     "InIfBoundary = external",
 			Dimensions: []queryColumn{queryColumnSrcAS},
 		},
+		HomepageTopWidgets: []string{"src-as", "src-port", "protocol", "src-country", "etype"},
 	}
 }
 
@@ -47,5 +50,6 @@ func (c *Component) configHandlerFunc(gc *gin.Context) {
 	gc.JSON(http.StatusOK, gin.H{
 		"version":                 c.config.Version,
 		"defaultVisualizeOptions": c.config.DefaultVisualizeOptions,
+		"topWidgets":              c.config.HomepageTopWidgets,
 	})
 }

console/data/docs/02-configuration.md

@@ -376,11 +376,16 @@ The main components of the console service are `http`, `console`,
 `authentication` and `database`. `http` accepts the [same
 configuration](#http) as for the inlet service.
 
-The console itself accepts the `default-visualize-options` key. Here
+The console itself accepts the `default-visualize-options` and the
-is an example:
+`homepage-top-widgets` keys. The first one defines default options for
+the "visualize" tab and the second one defines the widgets to display
+on the home page (among `src-as`, `dst-as`, `src-country`,
+`dst-country`, `exporter`, `protocol`, `etype`, `src-port`, and
+`dst-port`). Here is an example:
 
 ```yaml
 console:
+  homepage-top-widgets: [src-as, src-country, etype]
   default-visualize-options:
     start: 1 day ago
     end: now

console/data/docs/99-changelog.md

@@ -13,7 +13,8 @@ identified with a specific icon:
 
 ## Unreleased
 
-- 🌱 *console*: add configuration for default options of the visualize tab
+- 🌱 *console*: add configuration for default options of the visualize
+  tab and the top widgets to display on the home page.
 
 ## 1.5.0 - 2022-07-20
 

console/frontend/src/views/HomePage.vue

@@ -32,25 +32,11 @@
         :refresh="refreshOften"
         class="order-last col-span-2 row-span-3 xl:order-none"
       />
-      <WidgetTop what="src-as" title="Top AS" :refresh="refreshOccasionally" />
       <WidgetTop
-        what="src-port"
+        v-for="widget in topWidgets"
-        title="Top ports"
+        :key="widget"
-        :refresh="refreshOccasionally"
+        :what="widget"
-      />
+        :title="widgetTitle(widget)"
-      <WidgetTop
-        what="protocol"
-        title="Top protocols"
-        :refresh="refreshOccasionally"
-      />
-      <WidgetTop
-        what="src-country"
-        title="Top countries"
-        :refresh="refreshOccasionally"
-      />
-      <WidgetTop
-        what="etype"
-        title="IPv4/IPv6"
         :refresh="refreshOccasionally"
       />
       <WidgetGraph
@@ -62,6 +48,7 @@
 </template>
 
 <script setup>
+import { inject, computed } from "vue";
 import { useInterval } from "@vueuse/core";
 import WidgetLastFlow from "./HomePage/WidgetLastFlow.vue";
 import WidgetFlowRate from "./HomePage/WidgetFlowRate.vue";
@@ -69,6 +56,21 @@ import WidgetExporters from "./HomePage/WidgetExporters.vue";
 import WidgetTop from "./HomePage/WidgetTop.vue";
 import WidgetGraph from "./HomePage/WidgetGraph.vue";
 
+const serverConfiguration = inject("server-configuration");
+const topWidgets = computed(() => serverConfiguration.value?.topWidgets ?? []);
+const widgetTitle = (name) =>
+  ({
+    "src-as": "Top source AS",
+    "dst-as": "Top destination AS",
+    "src-country": "Top source countries",
+    "dst-country": "Top destination countries",
+    exporter: "Top exporters",
+    protocol: "Top protocols",
+    etype: "IPv4/IPv6",
+    "src-port": "Top source ports",
+    "dst-port": "Top destination ports",
+  }[name] ?? "???");
+
 const refreshOften = useInterval(10_000);
 const refreshOccasionally = useInterval(60_000);
 const refreshInfrequently = useInterval(600_000);