From 405b0e6dcc96f32c80c6241d5d49e01f2513d2a2 Mon Sep 17 00:00:00 2001
From: Matteo Biscosi <biscosi@ntop.org>
Date: Wed, 16 Jul 2025 17:39:50 +0200
Subject: [PATCH] Added loading to various pages

---
 http_src/utilities/formatter-utils.js         |   1 -
 http_src/vue/dashboard.vue                    |  15 +-
 http_src/vue/loading.vue                      |   6 +-
 http_src/vue/page-active-monitoring.vue       |   6 +-
 http_src/vue/page-alert-stats.vue             |   2 +-
 http_src/vue/page-as-stats.vue                |  11 +-
 http_src/vue/page-assets.vue                  |   4 +-
 http_src/vue/page-exporters-interfaces.vue    |  10 +-
 http_src/vue/page-flow-exporters-list.vue     |   2 +-
 http_src/vue/page-flow-historical.vue         |   2 +-
 http_src/vue/page-flows-list.vue              |   2 +-
 http_src/vue/page-hosts-list.vue              |  13 +-
 .../vue/page-infrastructure-monitoring.vue    | 233 ++++++++++++++++++
 http_src/vue/page-server-ports.vue            |   2 +-
 http_src/vue/page-snmp-device-rules.vue       |   2 +-
 http_src/vue/page-snmp-devices.vue            |   2 +-
 http_src/vue/page-snmp-interfaces.vue         |   2 +-
 http_src/vue/page-snmp-similarity.vue         |   2 +-
 http_src/vue/page-snmp-topology.vue           |   2 +-
 http_src/vue/page-snmp-usage.vue              |   2 +-
 http_src/vue/page-vulnerability-scan.vue      |   2 +-
 http_src/vue/table-with-config.vue            |   3 +-
 http_src/vue/table.vue                        |  11 +
 httpdocs/tables_config/active-monitoring.json |  12 +-
 24 files changed, 299 insertions(+), 50 deletions(-)
 create mode 100644 http_src/vue/page-infrastructure-monitoring.vue

diff --git a/http_src/utilities/formatter-utils.js b/http_src/utilities/formatter-utils.js
index 92421060bb..8935bbc2f9 100644
--- a/http_src/utilities/formatter-utils.js
+++ b/http_src/utilities/formatter-utils.js
@@ -353,7 +353,6 @@ function formatDateTime(date, type = 'datetime') {
     if (type === 'date_only') {
         return formatted_date;
     }
-    debugger
     // datetime format
     return `${formatted_date}, ${time_formatter}`;
 }
diff --git a/http_src/vue/dashboard.vue b/http_src/vue/dashboard.vue
index dc6b60ceef..5e27d83c85 100644
--- a/http_src/vue/dashboard.vue
+++ b/http_src/vue/dashboard.vue
@@ -157,15 +157,15 @@
 
             <!-- Rendered Components -->
             <template v-for="c in components">
-                <Box :color="(c.active && c.color) || c.inactive_color" :width="c.width"
-                    :height="c.height" :id="c.id" class="drag-item">
+                <Box :color="(c.active && c.color) || c.inactive_color" :width="c.width" :height="c.height" :id="c.id"
+                    class="drag-item">
                     <template v-slot:box_title>
                         <div v-if="c.i18n_name" class="mb-2 modal-header">
                             <h4 class="modal-title">
                                 {{ c.custom_name ? c.custom_name : _i18n(c.i18n_name) }}
                                 <span style="color: gray">
                                     {{ c.time_offset ? _i18n('dashboard.' + (is_live ? 'time_ago' : 'time_offset_list')
-            + '.' + c.time_offset) : '' }}
+                                        + '.' + c.time_offset) : '' }}
                                 </span>
                             </h4>
                             <div v-if="edit_mode" class="modal-close">
@@ -180,6 +180,7 @@
                     </template>
                     <template v-slot:box_content>
                         <div>
+                            <Loading :isLoading="c.isLoading"></Loading>
                             <component :is="components_dict[c.component]" :id="c.id" :style="component_custom_style(c)"
                                 :epoch_begin="c.epoch_begin" :epoch_end="c.epoch_end" :i18n_title="c.i18n_name"
                                 :ifid="c.ifid ? c.ifid.toString() : context.ifid.toString()" :max_width="c.width"
@@ -238,6 +239,7 @@ import { default as ModalSelectComponent } from "./modal-select-component.vue";
 import { default as ModalEditComponent } from "./modal-edit-component.vue";
 import { default as ModalDeleteConfirm } from "./modal-delete-confirm.vue";
 import { default as Spinner } from "./spinner.vue";
+import { default as Loading } from "./loading.vue";
 
 import { default as Box } from "./dashboard-box.vue";
 
@@ -550,7 +552,7 @@ async function load_filters(filters_available, res, show_second_load) {
             } else {
                 selected_filters.value[id] = filter_options[0];
             }
-            
+
             all_available_filters.value[id] = filter_options;
             filtered_filters.value[id] = filter_options
             added_filters_list.push(id);
