mirror of
https://github.com/ntop/ntopng.git
synced 2026-05-05 02:16:39 +00:00
277 lines
7 KiB
Vue
277 lines
7 KiB
Vue
<!-- (C) 2022 - ntop.org -->
|
|
<template>
|
|
<modal @showed="showed()" ref="modal_id">
|
|
<template v-slot:title>{{title}}</template>
|
|
<template v-slot:body>
|
|
<div class="container-fluid">
|
|
|
|
<!-- Repeater Type -->
|
|
<div class="row form-group mb-3">
|
|
<div class="col col-md-6">
|
|
<label class="form-label">
|
|
<b>{{_i18n("nedge.page_repeater_config.modal_repeater_config.repeater_type")}}</b>
|
|
</label>
|
|
<SelectSearch v-model:selected_option="selected_repeater_type"
|
|
@select_option="change_repeater_type()"
|
|
:options="repeater_type_array">
|
|
</SelectSearch>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- IP -->
|
|
<div class="row form-group mb-3">
|
|
|
|
<div class="col col-md-6">
|
|
|
|
<div v-if="selected_repeater_type.value == 'custom'" >
|
|
<label class="col-form-label col-sm-10" >
|
|
<b>{{_i18n("nedge.page_repeater_config.ip")}}</b>
|
|
</label>
|
|
<input v-model="ip" @input="check_empty_host" class="form-control" type="text" :placeholder="host_placeholder" required>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Port -->
|
|
<div class="row form-group mb-3">
|
|
|
|
<div class="col col-md-6">
|
|
|
|
<div v-if="selected_repeater_type.value == 'custom'" >
|
|
<label class="col-form-label col-sm-10" >
|
|
<b>{{_i18n("nedge.page_repeater_config.port")}}</b>
|
|
</label>
|
|
<input v-model="port" @input="check_empty_port" class="form-control" type="text" :placeholder="port_placeholder" required>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row form-group mb-3">
|
|
|
|
<div class="col col-md-6">
|
|
<label class="col-form-label col-sm-10" >
|
|
<b>{{_i18n("nedge.page_repeater_config.interfaces")}}</b>
|
|
</label>
|
|
<SelectSearch ref="interfaces_search"
|
|
:options="interface_array"
|
|
:multiple="true"
|
|
@select_option="update_interfaces_selected"
|
|
@unselect_option="remove_interfaces_selected"
|
|
@change_selected_options="all_criteria">
|
|
</SelectSearch>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
<template v-slot:footer>
|
|
<button type="button" :disabled="invalid_iface_number || disable_add && repeater_type == 'custom'" @click="apply" class="btn btn-primary">{{button_text}}</button>
|
|
</template>
|
|
</modal>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, computed, watch } from "vue";
|
|
import { ntopng_utility } from "../services/context/ntopng_globals_services.js";
|
|
import { default as modal } from "./modal.vue";
|
|
import { default as SelectSearch } from "./select-search.vue";
|
|
import regexValidation from "../utilities/regex-validation.js";
|
|
|
|
const _i18n = (t) => i18n(t);
|
|
const host_placeholder = i18n('if_stats_config.multicast_ip_placeholder')
|
|
const port_placeholder = i18n('if_stats_config.port_placeholder')
|
|
const modal_id = ref(null);
|
|
const ip = ref(null);
|
|
const port = ref(null);
|
|
const repeater_type = ref({value: "mdns", label: "MDNS" });
|
|
const emit = defineEmits(['edit', 'add'])
|
|
const interfaces_search = ref(null);
|
|
|
|
const showed = () => {};
|
|
|
|
const props = defineProps({});
|
|
|
|
const check_empty_host = () => {
|
|
let regex = new RegExp(regexValidation.get_data_pattern('ip'));
|
|
disable_add.value = !(regex.test(ip.value) || ip.value === '*');
|
|
}
|
|
|
|
|
|
|
|
const check_empty_port = () => {
|
|
disable_add.value = (port < 1 || port > 65535);
|
|
}
|
|
|
|
|
|
|
|
const title = ref("");
|
|
|
|
const repeater_type_array = [
|
|
{ label: _i18n("nedge.page_repeater_config.modal_repeater_config.mdns"), value: "mdns", default: true },
|
|
{ label: _i18n("nedge.page_repeater_config.modal_repeater_config.custom"), value: "custom" },
|
|
];
|
|
|
|
const repeater_id = ref(0);
|
|
const disable_add = ref(true)
|
|
const invalid_iface_number = ref(true)
|
|
|
|
const selected_repeater_type = ref({});
|
|
|
|
|
|
const interface_list_url = `${http_prefix}/lua/rest/v2/get/nedge/interfaces.lua`;
|
|
let interface_list;
|
|
const interface_array = ref([]);
|
|
|
|
const selected_dest_interface = ref([]);
|
|
|
|
const button_text = ref("");
|
|
|
|
const all_criteria = (item) => {
|
|
selected_dest_interface.value = item;
|
|
invalid_iface_number.value = item.length < 2;
|
|
}
|
|
|
|
const update_interfaces_selected = (item) => {
|
|
|
|
}
|
|
|
|
const remove_interfaces_selected = (item) => {
|
|
|
|
}
|
|
|
|
const show = (row ) => {
|
|
init(row);
|
|
modal_id.value.show();
|
|
};
|
|
|
|
const is_open_in_add = ref(true);
|
|
|
|
function init(row) {
|
|
is_open_in_add.value = row == null;
|
|
|
|
// check if we need open in edit
|
|
if (is_open_in_add.value == false) {
|
|
title.value = _i18n("nedge.page_rules_config.modal_rule_config.title_edit");
|
|
button_text.value = _i18n("edit");
|
|
repeater_id.value = row.repeater_id;
|
|
repeater_type_array.forEach((s) => {
|
|
if(s.label == row.type)
|
|
selected_repeater_type.value = s;
|
|
})
|
|
|
|
if (selected_repeater_type.value.value == 'custom') {
|
|
ip.value = row.ip;
|
|
port.value = row.port;
|
|
}
|
|
|
|
change_repeater_type(row)
|
|
|
|
} else {
|
|
title.value = _i18n("nedge.page_rules_config.modal_rule_config.title_add");
|
|
button_text.value = _i18n("add");
|
|
let default_type = repeater_type_array.find((s) => s.default == true);
|
|
}
|
|
|
|
if (is_open_in_add.value == false) {
|
|
const row_interfaces = row.interfaces.split(",");
|
|
let selected_interfaces = []
|
|
interface_array.value.forEach(function(el) {
|
|
el.selected = false;
|
|
if(row_interfaces.find(element => element == el.value)) {
|
|
el.selected = true;
|
|
}
|
|
|
|
selected_interfaces.push(el);
|
|
})
|
|
interfaces_search.value.update_multiple_values(selected_interfaces);
|
|
}
|
|
}
|
|
|
|
async function change_repeater_type(type) {
|
|
repeater_type.value = selected_repeater_type.value;
|
|
if (repeater_type.value.value == "custom") {
|
|
await set_interface_array();
|
|
}
|
|
}
|
|
|
|
|
|
|
|
let is_set_interface_array = false;
|
|
async function set_interface_array() {
|
|
if (is_set_interface_array == true) { return; }
|
|
if (interface_list == null) {
|
|
interface_list = ntopng_utility.http_request(interface_list_url);
|
|
}
|
|
let res_interface_list = await interface_list;
|
|
interface_array.value = res_interface_list.filter(i => i.role == "lan").map((i) => {
|
|
return {
|
|
label: i.label,
|
|
value: i.ifname,
|
|
};
|
|
});
|
|
is_set_interface_array = true;
|
|
}
|
|
|
|
|
|
const apply = () => {
|
|
let repeater_t = repeater_type.value.label;
|
|
|
|
let obj = {
|
|
repeater_type: repeater_t,
|
|
};
|
|
if (repeater_type.value.value == "custom") {
|
|
let ip_t = ip.value;
|
|
let port_t = port.value;
|
|
obj = {
|
|
repeater_type: repeater_t,
|
|
ip: ip_t,
|
|
port: port_t
|
|
};
|
|
}
|
|
let event = "add";
|
|
if (is_open_in_add.value == false) {
|
|
obj.repeater_id = repeater_id.value;
|
|
event = "edit";
|
|
}
|
|
|
|
let interfaces = "";
|
|
let details = "";
|
|
|
|
selected_dest_interface.value.forEach((i) => {
|
|
interfaces +=i.value+",";
|
|
|
|
if(i.value != i.label && !i.label.includes(i.value))
|
|
details += i.label+" ("+i.value+")"+",";
|
|
else
|
|
details += i.label+",";
|
|
});
|
|
obj.interfaces = interfaces;
|
|
obj.interface_details = details;
|
|
emit(event, obj);
|
|
close();
|
|
};
|
|
|
|
const close = () => {
|
|
modal_id.value.close();
|
|
};
|
|
|
|
|
|
defineExpose({ show, close });
|
|
|
|
onMounted(async () => {
|
|
await set_interface_array();
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
input:invalid {
|
|
border-color: #ff0000;
|
|
}
|
|
</style>
|