From a61389708f848ce67f75e7920a8c97fd2e69a526 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Wed, 18 Sep 2024 11:53:18 +0200
Subject: [PATCH] feat: monitoring UI (wip)

---
 public/i18n/en/translation.json               |  10 +-
 src/components/charts/BasicBarChart.vue       |  78 ++++++++++++
 src/components/{ => charts}/BasicPieChart.vue |   0
 .../monitoring => charts}/SimpleStat.vue      |   0
 .../standalone/monitoring/SecurityMonitor.vue | 118 +++++++++++++++--
 .../standalone/monitoring/TrafficMonitor.vue  |   3 +-
 .../security/BlockedIpsPerHourChart.vue       | 120 ++++++++++++++++++
 7 files changed, 316 insertions(+), 13 deletions(-)
 create mode 100644 src/components/charts/BasicBarChart.vue
 rename src/components/{ => charts}/BasicPieChart.vue (100%)
 rename src/components/{standalone/monitoring => charts}/SimpleStat.vue (100%)
 create mode 100644 src/components/standalone/monitoring/security/BlockedIpsPerHourChart.vue

diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
index c66526215..f42c639c8 100644
--- a/public/i18n/en/translation.json
+++ b/public/i18n/en/translation.json
@@ -48,7 +48,8 @@
     "actions": "Actions",
     "go_to_page": "Go to {page}",
     "download": "Download",
-    "upload": "Upload"
+    "upload": "Upload",
+    "no_data_available": "No data available"
   },
   "error": {
     "generic_error": "Something went wrong",
@@ -1810,9 +1811,12 @@
       "wan_name_traffic": "{name} traffic",
       "blocked_threats": "Blocked threats",
       "blocked_packets": "Blocked packets",
-      "blocked_ip_addresses": "Blocked IP addresses",
       "malware_by_direction": "Malware by direction",
-      "malware_by_category": "Malware by category"
+      "malware_by_category": "Malware by category",
+      "most_blocked_ip_addresses": "Most blocked IP addresses",
+      "blocked_ip_addresses_per_hour": "Blocked IP addresses per hour",
+      "times_blocked": "Times blocked",
+      "blocked_ip_addresses": "Blocked IP addresses"
     },
     "ping_latency_monitor": {
       "title": "Ping latency monitor",
diff --git a/src/components/charts/BasicBarChart.vue b/src/components/charts/BasicBarChart.vue
new file mode 100644
index 000000000..04cf316af
--- /dev/null
+++ b/src/components/charts/BasicBarChart.vue
@@ -0,0 +1,78 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  CategoryScale,
+  LinearScale
+} from 'chart.js'
+import { Bar } from 'vue-chartjs'
+import { computed } from 'vue'
+import { useThemeStore } from '@/stores/theme'
+import { GRAY_200, GRAY_700, GRAY_800 } from '@/lib/color'
+
+const themeStore = useThemeStore()
+
+const props = withDefaults(
+  defineProps<{
+    labels: string[]
+    datasets: any[]
+    height?: string
+    isHorizontal?: boolean
+    isLegendShown?: boolean
+  }>(),
+  { isHorizontal: false, isLegendShown: false }
+)
+
+const options: any = {
+  indexAxis: props.isHorizontal ? 'y' : 'x',
+  scales: {
+    x: {
+      ticks: {
+        color: themeStore.isLight ? GRAY_700 : GRAY_200
+      },
+      grid: {
+        color: themeStore.isLight ? GRAY_200 : GRAY_800
+      }
+    },
+    y: {
+      ticks: {
+        color: themeStore.isLight ? GRAY_700 : GRAY_200
+      },
+      grid: {
+        color: themeStore.isLight ? GRAY_200 : GRAY_800
+      }
+    }
+  },
+  plugins: {
+    legend: {
+      display: props.isLegendShown
+    }
+  }
+}
+
+const chartData: any = computed(() => {
+  return { labels: props.labels, datasets: props.datasets }
+})
+
+const chartStyle = computed(() => {
+  return {
+    height: props.height || '',
+    width: '100%',
+    position: 'relative'
+  }
+})
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
+</script>
+
+<template>
+  <Bar :data="chartData" :options="options" :style="chartStyle" />
+</template>
diff --git a/src/components/BasicPieChart.vue b/src/components/charts/BasicPieChart.vue
similarity index 100%
rename from src/components/BasicPieChart.vue
rename to src/components/charts/BasicPieChart.vue
diff --git a/src/components/standalone/monitoring/SimpleStat.vue b/src/components/charts/SimpleStat.vue
similarity index 100%
rename from src/components/standalone/monitoring/SimpleStat.vue
rename to src/components/charts/SimpleStat.vue
diff --git a/src/components/standalone/monitoring/SecurityMonitor.vue b/src/components/standalone/monitoring/SecurityMonitor.vue
index a4c1a4796..3a46057ae 100644
--- a/src/components/standalone/monitoring/SecurityMonitor.vue
+++ b/src/components/standalone/monitoring/SecurityMonitor.vue
@@ -5,10 +5,10 @@
 
 <script setup lang="ts">
 import { ubusCall } from '@/lib/standalone/ubus'