@@ -571,6 +573,7 @@ async function load_components(epoch_interval, template_name) {
             let c_ext = {
                 filters: {},
                 component_id: `auto_${c.id}_${index}`,
+                isLoading: true,
                 ...c
             };
             update_component_epoch_interval(c_ext, epoch_interval);
@@ -883,7 +886,7 @@ function set_report_title() {
  */
 function check_diff_params(previous_params, current_params) {
     /* Empty params, return true, they are different */
-    if (!previous_params || !current_params) 
+    if (!previous_params || !current_params)
         return true;
     /* Check the length, if it's different return true, a new/removed filter/param */
     if (Object.keys(previous_params).length != Object.keys(current_params).length)
@@ -929,6 +932,7 @@ function get_component_data_func(component) {
                 if (info.data && !info.data.done) {
                     pending = true;
                     await info.data; /* wait in case of previous pending requests */
+                    component.isLoading = false;
                 }
             }
 
@@ -969,6 +973,7 @@ function get_component_data_func(component) {
 
                 info.data.then(() => {
                     info.data.done = true;
+                    component.isLoading = false
                 });
 
             }
diff --git a/http_src/vue/loading.vue b/http_src/vue/loading.vue
index bbed458182..d5d6a476ad 100644
--- a/http_src/vue/loading.vue
+++ b/http_src/vue/loading.vue
@@ -25,7 +25,9 @@ const props = defineProps({
 
 /* By default already show the loading */
 onMounted(() => {
-    showLoading();
+    if (props.isLoading) {
+        showLoading();
+    }
 })
 
 /* *************************************** */
@@ -62,7 +64,7 @@ function hideLoading() {
     display: flex;
     justify-content: center !important;
     align-items: flex-start !important;
-    padding-top: 20vh; 
+    padding-top: 10%;
     z-index: 999;
     /* Bootstrap max overlay is 999 */
     opacity: 0;
diff --git a/http_src/vue/page-active-monitoring.vue b/http_src/vue/page-active-monitoring.vue
index 5bb3ac25fb..131ea485bd 100644
--- a/http_src/vue/page-active-monitoring.vue
+++ b/http_src/vue/page-active-monitoring.vue
@@ -5,7 +5,7 @@
         </div>
     </template>
     <div class="m-2 mb-3" :class="[(!props.context.is_am_active) ? 'ntopng-gray-out' : '']">
-        <TableWithConfig ref="table_active_monitoring" :table_id="table_id" :csrf="context.csrf"
+        <TableWithConfig ref="table_active_monitoring" :table_id="table_id" :csrf="context.csrf" :showLoading="true"
             :f_map_columns="map_table_def_columns" :get_extra_params_obj="get_extra_params_obj"
             :f_sort_rows="columns_sorting" @custom_event="on_table_custom_event">
             <template v-slot:custom_buttons>
@@ -16,7 +16,7 @@
             <template v-slot:custom_header>
                 <div class="dropdown me-3 d-inline-block" v-for="item in filter_table_array">
                     <span class="no-wrap d-flex align-items-center my-auto me-2 filters-label"><b>{{ item["basic_label"]
-                            }}</b></span>
+                    }}</b></span>
                     <SelectSearch v-model:selected_option="item['current_option']" theme="bootstrap-5"
                         dropdown_size="small" :options="item['options']" @select_option="add_table_filter">
                     </SelectSearch>
@@ -78,7 +78,7 @@ const props = defineProps({
 /* ************************************** */
 
 const click_button_manage_configuration = () => {
-  window.location.href = manage_configurations_url;
+    window.location.href = manage_configurations_url;
 }
 
 /* ************************************** */
diff --git a/http_src/vue/page-alert-stats.vue b/http_src/vue/page-alert-stats.vue
index d1107d1ebf..3f06891081 100644
--- a/http_src/vue/page-alert-stats.vue
+++ b/http_src/vue/page-alert-stats.vue
@@ -69,7 +69,7 @@
                         </div>
                         <div></div>
                         <TableWithConfig ref="table_alerts" :table_config_id="table_config_id" :table_id="table_id"
-                            :csrf="context.csrf" :f_map_columns="map_table_def_columns"
+                            :csrf="context.csrf" :showLoading="true" :f_map_columns="map_table_def_columns"
                             :get_extra_params_obj="get_extra_params_obj" :display_message="display_message"
                             :message_to_display="message_to_display" @loaded="on_table_loaded"
                             @custom_event="on_table_custom_event" @rows_loaded="rows_loaded">
diff --git a/http_src/vue/page-as-stats.vue b/http_src/vue/page-as-stats.vue
index 9a1d214a16..7608a05ebb 100644
--- a/http_src/vue/page-as-stats.vue
+++ b/http_src/vue/page-as-stats.vue
@@ -13,13 +13,14 @@
             <div v-if="showTitle" class="widget-name">
                 <h6 class="m-0">{{ chart_title }}</h6>
             </div>
-            <DashboardTimeseries ref="timeseries_chart" :key="timeseries_key" :id="timeseries_id" :epoch_begin="epoch_begin"
-                :epoch_end="epoch_end" :i18n_title="chart_title" :ifid="props.context.ifid.toString()" :max_width="12"
-                :max_height="4" :params="params" :get_component_data="get_component_data"
-                :set_component_attr="set_component_attr" :csrf="props.context.csrf">
+            <DashboardTimeseries ref="timeseries_chart" :key="timeseries_key" :id="timeseries_id"
+                :epoch_begin="epoch_begin" :epoch_end="epoch_end" :i18n_title="chart_title"
+                :ifid="props.context.ifid.toString()" :max_width="12" :max_height="4" :params="params"
+                :get_component_data="get_component_data" :set_component_attr="set_component_attr"
+                :csrf="props.context.csrf">
             </DashboardTimeseries>
         </div>
-        <TableWithConfig ref="table_as_stats" :table_id="table_id" :csrf="props.context.csrf"
+        <TableWithConfig ref="table_as_stats" :table_id="table_id" :csrf="props.context.csrf" :showLoading="true"
             :f_map_columns="map_table_def_columns" :f_sort_rows="columns_sorting"
             :get_extra_params_obj="get_extra_params_obj" @custom_event="on_table_custom_event">
         </TableWithConfig>
diff --git a/http_src/vue/page-assets.vue b/http_src/vue/page-assets.vue
index 317a60705f..ea2065f17d 100644
--- a/http_src/vue/page-assets.vue
+++ b/http_src/vue/page-assets.vue
@@ -6,7 +6,7 @@
             </div>
         </template>
         <div :class="[(!props.context.is_assets_collection_enabled) ? 'ntopng-gray-out' : '']">
-            <TableWithConfig ref="table_assets" :table_id="table_id" :csrf="context.csrf"
+            <TableWithConfig ref="table_assets" :table_id="table_id" :csrf="context.csrf" :showLoading="true"
                 :f_map_columns="map_table_def_columns" :get_extra_params_obj="get_extra_params_obj"
                 @custom_event="on_table_custom_event">
                 <template v-slot:custom_header>
@@ -359,7 +359,7 @@ async function load_table_filters_array() {
 const get_extra_params_obj = () => {
     let extra_params = ntopng_url_manager.get_url_object();
     extra_params = {
-        ...{ifid: props.context.ifid},
+        ...{ ifid: props.context.ifid },
         ...extra_params,
     }
     return extra_params;
diff --git a/http_src/vue/page-exporters-interfaces.vue b/http_src/vue/page-exporters-interfaces.vue
index eda2af26b0..34383dccf6 100644
--- a/http_src/vue/page-exporters-interfaces.vue
+++ b/http_src/vue/page-exporters-interfaces.vue
@@ -10,7 +10,8 @@ x2<template>
         </div>
       </div>
       <div class="col-md-4 mb-2">
-        <div ref="exporterComponent" class="bg-success text-white p-3 d-flex justify-content-between align-items-center">
+        <div ref="exporterComponent"
+          class="bg-success text-white p-3 d-flex justify-content-between align-items-center">
           <BadgeComponent id="exportersCounter" :params="exportersCounterParams" :ifid="props.context.ifid.toString()"
             :get_component_data="get_component_data_func(exportersCounterParams)"
             :set_component_attr="set_component_attr_func(exportersCounterParams)" :filters="{}">
@@ -18,7 +19,8 @@ x2<template>
         </div>
       </div>
       <div class="col-md-4 mb-2">
-        <div ref="interfaceComponent" class="bg-success text-white p-3 d-flex justify-content-between align-items-center">
+        <div ref="interfaceComponent"
+          class="bg-success text-white p-3 d-flex justify-content-between align-items-center">
           <BadgeComponent id="interfacesCounter" :params="interfacesCounterParams" :ifid="props.context.ifid.toString()"
             :get_component_data="get_component_data_func(interfacesCounterParams)"
             :set_component_attr="set_component_attr_func(interfacesCounterParams)" :filters="{}">
@@ -27,7 +29,7 @@ x2<template>
       </div>
     </div>
 
-    <TableWithConfig ref="table_exporters_details" :table_id="table_id" :csrf="csrf"
+    <TableWithConfig ref="table_exporters_details" :table_id="table_id" :csrf="csrf" :showLoading="true"
       :f_map_columns="map_table_def_columns" :f_sort_rows="columns_sorting"
       :get_extra_params_obj="get_extra_params_obj">
     </TableWithConfig>
@@ -113,7 +115,7 @@ function get_component_data_func(component) {
           component.componentRef.classList.add('bg-danger')
           component.componentRef.classList.remove('bg-success')
         }
-      } else if(response[component.current_value] === response[component.limit_value]) {
+      } else if (response[component.current_value] === response[component.limit_value]) {
         component.componentRef.classList.add('bg-warning')
         component.componentRef.classList.remove('bg-success')
       }
diff --git a/http_src/vue/page-flow-exporters-list.vue b/http_src/vue/page-flow-exporters-list.vue
index a345a11a8c..1adc897a4c 100644
--- a/http_src/vue/page-flow-exporters-list.vue
+++ b/http_src/vue/page-flow-exporters-list.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="m-2 mb-3">
-        <TableWithConfig ref="table_exporters_list" :table_id="table_id" :csrf="csrf"
+        <TableWithConfig ref="table_exporters_list" :table_id="table_id" :csrf="csrf" :showLoading="true"
             :f_map_columns="map_table_def_columns" :f_sort_rows="columns_sorting"
             :get_extra_params_obj="get_extra_params_obj" @custom_event="on_table_custom_event">
         </TableWithConfig>
diff --git a/http_src/vue/page-flow-historical.vue b/http_src/vue/page-flow-historical.vue
index 4ca31fddab..509c173d60 100644
--- a/http_src/vue/page-flow-historical.vue
+++ b/http_src/vue/page-flow-historical.vue
@@ -74,7 +74,7 @@
                             </div>
                         </div>
                         <TableWithConfig ref="table_flows" :table_id="table_id" :table_config_id="table_config_id"
-                            :csrf="context.csrf" :f_map_columns="map_table_def_columns"
+                            :csrf="context.csrf" :showLoading="true" :f_map_columns="map_table_def_columns"
                             :get_extra_params_obj="get_extra_params_obj" @loaded="on_table_loaded"
                             @custom_event="on_table_custom_event">
                             <template v-slot:custom_header>
diff --git a/http_src/vue/page-flows-list.vue b/http_src/vue/page-flows-list.vue
index 01e868e61a..361d79e9c5 100644
--- a/http_src/vue/page-flows-list.vue
+++ b/http_src/vue/page-flows-list.vue
@@ -2,7 +2,7 @@
 <template>
     <div class="m-2 mb-3">
         <TableWithConfig ref="table_flows_list" :table_id="table_id" :csrf="csrf" :f_map_columns="map_table_def_columns"
-            :get_extra_params_obj="get_extra_params_obj" :f_sort_rows="columns_sorting"
+            :showLoading="true" :get_extra_params_obj="get_extra_params_obj" :f_sort_rows="columns_sorting"
             @custom_event="on_table_custom_event" @rows_loaded="change_filter_labels">
             <template v-slot:custom_header>
                 <div class="dropdown me-3 d-inline-block" v-for="item in filter_table_array">
diff --git a/http_src/vue/page-hosts-list.vue b/http_src/vue/page-hosts-list.vue
index 324bd4bfcb..53d6977101 100644
--- a/http_src/vue/page-hosts-list.vue
+++ b/http_src/vue/page-hosts-list.vue
@@ -1,14 +1,15 @@
 <!-- (C) 2024 - ntop.org     -->
 <template>
     <div class="m-2 mb-3">
-        <TableWithConfig ref="table_hosts_list" :table_id="table_id" :csrf="csrf" :f_map_columns="map_table_def_columns"
-            :get_extra_params_obj="get_extra_params_obj" :f_sort_rows="columns_sorting"
-            @custom_event="on_table_custom_event" @rows_loaded="change_filter_labels">
+        <TableWithConfig ref="table_hosts_list" :table_id="table_id" :csrf="csrf" :showLoading="true"
+            :f_map_columns="map_table_def_columns" :get_extra_params_obj="get_extra_params_obj"
+            :f_sort_rows="columns_sorting" @custom_event="on_table_custom_event" @rows_loaded="change_filter_labels">
             <template v-slot:custom_header>
                 <div class="dropdown me-3 d-inline-block" v-for="item in filter_table_array">
-                    <span class="no-wrap d-flex align-items-center my-auto me-2 filters-label"><b>{{ item["basic_label"] }}</b></span>
+                    <span class="no-wrap d-flex align-items-center my-auto me-2 filters-label"><b>{{ item["basic_label"]
+                            }}</b></span>
                     <!-- :key="host_filters_key" -->
-                    <SelectSearch v-model:selected_option="item['current_option']" theme="bootstrap-5" 
+                    <SelectSearch v-model:selected_option="item['current_option']" theme="bootstrap-5"
                         dropdown_size="small" :disabled="loading" :options="item['options']"
                         @select_option="add_table_filter">
                     </SelectSearch>
@@ -278,7 +279,7 @@ async function load_table_filters_array() {
 
     return res.map((t) => {
         const key_in_url = ntopng_url_manager.get_url_entry(t.name);
-        if(dataUtils.isEmptyOrNull(key_in_url)) {
+        if (dataUtils.isEmptyOrNull(key_in_url)) {
             ntopng_url_manager.set_key_to_url(t.name, ``);
         }
         return {
diff --git a/http_src/vue/page-infrastructure-monitoring.vue b/http_src/vue/page-infrastructure-monitoring.vue
new file mode 100644
index 0000000000..29ed551237
--- /dev/null
+++ b/http_src/vue/page-infrastructure-monitoring.vue
@@ -0,0 +1,233 @@
+<!-- (C) 2024 - ntop.org     -->
+<template>
+    <template v-if="(!props.context.is_am_active)">
+        <div class="alert alert-warning" role="alert" id='error-alert' v-html:="error_message">
+        </div>
+    </template>
+    <div class="m-2 mb-3" :class="[(!props.context.is_am_active) ? 'ntopng-gray-out' : '']">
+        <TableWithConfig ref="table_active_monitoring" :table_id="table_id" :csrf="context.csrf"
+            :f_map_columns="map_table_def_columns" :get_extra_params_obj="get_extra_params_obj"
+            :f_sort_rows="columns_sorting" @custom_event="on_table_custom_event">
+            <template v-slot:custom_buttons>
+                <button class="btn btn-link" type="button" @click="add_monitoring">
+                    <i class="fas fa-plus"></i>
+                </button>
+            </template>
+        </TableWithConfig>
+        <div class="card-footer mt-3">
+            <button v-if="props.context.is_admin" type="button" class="btn btn-secondary ms-1"
+                :href="manage_configurations_url">
+                <i class="fas fa-tasks"></i>
+                {{ _i18n("manage_configurations.manage_configuration") }}
+            </button>
+        </div>
+    </div>
+    <ModalAddActiveMonitoring ref="modal_add_active_monitoring" :interfaces="interfaces_list"
+        :measurements="measurements_list" :context="context" :url_request="new_measurement_url" @add="refresh_table">
+    </ModalAddActiveMonitoring>
+    <ModalDeleteActiveMonitoring ref="modal_delete" :interfaces="interfaces_list" :measurements="measurements_list"
+        :context="context" :url_request="new_measurement_url" @delete="refresh_table">
+    </ModalDeleteActiveMonitoring>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeMount } from "vue";
+import { default as TableWithConfig } from "./table-with-config.vue";
+import { default as SelectSearch } from "./select-search.vue";
+import { default as sortingFunctions } from "../utilities/sorting-utils.js";
+import { default as visualizationUtils } from "../utilities/visualization-utils.js";
+import { default as activeMonitoringUtils } from "../utilities/map/active-monitoring-utils.js";
+import { default as dataUtils } from "../utilities/data-utils.js";
+import { ntopng_url_manager } from "../services/context/ntopng_globals_services.js";
+import { default as ModalAddActiveMonitoring } from "./modal-add-active-monitoring.vue";
+import { default as ModalDeleteActiveMonitoring } from "./modal-delete-active-monitoring.vue";
+import { default as interfaceUtils } from "../utilities/map/interface-utils.js";
+
+const _i18n = (t) => i18n(t);
+
+const host_filters_key = ref(0);
+const table_id = ref('infrastructure-monitoring');
+const filter_table_array = ref([]);
+const date_format = ref(null);
+const table_active_monitoring = ref();
+const measurements_list = ref([]);
+const interfaces_list = ref([]);
+const modal_add_active_monitoring = ref(null);
+const modal_delete = ref(null);
+const error_message = ref(i18n('host_config.active_monitor_enable'))
+const manage_configurations_url = ref(http_prefix + '/lua/admin/manage_configurations.lua?item=infrastructure')
+const measurements_url = ref(http_prefix + '/lua/rest/v2/get/active_monitoring/measurements.lua')
+const interfaces_url = ref(http_prefix + '/lua/rest/v2/get/ntopng/interfaces.lua')
+const new_measurement_url = ref(http_prefix + '/lua/rest/v2/set/active_monitoring/measurement.lua')
+
+/* ************************************** */
+
+const props = defineProps({
+    context: Object,
+});
+
+/* ************************************** */
+
+const map_table_def_columns = (columns) => {
+    let map_columns = {
+        "name": (value, row) => {
+            return value;
+        },
+        "url": (value, row) => {
+            const label = value.replace(/(http(s)?)\:\/\//, '');
+            return `<a class="ntopng-external-link" href='${url}' target='_self'>${label} <i class='fas fas fa-external-link-alt'></i></a>`
+        },
+        "status": (value, row) => {
+            return value
+        },
+        "throughput": (value, row) => {
+            return value
+        },
+        "hosts": (value, row) => {
+            return value;
+        },
+        "threshold": (value, row) => {
+            return value + " " + i18n(row.metadata.unit);
+        },
+        "flows": (value, row) => {
+            return value
+        },
+        "engaged_alerts": (value, row) => {
+            return value
+        },
+        "flow_alerts": (value, row) => {
+            return value
+        }
+    };
+
+    columns.forEach((c) => {
+        c.render_func = map_columns[c.data_field];
+        if (c.id == "actions") {
+            const visible_dict = {
+                edit: props.context.is_admin,
+                delete: props.context.is_admin,
+                timeseries: props.context.timeseries_enabled,
+            };
+            c.button_def_array.forEach((b) => {
+                b.f_map_class = (current_class, row) => {
+                    // if is not defined is enabled
+                    if (!visible_dict[b.id]) {
+                        current_class.push("disabled");
+                    }
+                    return current_class;
+                }
+            });
+        }
+    });
+
+    return columns;
+};
+
+/* ************************************** */
+
+function column_data(col, row) {
+    return row[col.data.data_field];
+}
+
+/* ************************************** */
+
+function columns_sorting(col, r0, r1) {
+    if (col != null) {
+        let r0_col = column_data(col, r0);
+        let r1_col = column_data(col, r1);
+        const lower_value = 0;
+
+        /* In case the values are the same, sort by IP */
+        if (col.id == "name") {
+            return sortingFunctions.sortByName(r0_col, r1_col, col.sort);
+        } else if (col.id == "status") {
+            return sortingFunctions.sortByNumber(r0_col, r1_col, col.sort);
+        } else if (col.id == "throughput") {
+            return sortingFunctions.sortByNumberWithNormalizationValue(r0_col, r1_col, col.sort, lower_value);
+        } else if (col.id == "hosts") {
+            return sortingFunctions.sortByNumberWithNormalizationValue(r0_col, r1_col, col.sort, lower_value);
+        } else if (col.id == "flows") {
+            return sortingFunctions.sortByNumberWithNormalizationValue(r0_col, r1_col, col.sort, lower_value);
+        } else if (col.id == "engaged_alerts") {
+            return sortingFunctions.sortByNumberWithNormalizationValue(r0_col, r1_col, col.sort, lower_value);
+        } else if (col.id == "flow_alerts") {
+            return sortingFunctions.sortByNumberWithNormalizationValue(r0_col, r1_col, col.sort, lower_value);
+        } else if (col.id == "last_update") {
+            return sortingFunctions.sortByNumberWithNormalizationValue(r0_col, r1_col, col.sort, lower_value);
+        }
+    }
+}
+
+/* ************************************** */
+
+const get_extra_params_obj = () => {
+    let extra_params = ntopng_url_manager.get_url_object();
+    extra_params.stats = true;
+    return extra_params;
+};
+
+/* ************************************** */
+
+function add_monitoring() {
+    modal_add_active_monitoring.value.show();
+}
+
+/* ************************************** */
+
+function click_button_delete(event) {
+    const row = event.row;
+    modal_delete.value.show(row);
+}
+
+/* ************************************** */
+
+function click_button_edit(event) {
+    const row = event.row;
+    modal_add_active_monitoring.value.show(row);
+}
+
+/* ************************************** */
+
+function click_button_timeseries(event) {
+    const row = event.row;
+    window.open(`${http_prefix}/lua/active_monitoring.lua?host=${row.target.host}&measurement=${row.last_measurement.measurement_type}&page=historical`);
+}
+
+/* ************************************** */
+
+function on_table_custom_event(event) {
+    let events_managed = {
+        "click_button_edit": click_button_edit,
+        "click_button_delete": click_button_delete,
+        "click_button_timeseries": click_button_timeseries,
+    };
+    if (events_managed[event.event_id] == null) {
+        return;
+    }
+    events_managed[event.event_id](event);
+}
+
+/* ************************************** */
+
+function refresh_table() {
+    table_active_monitoring.value.refresh_table();
+}
+
+/* ************************************** */
+
+onMounted(async () => {
+    filter_table_array.value = await load_table_filters_array();
+    set_filter_array_label()
+});
+
+/* ************************************** */
+
+onBeforeMount(async () => {
+    measurements_list.value = await ntopng_utility.http_request(measurements_url.value);
+    interfaces_list.value = await ntopng_utility.http_request(interfaces_url.value);
+    date_format.value = await ntopng_utility.get_date_format(false, props.context.csrf, http_prefix);
+})
+
+/* ************************************** */
+
+</script>
diff --git a/http_src/vue/page-server-ports.vue b/http_src/vue/page-server-ports.vue
index 4e84db41da..20c7707219 100644
--- a/http_src/vue/page-server-ports.vue
+++ b/http_src/vue/page-server-ports.vue
@@ -36,7 +36,7 @@
                         </div>
                     </div>
                     <div>
-                        <TableWithConfig ref="table_server_ports" :csrf="csrf" :table_id="table_id"
+                        <TableWithConfig ref="table_server_ports" :csrf="csrf" :table_id="table_id" :showLoading="true"
                             :f_map_columns="map_table_def_columns" :get_extra_params_obj="get_extra_params_obj"
                             @custom_event="on_table_custom_event">
                             <template v-slot:custom_header>
diff --git a/http_src/vue/page-snmp-device-rules.vue b/http_src/vue/page-snmp-device-rules.vue
index 8e5698d15c..354bd589ea 100644
--- a/http_src/vue/page-snmp-device-rules.vue
+++ b/http_src/vue/page-snmp-device-rules.vue
@@ -17,7 +17,7 @@
       <div class="card">
         <div class="card-body">
           <div class="m-2 mb-3">
-            <TableWithConfig ref="table_snmp_rules" :table_id="table_id" :csrf="context.csrf"
+            <TableWithConfig ref="table_snmp_rules" :table_id="table_id" :csrf="context.csrf" :showLoading="true"
               :f_map_columns="map_table_def_columns" :get_extra_params_obj="get_extra_params_obj"
               :f_sort_rows="columns_sorting" @custom_event="on_table_custom_event">
               <template v-slot:custom_buttons>
diff --git a/http_src/vue/page-snmp-devices.vue b/http_src/vue/page-snmp-devices.vue
index e18e12fb9a..9aada7d23e 100644
--- a/http_src/vue/page-snmp-devices.vue
+++ b/http_src/vue/page-snmp-devices.vue
@@ -15,7 +15,7 @@
           <span> {{ import_ok_text }}</span>
         </div>
 
-        <TableWithConfig ref="table_snmp_devices" :table_id="table_id" :csrf="csrf"
+        <TableWithConfig ref="table_snmp_devices" :table_id="table_id" :csrf="csrf" :showLoading="true"
           :f_map_columns="map_table_def_columns" :get_extra_params_obj="get_extra_params_obj"
           :f_sort_rows="columns_sorting" @custom_event="on_table_custom_event" @rows_loaded="change_filter_labels">
           <template v-slot:custom_buttons>
diff --git a/http_src/vue/page-snmp-interfaces.vue b/http_src/vue/page-snmp-interfaces.vue
index 401c3a6986..d35bfa8e94 100644
--- a/http_src/vue/page-snmp-interfaces.vue
+++ b/http_src/vue/page-snmp-interfaces.vue
@@ -1,7 +1,7 @@
 <!-- (C) 2024 - ntop.org     -->
 <template>
     <div class="m-2 mb-3">
-        <TableWithConfig ref="table_snmp_interfaces" :table_id="table_id" :csrf="csrf"
+        <TableWithConfig ref="table_snmp_interfaces" :table_id="table_id" :csrf="csrf" :showLoading="true"
             :f_map_columns="map_table_def_columns" :get_extra_params_obj="get_extra_params_obj"
             :f_sort_rows="columns_sorting" @custom_event="on_table_custom_event">
             <template v-slot:custom_header>
diff --git a/http_src/vue/page-snmp-similarity.vue b/http_src/vue/page-snmp-similarity.vue
index f66c6e623a..8d02425ec1 100644
--- a/http_src/vue/page-snmp-similarity.vue
+++ b/http_src/vue/page-snmp-similarity.vue
@@ -4,7 +4,7 @@
 
 <template>
   <div class="m-2 mb-3">
-    <TableWithConfig ref="table_similarity" :table_id="table_id" :csrf="context.csrf"
+    <TableWithConfig ref="table_similarity" :table_id="table_id" :csrf="context.csrf" :showLoading="true"
       :f_map_columns="map_table_def_columns" :get_extra_params_obj="get_extra_params_obj" :f_sort_rows="columns_sorting"
       @rows_loaded="on_table_loaded">
     </TableWithConfig>
diff --git a/http_src/vue/page-snmp-topology.vue b/http_src/vue/page-snmp-topology.vue
index e82a9eed74..159100ebb6 100644
--- a/http_src/vue/page-snmp-topology.vue
+++ b/http_src/vue/page-snmp-topology.vue
@@ -4,7 +4,7 @@
 
 <template>
   <div class="m-2 mb-3">
-    <TableWithConfig ref="table_topology" :table_id="table_id" :csrf="context.csrf"
+    <TableWithConfig ref="table_topology" :table_id="table_id" :csrf="context.csrf" :showLoading="true"
       :f_map_columns="map_table_def_columns" :get_extra_params_obj="get_extra_params_obj" :f_sort_rows="columns_sorting"
       @rows_loaded="on_table_loaded">
     </TableWithConfig>
diff --git a/http_src/vue/page-snmp-usage.vue b/http_src/vue/page-snmp-usage.vue
index 269b430e62..95883b736c 100644
--- a/http_src/vue/page-snmp-usage.vue
+++ b/http_src/vue/page-snmp-usage.vue
@@ -11,7 +11,7 @@
             </TimeseriesChart>
         </div>
         <div class="m-2 mb-3">
-            <TableWithConfig ref="table_snmp_usage" :table_id="table_id" :csrf="csrf" :f_map_columns="map_table_def_columns"
+            <TableWithConfig ref="table_snmp_usage" :table_id="table_id" :csrf="csrf" :showLoading="true" :f_map_columns="map_table_def_columns"
                 :get_extra_params_obj="get_extra_params_obj" :f_sort_rows="columns_sorting"
                 @custom_event="on_table_custom_event">
             </TableWithConfig>
diff --git a/http_src/vue/page-vulnerability-scan.vue b/http_src/vue/page-vulnerability-scan.vue
index 9876f7fcf1..fcf44844f3 100644
--- a/http_src/vue/page-vulnerability-scan.vue
+++ b/http_src/vue/page-vulnerability-scan.vue
@@ -36,7 +36,7 @@
             <ModalUpdatePeriodicityScan ref="modal_update_perioditicy_scan" :title="title_update_periodicity_scan"
               @update="update_all_scan_frequencies">
             </ModalUpdatePeriodicityScan>
-            <TableWithConfig ref="table_hosts_to_scan" :table_id="table_id" :csrf="context.csrf"
+            <TableWithConfig ref="table_hosts_to_scan" :table_id="table_id" :showLoading="true" :csrf="context.csrf"
               :f_map_columns="map_table_def_columns" :get_extra_params_obj="get_extra_params_obj"
               :f_sort_rows="columns_sorting" @custom_event="on_table_custom_event" @rows_loaded="on_table_loaded">
               <template v-slot:custom_buttons>
diff --git a/http_src/vue/table-with-config.vue b/http_src/vue/table-with-config.vue
index b0edc9226e..70be6effd7 100644
--- a/http_src/vue/table-with-config.vue
+++ b/http_src/vue/table-with-config.vue
@@ -7,7 +7,7 @@
         :f_column_min_width="table_config.f_column_min_width" :f_get_column_classes="table_config.f_get_column_classes"
         :f_get_column_style="table_config.f_get_column_style" :display_empty_rows="table_config.display_empty_rows"
         :f_sort_rows="f_sort_rows" :enable_search="table_config.enable_search" :default_sort="table_config.default_sort"
-        :show_autorefresh="table_config.show_autorefresh" :paging="table_config.paging" :csrf="csrf"
+        :show_autorefresh="table_config.show_autorefresh" :paging="table_config.paging" :csrf="csrf" :showLoading="showLoading"
         :display_message="display_message" :message_to_display="message_to_display" @loaded="on_loaded"
         @rows_loaded="rows_loaded" @custom_event="on_custom_event">
         <template v-slot:custom_header>
@@ -35,6 +35,7 @@ const props = defineProps({
     get_extra_params_obj: Function,
     display_message: Boolean,
     message_to_display: String,
+    showLoading: Boolean,
 });
 
 const table_config = ref({});
diff --git a/http_src/vue/table.vue b/http_src/vue/table.vue
index 76437e29e6..ec0d82d408 100644
--- a/http_src/vue/table.vue
+++ b/http_src/vue/table.vue
@@ -2,6 +2,7 @@
 <template>
     <slot name="custom_header2"></slot>
     <div ref="tableContainerRef" :id="id">
+        <Loading :isLoading="isLoading"></Loading>
         <div class="button-group mb-2 d-flex align-items-center"> <!-- TableHeader -->
             <div class="form-group d-flex align-items-end" style="flex-wrap: wrap;">
                 <!-- Slot for custom header-->
@@ -167,6 +168,7 @@ import { default as Dropdown } from "./dropdown.vue";
 import { default as SelectTablePage } from "./select_table_page.vue";
 import { default as VueNode } from "./vue_node.vue";
 import { default as Switch } from "./switch.vue";
+import { default as Loading } from "./loading.vue";
 import NtopUtils from "../utilities/ntop-utils.js";
 
 /* rows_loaded, is emitted every time the rows are loaded,
@@ -200,6 +202,7 @@ const props = defineProps({
     paging: Boolean,                // Enable server-side pagination
     display_message: Boolean,       // Display a message instead of the table
     message_to_display: String,     // Message to display    
+    showLoading: Boolean,
 });
 
 // Get number of rows shown per page from local storage
@@ -222,6 +225,7 @@ const rowsPerPageOptions = [10, 20, 40, 50, 80, 100];  // Available rows per pag
 const rowsPerPage = ref(get_num_pages());               // Current rows per page setting
 const columnWidthStore = window.store;                          // Store for column width persistence
 const searchString = ref("");                          // Search term
+const isLoading = ref(props.showLoading ? props.showLoading : false);
 
 const paginationRef = ref(null);                 // Reference to pagination component
 const query_info = ref(null);                        // Query execution info (time, records, SQL)
@@ -231,6 +235,7 @@ const isChangingRows = ref(false);                    // Flag for row data chang
 const isAutoRefreshEnabled = ref(false);               // Auto-refresh state
 
 onMounted(async () => {
+    debugger;
     if (props.columns != null) {
         load_table();
     }
@@ -562,6 +567,9 @@ let isFirstDataLoad = true;
 
 // get and update rows data
 async function set_rows() {
+    if (props.showLoading) {
+        isLoading.value = true;
+    }
     // get rows from backend
     let res = await props.get_rows(
         currentPage,                // current page
@@ -597,6 +605,9 @@ async function set_rows() {
     // wait for dom to update and emit event
     await nextTick();
     emit('rows_loaded', res);
+    if (props.showLoading) {
+        isLoading.value = false;
+    }
 }
 
 // New function to filter rows based on search string
diff --git a/httpdocs/tables_config/active-monitoring.json b/httpdocs/tables_config/active-monitoring.json
index 251d0046c4..c0467892a7 100644
--- a/httpdocs/tables_config/active-monitoring.json
+++ b/httpdocs/tables_config/active-monitoring.json
@@ -25,27 +25,21 @@
 					"id": "timeseries",
 					"icon": "fas fa-chart-area",
 					"title_i18n": "prefs.timeseries",
-					"class": [
-						"btn-info"
-					],
+					"class": [],
 					"event_id": "click_button_timeseries"
 				},
 				{
 					"id": "edit",
 					"icon": "fas fa-edit",
 					"title_i18n": "edit",
-					"class": [
-						"btn-info"
-					],
+					"class": [],
 					"event_id": "click_button_edit"
 				},
 				{
 					"id": "delete",
 					"icon": "fas fa fa-trash",
 					"title_i18n": "delete",
-					"class": [
-						"btn-info"
-					],
+					"class": [],
 					"event_id": "click_button_delete"
 				}
 			]