Skip to content

Commit

Permalink
Обработка фильтров, подстветка результатов
Browse files Browse the repository at this point in the history
  • Loading branch information
Boris committed Oct 17, 2024
1 parent 1daf604 commit 7cd2e73
Show file tree
Hide file tree
Showing 4 changed files with 356 additions and 126 deletions.
228 changes: 206 additions & 22 deletions front/search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@
body {
padding-top: 56px;
}
mark {
background-color: #f0ed26;
}
</style>

</head>
Expand Down Expand Up @@ -60,10 +63,11 @@
<input id="datetimepicker_end" type="text" class="form-control form-control-sm mx-sm-1">
</div>
<div class="col">
<button type="button" class="btn btn-primary btn-sm" id="search">Refresh</button>
<button type="button" class="btn btn-primary btn-sm" id="search">Search</button>
</div>
</div>
</form>
<div class="py-md-2"><a href="#" data-target='#modal_add_filter' data-toggle='modal'>Add filter</a><span class="mb-2 overflow-auto" style="max-height: 1024px;" id="filters"> </span></div>
<div class="d-flex align-items-center invisible" id="loading"><strong>Loading...</strong><div class="spinner-border ml-auto" role="status" aria-hidden="true"></div></div>
<span class="mb-0 overflow-auto" style="max-height: 1024px;" id="result"> </span>
</main><!-- /.main -->
Expand All @@ -72,29 +76,40 @@
</div><!-- /.container -->


<div class="modal fade" tabindex="-1" id="update_instance" role="dialog">
<div class="modal fade" tabindex="-1" id="modal_add_filter" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">X-tract indices from snapshot</h5>
<h5 class="modal-title" id="exampleModalLabel">Add filter</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form action="/api/" role="form" class="form-horizontal" method="POST" id="update_form">
<form action="#" role="form" class="form-horizontal" method="POST" id="add_filter_form">
<input type="hidden" class="form-control" id="add_filter_uuid">
<div class="modal-body">
<input type="hidden" name="action" value="restore">
<input type="hidden" name="snapshot" id="r_snapshot">
<input type="hidden" name="repo" id="r_repo">
<div class="form-row">
<div class="form-group col-md-9">
<label for="add_filter_fieldlist">Field</label>
<select id="add_filter_fieldlist" class="form-control">
<option selected>Select</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="add_filter_operation">Value</label>
<select id="add_filter_operation" class="form-control">
<option selected>Select</option>
</select>
</div>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Indices in snapshot</label>
<select multiple class="form-control" name="indices[]" id="indices">
</select>
<label for="add_filter_">Value</label>
<input type="text" class="form-control" id="add_filter_value" placeholder="Enter the value">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="restore" data-dismiss="modal">Restore</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="add_filter_save" data-dismiss="modal">Save</button>
</div>
</div>
</form>
Expand All @@ -103,6 +118,48 @@ <h5 class="modal-title" id="exampleModalLabel">X-tract indices from snapshot</h5
</div><!-- /.modal -->


<div class="modal fade" tabindex="-1" id="modal_update_filter" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add filter</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form action="#" role="form" class="form-horizontal" method="POST" id="update_filter_form">
<input type="hidden" class="form-control" id="update_filter_uuid">
<div class="modal-body">
<div class="form-row">
<div class="form-group col-md-9">
<label for="update_filter_fieldlist">Field</label>
<select id="update_filter_fieldlist" class="form-control">
<option selected>Select</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="update_filter_operation">Value</label>
<select id="update_filter_operation" class="form-control">
<option selected>Select</option>
</select>
</div>
</div>
<div class="form-group">
<label for="update_filter_value">Value</label>
<input type="text" class="form-control" id="update_filter_value" placeholder="Enter the value">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-warning" id="remove_filter" data-dismiss="modal">Remove</button>
<button type="button" class="btn btn-primary" id="update_filter" data-dismiss="modal">Save</button>
</div>
</div>
</form>
</div>

</div><!-- /.modal -->

</body>
<link rel="stylesheet" type="text/css" href="/assets/css/jquery.datetimepicker.min.css">
<script src="/assets/js/jquery-3.5.1.min.js"></script>
Expand All @@ -111,7 +168,9 @@ <h5 class="modal-title" id="exampleModalLabel">X-tract indices from snapshot</h5

