mirror of
https://github.com/ntop/ntopng.git
synced 2026-04-29 15:39:33 +00:00
442 lines
22 KiB
JavaScript
442 lines
22 KiB
JavaScript
import { DataTableUtils } from "../utilities/datatable/sprymedia-datatable-utils";
|
|
import formatterUtils from "../utilities/formatter-utils.js";
|
|
import { ntopng_url_manager } from "../services/context/ntopng_globals_services.js";
|
|
import NtopUtils from "../utilities/ntop-utils";
|
|
|
|
const bytesToSizeFormatter = formatterUtils.getFormatter(formatterUtils.types.bytes.id);
|
|
const handlerIdAddLink = "page-stats-action-link";
|
|
const handlerIdJumpHistorical = "page-stats-action-jump-historical";
|
|
const handlerIdJumpLive = "page-stats-action-jump-live";
|
|
|
|
const top_application = {
|
|
table_value: "interface",
|
|
title: i18n('page_stats.top.top_applications'),
|
|
view: "top_protocols",
|
|
default_sorting_columns: 1,
|
|
default: true,
|
|
columnDefs: [
|
|
{ type: "file-size", targets: 1 },
|
|
],
|
|
columns: [{
|
|
columnName: i18n("actions"), width: '5%', name: 'actions', className: 'text-center', orderable: false, responsivePriority: 0, handlerId: handlerIdJumpHistorical,
|
|
render_if: function (context) { return context.is_history_enabled },
|
|
render: function (data, type, service) {
|
|
let context = this;
|
|
const jump_to_historical = {
|
|
handlerId: handlerIdJumpHistorical,
|
|
onClick: function () {
|
|
const epoch_begin = ntopng_url_manager.get_url_entry("epoch_begin");
|
|
const epoch_end = ntopng_url_manager.get_url_entry("epoch_end");
|
|
let l7_proto = ntopng_url_manager.serialize_param("l7proto", `${service.protocol.id};eq`);
|
|
let historical_flows_url = `${http_prefix}/lua/pro/db_search.lua?epoch_begin=${epoch_begin}&epoch_end=${epoch_end}&${l7_proto}`;
|
|
let source_type = context.source_type;
|
|
let source_array = context.source_array;
|
|
|
|
let params = "";
|
|
let params_array = source_type.source_def_array.map((source_def, i) => {
|
|
let source = source_array[i];
|
|
if (source_def.value == "ifid") {
|
|
return ntopng_url_manager.serialize_param("ifid", source.value);
|
|
} else if (source_def.value == "host") {
|
|
return ntopng_url_manager.serialize_param("ip", `${source.value};eq`);
|
|
}
|
|
});
|
|
params = params_array.join("&");
|
|
historical_flows_url = `${historical_flows_url}&${params}`;
|
|
window.open(historical_flows_url);
|
|
}
|
|
};
|
|
const jump_to_live = {
|
|
handlerId: handlerIdJumpLive,
|
|
onClick: function () {
|
|
let l7_proto = ntopng_url_manager.serialize_param("application", `${service.protocol.id}`);
|
|
let live_flows_url = `${http_prefix}/lua/flows_stats.lua?${l7_proto}`;
|
|
let source_type = context.source_type;
|
|
let source_array = context.source_array;
|
|
|
|
let params = "";
|
|
let params_array = source_type.source_def_array.map((source_def, i) => {
|
|
let source = source_array[i];
|
|
if (source_def.value == "ifid") {
|
|
return ntopng_url_manager.serialize_param("ifid", source.value);
|
|
} else if (source_def.value == "host") {
|
|
live_flows_url = `${http_prefix}/lua/host_details.lua?page=flows&${l7_proto}`
|
|
return ntopng_url_manager.serialize_param("host", `${source.value}`);
|
|
}
|
|
});
|
|
params = params_array.join("&");
|
|
live_flows_url = `${live_flows_url}&${params}`;
|
|
window.open(live_flows_url);
|
|
}
|
|
};
|
|
return DataTableUtils.createActionButtons([
|
|
{ class: 'dropdown-item', icon: 'fas fa-search-plus', href: '#', title: i18n('db_explorer.historical_data'), handler: jump_to_historical },
|
|
{ class: 'dropdown-item', icon: 'fas fa-stream', href: '#', title: i18n('flows_page.live_flows'), handler: jump_to_live },
|
|
]);
|
|
}
|
|
}, {
|
|
columnName: i18n("application"), name: 'application', data: 'protocol', handlerId: handlerIdAddLink,
|
|
render: function (data, type, service) {
|
|
let context = this;
|
|
let handler = {
|
|
handlerId: handlerIdAddLink,
|
|
onClick: function () {
|
|
// console.log(data);
|
|
// console.log(service);
|
|
let schema = `top:${service.ts_schema}`;
|
|
context.add_metric_from_metric_schema(schema, service.ts_query)
|
|
},
|
|
};
|
|
return DataTableUtils.createLinkCallback({ text: data.label, handler });
|
|
},
|
|
}, {
|
|
columnName: i18n("traffic"), name: 'traffic', className: 'text-end', data: 'traffic', orderable: true,
|
|
render: (data) => {
|
|
if (!data)
|
|
return '';
|
|
//return bytesToSizeFormatter(data);
|
|
return NtopUtils.bytesToSize(data)
|
|
},
|
|
}, {
|
|
columnName: i18n("percentage"), name: 'traffic_perc', className: 'text-center', data: 'percentage', orderable: false,
|
|
render: (data) => {
|
|
if (!data)
|
|
return '';
|
|
|
|
const percentage = data.toFixed(1);
|
|
return NtopUtils.createProgressBar(percentage)
|
|
}
|
|
}],
|
|
};
|
|
|
|
const top_categories = {
|
|
table_value: "interface",
|
|
title: i18n('page_stats.top.top_categories'),
|
|
view: "top_categories",
|
|
default_sorting_columns: 2,
|
|
columnDefs: [
|
|
{ type: "file-size", targets: 1 },
|
|
],
|
|
columns: [{
|
|
columnName: i18n("actions"), width: '5%', name: 'actions', className: 'text-center', orderable: false, responsivePriority: 0, handlerId: handlerIdJumpHistorical,
|
|
render_if: function (context) { return context.is_history_enabled },
|
|
render: function (data, type, service) {
|
|
let context = this;
|
|
const jump_to_historical = {
|
|
handlerId: handlerIdJumpHistorical,
|
|
onClick: function () {
|
|
const epoch_begin = ntopng_url_manager.get_url_entry("epoch_begin");
|
|
const epoch_end = ntopng_url_manager.get_url_entry("epoch_end");
|
|
let category = ntopng_url_manager.serialize_param("l7cat", `${service.category.id};eq`);
|
|
let historical_flows_url = `${http_prefix}/lua/pro/db_search.lua?epoch_begin=${epoch_begin}&epoch_end=${epoch_end}&${category}`;
|
|
let source_type = context.source_type;
|
|
let source_array = context.source_array;
|
|
|
|
let params = "";
|
|
let params_array = source_type.source_def_array.map((source_def, i) => {
|
|
let source = source_array[i];
|
|
if (source_def.value == "ifid") {
|
|
return ntopng_url_manager.serialize_param("ifid", source.value);
|
|
} else if (source_def.value == "host") {
|
|
return ntopng_url_manager.serialize_param("ip", `${source.value};eq`);
|
|
}
|
|
});
|
|
params = params_array.join("&");
|
|
historical_flows_url = `${historical_flows_url}&${params}`;
|
|
// console.log(historical_flows_url);
|
|
window.open(historical_flows_url);
|
|
}
|
|
};
|
|
const jump_to_live = {
|
|
handlerId: handlerIdJumpLive,
|
|
onClick: function () {
|
|
let l7_category = ntopng_url_manager.serialize_param("application", `cat_${service.category.id}`);
|
|
let live_flows_url = `${http_prefix}/lua/flows_stats.lua?${l7_category}`;
|
|
let source_type = context.source_type;
|
|
let source_array = context.source_array;
|
|
|
|
let params = "";
|
|
let params_array = source_type.source_def_array.map((source_def, i) => {
|
|
let source = source_array[i];
|
|
if (source_def.value == "ifid") {
|
|
return ntopng_url_manager.serialize_param("ifid", source.value);
|
|
} else if (source_def.value == "host") {
|
|
live_flows_url = `${http_prefix}/lua/host_details.lua?page=flows&${l7_category}`
|
|
return ntopng_url_manager.serialize_param("host", `${source.value}`);
|
|
}
|
|
});
|
|
params = params_array.join("&");
|
|
live_flows_url = `${live_flows_url}&${params}`;
|
|
window.open(live_flows_url);
|
|
}
|
|
};
|
|
return DataTableUtils.createActionButtons([
|
|
{ class: 'dropdown-item', icon: 'fas fa-search-plus', href: '#', title: i18n('db_explorer.historical_data'), handler: jump_to_historical },
|
|
{ class: 'dropdown-item', icon: 'fas fa-stream', href: '#', title: i18n('flows_page.live_flows'), handler: jump_to_live },
|
|
]);
|
|
}
|
|
}, {
|
|
columnName: i18n("category"), name: 'category', data: 'category', handlerId: handlerIdAddLink,
|
|
render: function (data, type, service) {
|
|
let context = this;
|
|
let handler = {
|
|
handlerId: handlerIdAddLink,
|
|
onClick: function () {
|
|
// console.log(data);
|
|
// console.log(service);
|
|
let schema = `top:${service.ts_schema}`;
|
|
context.add_metric_from_metric_schema(schema, service.ts_query)
|
|
},
|
|
};
|
|
return DataTableUtils.createLinkCallback({ text: data.label, handler });
|
|
},
|
|
}, {
|
|
columnName: i18n("traffic"), name: 'traffic', className: 'text-end', data: 'traffic', orderable: true,
|
|
render: (data) => {
|
|
return bytesToSizeFormatter(data);
|
|
//return NtopUtils.bytesToSize(data)
|
|
},
|
|
}, {
|
|
columnName: i18n("percentage"), name: 'traffic_perc', className: 'text-center', data: 'percentage',
|
|
render: (data) => {
|
|
const percentage = data.toFixed(1);
|
|
return NtopUtils.createProgressBar(percentage)
|
|
}
|
|
}],
|
|
};
|
|
|
|
const top_senders = {
|
|
table_value: "interface",
|
|
title: i18n('page_stats.top.top_senders'),
|
|
view: "top_senders",
|
|
default_sorting_columns: 1,
|
|
columnDefs: [
|
|
{ type: "file-size", targets: 1 },
|
|
],
|
|
columns: [
|
|
{
|
|
columnName: i18n("actions"), width: '5%', name: 'actions', className: 'text-center', orderable: false, responsivePriority: 0, handlerId: handlerIdJumpHistorical,
|
|
render_if: function (context) { return context.is_history_enabled },
|
|
render: function (data, type, service) {
|
|
let context = this;
|
|
const host = service.host.id;
|
|
const host_ts_available = service.host.is_local;
|
|
const jump_to_historical = {
|
|
handlerId: handlerIdJumpHistorical,
|
|
onClick: function () {
|
|
const epoch_begin = ntopng_url_manager.get_url_entry("epoch_begin");
|
|
const epoch_end = ntopng_url_manager.get_url_entry("epoch_end");
|
|
let historical_flows_url = `${http_prefix}/lua/pro/db_search.lua?epoch_begin=${epoch_begin}&epoch_end=${epoch_end}`;
|
|
|
|
let params = "";
|
|
let params_array = [];
|
|
for (let key in service.tags) {
|
|
let value = service.tags[key];
|
|
let p_url = "";
|
|
if (key == "ifid") {
|
|
p_url = ntopng_url_manager.serialize_param(key, value);
|
|
} else if (key == "host") {
|
|
p_url = ntopng_url_manager.serialize_param("ip", `${value};eq`);
|
|
}
|
|
params_array.push(p_url);
|
|
}
|
|
params = params_array.join("&");
|
|
historical_flows_url = `${historical_flows_url}&${params}`;
|
|
window.open(historical_flows_url);
|
|
}
|
|
};
|
|
const jump_to_live = {
|
|
handlerId: handlerIdJumpLive,
|
|
onClick: function () {
|
|
let live_flows_url = `${http_prefix}/lua/host_details.lua?page=flows`
|
|
let params = "";
|
|
let params_array = [];
|
|
for (let key in service.tags) {
|
|
let value = service.tags[key];
|
|
let p_url = "";
|
|
if (key == "ifid") {
|
|
p_url = ntopng_url_manager.serialize_param(key, value);
|
|
} else if (key == "host") {
|
|
p_url = ntopng_url_manager.serialize_param("host", `${value}`);
|
|
}
|
|
params_array.push(p_url);
|
|
}
|
|
params = params_array.join("&");
|
|
live_flows_url = `${live_flows_url}&${params}`;
|
|
window.open(live_flows_url);
|
|
}
|
|
};
|
|
|
|
const jump_to_host = {
|
|
handlerId: handlerIdJumpHistorical,
|
|
onClick: function () {
|
|
const ifid = ntopng_url_manager.get_url_entry('ifid');
|
|
const host_url = `${http_prefix}/lua/host_details.lua?host=${host}&page=historical&ts_query=ifid:${ifid},host:${host}&ts_schema=host:details&epoch_begin=${context.status.epoch_begin}&epoch_end=${context.status.epoch_end}`;
|
|
|
|
window.open(host_url);
|
|
}
|
|
};
|
|
const is_host_available = (service && service.host) ? service.host.is_available : false;
|
|
const dropdown = [
|
|
{ class: 'dropdown-item', icon: 'fas fa-search-plus', href: '#', title: i18n('db_explorer.historical_data'), handler: jump_to_historical },
|
|
{ class: is_host_available ? 'dropdown-item' : 'dropdown-item disabled', icon: 'fas fa-stream', href: '#', title: i18n('flows_page.live_flows'), handler: jump_to_live },
|
|
]
|
|
if (context.sources_types_enabled["host"] && host_ts_available) {
|
|
dropdown.push({ class: 'dropdown-item', icon: 'fas fa-laptop', href: '#', title: i18n('db_explorer.host_data'), handler: jump_to_host })
|
|
}
|
|
|
|
return DataTableUtils.createActionButtons(dropdown);
|
|
}
|
|
}, {
|
|
columnName: i18n("page_stats.top.host_name"), name: 'host_name', data: 'host', handlerId: handlerIdAddLink,
|
|
render: function (data, type, service) {
|
|
let context = this;
|
|
let label = data.label;
|
|
let host_ref = '';
|
|
let handler = {
|
|
handlerId: handlerIdAddLink,
|
|
onClick: async function () {
|
|
let schema = `host:traffic`;
|
|
context.add_ts_group_from_source_value_dict("host", service.tags, schema);
|
|
},
|
|
};
|
|
if (context.sources_types_enabled["host"] && data.is_local) {
|
|
label = DataTableUtils.createLinkCallback({ text: data.label, handler });
|
|
}
|
|
if (data.is_available) {
|
|
host_ref = ` <a href="/lua/host_details.lua?host=${data.id}" data-bs-toggle="tooltip" title=""><i class="fas fa-laptop"></i></a>`
|
|
}
|
|
|
|
return `${label}${host_ref}`;
|
|
},
|
|
}, {
|
|
columnName: i18n("page_stats.top.sent"), name: 'sent', className: 'text-end', data: 'traffic', orderable: true,
|
|
render: (data, type) => {
|
|
if (type === 'sort' || type === 'type') {
|
|
return data
|
|
}
|
|
return bytesToSizeFormatter(data);
|
|
},
|
|
}],
|
|
};
|
|
|
|
const top_receivers = {
|
|
table_value: "interface",
|
|
title: i18n('page_stats.top.top_receivers'),
|
|
view: "top_receivers",
|
|
default_sorting_columns: 1,
|
|
columnDefs: [
|
|
{ type: "file-size", targets: 1 },
|
|
],
|
|
columns: [
|
|
{
|
|
columnName: i18n("actions"), width: '5%', name: 'actions', className: 'text-center', orderable: false, responsivePriority: 0, handlerId: handlerIdJumpHistorical,
|
|
render_if: function (context) { return context.is_history_enabled },
|
|
render: function (data, type, service) {
|
|
let context = this;
|
|
const host = service.host.id;
|
|
const host_ts_available = service.host.is_local;
|
|
const jump_to_historical = {
|
|
handlerId: handlerIdJumpHistorical,
|
|
onClick: function () {
|
|
const epoch_begin = ntopng_url_manager.get_url_entry("epoch_begin");
|
|
const epoch_end = ntopng_url_manager.get_url_entry("epoch_end");
|
|
let historical_flows_url = `${http_prefix}/lua/pro/db_search.lua?epoch_begin=${epoch_begin}&epoch_end=${epoch_end}`;
|
|
|
|
let params = "";
|
|
let params_array = [];
|
|
for (let key in service.tags) {
|
|
let value = service.tags[key];
|
|
let p_url = "";
|
|
if (key == "ifid") {
|
|
p_url = ntopng_url_manager.serialize_param(key, value);
|
|
} else if (key == "host") {
|
|
p_url = ntopng_url_manager.serialize_param("ip", `${value};eq`);
|
|
}
|
|
params_array.push(p_url);
|
|
}
|
|
params = params_array.join("&");
|
|
historical_flows_url = `${historical_flows_url}&${params}`;
|
|
window.open(historical_flows_url);
|
|
}
|
|
};
|
|
const jump_to_live = {
|
|
handlerId: handlerIdJumpLive,
|
|
onClick: function () {
|
|
let live_flows_url = `${http_prefix}/lua/host_details.lua?page=flows`
|
|
let params = "";
|
|
let params_array = [];
|
|
for (let key in service.tags) {
|
|
let value = service.tags[key];
|
|
let p_url = "";
|
|
if (key == "ifid") {
|
|
p_url = ntopng_url_manager.serialize_param(key, value);
|
|
} else if (key == "host") {
|
|
p_url = ntopng_url_manager.serialize_param("host", `${value}`);
|
|
}
|
|
params_array.push(p_url);
|
|
}
|
|
params = params_array.join("&");
|
|
live_flows_url = `${live_flows_url}&${params}`;
|
|
window.open(live_flows_url);
|
|
}
|
|
};
|
|
|
|
const jump_to_host = {
|
|
handlerId: handlerIdJumpHistorical,
|
|
onClick: function () {
|
|
const ifid = ntopng_url_manager.get_url_entry('ifid');
|
|
const host_url = `${http_prefix}/lua/host_details.lua?host=${host}&page=historical&ts_query=ifid:${ifid},host:${host}&ts_schema=host:details&epoch_begin=${context.status.epoch_begin}&epoch_end=${context.status.epoch_end}`;
|
|
|
|
window.open(host_url);
|
|
}
|
|
};
|
|
|
|
const is_host_available = (service && service.host) ? service.host.is_available : false;
|
|
const dropdown = [
|
|
{ class: 'dropdown-item', icon: 'fas fa-search-plus', href: '#', title: i18n('db_explorer.historical_data'), handler: jump_to_historical },
|
|
{ class: is_host_available ? 'dropdown-item' : 'dropdown-item disabled', icon: 'fas fa-stream', href: '#', title: i18n('flows_page.live_flows'), handler: jump_to_live },
|
|
]
|
|
if (context.sources_types_enabled["host"] && host_ts_available) {
|
|
dropdown.push({ class: 'dropdown-item', icon: 'fas fa-laptop', href: '#', title: i18n('db_explorer.host_data'), handler: jump_to_host })
|
|
}
|
|
|
|
return DataTableUtils.createActionButtons(dropdown);
|
|
},
|
|
}, {
|
|
columnName: i18n("page_stats.top.host_name"), name: 'host_name', data: 'host', handlerId: handlerIdAddLink,
|
|
render: function (data, type, service) {
|
|
let context = this;
|
|
let label = data.label;
|
|
let host_ref = '';
|
|
let handler = {
|
|
handlerId: handlerIdAddLink,
|
|
onClick: async function () {
|
|
let schema = `host:traffic`;
|
|
context.add_ts_group_from_source_value_dict("host", service.tags, schema);
|
|
},
|
|
};
|
|
if (context.sources_types_enabled["host"] && data.is_local) {
|
|
label = DataTableUtils.createLinkCallback({ text: data.label, handler });
|
|
}
|
|
if (data.is_available) {
|
|
host_ref = ` <a href="/lua/host_details.lua?host=${data.id}" data-bs-toggle="tooltip" title=""><i class="fas fa-laptop"></i></a>`
|
|
}
|
|
|
|
return `${label}${host_ref}`;
|
|
},
|
|
}, {
|
|
columnName: i18n("page_stats.top.received"), name: 'received', className: 'text-end', data: 'traffic', orderable: true,
|
|
render: (data, type) => {
|
|
if (type === 'sort' || type === 'type') {
|
|
return data
|
|
}
|
|
return bytesToSizeFormatter(data);
|
|
},
|
|
}],
|
|
};
|
|
|
|
const interface_top_tables = [top_application, top_categories, top_senders, top_receivers];
|
|
|
|
export default interface_top_tables;
|
|
|