refactor(traffic): moving instant traffic to another section

NethServer · Nov 26, 2024 · 4063be5 · 4063be5
1 parent a380765
commit 4063be5
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 107 deletions.
diff --git a/src/components/standalone/monitoring/InstantTrafficMonitor.vue b/src/components/standalone/monitoring/InstantTrafficMonitor.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import InstantHostTrafficCard from '@/components/standalone/monitoring/traffic/InstantHostTrafficCard.vue'
+import { useTopTalkers } from '@/composables/useTopTalkers'
+import InstantProtocolTrafficCard from '@/components/standalone/monitoring/traffic/InstantProtocolTrafficCard.vue'
+import InstantAppTrafficCard from '@/components/standalone/monitoring/traffic/InstantAppTrafficCard.vue'
+import { NeInlineNotification, NeSkeleton } from '@nethesis/vue-components'
+
+const {
+  topApps,
+  topProtocols,
+  topHosts,
+  loadingTopTalkers,
+  errorTopTalkers,
+  errorTopTalkersDescription
+} = useTopTalkers()
+</script>
+
+<template>
+  <NeSkeleton v-if="loadingTopTalkers" :lines="10" size="lg" />
+  <NeInlineNotification
+    v-else-if="errorTopTalkers"
+    :description="errorTopTalkersDescription"
+    :title="errorTopTalkers"
+    kind="error"
+  />
+  <div v-else class="grid grid-cols-1 gap-6 xl:grid-cols-2 4xl:grid-cols-3">
+    <InstantHostTrafficCard :topHosts="topHosts" />
+    <!-- instant apps traffic -->
+    <InstantAppTrafficCard :topApps="topApps" />
+    <!-- instant protocols traffic -->
+    <InstantProtocolTrafficCard :topProtocols="topProtocols" />
+  </div>
+</template>
diff --git a/src/components/standalone/monitoring/TrafficMonitor.vue b/src/components/standalone/monitoring/TrafficMonitor.vue
@@ -7,12 +7,8 @@
 import { useI18n } from 'vue-i18n'
 import { useTrafficSummary } from '@/composables/useTrafficSummary'
 import { NeCard, NeEmptyState, NeHeading, byteFormat1024 } from '@nethesis/vue-components'
-import InstantHostTrafficCard from '@/components/standalone/monitoring/traffic/InstantHostTrafficCard.vue'
 import TrafficByHourChart from './TrafficByHourChart.vue'
 import SimpleStat from '../../charts/SimpleStat.vue'
-import { useTopTalkers } from '@/composables/useTopTalkers'
-import InstantAppTrafficCard from './traffic/InstantAppTrafficCard.vue'
-import InstantProtocolTrafficCard from './traffic/InstantProtocolTrafficCard.vue'
 import BasicPieChart from '@/components/charts/BasicPieChart.vue'
 
 const { t } = useI18n()
@@ -33,15 +29,6 @@ const {
   trafficSummaryError,
   trafficSummaryErrorDescription
 } = useTrafficSummary()
-
-const {
-  topApps,
-  topHosts,
-  topProtocols,
-  loadingTopTalkers,
-  errorTopTalkers,
-  errorTopTalkersDescription
-} = useTopTalkers(20)
 </script>
 
 <template>
