fix: bugfixes to monitoring section (#371)

public/i18n/en/translation.json

@@ -1814,43 +1814,44 @@
       "applications": "Applications",
       "protocol": "Protocol",
       "protocols": "Protocols",
-      "connections": "Connections",
+      "wans": "WANs",
       "wan_events": "WAN events",
       "wan_name_events": "{name} events",
       "interface_name_traffic": "{name} traffic",
       "blocked_threats": "Blocked threats",
-      "blocked_packets_by_hour": "Blocked packets by hour",
+      "blocked_threats_by_hour": "Blocked threats by hour",
       "malware_by_direction": "Malware by direction",
       "malware_by_category": "Malware by category",
-      "most_blocked_ip_addresses": "Most blocked IP addresses",
+      "brute_force_attacks": "Brute force attacks",
       "blocked_ip_addresses_by_hour": "Blocked IP addresses by hour",
       "times_blocked": "Times blocked",
       "blocked_ip_addresses": "Blocked IP addresses",
       "timestamp": "Timestamp",
       "event": "Event",
-      "remote_access_vpn": "Remote access VPN",
+      "rw_openvpn": "RW OpenVPN",
       "site_to_site_vpn": "Site-to-Site VPN",
       "connected_clients": "Connected clients",
-      "total_clients_traffic_by_hour": "Total clients traffic by hour",
-      "client_sessions": "Client sessions",
+      "total_traffic_by_hour": "Total traffic by hour",
+      "daily_connections": "Daily connections",
       "account": "Account",
       "connected_since": "Connected since",
       "no_sessions": "No sessions",
       "connected_clients_by_hour": "Connected clients by hour",
       "client_traffic_by_hour": "Client traffic by hour",
       "connected_tunnels": "Connected tunnels",
       "configured_tunnels": "Configured tunnels",
-      "tunnel_ovpn_client": "OpenVPN client tunnel",
-      "tunnel_ovpn_server": "OpenVPN server tunnel",
-      "tunnel_ipsec": "IPsec tunnel",
+      "tunnel_ovpn_client": "OpenVPN client",
+      "tunnel_ovpn_server": "OpenVPN server",
+      "tunnel_ipsec": "IPsec",
       "device": "Device",
       "interface": "Interface",
       "threat_shield_disabled_message": "No statistics are available because Threat shield is disabled.",
       "online": "Online",
       "offline": "Offline",
       "no_events_message": "No events, all good",
       "view_all_on_grafana": "View all on Grafana",
-      "no_vpn_network_configured": "No VPN network configured"
+      "no_vpn_network_configured": "No VPN network configured",
+      "blocklist": "Blocklist"
     },
     "ping_latency_monitor": {
       "title": "Ping latency monitor",

src/components/charts/BasicBarChart.vue

@@ -17,6 +17,7 @@ import { Bar } from 'vue-chartjs'
 import { computed } from 'vue'
 import { useThemeStore } from '@/stores/theme'
 import { GRAY_200, GRAY_700, GRAY_800 } from '@/lib/color'
+import { byteFormat1024 } from '@nethesis/vue-components'
 
 const themeStore = useThemeStore()
 
@@ -28,8 +29,9 @@ const props = withDefaults(
     isHorizontal?: boolean
     showLegend?: boolean
     showValuesOnBars?: boolean
+    byteFormat?: boolean
   }>(),
-  { isHorizontal: false, showLegend: false, showValuesOnBars: true }
+  { isHorizontal: false, showLegend: false, showValuesOnBars: true, byteFormat: false }
 )
 
 const options: any = {
@@ -55,6 +57,25 @@ const options: any = {
   plugins: {
     legend: {
       display: props.showLegend
+    },
+    tooltip: {
+      callbacks: {
+        label: function (context: any) {
+          let label = context.dataset.label || ''
+
+          if (label) {
+            label += ': '
+          }
+          if (context.parsed.x !== null) {
+            if (props.byteFormat) {
+              label += byteFormat1024(context.parsed.x)
+            } else {
+              label += context.parsed.x.toLocaleString()
+            }
+          }
+          return label
+        }
+      }
     }
   },
   animation:

src/components/charts/BasicPieChart.vue

@@ -10,19 +10,40 @@ import { useThemeStore } from '@/stores/theme'
 import { GRAY_200, GRAY_700 } from '@/lib/color'
 import { Pie } from 'vue-chartjs'
 import { Chart as ChartJS, registerables } from 'chart.js'
+import { byteFormat1024 } from '@nethesis/vue-components'
 
 const themeStore = useThemeStore()
 
 const props = defineProps<{
   labels: string[]
   datasets: any[]
   height?: string
+  byteFormat?: boolean
 }>()
 
 const options: any = {
   responsive: true,
   maintainAspectRatio: false,
   plugins: {
+    tooltip: {
+      callbacks: {
+        label: function (context: any) {
+          let label = context.dataset.label || ''
+
+          if (label) {
+            label += ': '
+          }
+          if (context.parsed !== null) {
+            if (props.byteFormat) {
+              label += byteFormat1024(context.parsed)
+            } else {
+              label += context.parsed.toLocaleString()
+            }
+          }
+          return label
+        }
+      }
+    },
     legend: {
       position: 'right',
       labels: {
@@ -46,8 +67,11 @@ const options: any = {
                 const ds = data.datasets[0]
                 const arc = meta.data[index]
                 const custom = (arc && arc.custom) || {}
+                const formattedValue = props.byteFormat
+                  ? byteFormat1024(value)
+                  : value?.toLocaleString()
                 return {
-                  text: `${label}: ${value?.toLocaleString()}`,
+                  text: `${label}: ${formattedValue}`,
                   fontColor: themeStore.isLight ? GRAY_700 : GRAY_200,
                   fillStyle: custom.backgroundColor || ds.backgroundColor[index],
                   hidden: isNaN(ds.data[index]) || meta.data[index].hidden,

src/components/standalone/SideMenu.vue

@@ -35,6 +35,21 @@ const menuExpanded: any = ref({
 
 const navigation: Ref<MenuItem[]> = ref([
   { name: t('standalone.dashboard.title'), to: 'dashboard', icon: 'house' },
+  {
+    name: t('standalone.monitoring.title'),
+    to: 'monitoring',
+    icon: 'chart-line',
+    children: [
+      {
+        name: t('standalone.real_time_monitor.title'),
+        to: 'monitoring/real-time-monitoring'
+      },
+      {
+        name: t('standalone.ping_latency_monitor.title'),
+        to: 'monitoring/ping-latency-monitor'
+      }
+    ]
+  },
   {
     name: t('standalone.system.title'),
     icon: 'server',
@@ -192,21 +207,6 @@ const navigation: Ref<MenuItem[]> = ref([
       }
     ]
   },
-  {
-    name: t('standalone.monitoring.title'),
-    to: 'monitoring',
-    icon: 'chart-line',
-    children: [
-      {
-        name: t('standalone.real_time_monitor.title'),
-        to: 'monitoring/real-time-monitoring'
-      },
-      {
-        name: t('standalone.ping_latency_monitor.title'),
-        to: 'monitoring/ping-latency-monitor'
-      }
-    ]
-  },
   { name: t('standalone.logs.title'), to: 'logs', icon: 'list' }
 ])