fix: issues with the logs where clause filter (#6198)

* fix: flicker in logs explorer page

* fix: added inline code comments

* fix: edit rules css should be scoped inside the container

* fix: add explicit space after adding key and operators to help users type and create the tag

* fix: do not wait for api to complete for the user to enter the query

---------

Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>
This commit is contained in:
Vikrant Gupta 2024-10-21 11:42:20 +05:30 committed by GitHub
parent 2d732ae4a9
commit c0e40614bf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 20 additions and 25 deletions

View File

@ -1,4 +1,6 @@
/* eslint-disable no-nested-ternary */
import './QueryBuilderSearchV2.styles.scss';
import { Typography } from 'antd';
import {
ArrowDown,

View File

@ -319,7 +319,7 @@ function QueryBuilderSearchV2(
value: '',
}));
setCurrentState(DropdownState.OPERATOR);
setSearchValue((parsedValue as BaseAutocompleteData)?.key);
setSearchValue(`${(parsedValue as BaseAutocompleteData)?.key} `);
}
} else if (currentState === DropdownState.OPERATOR) {
if (isEmpty(value) && currentFilterItem?.key?.key) {
@ -360,7 +360,7 @@ function QueryBuilderSearchV2(
value: '',
}));
setCurrentState(DropdownState.ATTRIBUTE_VALUE);
setSearchValue(`${currentFilterItem?.key?.key} ${value}`);
setSearchValue(`${currentFilterItem?.key?.key} ${value} `);
}
} else if (currentState === DropdownState.ATTRIBUTE_VALUE) {
const operatorType =
@ -512,11 +512,6 @@ function QueryBuilderSearchV2(
// this useEffect takes care of tokenisation based on the search state
useEffect(() => {
// if we are still fetching the suggestions then return as we won't know the type / data-type etc for the attribute key
if (isFetchingSuggestions) {
return;
}
// if there is no search value reset to the default state
if (!searchValue) {
setCurrentFilterItem(undefined);
@ -766,6 +761,7 @@ function QueryBuilderSearchV2(
suggestionsData?.payload?.attributes,
]);
// keep the query in sync with the selected tags in logs explorer page
useEffect(() => {
const filterTags: IBuilderQuery['filters'] = {
op: 'AND',
@ -788,16 +784,14 @@ function QueryBuilderSearchV2(
if (!isEqual(query.filters, filterTags)) {
onChange(filterTags);
setTags(
filterTags.items.map((tag) => ({
...tag,
op: getOperatorFromValue(tag.op),
})) as ITag[],
);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [tags]);
// keep the use effects pure!
// if the tags lacks the ID then the above use effect will add it to query
// and then the below use effect will take care of adding it to the tags.
// keep the tags in sycn with current query.
useEffect(() => {
// convert the query and tags to same format before comparison
if (!isEqual(getInitTags(query), tags)) {

View File

@ -11,20 +11,19 @@
.edit-rules-card {
width: 20rem;
padding: 1rem;
}
.content {
font-style: normal;
font-weight: 300;
font-size: 18px;
line-height: 20px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 0;
.content {
font-style: normal;
font-weight: 300;
font-size: 18px;
line-height: 20px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 0;
}
}
.btn-container {
display: flex;
justify-content: center;