fix: hours in vpn charts; fix labels

NethServer · Oct 2, 2024 · 1e23e3a · 1e23e3a
1 parent cf6b00c
commit 1e23e3a
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 23 deletions.
diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
@@ -1809,7 +1809,7 @@
       "today_traffic": "Today traffic",
       "recent_traffic": "Recent traffic",
       "host": "Host",
-      "hosts": "Hosts",
+      "local_hosts": "Local hosts",
       "application": "Application",
       "applications": "Applications",
       "protocol": "Protocol",
@@ -1820,9 +1820,10 @@
       "interface_name_traffic": "{name} traffic",
       "blocked_threats": "Blocked threats",
       "blocked_threats_by_hour": "Blocked threats by hour",
-      "malware_by_direction": "Malware by direction",
-      "malware_by_category": "Malware by category",
+      "threats_by_direction": "Threats by direction",
+      "threats_by_category": "Threats by category",
       "brute_force_attacks": "Brute force attacks",
+      "most_frequently_blocked_ip_addresses": "Most frequently blocked IP addresses",
       "blocked_ip_addresses_by_hour": "Blocked IP addresses by hour",
       "times_blocked": "Times blocked",
       "blocked_ip_addresses": "Blocked IP addresses",

diff --git a/src/components/standalone/monitoring/SecurityMonitor.vue b/src/components/standalone/monitoring/SecurityMonitor.vue
@@ -133,7 +133,7 @@ async function getMalwareReport() {
       }
     ]
 
-    // malware by direction chart
+    // threats by direction chart
 
     malwareByDirectionChartLabels.value = Object.keys(res.data.malware_by_chain)
     const malwareByDirectionChartData = Object.values(res.data.malware_by_chain)
@@ -170,7 +170,7 @@ async function getMalwareReport() {
       }
     ]
 
-    // malware by category chart
+    // threats by category chart
 
     malwareByCategoryChartLabels.value = Object.keys(res.data.malware_by_category)
     const malwareByCategoryChartData = Object.values(res.data.malware_by_category)
