Added exporters interfaces statistics (#8677)

* Split ndpi flow alerts enum from ntopng flow alerts enum

* Separated ndpi flow alerts form ntopng

* Removed tracing

* Fixed doc/remediation links not working in live hist flows

* Added total statistics for interfaces page

http_src/vue/dashboard-badge.vue

@@ -45,6 +45,7 @@ const props = defineProps({
 
 /* Watch - detect changes on epoch_begin / epoch_end and refresh the component */
 watch(() => [props.epoch_begin, props.epoch_end, props.filters], (cur_value, old_value) => {
+
   refresh_component();
 }, { flush: 'pre', deep: true });
 

http_src/vue/page-exporters-interfaces.vue

@@ -1,19 +1,44 @@
 <template>
-
-    <div class="m-2 mb-3">
-        <TableWithConfig ref="table_exporters_details" :table_id="table_id" :csrf="csrf" :f_map_columns="map_table_def_columns"
-            :f_sort_rows="columns_sorting" :get_extra_params_obj="get_extra_params_obj">
-        </TableWithConfig>
-
+    <div class="container-fluid p-3">
+      <div class="row">
+        <div class="col-md-4 mb-2">
+          <div class="bg-info text-white p-3 d-flex justify-content-between align-items-center">
+            <BadgeComponent id="probesCounter" :params="probesCounterParams" :ifid="props.context.ifid.toString()"
+              :get_component_data="get_component_data_func(probesCounterParams)"
+              :set_component_attr="set_component_attr_func(probesCounterParams)" :filters="{}">
+            </BadgeComponent>
+          </div>
+        </div>
+        <div class="col-md-4 mb-2">
+          <div class="bg-info 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="{}">
+            </BadgeComponent>
+          </div>
+        </div>
+        <div class="col-md-4 mb-2">
+          <div class="bg-info 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="{}">
+            </BadgeComponent>
+          </div>
+        </div>
+      </div>
+
+      <TableWithConfig ref="table_exporters_details" :table_id="table_id" :csrf="csrf"
+        :f_map_columns="map_table_def_columns" :f_sort_rows="columns_sorting"
+        :get_extra_params_obj="get_extra_params_obj">
+      </TableWithConfig>
     </div>
-</template>
-
+  </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, reactive } from "vue";
 import { default as sortingFunctions } from "../utilities/sorting-utils.js";
 import { default as TableWithConfig } from "./table-with-config.vue";
-import formatterUtils from "../utilities/formatter-utils";
+import { default as BadgeComponent } from "./dashboard-badge.vue";
 import { ntopng_url_manager } from "../services/context/ntopng_globals_services.js";
 
 const props = defineProps({
@@ -23,14 +48,79 @@ const props = defineProps({
 const table_id = ref('exporters_interfaces');
 const table_exporters_details = ref(null);
 const csrf = props.context.csrf;
+const components_info = reactive({});
 
 
 const exporter_notes_url = `${http_prefix}/lua/pro/rest/v2/get/exporters/exporter_notes.lua?`
 const flowdevice_interface_url = `${http_prefix}/lua/pro/enterprise/flowdevice_interface_details.lua?`
-const exporter_ip_url = `${http_prefix}/lua/pro/enterprise/exporter_details.lua?` // ip=192.168.2.73&exporter_uuid=&probe_uuid=
+const exporter_ip_url = `${http_prefix}/lua/pro/enterprise/exporter_details.lua?`
 const nprobe_ip_url = `${http_prefix}/lua/pro/enterprise/exporters.lua?probe_uuid=`
+const probes_counter_url = "/lua/pro/rest/v2/get/exporters/probes_count.lua"
+const exporters_counter_url = "/lua/pro/rest/v2/get/exporters/exporters_count.lua"
+const interfaces_counter_url = "/lua/pro/rest/v2/get/exporters/interfaces_count.lua"
+
+const interfaces_counter_str = "interfaces_count"
+const exporters_counter_str = "exporters_count"
+const probes_counter_str = "probes_count"
+
+// used for dashboard badges
+const badgeParams = {
+    "i18n_name": "",
+    "counter_formatter": "number",
+    "component_resp_field": "",
+    "counter_path": "count",
+    "url_params": {},
+    "url": ""
+}
+
+const probesCounterParams = reactive({ ...badgeParams, url: probes_counter_url, component_resp_field: probes_counter_str, i18n_name: create_18n_str(probes_counter_str) })
+const exportersCounterParams = reactive({ ...badgeParams, url: exporters_counter_url, component_resp_field: exporters_counter_str, i18n_name: create_18n_str(exporters_counter_str) })
+const interfacesCounterParams = reactive({ ...badgeParams, url: interfaces_counter_url, component_resp_field: interfaces_counter_str, i18n_name: create_18n_str(interfaces_counter_str) })
+const loading = ref(false);
+
+function create_18n_str(i18n_name) {
+    return "flow_devices." + i18n_name
+}
+
+function get_component_data_func(component) {
+    const get_component_data = async (url, url_params, post_params) => {
+        let info = {};
+        if (!components_info[component.url]) {
+            components_info[component.url] = {};
+        }
+        info = components_info[component.url];
 
+        if (info.data) {
+            await info.data;
+        }
+
+        const data_url = `${component.url}${url_params ? '?' + url_params : ''}`;
+
+        loading.value = true;
+        if (post_params) {
+            info.data = ntopng_utility.http_post_request(data_url, post_params);
+        } else {
+            info.data = ntopng_utility.http_request(data_url);
+        }
+
+        info.data = info.data.then((response) => {
+            loading.value = false;
+            const value = response[component.component_resp_field];
+
+            return { count: value }
+        });
 
+        return info.data;
+    };
+    return get_component_data;
+}
+
+function set_component_attr_func(component) {
+    const set_component_attr = async (attr, value) => {
+        component[attr] = value;
+    }
+    return set_component_attr;
+}
 const get_extra_params_obj = () => {
     let extra_params = ntopng_url_manager.get_url_object();
     return extra_params;

scripts/locales/en.lua

@@ -3243,6 +3243,9 @@ local lang = {
     ["web_mining_detected"] = "The website is known for mining cryptocurrencies on client devices",
   },
   ["flow_devices"] = {
+    ["probes_count"] = "Probes",
+    ["exporters_count"] = "Exporters",
+    ["interfaces_count"] = "Exporters Interfaces",
     ["exporters_interfaces"] = "Interfaces",
     ["active_sflow"] = "Active sFlow Exporters",
     ["all_device_ports"] = "All %{device} Ports",