feat(monitoring): instant traffic tab and filtering options (#455)

src/components/NeBreadcrumbs.vue

@@ -0,0 +1,43 @@
+<script generic="T extends BreadcrumbItem" lang="ts" setup>
+import { computed } from 'vue'
+
+export type BreadcrumbItem = {
+  order: number
+  label: string
+}
+
+const { items, separator = '>' } = defineProps<{
+  items: T[]
+  separator?: string
+}>()
+
+defineEmits<{
+  click: [item: T]
+}>()
+
+const orderedItems = computed<T[]>(() => [...items].sort((a, b) => a.order - b.order))
+</script>
+
+<template>
+  <nav aria-label="Breadcrumb" class="font-medium">
+    <ul class="flex space-x-1">
+      <template v-for="(item, index) in orderedItems" :key="item.order">
+        <li class="space-x-1">
+          <template v-if="index < orderedItems.length - 1">
+            <a
+              class="text-primary-700 hover:text-primary-800 hover:underline dark:text-primary-500 dark:hover:text-primary-400"
+              href="#"
+              @click.prevent="$emit('click', item)"
+            >
+              {{ item.label }}
+            </a>
+            <span>{{ separator }}</span>
+          </template>
+          <template v-else>
+            <span aria-label="page">{{ item.label }}</span>
+          </template>
+        </li>
+      </template>
+    </ul>
+  </nav>
+</template>

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>

src/components/standalone/monitoring/TrafficCard.vue

@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import BasicPieChart from '@/components/charts/BasicPieChart.vue'
+import { NeCard, NeEmptyState } from '@nethesis/vue-components'
+import type { TrafficRecord } from '@/composables/useTrafficStats'
+import { computed } from 'vue'
+import {
+  AMBER_500,
+  AMBER_600,
+  CYAN_300,
+  CYAN_500,
+  CYAN_600,
+  CYAN_800,
+  EMERALD_500,
+  EMERALD_600,
+  FUCHSIA_500,
+  FUCHSIA_600,
+  GRAY_400,
+  GRAY_50,
+  GRAY_500,
+  GRAY_900,
+  INDIGO_500,
+  INDIGO_600,
+  LIME_500,
+  LIME_600,
+  ROSE_500,
+  ROSE_600,
+  VIOLET_500,
+  VIOLET_600
+} from '@/lib/color'
+import { useThemeStore } from '@/stores/theme'
+import TrafficTable from '@/components/standalone/monitoring/TrafficTable.vue'
+import { useI18n } from 'vue-i18n'
+import { faEmptySet } from '@nethesis/nethesis-solid-svg-icons'
+import type { AvailableFilters } from '@/composables/useTrafficFilter'
+
+const themeStore = useThemeStore()
+
+const { t } = useI18n()
+
+const {
+  title,
+  data,
+  filterable = false
+} = defineProps<{
+  title: string
+  data?: TrafficRecord[]
+  filterable?: boolean
+  filterableKey?: AvailableFilters
+}>()
+
+const dataLimited = computed(() => {
+  return data?.slice(0, 5) ?? []
+})
+
+const pieDatasets = computed(() => {
+  return [
+    {
+      borderColor: themeStore.isLight ? GRAY_50 : GRAY_900,
+      backgroundColor: themeStore.isLight
+        ? [
+            CYAN_600,
+            INDIGO_600,
+            EMERALD_600,
+            VIOLET_600,
+            AMBER_600,
+            ROSE_600,
+            LIME_600,
+            FUCHSIA_600,
+            CYAN_800,
+            GRAY_500
+          ]
+        : [
+            CYAN_500,
+            INDIGO_500,
+            EMERALD_500,
+            VIOLET_500,
+            AMBER_500,
+            ROSE_500,
+            LIME_500,
+            FUCHSIA_500,
+            CYAN_300,
+            GRAY_400
+          ],
+      data: dataLimited.value.map((value) => value.traffic)
+    }
+  ]
+})
+
+const pieLabels = computed(() => {
+  return dataLimited.value.map((value) => value?.label ?? value.id)
+})
+</script>
+
+<template>
+  <NeCard v-if="data" :title="title">
+    <div v-if="data.length > 0" class="space-y-6">
+      <BasicPieChart :datasets="pieDatasets" :labels="pieLabels" byteFormat height="25vh" />
+      <TrafficTable
+        :filterable="filterable"
+        :filterable-key="filterableKey"
+        :title="title"
+        :traffic-entries="data"
+      />
+    </div>
+    <NeEmptyState
+      v-else
+      :title="t('standalone.real_time_monitor.no_data_available')"
+      :icon="faEmptySet"
+    />
+  </NeCard>
+</template>