Skip to content

Commit

Permalink
refactor(traffic): refactored traffic section
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tbaile
Tbaile committed Nov 29, 2024
1 parent 6fdd829 commit e51d1b1
Show file tree
Hide file tree
Showing 6 changed files with 340 additions and 372 deletions.
99 changes: 99 additions & 0 deletions src/components/standalone/monitoring/TrafficByCard.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<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'
const themeStore = useThemeStore()
const { t } = useI18n()
const { title, data } = defineProps<{
title: string
data: TrafficRecord[]
}>()
const clientLimited = computed(() => {
return data.slice(0, 5) ?? []
})
const clientDatasets = 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: clientLimited.value.map((value) => value.traffic)
}
]
})
const clientLabels = computed(() => {
return clientLimited.value.map((value) => value?.label ?? value.id)
})
</script>

<template>
<NeCard :title="title">
<div v-if="data.length > 0" class="space-y-4">
<BasicPieChart :datasets="clientDatasets" :labels="clientLabels" byteFormat height="25vh" />
<TrafficTable :title="title" :traffic-entries="data" />
</div>
<NeEmptyState
v-else
:title="t('standalone.real_time_monitor.no_data_available')"
:icon="faEmptySet"
/>
</NeCard>
</template>
231 changes: 89 additions & 142 deletions src/components/standalone/monitoring/TrafficMonitor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,157 +5,104 @@

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { useTrafficSummary } from '@/composables/useTrafficSummary'
import { NeCard, NeEmptyState, NeHeading, byteFormat1024 } from '@nethesis/vue-components'
import TrafficByHourChart from './TrafficByHourChart.vue'
import SimpleStat from '../../charts/SimpleStat.vue'
import BasicPieChart from '@/components/charts/BasicPieChart.vue'
import {
byteFormat1024,
getAxiosErrorMessage,
NeCard,
NeEmptyState,
NeInlineNotification,
NeSkeleton
} from '@nethesis/vue-components'
import SimpleStat from '@/components/charts/SimpleStat.vue'
import TrafficByHourChart from '@/components/standalone/monitoring/TrafficByHourChart.vue'
import { computed } from 'vue'
import { CYAN_500, CYAN_600 } from '@/lib/color'
import { useThemeStore } from '@/stores/theme'
import { useTrafficStats } from '@/composables/useTrafficStats'
import TrafficByCard from '@/components/standalone/monitoring/TrafficByCard.vue'
import { faEmptySet } from '@nethesis/nethesis-solid-svg-icons'

const { t } = useI18n()

const {
clientsLabels,
clientsDatasets,
protocolsLabels,
protocolsDatasets,
appsLabels,
appsDatasets,
remoteHostsLabels,
remoteHostsDatasets,
hoursLabels,
hoursDatasets,
totalTraffic,
loadingTrafficSummary,
trafficSummaryError,
trafficSummaryErrorDescription
} = useTrafficSummary()
</script>
const { loading, error, data } = useTrafficStats()
const themeStore = useThemeStore()

<template>
<div>
<div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-12">
<!-- total traffic -->
<NeCard
:title="t('standalone.real_time_monitor.today_total_traffic')"
:skeletonLines="2"
:loading="loadingTrafficSummary"
:errorTitle="trafficSummaryError"
:errorDescription="trafficSummaryErrorDescription"
class="sm:col-span-6 md:col-span-6 lg:col-span-4 xl:col-span-3 2xl:col-span-3"
>
<SimpleStat class="mt-1">
{{ byteFormat1024(totalTraffic) }}
</SimpleStat>
</NeCard>
<!-- recent traffic -->
<NeCard
:title="t('standalone.real_time_monitor.recent_traffic')"
:loading="loadingTrafficSummary"
:skeletonLines="6"
:errorTitle="trafficSummaryError"
:errorDescription="trafficSummaryErrorDescription"
class="row-span-2 sm:col-span-12 xl:col-span-9 2xl:col-span-9"
>
<TrafficByHourChart :labels="hoursLabels" :datasets="hoursDatasets" height="25vh" />
</NeCard>
const hoursLabels = computed(() => {
return data.value?.hourly_traffic.map((value) => value.id) ?? []
})

