From 586c8c5c3f0f7de49c8c865d37054963710e4f4a Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Tue, 3 Dec 2024 16:47:16 +0100
Subject: [PATCH] feat: added filtering for missing tables

---
 .../standalone/monitoring/FilteredTraffic.vue | 181 ------------------
 .../standalone/monitoring/TrafficCard.vue     |   2 +-
 .../standalone/monitoring/TrafficMonitor.vue  | 153 +++++++++++----
 src/composables/useTrafficFilter.ts           |   4 +-
 src/composables/useTrafficStats.ts            |  19 +-
 5 files changed, 136 insertions(+), 223 deletions(-)
 delete mode 100644 src/components/standalone/monitoring/FilteredTraffic.vue

diff --git a/src/components/standalone/monitoring/FilteredTraffic.vue b/src/components/standalone/monitoring/FilteredTraffic.vue
deleted file mode 100644
index 2ba95752..00000000
--- a/src/components/standalone/monitoring/FilteredTraffic.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<script lang="ts" setup>
-import NeBreadcrumbs, { type BreadcrumbItem } from '@/components/NeBreadcrumbs.vue'
-import { useI18n } from 'vue-i18n'
-import { computed, watchEffect } from 'vue'
-import { useTrafficStats } from '@/composables/useTrafficStats'
-import {
-  byteFormat1024,
-  getAxiosErrorMessage,
-  NeCard,
-  NeEmptyState,
-  NeInlineNotification,
-  NeSkeleton
-} from '@nethesis/vue-components'
-import SimpleStat from '@/components/charts/SimpleStat.vue'
-import { CYAN_500, CYAN_600 } from '@/lib/color'
-import { faEmptySet } from '@nethesis/nethesis-solid-svg-icons'
-import TrafficByHourChart from '@/components/standalone/monitoring/TrafficByHourChart.vue'
-import { useThemeStore } from '@/stores/theme'
-import TrafficCard from '@/components/standalone/monitoring/TrafficCard.vue'
-import { type AvailableFilters, useTrafficFilter } from '@/composables/useTrafficFilter'
-
-type FilterableBreadcrumbItem = BreadcrumbItem & {
-  key: string
-}
-
-const themeStore = useThemeStore()
-const filters = useTrafficFilter()
-const { data, error, loading, loadData } = useTrafficStats()
-
-watchEffect(() => {
-  loadData(filters.get('client'), filters.get('app'))
-})
-
-const { t } = useI18n()
-
-const filtersToBreadcrumb = computed<FilterableBreadcrumbItem[]>(() => {
-  let order = 1
-  // add a default item to the breadcrumb
-  const defaultItem: FilterableBreadcrumbItem = {
-    key: 'default',
-    order: order++,
-    label: t('standalone.real_time_monitor.traffic')
-  }
-  return filters.list.value
-    .map((filter) => {
-      let label = ''
-      switch (filter.key) {
-        case 'app':
-          if (filter.value.startsWith('netify.')) {
-            label = filter.value.slice(7)
-          } else {
-            label = filter.value
-          }
-          if (label == 'unknown') {
-            label = t('common.unknown')
-          } else {
-            label = label.charAt(0).toUpperCase() + label.slice(1)
-          }
-          break
-        case 'client':
-          label = filter.value
-          break
-        default:
-          label = t(`standalone.real_time_monitor.${filter.key}`)
-      }
-      return {
-        key: filter.key as string,
-        order: order++,
-        label: label
-      }
-    })
-    .concat(defaultItem)
-})
-
-function handleBreadcrumbClick(item: BreadcrumbItem) {
-  filters.remove(
-    filtersToBreadcrumb.value
-      .filter((breadcrumbItem) => breadcrumbItem.order > item.order)
-      .map((breadcrumbItem) => breadcrumbItem.key) as AvailableFilters[]
-  )
-}
-
-const resolvedHostname = computed(
-  (): string | undefined =>
-    data.value.clients.find((client) => client.id == filters.get('client'))?.label ?? undefined
-)
-
-const applicationName = computed(
-  (): string | undefined =>
-    data.value.applications.find((app) => app.id == filters.get('app'))?.label ?? undefined
-)
-
-const hoursLabels = computed(() => {
-  return data.value.hourly_traffic.map((value) => value.id)
-})
-
-const hoursDatasets = computed(() => {
-  return [
-    {
-      label: t('standalone.real_time_monitor.traffic'),
-      backgroundColor: themeStore.isLight ? CYAN_600 : CYAN_500,
-      borderColor: themeStore.isLight ? CYAN_600 : CYAN_500,
-      borderRadius: 6,
-      borderWidth: 1,
-      radius: 0,
-      data: data.value.hourly_traffic.map((value) => value.traffic)
-    }
-  ]
-})
-</script>
-
-<template>
-  <div class="space-y-6">
-    <NeBreadcrumbs :items="filtersToBreadcrumb" @click="handleBreadcrumbClick" />
-    <NeSkeleton v-if="loading" :lines="10" />
-    <NeInlineNotification
-      v-else-if="error"
-      :description="t(getAxiosErrorMessage(error.message))"
-      :title="t('standalone.real_time_monitor.error_fetching_data')"
-      kind="error"
-    />
-    <template v-else>
-      <div class="flex flex-col gap-6 xl:flex-row">
-        <div class="flex flex-col gap-6 sm:w-96">
-          <NeCard v-if="filters.contains('client')" :title="t('standalone.dashboard.hostname')">
-            <SimpleStat>
-              <p v-if="resolvedHostname != filters.get('client')">{{ resolvedHostname }}</p>
-              <p class="[&:nth-child(2)]:text-lg">{{ filters.get('client') }}</p>
-            </SimpleStat>
-          </NeCard>
-          <NeCard :title="t('standalone.real_time_monitor.daily_total_traffic')">
-            <SimpleStat>
-              <span v-if="data.total_traffic != 0">{{ byteFormat1024(data.total_traffic) }}</span>
-              <span v-else> N/A </span>
-            </SimpleStat>
-          </NeCard>
-          <NeCard v-if="applicationName" :title="t('standalone.real_time_monitor.application')">
-            <SimpleStat> {{ applicationName }}</SimpleStat>
-          </NeCard>
-        </div>
-        <NeCard
-          :title="t('standalone.real_time_monitor.recent_traffic')"
-          class="flex-1 justify-self-start"
-        >
-          <TrafficByHourChart
-            v-if="data.hourly_traffic.length > 0"
-            :datasets="hoursDatasets"
-            :labels="hoursLabels"
-            height="25vh"
-          />
-          <NeEmptyState
-            v-else
-            :icon="faEmptySet"
-            :title="t('standalone.real_time_monitor.no_data_available')"
-          />
-        </NeCard>
-      </div>
-      <div class="grid gap-6 xl:grid-cols-2">
-        <TrafficCard
-          v-if="filters.misses('client')"
-          :data="data.clients"
-          :title="t('standalone.real_time_monitor.local_hosts')"
-          filterable
-          filterable-key="client"
-        />
-        <TrafficCard
-          v-if="filters.misses('app')"
-          :data="data.applications"
-          :title="t('standalone.real_time_monitor.applications')"
-          filterable
-          filterable-key="app"
-        />
-        <TrafficCard
-          :data="data.remote_hosts"
-          :title="t('standalone.real_time_monitor.remote_hosts')"
-        />
-        <TrafficCard :data="data.protocols" :title="t('standalone.real_time_monitor.protocols')" />
-      </div>
-    </template>
-  </div>
-</template>
diff --git a/src/components/standalone/monitoring/TrafficCard.vue b/src/components/standalone/monitoring/TrafficCard.vue
index 70486779..a4842529 100644
--- a/src/components/standalone/monitoring/TrafficCard.vue
+++ b/src/components/standalone/monitoring/TrafficCard.vue
@@ -93,7 +93,7 @@ const pieLabels = computed(() => {
 
 <template>
   <NeCard v-if="data" :title="title">
-    <div v-if="data.length > 0" class="space-y-4">
+    <div v-if="data.length > 0" class="space-y-6">
       <BasicPieChart :datasets="pieDatasets" :labels="pieLabels" byteFormat height="25vh" />
       <TrafficTable
         :filterable="filterable"
diff --git a/src/components/standalone/monitoring/TrafficMonitor.vue b/src/components/standalone/monitoring/TrafficMonitor.vue
index 7fe7c780..d2db0598 100644
--- a/src/components/standalone/monitoring/TrafficMonitor.vue
+++ b/src/components/standalone/monitoring/TrafficMonitor.vue
@@ -21,22 +21,86 @@ import { useThemeStore } from '@/stores/theme'
 import { useTrafficStats } from '@/composables/useTrafficStats'
 import TrafficCard from '@/components/standalone/monitoring/TrafficCard.vue'
 import { faEmptySet } from '@nethesis/nethesis-solid-svg-icons'
-import FilteredTraffic from '@/components/standalone/monitoring/FilteredTraffic.vue'
-import { useTrafficFilter } from '@/composables/useTrafficFilter'
+import { type AvailableFilters, useTrafficFilter } from '@/composables/useTrafficFilter'
+import NeBreadcrumbs, { type BreadcrumbItem } from '@/components/NeBreadcrumbs.vue'
 
-const { t } = useI18n()
-
-const filters = useTrafficFilter()
+type FilterableBreadcrumbItem = BreadcrumbItem & {
+  key: string
+}
 
-const { loading, error, data, loadData } = useTrafficStats()
 const themeStore = useThemeStore()
+const { get, list, remove, misses, contains } = useTrafficFilter()
+const { data, error, loading, loadData } = useTrafficStats()
 
 watchEffect(() => {
-  if (!filters.active.value) {
-    loadData()
+  loadData(get('client'), get('app'), get('protocol'), get('host'))
+})
+
+const { t } = useI18n()
+
+const filtersToBreadcrumb = computed<FilterableBreadcrumbItem[]>(() => {
+  let order = 1
+  // add a default item to the breadcrumb
+  const defaultItem: FilterableBreadcrumbItem = {
+    key: 'default',
+    order: order++,
+    label: t('standalone.real_time_monitor.traffic')
   }
+  return list.value
+    .map((filter) => {
+      let label = ''
+      switch (filter.key) {
+        case 'app':
+          if (filter.value.startsWith('netify.')) {
+            label = filter.value.slice(7)
+          } else {
+            label = filter.value
+          }
+          if (label == 'unknown') {
+            label = t('common.unknown')
+          } else {
+            label = label.charAt(0).toUpperCase() + label.slice(1)
+          }
+          break
+        case 'client':
+          label = filter.value
+          break
+        case 'host':
+          label = filter.value
+          break
+        case 'protocol':
+          label = filter.value.toUpperCase()
+          break
+        default:
+          label = t(`standalone.real_time_monitor.${filter.key}`)
+      }
+      return {
+        key: filter.key as string,
+        order: order++,
+        label: label
+      }
+    })
+    .concat(defaultItem)
 })
 
+function handleBreadcrumbClick(item: BreadcrumbItem) {
+  remove(
+    filtersToBreadcrumb.value
+      .filter((breadcrumbItem) => breadcrumbItem.order > item.order)
+      .map((breadcrumbItem) => breadcrumbItem.key) as AvailableFilters[]
+  )
+}
+
+const resolvedHostname = computed(
+  (): string | undefined =>
+    data.value.clients.find((client) => client.id == get('client'))?.label ?? undefined
+)
+
+const applicationName = computed(
+  (): string | undefined =>
+    data.value.applications?.find((app) => app.id == get('app'))?.label ?? undefined
+)
+
 const hoursLabels = computed(() => {
   return data.value.hourly_traffic.map((value) => value.id)
 })
@@ -57,8 +121,12 @@ const hoursDatasets = computed(() => {
 </script>
 
 <template>
-  <FilteredTraffic v-if="filters.active" />
-  <div v-else class="space-y-12">
+  <div class="space-y-6">
+    <NeBreadcrumbs
+      v-if="filtersToBreadcrumb.length > 1"
+      :items="filtersToBreadcrumb"
+      @click="handleBreadcrumbClick"
+    />
     <NeSkeleton v-if="loading" :lines="10" />
     <NeInlineNotification
       v-else-if="error"
@@ -67,55 +135,72 @@ const hoursDatasets = computed(() => {
       kind="error"
     />
     <template v-else>
-      <div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-12">
-        <NeCard
-          :title="t('standalone.real_time_monitor.daily_total_traffic')"
-          class="sm:col-span-6 md:col-span-6 lg:col-span-4 xl:col-span-3 2xl:col-span-3"
-        >
-          <SimpleStat>
-            <span v-if="data?.total_traffic != 0">
-              {{ byteFormat1024(data?.total_traffic) }}
-            </span>
-            <span v-else> N/A </span>
-          </SimpleStat>
-        </NeCard>
-        <NeCard
-          :title="t('standalone.real_time_monitor.recent_traffic')"
-          class="row-span-2 sm:col-span-12 xl:col-span-9 2xl:col-span-9"
-        >
+      <div class="flex flex-col gap-6 xl:flex-row">
+        <div class="flex flex-col gap-6 sm:w-96">
+          <NeCard :title="t('standalone.real_time_monitor.daily_total_traffic')">
+            <SimpleStat>
+              <span v-if="data.total_traffic != 0">{{ byteFormat1024(data.total_traffic) }}</span>
+              <span v-else> N/A </span>
+            </SimpleStat>
+          </NeCard>
+          <NeCard v-if="contains('client')" :title="t('standalone.dashboard.hostname')">
+            <SimpleStat>
+              <p v-if="resolvedHostname != get('client')">{{ resolvedHostname }}</p>
+              <p class="[&:nth-child(2)]:text-lg">{{ get('client') }}</p>
+            </SimpleStat>
+          </NeCard>
+          <NeCard v-if="applicationName" :title="t('standalone.real_time_monitor.application')">
+            <SimpleStat> {{ applicationName }}</SimpleStat>
+          </NeCard>
+          <NeCard v-if="contains('protocol')" :title="t('standalone.real_time_monitor.protocol')">
+            <SimpleStat> {{ get('protocol').toUpperCase() }}</SimpleStat>
+          </NeCard>
+          <NeCard v-if="contains('host')" :title="t('standalone.real_time_monitor.remote_hosts')">
+            <SimpleStat> {{ get('host') }}</SimpleStat>
+          </NeCard>
+        </div>
+        <NeCard :title="t('standalone.real_time_monitor.recent_traffic')" class="flex-1 self-start">
           <TrafficByHourChart
-            v-if="data?.hourly_traffic.length ?? 0 > 0"
+            v-if="data.hourly_traffic.length > 0"
             :datasets="hoursDatasets"
             :labels="hoursLabels"
             height="25vh"
           />
           <NeEmptyState
             v-else
-            :title="t('standalone.real_time_monitor.no_data_available')"
             :icon="faEmptySet"
+            :title="t('standalone.real_time_monitor.no_data_available')"
           />
         </NeCard>
       </div>
-      <div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
+      <div class="grid gap-6 xl:grid-cols-2">
         <TrafficCard
+          v-if="misses('client')"
+          :data="data.clients"
           :title="t('standalone.real_time_monitor.local_hosts')"
-          :data="data?.clients ?? []"
           filterable
-          filterableKey="client"
+          filterable-key="client"
         />
         <TrafficCard
+          v-if="misses('app')"
+          :data="data.applications"
           :title="t('standalone.real_time_monitor.applications')"
-          :data="data?.applications ?? []"
           filterable
           filterable-key="app"
         />
         <TrafficCard
+          v-if="misses('host')"
+          :data="data.remote_hosts"
           :title="t('standalone.real_time_monitor.remote_hosts')"
-          :data="data?.remote_hosts ?? []"
+          filterable
+          filterable-key="host"
         />
         <TrafficCard
+          v-if="misses('protocol')"
+          :data="data.protocols"
           :title="t('standalone.real_time_monitor.protocols')"
-          :data="data?.protocols ?? []"
+          filterable
+          filterable-key="protocol"
         />
       </div>
     </template>
diff --git a/src/composables/useTrafficFilter.ts b/src/composables/useTrafficFilter.ts
index bf955d79..d72b25b6 100644
--- a/src/composables/useTrafficFilter.ts
+++ b/src/composables/useTrafficFilter.ts
@@ -1,8 +1,8 @@
 import { useRoute, useRouter } from 'vue-router'
 import { computed } from 'vue'
 
-const FILTERS = ['client', 'app']
-export type AvailableFilters = 'client' | 'app'
+const FILTERS = ['client', 'app', 'protocol', 'host']
+export type AvailableFilters = 'client' | 'app' | 'protocol' | 'host'
 
 export type Filter = {
   key: AvailableFilters
diff --git a/src/composables/useTrafficStats.ts b/src/composables/useTrafficStats.ts
index e97905c9..c86b669a 100644
--- a/src/composables/useTrafficStats.ts
+++ b/src/composables/useTrafficStats.ts
@@ -11,7 +11,7 @@ export type TrafficRecord = {
 export type TrafficSummary = {
   total_traffic: number
   hourly_traffic: TrafficRecord[]
-  applications: TrafficRecord[]
+  applications?: TrafficRecord[]
   clients: TrafficRecord[]
   remote_hosts?: TrafficRecord[]
   protocols?: TrafficRecord[]
@@ -23,21 +23,30 @@ export function useTrafficStats() {
   const data = ref<TrafficSummary>({
     total_traffic: 0,
     hourly_traffic: [],
-    applications: [],
     clients: []
   })
 
-  function loadData(client?: string, application?: string) {
+  function loadData(client?: string, application?: string, protocol?: string, host?: string) {
     loading.value = true
     const payload: {
       client?: string
-      application?: string
+      section?: string
+      value?: string
     } = {}
     if (client) {
       payload.client = client
     }
     if (application) {
-      payload.application = application
+      payload.section = 'application'
+      payload.value = application
+    }
+    if (protocol) {
+      payload.section = 'protocol'
+      payload.value = protocol
+    }
+    if (host) {
+      payload.section = 'host'
+      payload.value = host
     }
     ubusCall('ns.dpireport', 'summary-v2', payload)
       .then((response: AxiosResponse<TrafficSummary>) => {