@@ -169,36 +156,6 @@ const {
           height="25vh"
         />
       </NeCard>
-
-      <!-- instant traffic title -->
-      <NeHeading tag="h6" class="col-span-full mt-8">
-        {{ t('standalone.real_time_monitor.instant_traffic') }}
-      </NeHeading>
-
-      <!-- instant hosts traffic -->
-      <InstantHostTrafficCard
-        :topHosts="topHosts"
-        :loading="loadingTopTalkers"
-        :error="errorTopTalkers"
-        :errorDescription="errorTopTalkersDescription"
-        class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 5xl:col-span-4"
-      />
-      <!-- instant apps traffic -->
-      <InstantAppTrafficCard
-        :topApps="topApps"
-        :loading="loadingTopTalkers"
-        :error="errorTopTalkers"
-        :errorDescription="errorTopTalkersDescription"
-        class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 5xl:col-span-4"
-      />
-      <!-- instant protocols traffic -->
-      <InstantProtocolTrafficCard
-        :topProtocols="topProtocols"
-        :loading="loadingTopTalkers"
-        :error="errorTopTalkers"
-        :errorDescription="errorTopTalkersDescription"
-        class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 5xl:col-span-4"
-      />
     </div>
   </div>
 </template>
diff --git a/src/components/standalone/monitoring/traffic/InstantAppTrafficCard.vue b/src/components/standalone/monitoring/traffic/InstantAppTrafficCard.vue
@@ -5,33 +5,43 @@
 
 <script setup lang="ts">
 import {
+  kbpsFormat,
   NeCard,
+  NeEmptyState,
+  NePaginator,
   NeTable,
+  NeTableBody,
+  NeTableCell,
   NeTableHead,
   NeTableHeadCell,
-  NeTableBody,
   NeTableRow,
-  NeTableCell,
-  NePaginator,
-  useItemPagination,
-  NeEmptyState
+  NeTextInput,
+  useItemPagination
 } from '@nethesis/vue-components'
-import { kbpsFormat } from '@nethesis/vue-components'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { type TopItem } from '@/composables/useTopTalkers'
+import { type TopHost, type TopItem } from '@/composables/useTopTalkers'
+import { faSearch } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { refDebounced } from '@vueuse/core'
 
-const props = defineProps<{
+const { topApps } = defineProps<{
   topApps: TopItem[]
-  loading: boolean
-  error: string
-  errorDescription: string
 }>()
 
 const { t } = useI18n()
 
+const filter = ref('')
+const filterDebounced = refDebounced(filter, 400)
+
+const filteredItems = computed<TopItem[]>(() => {
+  return topApps.filter((item) =>
+    item.name.toLowerCase().includes(filterDebounced.value.toLowerCase())
+  )
+})
+
 const pageSize = ref(10)
-const { currentPage, paginatedItems } = useItemPagination(() => props.topApps, {
+const { currentPage, paginatedItems } = useItemPagination(() => filteredItems.value, {
   itemsPerPage: pageSize
 })
 
@@ -41,12 +51,14 @@ function formatTraffic(value: number) {
 </script>
 
 <template>
-  <NeCard
-    :title="t('standalone.real_time_monitor.applications')"
-    :skeletonLines="5"
-    :errorTitle="error"
-    :errorDescription="errorDescription"
-  >
+  <NeCard :skeletonLines="5" :title="t('standalone.real_time_monitor.applications')">
+    <div class="mb-3">
+      <NeTextInput v-model="filter" :placeholder="t('common.filter')">
+        <template #prefix>
+          <FontAwesomeIcon :icon="faSearch" aria-hidden="true" class="h-4 w-4" />
+        </template>
+      </NeTextInput>
+    </div>
     <NeTable
       :ariaLabel="t('standalone.real_time_monitor.applications')"
       cardBreakpoint="sm"
@@ -78,7 +90,7 @@ function formatTraffic(value: number) {
       <template #paginator>
         <NePaginator
           :current-page="currentPage"
-          :total-rows="props.topApps.length"
+          :total-rows="topApps.length"
           :page-size="pageSize"
           :page-sizes="[5, 10]"
           :nav-pagination-label="t('ne_table.pagination')"

diff --git a/src/components/standalone/monitoring/traffic/InstantHostTrafficCard.vue b/src/components/standalone/monitoring/traffic/InstantHostTrafficCard.vue
@@ -5,33 +5,43 @@
 
 <script setup lang="ts">
 import {
+  kbpsFormat,
   NeCard,
+  NeEmptyState,
+  NePaginator,
   NeTable,
+  NeTableBody,
+  NeTableCell,
   NeTableHead,
   NeTableHeadCell,
-  NeTableBody,
   NeTableRow,
-  NeTableCell,
-  NePaginator,
-  useItemPagination,
-  NeEmptyState
+  NeTextInput,
+  useItemPagination
 } from '@nethesis/vue-components'
-import { kbpsFormat } from '@nethesis/vue-components'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { type TopHost } from '@/composables/useTopTalkers'
+import { faSearch } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { refDebounced } from '@vueuse/core'
 
-const props = defineProps<{
+const { topHosts } = defineProps<{
   topHosts: TopHost[]
-  loading: boolean
-  error: string
-  errorDescription: string
 }>()
 
 const { t } = useI18n()
 
+const filter = ref('')
+const filterDebounced = refDebounced(filter, 400)
+
+const filteredItems = computed<TopHost[]>(() => {
+  return topHosts.filter((item) =>
+    item.host.toLowerCase().includes(filterDebounced.value.toLowerCase())
+  )
+})
+
 const pageSize = ref(10)
-const { currentPage, paginatedItems } = useItemPagination(() => props.topHosts, {
+const { currentPage, paginatedItems } = useItemPagination(() => filteredItems.value, {
   itemsPerPage: pageSize
 })
 
@@ -41,12 +51,14 @@ function formatTraffic(value: number) {
 </script>
 
 <template>
-  <NeCard
-    :title="t('standalone.real_time_monitor.local_hosts')"
-    :skeletonLines="5"
-    :errorTitle="error"
-    :errorDescription="errorDescription"
-  >
+  <NeCard :skeletonLines="5" :title="t('standalone.real_time_monitor.local_hosts')">
+    <div class="mb-3">
+      <NeTextInput v-model="filter" :placeholder="t('common.filter')" o>
+        <template #prefix>
+          <FontAwesomeIcon :icon="faSearch" aria-hidden="true" class="h-4 w-4" />
+        </template>
+      </NeTextInput>
+    </div>
     <NeTable
       :ariaLabel="t('standalone.real_time_monitor.local_hosts')"
       cardBreakpoint="sm"
@@ -78,7 +90,7 @@ function formatTraffic(value: number) {
       <template #paginator>
         <NePaginator
           :current-page="currentPage"
-          :total-rows="props.topHosts.length"
+          :total-rows="topHosts.length"
           :page-size="pageSize"
           :page-sizes="[5, 10]"
           :nav-pagination-label="t('ne_table.pagination')"

diff --git a/src/components/standalone/monitoring/traffic/InstantProtocolTrafficCard.vue b/src/components/standalone/monitoring/traffic/InstantProtocolTrafficCard.vue
@@ -5,33 +5,43 @@
 
 <script setup lang="ts">
 import {
+  kbpsFormat,
   NeCard,
+  NeEmptyState,
+  NePaginator,
   NeTable,
+  NeTableBody,
+  NeTableCell,
   NeTableHead,
   NeTableHeadCell,
-  NeTableBody,
   NeTableRow,
-  NeTableCell,
-  NePaginator,
-  useItemPagination,
-  NeEmptyState
+  NeTextInput,
+  useItemPagination
 } from '@nethesis/vue-components'
-import { kbpsFormat } from '@nethesis/vue-components'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { type TopItem } from '@/composables/useTopTalkers'
+import { refDebounced } from '@vueuse/core'
+import { faSearch } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-const props = defineProps<{
+const { topProtocols } = defineProps<{
   topProtocols: TopItem[]
-  loading: boolean
-  error: string
-  errorDescription: string
 }>()
 
 const { t } = useI18n()
 
+const filter = ref('')
+const filterDebounced = refDebounced(filter, 400)
+
+const filteredItems = computed<TopItem[]>(() => {
+  return topProtocols.filter((item) =>
+    item.name.toLowerCase().includes(filterDebounced.value.toLowerCase())
+  )
+})
+
 const pageSize = ref(10)
-const { currentPage, paginatedItems } = useItemPagination(() => props.topProtocols, {
+const { currentPage, paginatedItems } = useItemPagination(() => filteredItems.value, {
   itemsPerPage: pageSize
 })
 
@@ -41,12 +51,14 @@ function formatTraffic(value: number) {
 </script>
 
 <template>
-  <NeCard
-    :title="t('standalone.real_time_monitor.protocols')"
-    :skeletonLines="5"
-    :errorTitle="error"
-    :errorDescription="errorDescription"
-  >
+  <NeCard :skeletonLines="5" :title="t('standalone.real_time_monitor.protocols')">
+    <div class="mb-3">
+      <NeTextInput v-model="filter" :placeholder="t('common.filter')">
+        <template #prefix>
+          <FontAwesomeIcon :icon="faSearch" aria-hidden="true" class="h-4 w-4" />
+        </template>
+      </NeTextInput>
+    </div>
     <NeTable
       :ariaLabel="t('standalone.real_time_monitor.protocols')"
       cardBreakpoint="sm"
@@ -78,7 +90,7 @@ function formatTraffic(value: number) {
       <template #paginator>
         <NePaginator
           :current-page="currentPage"
-          :total-rows="props.topProtocols.length"
+          :total-rows="topProtocols.length"
           :page-size="pageSize"
           :page-sizes="[5, 10]"
           :nav-pagination-label="t('ne_table.pagination')"

diff --git a/src/composables/useTopTalkers.ts b/src/composables/useTopTalkers.ts
@@ -34,7 +34,7 @@ export function useTopTalkers(limit: MaybeRefOrGetter<number> = 20) {
   const topHosts = ref<TopHost[]>([])
   const topApps = ref<TopItem[]>([])
   const topProtocols = ref<TopItem[]>([])
-  const loadingTopTalkers = ref(false)
+  const loadingTopTalkers = ref(true)
   const errorTopTalkers = ref('')
   const errorTopTalkersDescription = ref('')
 
@@ -55,11 +55,6 @@ export function useTopTalkers(limit: MaybeRefOrGetter<number> = 20) {
     errorTopTalkers.value = ''
     errorTopTalkersDescription.value = ''
 
-    // show skeleton only the first time
-    if (!intervalId.value) {
-      loadingTopTalkers.value = true
-    }
-
     try {
       const res = await ubusCall('ns.talkers', 'list', {
         limit: toValue(limit)