Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: select operator in edit filter modal and add remove edit filter … #10

Merged
merged 17 commits into from
Feb 7, 2022
Merged

fix: select operator in edit filter modal and add remove edit filter … #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
f9e532b
fix: select operator in edit filter modal and add remove edit filter …
nlatipov Feb 3, 2022
50c86dc
feat: fix apply changes
nlatipov Feb 3, 2022
e7f82c5
fix: show label in edit
nlatipov Feb 3, 2022
7dc6df1
fix: update add filter and edit
nlatipov Feb 4, 2022
51c6326
fix: show right order for filter in edit
nlatipov Feb 4, 2022
e39a348
feat: update edit filter
nlatipov Feb 4, 2022
8549aaa
fix: issue with Add filter
nlatipov Feb 4, 2022
68685de
feat: update add filter
nlatipov Feb 4, 2022
0048f15
fix: add OR in Add filter
nlatipov Feb 4, 2022
b248a73
fix: add index for grop
nlatipov Feb 4, 2022
022f17a
fix: create filter
nlatipov Feb 4, 2022
9fef10b
fix: remove filter in Add Filter window
nlatipov Feb 4, 2022
5d88e1f
fix: create filter
nlatipov Feb 4, 2022
b8d528a
fix: edit fitler
nlatipov Feb 4, 2022
a494ba5
fix: UI with subgroup
nlatipov Feb 4, 2022
bfc0711
feat: merge, resolve conflict, fix minor issue
nlatipov Feb 4, 2022
bf491d3
feat: update add filter
nlatipov Feb 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 14 additions & 6 deletions src/plugins/data/public/ui/filter_bar/filter_bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,11 +106,19 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
subGroupId: selectedFilters[idx].subGroupId,
};
});
props.toggleEditFilterModal?.(false);
props?.onMultipleFiltersUpdated?.(mergedFilters);

const multipleFilters = [...props.multipleFilters];

const newMultipleFilters = multipleFilters.filter((filter) => filter.groupId !== Number(groupId));

const filtersNew = newMultipleFilters.concat(mergedFilters);

const filters = [...props.filters, ...buildFilters];
props?.onFiltersUpdated?.(filters);

props?.onMultipleFiltersUpdated?.(filtersNew);

props.toggleEditFilterModal?.(false);
}

function renderItems() {
Expand Down Expand Up @@ -187,7 +195,7 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
onRemove={onRemoveFilterGroup}
onUpdate={onUpdateFilterGroup}
onEditFilterClick={onEditFilterClick}
filtersGroupsCount={1}
filtersGroupsCount={Object.entries(firstDepthGroupedFilters).length}
customLabel={label}
savedQueryService={props.savedQueryService}
onFilterSave={props.onFilterSave}
Expand All @@ -213,12 +221,12 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
onMultipleFiltersSubmit={onEditMultipleFiltersANDOR}
applySavedQueries={() => props.toggleEditFilterModal?.(false)}
onCancel={() => props.toggleEditFilterModal?.(false)}
filter={props.multipleFilters[0]}
multipleFilters={currentEditFilters}
filter={currentEditFilters[0]}
currentEditFilters={currentEditFilters}
multipleFilters={props.multipleFilters}
indexPatterns={props.indexPatterns!}
onRemoveFilterGroup={onDeleteFilterGroup}
timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride}
savedQueryManagement={undefined}
initialAddFilterMode={undefined}
saveFilters={props.onFilterSave}
/>
Expand Down
49 changes: 22 additions & 27 deletions src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ export function AddFilterModal({
onMultipleFiltersSubmit,
onCancel,
applySavedQueries,
multipleFilters,
filter,
indexPatterns,
timeRangeForSuggestionsOverride,
Expand All @@ -110,18 +111,19 @@ export function AddFilterModal({
const [addFilterMode, setAddFilterMode] = useState<string>(initialAddFilterMode ?? tabs[0].type);
const [customLabel, setCustomLabel] = useState<string>(filter.meta.alias || '');
const [queryDsl, setQueryDsl] = useState<string>(JSON.stringify(cleanFilter(filter), null, 2));
const [groupsCount, setGroupsCount] = useState<number>(1);

const [localFilters, setLocalFilters] = useState<FilterGroup[]>([
{
field: undefined,
operator: undefined,
value: undefined,
groupId: 1,
id: 0,
groupId: multipleFilters?.length ? multipleFilters?.length + 1 : 1,
id: multipleFilters?.length ? multipleFilters?.length : 0,
subGroupId: 1,
relationship: undefined,
},
]);
const [groupsCount, setGroupsCount] = useState<number>(1);

const onIndexPatternChange = ([selectedPattern]: IIndexPattern[]) => {
setSelectedIndexPattern(selectedPattern);
Expand All @@ -142,9 +144,7 @@ export function AddFilterModal({
const index = localFilters.findIndex((f) => f.id === localFilterIndex);
// Only reset params when the operator type changes
const params =
localFilters[localFilterIndex].operator?.type === operator.type
? localFilters[localFilterIndex].value
: undefined;
localFilters[index]?.operator?.type === operator.type ? localFilters[index].value : undefined;
const updatedLocalFilter = { ...localFilters[index], operator, value: params };
localFilters[index] = updatedLocalFilter;
setLocalFilters([...localFilters]);
Expand Down Expand Up @@ -242,11 +242,11 @@ export function AddFilterModal({
placeholder={
selectedField
? i18n.translate('data.filter.filterEditor.operatorSelectPlaceholderSelect', {
defaultMessage: 'Operator',
})
defaultMessage: 'Operator',
})
: i18n.translate('data.filter.filterEditor.operatorSelectPlaceholderWaiting', {
defaultMessage: 'Waiting',
})
defaultMessage: 'Waiting',
})
}
options={operators}
selectedOptions={selectedOperator ? [selectedOperator] : []}
Expand Down Expand Up @@ -394,6 +394,7 @@ export function AddFilterModal({
(value) => typeof value !== 'undefined'
) as Filter[];
// onSubmit(finalFilters);

onMultipleFiltersSubmit(localFilters, finalFilters);
if (alias) {
saveFilters({
Expand Down Expand Up @@ -432,8 +433,8 @@ export function AddFilterModal({
subGroup.length > 1 && groupsCount > 1
? 'kbnQueryBar__filterModalSubGroups'
: groupsCount === 1 && subGroup.length > 1
? 'kbnQueryBar__filterModalGroups'
: '';
? 'kbnQueryBar__filterModalGroups'
: '';
return (
<>
<div className={classNames(classes)}>
Expand All @@ -454,20 +455,16 @@ export function AddFilterModal({
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>

<EuiFlexItem grow={false}>

<EuiFlexGroup responsive={false} justifyContent="center">
{subGroup.length < 2 && (
<EuiFlexItem grow={false}>
<EuiButtonIcon
onClick={() => {
const updatedLocalFilter = {
...localfilter,
relationship: 'OR',
};
const updatedLocalFilter = { ...localfilter, relationship: 'OR' };
const idx = localFilters.findIndex(
(f) =>
f.id === localfilter.id && f.groupId === Number(groupId)
(f) => f.id === localfilter.id && f.groupId === Number(groupId)
);
const subGroupId = (localfilter?.subGroupId ?? 0) + 1;
if (subGroup.length < 2) {
Expand All @@ -481,7 +478,7 @@ export function AddFilterModal({
value: undefined,
relationship: undefined,
groupId: localfilter.groupId,
id: localFilters.length,
id: Number(multipleFilters?.length) + localFilters.length,
subGroupId,
},
]);
Expand All @@ -502,15 +499,14 @@ export function AddFilterModal({
const subGroupId =
filtersOnGroup.length > 2
? localfilter?.subGroupId ?? 0
: (localfilter?.subGroupId ?? 0) + 1;
: (localfilter?.subGroupId ?? 0);
const updatedLocalFilter = {
...localfilter,
relationship: 'AND',
subGroupId: filtersOnGroup.length > 1 ? subGroupId : 1,
};
const idx = localFilters.findIndex(
(f) =>
f.id === localfilter.id && f.groupId === Number(groupId)
(f) => f.id === localfilter.id && f.groupId === Number(groupId)
);
localFilters[idx] = updatedLocalFilter;
setLocalFilters([
Expand All @@ -520,10 +516,9 @@ export function AddFilterModal({
operator: undefined,
value: undefined,
relationship: undefined,
groupId:
filtersOnGroup.length > 1 ? groupsCount : groupsCount + 1,
groupId: filtersOnGroup.length > 1 ? groupsCount : (Number(multipleFilters?.length) + localFilters.length + 1),
subGroupId,
id: localFilters.length,
id: Number(multipleFilters?.length) + localFilters.length,
},
]);
if (filtersOnGroup.length <= 1) {
Expand All @@ -547,7 +542,7 @@ export function AddFilterModal({
localFilters[currentIdx - 1].relationship = 'AND';
}
const updatedFilters = localFilters.filter(
(_, idx) => idx !== localfilter.id
(_, idx) => idx !== currentIdx
);
const filtersOnGroup = updatedFilters.filter(
(f) => f.groupId === Number(groupId)
Expand Down
57 changes: 27 additions & 30 deletions src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,9 @@ export function EditFilterModal({
applySavedQueries,
filter,
multipleFilters,
currentEditFilters,
indexPatterns,
timeRangeForSuggestionsOverride,
savedQueryManagement,
initialAddFilterMode,
onRemoveFilterGroup,
saveFilters,
Expand All @@ -103,9 +103,9 @@ export function EditFilterModal({
onCancel: () => void;
filter: Filter;
multipleFilters?: Filter[];
currentEditFilters?: Filter[];
indexPatterns: IIndexPattern[];
timeRangeForSuggestionsOverride?: boolean;
savedQueryManagement?: JSX.Element;
initialAddFilterMode?: string;
onRemoveFilterGroup: (groupId: string) => void;
saveFilters: (savedQueryMeta: SavedQueryMeta) => void;
Expand All @@ -117,7 +117,7 @@ export function EditFilterModal({
const [customLabel, setCustomLabel] = useState<string>(filter.meta.alias || '');
const [queryDsl, setQueryDsl] = useState<string>(JSON.stringify(cleanFilter(filter), null, 2));
const [localFilters, setLocalFilters] = useState<FilterGroup[]>(
convertFilterToFilterGroup(multipleFilters)
convertFilterToFilterGroup(currentEditFilters)
);
const [groupsCount, setGroupsCount] = useState<number>(1);

Expand Down Expand Up @@ -168,9 +168,7 @@ export function EditFilterModal({
const index = localFilters.findIndex((f) => f.id === localFilterIndex);
// Only reset params when the operator type changes
const params =
localFilters[localFilterIndex].operator?.type === operator.type
? localFilters[localFilterIndex].value
: undefined;
localFilters[index]?.operator?.type === operator.type ? localFilters[index].value : undefined;
const updatedLocalFilter = { ...localFilters[index], operator, value: params };
localFilters[index] = updatedLocalFilter;
setLocalFilters([...localFilters]);
Expand Down Expand Up @@ -268,11 +266,11 @@ export function EditFilterModal({
placeholder={
selectedField
? i18n.translate('data.filter.filterEditor.operatorSelectPlaceholderSelect', {
defaultMessage: 'Operator',
})
defaultMessage: 'Operator',
})
: i18n.translate('data.filter.filterEditor.operatorSelectPlaceholderWaiting', {
defaultMessage: 'Waiting',
})
defaultMessage: 'Waiting',
})
}
options={operators}
selectedOptions={selectedOperator ? [selectedOperator] : []}
Expand Down Expand Up @@ -438,7 +436,7 @@ export function EditFilterModal({
};

const onDeliteFilter = () => {
onRemoveFilterGroup(multipleFilters[0]?.groupId);
onRemoveFilterGroup(filter?.groupId);
};

const renderGroupedFilters = () => {
Expand All @@ -463,8 +461,8 @@ export function EditFilterModal({
subGroup.length > 1 && groupsCount > 1
? 'kbnQueryBar__filterModalSubGroups'
: groupsCount === 1 && subGroup.length > 1
? 'kbnQueryBar__filterModalGroups'
: '';
? 'kbnQueryBar__filterModalGroups'
: '';
return (
<>
<div className={classNames(classes)}>
Expand All @@ -485,25 +483,24 @@ export function EditFilterModal({
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>

<EuiFlexItem grow={false}>

<EuiFlexGroup responsive={false} justifyContent="center">
{subGroup.length < 2 && (
<EuiFlexItem grow={false}>
<EuiButtonIcon
onClick={() => {
const updatedLocalFilter = {
...localfilter,
relationship: 'OR',
};
const updatedLocalFilter = { ...localfilter, relationship: 'OR' };
const idx = localFilters.findIndex(
(f) =>
f.id === localfilter.id && f.groupId === Number(groupId)
(f) => f.id === localfilter.id && f.groupId === Number(groupId)
);
const subGroupId = (localfilter?.subGroupId ?? 0) + 1;
if (subGroup.length < 2) {
localFilters[idx] = updatedLocalFilter;
}
const countOfFilterBeforeFilterEdit = multipleFilters.filter(
(f) => f.groupId === Number(groupId)
);
setLocalFilters([
...localFilters,
{
Expand All @@ -512,7 +509,7 @@ export function EditFilterModal({
value: undefined,
relationship: undefined,
groupId: localfilter.groupId,
id: localFilters.length,
id: Number(multipleFilters.length) - countOfFilterBeforeFilterEdit.length + localFilters.length,
subGroupId,
},
]);
Expand All @@ -533,32 +530,33 @@ export function EditFilterModal({
const subGroupId =
filtersOnGroup.length > 2
? localfilter?.subGroupId ?? 0
: (localfilter?.subGroupId ?? 0) + 1;
: localfilter?.subGroupId ?? 0;
const updatedLocalFilter = {
...localfilter,
relationship: 'AND',
subGroupId: filtersOnGroup.length > 1 ? subGroupId : 1,
};
const idx = localFilters.findIndex(
(f) =>
f.id === localfilter.id && f.groupId === Number(groupId)
(f) => f.id === localfilter.id && f.groupId === Number(groupId)
);
localFilters[idx] = updatedLocalFilter;
const countOfFilterBeforeFilterEdit = multipleFilters.filter(
(f) => f.groupId === Number(groupId)
);
setLocalFilters([
...localFilters,
{
field: undefined,
operator: undefined,
value: undefined,
relationship: undefined,
groupId:
filtersOnGroup.length > 1 ? groupsCount : groupsCount + 1,
groupId: filtersOnGroup.length > 1 ? groupsCount : (Number(multipleFilters?.length) - countOfFilterBeforeFilterEdit.length + localFilters.length + 1),
subGroupId,
id: localFilters.length,
id: Number(multipleFilters.length) - countOfFilterBeforeFilterEdit.length + localFilters.length,
},
]);
if (filtersOnGroup.length <= 1) {
setGroupsCount(groupsCount + 1);
setGroupsCount((groupsCount) => groupsCount + 1);
}
}}
iconType="plus"
Expand All @@ -578,7 +576,7 @@ export function EditFilterModal({
localFilters[currentIdx - 1].relationship = 'AND';
}
const updatedFilters = localFilters.filter(
(_, idx) => idx !== localfilter.id
(_, idx) => idx !== currentIdx
);
const filtersOnGroup = updatedFilters.filter(
(f) => f.groupId === Number(groupId)
Expand Down Expand Up @@ -688,7 +686,6 @@ export function EditFilterModal({
<EuiForm className="kbnQueryBar__filterModalForm">
{addFilterMode === 'quick_form' && renderGroupedFilters()}
{addFilterMode === 'query_builder' && renderCustomEditor()}
{addFilterMode === 'saved_filters' && savedQueryManagement}
</EuiForm>
</EuiModalBody>
<EuiHorizontalRule margin="none" />
Expand Down
Loading