mirror of
https://github.com/ntop/ntopng.git
synced 2026-05-03 09:20:10 +00:00
576 lines
21 KiB
Vue
576 lines
21 KiB
Vue
<!--
|
|
(C) 2013-22 - ntop.org
|
|
-->
|
|
|
|
<template>
|
|
<div class="row">
|
|
<div class="col-md-12 col-lg-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="mb-4">
|
|
<h4>{{ _i18n('if_stats_config.traffic_rules') }}</h4>
|
|
</div>
|
|
<div id="traffic_rules">
|
|
<Loading :isLoading="isLoading"></Loading>
|
|
<ModalDeleteConfirm ref="modal_delete_confirm" :title="title_delete" :body="body_delete"
|
|
@delete="delete_row">
|
|
</ModalDeleteConfirm>
|
|
<ModalAddTrafficRules ref="modal_add_host_rule" :metric_list="metric_list"
|
|
:interface_metric_list="interface_metric_list" :frequency_list="frequency_list" :init_func="init_edit"
|
|
:has_vlans="props.context.has_vlans" :has_profiles="props.context.has_profiles"
|
|
:has_asn="props.context.has_asn" :isExporterInterface="isExporterInterface" @add="add_host_rule" @edit="edit">
|
|
</ModalAddTrafficRules>
|
|
|
|
<Datatable ref="table_traffic_rules" :table_buttons="traffic_rules_table_config.table_buttons"
|
|
:columns_config="traffic_rules_table_config.columns_config" :data_url="traffic_rules_table_config.data_url"
|
|
:enable_search="traffic_rules_table_config.enable_search"
|
|
:table_config="traffic_rules_table_config.table_config">
|
|
</Datatable>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<NoteList :note_list="note_list">
|
|
</NoteList>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onBeforeMount, onUnmounted } from "vue";
|
|
import { default as ModalAddTrafficRules } from "./modal-add-traffic-rules.vue";
|
|
import { default as ModalDeleteConfirm } from "./modal-delete-confirm.vue";
|
|
import { default as Loading } from "./loading.vue";
|
|
import { default as Datatable } from "./datatable.vue";
|
|
import { default as NoteList } from "./note-list.vue";
|
|
import NtopUtils from "../utilities/ntop-utils";
|
|
|
|
const props = defineProps({
|
|
context: Object,
|
|
});
|
|
|
|
const isExporterInterface = props.context.isExporterInterface;
|
|
const table_traffic_rules = ref(null);
|
|
const modal_delete_confirm = ref(null);
|
|
const modal_add_host_rule = ref(null);
|
|
const _i18n = (t) => i18n(t);
|
|
const row_to_delete = ref({});
|
|
const row_to_edit = ref({});
|
|
const invalid_add = ref(false);
|
|
const isLoading = ref(false);
|
|
|
|
const metric_url = `${http_prefix}/lua/pro/rest/v2/get/interface/traffic_rules/metrics.lua?rule_type=host`;
|
|
const metric_ifname_url = `${http_prefix}/lua/pro/rest/v2/get/interface/traffic_rules/metrics.lua?rule_type=interface`;
|
|
|
|
const metric_host_pool_url = `${http_prefix}/lua/pro/rest/v2/get/interface/traffic_rules/metrics.lua?rule_type=host_pool`;
|
|
const metric_network_url = `${http_prefix}/lua/pro/rest/v2/get/interface/traffic_rules/metrics.lua?rule_type=CIDR`;
|
|
const metric_vlan_url = `${http_prefix}/lua/pro/rest/v2/get/interface/traffic_rules/metrics.lua?rule_type=vlan`;
|
|
const metric_profiles_url = `${http_prefix}/lua/pro/rest/v2/get/interface/traffic_rules/metrics.lua?rule_type=profiles`;
|
|
const metric_asn_url = `${http_prefix}/lua/pro/rest/v2/get/interface/traffic_rules/metrics.lua?rule_type=asn`;
|
|
const metric_flow_exp_device_url = `${http_prefix}/lua/pro/rest/v2/get/interface/traffic_rules/metrics.lua?rule_type=exporter`;
|
|
|
|
const flow_devices_url = `${http_prefix}/lua/pro/rest/v2/get/flowdevices/list.lua`;
|
|
const flow_devices_details_url = `${http_prefix}/lua/pro/enterprise/flowdevice_details.lua`;
|
|
const host_pool_url = `${http_prefix}/lua/rest/v2/get/host/pool/pools.lua`;
|
|
const network_list_url = `${http_prefix}/lua/rest/v2/get/network/networks.lua`;
|
|
const ifid_url = `${http_prefix}/lua/rest/v2/get/ntopng/interfaces.lua`;
|
|
const vlans_url = `${http_prefix}/lua/get_vlans_data.lua`;
|
|
const profiles_url = `${http_prefix}/lua/pro/get_traffic_profiles.lua`;
|
|
const asn_url = `${http_prefix}/lua/rest/v2/get/asn/get_as_data.lua?sort=num_hosts&order=desc&show_as=all`;
|
|
|
|
const data_url = `${http_prefix}/lua/pro/rest/v2/get/interface/traffic_rules/data.lua`;
|
|
const add_rule_url = `${http_prefix}/lua/pro/rest/v2/add/interface/traffic_rules/rule.lua`;
|
|
const remove_rule_url = `${http_prefix}/lua/pro/rest/v2/delete/interface/traffic_rules/rule.lua`;
|
|
|
|
const note_list = [
|
|
_i18n('if_stats_config.generic_notes_1'),
|
|
_i18n('if_stats_config.generic_notes_2'),
|
|
_i18n('if_stats_config.generic_notes_3'),
|
|
];
|
|
|
|
const rest_params = {
|
|
ifid: props.context.ifid,
|
|
csrf: props.context.page_csrf,
|
|
gui: true // Some API requires this to return html content for backward compatibility
|
|
};
|
|
|
|
let traffic_rules_table_config = {};
|
|
let title_delete = _i18n('if_stats_config.delete_traffic_title');
|
|
let title_edit = _i18n('if_stats_config.edit_local_network_rules');
|
|
let body_delete = _i18n('if_stats_config.delete_traffic_description');
|
|
let metric_list = [];
|
|
let interface_metric_list = [];
|
|
let host_pool_metric_list = [];
|
|
let ifid_list = [];
|
|
let flow_exporter_list = [];
|
|
let flow_exporter_metric_list = [];
|
|
let host_pool_list = [];
|
|
let network_list = [];
|
|
let network_metric_list = [];
|
|
let vlan_list = [];
|
|
let vlan_metric_list = [];
|
|
let profiles_list = [];
|
|
let profiles_metric_list = [];
|
|
let asn_list = [];
|
|
let asn_metric_list = [];
|
|
|
|
|
|
const frequency_list = [
|
|
{ title: i18n('show_alerts.5_min'), label: i18n('show_alerts.5_min'), id: '5min', value: '5min' },
|
|
{ title: i18n('show_alerts.hourly'), label: i18n('show_alerts.hourly'), id: 'hour', value: 'hour' },
|
|
{ title: i18n('show_alerts.daily'), label: i18n('show_alerts.daily'), id: 'day', value: 'day' },
|
|
{ title: i18n('show_alerts.monthly'), label: i18n('show_alerts.monthly'), id: 'month', value: 'month' }
|
|
];
|
|
|
|
const show_delete_dialog = function (row) {
|
|
row_to_delete.value = row;
|
|
modal_delete_confirm.value.show();
|
|
};
|
|
|
|
const load_selected_field = function (row) {
|
|
row_to_edit.value = row;
|
|
|
|
row_to_delete.value = row;
|
|
|
|
modal_add_host_rule.value.show(row);
|
|
|
|
};
|
|
|
|
async function edit(params) {
|
|
//await delete_row();
|
|
|
|
await add_host_rule(params);
|
|
};
|
|
|
|
const init_edit = function () {
|
|
const row = row_to_edit.value;
|
|
row_to_edit.value = null;
|
|
return row;
|
|
};
|
|
|
|
const destroy_table = function () {
|
|
table_traffic_rules.value.destroy_table();
|
|
};
|
|
|
|
const reload_table = function () {
|
|
table_traffic_rules.value.reload();
|
|
};
|
|
|
|
const delete_row = async function () {
|
|
const row = row_to_delete.value;
|
|
const url = NtopUtils.buildURL(remove_rule_url, {
|
|
...rest_params,
|
|
...{
|
|
rule_id: row.id,
|
|
rule_type: row.rule_type
|
|
}
|
|
})
|
|
|
|
await $.post(url, function (rsp, status) {
|
|
reload_table();
|
|
});
|
|
};
|
|
|
|
const add_host_rule = async function (params) {
|
|
|
|
params.csrf = props.context.page_csrf;
|
|
params.ifid = props.context.ifid;
|
|
const rsp = await ntopng_utility.http_post_request(add_rule_url, params);
|
|
|
|
invalid_add.value = rsp.rsp;
|
|
|
|
if (invalid_add.value == false) {
|
|
modal_add_host_rule.value.close();
|
|
reload_table();
|
|
} else {
|
|
modal_add_host_rule.value.invalidAdd();
|
|
}
|
|
|
|
};
|
|
|
|
|
|
const add_action_column = function (rowData) {
|
|
let delete_handler = {
|
|
handlerId: "delete_host",
|
|
onClick: () => {
|
|
show_delete_dialog(rowData);
|
|
},
|
|
};
|
|
|
|
let edit_handler = {
|
|
handlerId: "edit_rule",
|
|
onClick: () => {
|
|
load_selected_field(rowData);
|
|
},
|
|
}
|
|
|
|
return DataTableUtils.createActionButtons([
|
|
{ class: `pointer`, handler: edit_handler, icon: 'fa-edit', title: i18n('edit') },
|
|
{ class: `pointer`, handler: delete_handler, icon: 'fa-trash', title: i18n('delete') },
|
|
]);
|
|
};
|
|
|
|
const format_metric = function (data, rowData) {
|
|
let metric_label = data
|
|
|
|
if (rowData.metric_label) {
|
|
metric_label = rowData.metric_label;
|
|
} else {
|
|
if (rowData.rule_type != 'interface') {
|
|
metric_list.forEach((metric) => {
|
|
if (metric.id == data) {
|
|
if (rowData.extra_metric) {
|
|
if (rowData.extra_metric == metric.extra_metric)
|
|
metric_label = metric.label
|
|
} else {
|
|
metric_label = metric.label
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
interface_metric_list.forEach((metric) => {
|
|
if (metric.id == data) {
|
|
if (rowData.extra_metric) {
|
|
if (rowData.extra_metric == metric.extra_metric)
|
|
metric_label = metric.label
|
|
} else {
|
|
metric_label = metric.label
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
return metric_label
|
|
};
|
|
|
|
const format_frequency = function (data) {
|
|
let frequency_title = ''
|
|
frequency_list.forEach((frequency) => {
|
|
if (data == frequency.id)
|
|
frequency_title = frequency.title;
|
|
})
|
|
|
|
return frequency_title
|
|
};
|
|
|
|
const format_threshold = function (data, rowData) {
|
|
let formatted_data = parseInt(data);
|
|
let threshold_sign = "> ";
|
|
|
|
if ((rowData.threshold_sign) && (rowData.threshold_sign == '-1'))
|
|
threshold_sign = "< "
|
|
|
|
if ((rowData.metric_type) && (rowData.metric_type == 'throughput')) {
|
|
formatted_data = threshold_sign + NtopUtils.bitsToSize(data)
|
|
} else if ((rowData.metric_type) && (rowData.metric_type == 'volume')) {
|
|
formatted_data = threshold_sign + NtopUtils.bytesToSize(data);
|
|
} else if ((rowData.metric_type) && (rowData.metric_type.contains('percentage'))) {
|
|
if (data < 0) {
|
|
data = data * (-1);
|
|
}
|
|
formatted_data = threshold_sign + NtopUtils.fpercent(data);
|
|
} else if ((rowData.metric_type) && (rowData.metric_type == 'value')) {
|
|
if (data < 0) {
|
|
data = data * (-1);
|
|
}
|
|
formatted_data = threshold_sign + data;
|
|
}
|
|
|
|
return formatted_data
|
|
};
|
|
|
|
const format_last_measurement = function (data, rowData) {
|
|
let formatted_data = parseInt(data);
|
|
if (rowData.target == "*") {
|
|
return "";
|
|
}
|
|
|
|
if (data == null) {
|
|
return "";
|
|
}
|
|
if ((rowData.metric_type) && (rowData.metric_type == 'throughput')) {
|
|
formatted_data = NtopUtils.bitsToSize(data)
|
|
} else if ((rowData.metric_type) && (rowData.metric_type == 'volume')) {
|
|
formatted_data = NtopUtils.bytesToSize(data);
|
|
} else if ((rowData.metric_type) && (rowData.metric_type.includes('percentage'))) {
|
|
const sign_data = data < 0 ? -1 : 1;
|
|
const absolute_value = NtopUtils.fpercent(data * sign_data);
|
|
formatted_data = sign_data == -1 ? `<label title='${i18n("percentage_decrease")}'> (-) ${absolute_value} </label>` : `<label title='${i18n("percentage_increase")}'>${absolute_value}</label>`;
|
|
}
|
|
|
|
return formatted_data
|
|
};
|
|
|
|
const format_rule_type = function (data, rowData) {
|
|
let formatted_data = '';
|
|
if ((rowData.rule_type) && (rowData.rule_type == 'interface')) {
|
|
formatted_data = "<span class='badge bg-secondary'>" + _i18n("interface") + " <i class='fas fa-ethernet'></i></span>"
|
|
} else if ((rowData.rule_type) && (rowData.rule_type == 'Host')) {
|
|
formatted_data = "<span class='badge bg-secondary'>" + _i18n("about.host_checks_directory") + " <i class='fas fa-laptop'></i></span>"
|
|
} else if ((rowData.rule_type) && rowData.rule_type == 'host_pool') {
|
|
formatted_data = "<span class='badge bg-secondary'>" + _i18n("alert_entities.host_pool") + " <i class='fas fa-laptop'></i></span>"
|
|
|
|
} else if ((rowData.rule_type) && rowData.rule_type == 'CIDR') {
|
|
formatted_data = "<span class='badge bg-secondary'>" + _i18n("network") + " <i class='fas fa-laptop'></i></span>"
|
|
|
|
} else if ((rowData.rule_type) && (rowData.rule_type == 'exporter') && rowData.metric == "flowdev:traffic") {
|
|
formatted_data = "<span class='badge bg-secondary'>" + _i18n("flow_exporter_device") + " <i class='fas fa-laptop'></i></span>"
|
|
|
|
} else if ((rowData.rule_type) && (rowData.rule_type == 'exporter') && rowData.metric.includes("flowdev_port")) {
|
|
formatted_data = "<span class='badge bg-secondary'>" + _i18n("interface_flow_exporter_device") + " <i class='fas fa-ethernet'></i></span>"
|
|
} else if ((rowData.rule_type) && rowData.rule_type == 'vlan') {
|
|
formatted_data = "<span class='badge bg-secondary'>" + _i18n("vlan") + " <i class='fas fa-ethernet'></i></span>"
|
|
} else if ((rowData.rule_type) && rowData.rule_type == 'profiles') {
|
|
formatted_data = "<span class='badge bg-secondary'>" + _i18n("if_stats_config.target_profile") + " <i class='fas fa-ethernet'></i></span>"
|
|
}
|
|
else if ((rowData.rule_type) && rowData.rule_type == 'asn') {
|
|
formatted_data = "<span class='badge bg-secondary'>" + _i18n("if_stats_config.target_asn") + " <i class='fas fa-ethernet'></i></span>"
|
|
}
|
|
|
|
return formatted_data;
|
|
};
|
|
|
|
const format_target = function (data, rowData) {
|
|
let formatted_data = '';
|
|
if ((rowData.rule_type) && (rowData.rule_type == 'interface')) {
|
|
formatted_data = rowData.selected_iface;
|
|
} else if (rowData.rule_type && (rowData.rule_type == 'Host' || rowData.rule_type == 'CIDR')) {
|
|
formatted_data = rowData.target;
|
|
} else if (rowData.rule_type == 'host_pool') {
|
|
formatted_data = rowData.host_pool_label;
|
|
} else if (rowData.rule_type == 'vlan') {
|
|
formatted_data = rowData.vlan_label;
|
|
} else if (rowData.rule_type == 'profiles') {
|
|
formatted_data = rowData.target;
|
|
} else if (rowData.rule_type == 'asn') {
|
|
formatted_data = rowData.target + " (" + rowData.name + ")";
|
|
}else if (rowData.rule_type && rowData.rule_type == 'exporter' && rowData.metric == "flowdev:traffic") {
|
|
formatted_data = rowData.target;
|
|
} else {
|
|
let interface_label = rowData.flow_exp_ifid_name != "" && rowData.flow_exp_ifid_name != null ? rowData.flow_exp_ifid_name : rowData.flow_exp_ifid;
|
|
formatted_data = rowData.target + " " + _i18n("on_interface") + ": " + interface_label;
|
|
}
|
|
return formatted_data;
|
|
};
|
|
|
|
const get_metric_list = async function () {
|
|
isLoading.value = true;
|
|
const url = NtopUtils.buildURL(metric_url, rest_params)
|
|
metric_list = await ntopng_utility.http_request(url);
|
|
isLoading.value = false;
|
|
};
|
|
|
|
|
|
const get_host_pool_list = async function () {
|
|
isLoading.value = true;
|
|
const url = NtopUtils.buildURL(host_pool_url, rest_params)
|
|
|
|
let tmp_host_pool_list = await ntopng_utility.http_request(url);
|
|
|
|
tmp_host_pool_list.sort((a, b) => (a.label > b.label) ? 1 : ((b.label > a.label) ? -1 : 0));
|
|
host_pool_list = tmp_host_pool_list;
|
|
isLoading.value = false;
|
|
};
|
|
|
|
const get_network_list = async function () {
|
|
isLoading.value = true;
|
|
const url = NtopUtils.buildURL(network_list_url, rest_params)
|
|
|
|
let tmp_network_list = await ntopng_utility.http_request(url);
|
|
|
|
tmp_network_list.sort((a, b) => (a.label > b.label) ? 1 : ((b.label > a.label) ? -1 : 0));
|
|
network_list = tmp_network_list;
|
|
isLoading.value = false;
|
|
|
|
};
|
|
|
|
const get_interface_metric_list = async function () {
|
|
isLoading.value = true;
|
|
const url = NtopUtils.buildURL(metric_ifname_url, rest_params)
|
|
interface_metric_list = await ntopng_utility.http_request(url);
|
|
isLoading.value = false;
|
|
};
|
|
|
|
const get_host_pool_metric_list = async function () {
|
|
isLoading.value = true;
|
|
const url = NtopUtils.buildURL(metric_host_pool_url, rest_params)
|
|
|
|
let tmp_host_pool_metric_list = await ntopng_utility.http_request(url);
|
|
|
|
tmp_host_pool_metric_list.sort((a, b) => (a.label > b.label) ? 1 : ((b.label > a.label) ? -1 : 0));
|
|
host_pool_metric_list = tmp_host_pool_metric_list;
|
|
isLoading.value = false;
|
|
};
|
|
|
|
|
|
const get_network_metric_list = async function () {
|
|
isLoading.value = true;
|
|
const url = NtopUtils.buildURL(metric_network_url, rest_params)
|
|
|
|
let tmp_network_metric_list = await ntopng_utility.http_request(url);
|
|
|
|
tmp_network_metric_list.sort((a, b) => (a.label > b.label) ? 1 : ((b.label > a.label) ? -1 : 0));
|
|
network_metric_list = tmp_network_metric_list;
|
|
isLoading.value = false;
|
|
|
|
};
|
|
|
|
const get_vlan_metric_list = async function () {
|
|
isLoading.value = true;
|
|
const url = NtopUtils.buildURL(metric_vlan_url, rest_params)
|
|
|
|
let tmp_vlan_metric_list = await ntopng_utility.http_request(url);
|
|
|
|
tmp_vlan_metric_list.sort((a, b) => (a.label > b.label) ? 1 : ((b.label > a.label) ? -1 : 0));
|
|
vlan_metric_list = tmp_vlan_metric_list;
|
|
isLoading.value = false;
|
|
|
|
};
|
|
|
|
const get_profiles_metric_list = async function () {
|
|
isLoading.value = true;
|
|
const url = NtopUtils.buildURL(metric_profiles_url, rest_params)
|
|
|
|
let tmp_profiles_metric_list = await ntopng_utility.http_request(url);
|
|
|
|
profiles_metric_list = tmp_profiles_metric_list;
|
|
isLoading.value = false;
|
|
}
|
|
|
|
const get_asn_metric_list = async function () {
|
|
isLoading.value = true;
|
|
const url = NtopUtils.buildURL(metric_asn_url, rest_params)
|
|
let tmp_asn_metric_list = await ntopng_utility.http_request(url);
|
|
asn_metric_list = tmp_asn_metric_list;
|
|
isLoading.value = false;
|
|
}
|
|
|
|
const get_flow_exporter_devices_metric_list = async function () {
|
|
isLoading.value = true;
|
|
const url = NtopUtils.buildURL(metric_flow_exp_device_url, {
|
|
...rest_params
|
|
})
|
|
flow_exporter_metric_list = await ntopng_utility.http_request(url);
|
|
isLoading.value = false;
|
|
|
|
};
|
|
|
|
const get_flow_exporter_devices_list = async function () {
|
|
isLoading.value = true;
|
|
const url = NtopUtils.buildURL(flow_devices_url, {
|
|
...rest_params
|
|
})
|
|
flow_exporter_list = await ntopng_utility.http_request(url);
|
|
isLoading.value = false;
|
|
|
|
};
|
|
|
|
const get_ifid_list = async function () {
|
|
isLoading.value = true;
|
|
const url = NtopUtils.buildURL(ifid_url, rest_params)
|
|
ifid_list = await ntopng_utility.http_request(url);
|
|
isLoading.value = false;
|
|
};
|
|
|
|
const get_vlans = async function () {
|
|
isLoading.value = true;
|
|
const url = NtopUtils.buildURL(vlans_url, rest_params)
|
|
|
|
await $.get(url, function (rsp, status) {
|
|
vlan_list = JSON.parse(rsp).data;
|
|
isLoading.value = false;
|
|
});
|
|
};
|
|
|
|
const get_profiles = async function () {
|
|
isLoading.value = true;
|
|
const url = NtopUtils.buildURL(profiles_url, rest_params)
|
|
profiles_list = await ntopng_utility.http_request(url);
|
|
isLoading.value = false;
|
|
}
|
|
|
|
const get_asn = async function () {
|
|
isLoading.value = true;
|
|
const url = NtopUtils.buildURL(asn_url, rest_params)
|
|
asn_list = await ntopng_utility.http_request(url);
|
|
isLoading.value = false;
|
|
}
|
|
|
|
const start_datatable = function () {
|
|
const datatableButton = [];
|
|
|
|
/* Manage the buttons close to the search box */
|
|
datatableButton.push({
|
|
text: '<i class="fas fa-sync"></i>',
|
|
className: 'btn-link',
|
|
action: function () {
|
|
reload_table();
|
|
}
|
|
}, {
|
|
text: '<i class="fas fa-plus"></i>',
|
|
className: 'btn-link',
|
|
action: function () {
|
|
modal_add_host_rule.value.show();
|
|
}
|
|
});
|
|
|
|
const columns = [
|
|
{ columnName: _i18n("actions"), width: '5%', targets: 0, name: 'actions', className: 'text-center', orderable: false, responsivePriority: 0, render: function (_, type, rowData) { return add_action_column(rowData) } },
|
|
{ columnName: _i18n("id"), visible: false, targets: 1, name: 'id', data: 'id', className: 'text-nowrap', responsivePriority: 1 },
|
|
{ columnName: _i18n("if_stats_config.target"), targets: 2, width: '20', name: 'target', data: 'target', className: 'text-nowrap', responsivePriority: 1, render: function (data, _, rowData) { return format_target(data, rowData) } },
|
|
{ columnName: _i18n("if_stats_config.rule_type"), targets: 3, width: '20', name: 'rule_type', data: 'rule_type', className: 'text-center', responsivePriority: 1, render: function (data, _, rowData) { return format_rule_type(data, rowData) } },
|
|
{ columnName: _i18n("if_stats_config.metric"), targets: 4, width: '10', name: 'metric', data: 'metric', className: 'text-center', responsivePriority: 1, render: function (data, _, rowData) { return format_metric(data, rowData) } },
|
|
{ columnName: _i18n("if_stats_config.frequency"), targets: 5, width: '10', name: 'frequency', data: 'frequency', className: 'text-center', responsivePriority: 1, render: function (data) { return format_frequency(data) } },
|
|
{ columnName: _i18n("if_stats_config.last_measurement"), targets: 6, width: '10', name: 'last_measurement', data: 'last_measurement', className: 'text-center', responsivePriority: 1, render: function (data, _, rowData) { return format_last_measurement(data, rowData) } },
|
|
{ columnName: _i18n("if_stats_config.threshold"), targets: 7, width: '10', name: 'threshold', data: 'threshold', className: 'text-end', responsivePriority: 1, render: function (data, _, rowData) { return format_threshold(data, rowData) } },
|
|
{ columnName: _i18n("metric_type"), visible: false, targets: 8, name: 'metric_type', data: 'metric_type', className: 'text-nowrap', responsivePriority: 1 },
|
|
];
|
|
|
|
const hostRulesTableConfig = {
|
|
table_buttons: datatableButton,
|
|
data_url: NtopUtils.buildURL(data_url, rest_params),
|
|
enable_search: true,
|
|
columns_config: columns,
|
|
table_config: {
|
|
scrollX: false,
|
|
serverSide: false,
|
|
order: [[1 /* target */, 'desc']],
|
|
columnDefs: columns
|
|
}
|
|
};
|
|
|
|
traffic_rules_table_config = hostRulesTableConfig;
|
|
};
|
|
|
|
onBeforeMount(async () => {
|
|
start_datatable();
|
|
await get_metric_list();
|
|
await get_ifid_list();
|
|
await get_interface_metric_list();
|
|
await get_flow_exporter_devices_metric_list();
|
|
await get_flow_exporter_devices_list();
|
|
await get_host_pool_list();
|
|
await get_host_pool_metric_list();
|
|
await get_network_list();
|
|
await get_network_metric_list();
|
|
if (props.context.has_asn) {
|
|
await get_asn_metric_list();
|
|
await get_asn();
|
|
}
|
|
if (props.context.has_vlans) {
|
|
await get_vlans();
|
|
await get_vlan_metric_list();
|
|
}
|
|
if (props.context.has_profiles) {
|
|
await get_profiles();
|
|
await get_profiles_metric_list();
|
|
}
|
|
modal_add_host_rule.value.metricsLoaded(metric_list, ifid_list, interface_metric_list, flow_exporter_list, flow_exporter_metric_list, props.context.page_csrf, null, null, host_pool_list, network_list, host_pool_metric_list, network_metric_list, vlan_list, vlan_metric_list, profiles_list, profiles_metric_list, asn_list, asn_metric_list);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
destroy_table();
|
|
});
|
|
</script>
|