From ecc098cd78ff88332f36cbf416b8b428cdb5d33d Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 19 Sep 2024 11:02:24 +0200
Subject: [PATCH] feat: monitoring UI (wip)

---
 public/i18n/en/translation.json               |   1 +
 .../monitoring/ConnectivityMonitor.vue        |  48 ++++-
 .../standalone/monitoring/SecurityMonitor.vue |   3 +
 .../standalone/monitoring/TrafficMonitor.vue  |   2 +-
 .../monitoring/connectivity/WanEventsCard.vue | 191 +++++++-----------
 .../security/BlockedIpsPerHourChart.vue       |  20 +-
 .../security/BlockedPacketsChart.vue          |  17 +-
 .../monitoring/traffic/RecentTrafficChart.vue |  17 +-
 8 files changed, 137 insertions(+), 162 deletions(-)

diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
index 633e77fa8..ecd053153 100644
--- a/public/i18n/en/translation.json
+++ b/public/i18n/en/translation.json
@@ -1807,6 +1807,7 @@
       "host_traffic": "Host traffic",
       "host": "Host",
       "connections": "Connections",
+      "wan_events": "WAN events",
       "wan_name_events": "{name} events",
       "wan_name_traffic": "{name} traffic",
       "blocked_threats": "Blocked threats",
diff --git a/src/components/standalone/monitoring/ConnectivityMonitor.vue b/src/components/standalone/monitoring/ConnectivityMonitor.vue
index af25a6aba..91e160c6f 100644
--- a/src/components/standalone/monitoring/ConnectivityMonitor.vue
+++ b/src/components/standalone/monitoring/ConnectivityMonitor.vue
@@ -5,21 +5,32 @@
 
 <script setup lang="ts">
 import { ubusCall } from '@/lib/standalone/ubus'
-import { getAxiosErrorMessage, NeCard } from '@nethesis/vue-components'
+import {
+  getAxiosErrorMessage,
+  NeCard,
+  NeEmptyState,
+  sortByProperty
+} from '@nethesis/vue-components'
 import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import WanEventsCard from './connectivity/WanEventsCard.vue'
 import SingleWanTrafficCard from './connectivity/SingleWanTrafficCard.vue'
+import { isEmpty } from 'lodash-es'
 
 export type Wan = {
   iface: string
   device: string
 }
 
+export type WanEvent = {
+  time: number
+  status: number
+}
+
 const { t } = useI18n()
 
 const wans = ref<Wan[]>([])
