mirror of
https://github.com/ntop/ntopng.git
synced 2026-04-30 07:59:35 +00:00
Added Vite to frontend builds
This commit is contained in:
Matteo Biscosi
parent
daf007c161
commit
2b5d2d7949
118 changed files with 10172 additions and 34001 deletions
|
|
@ -2,34 +2,34 @@
|
|||
(C) 2023 - ntop.org
|
||||
*/
|
||||
|
||||
import dygraphPlotters from "./dygraph-plotters.js";
|
||||
import dygraphConfig from "./dygraph-config.js";
|
||||
import dygraphPlotters from './dygraph-plotters.js';
|
||||
import dygraphConfig from './dygraph-config.js';
|
||||
|
||||
|
||||
/* ***************************************** */
|
||||
|
||||
const defaultColors = [
|
||||
"#C6D9FD",
|
||||
"#90EE90",
|
||||
"#EE8434",
|
||||
"#C95D63",
|
||||
"#AE8799",
|
||||
"#717EC3",
|
||||
"#496DDB",
|
||||
"#5A7ADE",
|
||||
"#6986E1",
|
||||
"#7791E4",
|
||||
"#839BE6",
|
||||
"#8EA4E8",
|
||||
'#C6D9FD',
|
||||
'#90EE90',
|
||||
'#EE8434',
|
||||
'#C95D63',
|
||||
'#AE8799',
|
||||
'#717EC3',
|
||||
'#496DDB',
|
||||
'#5A7ADE',
|
||||
'#6986E1',
|
||||
'#7791E4',
|
||||
'#839BE6',
|
||||
'#8EA4E8',
|
||||
];
|
||||
|
||||
/* ***************************************** */
|
||||
|
||||
const constant_serie_colors = {
|
||||
"default_color": "#C6D9FD",
|
||||
"95_perc": "#8EA4E8",
|
||||
"avg": "#839BE6",
|
||||
}
|
||||
'default_color': '#C6D9FD',
|
||||
'95_perc': '#8EA4E8',
|
||||
'avg': '#839BE6',
|
||||
};
|
||||
|
||||
/* ***************************************** */
|
||||
|
||||
|
|
@ -40,10 +40,10 @@ function getSerieId(serie) {
|
|||
/* ***************************************** */
|
||||
|
||||
function formatSerieColors(palette_list) {
|
||||
let colors_list = palette_list;
|
||||
let count0 = 0, count1 = 0;
|
||||
let colors0 = defaultColors;
|
||||
let colors1 = d3v7.schemeCategory10;
|
||||
const colors_list = palette_list;
|
||||
let count0 = 0; let count1 = 0;
|
||||
const colors0 = defaultColors;
|
||||
const colors1 = d3v7.schemeCategory10;
|
||||
colors_list.forEach((s, index) => {
|
||||
if (s.palette == 0) {
|
||||
if (palette_list.find((element, j) => (element.color === s.color && j !== index))) {
|
||||
|
|
@ -66,7 +66,7 @@ function getSerieName(name, id, tsGroup, useFullName) {
|
|||
if (name == null) {
|
||||
name = id;
|
||||
}
|
||||
let name_more_space = "";
|
||||
let name_more_space = '';
|
||||
if (name != null) {
|
||||
name_more_space = `${name}`;
|
||||
}
|
||||
|
|
@ -74,17 +74,17 @@ function getSerieName(name, id, tsGroup, useFullName) {
|
|||
return name;
|
||||
}
|
||||
let source_index = 0;
|
||||
let source_def_array = tsGroup.source_type.source_def_array;
|
||||
const source_def_array = tsGroup.source_type.source_def_array;
|
||||
for (let i = 0; i < source_def_array.length; i += 1) {
|
||||
let source_def = source_def_array[i];
|
||||
const source_def = source_def_array[i];
|
||||
if (source_def.main_source_def == true) {
|
||||
source_index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
let source = tsGroup.source_array[source_index];
|
||||
let prefix = `${source.label}`;
|
||||
const source = tsGroup.source_array[source_index];
|
||||
const prefix = `${source.label}`;
|
||||
return `${prefix} - ${name_more_space}`;
|
||||
}
|
||||
|
||||
|
|
@ -95,12 +95,12 @@ function getName(ts_info, metadata) {
|
|||
let name = (metadata.use_serie_name == true) ? ts_info.name : metadata.label;
|
||||
|
||||
if (ts_info.ext_label) {
|
||||
name = ts_info.ext_label
|
||||
name = ts_info.ext_label;
|
||||
}
|
||||
if (ts_info.label) {
|
||||
name = ts_info.label
|
||||
name = ts_info.label;
|
||||
}
|
||||
return { timeserie_name: name, show_full_name: (ts_info.label == null) }
|
||||
return {timeserie_name: name, show_full_name: (ts_info.label == null)};
|
||||
}
|
||||
|
||||
/* *********************************************** */
|
||||
|
|
@ -117,9 +117,10 @@ function getPlotter(chart_type) {
|
|||
|
||||
function addNewSerie(serie_name, chart_type, color, config) {
|
||||
config.labels.push(serie_name);
|
||||
if (config.properties == null)
|
||||
config.properties = {}
|
||||
config.properties[serie_name] = {}
|
||||
if (config.properties == null) {
|
||||
config.properties = {};
|
||||
}
|
||||
config.properties[serie_name] = {};
|
||||
config.properties[serie_name] = dygraphConfig.formatSerieProperties(chart_type);
|
||||
config.colors.push(color);
|
||||
}
|
||||
|
|
@ -128,8 +129,8 @@ function addNewSerie(serie_name, chart_type, color, config) {
|
|||
|
||||
/* This function given a serie, format the array needed */
|
||||
function compactSerie(config, ts_info, extra_timeseries, serie, past_serie, scalar, step, epoch_begin, names) {
|
||||
const avg_value = ts_info.statistics["average"];
|
||||
const perc_value = ts_info.statistics["95th_percentile"];
|
||||
const avg_value = ts_info.statistics['average'];
|
||||
const perc_value = ts_info.statistics['95th_percentile'];
|
||||
let time = epoch_begin;
|
||||
|
||||
/* Now format the timeserie */
|
||||
|
|
@ -137,25 +138,25 @@ function compactSerie(config, ts_info, extra_timeseries, serie, past_serie, scal
|
|||
const serie_point = serie[point];
|
||||
/* If the point is inserted for the first time, add the time before everything else */
|
||||
if (!config.serie[time]) {
|
||||
config.serie[time] = [{ value: new Date(time * 1000), name: "Time" }];
|
||||
config.serie[time] = [{value: new Date(time * 1000), name: 'Time'}];
|
||||
}
|
||||
/* Add the point to the array or NaN if it's null */
|
||||
(serie_point !== null) ?
|
||||
config.serie[time].push({ value: serie_point * scalar, name: names.serie_name }) :
|
||||
config.serie[time].push({ value: NaN, name: names.serie_name });
|
||||
config.serie[time].push({value: serie_point * scalar, name: names.serie_name}) :
|
||||
config.serie[time].push({value: NaN, name: names.serie_name});
|
||||
|
||||
/* Add extra series, avg, 95th and past timeseries */
|
||||
if (extra_timeseries?.avg == true) {
|
||||
config.serie[time].push({ value: avg_value * scalar, name: names.avg_name });
|
||||
config.serie[time].push({value: avg_value * scalar, name: names.avg_name});
|
||||
}
|
||||
if (extra_timeseries?.perc_95 == true) {
|
||||
config.serie[time].push({ value: perc_value * scalar, name: names.perc_name });
|
||||
config.serie[time].push({value: perc_value * scalar, name: names.perc_name});
|
||||
}
|
||||
if (extra_timeseries?.past == true) {
|
||||
const past_value = (past_serie) ? past_serie[point] : null;
|
||||
(past_value) ?
|
||||
config.serie[time].push({ value: past_value * scalar, name: names.past_name }) :
|
||||
config.serie[time].push({ value: NaN, name: names.past_label });
|
||||
config.serie[time].push({value: past_value * scalar, name: names.past_name}) :
|
||||
config.serie[time].push({value: NaN, name: names.past_label});
|
||||
}
|
||||
|
||||
/* Increase the time using the step */
|
||||
|
|
@ -167,12 +168,12 @@ function compactSerie(config, ts_info, extra_timeseries, serie, past_serie, scal
|
|||
|
||||
/* This function format the Bound type serie in the correct format */
|
||||
function splitBoundSerie(series, timeserie_info) {
|
||||
let serie = [];
|
||||
const serie = [];
|
||||
let color = {};
|
||||
let formatter = null;
|
||||
let serie_name = null;
|
||||
let properties = {};
|
||||
let full_serie = [];
|
||||
const full_serie = [];
|
||||
|
||||
/* A bound timeserie should be composed by 3 timeseries:
|
||||
* - metric (main)
|
||||
|
|
@ -185,32 +186,32 @@ function splitBoundSerie(series, timeserie_info) {
|
|||
const metadata = timeserie_info.metric.timeseries[ts_id];
|
||||
const scalar = (metadata?.invert_direction === true) ? -1 : 1;
|
||||
|
||||
/* Just add the name, properties, colors, ecc, for the
|
||||
* "main" timeserie and not for the bounds ones
|
||||
/* Just add the name, properties, colors, ecc, for the
|
||||
* "main" timeserie and not for the bounds ones
|
||||
*/
|
||||
if (metadata.type == "metric") {
|
||||
if (metadata.type == 'metric') {
|
||||
serie_name = getSerieName(metadata.label, ts_id, timeserie_info, true);
|
||||
properties = dygraphConfig.formatSerieProperties('bounds');
|
||||
color = { color: metadata.color, palette: 0 };
|
||||
color = {color: metadata.color, palette: 0};
|
||||
formatter = timeserie_info.metric.measure_unit;
|
||||
}
|
||||
for (let point = 0; point < serie.length; point++) {
|
||||
let serie_point = (serie[point] === null) ? NaN : serie[point];
|
||||
const serie_point = (serie[point] === null) ? NaN : serie[point];
|
||||
if (full_serie[point] == null) {
|
||||
full_serie[point] = [0, NaN, 0];
|
||||
}
|
||||
|
||||
if (metadata.type == "lower_bound") {
|
||||
if (metadata.type == 'lower_bound') {
|
||||
full_serie[point][0] = serie_point * scalar;
|
||||
} else if (metadata.type == "metric") {
|
||||
} else if (metadata.type == 'metric') {
|
||||
full_serie[point][1] = serie_point * scalar;
|
||||
} else if (metadata.type == "upper_bound") {
|
||||
} else if (metadata.type == 'upper_bound') {
|
||||
full_serie[point][2] = serie_point * scalar;
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
return { serie: full_serie, color: color, formatter: formatter, serie_name: serie_name, properties: properties };
|
||||
return {serie: full_serie, color: color, formatter: formatter, serie_name: serie_name, properties: properties};
|
||||
}
|
||||
|
||||
/* *********************************************** */
|
||||
|
|
@ -218,19 +219,20 @@ function splitBoundSerie(series, timeserie_info) {
|
|||
/* This function, given a serie format the bounds serie */
|
||||
function formatBoundsSerie(timeserie_info, timeserie_options, config) {
|
||||
/* By default the chart type is line */
|
||||
const chart_type = timeserie_info.metric.chart_type || "filled";
|
||||
const chart_type = timeserie_info.metric.chart_type || 'filled';
|
||||
const series = timeserie_options.series || [];
|
||||
const epoch_begin = timeserie_options.metadata.epoch_begin;
|
||||
const step = timeserie_options.metadata.epoch_step;
|
||||
const { serie, color, formatter, serie_name, properties } = splitBoundSerie(series, timeserie_info);
|
||||
const {serie, color, formatter, serie_name, properties} = splitBoundSerie(series, timeserie_info);
|
||||
let time = epoch_begin;
|
||||
/* TODO: add avg, past, ecc. timeseries to the bounds one */
|
||||
|
||||
/* Update the config */
|
||||
const formatted_name = `${serie_name} ${i18n('lower_value_upper')}`
|
||||
const formatter_found = config.formatters.find(el => el == formatter);
|
||||
if (!formatter_found)
|
||||
const formatted_name = `${serie_name} ${i18n('lower_value_upper')}`;
|
||||
const formatter_found = config.formatters.find((el) => el == formatter);
|
||||
if (!formatter_found) {
|
||||
config.formatters.push(formatter);
|
||||
}
|
||||
config.plotter = getPlotter(chart_type);
|
||||
config.customBars = true;
|
||||
config.colors.push(color);
|
||||
|
|
@ -241,8 +243,8 @@ function formatBoundsSerie(timeserie_info, timeserie_options, config) {
|
|||
Object.keys(serie).forEach((key) => {
|
||||
if (!config.serie[time]) {
|
||||
config.serie[time] = [
|
||||
{ value: new Date(time * 1000), name: "Time" },
|
||||
{ value: serie[key], name: formatted_name }
|
||||
{value: new Date(time * 1000), name: 'Time'},
|
||||
{value: serie[key], name: formatted_name},
|
||||
];
|
||||
}
|
||||
|
||||
|
|
@ -257,7 +259,7 @@ function formatStandardSerie(timeserie_info, timeserie_options, config, tsCompar
|
|||
* e.g. in the Traffic timeseries we have the Bytes sent and Bytes rcvd
|
||||
*/
|
||||
const series = timeserie_options.series || [];
|
||||
const chart_type = timeserie_info.metric.chart_type || "filled";
|
||||
const chart_type = timeserie_info.metric.chart_type || 'filled';
|
||||
const epoch_begin = timeserie_options.metadata.epoch_begin;
|
||||
const step = timeserie_options.metadata.epoch_step;
|
||||
const formatter = timeserie_info.metric.measure_unit;
|
||||
|
|
@ -272,7 +274,7 @@ function formatStandardSerie(timeserie_info, timeserie_options, config, tsCompar
|
|||
config.stacked = timeserie_info.metric.draw_stacked || false;
|
||||
}
|
||||
if (timeserie_info.metric.disable_default_ago_ts) {
|
||||
disable_past_ts = timeserie_info.metric.disable_default_ago_ts || true
|
||||
disable_past_ts = timeserie_info.metric.disable_default_ago_ts || true;
|
||||
}
|
||||
|
||||
series.forEach((ts_info, j) => {
|
||||
|
|
@ -281,12 +283,12 @@ function formatStandardSerie(timeserie_info, timeserie_options, config, tsCompar
|
|||
const ts_id = getSerieId(ts_info);
|
||||
const metadata = timeserie_info.metric.timeseries[ts_id];
|
||||
const scalar = (metadata.invert_direction === true) ? -1 : 1;
|
||||
const { timeserie_name, show_full_name } = getName(ts_info, metadata)
|
||||
const {timeserie_name, show_full_name} = getName(ts_info, metadata);
|
||||
/* Check if show_full_name is null or undefined */
|
||||
const serie_name = getSerieName(timeserie_name, ts_id, timeserie_info, (show_full_name !== null || show_full_name !== undefined) ? (config.use_full_name && show_full_name) : config.use_full_name)
|
||||
const avg_name = getSerieName(timeserie_name + " Avg", ts_id, timeserie_info, config.use_full_name)
|
||||
const perc_name = getSerieName(timeserie_name + " 95th Perc", ts_id, timeserie_info, config.use_full_name);
|
||||
const past_name = getSerieName(timeserie_name + " " + tsCompare + " Ago", ts_id, timeserie_info, config.use_full_name);
|
||||
const serie_name = getSerieName(timeserie_name, ts_id, timeserie_info, (show_full_name !== null || show_full_name !== undefined) ? (config.use_full_name && show_full_name) : config.use_full_name);
|
||||
const avg_name = getSerieName(timeserie_name + ' Avg', ts_id, timeserie_info, config.use_full_name);
|
||||
const perc_name = getSerieName(timeserie_name + ' 95th Perc', ts_id, timeserie_info, config.use_full_name);
|
||||
const past_name = getSerieName(timeserie_name + ' ' + tsCompare + ' Ago', ts_id, timeserie_info, config.use_full_name);
|
||||
const past_value = (past_serie) ? past_serie[`${tsCompare}_ago`]?.series[j]?.data : null;
|
||||
/* An option used to not display a timeserie */
|
||||
if (metadata.hidden) {
|
||||
|
|
@ -294,22 +296,23 @@ function formatStandardSerie(timeserie_info, timeserie_options, config, tsCompar
|
|||
}
|
||||
|
||||
/* Search for the formatter in the array, if not found, add it. */
|
||||
const formatter_found = config.formatters.find(el => el == formatter);
|
||||
if (!formatter_found)
|
||||
const formatter_found = config.formatters.find((el) => el == formatter);
|
||||
if (!formatter_found) {
|
||||
config.formatters.push(formatter);
|
||||
}
|
||||
|
||||
/* Add the serie */
|
||||
addNewSerie(serie_name, chart_type, { color: metadata.color, palette: 0 }, config)
|
||||
addNewSerie(serie_name, chart_type, {color: metadata.color, palette: 0}, config);
|
||||
|
||||
/* Adding the extra timeseries, 30m ago, avg and 95th */
|
||||
if (extra_timeseries?.avg == true) {
|
||||
addNewSerie(avg_name, "point", { color: constant_serie_colors["avg"], palette: 1 }, config)
|
||||
addNewSerie(avg_name, 'point', {color: constant_serie_colors['avg'], palette: 1}, config);
|
||||
}
|
||||
if (extra_timeseries?.perc_95 == true) {
|
||||
addNewSerie(perc_name, "point", { color: constant_serie_colors["perc_95"], palette: 1 }, config)
|
||||
addNewSerie(perc_name, 'point', {color: constant_serie_colors['perc_95'], palette: 1}, config);
|
||||
}
|
||||
if (extra_timeseries?.past == true && !disable_past_ts) {
|
||||
addNewSerie(past_name, "dash", { color: constant_serie_colors["past"], palette: 1 }, config)
|
||||
addNewSerie(past_name, 'dash', {color: constant_serie_colors['past'], palette: 1}, config);
|
||||
}
|
||||
|
||||
/* ************************************** */
|
||||
|
|
@ -318,9 +321,9 @@ function formatStandardSerie(timeserie_info, timeserie_options, config, tsCompar
|
|||
serie_name: serie_name,
|
||||
avg_name: avg_name,
|
||||
perc_name: perc_name,
|
||||
past_name: past_name
|
||||
past_name: past_name,
|
||||
});
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
/* ************************************** */
|
||||
|
|
@ -347,7 +350,7 @@ function formatFullSerie(config) {
|
|||
if (found == false) {
|
||||
full_serie[index].push(null);
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
config.serie = full_serie;
|
||||
}
|
||||
|
|
@ -363,12 +366,12 @@ function formatSingleSerie(timeserie_info, timeserie_options, tsCompare, config)
|
|||
/* Format the data */
|
||||
|
||||
/* the data in Dygraphs should be formatted as follow:
|
||||
* { [ time_1, serie1_1, serie2_1 ], [ time_2, serie1_2, serie2_2 ] }
|
||||
* { [ time_1, serie1_1, serie2_1 ], [ time_2, serie1_2, serie2_2 ] }
|
||||
*/
|
||||
const bounds = timeserie_info.metric.bounds || false;
|
||||
|
||||
/* The serie can possibly have multiple timeseries, like for the
|
||||
* bytes, we have sent and rcvd, so compact them
|
||||
/* The serie can possibly have multiple timeseries, like for the
|
||||
* bytes, we have sent and rcvd, so compact them
|
||||
*/
|
||||
if (bounds == true) {
|
||||
formatBoundsSerie(timeserie_info, timeserie_options, config);
|
||||
|
|
@ -395,7 +398,7 @@ function formatSimpleSerie(data, serie_name, chart_type, formatters, value_range
|
|||
const config = {
|
||||
serie: tmp_serie,
|
||||
formatters: formatters,
|
||||
labels: ["index"],
|
||||
labels: ['index'],
|
||||
colors: [],
|
||||
stacked: false,
|
||||
customBars: false,
|
||||
|
|
@ -405,12 +408,12 @@ function formatSimpleSerie(data, serie_name, chart_type, formatters, value_range
|
|||
disable_ts_list: true,
|
||||
};
|
||||
|
||||
if (typeof (serie_name) === "string") {
|
||||
addNewSerie(serie_name, chart_type, { color: constant_serie_colors["default_color"], palette: 0 }, config)
|
||||
if (typeof (serie_name) === 'string') {
|
||||
addNewSerie(serie_name, chart_type, {color: constant_serie_colors['default_color'], palette: 0}, config);
|
||||
} else {
|
||||
serie_name.forEach((el) => {
|
||||
addNewSerie(el, chart_type, { color: constant_serie_colors["default_color"], palette: 0 }, config)
|
||||
})
|
||||
addNewSerie(el, chart_type, {color: constant_serie_colors['default_color'], palette: 0}, config);
|
||||
});
|
||||
}
|
||||
formatSerieColors(config.colors);
|
||||
return dygraphConfig.buildChartOptions(config);
|
||||
|
|
@ -422,12 +425,12 @@ function formatSerie(tsOptionsArray, tsGroupsArray, tsCompare, useFullName) {
|
|||
const config = {
|
||||
serie: [],
|
||||
formatters: [],
|
||||
labels: ["Time"],
|
||||
labels: ['Time'],
|
||||
colors: [],
|
||||
properties: [],
|
||||
stacked: false,
|
||||
customBars: false,
|
||||
use_full_name: (useFullName != null) ? useFullName : false
|
||||
use_full_name: (useFullName != null) ? useFullName : false,
|
||||
};
|
||||
|
||||
/* Go throught each serie */
|
||||
|
|
@ -446,7 +449,7 @@ function formatSerie(tsOptionsArray, tsGroupsArray, tsCompare, useFullName) {
|
|||
|
||||
/* *********************************************** */
|
||||
|
||||
const dygraphFormat = function () {
|
||||
const dygraphFormat = function() {
|
||||
return {
|
||||
formatSerie,
|
||||
formatSimpleSerie,
|
||||
|
|
@ -455,4 +458,4 @@ const dygraphFormat = function () {
|
|||
};
|
||||
}();
|
||||
|
||||
export default dygraphFormat;
|
||||
export default dygraphFormat;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue