From eedba946135c69482d8a01fde41c9ee09ca9cf37 Mon Sep 17 00:00:00 2001 From: Matteo Biscosi Date: Mon, 24 Jan 2022 16:46:10 +0100 Subject: [PATCH] Fixes Host map not correctly working --- httpdocs/js/widgets/widgets.js | 69 ++++++++------------ scripts/lua/rest/v2/charts/host/map.lua | 85 +++++++++++++------------ 2 files changed, 69 insertions(+), 85 deletions(-) diff --git a/httpdocs/js/widgets/widgets.js b/httpdocs/js/widgets/widgets.js index 3278d231ff..ec0a7e90a0 100644 --- a/httpdocs/js/widgets/widgets.js +++ b/httpdocs/js/widgets/widgets.js @@ -56,8 +56,7 @@ const DEFINED_EVENTS = { /* Standard on click event, redirect to the url */ "standard" : function (event, chartContext, config) { const { seriesIndex, dataPointIndex } = config; - const { series } = config.config; - + const { series } = config.w.config; if (seriesIndex === -1) return; if (series === undefined) return; @@ -70,19 +69,6 @@ const DEFINED_EVENTS = { } const DEFINED_TOOLTIP = { - /* Standard on click event, redirect to the url */ - "standard" : function (_, opt) { - const config = opt.w.config; - const { series } = config; - const { dataPointIndex, seriesIndex } = opt; - const data = series[seriesIndex].data[dataPointIndex]; - - if (data.meta !== undefined) - return data.meta.label || data.x; - - return data; - }, - /* On click event used by the flow analyze section, redirect to the current url + a single filter */ "format_bytes" : function(value, { config, seriesIndex, dataPointIndex }) { return NtopUtils.bytesToSize(value); @@ -100,50 +86,41 @@ const DEFINED_TOOLTIP = { "format_multiple_date" : function(value, { config, seriesIndex, dataPointIndex }) { return new Date(value[0]) + " - " + new Date(value[1]) }, -} -const DEFAULT_FORMATTER = DEFINED_TOOLTIP["format_value"]; -class WidgetTooltips { - static showXY({ seriesIndex, dataPointIndex, w }) { + /* + * This formatter is used by the bubble host map, from the y axis, + * used to show the Hosts, with their respective values + */ + "format_label_from_xy" : function({series, seriesIndex, dataPointIndex, w}) { + const serie = w.config.series[seriesIndex]["data"][dataPointIndex]; + + const x_value = serie["x"]; + const y_value = serie["y"]; + const host_name = serie["meta"]["label"]; - const defaultFormatter = (x) => x; - - const config = w.config; - const xLabel = config.xaxis.title.text || "x"; - const yLabel = config.yaxis[0].title.text || "y"; - const serie = config.series[seriesIndex].data[dataPointIndex]; - const { x, y } = serie; - const title = serie.meta.label || serie.x; - - let xFormatter = defaultFormatter, yFormatter = defaultFormatter; - if (config.xaxis.labels && config.xaxis.labels.ntop_utils_formatter) { - xFormatter = NtopUtils[config.xaxis.labels.ntop_utils_formatter]; - } - if (config.yaxis[0].labels && config.yaxis[0].labels.ntop_utils_formatter) { - yFormatter = NtopUtils[config.yaxis[0].labels.ntop_utils_formatter]; - } + const x_axis_title = w.config.xaxis.title.text; + const y_axis_title = w.config.yaxis[0].title.text; return (`
- ${title} + ${host_name}
- ${xLabel}: ${xFormatter(x)} + ${x_axis_title}: ${x_value}
- ${yLabel}: ${yFormatter(y)} + ${y_axis_title}: ${y_value}
-
- `) - } - static unknown() { - return `
Unknown
`; - } + `) + }, } +/* Standard Formatter */ +const DEFAULT_FORMATTER = DEFINED_TOOLTIP["format_value"]; + class WidgetUtils { static registerWidget(widget) { @@ -381,6 +358,10 @@ class ChartWidget extends Widget { config['tooltip'][axis]['formatter'] = DEFINED_TOOLTIP[formatter] || NtopUtils[formatter] } } + + /* Customizable tooltip requested */ + if(rsp['tooltip']['custom']) + config['tooltip']['custom'] = DEFINED_TOOLTIP[rsp['tooltip']['custom']] || NtopUtils[rsp['tooltip']['custom']] } } diff --git a/scripts/lua/rest/v2/charts/host/map.lua b/scripts/lua/rest/v2/charts/host/map.lua index f477b78b67..0cd3a1ffd9 100644 --- a/scripts/lua/rest/v2/charts/host/map.lua +++ b/scripts/lua/rest/v2/charts/host/map.lua @@ -401,45 +401,48 @@ local base_url = ntop.getHttpPrefix() .. "/lua/host_details.lua" -- Formatting Answer rest_utils.answer(rc, { - series = { - {data = first_host_table, name = first_table_name, base_url = base_url}, - {data = second_host_table, name = second_table_name, base_url = base_url}, - }, - chart = { - zoom = { - autoScaleYaxis = true - } - }, - grid = { - padding = { - left = 6 - }, - }, - colors = {"rgba(153, 102, 255, 0.45)", "rgba(255, 159, 64, 0.45)"}, - xaxis = { - type = 'numeric', - title = { - text = MODES[bubble_mode + 1].x_label, - }, - labels = { - ntop_utils_formatter = MODES[bubble_mode + 1].x_formatter or 'fnone', - } - }, - yaxis = { - type = 'numeric', - forceNiceScale = true, - title = { - text = MODES[bubble_mode + 1].y_label, - offsetX = 6 - }, - labels = { - ntop_utils_formatter = MODES[bubble_mode + 1].y_formatter or 'fnone', - } - }, - dataLabels = { - enabled = false - }, - tooltip = { - widget_tooltips_formatter = "showXY" - } + series = { + {data = first_host_table, name = first_table_name, base_url = base_url}, + {data = second_host_table, name = second_table_name, base_url = base_url}, + }, + chart = { + zoom = { + autoScaleYaxis = true + }, + }, + events = { + dataPointSelection = "standard", + }, + grid = { + padding = { + left = 6 + }, + }, + colors = {"rgba(153, 102, 255, 0.45)", "rgba(255, 159, 64, 0.45)"}, + xaxis = { + type = 'numeric', + title = { + text = MODES[bubble_mode + 1].x_label, + }, + labels = { + ntop_utils_formatter = MODES[bubble_mode + 1].x_formatter or 'fnone', + } + }, + yaxis = { + type = 'numeric', + forceNiceScale = true, + title = { + text = MODES[bubble_mode + 1].y_label, + offsetX = 6 + }, + labels = { + ntop_utils_formatter = MODES[bubble_mode + 1].y_formatter or 'fnone', + } + }, + dataLabels = { + enabled = false + }, + tooltip = { + custom = "format_label_from_xy", + } })