diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json index 5f6395b94..dbabee392 100644 --- 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 index 52c07b0cc..8c3d85d4c 100644 --- 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" /> - + - + - + - + - + {{ t('standalone.real_time_monitor.host') }} {{ t('standalone.real_time_monitor.traffic') }} diff --git a/src/components/standalone/monitoring/vpn/ClientsTrafficByHourCard.vue b/src/components/standalone/monitoring/vpn/ClientsTrafficByHourCard.vue index 4eb02fdc1..b7e2c8634 100644 --- 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 index 6a7d5bf6f..330947349 100644 --- 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 index d45b7faed..f569fedd4 100644 --- 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 index a89d274be..1df2bc157 100644 --- 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 = [ {