Remade observation point ID and updated to vue 3.5 #8889

http_src/vue/ntop_vue.js

@@ -68,11 +68,14 @@ import { default as PageNetworkConfiguration } from "./page-network-configuratio
 import { default as PageNetworkPolicy } from "./page-network-policy.vue"
 import { default as PageLimits } from "./page-limits.vue"
 import { default as PageLocalHostsReport } from "./page-local-hosts-report.vue"
-import { default as PageAssets } from "./page-assets.vue"
-import { default as PageAssetDetails } from "./page-asset-details.vue"
+import { default as PageInactiveHostsList } from "./page-inactive-hosts.vue"
+import { default as PageInactiveHostDetails } from "./page-inactive-host-details.vue"
 import { default as PageAccessControlList } from "./page-access-control-list.vue"
 import { default as PageTopInterfaceApplications } from "./page-top-interface-applications.vue"
 import { default as PageTopInterfaceCategories } from "./page-top-interface-categories.vue"
+import { default as PageObservationPoints } from "./page-observation-points.vue"
+import { default as PageObservationPointsConfig } from "./page-observation-points-config.vue"
+import { default as PageObservationPointsList } from "./page-flow-exporters-list.vue"
 
 /* Config pages */
 import { default as PageSNMPConfig } from "./page-snmp-config.vue"
