mirror of
https://github.com/ntop/ntopng.git
synced 2026-04-29 15:39:33 +00:00
231 lines
7.6 KiB
Vue
231 lines
7.6 KiB
Vue
<!--
|
|
(C) 2013-22 - ntop.org
|
|
-->
|
|
|
|
<template>
|
|
<div class="mb-2">
|
|
|
|
<h2>{{ _i18n("nedge.rules_config_title") }}</h2>
|
|
<br />
|
|
<h5 class="d-inline-block">{{_i18n("nedge.page_rules_config.default policy")}}
|
|
<span v-if="default_policy?.value == 'accept'" style="color:green;">
|
|
{{ default_policy?.label }}
|
|
</span>
|
|
<span v-if="default_policy?.value == 'deny'" style="color:red;">
|
|
{{ default_policy?.label }}
|
|
</span>
|
|
|
|
<small><a href="javascript:void(0)" style="margin-left: 0.5rem;" @click="show_modal_change_policy"><i class="fas fa-cog"></i></a></small>
|
|
</h5>
|
|
</div>
|
|
|
|
<div id="aggregated_live_flows">
|
|
<Datatable ref="table_rules"
|
|
:table_buttons="table_config.table_buttons"
|
|
:columns_config="table_config.columns_config"
|
|
:data_url="table_config.data_url"
|
|
:filter_buttons="table_config.table_filters"
|
|
:enable_search="table_config.enable_search"
|
|
:table_config="table_config.table_config">
|
|
</Datatable>
|
|
</div>
|
|
<ModalAddRuleConfig ref="modal_add_rule_config" @add="add_rule" @edit="edit_rule"></ModalAddRuleConfig>
|
|
<ModalChangeDefaultPolicy ref="modal_change_default_policy" @apply="set_default_policy" ></ModalChangeDefaultPolicy>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, onBeforeMount } from "vue";
|
|
import NtopUtils from "../utilities/ntop-utils";
|
|
import { default as Datatable } from "./datatable.vue";
|
|
import { default as ModalAddRuleConfig } from "./modal-nedge-add-rule-config.vue";
|
|
import { default as ModalChangeDefaultPolicy } from "./modal-nedge-change-default-policy.vue";
|
|
import { ntopng_utility, ntopng_url_manager, ntopng_status_manager } from "../services/context/ntopng_globals_services.js";
|
|
|
|
const _i18n = (t) => i18n(t);
|
|
|
|
const timeout_delete = 1 * 500;
|
|
|
|
const props = defineProps({
|
|
url: String,
|
|
ifid: Number,
|
|
csrf: String,
|
|
columns_config: Array
|
|
});
|
|
|
|
const table_config = ref({});
|
|
const table_rules = ref(null);
|
|
const modal_add_rule_config = ref(null);
|
|
const modal_change_default_policy = ref(null);
|
|
const default_policy = ref({});
|
|
|
|
onBeforeMount(async () => {
|
|
set_datatable_config();
|
|
load_default_policy();
|
|
});
|
|
|
|
function edit_rule(rule) {
|
|
const edit_url = `${http_prefix}/lua/rest/v2/edit/nedge/policy/rule.lua`;
|
|
set_rule(rule, edit_url);
|
|
}
|
|
|
|
function add_rule(rule) {
|
|
const add_url = `${http_prefix}/lua/rest/v2/add/nedge/policy/rule.lua`;
|
|
set_rule(rule, add_url);
|
|
}
|
|
|
|
async function load_default_policy(policy) {
|
|
if (policy == null) {
|
|
const get_policy_url = `${http_prefix}/lua/rest/v2/get/nedge/policy/default.lua`;
|
|
let policy_res = await ntopng_utility.http_request(get_policy_url);
|
|
policy = policy_res.default_policy;
|
|
}
|
|
if (policy == "accept") {
|
|
default_policy.value = {
|
|
value: policy,
|
|
label: _i18n("nedge.page_rules_config.accept"),
|
|
};
|
|
} else {
|
|
default_policy.value = {
|
|
value: policy,
|
|
label: _i18n("nedge.page_rules_config.deny"),
|
|
};
|
|
}
|
|
}
|
|
|
|
async function set_default_policy(policy) {
|
|
const set_policy_url = `${http_prefix}/lua/rest/v2/set/nedge/policy/default.lua`;
|
|
let headers = {
|
|
'Content-Type': 'application/json'
|
|
};
|
|
let body = JSON.stringify({ default_policy: policy, csrf: props.csrf});
|
|
let res = await ntopng_utility.http_request(set_policy_url, { method: "post", headers, body});
|
|
load_default_policy(policy);
|
|
refresh_table();
|
|
}
|
|
|
|
function set_rule(rule, url) {
|
|
let headers = {
|
|
'Content-Type': 'application/json'
|
|
};
|
|
let body = JSON.stringify({ ...rule, csrf: props.csrf});
|
|
|
|
ntopng_utility.http_request(url, { method: "post", headers, body});
|
|
refresh_table();
|
|
}
|
|
|
|
function show_modal_change_policy() {
|
|
modal_change_default_policy.value.show(default_policy.value);
|
|
}
|
|
|
|
function set_datatable_config() {
|
|
const datatableButton = [];
|
|
|
|
let params = {
|
|
ifid: ntopng_url_manager.get_url_entry("ifid") || props.ifid,
|
|
};
|
|
let url_params = ntopng_url_manager.obj_to_url_params(params);
|
|
|
|
datatableButton.push({
|
|
text: '<i class="fas fa-sync"></i>',
|
|
className: 'btn-link',
|
|
action: function (e, dt, node, config) {
|
|
refresh_table();
|
|
// table_rules.value.reload();
|
|
}
|
|
}, {
|
|
text: '<i class="fas fa-plus"></i>',
|
|
className: 'btn-link',
|
|
action: function () {
|
|
modal_add_rule_config.value.show(null, default_policy.value);
|
|
}
|
|
});
|
|
|
|
let defaultDatatableConfig = {
|
|
table_buttons: datatableButton,
|
|
data_url: `${props.url}?${url_params}`,
|
|
enable_search: false,
|
|
};
|
|
|
|
let columns = [
|
|
{
|
|
columnName: _i18n("nedge.page_rules_config.rule_id"), targets: 0, name: 'rule_id', data: 'rule_id', className: 'text-nowrap text-center', responsivePriority: 1
|
|
}, {
|
|
columnName: _i18n("nedge.page_rules_config.source"), targets: 0, name: 'source', data: 'source', className: 'text-nowrap text-center', responsivePriority: 1, render: function(value, type, rowData) {
|
|
if (value.label != null && value.label != "") {
|
|
return value.label;
|
|
}
|
|
return value.value;
|
|
}
|
|
}, {
|
|
columnName: _i18n("nedge.page_rules_config.dest"), targets: 0, name: 'dest', data: 'destination', className: 'text-nowrap text-center', responsivePriority: 1, render: function(value, type, rowData) {
|
|
if (value.label != null && value.label != "") {
|
|
return value.label;
|
|
}
|
|
return value.value;
|
|
}
|
|
}, {
|
|
columnName: _i18n("nedge.page_rules_config.direction"), targets: 0, name: 'bidirectional', data: 'bidirectional', className: 'text-nowrap text-center', responsivePriority: 1, render: function(value, type, rowData) {
|
|
if (value == true) {
|
|
return _i18n("nedge.page_rules_config.bidirectional");
|
|
}
|
|
return _i18n("nedge.page_rules_config.source_to_dest");
|
|
}
|
|
}, {
|
|
columnName: _i18n("nedge.page_rules_config.action"), targets: 0, name: 'action', data: 'action', className: 'text-nowrap text-center', responsivePriority: 1, render: function(value, type, rowData) {
|
|
let color = "red";
|
|
let name = _i18n(`nedge.page_rules_config.deny`);
|
|
if (value == "accept") {
|
|
color = "green";
|
|
name = _i18n(`nedge.page_rules_config.accept`);
|
|
}
|
|
return `<span style="color:${color};">${name}</span>`;
|
|
}
|
|
}
|
|
];
|
|
let wrap_columns_config = columns.map((c) => c);
|
|
// let wrap_columns_config = props.columns_config.map((c) => c);
|
|
wrap_columns_config.push({ columnName: _i18n("actions"), width: '5%', name: 'actions', className: 'text-center', orderable: false, responsivePriority: 0, render: function (_, type, rowData) { return add_action_column(rowData) } });
|
|
|
|
defaultDatatableConfig.columns_config = wrap_columns_config;
|
|
table_config.value = defaultDatatableConfig;
|
|
}
|
|
|
|
const add_action_column = function (rowData) {
|
|
let delete_handler = {
|
|
handlerId: "delete_host",
|
|
onClick: () => {
|
|
delete_rule(rowData);
|
|
},
|
|
};
|
|
|
|
let edit_handler = {
|
|
handlerId: "edit_rule",
|
|
onClick: () => {
|
|
modal_add_rule_config.value.show(rowData);
|
|
},
|
|
}
|
|
|
|
return DataTableUtils.createActionButtons([
|
|
{ class: `btn-secondary`, handler: edit_handler, handlerId: "edit_rule", icon: 'fa-edit', title: i18n('edit') },
|
|
{ class: `btn-danger`, handler: delete_handler, handlerId: "delete_rule", icon: 'fa-trash', title: i18n('delete') },
|
|
]);
|
|
};
|
|
|
|
async function delete_rule(rule) {
|
|
const add_url = `${http_prefix}/lua/rest/v2/delete/nedge/policy/rule.lua`;
|
|
let headers = {
|
|
'Content-Type': 'application/json'
|
|
};
|
|
let body = JSON.stringify({ rule_id: rule.rule_id, csrf: props.csrf});
|
|
|
|
ntopng_utility.http_request(add_url, { method: "post", headers, body});
|
|
refresh_table();
|
|
}
|
|
|
|
function refresh_table() {
|
|
setTimeout(() => {
|
|
ntopng_url_manager.reload_url();
|
|
// table_rules.value.reload();
|
|
}, timeout_delete);
|
|
}
|
|
</script>
|