-import { getAxiosErrorMessage, NeCard } from '@nethesis/vue-components'
+import { getAxiosErrorMessage, NeCard, NeEmptyState } from '@nethesis/vue-components'
 import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import SimpleStat from './SimpleStat.vue'
+import SimpleStat from '../../charts/SimpleStat.vue'
 import BlockedPacketsChart from './security/BlockedPacketsChart.vue'
 import { useThemeStore } from '@/stores/theme'
 import {
@@ -33,7 +33,9 @@ import {
   VIOLET_500,
   VIOLET_600
 } from '@/lib/color'
-import BasicPieChart from '../../BasicPieChart.vue'
+import BasicPieChart from '../../charts/BasicPieChart.vue'
+import BasicBarChart from '../../charts/BasicBarChart.vue'
+import BlockedIpsPerHourChart from './security/BlockedIpsPerHourChart.vue'
 
 type MalwareReport = {
   first_seen: number
@@ -53,6 +55,7 @@ type AttackReport = {
 const { t } = useI18n()
 const themeStore = useThemeStore()
 
+const CHART_NUM_ITEMS = 10
 const malwareReport = ref<MalwareReport | undefined>(undefined)
 const attackReport = ref<AttackReport | undefined>(undefined)
 const blockedPacketsChartLabels = ref<number[]>([])
@@ -61,6 +64,10 @@ const malwareByDirectionChartLabels = ref<string[]>([])
 const malwareByDirectionChartDatasets = ref<any[]>([])
 const malwareByCategoryChartLabels = ref<string[]>([])
 const malwareByCategoryChartDatasets = ref<any[]>([])
+const mostBlockedIpsChartLabels = ref<string[]>([])
+const mostBlockedIpsChartDatasets = ref<any[]>([])
+const blockedIpsPerHourChartLabels = ref<string[]>([])
+const blockedIpsPerHourChartDatasets = ref<any[]>([])
 
 let loading = ref({
   getMalwareReport: false,
@@ -128,7 +135,11 @@ const mockTsipAttackReport = {
     ['47.236.162.71', 5],
     ['47.236.232.63', 4],
     ['8.219.246.145', 4],
-    ['123.56.251.31', 4]
+    ['123.56.251.31', 4],
+    ['123.56.251.32', 3],
+    ['123.56.251.33', 3],
+    ['123.56.251.34', 3],
+    ['123.56.251.35', 3]
   ],
   attack_by_hour: [
     [0, 0],
@@ -170,7 +181,7 @@ async function getMalwareReport() {
 
   try {
     const res = await ubusCall('ns.report', 'tsip-malware-report')
-    // malwareReport.value = res.data ////
+    // malwareReport.value = res.data //// uncomment
 
     //// remove
     malwareReport.value = mockTsipMalwareReport ////
@@ -280,7 +291,51 @@ async function getAttackReport() {
 
   try {
     const res = await ubusCall('ns.report', 'tsip-attack-report')
-    attackReport.value = res.data
+    // attackReport.value = res.data //// uncomment
+
+    //// remove
+    attackReport.value = mockTsipAttackReport ////
+    res.data = mockTsipAttackReport ////
+
+    // most blocked ip addresses chart
+
+    mostBlockedIpsChartLabels.value = res.data.attack_by_ip
+      .slice(0, CHART_NUM_ITEMS)
+      .map((data: any[]) => data[0])
+
+    const mostBlockedIpAddresses = res.data.attack_by_ip
+      .slice(0, CHART_NUM_ITEMS)
+      .map((data: any[]) => data[1])
+
+    mostBlockedIpsChartDatasets.value = [
+      {
+        label: t('standalone.real_time_monitor.times_blocked'),
+        backgroundColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        borderColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        borderRadius: 6,
+        maxBarThickness: 25,
+        borderWidth: 1,
+        radius: 0,
+        data: mostBlockedIpAddresses
+      }
+    ]
+
+    // blocked ip addresses per hour chart
+
+    blockedIpsPerHourChartLabels.value = res.data.attack_by_hour.map((data: any[]) => data[0])
+    const blockedIpsPerHourChartData = res.data.attack_by_hour.map((data: any[]) => data[1])
+    blockedIpsPerHourChartDatasets.value = [
+      {
+        label: t('standalone.real_time_monitor.blocked_ip_addresses'),
+        backgroundColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        borderColor: themeStore.isLight ? CYAN_600 : CYAN_500,
+        borderRadius: 6,
+        maxBarThickness: 25,
+        borderWidth: 1,
+        radius: 0,
+        data: blockedIpsPerHourChartData
+      }
+    ]
   } catch (err: any) {
     console.error(err)
     error.value.getAttackReport = t('error.cannot_retrieve_attack_report')
@@ -293,8 +348,8 @@ async function getAttackReport() {
 
 <template>
   <div>
-    <div>//// malwareReport {{ malwareReport }}</div>
-    <div class="mb-6">//// attackReport {{ attackReport }}</div>
+    <!-- <div>//// malwareReport {{ malwareReport }}</div>
+    <div class="mb-6">//// attackReport {{ attackReport }}</div> -->
     <div
       class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-2 md:grid-cols-4 xl:grid-cols-8 3xl:grid-cols-12"
     >
@@ -372,6 +427,53 @@ async function getAttackReport() {
           />
         </div>
       </NeCard>
+      <!-- most blocked ip addresses -->
+      <NeCard
+        :title="t('standalone.real_time_monitor.most_blocked_ip_addresses')"
+        :skeletonLines="5"
+        :loading="loading.getAttackReport"
+        :errorTitle="error.getAttackReport"
+        :errorDescription="error.getAttackReportDescription"
+        class="sm:col-span-2 md:col-span-4 3xl:col-span-6"
+      >
+        <!-- empty state -->
+        <NeEmptyState
+          v-if="!mostBlockedIpsChartDatasets[0]?.data.length"
+          :title="t('common.no_data_available')"
+          :icon="['fas', 'chart-line']"
+        />
+        <div v-else>
+          <BasicBarChart
+            :labels="mostBlockedIpsChartLabels"
+            :datasets="mostBlockedIpsChartDatasets"
+            isHorizontal
+            height="30vh"
+          />
+        </div>
+      </NeCard>
+      <!-- blocked ip addresses per hour -->
+      <NeCard
+        :title="t('standalone.real_time_monitor.blocked_ip_addresses_per_hour')"
+        :skeletonLines="5"
+        :loading="loading.getAttackReport"
+        :errorTitle="error.getAttackReport"
+        :errorDescription="error.getAttackReportDescription"
+        class="sm:col-span-2 md:col-span-4 3xl:col-span-6"
+      >
+        <!-- empty state -->
+        <!-- <NeEmptyState //// 
+          v-if="!blockedIpsPerHourChartDatasets[0]?.data.length"
+          :title="t('common.no_data_available')"
+          :icon="['fas', 'chart-line']"
+        /> -->
+        <div>
+          <BlockedIpsPerHourChart
+            :labels="blockedIpsPerHourChartLabels"
+            :datasets="blockedIpsPerHourChartDatasets"
+            isHorizontal
+          />
+        </div>
+      </NeCard>
     </div>
   </div>
 </template>
diff --git a/src/components/standalone/monitoring/TrafficMonitor.vue b/src/components/standalone/monitoring/TrafficMonitor.vue
index 2bad9c985..c58af0987 100644
--- a/src/components/standalone/monitoring/TrafficMonitor.vue
+++ b/src/components/standalone/monitoring/TrafficMonitor.vue
@@ -11,7 +11,7 @@ import RealTimeTrafficCard from '@/components/standalone/monitoring/traffic/Real
 import TrafficSummaryChart from '@/components/standalone/monitoring/traffic/TrafficSummaryChart.vue'
 import WanTrafficCard from '@/components/standalone/monitoring/traffic/WanTrafficCard.vue'
 import RecentTrafficChart from './traffic/RecentTrafficChart.vue'
-import SimpleStat from './SimpleStat.vue'
+import SimpleStat from '../../charts/SimpleStat.vue'
 
 const { t } = useI18n()
 
@@ -155,7 +155,6 @@ const {
         {{ t('standalone.real_time_monitor.recent_traffic') }}
       </NeHeading>
       <NeCard class="sm:col-span-2 md:col-span-4 3xl:col-span-6">
-        hoursLabels {{ hoursLabels }} ////
         <RecentTrafficChart :labels="hoursLabels" :datasets="hoursDatasets" />
       </NeCard>
     </div>
diff --git a/src/components/standalone/monitoring/security/BlockedIpsPerHourChart.vue b/src/components/standalone/monitoring/security/BlockedIpsPerHourChart.vue
new file mode 100644
index 000000000..37304b555
--- /dev/null
+++ b/src/components/standalone/monitoring/security/BlockedIpsPerHourChart.vue
@@ -0,0 +1,120 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  TimeScale
+} from 'chart.js'
+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 options: any = {
+  // turn off animations and data parsing for performance
+  animation: false,
+  interaction: {
+    mode: 'nearest',
+    axis: 'x',
+    intersect: false
+  },
+  scales: {
+    x: {
+      ticks: {
+        source: 'auto',
+        autoSkip: true,
+        color: themeStore.isLight ? GRAY_700 : GRAY_200,
+        callback: function (value: number) {
+          return `${padStart(value.toString(), 2, '0')}:00`
+        }
+      },
+      grid: {
+        color: themeStore.isLight ? GRAY_200 : GRAY_800
+      }
+    },
+    y: {
+      ticks: {
+        color: themeStore.isLight ? GRAY_700 : GRAY_200
+      },
+      grid: {
+        color: themeStore.isLight ? GRAY_200 : GRAY_800
+      }
+    }
+  },
+  plugins: {
+    decimation: {
+      enabled: true,
+      algorithm: 'min-max'
+    },
+    tooltip: {
+      callbacks: {
+        // format tooltip title
+        title: function (context: any) {
+          return `${padStart(context[0].parsed.x.toString(), 2, '0')}:00`
+        }
+      }
+    },
+    legend: {
+      labels: {
+        color: themeStore.isLight ? GRAY_700 : GRAY_200
+      }
+    }
+  },
+  responsive: true
+}
+
+const chartData: any = computed(() => {
+  return { labels: props.labels, datasets: props.datasets }
+})
+
+const chartStyle = computed(() => {
+  return {
+    'max-height': '25vh',
+    width: '100%',
+    position: 'relative'
+  }
+})
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  TimeScale
+)
+</script>
+
+<template>
+  <Line :data="chartData" :options="options" :style="chartStyle" />
+</template>