<script>
const date = new Date();
var mapping = {}
var mapping = [];
var filter_operation = ["is", "is_not", "exists", "does_not_exists"]
var filters_set = {}
date.setMinutes(date.getMinutes() - 15)
$.datetimepicker.setLocale('ru');
$('#datetimepicker_start').datetimepicker({timepicker: true, format:'Y-m-d H:i:s', step: 15, value:date});
Expand Down Expand Up @@ -182,7 +241,7 @@ <h5 class="modal-title" id="exampleModalLabel">X-tract indices from snapshot</h5
var str = "";
for(var k in data) {
index = data[k].index;
$('#igs').append(new Option(index, index,true,true));
$('#igs').append(new Option(index, index,false,false));
}
$("#loading").addClass('invisible');
}
Expand All @@ -206,21 +265,137 @@ <h5 class="modal-title" id="exampleModalLabel">X-tract indices from snapshot</h5
contentType: 'application/json',
success: function (data) {
var str = "";
mapping = [];
for (var k in data) {
str += "<li class='list-group-item'><input type='checkbox' name='fields' data-type='" + data[k] + "' value='" + k + "'>&nbsp;"+ k + "(" + data[k] + ")" +"</li>";
str += "<li class='list-group-item' style='word-wrap: break-word !important; word-break: break-word;'><input type='checkbox' name='fields' data-type='" + data[k] + "' value='" + k + "'>"+ k + "&nbsp;&nbsp;(" + data[k] + ")" +"</li>";
mapping.push(k);
}
$("#fields").html(str);
$("#loading").addClass('invisible');
}
});
});

$('#modal_add_filter').on('shown.bs.modal',function(e){

$('#add_filter_fieldlist').find('option')
.remove()
.end();

$('#add_filter_operation').find('option')
.remove()
.end();

$('#add_filter_uuid').val((Math.random() + 1).toString(36).substring(7));

$('#add_filter_fieldlist').append(new Option("Select...", "",true,true));
for (k in mapping) {
optText = mapping[k];
optValue = mapping[k];
$('#add_filter_fieldlist').append(new Option(optText, optValue,false,false));
}

$('#add_filter_operation').append(new Option("Select...", "",true,true));
for (k in filter_operation) {
optText = filter_operation[k];
optValue = filter_operation[k];
$('#add_filter_operation').append(new Option(optText, optValue,false,false));
}

});

$("#add_filter_save").click(function(){
var str = $("#filters").html();
var btn_id = $("#add_filter_uuid").val()
if ($("#add_filter_operation").val()=="is") {
str += "<button type='button' id='" + $("#add_filter_uuid").val() + "' class='btn filter' data-target='#modal_update_filter' data-toggle='modal' data-uuid='" + $("#add_filter_uuid").val() + "' data-field='" + $("#add_filter_fieldlist").val() + "' data-oper='is' data-value='"+$("#add_filter_value").val()+"'>" + $("#add_filter_fieldlist").val() + ":" + $("#add_filter_value").val() + "</button>";
} else if ($("#add_filter_operation").val()=="is_not") {
str += "<button type='button' id='" + $("#add_filter_uuid").val() + "' class='btn filter' data-target='#modal_update_filter' data-toggle='modal' data-uuid='" + $("#add_filter_uuid").val() + "' data-field='" + $("#add_filter_fieldlist").val() + "' data-oper='is_not' data-value='"+$("#add_filter_value").val()+"'> NOT " + $("#add_filter_fieldlist").val() + ":" + $("#add_filter_value").val() + "</button>";
} else if ($("#add_filter_operation").val()=="exists") {
str += "<button type='button' id='" + $("#add_filter_uuid").val() + "' class='btn filter' data-target='#modal_update_filter' data-toggle='modal' data-uuid='" + $("#add_filter_uuid").val() + "' data-field='" + $("#add_filter_fieldlist").val() + "' data-oper='exists' data-value=''>" + $("#add_filter_fieldlist").val() + ": exists</button>";
} else if ($("#add_filter_operation").val()=="does_not_exists") {
str += "<button type='button' id='" + $("#add_filter_uuid").val() + "' class='btn filter' data-target='#modal_update_filter' data-toggle='modal' data-uuid='" + $("#add_filter_uuid").val() + "' data-field='" + $("#add_filter_fieldlist").val() + "' data-oper='does_not_exists' data-value=''>" + $("#add_filter_fieldlist").val() + ": not exists</button>";
}
$("#filters").html(str);
filters_set[btn_id] = {"field":$("#add_filter_fieldlist").val(), "operation": $("#add_filter_operation").val(), "value": $("#add_filter_value").val()};
event.preventDefault();
});