<!-- today traffic title -->
<NeHeading tag="h6" class="col-span-full mt-8">
{{ t('standalone.real_time_monitor.today_traffic') }}
</NeHeading>
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>

<!-- top local hosts -->
<NeCard
:title="t('standalone.real_time_monitor.today_top_local_hosts')"
:skeletonLines="6"
:loading="loadingTrafficSummary"
:errorTitle="trafficSummaryError"
:errorDescription="trafficSummaryErrorDescription"
class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 2xl:col-span-6 5xl:col-span-3"
>
<NeEmptyState
v-if="!clientsDatasets[0]?.data.length"
:title="t('common.no_data_available')"
:icon="['fas', 'chart-line']"
class="bg-white dark:bg-gray-950"
/>
<BasicPieChart
v-else
:labels="clientsLabels"
:datasets="clientsDatasets"
byteFormat
height="25vh"
/>
</NeCard>
<!-- top applications -->
<NeCard
:title="t('standalone.real_time_monitor.today_top_applications')"
:skeletonLines="6"
:loading="loadingTrafficSummary"
:errorTitle="trafficSummaryError"
:errorDescription="trafficSummaryErrorDescription"
class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 2xl:col-span-6 5xl:col-span-3"
>
<NeEmptyState
v-if="!appsDatasets[0]?.data.length"
:title="t('common.no_data_available')"
:icon="['fas', 'chart-line']"
class="bg-white dark:bg-gray-950"
/>
<BasicPieChart
v-else
:labels="appsLabels"
:datasets="appsDatasets"
byteFormat
height="25vh"
/>
</NeCard>
<!-- top remote hosts -->
<NeCard
:title="t('standalone.real_time_monitor.today_top_remote_hosts')"
:skeletonLines="6"
:loading="loadingTrafficSummary"
:errorTitle="trafficSummaryError"
:errorDescription="trafficSummaryErrorDescription"
class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 2xl:col-span-6 5xl:col-span-3"
>
<NeEmptyState
v-if="!remoteHostsDatasets[0]?.data.length"
:title="t('common.no_data_available')"
:icon="['fas', 'chart-line']"
class="bg-white dark:bg-gray-950"
<template>
<div class="space-y-12">
<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="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"
>
<TrafficByHourChart
v-if="data?.hourly_traffic.length ?? 0 > 0"
:datasets="hoursDatasets"
:labels="hoursLabels"
height="25vh"
/>
<NeEmptyState
v-else
:title="t('standalone.real_time_monitor.no_data_available')"
:icon="faEmptySet"
/>
</NeCard>
</div>
<div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
<TrafficByCard
:title="t('standalone.real_time_monitor.local_hosts')"
:data="data?.clients ?? []"
/>
<BasicPieChart
v-else
:labels="remoteHostsLabels"
:datasets="remoteHostsDatasets"
byteFormat
height="25vh"
<TrafficByCard
:title="t('standalone.real_time_monitor.applications')"
:data="data?.applications ?? []"
/>
</NeCard>
<!-- top protocols -->
<NeCard
:title="t('standalone.real_time_monitor.today_top_protocols')"
:skeletonLines="6"
:loading="loadingTrafficSummary"
:errorTitle="trafficSummaryError"
:errorDescription="trafficSummaryErrorDescription"
class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 2xl:col-span-6 5xl:col-span-3"
>
<NeEmptyState
v-if="!protocolsDatasets[0]?.data.length"
:title="t('common.no_data_available')"
:icon="['fas', 'chart-line']"
class="bg-white dark:bg-gray-950"
<TrafficByCard
:title="t('standalone.real_time_monitor.remote_hosts')"
:data="data?.remote_hosts ?? []"
/>
<BasicPieChart
v-else
:labels="protocolsLabels"
:datasets="protocolsDatasets"
byteFormat
height="25vh"
<TrafficByCard
:title="t('standalone.real_time_monitor.protocols')"
:data="data?.protocols ?? []"
/>
</NeCard>
</div>
</div>
</template>
</div>
</template>
Loading

0 comments on commit e51d1b1

Please sign in to comment.