@@ -163,11 +166,14 @@ let ntopVue = {
     PageExportersDetails: PageExportersDetails,
     PageLimits: PageLimits,
     PageLocalHostsReport: PageLocalHostsReport,
-    PageAssets: PageAssets,
-    PageAssetDetails: PageAssetDetails,
+    PageInactiveHostsList: PageInactiveHostsList,
+    PageInactiveHostDetails: PageInactiveHostDetails,
     PageAccessControlList: PageAccessControlList,
     PageTopInterfaceApplications: PageTopInterfaceApplications,
     PageTopInterfaceCategories: PageTopInterfaceCategories,
+    PageObservationPoints: PageObservationPoints,
+    PageObservationPointsConfig: PageObservationPointsConfig,
+    PageObservationPointsList: PageObservationPointsList,
 
     /* SNMP */
     PageSNMPDevices: PageSNMPDevices,

http_src/vue/page-flow-exporters-list.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="m-2 mb-3">
+        <TableWithConfig ref="table_exporters_list" :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" @custom_event="on_table_custom_event">
+        </TableWithConfig>
+    </div>
+</template>
+
+
+<script setup>
+
+import { ref } from "vue";
+import { default as sortingFunctions } from "../utilities/sorting-utils.js";
+import { default as TableWithConfig } from "./table-with-config.vue";
+
+import { ntopng_url_manager } from "../services/context/ntopng_globals_services.js";
+
+
+const props = defineProps({
+    context: Object
+});
+
+const table_id = ref('flow_exporters_list');
+const table_exporters_list = ref(null);
+const csrf = props.context.csrf;
+
+const exporter_info_url = `${http_prefix}/lua/pro/db_search.lua?probe_ip=`
+const exporter_url = `${http_prefix}/lua/pro/enterprise/flowdevice_details.lua?ip=`
+
+const get_extra_params_obj = () => {
+    let extra_params = ntopng_url_manager.get_url_object();
+    return extra_params;
+};
+
+const map_table_def_columns = (columns) => {
+    let map_columns = {
+        "exporter_device": (value, row) => {
+            if (!value)
+                return '';
+
+            let exporters_formatted_url = exporter_url + value;
+            return `<a href=${exporters_formatted_url}>${value}</a>`
+        }
+    };
+
+    columns.forEach((c) => {
+        c.render_func = map_columns[c.data_field];
+    });
+
+    return columns;
+};
+
+
+function columns_sorting(col, r0, r1) {
+    if (col != null) {
+        if (col.id == "exporter_device") {
+            return sortingFunctions.sortByName(r0.exporter_device, r1.exporter_device, col.sort);
+        } else if (col.id == "exporters") {
+            return sortingFunctions.sortByNumber(r0.exporters, r1.exporters, col.sort);
+        }
+    }
+}
+
+function create_config_url_link(row) {
+    return exporter_info_url + row.exporter_device + ";eq&observation_point_id=" + props.context.observation_point + ";eq"
+}
+
+function click_button_live_flows(event) {
+    const row = event.row;
+    window.open(create_config_url_link(row));
+}
+
+function on_table_custom_event(event) {
+    let events_managed = {
+        "click_button_live_flows": click_button_live_flows,
+    };
+    if (events_managed[event.event_id] == null) {
+        return;
+    }
+    events_managed[event.event_id](event);
+}
+
+</script>

http_src/vue/page-observation-points-config.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="m-3">
+        <div class="card card-shadow">
+            <div class="card-body">
+                <form @submit.prevent="saveConfig">
+                    <table class="table table-striped table-bordered">
+                        <tbody>
+                            <tr>
+                                <th>{{ _i18n("observation_point_alias") }}</th>
+                                <td>
+                                    <input 
+                                        type="text" 
+                                        v-model="aliasValue"
+                                        class="form-control"
+                                        :placeholder="defaultAlias"
+                                        @input="handleInput"
+                                    />
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <div class="d-flex justify-content-end me-1">
+                        <button 
+                            class="btn"
+                            :class="saveButtonClass"
+                            :disabled="disableSave"
+                            @click="saveConfig"
+                        >
+                            {{ saveButtonText }}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { ntopng_utility } from "../services/context/ntopng_globals_services.js";
+
+const _i18n = (t) => i18n(t);
+
+const props = defineProps({
+    context: Object
+});
+
+const aliasValue = ref('');
+const defaultAlias = ref('');
+const disableSave = ref(true);
+const isSaving = ref(false);
+const saveSuccess = ref(false);
+
+// Computed properties for button states
+const saveButtonText = computed(() => {
+    if (isSaving.value) return 'Saving...';
+    if (saveSuccess.value) return 'Saved!';
+    return _i18n("save_settings");
+});
+
+const saveButtonClass = computed(() => {
+    if (saveSuccess.value) return 'btn-success';
+    return 'btn-primary';
+});
+
+// API endpoints
+const get_alias_url = `${http_prefix}/lua/rest/v2/get/observation_points/alias.lua?observation_point=${props.context.obs_point_id}`;
+const set_alias_url = `${http_prefix}/lua/rest/v2/set/observation_points/alias.lua`;
+
+// get alias
+onMounted(async () => {
+    try {
+        const response = await ntopng_utility.http_request(get_alias_url);
+        if (response) {
+            aliasValue.value = response;
+        }
+    } catch (error) {
+        console.error('Error fetching alias:', error);
+    }
+});
+
+// Handle input changes
+const handleInput = () => {
+    disableSave.value = aliasValue.value === defaultAlias.value;
+};
+
+
+const saveConfig = async () => {
+    if (disableSave.value) return;
+    
+    isSaving.value = true;
+    try {
+        await ntopng_utility.http_post_request(set_alias_url, {
+            csrf: props.context.csrf,
+            alias: aliasValue.value,
+            observation_point: props.context.obs_point_id
+        });
+
+        // Show success state
+        saveSuccess.value = true;
+        disableSave.value = true;
+        defaultAlias.value = aliasValue.value;
+        
+        setTimeout(() => {
+            saveSuccess.value = false;
+        }, 100);
+        window.location.reload();
+
+    } catch (error) {
+        console.error('Error saving alias:', error);
+    } finally {
+        isSaving.value = false;
+    }
+};
+</script>

http_src/vue/page-observation-points.vue

@@ -0,0 +1,143 @@
+<template>
+
+    <div class="m-2 mb-3">
+        <TableWithConfig ref="table_observation_points" :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" @custom_event="on_table_custom_event">
+        </TableWithConfig>
+
+        <NoteList :note_list="note_list"> </NoteList>
+
+    </div>
+</template>
+
+
+<script setup>
+
+import { ref, onMounted } from "vue";
+import { default as sortingFunctions } from "../utilities/sorting-utils.js";
+import { default as TableWithConfig } from "./table-with-config.vue";
+import { default as NoteList } from "./note-list.vue";
+import formatterUtils from "../utilities/formatter-utils";
+import { ntopng_url_manager } from "../services/context/ntopng_globals_services.js";
+const _i18n = (t) => i18n(t);
+
+const props = defineProps({
+    context: Object
+});
+
+const note_list = ref([
+    i18n("flow_devices.note_observation_points_fields1").replace("%{url}", `${http_prefix}/lua/admin/prefs.lua?tab=on_disk_ts`),
+    i18n("flow_devices.note_observation_points_fields2").replace("%{url}", `https://www.ntop.org/guides/ntopng/using_with_other_tools/nprobe.html#observation-points`),
+    i18n("flow_devices.note_observation_points_fields3")
+]);
+const snmp_port_idx = ref(null);
+const table_id = ref('observation_points');
+const table_observation_points = ref(null);
+const csrf = props.context.csrf;
+
+const observation_point_config_url = `${http_prefix}/lua/pro/enterprise/observation_points.lua?page=config&observation_point=`
+const exporters_url = `${http_prefix}/lua/pro/enterprise/flowdevices_list.lua?obs_point=`
+const timeseries_url = `${http_prefix}/lua/pro/enterprise/observation_points.lua?page=historical&observation_point=`
+
+const get_extra_params_obj = () => {
+    let extra_params = ntopng_url_manager.get_url_object();
+    return extra_params;
+};
+
+function get_ip_from_url() {
+    return ntopng_url_manager.get_url_entry('ip')
+}
+
+const map_table_def_columns = (columns) => {
+    let map_columns = {
+        "observation_point": (value, row) => {
+            // get table footer notes
+            var returnValue = value;
+
+            // Add timeseries icon if timeseries are enabled
+            if (row['observation_point_name']) {
+                returnValue = `&nbsp;${row['observation_point_name']}`
+            }
+
+            let config_url = observation_point_config_url + value;
+            returnValue += `&nbsp;<a href=${config_url}><i class="fas fa-cog fa-lg"></i></a>`
+
+            if (row["timeseries"]) {
+                let timeseries_full_url = timeseries_url + value;
+                returnValue += `&nbsp;<a href=${timeseries_full_url}><i class="fas fa-chart-area fa-lg"></i></a>`
+            }
+
+            return returnValue
+        },
+        "exporters": (value, row) => {
+            if (!value)
+                return '';
+
+            let exporters_formatted_url = exporters_url + value + `&ifid=${props.context.ifid}`;
+            return `<a href=${exporters_formatted_url}>${value}</a>`
+        },
+        "total_flows": (value, row) => {
+            if (!value)
+                return '';
+            return formatterUtils.getFormatter("number")(value);
+        },
+        "hosts": (value, row) => {
+            if (!value)
+                return '';
+            return formatterUtils.getFormatter("number")(value);
+        },
+        "throughput": (value, row) => {
+            return formatterUtils.getFormatter("bps")(value);
+        },
+        "traffic": (value, row) => {
+            return formatterUtils.getFormatter("bytes")(value);
+        }
+    };
+
+    columns.forEach((c) => {
+        c.render_func = map_columns[c.data_field];
+    });
+
+    return columns;
+};
+
+
+function columns_sorting(col, r0, r1) {
+    if (col != null) {
+        if (col.id == "observation_point") {
+            return sortingFunctions.sortByName(r0.observation_point, r1.observation_point, col.sort);
+        } else if (col.id == "exporters") {
+            return sortingFunctions.sortByNumber(r0.exporters, r1.exporters, col.sort);
+        } else if (col.id == "total_flows") {
+            return sortingFunctions.sortByNumber(r0.total_flows, r1.total_flows, col.sort);
+        } else if (col.id == "hosts") {
+            return sortingFunctions.sortByNumber(r0.hosts, r1.hosts, col.sort);
+        } else if (col.id == "throughput") {
+            return sortingFunctions.sortByNumber(r0.throughput, r1.throughput, col.sort);
+        } else if (col.id == "traffic") {
+            return sortingFunctions.sortByNumber(r0.traffic, r1.traffic, col.sort);
+        }
+    }
+}
+
+function create_config_url_link(row) {
+    return `${http_prefix}/lua/pro/db_search.lua?observation_point_id=${row.observation_point};eq`
+}
+
+function click_button_live_flows(event) {
+    const row = event.row;
+    window.open(create_config_url_link(row));
+}
+
+function on_table_custom_event(event) {
+    let events_managed = {
+        "click_button_live_flows": click_button_live_flows,
+    };
+    if (events_managed[event.event_id] == null) {
+        return;
+    }
+    events_managed[event.event_id](event);
+}
+
+</script>