$("#update_filter").click(function(){
var btn_id = $("#update_filter_uuid").val()
if ($("#update_filter_operation").val()=="is") {
$("#"+btn_id).html($("#update_filter_fieldlist").val() + ":" + $("#update_filter_value").val())
$("#"+btn_id).attr("data-value", $("#update_filter_value").val())
$("#"+btn_id).attr("data-field", $("#update_filter_fieldlist").val())
$("#"+btn_id).attr("data-oper", "is")
} else if ($("#update_filter_operation").val()=="is_not") {
$("#"+btn_id).html($("#update_filter_fieldlist").val() + ": not " + $("#update_filter_value").val())
$("#"+btn_id).attr("data-value", $("#update_filter_value").val())
$("#"+btn_id).attr("data-field", $("#update_filter_fieldlist").val())
$("#"+btn_id).attr("data-oper", "is_not")
} else if ($("#update_filter_operation").val()=="exists") {
$("#"+btn_id).html($("#update_filter_fieldlist").val() + ": exists")
$("#"+btn_id).attr("data-field", $("#update_filter_fieldlist").val())
$("#"+btn_id).attr("data-value", "")
$("#"+btn_id).attr("data-oper", "exists")
} else if ($("#update_filter_operation").val()=="does_not_exists") {
$("#"+btn_id).html($("#update_filter_fieldlist").val() + ": does_not_exists")
$("#"+btn_id).attr("data-field", $("#update_filter_fieldlist").val())
$("#"+btn_id).attr("data-value", "")
$("#"+btn_id).attr("data-oper", "does_not_exists")
}

filters_set[btn_id] = {"field":$("#update_filter_fieldlist").val(), "operation": $("#update_filter_operation").val(), "value": $("#update_filter_value").val()};
event.preventDefault();
});

$("#remove_filter").click(function(e){
var btn_id = $("#update_filter_uuid").val()
$("#"+btn_id).remove()
delete filters_set[btn_id]
});

$("#filters").on("click", "button.filter", function(e){
filter_btn = $(e.target)
$('#update_filter_uuid').val(filter_btn.attr("data-uuid"))
$('#update_filter_value').val(filter_btn.attr("data-value"))

$('#update_filter_fieldlist').find('option')
.remove()
.end();

$('#update_filter_operation').find('option')
.remove()
.end();

for (k in mapping) {
optText = mapping[k];
optValue = mapping[k];
if (optValue==filter_btn.attr("data-field")) {
$('#update_filter_fieldlist').append(new Option(optText, optValue,true,true));
} else {
$('#update_filter_fieldlist').append(new Option(optText, optValue,false,false));
}
}

for (k in filter_operation) {
optText = filter_operation[k];
optValue = filter_operation[k];
if (optValue==filter_btn.attr("data-oper")) {
$('#update_filter_operation').append(new Option(optText, optValue,true,true));
} else {
$('#update_filter_operation').append(new Option(optText, optValue,false,false));
}
}
});


$("#search").click(function(){
$("#loading").removeClass('invisible');
$("#result").html("");
fields = []
tf = []
xql = $('#xql').val()
$("input[name='fields']").each(function() {
if (this.dataset.type=="date") {
tf.push(this.value)
Expand All @@ -235,9 +410,10 @@ <h5 class="modal-title" id="exampleModalLabel">X-tract indices from snapshot</h5
"values" : {
"index": $('#igs').val(),
"fields": fields,
"filters": filters_set,
"timefields": tf,
"cluster": $('#cluster').val(),
"xql": $('#xql').val(),
"xql": xql,
"date_start":$('#datetimepicker_start').val(),
"date_end":$('#datetimepicker_end').val(),
}
Expand Down Expand Up @@ -268,19 +444,24 @@ <h5 class="modal-title" id="exampleModalLabel">X-tract indices from snapshot</h5
}
}
str+="</tr></thead><tbody>";
term = xql.replace(new RegExp(" ", "gi"), (match) => `|`);
for (var k in res) {
str += "<tr>";
if ( fields.length == 0 ) {
r = JSON.stringify(res[k]._source)
s = r.replace(new RegExp(term, "gi"), (match) => `<mark>${match}</mark>`);
str += "<td>"+ res[k]._source[tf[0]] +"</td>";
str += "<td>"+ JSON.stringify(res[k]._source); +"</td>";
str += "<td style='word-wrap: break-word !important; word-break: break-word;'>"+ s +"</td>";
} else {
str += "<td>"+ res[k].fields[tf[0]] +"</td>";
for (var f in res[k].fields) {
if (f==tf[0]) {
continue;
} else {
str+="<td>" + res[k].fields[f]+"</td>";
}
if (f==tf[0]) {
continue;
} else {
r = res[k].fields[f].toString();
s = r.replace(new RegExp(term, "gi"), (match) => `<mark>${match}</mark>`);
str += "<td>" + s + "</td>";
}
}
}
str+="</tr>";
Expand All @@ -299,6 +480,9 @@ <h5 class="modal-title" id="exampleModalLabel">X-tract indices from snapshot</h5
//event.preventDefault();
});

$('#add_filter').on('hidden.bs.modal',function(){
$('#add_filter_form').trigger('reset');
});
</script>

</html>
Loading

0 comments on commit 7cd2e73

Please sign in to comment.