fix: more bugfixes to monitoring

public/i18n/en/translation.json

@@ -50,7 +50,8 @@
     "download": "Download",
     "upload": "Upload",
     "no_data_available": "No data available",
-    "type": "Type"
+    "type": "Type",
+    "unknown": "Unknown"
   },
   "error": {
     "generic_error": "Something went wrong",
@@ -1809,7 +1810,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 +1821,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",

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"

src/components/standalone/monitoring/TrafficByHourChart.vue

@@ -18,7 +18,6 @@ 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 { padStart } from 'lodash-es'
 import { byteFormat1024 } from '@nethesis/vue-components'
 
 const themeStore = useThemeStore()
@@ -36,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 `${label.toString().padStart(2, '0')}:00`
         }
       },
       grid: {
@@ -78,7 +78,7 @@ const options: any = {
         },
         // format tooltip title
         title: function (context: any) {
-          return `${padStart(context[0].parsed.x.toString(), 2, '0')}:00`
+          return `${context[0].label.padStart(2, '0')}:00`
         }
       }
     },

src/components/standalone/monitoring/TrafficMonitor.vue

@@ -77,25 +77,25 @@ const {
         {{ t('standalone.real_time_monitor.today_traffic') }}
       </NeHeading>
 
-      <!-- top protocols -->
+      <!-- top local hosts -->
       <NeCard
-        :title="t('standalone.real_time_monitor.today_top_protocols')"
+        :title="t('standalone.real_time_monitor.today_top_local_hosts')"
         :skeletonLines="6"
         :loading="loadingTrafficSummary"
         :errorTitle="trafficSummaryError"
         :errorDescription="trafficSummaryErrorDescription"
         class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 2xl:col-span-6 5xl:col-span-3"
       >
         <NeEmptyState
-          v-if="!protocolsDatasets[0]?.data.length"
+          v-if="!clientsDatasets[0]?.data.length"
           :title="t('common.no_data_available')"
           :icon="['fas', 'chart-line']"
           class="bg-white dark:bg-gray-950"
         />
         <BasicPieChart
           v-else
-          :labels="protocolsLabels"
-          :datasets="protocolsDatasets"
+          :labels="clientsLabels"
+          :datasets="clientsDatasets"
           byteFormat
           height="25vh"
         />
@@ -146,25 +146,25 @@ const {
           height="25vh"
         />
       </NeCard>
-      <!-- top local hosts -->
+      <!-- top protocols -->
       <NeCard
-        :title="t('standalone.real_time_monitor.today_top_local_hosts')"
+        :title="t('standalone.real_time_monitor.today_top_protocols')"
         :skeletonLines="6"
         :loading="loadingTrafficSummary"
         :errorTitle="trafficSummaryError"
         :errorDescription="trafficSummaryErrorDescription"
         class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 2xl:col-span-6 5xl:col-span-3"
       >
         <NeEmptyState
-          v-if="!clientsDatasets[0]?.data.length"
+          v-if="!protocolsDatasets[0]?.data.length"
           :title="t('common.no_data_available')"
           :icon="['fas', 'chart-line']"
           class="bg-white dark:bg-gray-950"
         />
         <BasicPieChart
           v-else
-          :labels="clientsLabels"
-          :datasets="clientsDatasets"
+          :labels="protocolsLabels"
+          :datasets="protocolsDatasets"
           byteFormat
           height="25vh"
         />

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] || []"

src/components/standalone/monitoring/security/BlockedIpsByHourChart.vue

@@ -18,7 +18,6 @@ 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 { padStart } from 'lodash-es'
 
 const themeStore = useThemeStore()
 
@@ -36,7 +35,7 @@ const options: any = {
         autoSkip: true,
         color: themeStore.isLight ? GRAY_700 : GRAY_200,
         callback: function (value: number) {
-          return `${padStart(value.toString(), 2, '0')}:00`
+          return `${value.toString().padStart(2, '0')}:00`
         }
       },
       grid: {
@@ -61,7 +60,7 @@ const options: any = {
       callbacks: {
         // format tooltip title
         title: function (context: any) {
-          return `${padStart(context[0].parsed.x.toString(), 2, '0')}:00`
+          return `${context[0].parsed.x.toString().padStart(2, '0')}:00`
         }
       }
     },

src/components/standalone/monitoring/security/BlockedPacketsByHourChart.vue

@@ -18,7 +18,6 @@ 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 { padStart } from 'lodash-es'
 
 const themeStore = useThemeStore()
 
@@ -36,7 +35,7 @@ const options: any = {
         autoSkip: true,
         color: themeStore.isLight ? GRAY_700 : GRAY_200,
         callback: function (value: number) {
-          return `${padStart(value.toString(), 2, '0')}:00`
+          return `${value.toString().padStart(2, '0')}:00`
         }
       },
       grid: {
@@ -72,7 +71,7 @@ const options: any = {
         },
         // format tooltip title
         title: function (context: any) {
-          return `${padStart(context[0].parsed.x.toString(), 2, '0')}:00`
+          return `${context[0].parsed.x.toString().padStart(2, '0')}:00`
         }
       }
     },

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>

src/components/standalone/monitoring/vpn/ClientsTrafficByHourCard.vue

@@ -40,7 +40,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 localHours.toString().padStart(2, '0')
+    })
     const chartData = res.data.hours.map((data: any[]) => data[1])
     chartDatasets.value = [
       {

src/components/standalone/monitoring/vpn/ConnectedClientsByHourCard.vue

@@ -40,7 +40,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 localHours.toString().padStart(2, '0')
+    })
     const chartData = res.data.hours.map((data: any[]) => data[1])
     chartDatasets.value = [
       {

src/components/standalone/monitoring/vpn/ConnectedClientsByHourChart.vue

@@ -18,7 +18,6 @@ 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 { padStart } from 'lodash-es'
 
 const themeStore = useThemeStore()
 
@@ -35,8 +34,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 `${label.toString().padStart(2, '0')}:00`
         }
       },
       grid: {
@@ -61,7 +61,7 @@ const options: any = {
       callbacks: {
         // format tooltip title
         title: function (context: any) {
-          return `${padStart(context[0].parsed.x.toString(), 2, '0')}:00`
+          return `${context[0].label.padStart(2, '0')}:00`
         }
       }
     },

src/components/standalone/monitoring/vpn/TrafficByClientByHourCard.vue

@@ -74,7 +74,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 localHours.toString().padStart(2, '0')
+    })
     const chartData = res.data.hours.map((data: any) => data[1])
     chartDatasets.value = [
       {

src/composables/useTopTalkers.ts

@@ -5,6 +5,7 @@ import { onMounted, onUnmounted, ref, toValue, type MaybeRefOrGetter } from 'vue
 import { ubusCall } from '@/lib/standalone/ubus'
 import { useI18n } from 'vue-i18n'
 import { getAxiosErrorMessage } from '@nethesis/vue-components'
+import { upperFirst } from 'lodash-es'
 
 export type TopHost = {
   host: string
@@ -63,7 +64,19 @@ export function useTopTalkers(limit: MaybeRefOrGetter<number> = 20) {
       const res = await ubusCall('ns.talkers', 'list', {
         limit: toValue(limit)
       })
-      topApps.value = res.data.talkers.top_apps
+
+      topApps.value = res.data.talkers.top_apps.map((app: any) => {
+        // beautify app names
+        if (app.name.includes('netify.unclassified')) {
+          app.name = t('common.unknown')
+        } else {
+          if (app.name.includes('netify.')) {
+            app.name = app.name.split('netify.')[1]
+          }
+          app.name = upperFirst(app.name)
+        }
+        return app
+      })
       topHosts.value = res.data.talkers.top_hosts
       topProtocols.value = res.data.talkers.top_protocols
     } catch (err: any) {

src/composables/useTrafficSummary.ts

@@ -3,7 +3,7 @@
 
 import { onMounted, ref } from 'vue'
 import { ubusCall } from '@/lib/standalone/ubus'
-import { padStart, upperFirst } from 'lodash-es'
+import { upperFirst } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
 import { getAxiosErrorMessage } from '@nethesis/vue-components'
 import { useThemeStore } from '@/stores/theme'
@@ -105,8 +105,8 @@ export function useTrafficSummary() {
 
     try {
       const res = await ubusCall('ns.dpireport', 'summary', {
-        year: padStart(year.toString(), 2, '0'),
-        month: padStart(month.toString(), 2, '0'),
+        year: year.toString().padStart(2, '0'),
+        month: month.toString().padStart(2, '0'),
         day: day.toString()
       })
       totalTraffic.value = res.data.total
@@ -134,10 +134,14 @@ export function useTrafficSummary() {
         let appName = app[0]
 
         // beautify app names
-        if (appName.includes('netify.')) {
-          appName = appName.split('netify.')[1]
+        if (app.name === 'unknown') {
+          app.name = t('common.unknown')
+        } else {
+          if (appName.includes('netify.')) {
+            appName = appName.split('netify.')[1]
+          }
+          appName = upperFirst(appName)
         }
-        appName = upperFirst(appName)
         return appName
       })