diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 78b270677..91fd2af7f 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -849,11 +849,6 @@
       "count": 4
     }
   },
-  "src/views/standalone/monitoring/PingLatencyMonitorView.vue": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 1
-    }
-  },
   "src/views/standalone/monitoring/RealTimeMonitoringView.vue": {
     "@typescript-eslint/no-explicit-any": {
       "count": 1
diff --git a/package.json b/package.json
index a9175354d..74582a7db 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
-    "lint": "eslint . --max-warnings 1229",
+    "lint": "eslint . --max-warnings 60",
     "lint-fix": "npm run lint -- --fix",
     "format": "prettier --list-different src/",
     "format-fix": "prettier --write src/",
diff --git a/src/assets/main.css b/src/assets/main.css
index d0f376184..77901e083 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -146,7 +146,7 @@
 }
 
 @utility text-primary-neutral {
-  @apply text-gray-600 dark:text-gray-50;
+  @apply text-gray-900 dark:text-gray-50;
 }
 
 @utility text-secondary {
@@ -154,7 +154,7 @@
 }
 
 @utility text-secondary-neutral {
-  @apply dark:text-gray-200;
+  @apply text-gray-700 dark:text-gray-200;
 }
 
 @utility text-tertiary-neutral {
diff --git a/src/components/charts/TimeLineChart.vue b/src/components/charts/TimeLineChart.vue
index 3a7fefd54..b5f52e0c1 100644
--- a/src/components/charts/TimeLineChart.vue
+++ b/src/components/charts/TimeLineChart.vue
@@ -125,11 +125,16 @@ const defaultOptions: any = {
 }
 
 const allOptions = computed(() => {
-  return merge(typeof props.options === 'object' ? props.options : {}, defaultOptions)
+  const customOptions = props.options && typeof props.options === 'object' ? props.options : {}
+  return merge({}, defaultOptions, customOptions)
 })
 
 const chartData: any = computed(() => {
-  return { labels: props.labels, datasets: props.datasets }
+  // Deep-clone to strip Vue readonly proxies before handing data to Chart.js.
+  // Chart.js internally mutates dataset objects (attaches _meta, controllers, etc.)
+  // and Vue will block those mutations with "target is readonly" warnings if the
+  // objects are still wrapped in a shallowReadonly prop proxy.
+  return JSON.parse(JSON.stringify({ labels: props.labels, datasets: props.datasets }))
 })
 
 const chartStyle = computed(() => {
diff --git a/src/components/standalone/SideMenu.vue b/src/components/standalone/SideMenu.vue
index 98584f1b7..0f05a14fb 100644
--- a/src/components/standalone/SideMenu.vue
+++ b/src/components/standalone/SideMenu.vue
@@ -51,6 +51,10 @@ const navigation: Ref<MenuItem[]> = ref([
       {
         name: 'standalone.ping_latency_monitor.title',
         to: 'monitoring/ping-latency-monitor'
+      },
+      {
+        name: 'standalone.metrics.title',
+        to: 'monitoring/metrics'
       }
     ]
   },
diff --git a/src/components/standalone/firewall/PortForwardTable.vue b/src/components/standalone/firewall/PortForwardTable.vue
index 796c1cf5d..1851d0b71 100644
--- a/src/components/standalone/firewall/PortForwardTable.vue
+++ b/src/components/standalone/firewall/PortForwardTable.vue
@@ -133,7 +133,7 @@ function getCellClasses(item: PortForward) {
               </div>
               <div class="flex flex-wrap items-center justify-end gap-4">
                 <!-- logging info -->
-                <NeTooltip trigger-event="mouseenter focus" v-if="item.enabled && item.log">
+                <NeTooltip v-if="item.enabled && item.log" trigger-event="mouseenter focus">
                   <template #trigger>
                     <NeLink>
                       <FontAwesomeIcon
@@ -147,7 +147,7 @@ function getCellClasses(item: PortForward) {
                   </template>
                 </NeTooltip>
                 <!-- hairpin NAT -->
-                <NeTooltip trigger-event="mouseenter focus" v-if="item.enabled && item.reflection">
+                <NeTooltip v-if="item.enabled && item.reflection" trigger-event="mouseenter focus">
                   <template #trigger>
                     <NeLink>
                       <FontAwesomeIcon
diff --git a/src/components/standalone/firewall/rules/FirewallRulesTable.vue b/src/components/standalone/firewall/rules/FirewallRulesTable.vue
index 82467d527..e12e3744b 100644
--- a/src/components/standalone/firewall/rules/FirewallRulesTable.vue
+++ b/src/components/standalone/firewall/rules/FirewallRulesTable.vue
@@ -398,8 +398,8 @@ function searchStringInRule(rule: FirewallRule, queryText: string) {
                     <div class="flex flex-wrap items-center justify-end gap-4">
                       <!-- logging info -->
                       <NeTooltip
-                        trigger-event="mouseenter focus"
                         v-if="isEnabled(rule) && rule.log"
+                        trigger-event="mouseenter focus"
                       >
                         <template #trigger>
                           <NeLink>
@@ -414,7 +414,7 @@ function searchStringInRule(rule: FirewallRule, queryText: string) {
                         </template>
                       </NeTooltip>
                       <!-- tags -->
-                      <NeTooltip trigger-event="mouseenter focus" v-if="rule.ns_tag.length > 0">
+                      <NeTooltip v-if="rule.ns_tag.length > 0" trigger-event="mouseenter focus">
                         <template #trigger>
                           <NeLink>
                             <FontAwesomeIcon
diff --git a/src/components/standalone/monitoring/metrics/MetricChartCard.vue b/src/components/standalone/monitoring/metrics/MetricChartCard.vue
new file mode 100644
index 000000000..3ae255bac
--- /dev/null
+++ b/src/components/standalone/monitoring/metrics/MetricChartCard.vue
@@ -0,0 +1,46 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script lang="ts" setup>
+import { faChartLine } from '@fortawesome/free-solid-svg-icons'
+import { NeCard, NeEmptyState } from '@nethesis/vue-components'
+import { useI18n } from 'vue-i18n'
+import TimeLineChart from '@/components/charts/TimeLineChart.vue'
+import type { ChartData } from '@/lib/standalone/metricsCharts'
+
+defineProps<{
+  title: string
+  chart: ChartData | null
+  options?: object
+  showLegend?: boolean
+  datasetSuffix?: string
+  useKbpsFormat?: boolean
+  height?: string
+  loading?: boolean
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <NeCard :title="title" :loading="loading">
+    <TimeLineChart
+      v-if="chart?.labels?.length"
+      :labels="chart.labels"
+      :datasets="chart.datasets"
+      :height="height ?? '200px'"
+      :show-legend="showLegend ?? true"
+      :options="options"
+      :dataset-suffix="datasetSuffix ?? ''"
+      :use-kbps-format="useKbpsFormat ?? false"
+    />
+    <NeEmptyState
+      v-else
+      :title="t('standalone.metrics.no_data')"
+      :icon="faChartLine"
+      class="bg-white dark:bg-gray-950"
+    />
+  </NeCard>
+</template>
diff --git a/src/components/standalone/monitoring/metrics/MetricsAlertsSection.vue b/src/components/standalone/monitoring/metrics/MetricsAlertsSection.vue
new file mode 100644
index 000000000..e5a3c3aa8
--- /dev/null
+++ b/src/components/standalone/monitoring/metrics/MetricsAlertsSection.vue
@@ -0,0 +1,232 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useQuery } from '@tanstack/vue-query'
+import {
+  NeBadgeV2,
+  type NeBadgeV2Kind,
+  NeEmptyState,
+  NeInlineNotification,
+  NeTable,
+  NeTableBody,
+  NeTableCell,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableRow,
+  getAxiosErrorMessage
+} from '@nethesis/vue-components'
+import { ubusCall } from '@/lib/standalone/ubus'
+import type { AxiosResponse } from 'axios'
+import { faCircleCheck } from '@fortawesome/free-solid-svg-icons'
+
+interface MetricsAlert {
+  activeAt: string
+  annotations: Record<string, string>
+  labels: Record<string, string>
+  name: string
+  source?: string
+  state: string
+}
+
+interface ListAlertsResponse {
+  alerts?: MetricsAlert[]
+  error?: string
+}
+
+const { interval } = defineProps<{
+  interval: number | false
+}>()
+
+const emit = defineEmits<{
+  updatedAt: [number]
+}>()
+
+const { t, locale } = useI18n()
+
+const { data, error, isError, isPending, dataUpdatedAt } = useQuery({
+  queryKey: ['metrics-alerts'],
+  queryFn: async () => {
+    const res = await ubusCall<AxiosResponse<ListAlertsResponse>>('ns.telegraf', 'list-alerts')
+
+    if (res.data.error) {
+      throw new Error(res.data.error)
+    }
+
+    return res.data.alerts ?? []
+  },
+  refetchInterval: interval,
+  refetchOnWindowFocus: interval != false
+})
+
+watch(
+  dataUpdatedAt,
+  (value) => {
+    emit('updatedAt', value)
+  },
+  { immediate: true }
+)
+
+const errorDescription = computed(() => {
+  const currentError = error.value
+  const axiosErrorMessage = currentError ? getAxiosErrorMessage(currentError) : undefined
+
+  if (axiosErrorMessage) {
+    return t(axiosErrorMessage)
+  }
+
+  return t('error.generic_error')
+})
+
+function getLocalizedAnnotation(alert: MetricsAlert, annotation: 'summary' | 'description') {
+  const localeCode = locale.value.split('-')[0]
+
+  return (
+    alert.annotations[`${annotation}_${localeCode}`] ??
+    alert.annotations[`${annotation}_en`] ??
+    alert.annotations[annotation] ??
+    ''
+  )
+}
+
+function getStateBadgeKind(state: string): NeBadgeV2Kind {
+  switch (state) {
+    case 'firing':
+      return 'rose'
+    case 'pending':
+      return 'blue'
+    default:
+      return 'gray'
+  }
+}
+
+function getSeverityBadgeKind(severity: string | undefined): NeBadgeV2Kind {
+  switch (severity) {
+    case 'critical':
+      return 'rose'
+    case 'warning':
+      return 'amber'
+    case 'info':
+      return 'blue'
+    default:
+      return 'gray'
+  }
+}
+
+function getSeverityLabel(alert: MetricsAlert) {
+  switch (alert.labels.severity) {
+    case 'critical':
+      return t('standalone.metrics.critical')
+    case 'warning':
+      return t('standalone.metrics.warning')
+    case 'info':
+      return t('standalone.metrics.info')
+    default:
+      return t('standalone.metrics.unknown')
+  }
+}
+
+function getStateLabel(alert: MetricsAlert) {
+  switch (alert.state) {
+    case 'firing':
+      return t('standalone.metrics.firing')
+    case 'pending':
+      return t('standalone.metrics.pending')
+    default:
+      return t('standalone.metrics.unknown')
+  }
+}
+
+function formatActiveAt(activeAt: string) {
+  return Intl.DateTimeFormat(locale.value, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  }).format(new Date(activeAt))
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <NeInlineNotification
+      v-if="isError"
+      kind="error"
+      :title="t('standalone.metrics.cannot_retrieve_alerts')"
+      :description="errorDescription"
+      :close-aria-label="t('common.close')"
+    />
+
+    <NeEmptyState
+      v-if="!isError && !isPending && !(data ?? []).length"
+      :title="t('standalone.metrics.no_alerts_yet')"
+      :description="t('standalone.metrics.no_alerts_description')"
+      :icon="faCircleCheck"
+    />
+
+    <NeTable
+      v-else
+      :aria-label="t('standalone.metrics.alerts_table_aria_label')"
+      card-breakpoint="xl"
+      :loading="isPending"
+      :skeleton-columns="5"
+      :skeleton-rows="6"
+    >
+      <NeTableHead>
+        <NeTableHeadCell>{{ t('standalone.metrics.severity') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('standalone.metrics.alert') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('standalone.metrics.state') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('standalone.metrics.triggered_by') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('standalone.metrics.active_since') }}</NeTableHeadCell>
+      </NeTableHead>
+      <NeTableBody>
+        <NeTableRow v-for="alert in data!" :key="`${alert.name}-${alert.activeAt}`">
+          <NeTableCell :data-label="t('standalone.metrics.severity')">
+            <NeBadgeV2 :kind="getSeverityBadgeKind(alert.labels.severity)" size="xs">
+              {{ getSeverityLabel(alert) }}
+            </NeBadgeV2>
+          </NeTableCell>
+          <NeTableCell :data-label="t('standalone.metrics.alert')">
+            <div class="space-y-1 whitespace-normal">
+              <p>
+                {{ getLocalizedAnnotation(alert, 'summary') || alert.name }}
+              </p>
+              <p
+                v-if="getLocalizedAnnotation(alert, 'description')"
+                class="text-xs text-tertiary-neutral"
+              >
+                {{ getLocalizedAnnotation(alert, 'description') }}
+              </p>
+            </div>
+          </NeTableCell>
+          <NeTableCell :data-label="t('standalone.metrics.state')">
+            <NeBadgeV2 :kind="getStateBadgeKind(alert.state)" size="xs">
+              {{ getStateLabel(alert) }}
+            </NeBadgeV2>
+          </NeTableCell>
+          <NeTableCell :data-label="t('standalone.metrics.triggered_by')">
+            <div class="space-y-1">
+              <p>
+                {{ alert.name }}
+              </p>
+              <p class="text-xs text-tertiary-neutral">
+                {{ t('standalone.metrics.service') }}: {{ alert.labels.service ?? '-' }}
+                <span class="mx-1">-</span>
+                {{ t('standalone.metrics.group') }}: {{ alert.labels.alertgroup ?? '-' }}
+              </p>
+            </div>
+          </NeTableCell>
+          <NeTableCell :data-label="t('standalone.metrics.active_since')">
+            {{ formatActiveAt(alert.activeAt) }}
+          </NeTableCell>
+        </NeTableRow>
+      </NeTableBody>
+    </NeTable>
+  </div>
+</template>
diff --git a/src/components/standalone/monitoring/metrics/MetricsChartsSection.vue b/src/components/standalone/monitoring/metrics/MetricsChartsSection.vue
new file mode 100644
index 000000000..e9f349005
--- /dev/null
+++ b/src/components/standalone/monitoring/metrics/MetricsChartsSection.vue
@@ -0,0 +1,298 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script lang="ts" setup>
+import {
+  getAxiosErrorMessage,
+  NeDropdownFilter,
+  NeHeading,
+  NeInlineNotification
+} from '@nethesis/vue-components'
+import { computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import MetricChartCard from './MetricChartCard.vue'
+import { ubusCall } from '@/lib/standalone/ubus'
+import { useQuery } from '@tanstack/vue-query'
+import type { AxiosResponse } from 'axios'
+import { useThemeStore } from '@/stores/theme'
+import {
+  buildCpuChart,
+  buildLoadChart,
+  buildDiskioChart,
+  buildDiskChart,
+  buildProcessesChart,
+  buildMemoryChart,
+  buildPacketsChart,
+  buildConnectionsChart,
+  buildTrafficChart,
+  buildLatencyChart,
+  buildQualityChart,
+  getTrafficInterfaces,
+  getInterfaceDisplayName,
+  getLatencyQuality,
+  byteAxisOptions,
+  latencyOptions,
+  qualityOptions,
+  type MetricsData,
+  type PingHost
+} from '@/lib/standalone/metricsCharts'
+import { useStorage } from '@vueuse/core'
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+
+const { interval } = defineProps<{
+  interval: number | false
+}>()
+
+const emits = defineEmits<{
+  updatedAt: [number]
+}>()
+
+type TimeRangeId = '5m' | '30m' | '1h' | '12h' | '24h' | '7d'
+type TimeRange = {
+  id: TimeRangeId
+  label: string
+  num: number
+  seconds: number
+  step: number
+}
+
+const TIME_RANGES: TimeRange[] = [
+  {
+    id: '5m',
+    label: t('standalone.metrics.time_range_minutes', { count: 5 }),
+    num: 5,
+    seconds: 300,
+    step: 5
+  },
+  {
+    id: '30m',
+    label: t('standalone.metrics.time_range_minutes', { count: 30 }),
+    num: 30,
+    seconds: 1800,
+    step: 30
+  },
+  {
+    id: '1h',
+    label: t('standalone.metrics.time_range_hours', { count: 1 }),
+    num: 1,
+    seconds: 3600,
+    step: 60
+  },
+  {
+    id: '12h',
+    label: t('standalone.metrics.time_range_hours', { count: 12 }),
+    num: 12,
+    seconds: 43200,
+    step: 300
+  },
+  {
+    id: '24h',
+    label: t('standalone.metrics.time_range_hours', { count: 24 }),
+    num: 24,
+    seconds: 86400,
+    step: 300
+  },
+  {
+    id: '7d',
+    label: t('standalone.metrics.time_range_days', { count: 7 }),
+    num: 7,
+    seconds: 604800,
+    step: 1800
+  }
+]
+
+const DEFAULT_TIME_RANGE = TIME_RANGES[1]!
+const selectedTimeRangeId = useStorage<TimeRangeId[]>('metrics_time_range', [DEFAULT_TIME_RANGE.id])
+const timeRangeLabel = computed(() => {
+  const range = TIME_RANGES.find((r) => r.id == selectedTimeRangeId.value[0])
+  return range ? range.label : ''
+})
+const range = computed(() => {
+  const range = TIME_RANGES.find((r) => r.id == selectedTimeRangeId.value[0])
+  return range ? range.seconds : DEFAULT_TIME_RANGE.seconds
+})
+const step = computed(() => {
+  const range = TIME_RANGES.find((r) => r.id == selectedTimeRangeId.value[0])
+  return range ? range.step : DEFAULT_TIME_RANGE.step
+})
+
+// ── Data fetching ─────────────────────────────────────────────────────────────
+
+const { data, isPending, error, dataUpdatedAt } = useQuery({
+  queryKey: ['metrics', 'charts', () => range, () => step],
+  queryFn: async () => {
+    const now = Math.floor(Date.now() / 1000)
+    const res = await ubusCall<AxiosResponse<MetricsData>>('ns.telegraf', 'metrics-history', {
+      start: now - range.value,
+      end: now,
+      step: step.value
+    })
+    return res.data
+  },
+  refetchInterval: interval,
+  refetchOnWindowFocus: interval != false
+})
+
+watch(
+  dataUpdatedAt,
+  (newVal) => {
+    emits('updatedAt', newVal)
+  },
+  { immediate: true }
+)
+
+// ── Computed chart data ───────────────────────────────────────────────────────
+
+const cpuChart = computed(() => buildCpuChart(data.value ?? null, themeStore.isLight))
+const loadChart = computed(() => buildLoadChart(data.value ?? null, themeStore.isLight))
+const diskioChart = computed(() => buildDiskioChart(data.value ?? null, themeStore.isLight))
+const diskChart = computed(() => buildDiskChart(data.value ?? null, themeStore.isLight))
+const processesChart = computed(() => buildProcessesChart(data.value ?? null, themeStore.isLight))
+const memoryChart = computed(() => buildMemoryChart(data.value ?? null, themeStore.isLight))
+const packetsChart = computed(() => buildPacketsChart(data.value ?? null, themeStore.isLight))
+const connectionsChart = computed(() =>
+  buildConnectionsChart(data.value ?? null, themeStore.isLight)
+)
+
+const trafficInterfaces = computed(() => getTrafficInterfaces(data.value ?? null))
+
+const latencyQuality = computed(() => getLatencyQuality(data.value ?? null))
+
+// ── Helper methods ────────────────────────────────────────────────────────────
+
+function getInterfaceTrafficChart(iface: string) {
+  return buildTrafficChart(iface, data.value ?? null, themeStore.isLight)
+}
+
+function getDisplayName(iface: string) {
+  return getInterfaceDisplayName(iface, data.value ?? null)
+}
+
+function getLatencyCommunityChart(hostData: PingHost) {
+  return buildLatencyChart(hostData, themeStore.isLight)
+}
+
+function getQualityCommunityChart(hostData: PingHost) {
+  return buildQualityChart(hostData, themeStore.isLight)
+}
+</script>
+
+<template>
+  <div>
+    <!-- Error notification -->
+    <NeInlineNotification
+      v-if="error"
+      kind="error"
+      :title="t('standalone.metrics.cannot_retrieve_metrics')"
+      :description="t(getAxiosErrorMessage(error) ?? 'error.generic_error')"
+      :close-aria-label="t('common.close')"
+    />
+
+    <!-- System Metrics Section -->
+    <div v-else class="space-y-4">
+      <NeDropdownFilter
+        v-model="selectedTimeRangeId"
+        :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+        :clear-search-label="t('ne_dropdown_filter.clear_search')"
+        :label="timeRangeLabel"
+        :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+        :no-options-label="t('ne_dropdown_filter.no_options')"
+        :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+        :options="TIME_RANGES"
+        kind="radio"
+      />
+      <div class="grid grid-cols-1 gap-6 xl:grid-cols-2 3xl:grid-cols-3">
+        <NeHeading tag="h5" class="col-span-full uppercase">
+          {{ t('standalone.metrics.system_section') }}
+        </NeHeading>
+        <!-- CPU Usage -->
+        <MetricChartCard
+          :title="t('standalone.metrics.cpu')"
+          :chart="cpuChart"
+          dataset-suffix="%"
+          :show-legend="false"
+          :loading="isPending"
+        />
+        <!-- System Load -->
+        <MetricChartCard
+          :title="t('standalone.metrics.load')"
+          :chart="loadChart"
+          :loading="isPending"
+        />
+        <!-- Disk I/O -->
+        <MetricChartCard
+          :title="t('standalone.metrics.diskio')"
+          :chart="diskioChart"
+          :options="byteAxisOptions"
+          :loading="isPending"
+        />
+        <!-- Disk Usage per partition -->
+        <MetricChartCard
+          :title="t('standalone.metrics.disk')"
+          :chart="diskChart"
+          dataset-suffix="%"
+          :loading="isPending"
+        />
+        <!-- Total Processes -->
+        <MetricChartCard
+          :title="t('standalone.metrics.processes')"
+          :chart="processesChart"
+          :show-legend="false"
+          :loading="isPending"
+        />
+        <!-- RAM Usage -->
+        <MetricChartCard
+          :title="t('standalone.metrics.memory')"
+          :chart="memoryChart"
+          dataset-suffix="MB"
+          :loading="isPending"
+        />
+        <NeHeading tag="h5" class="col-span-full uppercase">
+          {{ t('standalone.metrics.network_section') }}
+        </NeHeading>
+        <!-- Network Traffic per interface -->
+        <MetricChartCard
+          v-for="iface in trafficInterfaces"
+          :key="`traffic-${iface}`"
+          :title="`${t('standalone.metrics.traffic')} - ${getDisplayName(iface)}`"
+          :chart="getInterfaceTrafficChart(iface)"
+          use-kbps-format
+          :loading="isPending"
+        />
+        <!-- Network Packets Rx/Tx -->
+        <MetricChartCard
+          :title="t('standalone.metrics.packets')"
+          :chart="packetsChart"
+          :loading="isPending"
+        />
+        <!-- Connections (conntrack) -->
+        <MetricChartCard
+          :title="t('standalone.metrics.connections')"
+          :chart="connectionsChart"
+          :show-legend="false"
+          :loading="isPending"
+        />
+        <!-- Latency and quality per ping host -->
+        <template v-for="(hostData, host) in latencyQuality" :key="`latency-${host}`">
+          <MetricChartCard
+            :title="`${t('standalone.metrics.latency')} - ${host}`"
+            :chart="getLatencyCommunityChart(hostData as PingHost)"
+            :options="latencyOptions"
+            :loading="isPending"
+          />
+          <MetricChartCard
+            :title="`${t('standalone.metrics.packet_delivery')} - ${host}`"
+            :chart="getQualityCommunityChart(hostData as PingHost)"
+            :show-legend="false"
+            :options="qualityOptions"
+            :loading="isPending"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index b6684ceda..a011cbcda 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -212,6 +212,7 @@
     "cannot_retrieve_backup_info": "Cannot retrieve backup information",
     "cannot_retrieve_flashstart_configuration": "Cannot retrieve configuration",
     "cannot_retrieve_netdata_configuration": "Cannot retrieve configuration",
+    "cannot_retrieve_telegraf_configuration": "Cannot retrieve Telegraf configuration",
     "cannot_retrieve_dpi_rules": "Cannot retrieve DPI rules",
     "cannot_retrieve_dpi_exceptions": "Cannot retrieve DPI exceptions",
     "cannot_create_dpi_exception": "Cannot create DPI exception",
@@ -2448,6 +2449,56 @@
       "raw_data": "Raw data",
       "table_aria_label": "Table of active flows"
     },
+    "metrics": {
+      "title": "Metrics",
+      "time_range": "Time range",
+      "time_range_minutes": "Last minute | Last {count} minutes",
+      "time_range_hours": "Last hour | Last {count} hours",
+      "time_range_days": "Last day | Last {count} days",
+      "refresh_interval": "Auto-refresh",
+      "system_section": "System",
+      "network_section": "Network",
+      "connections": "Connections (conntrack)",
+      "traffic": "Network interface traffic",
+      "latency": "Latency",
+      "packet_delivery": "Packet delivery",
+      "cpu": "CPU usage",
+      "load": "System load",
+      "diskio": "Disk I/O",
+      "disk": "Disk usage (%)",
+      "processes": "Total processes",
+      "memory": "RAM usage",
+      "packets": "Network packets",
+      "no_data": "No data available for the selected time range",
+      "cannot_retrieve_metrics": "Cannot retrieve metrics",
+      "tabs": {
+        "charts": "Charts",
+        "alerts": "Alerts"
+      },
+      "alerts_description": "Current pending and firing alerts evaluated by vmalert.",
+      "alerts_table_aria_label": "Table of current monitoring alerts",
+      "alert": "Alert",
+      "state": "State",
+      "severity": "Severity",
+      "triggered_by": "Triggered by",
+      "active_since": "Active since",
+      "service": "Service",
+      "group": "Group",
+      "no_alerts_yet": "No alerts yet",
+      "no_alerts_description": "System is fully operational.",
+      "cannot_retrieve_alerts": "Cannot retrieve alerts",
+      "firing": "Firing",
+      "pending": "Pending",
+      "critical": "Critical",
+      "warning": "Warning",
+      "info": "Info",
+      "unknown": "Unknown"
+    },
+    "metrics_monitor": {
+      "description": "Historical view of key system metrics collected by Telegraf and stored in VictoriaMetrics. Select a time range to adjust the chart window.",
+      "refresh": "Refresh",
+      "vm_unreachable": "VictoriaMetrics is not reachable. Make sure the service is running."
+    },
     "ping_latency_monitor": {
       "title": "Ping latency monitor",
       "description": "Measure round-trip time and packet delivery rates by pinging network hosts. Add one or more hosts, including VPN IPs to monitor tunnel quality. Latency and packet delivery charts are available under Monitoring > Real-time monitor > WAN uplinks.",
diff --git a/src/i18n/it.json b/src/i18n/it.json
index 8a0c11412..90962b1ff 100644
--- a/src/i18n/it.json
+++ b/src/i18n/it.json
@@ -189,6 +189,7 @@
     "invalid_future_date": "La data non può essere impostata nel passato",
     "cannot_set_passphrase": "Impossibile impostare passphrase",
     "cannot_retrieve_netdata_configuration": "Impossibile recuperare la configurazione Netdata",
+    "cannot_retrieve_telegraf_configuration": "Impossibile recuperare la configurazione Telegraf",
     "cannot_retrieve_tunnel_options": "Impossibile recuperare le opzioni del tunnel",
     "invalid_negative_integer": "Inserire un numero intero maggiore o uguale a 0",
     "cannot_cancel_update_schedule": "Impossibile annullare la programmazione dell'aggiornamento",
@@ -2461,6 +2462,59 @@
     "monitoring": {
       "title": "Monitoraggio"
     },
+    "metrics": {
+      "title": "Metriche",
+      "time_range": "Intervallo di tempo",
+      "time_range_minutes": "Ultimo {num} minuto | Ultimi {num} minuti",
+      "time_range_hours": "Ultima {num} ora | Ultime {num} ore",
+      "time_range_days": "Ultimo {num} giorno | Ultimi {num} giorni",
+      "refresh_interval": "Aggiornamento automatico",
+      "refresh_off": "Disattivato",
+      "refresh_30s": "Ogni 30 secondi",
+      "refresh_60s": "Ogni 60 secondi",
+      "system_section": "Sistema",
+      "network_section": "Rete",
+      "connections": "Connessioni (conntrack)",
+      "traffic": "Traffico delle interfacce di rete",
+      "latency": "Latenza",
+      "packet_delivery": "Consegna pacchetti",
+      "cpu": "Utilizzo CPU",
+      "load": "Carico di sistema",
+      "diskio": "I/O disco",
+      "disk": "Utilizzo disco (%)",
+      "processes": "Processi totali",
+      "memory": "Utilizzo RAM",
+      "packets": "Pacchetti di rete",
+      "no_data": "Nessun dato disponibile per l'intervallo selezionato",
+      "cannot_retrieve_metrics": "Impossibile recuperare le metriche",
+      "tabs": {
+        "charts": "Grafici",
+        "alerts": "Avvisi"
+      },
+      "alerts_description": "Elenco corrente degli avvisi in stato pending o firing valutati da vmalert.",
+      "alerts_table_aria_label": "Tabella degli avvisi di monitoraggio correnti",
+      "alert": "Avviso",
+      "state": "Stato",
+      "severity": "Gravita",
+      "summary": "Riepilogo",
+      "active_since": "Attivo da",
+      "service": "Servizio",
+      "group": "Gruppo",
+      "no_alerts": "Nessun avviso",
+      "no_alerts_description": "Non ci sono avvisi in stato pending o firing.",
+      "cannot_retrieve_alerts": "Impossibile recuperare gli avvisi",
+      "firing": "Attivo",
+      "pending": "In attesa",
+      "critical": "Critico",
+      "warning": "Avviso",
+      "info": "Info",
+      "unknown": "Sconosciuto"
+    },
+    "metrics_monitor": {
+      "description": "Vista storica delle metriche principali del sistema raccolte da Telegraf e archiviate in VictoriaMetrics. Seleziona un intervallo di tempo per regolare la finestra dei grafici.",
+      "refresh": "Aggiorna",
+      "vm_unreachable": "VictoriaMetrics non e raggiungibile. Verifica che il servizio sia in esecuzione."
+    },
     "netify_informatics": {
       "title": "Netify Informatics",
       "netify_informatics_disable_description": "L'invio di metadati è stato disattivato",
diff --git a/src/i18n/ta.json b/src/i18n/ta.json
index 881499d06..643e85140 100644
--- a/src/i18n/ta.json
+++ b/src/i18n/ta.json
@@ -133,6 +133,7 @@
     "cannot_retrieve_backup_info": "காப்புப் பிரதி தகவலை மீட்டெடுக்க முடியாது",
     "cannot_retrieve_flashstart_configuration": "உள்ளமைவை மீட்டெடுக்க முடியவில்லை",
     "cannot_retrieve_netdata_configuration": "உள்ளமைவை மீட்டெடுக்க முடியவில்லை",
+    "cannot_retrieve_telegraf_configuration": "Telegraf உள்ளமைவை மீட்டெடுக்க முடியவில்லை",
     "cannot_retrieve_dpi_rules": "DPI விதிகளை மீட்டெடுக்க முடியாது",
     "cannot_retrieve_dpi_exceptions": "DPI விதிவிலக்குகளை மீட்டெடுக்க முடியாது",
     "cannot_create_dpi_exception": "DPI விதிவிலக்கை உருவாக்க முடியாது",
diff --git a/src/lib/standalone/metricsCharts.ts b/src/lib/standalone/metricsCharts.ts
new file mode 100644
index 000000000..55203c81b
--- /dev/null
+++ b/src/lib/standalone/metricsCharts.ts
@@ -0,0 +1,308 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { byteFormat1024 } from '@nethesis/vue-components'
+import {
+  AMBER_500,
+  AMBER_600,
+  CYAN_500,
+  CYAN_600,
+  EMERALD_500,
+  EMERALD_600,
+  FUCHSIA_500,
+  FUCHSIA_600,
+  INDIGO_500,
+  INDIGO_600,
+  ROSE_500,
+  ROSE_600,
+  VIOLET_500,
+  VIOLET_600
+} from '@/lib/color'
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+export interface MetricDataset {
+  label: string
+  data: number[]
+}
+
+export interface MetricSeries {
+  labels: number[]
+  datasets: MetricDataset[]
+}
+
+export interface TrafficInterface extends MetricSeries {
+  zone?: string
+  device?: string
+}
+
+export interface PingHost {
+  latency: MetricSeries
+  quality: MetricSeries
+}
+
+export interface MetricsData {
+  connections: MetricSeries
+  traffic: Record<string, TrafficInterface>
+  cpu: MetricSeries
+  load: MetricSeries
+  diskio: MetricSeries
+  disk: MetricSeries
+  processes: MetricSeries
+  memory: MetricSeries
+  packets: MetricSeries
+  latency_quality?: Record<string, PingHost>
+}
+
+export interface ChartData {
+  labels: number[]
+  datasets: object[]
+}
+
+// ── Color palette ─────────────────────────────────────────────────────────────
+
+const PALETTE_LIGHT = [
+  CYAN_600,
+  INDIGO_600,
+  EMERALD_600,
+  ROSE_600,
+  AMBER_600,
+  VIOLET_600,
+  FUCHSIA_600
+]
+const PALETTE_DARK = [
+  CYAN_500,
+  INDIGO_500,
+  EMERALD_500,
+  ROSE_500,
+  AMBER_500,
+  VIOLET_500,
+  FUCHSIA_500
+]
+
+// ── Helper functions ──────────────────────────────────────────────────────────
+
+function toMs(labels: number[]): number[] {
+  return labels.map((s) => s * 1000)
+}
+
+function makeDataset(ds: MetricDataset, color: string) {
+  return {
+    label: ds.label,
+    data: ds.data,
+    borderColor: color,
+    backgroundColor: color,
+    borderWidth: 1.5,
+    radius: 0,
+    tension: 0
+  }
+}
+
+function buildDatasets(
+  series: MetricSeries,
+  colorsLight: string[],
+  colorsDark: string[],
+  isLight: boolean
+): object[] {
+  const palette = isLight ? colorsLight : colorsDark
+  return series.datasets.map((ds, i) => makeDataset(ds, palette[i % palette.length]!))
+}
+
+function buildTrafficDatasets(series: MetricSeries, isLight: boolean): object[] {
+  return buildDatasets(series, [CYAN_600, INDIGO_600], [CYAN_500, INDIGO_500], isLight)
+}
+
+function buildLatencyDatasets(series: MetricSeries, isLight: boolean): object[] {
+  return buildDatasets(
+    series,
+    [EMERALD_600, AMBER_600, ROSE_600],
+    [EMERALD_500, AMBER_500, ROSE_500],
+    isLight
+  )
+}
+
+function buildQualityDatasets(series: MetricSeries, isLight: boolean): object[] {
+  return buildDatasets(series, [INDIGO_600], [INDIGO_500], isLight)
+}
+
+// ── Chart options (plain objects – they never change) ─────────────────────────
+
+export const byteAxisOptions = {
+  scales: {
+    y: { ticks: { callback: (value: number) => byteFormat1024(Math.abs(value)) } }
+  },
+  plugins: {
+    tooltip: {
+      callbacks: {
+        label: (ctx: { dataset: { label?: string }; parsed: { y: number } }) => {
+          const label = ctx.dataset.label ? `${ctx.dataset.label}: ` : ''
+          return label + byteFormat1024(Math.abs(ctx.parsed.y))
+        }
+      }
+    }
+  }
+}
+
+export const latencyOptions = {
+  scales: {
+    y: { ticks: { callback: (value: number) => `${Math.round(value)} ms` } }
+  },
+  plugins: {
+    tooltip: {
+      callbacks: {
+        label: (ctx: { dataset: { label?: string }; parsed: { y: number } }) => {
+          const label = ctx.dataset.label ? `${ctx.dataset.label}: ` : ''
+          return label + `${Math.round(ctx.parsed.y)} ms`
+        }
+      }
+    }
+  }
+}
+
+export const qualityOptions = {
+  scales: {
+    y: {
+      min: 0,
+      max: 100,
+      ticks: { callback: (value: number) => `${Math.round(value)}%` }
+    }
+  },
+  plugins: {
+    tooltip: {
+      callbacks: {
+        label: (ctx: { dataset: { label?: string }; parsed: { y: number } }) => {
+          const label = ctx.dataset.label ? `${ctx.dataset.label}: ` : ''
+          return label + `${Math.round(ctx.parsed.y)}%`
+        }
+      }
+    }
+  }
+}
+
+// ── Chart builders ────────────────────────────────────────────────────────────
+
+export function buildCpuChart(metrics: MetricsData | null, isLight: boolean): ChartData | null {
+  if (!metrics) return null
+  const s = metrics.cpu
+  return { labels: toMs(s.labels), datasets: buildDatasets(s, [AMBER_600], [AMBER_500], isLight) }
+}
+
+export function buildLoadChart(metrics: MetricsData | null, isLight: boolean): ChartData | null {
+  if (!metrics) return null
+  const s = metrics.load
+  return {
+    labels: toMs(s.labels),
+    datasets: buildDatasets(
+      s,
+      [EMERALD_600, CYAN_600, VIOLET_600],
+      [EMERALD_500, CYAN_500, VIOLET_500],
+      isLight
+    )
+  }
+}
+
+export function buildDiskioChart(metrics: MetricsData | null, isLight: boolean): ChartData | null {
+  if (!metrics) return null
+  const s = metrics.diskio
+  return {
+    labels: toMs(s.labels),
+    datasets: buildDatasets(s, [CYAN_600, ROSE_600], [CYAN_500, ROSE_500], isLight)
+  }
+}
+
+export function buildDiskChart(metrics: MetricsData | null, isLight: boolean): ChartData | null {
+  if (!metrics) return null
+  const s = metrics.disk
+  return {
+    labels: toMs(s.labels),
+    datasets: buildDatasets(s, PALETTE_LIGHT, PALETTE_DARK, isLight)
+  }
+}
+
+export function buildProcessesChart(
+  metrics: MetricsData | null,
+  isLight: boolean
+): ChartData | null {
+  if (!metrics) return null
+  const s = metrics.processes
+  return {
+    labels: toMs(s.labels),
+    datasets: buildDatasets(s, [FUCHSIA_600], [FUCHSIA_500], isLight)
+  }
+}
+
+export function buildMemoryChart(metrics: MetricsData | null, isLight: boolean): ChartData | null {
+  if (!metrics) return null
+  const s = metrics.memory
+  return {
+    labels: toMs(s.labels),
+    datasets: buildDatasets(s, [INDIGO_600, CYAN_600], [INDIGO_500, CYAN_500], isLight)
+  }
+}
+
+export function buildPacketsChart(metrics: MetricsData | null, isLight: boolean): ChartData | null {
+  if (!metrics) return null
+  const s = metrics.packets
+  return {
+    labels: toMs(s.labels),
+    datasets: buildDatasets(s, [CYAN_600, INDIGO_600], [CYAN_500, INDIGO_500], isLight)
+  }
+}
+
+export function buildConnectionsChart(
+  metrics: MetricsData | null,
+  isLight: boolean
+): ChartData | null {
+  if (!metrics) return null
+  const s = metrics.connections
+  return {
+    labels: toMs(s.labels),
+    datasets: buildDatasets(s, [EMERALD_600], [EMERALD_500], isLight)
+  }
+}
+
+export function buildTrafficChart(
+  iface: string,
+  metrics: MetricsData | null,
+  isLight: boolean
+): ChartData | null {
+  if (!metrics?.traffic[iface]) return null
+  const s = metrics.traffic[iface]
+  return { labels: toMs(s.labels), datasets: buildTrafficDatasets(s, isLight) }
+}
+
+export function buildLatencyChart(hostData: PingHost, isLight: boolean): ChartData | null {
+  if (!hostData.latency?.labels?.length) return null
+  return {
+    labels: toMs(hostData.latency.labels),
+    datasets: buildLatencyDatasets(hostData.latency, isLight)
+  }
+}
+
+export function buildQualityChart(hostData: PingHost, isLight: boolean): ChartData | null {
+  if (!hostData.quality?.labels?.length) return null
+  return {
+    labels: toMs(hostData.quality.labels),
+    datasets: buildQualityDatasets(hostData.quality, isLight)
+  }
+}
+
+// ── Utility helpers ───────────────────────────────────────────────────────────
+
+export function getTrafficInterfaces(metrics: MetricsData | null): string[] {
+  if (!metrics) return []
+  return Object.keys(metrics.traffic).sort()
+}
+
+export function getInterfaceDisplayName(iface: string, metrics: MetricsData | null): string {
+  if (!metrics?.traffic[iface]) return iface
+  const data = metrics.traffic[iface]
+  if (data.zone && data.device) {
+    return `${data.zone} (${data.device})`
+  }
+  return iface
+}
+
+export function getLatencyQuality(metrics: MetricsData | null): Record<string, PingHost> {
+  return metrics?.latency_quality ?? {}
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index d774594ef..6587d01dc 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -196,6 +196,11 @@ const standaloneRoutes = [
     name: 'PingLatencyMonitor',
     component: () => import('../views/standalone/monitoring/PingLatencyMonitorView.vue')
   },
+  {
+    path: 'monitoring/metrics',
+    name: 'MetricsMonitor',
+    component: () => import('../views/standalone/monitoring/MetricsView.vue')
+  },
   {
     path: 'account',
     name: 'Account',
diff --git a/src/views/standalone/firewall/ZonesAndPolicies.vue b/src/views/standalone/firewall/ZonesAndPolicies.vue
index b68ea91af..b153a3962 100644
--- a/src/views/standalone/firewall/ZonesAndPolicies.vue
+++ b/src/views/standalone/firewall/ZonesAndPolicies.vue
@@ -159,7 +159,7 @@ function editZone(zone: Zone) {
                 </div>
               </div>
               <div>
-                <NeTooltip trigger-event="mouseenter focus" v-if="item.logging">
+                <NeTooltip v-if="item.logging" trigger-event="mouseenter focus">
                   <template #trigger>
                     <NeLink>
                       <FontAwesomeIcon
diff --git a/src/views/standalone/monitoring/MetricsView.vue b/src/views/standalone/monitoring/MetricsView.vue
new file mode 100644
index 000000000..0c95a47d6
--- /dev/null
+++ b/src/views/standalone/monitoring/MetricsView.vue
@@ -0,0 +1,104 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { NeCombobox, NeTabs, NeHeading } from '@nethesis/vue-components'
+import RefreshProgressBar from '@/components/standalone/monitoring/flows/RefreshProgressBar.vue'
+import MetricsChartsSection from '@/components/standalone/monitoring/metrics/MetricsChartsSection.vue'
+import MetricsAlertsSection from '@/components/standalone/monitoring/metrics/MetricsAlertsSection.vue'
+import { useTabs } from '@/composables/useTabs'
+import { useStorage } from '@vueuse/core'
+
+const { t } = useI18n()
+const { tabs, selectedTab } = useTabs([
+  {
+    name: 'charts',
+    label: t('standalone.metrics.tabs.charts')
+  },
+  {
+    name: 'alerts',
+    label: t('standalone.metrics.tabs.alerts')
+  }
+])
+
+type RefreshIntervalId = 'off' | '10s' | '30s' | '60s'
+type RefreshInterval = {
+  id: RefreshIntervalId
+  label: string
+  ms?: number | false
+}
+
+const REFRESH_INTERVALS: RefreshInterval[] = [
+  { id: 'off', label: t('standalone.flows.refresh_interval', { value: 'off' }), ms: false },
+  { id: '10s', label: t('standalone.flows.refresh_interval', { value: '10s' }), ms: 10000 },
+  { id: '30s', label: t('standalone.flows.refresh_interval', { value: '30s' }), ms: 30000 },
+  { id: '60s', label: t('standalone.flows.refresh_interval', { value: '60s' }), ms: 60000 }
+]
+
+const DEFAULT_REFRESH_INTERVAL = REFRESH_INTERVALS[1]!
+const selectedRefreshId = useStorage<RefreshIntervalId>(
+  'metrics_refresh_interval',
+  DEFAULT_REFRESH_INTERVAL.id
+)
+
+const interval = computed(() => {
+  return REFRESH_INTERVALS.find((item) => item.id == selectedRefreshId.value)?.ms ?? false
+})
+
+const updatedAt = ref<number>(0)
+
+// ── Data fetching ─────────────────────────────────────────────────────────────
+
+const pageDescription = computed(() =>
+  selectedTab.value === 'alerts'
+    ? t('standalone.metrics.alerts_description')
+    : t('standalone.metrics_monitor.description')
+)
+</script>
+
+<template>
+  <div class="space-y-8">
+    <!-- Heading -->
+    <NeHeading tag="h3" class="mb-7">{{ t('standalone.metrics.title') }}</NeHeading>
+
+    <NeTabs
+      :selected="selectedTab"
+      :sr-select-tab-label="t('ne_tabs.select_a_tab')"
+      :sr-tabs-label="t('ne_tabs.tabs')"
+      :tabs="tabs"
+      @select-tab="selectedTab = $event"
+    />
+
+    <!-- Controls -->
+    <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+      <p class="max-w-xl text-sm text-gray-500 dark:text-gray-400">
+        {{ pageDescription }}
+      </p>
+      <div class="flex flex-col gap-2">
+        <NeCombobox
+          v-model="selectedRefreshId"
+          :options="REFRESH_INTERVALS"
+          :label="t('standalone.metrics.refresh_interval')"
+          :no-results-label="t('ne_combobox.no_results')"
+          :limited-options-label="t('ne_combobox.limited_options_label')"
+          :no-options-label="t('ne_combobox.no_options')"
+          :selected-label="t('ne_combobox.selected')"
+          :user-input-label="t('ne_combobox.user_input')"
+          :optional-label="t('common.optional')"
+        />
+        <RefreshProgressBar :data-updated-at="updatedAt" :interval="interval" />
+      </div>
+    </div>
+
+    <MetricsChartsSection
+      v-if="selectedTab === 'charts'"
+      :interval="interval"
+      @updated-at="updatedAt = $event"
+    />
+    <MetricsAlertsSection v-else :interval="interval" @updated-at="updatedAt = $event" />
+  </div>
+</template>
diff --git a/src/views/standalone/monitoring/PingLatencyMonitorView.vue b/src/views/standalone/monitoring/PingLatencyMonitorView.vue
index 00810df3f..0f42325d7 100644
--- a/src/views/standalone/monitoring/PingLatencyMonitorView.vue
+++ b/src/views/standalone/monitoring/PingLatencyMonitorView.vue
@@ -3,10 +3,10 @@
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { ubusCall } from '@/lib/standalone/ubus'
+import { ubusCall, ValidationError } from '@/lib/standalone/ubus'
 import {
   NeInlineNotification,
   NeButton,
@@ -16,92 +16,58 @@ import {
 } from '@nethesis/vue-components'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import NeMultiTextInput from '@/components/standalone/NeMultiTextInput.vue'
-import { validateHost } from '@/lib/validation'
-import { AxiosError } from 'axios'
+import { MessageBag } from '@/lib/validation'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { useUciPendingChangesStore } from '@/stores/standalone/uciPendingChanges'
+import { faFloppyDisk } from '@fortawesome/free-solid-svg-icons'
+
 const { t } = useI18n()
+const queryClient = useQueryClient()
+const uci = useUciPendingChangesStore()
 
-const formPing = ref({
-  hostList: ['']
-})
-const loading = ref(true)
-const saving = ref(false)
+const hosts = ref<string[]>([''])
+const validationBag = ref(new MessageBag())
 
-const errorConfiguration = ref({
-  notificationTitle: '',
-  notificationDescription: '',
-  notificationDetails: ''
-})
-const errorSaving = ref({
-  notificationTitle: '',
-  notificationDescription: '',
-  notificationDetails: ''
+const { data, isPending, isError, error } = useQuery({
+  queryKey: ['telegraf', 'config'],
+  queryFn: () => ubusCall('ns.telegraf', 'get-configuration', {}),
+  select: (res) => res.data
 })
-const errorForm = ref({
-  hostList: ['']
-})
-
-onMounted(() => {
-  getConfiguration()
-})
-
-async function getConfiguration() {
-  loading.value = true
-  try {
-    const res = await ubusCall('ns.netdata', 'get-configuration', {})
-    if (res?.data?.hosts) {
-      formPing.value.hostList = res.data.hosts
-    }
-  } catch (exception: any) {
-    errorConfiguration.value.notificationTitle = t('error.cannot_retrieve_netdata_configuration')
-    errorConfiguration.value.notificationDescription = t(getAxiosErrorMessage(exception))
-    errorConfiguration.value.notificationDetails = exception.toString()
-  } finally {
-    loading.value = false
-  }
-}
 
-function validate() {
-  let isValidationOk = true
-
-  for (const [index, item] of formPing.value.hostList.entries()) {
-    if (item) {
-      const { valid, errMessage } = validateHost(item)
-
-      if (!valid) {
-        errorForm.value.hostList[index] = t(errMessage as string)
-        isValidationOk = false
-      }
+watch(
+  data,
+  (newData) => {
+    if (newData?.hosts?.length) {
+      hosts.value = newData.hosts
     }
-  }
+  },
+  { immediate: true }
+)
 
-  return isValidationOk
-}
-
-function save() {
-  errorForm.value = {
-    hostList: ['']
-  }
-  if (validate()) {
-    saving.value = true
+const hostErrors = computed(() =>
+  hosts.value.map((_, i) => t(validationBag.value.getFirstI18nKeyFor(`hosts.${i}`)))
+)
 
-    const payload = {
-      hosts: formPing.value.hostList.filter((item) => item)
+const {
+  mutate,
+  status: mutateStatus,
+  error: mutateError,
+  isPending: isSaving
+} = useMutation({
+  mutationFn: () => ubusCall('ns.telegraf', 'set-hosts', { hosts: hosts.value.filter((h) => h) }),
+  onMutate: () => validationBag.value.clear(),
+  onSuccess: async () => {
+    await Promise.all([
+      uci.getChanges(),
+      queryClient.invalidateQueries({ queryKey: ['telegraf', 'config'] })
+    ])
+  },
+  onError: (e: Error) => {
+    if (e instanceof ValidationError) {
+      validationBag.value = e.errorBag
     }
-
-    ubusCall('ns.netdata', 'set-hosts', payload)
-      .then((response) => {
-        if (response?.data?.success && response.data.success) {
-          getConfiguration()
-        }
-      })
-      .catch((exception: AxiosError) => {
-        errorSaving.value.notificationTitle = t('error.cannot_save_configuration')
-        errorSaving.value.notificationDescription = t(getAxiosErrorMessage(exception))
-        errorSaving.value.notificationDetails = exception.toString()
-      })
-      .finally(() => (saving.value = false))
   }
-}
+})
 </script>
 
 <template>
@@ -112,54 +78,43 @@ function save() {
     <p class="mb-6 max-w-2xl text-sm font-normal text-gray-500 dark:text-gray-400">
       {{ t('standalone.ping_latency_monitor.description') }}
     </p>
-    <NeSkeleton v-if="loading" :lines="5" />
+    <NeSkeleton v-if="isPending" :lines="5" />
     <NeInlineNotification
-      v-if="!loading && errorConfiguration.notificationTitle"
+      v-else-if="isError"
       class="my-4"
       kind="error"
-      :title="errorConfiguration.notificationTitle"
-      :description="errorConfiguration.notificationDescription"
-    >
-      <template v-if="errorConfiguration.notificationDetails" #details>
-        {{ errorConfiguration.notificationDetails }}
-      </template>
-    </NeInlineNotification>
-    <template v-if="!loading && !errorConfiguration.notificationTitle">
-      <div class="max-w-md">
+      :title="t('error.cannot_retrieve_telegraf_configuration')"
+      :description="t(getAxiosErrorMessage(error))"
+    />
+    <template v-else>
+      <form class="max-w-md space-y-6" @submit.prevent="mutate()">
         <NeMultiTextInput
-          ref="hostListRef"
-          v-model="formPing.hostList"
+          v-model="hosts"
           :title="t('standalone.ping_latency_monitor.host_to_monitor')"
           :add-item-label="t('standalone.ping_latency_monitor.add_host')"
-          :invalid-messages="errorForm.hostList"
-          :disable-inputs="saving"
-          :disable-add-button="saving"
+          :invalid-messages="hostErrors"
+          :disable-inputs="isSaving"
+          :disable-add-button="isSaving"
           optional
           :optional-label="t('common.optional')"
         />
-        <div class="mt-6">
-          <hr />
-        </div>
         <NeInlineNotification
-          v-if="errorSaving.notificationTitle"
+          v-if="mutateStatus === 'error' && validationBag.size < 1"
           class="my-4"
           kind="error"
-          :title="errorSaving.notificationTitle"
-          :description="errorSaving.notificationDescription"
-        >
-          <template v-if="errorSaving.notificationDetails" #details>
-            {{ errorSaving.notificationDetails }}
-          </template>
-        </NeInlineNotification>
-        <div class="flex justify-end py-6">
-          <NeButton :disabled="saving" :kind="'primary'" :loading="saving" @click="save()">
+          :title="t('error.cannot_save_configuration')"
+          :description="t(getAxiosErrorMessage(mutateError))"
+        />
+        <hr />
+        <div class="flex justify-end">
+          <NeButton :disabled="isSaving" kind="primary" :loading="isSaving" type="submit">
             <template #prefix>
-              <FontAwesomeIcon :icon="['fas', 'floppy-disk']" class="h-4 w-4" aria-hidden="true" />
+              <FontAwesomeIcon :icon="faFloppyDisk" class="h-4 w-4" aria-hidden="true" />
             </template>
             {{ t('common.save') }}
           </NeButton>
         </div>
-      </div>
+      </form>
     </template>
   </div>
 </template>