mirror of
https://github.com/ntop/ntopng.git
synced 2026-04-28 06:59:33 +00:00
346 lines
14 KiB
JavaScript
346 lines
14 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 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("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) => {
|
|
//return bytesToSizeFormatter(data);
|
|
return NtopUtils.bytesToSize(data)
|
|
},
|
|
}, {
|
|
columnName: i18n("percentage"), name: 'traffic_perc', className: 'text-center', data: 'percentage', orderable: false,
|
|
render: (data) => {
|
|
const percentage = data.toFixed(1);
|
|
return NtopUtils.createProgressBar(percentage)
|
|
}
|
|
}, {
|
|
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() {
|
|
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=${context.status.epoch_begin}&epoch_end=${context.status.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}`;
|
|
// console.log(historical_flows_url);
|
|
window.open(historical_flows_url);
|
|
}
|
|
};
|
|
return DataTableUtils.createActionButtons([
|
|
{ class: 'dropdown-item', href: '#', title: i18n('db_explorer.historical_data'), handler: jump_to_historical },
|
|
]);
|
|
}
|
|
},],
|
|
};
|
|
|
|
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("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)
|
|
}
|
|
}, {
|
|
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() {
|
|
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=${context.status.epoch_begin}&epoch_end=${context.status.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);
|
|
}
|
|
};
|
|
return DataTableUtils.createActionButtons([
|
|
{ class: 'dropdown-item', href: '#', title: i18n('db_explorer.historical_data'), handler: jump_to_historical },
|
|
]);
|
|
}
|
|
},],
|
|
};
|
|
|
|
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("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() {
|
|
// console.log(data);
|
|
// console.log(service);
|
|
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) => {
|
|
return bytesToSizeFormatter(data);
|
|
//return NtopUtils.bytesToSize(data)
|
|
},
|
|
}, // {
|
|
// columnName: i18n("percentage"), name: 'traffic_perc', data: 'percentage',
|
|
// render: (data) => {
|
|
// const percentage = data.toFixed(1);
|
|
// return NtopUtils.createProgressBar(percentage)
|
|
// }
|
|
// },
|
|
{
|
|
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() {
|
|
let historical_flows_url = `${http_prefix}/lua/pro/db_search.lua?epoch_begin=${context.status.epoch_begin}&epoch_end=${context.status.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}`;
|
|
// console.log(historical_flows_url);
|
|
window.open(historical_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 dropdown = [{ class: 'dropdown-item', href: '#', title: i18n('db_explorer.historical_data'), handler: jump_to_historical }]
|
|
if (context.sources_types_enabled["host"] && host_ts_available) {
|
|
dropdown.push({ class: 'dropdown-item', href: '#', title: i18n('db_explorer.host_data'), handler: jump_to_host })
|
|
}
|
|
|
|
return DataTableUtils.createActionButtons(dropdown);
|
|
}
|
|
},],
|
|
};
|
|
|
|
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("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() {
|
|
// console.log(data);
|
|
// console.log(service);
|
|
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) => {
|
|
return bytesToSizeFormatter(data);
|
|
//return NtopUtils.bytesToSize(data)
|
|
},
|
|
}, // {
|
|
// columnName: i18n("percentage"), name: 'traffic_perc', data: 'percentage',
|
|
// render: (data) => {
|
|
// const percentage = data.toFixed(1);
|
|
// return NtopUtils.createProgressBar(percentage)
|
|
// }
|
|
// },
|
|
{
|
|
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() {
|
|
let historical_flows_url = `${http_prefix}/lua/pro/db_search.lua?epoch_begin=${context.status.epoch_begin}&epoch_end=${context.status.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}`;
|
|
// console.log(historical_flows_url);
|
|
window.open(historical_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 dropdown = [{ class: 'dropdown-item', href: '#', title: i18n('db_explorer.historical_data'), handler: jump_to_historical }]
|
|
if (context.sources_types_enabled["host"] && host_ts_available) {
|
|
dropdown.push({ class: 'dropdown-item', href: '#', title: i18n('db_explorer.host_data'), handler: jump_to_host })
|
|
}
|
|
|
|
return DataTableUtils.createActionButtons(dropdown);
|
|
},
|
|
},],
|
|
};
|
|
|
|
const interface_top_tables = [top_application, top_categories, top_senders, top_receivers];
|
|
|
|
export default interface_top_tables;
|
|
|