-
+
-
-
- {{ t('standalone.real_time_monitor.timestamp') }}
- {{ t('standalone.real_time_monitor.event') }}
-
-
-
-
-
-
+ {{ t('standalone.real_time_monitor.timestamp') }}
+ {{ t('standalone.real_time_monitor.event') }}
+
+
+
+
+
+
+
+
+
+
+ {{ formatDateLoc(new Date(Number(item.time) * 1000), 'PPpp') || '-' }}
+
+
+
+
-
-
-
-
- {{ item.time }}
-
-
-
-
- {{ item.enabled ? t('common.enabled') : t('common.disabled') }}
-
-
-
-
-
- {{
- item.loaded
- ? t('standalone.nat_helpers.loaded')
- : t('standalone.nat_helpers.not_loaded')
- }}
-
-
-
-
-
-
-
-
- {{
- item.enabled && !item.loaded
- ? t('standalone.nat_helpers.enabled_but_not_loaded_tooltip')
- : t('standalone.nat_helpers.disabled_but_loaded_tooltip')
- }}
-
-
-
-
-
-
-
-
-
-
-
- {{ t('common.edit') }}
-
-
-
-
-
-
-
+
+
+
+
+ {
currentPage = page
}"
- @selectPageSize="
+ @selectPageSize="
(size: number) => {
pageSize = size
}"
- />
-
-
-
-
+ />
+
+
+
diff --git a/src/components/standalone/monitoring/security/BlockedIpsPerHourChart.vue b/src/components/standalone/monitoring/security/BlockedIpsPerHourChart.vue
index 37304b55..f259bcf4 100644
--- a/src/components/standalone/monitoring/security/BlockedIpsPerHourChart.vue
+++ b/src/components/standalone/monitoring/security/BlockedIpsPerHourChart.vue
@@ -19,24 +19,16 @@ import 'chartjs-adapter-date-fns'
import { Line } from 'vue-chartjs'
import { computed } from 'vue'
import { useThemeStore } from '@/stores/theme'
-import { byteFormat1024 } from '@nethesis/vue-components'
import { GRAY_200, GRAY_700, GRAY_800 } from '@/lib/color'
import { padStart } from 'lodash-es'
-//// review
-
const themeStore = useThemeStore()
-const props = defineProps({
- labels: {
- type: Array,
- required: true
- },
- datasets: {
- type: Array,
- required: true
- }
-})
+const props = defineProps<{
+ labels: string[]
+ datasets: any[]
+ height?: string
+}>()
const options: any = {
// turn off animations and data parsing for performance
@@ -97,7 +89,7 @@ const chartData: any = computed(() => {
const chartStyle = computed(() => {
return {
- 'max-height': '25vh',
+ height: props.height || '',
width: '100%',
position: 'relative'
}
diff --git a/src/components/standalone/monitoring/security/BlockedPacketsChart.vue b/src/components/standalone/monitoring/security/BlockedPacketsChart.vue
index 3b28c78f..cdeabb90 100644
--- a/src/components/standalone/monitoring/security/BlockedPacketsChart.vue
+++ b/src/components/standalone/monitoring/security/BlockedPacketsChart.vue
@@ -24,16 +24,11 @@ import { padStart } from 'lodash-es'
const themeStore = useThemeStore()
-const props = defineProps({
- labels: {
- type: Array,
- required: true
- },
- datasets: {
- type: Array,
- required: true
- }
-})
+const props = defineProps<{
+ labels: number[]
+ datasets: any[]
+ height?: string
+}>()
const options: any = {
// turn off animations and data parsing for performance
@@ -106,7 +101,7 @@ const chartData: any = computed(() => {
const chartStyle = computed(() => {
return {
- 'max-height': '25vh',
+ height: props.height || '',
width: '100%',
position: 'relative'
}
diff --git a/src/components/standalone/monitoring/traffic/RecentTrafficChart.vue b/src/components/standalone/monitoring/traffic/RecentTrafficChart.vue
index f701bfaa..5f72546f 100644
--- a/src/components/standalone/monitoring/traffic/RecentTrafficChart.vue
+++ b/src/components/standalone/monitoring/traffic/RecentTrafficChart.vue
@@ -25,16 +25,11 @@ import { padStart } from 'lodash-es'
const themeStore = useThemeStore()
-const props = defineProps({
- labels: {
- type: Array,
- required: true
- },
- datasets: {
- type: Array,
- required: true
- }
-})
+const props = defineProps<{
+ labels: string[]
+ datasets: any[]
+ height?: string
+}>()
const options: any = {
// turn off animations and data parsing for performance
@@ -111,7 +106,7 @@ const chartData: any = computed(() => {
const chartStyle = computed(() => {
return {
- 'max-height': '25vh',
+ height: props.height || '',
width: '100%',
position: 'relative'
}