vrr/ntopng
2
0
Fork 0
mirror of https://github.com/ntop/ntopng.git synced 2026-05-06 03:34:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix select-search; fix Time selection is not updated after zoom #6904

Browse source
This commit is contained in:
uccidibuti 2022-10-03 13:10:04 +02:00
parent a3ee7fd8d9
commit 18226fb77b
3 changed files with 104 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

12
http_src/vue/data-time-range-picker.vue
View file

@ -5,7 +5,7 @@
<div class="controls d-flex flex-wrap">
<div class="btn-group me-auto btn-group-sm">
<slot name="begin"></slot>
<select-search v-model:selected_option="selected_time_preset"
<select-search v-model:selected_option="selected_time_option"
:id="'time_preset_range_picker'"
:options="time_preset_list"
@select_option="change_select_time">
@ -159,7 +159,8 @@ export default {
const now = this.get_utc_seconds(Date.now());
const end_utc_s = this.get_utc_seconds(end_utc);
const begin_utc_s = this.get_utc_seconds(begin_utc);
if (this.is_between(end_utc_s, now, tolerance)) {
if (this.is_between(begin_utc_s, now - s_values.min_5, tolerance)) {
this.select_time_value = "min_5";
@ -185,8 +186,8 @@ export default {
this.time_preset_list.forEach(element => {
element.currently_active = false
if(element.value == this.select_time_value) {
this.selected_time_preset = element
element.currently_active = true
this.selected_time_option = element;
element.currently_active = true;
}
});
},
@ -326,7 +327,8 @@ export default {
//status_id: "data-time-range-picker" + this.$props.id,
epoch_status: null,
enable_apply: false,
select_time_value: "min_5",
select_time_value: "min_5",
selected_time_option: null,
wrong_date: false,
flat_begin_date: null,
flat_end_date: null,

2
http_src/vue/page-stats.vue
View file

@ -128,7 +128,7 @@ const current_groups_options_mode = ref(init_groups_option_mode());
let last_timeseries_groups_loaded = null;
const custom_metric = { value: "custom", label: i18n('page_stats.custom_metrics'), currently_active: false }
const custom_metric = { label: i18n('page_stats.custom_metrics'), currently_active: false }
const page_snapshots = "timeseries";

119
http_src/vue/select-search.vue
View file

@ -1,10 +1,10 @@
<template>
<select class="select2 form-select" ref="select2" required name="filter_type" >
<option v-for="(item, i) in options_2" :selected="selected_option.label == item.label" :value="item">
<option v-for="(item, i) in options_2" :selected="item.value == selected_option_2.value" :value="item.value">
{{item.label}}
</option>
<optgroup v-for="(item, i) in groups_options_2" :label="item.group">
<option v-for="(opt, j) in item.options" :selected="selected_option.label == opt.label" :value="opt">
<option v-for="(opt, j) in item.options" :selected="item.value == selected_option_2.value" :value="opt.value">
{{opt.label}}
</option>
</optgroup>
@ -22,6 +22,7 @@ const emit = defineEmits(['update:selected_option', 'select_option']);
const options_2 = ref([]);
const groups_options_2 = ref([]);
const selected_option_2 = ref({});
const props = defineProps({
id: String,
@ -30,52 +31,119 @@ const props = defineProps({
disable_change: Boolean,
});
function get_props_selected_option() {
if (props.selected_option == null) {
return props.options[0];
}
return props.selected_option;
}
function set_selected_option(selected_option) {
if (selected_option == null) {
selected_option = get_props_selected_option();
}
selected_option_2.value = selected_option;
if (selected_option_2.value.value == null) {
selected_option_2.value.value = selected_option.label;
}
}
watch(() => props.selected_option, (cur_value, old_value) => {
// if (first_time_render == true) { return; }
console.log(`select-search: selected_options: ${cur_value.label}`);
// selected2_option.value = cur_value;
});
set_selected_option(cur_value);
let select2Div = select2.value;
let value = get_value_from_selected_option(cur_value);
// let option = find_option_from_value(value);
// if (option != null) {
console.log(`select-search update value with trigger ${value}`);
$(select2Div).val(value)
$(select2Div).trigger("change");
// }
}, { flush: 'pre'});
function get_value_from_selected_option(selected_option) {
if (selected_option == null) {
selected_option = get_props_selected_option();
}
let value;
if (selected_option.value) {
value = selected_option.value;
} else {
value = selected_option.label;
}
return value;
}
function find_option_from_value(value) {
if (value == null) {
value = get_value_from_selected_option();
}
let option = options_2.value.find((o) => o.value == value);
if (option != null) { return option; }
for (let i = 0; i < groups_options_2.value.length; i += 1) {
let g = groups_options_2.value[i];
option = g.options.find((o) => o.value == value);
if (option != null) {
return option;
}
}
return null;
}
let first_time_render = true;
let is_mounted = false;
watch(() => props.options, (current_value, old_value) => {
if (props.disable_change == true || is_mounted == false) { return; }
console.log(`Watch select-search: ${props.id}, ${JSON.stringify(props.selected_option)}`);
// setTimeout(() => render(), 100);
render();
}, { flush: 'post'});
watch(() => props.options, (current_value, old_value) => {
if (props.disable_change == true) { return; }
console.log(`select-search:watch-post ${props.id}, ${JSON.stringify(props.selected_option)}`);
set_input();
}, { flush: 'pre'});
onMounted(() => {
console.log("select-search:mounted");
if (!props.disable_change) {
render();
if (!props.disable_change || !first_time_render) {
set_input();
}
is_mounted = true;
});
function set_options() {
options_2.value = [];
groups_options_2.value = [];
if (props.options == null) { return; }
let groups_dict = {};
props.options.forEach((option) => {
let opt_2 = { ...option };
if (opt_2.value == null) {
opt_2.value = opt_2.label;
}
if (option.group == null) {
options_2.value.push(option);
options_2.value.push(opt_2);
} else {
if (groups_dict[option.group] == null) {
groups_dict[option.group] = { group: option.group, options: [] };
groups_dict[option.group] = { group: opt_2.group, options: [] };
}
groups_dict[option.group].options.push(option);
}
groups_dict[option.group].options.push(opt_2);
}
});
groups_options_2.value = ntopng_utility.object_to_array(groups_dict);
}
watch([options_2, groups_options_2], (cur_value, old_value) => {
console.log(`select-search:watchEffect`);
render();
}, { flush: 'post'});
function set_input() {
set_options();
set_selected_option();
}
const render = () => {
console.log(`select-search:render ${JSON.stringify(props.selected_option)}`);
set_options();
let select2Div = select2.value;
if (first_time_render == false) {
destroy();
@ -86,19 +154,23 @@ const render = () => {
height: '500px',
theme: 'bootstrap-5',
dropdownParent: $(select2Div).parent(),
dropdownAutoWidth : true
dropdownAutoWidth : true
});
$(select2Div).on('select2:select', function (e) {
let data = e.params.data;
let value = data.element._value;
let option = find_option_from_value(value);
if (value != props.selected_option) {
console.log(`UPDATE SELECT_SEARCH \n${JSON.stringify(value)} ${JSON.stringify(props.selected_option)}`);
emit('update:selected_option', value);
emit('select_option', value);
console.log(`select-search: UPDATE \n${JSON.stringify(value)} ${JSON.stringify(props.selected_option)}`);
// emit('update:selected_option', value);
// emit('select_option', value);
emit('update:selected_option', option);
emit('select_option', option);
}
});
}
first_time_render = false;
console.log(`select-search render: set value ${selected_option_2.value.value}`);
// this.$forceUpdate();
// $(select2Div).val(props.selected_option);
};
@ -117,6 +189,7 @@ function destroy() {
}
onBeforeUnmount(() => {
console.log("select-search: unmount");
destroy();
});