@@ -394,9 +394,9 @@ async function getAttackReport() {
             height="25vh"
           />
         </NeCard>
-        <!-- malware by direction -->
+        <!-- threats by direction -->
         <NeCard
-          :title="t('standalone.real_time_monitor.malware_by_direction')"
+          :title="t('standalone.real_time_monitor.threats_by_direction')"
           :skeletonLines="4"
           :loading="loading.getMalwareReport || loading.getThreatShieldSettings"
           :errorTitle="error.getMalwareReport"
@@ -417,9 +417,9 @@ async function getAttackReport() {
             height="25vh"
           />
         </NeCard>
-        <!-- malware by category -->
+        <!-- threats by category -->
         <NeCard
-          :title="t('standalone.real_time_monitor.malware_by_category')"
+          :title="t('standalone.real_time_monitor.threats_by_category')"
           :skeletonLines="4"
           :loading="loading.getMalwareReport || loading.getThreatShieldSettings"
           :errorTitle="error.getMalwareReport"
@@ -474,9 +474,9 @@ async function getAttackReport() {
             height="25vh"
           />
         </NeCard>
-        <!-- brute force attacks -->
+        <!-- most frequently blocked IP addresses -->
         <NeCard
-          :title="t('standalone.real_time_monitor.brute_force_attacks')"
+          :title="t('standalone.real_time_monitor.most_frequently_blocked_ip_addresses')"
           :skeletonLines="5"
           :loading="loading.getAttackReport || loading.getThreatShieldSettings"
           :errorTitle="error.getAttackReport"

diff --git a/src/components/standalone/monitoring/TrafficByHourChart.vue b/src/components/standalone/monitoring/TrafficByHourChart.vue
@@ -36,8 +36,9 @@ const options: any = {
         source: 'auto',
         autoSkip: true,
         color: themeStore.isLight ? GRAY_700 : GRAY_200,
-        callback: function (value: number) {
-          return `${padStart(value.toString(), 2, '0')}:00`
+        callback: function (value: any) {
+          const label = (this as any).getLabelForValue(value)
+          return `${padStart(label.toString(), 2, '0')}:00`
         }
       },
       grid: {
@@ -78,7 +79,7 @@ const options: any = {
         },
         // format tooltip title
         title: function (context: any) {
-          return `${padStart(context[0].parsed.x.toString(), 2, '0')}:00`
+          return `${padStart(context[0].label, 2, '0')}:00`
         }
       }
     },

diff --git a/src/components/standalone/monitoring/VpnMonitor.vue b/src/components/standalone/monitoring/VpnMonitor.vue
@@ -395,7 +395,7 @@ function getTunnelName(tunnelId: string) {
           :day="today"
           class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 3xl:col-span-4"
         ></ConnectedClientsByHourCard>
-        <!-- connected clients by hour -->
+        <!-- client traffic by hour -->
         <TrafficByClientByHourCard
           :ovpnInstance="ovpnInstance"
           :ovpnUsers="ovpnUsers[ovpnInstance] || []"

diff --git a/src/components/standalone/monitoring/traffic/InstantHostTrafficCard.vue b/src/components/standalone/monitoring/traffic/InstantHostTrafficCard.vue
@@ -42,12 +42,16 @@ function formatTraffic(value: number) {
 
 <template>
   <NeCard
-    :title="t('standalone.real_time_monitor.hosts')"
+    :title="t('standalone.real_time_monitor.local_hosts')"
     :skeletonLines="5"
     :errorTitle="error"
     :errorDescription="errorDescription"
   >
-    <NeTable :ariaLabel="t('standalone.real_time_monitor.hosts')" cardBreakpoint="sm" class="mt-2">
+    <NeTable
+      :ariaLabel="t('standalone.real_time_monitor.local_hosts')"
+      cardBreakpoint="sm"
+      class="mt-2"
+    >
       <NeTableHead>
         <NeTableHeadCell>{{ t('standalone.real_time_monitor.host') }}</NeTableHeadCell>
         <NeTableHeadCell>{{ t('standalone.real_time_monitor.traffic') }}</NeTableHeadCell>

diff --git a/src/components/standalone/monitoring/vpn/ClientsTrafficByHourCard.vue b/src/components/standalone/monitoring/vpn/ClientsTrafficByHourCard.vue
@@ -11,6 +11,7 @@ import { getAxiosErrorMessage, NeCard } from '@nethesis/vue-components'
 import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import TrafficByHourChart from '../TrafficByHourChart.vue'
+import { padStart } from 'lodash-es'
 
 const props = defineProps<{
   ovpnInstance: string
@@ -40,7 +41,12 @@ async function getOvpnTrafficByHour() {
       instance: props.ovpnInstance,
       day: props.day
     })
-    chartLabels.value = res.data.hours.map((data: any[]) => data[0])
+    chartLabels.value = res.data.hours.map((data: any[]) => {
+      // convert hours from UTC to local time
+      const localDate = new Date(`${props.day}T${data[0]}:00:00Z`)
+      const localHours = localDate.getHours()
+      return padStart(localHours.toString(), 2, '0')
+    })
     const chartData = res.data.hours.map((data: any[]) => data[1])
     chartDatasets.value = [
       {

diff --git a/src/components/standalone/monitoring/vpn/ConnectedClientsByHourCard.vue b/src/components/standalone/monitoring/vpn/ConnectedClientsByHourCard.vue
@@ -11,6 +11,7 @@ import { ubusCall } from '@/lib/standalone/ubus'
 import { useThemeStore } from '@/stores/theme'
 import { CYAN_500, CYAN_600 } from '@/lib/color'
 import ConnectedClientsByHourChart from './ConnectedClientsByHourChart.vue'
+import { padStart } from 'lodash-es'
 
 const props = defineProps<{
   ovpnInstance: string
@@ -40,7 +41,12 @@ async function getConnectedClientsByHour() {
       instance: props.ovpnInstance,
       day: props.day
     })
-    chartLabels.value = res.data.hours.map((data: any[]) => data[0])
+    chartLabels.value = res.data.hours.map((data: any[]) => {
+      // convert hours from UTC to local time
+      const localDate = new Date(`${props.day}T${data[0]}:00:00Z`)
+      const localHours = localDate.getHours()
+      return padStart(localHours.toString(), 2, '0')
+    })
     const chartData = res.data.hours.map((data: any[]) => data[1])
     chartDatasets.value = [
       {

diff --git a/src/components/standalone/monitoring/vpn/ConnectedClientsByHourChart.vue b/src/components/standalone/monitoring/vpn/ConnectedClientsByHourChart.vue
@@ -35,8 +35,9 @@ const options: any = {
         source: 'auto',
         autoSkip: true,
         color: themeStore.isLight ? GRAY_700 : GRAY_200,
-        callback: function (value: number) {
-          return `${padStart(value.toString(), 2, '0')}:00`
+        callback: function (value: any) {
+          const label = (this as any).getLabelForValue(value)
+          return `${padStart(label.toString(), 2, '0')}:00`
         }
       },
       grid: {
@@ -61,7 +62,7 @@ const options: any = {
       callbacks: {
         // format tooltip title
         title: function (context: any) {
-          return `${padStart(context[0].parsed.x.toString(), 2, '0')}:00`
+          return `${padStart(context[0].label, 2, '0')}:00`
         }
       }
     },

diff --git a/src/components/standalone/monitoring/vpn/TrafficByClientByHourCard.vue b/src/components/standalone/monitoring/vpn/TrafficByClientByHourCard.vue
@@ -12,6 +12,7 @@ import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { OvpnUser } from '../VpnMonitor.vue'
 import TrafficByHourChart from '../TrafficByHourChart.vue'
+import { padStart } from 'lodash-es'
 
 const props = defineProps<{
   ovpnInstance: string
@@ -74,7 +75,12 @@ async function getClientTraffic() {
       day: props.day,
       user: selectedClient.value
     })
-    chartLabels.value = res.data.hours.map((data: any) => data[0])
+    chartLabels.value = res.data.hours.map((data: any) => {
+      // convert hours from UTC to local time
+      const localDate = new Date(`${props.day}T${data[0]}:00:00Z`)
+      const localHours = localDate.getHours()
+      return padStart(localHours.toString(), 2, '0')
+    })
     const chartData = res.data.hours.map((data: any) => data[1])
     chartDatasets.value = [
       {