-const mwanEvents = ref<Record<string, any[]> | undefined>(undefined)
+const mwanEvents = ref<Record<string, any[]>>({})
 
 let loading = ref({
   listWans: false,
@@ -62,7 +73,20 @@ async function getMwanReport() {
 
   try {
     const res = await ubusCall('ns.report', 'mwan-report')
-    mwanEvents.value = res.data.events_by_wan
+    mwanEvents.value = {}
+
+    for (const [wanName, eventsList] of Object.entries(res.data.events_by_wan) as [
+      string,
+      any[]
+    ][]) {
+      const events = eventsList.map((event: number[]) => {
+        return {
+          time: event[0],
+          status: event[1]
+        }
+      })
+      mwanEvents.value[wanName] = events.sort(sortByProperty('time')).reverse()
+    }
   } catch (err: any) {
     console.error(err)
     error.value.getMwanReport = t('error.cannot_retrieve_mwan_report')
@@ -75,7 +99,7 @@ async function getMwanReport() {
 
 <template>
   <div>
-    <div class="grid grid-cols-1 gap-x-6 gap-y-6 lg:grid-cols-2">
+    <div class="grid grid-cols-1 gap-x-6 gap-y-6 xl:grid-cols-2">
       <!-- connections -->
       <!-- <NeCard //// 
         :title="t('standalone.real_time_monitor.connections')"
@@ -87,15 +111,27 @@ async function getMwanReport() {
         {{ wans }} ////
       </NeCard> -->
       <!-- wan events -->
-      {{ mwanEvents }} ////
+      <NeCard
+        v-if="isEmpty(mwanEvents)"
+        :title="t('standalone.real_time_monitor.wan_events')"
+        class="col-span-1"
+      >
+        <NeEmptyState
+          :title="t('standalone.real_time_monitor.no_events')"
+          :icon="['fas', 'table']"
+          class="bg-white dark:bg-gray-950"
+        />
+      </NeCard>
       <WanEventsCard
+        v-else
         v-for="(events, wanName) in mwanEvents"
         :key="wanName"
         :wan="wanName"
         :wanEvents="events"
+        class="col-span-1"
       />
       <!-- wans traffic -->
-      <SingleWanTrafficCard v-for="wan in wans" :key="wan.device" :wan="wan" />
+      <SingleWanTrafficCard v-for="wan in wans" :key="wan.device" :wan="wan" class="col-span-1" />
     </div>
   </div>
 </template>
diff --git a/src/components/standalone/monitoring/SecurityMonitor.vue b/src/components/standalone/monitoring/SecurityMonitor.vue
index 3a46057ae..bf1ed36be 100644
--- a/src/components/standalone/monitoring/SecurityMonitor.vue
+++ b/src/components/standalone/monitoring/SecurityMonitor.vue
@@ -375,9 +375,11 @@ async function getAttackReport() {
         :errorDescription="error.getMalwareReportDescription"
         class="row-span-2 sm:col-span-2 md:col-span-3 xl:col-span-6 3xl:col-span-10"
       >
+        {{ blockedPacketsChartLabels }} ////
         <BlockedPacketsChart
           :labels="blockedPacketsChartLabels"
           :datasets="blockedPacketsChartDatasets"
+          height="25vh"
         />
       </NeCard>
       <!-- blocked ip addresses -->
@@ -470,6 +472,7 @@ async function getAttackReport() {
           <BlockedIpsPerHourChart
             :labels="blockedIpsPerHourChartLabels"
             :datasets="blockedIpsPerHourChartDatasets"
+            height="25vh"
             isHorizontal
           />
         </div>
diff --git a/src/components/standalone/monitoring/TrafficMonitor.vue b/src/components/standalone/monitoring/TrafficMonitor.vue
index c58af0987..860da4874 100644
--- a/src/components/standalone/monitoring/TrafficMonitor.vue
+++ b/src/components/standalone/monitoring/TrafficMonitor.vue
@@ -155,7 +155,7 @@ const {
         {{ t('standalone.real_time_monitor.recent_traffic') }}
       </NeHeading>
       <NeCard class="sm:col-span-2 md:col-span-4 3xl:col-span-6">
-        <RecentTrafficChart :labels="hoursLabels" :datasets="hoursDatasets" />
+        <RecentTrafficChart :labels="hoursLabels" :datasets="hoursDatasets" height="25vh" />
       </NeCard>
     </div>
   </div>
diff --git a/src/components/standalone/monitoring/connectivity/WanEventsCard.vue b/src/components/standalone/monitoring/connectivity/WanEventsCard.vue
index 0de919486..cddb3117c 100644
--- a/src/components/standalone/monitoring/connectivity/WanEventsCard.vue
+++ b/src/components/standalone/monitoring/connectivity/WanEventsCard.vue
@@ -14,152 +14,105 @@ import {
   NeTableCell,
   NePaginator,
   useItemPagination,
-  NeButton,
-  NeTooltip,
-  NeEmptyState
+  NeEmptyState,
+  formatDateLoc
 } from '@nethesis/vue-components'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import type { WanEvent } from '../ConnectivityMonitor.vue'
 
 //// review
 
-//// copy table from NatHelpersTable -->
-
 const props = defineProps<{
   wan: string
-  wanEvents: any[]
+  wanEvents: WanEvent[]
 }>()
 
 const { t } = useI18n()
 
 const pageSize = ref(5)
-const { currentPage, paginatedItems } = useItemPagination(() => events, {
+const { currentPage, paginatedItems } = useItemPagination(() => props.wanEvents, {
   itemsPerPage: pageSize
 })
-
-const events = computed(() => {
-  return props.wanEvents.map((event) => {
-    return {
-      time: event[0],
-      message: event[1]
-    }
-  })
-})
 </script>
 
 <template>
-  <div>
-    <NeCard
-      :title="
+  <NeCard
+    :title="
+      t('standalone.real_time_monitor.wan_name_events', {
+        name: props.wan
+      })
+    "
+  >
+    <NeTable
+      :ariaLabel="
         t('standalone.real_time_monitor.wan_name_events', {
           name: props.wan
         })
       "
+      cardBreakpoint="sm"
     >
-      <NeTable
-        :ariaLabel="
-          t('standalone.real_time_monitor.wan_name_events', {
-            name: props.wan
-          })
-        "
-        cardBreakpoint="sm"
-      >
-        <NeTableHead>
-          <NeTableHeadCell>{{ t('standalone.real_time_monitor.timestamp') }}</NeTableHeadCell>
-          <NeTableHeadCell>{{ t('standalone.real_time_monitor.event') }}</NeTableHeadCell>
-        </NeTableHead>
-        <NeTableBody>
-          <!-- empty state -->
-          <NeTableRow v-if="!events.length">
-            <NeTableCell colspan="2">
-              <NeEmptyState
-                :title="t('standalone.real_time_monitor.no_events')"
-                :icon="['fas', 'table']"
-                class="bg-white dark:bg-gray-950"
+      <NeTableHead>
+        <NeTableHeadCell>{{ t('standalone.real_time_monitor.timestamp') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('standalone.real_time_monitor.event') }}</NeTableHeadCell>
+      </NeTableHead>
+      <NeTableBody>
+        <!-- empty state -->
+        <NeTableRow v-if="!wanEvents.length">
+          <NeTableCell colspan="2">
+            <NeEmptyState
+              :title="t('standalone.real_time_monitor.no_events')"
+              :icon="['fas', 'table']"
+              class="bg-white dark:bg-gray-950"
+            />
+          </NeTableCell>
+        </NeTableRow>
+        <NeTableRow v-else v-for="item in paginatedItems" :key="item.ip">
+          <NeTableCell :data-label="t('standalone.real_time_monitor.timestamp')">
+            {{ formatDateLoc(new Date(Number(item.time) * 1000), 'PPpp') || '-' }}
+          </NeTableCell>
+          <NeTableCell :data-label="t('standalone.real_time_monitor.event')">
+            <div class="flex items-center gap-2">
+              <font-awesome-icon
+                :icon="['fas', item.status ? 'circle-check' : 'circle-xmark']"
+                :class="[
+                  'h-4 w-4',
+                  item.status
+                    ? 'text-green-600 dark:text-green-400'
+                    : 'text-rose-600 dark:text-rose-400'
+                ]"
+                aria-hidden="true"
               />
-            </NeTableCell>
-          </NeTableRow>
-          <NeTableRow v-else v-for="item in paginatedItems" :key="item.ip">
-            <NeTableCell :data-label="t('standalone.real_time_monitor.timestamp')">
-              {{ item.time }}
-            </NeTableCell>
-            <NeTableCell :data-label="t('standalone.real_time_monitor.event')">
-              <div class="flex items-center gap-2">
-                <font-awesome-icon
-                  :icon="['fas', item.message ? 'circle-check' : 'circle-xmark']"
-                  class="h-4 w-4"
-                  aria-hidden="true"
-                />
-                {{ item.enabled ? t('common.enabled') : t('common.disabled') }}
-              </div>
-            </NeTableCell>
-            <NeTableCell :data-label="t('standalone.nat_helpers.loaded_on_kernel')">
-              <div class="flex items-center gap-2">
-                <span>
-                  {{
-                    item.loaded
-                      ? t('standalone.nat_helpers.loaded')
-                      : t('standalone.nat_helpers.not_loaded')
-                  }}
-                </span>
-                <!-- enabled/loaded inconsistency warning -->
-                <NeTooltip v-if="(item.enabled && !item.loaded) || (!item.enabled && item.loaded)">
-                  <template #trigger>
-                    <font-awesome-icon
-                      :icon="['fas', 'triangle-exclamation']"
-                      class="h-4 w-4 text-amber-500"
-                    />
-                  </template>
-                  <template #content>
-                    <p>
-                      {{
-                        item.enabled && !item.loaded
-                          ? t('standalone.nat_helpers.enabled_but_not_loaded_tooltip')
-                          : t('standalone.nat_helpers.disabled_but_loaded_tooltip')
-                      }}
-                    </p>
-                  </template>
-                </NeTooltip>
-              </div>
-            </NeTableCell>
-            <NeTableCell :data-label="t('common.actions')">
-              <div class="-ml-2.5 flex xl:ml-0 xl:justify-end">
-                <NeButton kind="tertiary" @click="emit('editNatHelper', item)">
-                  <template #prefix>
-                    <font-awesome-icon
-                      :icon="['fas', 'pen-to-square']"
-                      class="h-4 w-4"
-                      aria-hidden="true"
-                    />
-                  </template>
-                  {{ t('common.edit') }}
-                </NeButton>
-              </div>
-            </NeTableCell>
-          </NeTableRow>
-        </NeTableBody>
-        <template #paginator>
-          <NePaginator
-            :current-page="currentPage"
-            :total-rows="events.length"
-            :page-size="pageSize"
-            :page-sizes="[5, 10]"
-            :nav-pagination-label="t('ne_table.pagination')"
-            :next-label="t('ne_table.go_to_next_page')"
-            :previous-label="t('ne_table.go_to_previous_page')"
-            :range-of-total-label="t('ne_table.of')"
-            :page-size-label="t('ne_table.show')"
-            @select-page="
+              {{
+                item.status
+                  ? t('standalone.interfaces_and_devices.up')
+                  : t('standalone.interfaces_and_devices.down')
+              }}
+            </div>
+          </NeTableCell>
+        </NeTableRow>
+      </NeTableBody>
+      <template #paginator>
+        <NePaginator
+          :current-page="currentPage"
+          :total-rows="wanEvents.length"
+          :page-size="pageSize"
+          :page-sizes="[5, 10]"
+          :nav-pagination-label="t('ne_table.pagination')"
+          :next-label="t('ne_table.go_to_next_page')"
+          :previous-label="t('ne_table.go_to_previous_page')"
+          :range-of-total-label="t('ne_table.of')"
+          :page-size-label="t('ne_table.show')"
+          @select-page="
             (page: number) => {
               currentPage = page
             }"
-            @selectPageSize="
+          @selectPageSize="
             (size: number) => {
               pageSize = size
             }"
-          />
-        </template>
-      </NeTable>
-    </NeCard>
-  </div>
+        />
+      </template>
+    </NeTable>
+  </NeCard>
 </template>
diff --git a/src/components/standalone/monitoring/security/BlockedIpsPerHourChart.vue b/src/components/standalone/monitoring/security/BlockedIpsPerHourChart.vue
index 37304b555..f259bcf4e 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 3b28c78f9..cdeabb906 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 f701bfaa4..5f72546f1 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'
   }