diff --git a/http_src/constants/metrics-consts.js b/http_src/constants/metrics-consts.js index 877fc547334e..d08a24132234 100644 --- a/http_src/constants/metrics-consts.js +++ b/http_src/constants/metrics-consts.js @@ -12,57 +12,57 @@ const ui_types = { }; const sources_url_el_to_source = { - ifid: (s) => { - let label = s.ifname; - if (s.name != null) { - label = s.name; - } - return { - label, - value: s.ifid, - }; - }, - pool: (p) => { - let label = p.pool_id; - if (p.name != null) { label = p.name; } - return { - label, - value: p.pool_id, - }; - }, - am_host: (am) => { - let label = `${am.label} ${am.measurement}`; - let value = `${am.host},metric:${am.measurement_key}`; - return { - label, - value, - }; - }, - blacklist: (b) => { - let label = `${b.column_name}`; - let value = label; - return { - label, - value, - }; - }, - device: (device) => { - let label = `${device.name}`; - let value = `${device.ip}`; - return { - label, - value, - }; - }, - if_index: (index) => { - return ''; - /* let label = `${index.name}`; - let value = `${index.ip}`; + ifid: (s) => { + let label = s.ifname; + if (s.name != null) { + label = s.name; + } + return { + label, + value: s.ifid, + }; + }, + pool: (p) => { + let label = p.pool_id; + if (p.name != null) { label = p.name; } + return { + label, + value: p.pool_id, + }; + }, + am_host: (am) => { + let label = `${am.label} ${am.measurement}`; + let value = `${am.host},metric:${am.measurement_key}`; + return { + label, + value, + }; + }, + blacklist: (b) => { + let label = `${b.column_name}`; + let value = label; return { - label, - value, - };*/ - } + label, + value, + }; + }, + device: (device) => { + let label = `${device.name}`; + let value = `${device.ip}`; + return { + label, + value, + }; + }, + if_index: (index) => { + return ''; + /* let label = `${index.name}`; + let value = `${index.ip}`; + return { + label, + value, + };*/ + } }; const sources_types_tables = { @@ -75,53 +75,53 @@ const sources_types_tables = { const sources_types = [ { - id: "interface", //unique id - regex_page_url: "lua\/if_stats", // regex to match url page - label: i18n("page_stats.source_def.interface"), - query: "iface", - f_map_ts_options: null, // convert rest result - source_def_array: [{ - main_source_def: true, + id: "interface", //unique id + regex_page_url: "lua\/if_stats", // regex to match url page label: i18n("page_stats.source_def.interface"), - regex_type: null, - refresh_on_sources_change: false, // if true sources list are realoaded every time some selected sources changed - sources_url: "lua/rest/v2/get/ntopng/interfaces.lua", // url to get sources list - sources_function: null, // custom function that return sources_list, overwrite sources_url - value: "ifid", // used in tsQuery parameter, to get init and set value in url - value_url: null, // overwrite value to get and set value in url - value_map_sources_res: null, - disable_tskey: null, - f_get_value_url: null, // overwrite value and value_url to get start value from url - f_set_value_url: null, // overwrite value and value_url to set start value in url - ui_type: ui_types.select, - }], + query: "iface", + f_map_ts_options: null, // convert rest result + source_def_array: [{ + main_source_def: true, + label: i18n("page_stats.source_def.interface"), + regex_type: null, + refresh_on_sources_change: false, // if true sources list are realoaded every time some selected sources changed + sources_url: "lua/rest/v2/get/ntopng/interfaces.lua", // url to get sources list + sources_function: null, // custom function that return sources_list, overwrite sources_url + value: "ifid", // used in tsQuery parameter, to get init and set value in url + value_url: null, // overwrite value to get and set value in url + value_map_sources_res: null, + disable_tskey: null, + f_get_value_url: null, // overwrite value and value_url to get start value from url + f_set_value_url: null, // overwrite value and value_url to set start value in url + ui_type: ui_types.select, + }], }, { - id: "blacklist", //unique id - regex_page_url: "lua\/admin\/blacklists", // regex to match url page - label: i18n("page_stats.source_def.blacklist"), - query: "blacklist", - f_map_ts_options: (ts_options, ts_group) => { - if (ts_options.series == null) { - return ts_options; - } - ts_options.series.forEach((s) => { - if (ts_group.metric.query != null) { - s.name = ts_group.metric.label; - } else { - s.name = s.name.replaceAll("_", " "); - s.type = undefined; - } - }); - return ts_options; - }, - // display_full_name: true, - source_def_array: [{ - label: i18n("page_stats.source_def.interface"), - sources_function: () => { return [{ label: "System", value: -1 }] }, - value: "ifid", - ui_type: ui_types.hide, - },] + id: "blacklist", //unique id + regex_page_url: "lua\/admin\/blacklists", // regex to match url page + label: i18n("page_stats.source_def.blacklist"), + query: "blacklist", + f_map_ts_options: (ts_options, ts_group) => { + if (ts_options.series == null) { + return ts_options; + } + ts_options.series.forEach((s) => { + if (ts_group.metric.query != null) { + s.name = ts_group.metric.label; + } else { + s.name = s.name.replaceAll("_", " "); + s.type = undefined; + } + }); + return ts_options; + }, + // display_full_name: true, + source_def_array: [{ + label: i18n("page_stats.source_def.interface"), + sources_function: () => { return [{ label: "System", value: -1 }] }, + value: "ifid", + ui_type: ui_types.hide, + },] }, { id: "vulnerability_scan", //unique id @@ -134,7 +134,7 @@ const sources_types = [ value: "ifid", ui_type: ui_types.hide, }] - + }, { id: "host", @@ -357,43 +357,43 @@ const sources_types = [ }], }, { - id: "snmp_interface", - id_group: "snmp", - // disable_stats: true, - regex_page_url: "lua\/pro\/enterprise\/snmp_interface_details", - label: i18n("page_stats.source_def.snmp_interface"), - query: "snmp_interface", - f_map_ts_options: (ts_options, ts_group) => { - return ts_options; - }, - source_def_array: [{ - label: i18n("page_stats.source_def.interface"), - sources_function: () => { return [{ label: "", value: -1 }] }, - value: "ifid", - ui_type: ui_types.hide, - }, { - label: i18n("page_stats.source_def.device"), - regex_type: "ip", - sources_url: "lua/pro/rest/v2/get/snmp/device/list.lua", // url to get sources list - value: "device", - value_url: "host", - // refresh_i18n: 'modal_timeseries.snmp_confirm_device', - // ui_type: ui_types.input_confirm, - ui_type: ui_types.select, - }, { - main_source_def: true, + id: "snmp_interface", + id_group: "snmp", + // disable_stats: true, + regex_page_url: "lua\/pro\/enterprise\/snmp_interface_details", label: i18n("page_stats.source_def.snmp_interface"), - regex_type: "text", - refresh_on_sources_change: true, - sources_function: async (selected_source_value_array) => { - const device_host = selected_source_value_array[1]; - let snmp_interfaces = await proxySnmp.available_interfaces(device_host); - return snmp_interfaces.map((iface) => { return { label: iface.name, value: iface.id }; }); - }, - value: "if_index", - value_url: "snmp_port_idx", - ui_type: ui_types.select, - }], + query: "snmp_interface", + f_map_ts_options: (ts_options, ts_group) => { + return ts_options; + }, + source_def_array: [{ + label: i18n("page_stats.source_def.interface"), + sources_function: () => { return [{ label: "", value: -1 }] }, + value: "ifid", + ui_type: ui_types.hide, + }, { + label: i18n("page_stats.source_def.device"), + regex_type: "ip", + sources_url: "lua/pro/rest/v2/get/snmp/device/list.lua", // url to get sources list + value: "device", + value_url: "host", + // refresh_i18n: 'modal_timeseries.snmp_confirm_device', + // ui_type: ui_types.input_confirm, + ui_type: ui_types.select, + }, { + main_source_def: true, + label: i18n("page_stats.source_def.snmp_interface"), + regex_type: "text", + refresh_on_sources_change: true, + sources_function: async (selected_source_value_array) => { + const device_host = selected_source_value_array[1]; + let snmp_interfaces = await proxySnmp.available_interfaces(device_host); + return snmp_interfaces.map((iface) => { return { label: iface.name, value: iface.id }; }); + }, + value: "if_index", + value_url: "snmp_port_idx", + ui_type: ui_types.select, + }], }, { id: "snmp_device", @@ -417,6 +417,49 @@ const sources_types = [ ui_type: ui_types.input, }], }, + { + id: "snmp_qos", + id_group: "snmp", + regex_page_url: "", + label: i18n("page_stats.source_def.snmp_interface"), + query: "snmp_interface", + f_map_ts_options: (ts_options, ts_group) => { + return ts_options; + }, + source_def_array: [{ + label: i18n("page_stats.source_def.interface"), + sources_function: () => { return [{ label: "", value: -1 }] }, + value: "ifid", + ui_type: ui_types.hide, + }, { + label: i18n("page_stats.source_def.device"), + regex_type: "ip", + sources_url: "lua/pro/rest/v2/get/snmp/device/list.lua", // url to get sources list + value: "device", + value_url: "host", + ui_type: ui_types.select, + }, { + main_source_def: true, + label: i18n("page_stats.source_def.snmp_interface"), + regex_type: "text", + refresh_on_sources_change: true, + sources_function: async (selected_source_value_array) => { + const device_host = selected_source_value_array[1]; + let snmp_interfaces = await proxySnmp.available_interfaces(device_host); + return snmp_interfaces.map((iface) => { return { label: iface.name, value: iface.id }; }); + }, + value: "if_index", + value_url: "snmp_port_idx", + ui_type: ui_types.select, + }, { + label: i18n("snmp.qos"), + regex_type: "text", + sources_url: "", + value: "qos_class_id", + value_url: "qos_class_id", + ui_type: ui_types.hide, + }], + }, { id: "flow_device", regex_page_url: "lua\/pro\/enterprise\/flowdevices_stats", diff --git a/http_src/vue/page-snmp-qos.vue b/http_src/vue/page-snmp-qos.vue index 390e871e839d..22b82fd3e1bd 100644 --- a/http_src/vue/page-snmp-qos.vue +++ b/http_src/vue/page-snmp-qos.vue @@ -7,14 +7,14 @@
- {{ item["basic_label"] + {{ item["basic_label"] }} - +
-
+
{{ _i18n('search') }}
@@ -23,17 +23,27 @@
+ -
+
+ +
+
+ + +
+
@@ -50,7 +60,10 @@ import { default as TimeseriesChart } from "./timeseries-chart.vue"; import { default as SelectSearch } from "./select-search.vue"; import { default as DateTimeRangePicker } from "./date-time-range-picker.vue"; import { ntopng_url_manager } from "../services/context/ntopng_globals_services.js"; +import { default as Loading } from "./loading.vue"; import { default as Spinner } from "./spinner.vue"; +import { default as BootstrapTable } from "./bootstrap-table.vue"; +import formatterUtils from "../utilities/formatter-utils"; import metricsManager from "../utilities/metrics-manager.js"; import timeseriesUtils from "../utilities/timeseries-utils.js"; @@ -66,10 +79,11 @@ const id_date_time_picker = "date_time_picker"; const chart_type = ntopChartApex.typeChart.TS_LINE; const min_time_interval_id = "10_min"; const all_qos_id = "chart_qos_all"; -const basic_source_type = "snmp_interface"; -const group_option_mode = timeseriesUtils.getGroupOptionMode('1_chart_x_yaxis'); +const basic_source_type = "snmp_qos"; +const group_option_mode = timeseriesUtils.getGroupOptionMode('1_chart_x_metric'); const filter_table_array = ref([]); const loading = ref(false); +const loading_chart = ref(false); const filters = ref([]); const note_list = [ _i18n("snmp.snmp_note_periodic_interfaces_polling"), @@ -89,6 +103,13 @@ const time_preset_list = [ { value: "year", label: i18n('show_alerts.presets.year'), currently_active: false }, { value: "custom", label: i18n('show_alerts.presets.custom'), currently_active: false, disabled: true, }, ]; +const stats_columns = [ + { id: "metric", label: i18n("page_stats.metric") }, + { id: "avg", label: i18n("page_stats.average"), class: "text-end" }, + { id: "perc_95", label: i18n("page_stats.95_perc"), class: "text-end" }, + { id: "max", label: i18n("page_stats.max"), class: "text-end" }, + { id: "min", label: i18n("page_stats.min"), class: "text-end" }, +]; /* Height and width of the charts */ const height_per_row = 62.5 @@ -107,26 +128,75 @@ const base_url = computed(() => { const all_qos_chart = ref(null); const timeseries_groups = ref([]); const ts_request = ref([{ - ts_query: "ifid:-1,device:%host,if_index:%interface_id", - ts_schema: "snmp_if:traffic", + ts_query: "ifid:-1,device:%host,if_index:%interface_id,qos_class_id:%qos_class", + ts_schema: "snmp_if:qos", tskey: "%interface_id", source_def: [ "-1", /* System Interface */ "%host", - "%interface_id" + "%interface_id", + "%qos_class" ] -}]); +}]);; + +const stats_rows = ref([]); + +function set_stats_rows(result) { + const f_get_total_formatter_type = (type) => { + let map_type = { + "bps": "bytes", + "fps": "flows", + "alertps": "alerts", + "hitss": "hits", + "pps": "packets", + }; + if (map_type[type] != null) { + return map_type[type]; + } + return type; + }; + stats_rows.value = []; + result.forEach((options, i) => { + options.series?.forEach((s, j) => { + const ts_stats = s.statistics; + const name = timeseries_groups.value[0].metric.timeseries[s.id].label; + const formatter = formatterUtils.getFormatter(timeseries_groups.value[0].metric.measure_unit); + const row = { + metric: name, + perc_95: formatter(ts_stats["95th_percentile"]), + avg: formatter(ts_stats.average), + max: formatter(ts_stats.max_val), + min: formatter(ts_stats.min_val), + }; + stats_rows.value.push(row); + }); + }); +} /* *************************************************** */ -function search_timeseries() { +function print_stats_column(col) { + return col.label; +} + +/* *************************************************** */ +function print_stats_row(col, row) { + let label = row[col.id]; + return label; } /* *************************************************** */ -function check_filter_validation() { +function search_timeseries() { + refresh_chart(); +} + +/* *************************************************** */ +async function add_filter(opt) { + ntopng_url_manager.set_key_to_url(opt.key, `${opt.value}`); + await load_table_filters_array(); } /* ************************************** */ @@ -195,14 +265,20 @@ function substitute_params(params) { let res = {} const host = ntopng_url_manager.get_url_entry("host"); const interface_id = ntopng_url_manager.get_url_entry("snmp_port_idx"); + const qos_class = ntopng_url_manager.get_url_entry("qos_class_id"); + if (!(host && interface_id)) { + /* Safe check */ + return params + } for (const value of params) { - res.ts_query = value.ts_query.replace('%host', host).replace('%interface_id', interface_id); + res.ts_query = value.ts_query.replace('%host', host).replace('%interface_id', interface_id).replace('%qos_class', qos_class); res.tskey = value.tskey.replace('%interface_id', interface_id); res.ts_schema = value.ts_schema res.source_def = []; value.source_def.forEach((source, index) => { let tmp = source.replace('%host', host); tmp = tmp.replace('%interface_id', interface_id); + tmp = tmp.replace('%qos_class', qos_class); res.source_def[index] = tmp; }); } @@ -241,24 +317,26 @@ async function get_timeseries_groups_from_metric(metric_schema, source_def) { /* *************************************************** */ async function retrieve_basic_info() { - /* Return the timeseries group, info found in the json */ - if (timeseries_groups.value.length == 0) { - ts_request.value[0] = substitute_params(ts_request.value); - for (const value of ts_request.value) { - const metric_schema = value?.ts_schema; - const source_def = value.source_def; - delete value.source_def /* Remove the property otherwise it's going to be added to the REST */ + const tmp = substitute_params(ts_request.value); + const metric_schema = tmp?.ts_schema; + const source_def = tmp.source_def; + if (source_def && metric_schema) { + delete tmp.source_def /* Remove the property otherwise it's going to be added to the REST */ + /* Return the timeseries group, info found in the json */ + if (timeseries_groups.value.length == 0) { const group = await get_timeseries_groups_from_metric(metric_schema, source_def); timeseries_groups.value.push(group); } + return [tmp]; } + return null; } /* *************************************************** */ /* Remove the property otherwise it's going to be added to the REST */ -function remove_extra_params() { - for (const value of ts_request.value) { +function remove_extra_params(tmp) { + for (const value of tmp) { if (value.source_def) { delete value.source_def } @@ -277,34 +355,47 @@ async function get_component_data(url, url_params, post_params) { /* *************************************************** */ +async function check_params() { + const qos_class = ntopng_url_manager.get_url_entry("qos_class_id"); + if (!qos_class) { + await load_table_filters_array(); + } +} + +/* *************************************************** */ + /* This function run the REST API with the data */ async function get_chart_options() { - await retrieve_basic_info(); - remove_extra_params(); + loading_chart.value = true; + await check_params(); + const tmp = await retrieve_basic_info(); + remove_extra_params(tmp); const url = base_url.value; const post_params = { csrf: props.context.csrf, ifid: props.context.ifid, epoch_begin: ntopng_url_manager.get_url_entry("epoch_begin"), epoch_end: ntopng_url_manager.get_url_entry("epoch_end"), - ts_requests: ts_request.value + ts_requests: tmp } /* Have to be used this get_component_data, in order to create report too */ let result = await get_component_data(url, '', post_params); + set_stats_rows(result) /* Format the result in the format needed by Dygraph */ result = timeseriesUtils.tsArrayToOptionsArray(result, timeseries_groups.value, group_option_mode, ''); if (result[0]) { result[0].height = height.value; } + loading_chart.value = false; return result?.[0]; } /* *************************************************** */ /* Run the init here */ -onBeforeMount(async() => { - await load_table_filters_array(); - init(); +onBeforeMount(async () => { + load_table_filters_array(); + height.value = 4 * height_per_row; }); /* *************************************************** */ @@ -313,13 +404,6 @@ onMounted(async () => { }); /* *************************************************** */ -/* Defining the needed info by the get_chart_options function */ -async function init() { - height.value = 4 * height_per_row; -} - -/* *************************************************** */ - function epoch_change() { refresh_chart(); } diff --git a/http_src/vue/page-stats.vue b/http_src/vue/page-stats.vue index 866054a7a55a..b3018ed8beeb 100644 --- a/http_src/vue/page-stats.vue +++ b/http_src/vue/page-stats.vue @@ -692,7 +692,6 @@ function set_stats_rows(ts_charts_options, timeseries_groups, status) { let total_formatter = formatterUtils.getFormatter(total_formatter_type); let row = { metric: name, - // total: total_formatter(total), total: total_formatter(ts_stats.total), perc_95: formatter(ts_stats["95th_percentile"]), avg: formatter(ts_stats.average), diff --git a/httpdocs/dist b/httpdocs/dist index bf1d1199d690..3afb93473630 160000 --- a/httpdocs/dist +++ b/httpdocs/dist @@ -1 +1 @@ -Subproject commit bf1d1199d6905e2e8d0e47626660650ba60f7e68 +Subproject commit 3afb934736300e4f0e5970fa80b63598e6ddf21c diff --git a/scripts/locales/en.lua b/scripts/locales/en.lua index a6afa98358b0..5a5f3c89fe07 100644 --- a/scripts/locales/en.lua +++ b/scripts/locales/en.lua @@ -528,6 +528,7 @@ local lang = { ["protocols"] = "Protocols", ["purged_error_message"] = "Very likely it is expired and %{product} has purged it from memory. You can set purge idle timeout settings from the Preferences.", ["push_notification"] = "Push Notification", + ["qos_class"] = "QoS Class", ["quotas"] = "Quotas", ["ram_available"] = "Available", ["ram_total"] = "Total", @@ -4053,6 +4054,11 @@ local lang = { ["score_behavior"] = "Behaviour: Score", ["score_vs_hosts_flows"] = "Score vs Hosts/Flows", ["service_map_entries"] = "Service Map Entries", + ["snmp"] = { + ["pre"] = "Pre", + ["drop"] = "Drop", + ["post"] = "Post", + }, ["srv_active_flows_anomalies"] = "Anomalies: Server Live Flows", ["srv_active_flows_behaviour"] = "Behaviour: Server Live Flows", ["srv_ports"] = "Server Ports", diff --git a/scripts/lua/modules/http_lint.lua b/scripts/lua/modules/http_lint.lua index 65090ff4e937..de3eca1611cc 100644 --- a/scripts/lua/modules/http_lint.lua +++ b/scripts/lua/modules/http_lint.lua @@ -2507,6 +2507,7 @@ local known_parameters = { ["allowed_interface"] = validateEmptyOr(validateInterface), -- the interface an user is allowed to configure ["allowed_networks"] = validateNetworksList, -- a list of networks the user is allowed to monitor ["switch_interface"] = validateInterface, -- a new active ntopng interface + ["qos_class_id"] = validateNumber, ["edit_members"] = validateEmpty, -- set if we are editing pool members ["trigger_alerts"] = validateBool, -- true if alerts should be active for this entity ["show_advanced_prefs"] = validateBool, -- true if advanced preferences should be shown diff --git a/scripts/lua/modules/timeseries/drivers/rrd.lua b/scripts/lua/modules/timeseries/drivers/rrd.lua index c4b4a7e59439..87ca12f45ee9 100644 --- a/scripts/lua/modules/timeseries/drivers/rrd.lua +++ b/scripts/lua/modules/timeseries/drivers/rrd.lua @@ -123,7 +123,11 @@ local function schema_get_path(schema, tags) -- Some exceptions to avoid conflicts / keep compatibility if parts[1] == "snmp_if" then - suffix = tags.if_index .. "/" + if tags.qos_class_id then + suffix = tags.if_index .. "/" .. tags.qos_class_id .. "/" + else + suffix = tags.if_index .. "/" + end elseif (parts[1] == "flowdev_port") or (parts[1] == "sflowdev_port") then if (tags.port) then if (type(tags.port) == "table") then diff --git a/scripts/lua/modules/timeseries/schemas/ts_5min.lua b/scripts/lua/modules/timeseries/schemas/ts_5min.lua index 37898b304fb5..b62bfc2c40b4 100644 --- a/scripts/lua/modules/timeseries/schemas/ts_5min.lua +++ b/scripts/lua/modules/timeseries/schemas/ts_5min.lua @@ -475,6 +475,21 @@ schema:addTag("if_index") schema:addMetric("uplink") schema:addMetric("downlink") +schema = ts_utils.newSchema("snmp_if:qos", { + step = 300, + rrd_heartbeat = 3000, + rrd_fname = "qos", + is_system_schema = true, + metrics_type = ts_utils.metrics.gauge, +}) +schema:addTag("ifid") +schema:addTag("device") +schema:addTag("if_index") +schema:addTag("qos_class_id") +schema:addMetric("pre") +schema:addMetric("drop") +schema:addMetric("post") + schema = ts_utils.newSchema("snmp_if:errors", { step = 300, rrd_heartbeat = 3000,