From f9e532b9da53919f6a72cf4d835ee691a14b987d Mon Sep 17 00:00:00 2001 From: Nodir Date: Thu, 3 Feb 2022 23:24:43 +0500 Subject: [PATCH 01/16] fix: select operator in edit filter modal and add remove edit filter from filter arrays --- .../data/public/ui/filter_bar/filter_bar.tsx | 44 ++++++++++++++----- .../query_string_input/edit_filter_modal.tsx | 8 ++-- 2 files changed, 35 insertions(+), 17 deletions(-) diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx index 629f0b0a2ace9..4fc72930867b1 100644 --- a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx +++ b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx @@ -96,21 +96,41 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) { } function onEditMultipleFiltersANDOR(selectedFilters: FilterGroup[], buildFilters: Filter[]) { - const mappedFilters = mapAndFlattenFilters(buildFilters); - const mergedFilters = mappedFilters.map((filter, idx) => { - return { - ...filter, - groupId: selectedFilters[idx].groupId, - id: selectedFilters[idx].id, - relationship: selectedFilters[idx].relationship, - subGroupId: selectedFilters[idx].subGroupId, - }; + const multipleFilters = [...props.multipleFilters]; + const index = multipleFilters.findIndex((filter) => filter.groupId === Number(groupId)); + + const filtersNew = [...multipleFilters.slice(0, index), ...multipleFilters.slice(index + 1)]; + + const filters = [...props.filters]; + const updatedFilters: Filter[] = []; + + filtersNew.forEach((filter) => { + filters.forEach((f) => { + if (isEqual(f.query, filter.query)) { + updatedFilters.push(f); + } + }); }); + onFiltersUpdated(updatedFilters); + props?.onMultipleFiltersUpdated?.(filtersNew); + props.toggleEditFilterModal?.(false); - props?.onMultipleFiltersUpdated?.(mergedFilters); - const filters = [...props.filters, ...buildFilters]; - props?.onFiltersUpdated?.(filters); + + // const mappedFilters = mapAndFlattenFilters(buildFilters); + // const mergedFilters = mappedFilters.map((filter, idx) => { + // return { + // ...filter, + // groupId: selectedFilters[idx].groupId, + // id: selectedFilters[idx].id, + // relationship: selectedFilters[idx].relationship, + // subGroupId: selectedFilters[idx].subGroupId, + // }; + // }); + // props?.onMultipleFiltersUpdated?.(mergedFilters); + + // const filters = [...props.filters, ...buildFilters]; + // props?.onFiltersUpdated?.(filters); } function renderItems() { diff --git a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx index 231752081baae..dfe1f930afd3b 100644 --- a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx @@ -165,9 +165,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]); @@ -268,10 +266,10 @@ 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} From 50c86dcf47fea131b863607b5da9cd18c47e8a7b Mon Sep 17 00:00:00 2001 From: Nodir Date: Fri, 4 Feb 2022 00:04:45 +0500 Subject: [PATCH 02/16] feat: fix apply changes --- .../data/public/ui/filter_bar/filter_bar.tsx | 33 +++++++++---------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx index 4fc72930867b1..a348906b4182e 100644 --- a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx +++ b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx @@ -96,10 +96,25 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) { } function onEditMultipleFiltersANDOR(selectedFilters: FilterGroup[], buildFilters: Filter[]) { + const mappedFilters = mapAndFlattenFilters(buildFilters); + const mergedFilters = mappedFilters.map((filter, idx) => { + return { + ...filter, + groupId: selectedFilters[idx].groupId, + id: selectedFilters[idx].id, + relationship: selectedFilters[idx].relationship, + subGroupId: selectedFilters[idx].subGroupId, + }; + }); + const multipleFilters = [...props.multipleFilters]; const index = multipleFilters.findIndex((filter) => filter.groupId === Number(groupId)); - const filtersNew = [...multipleFilters.slice(0, index), ...multipleFilters.slice(index + 1)]; + const filtersNew = [ + ...multipleFilters.slice(0, index), + ...mergedFilters, + ...multipleFilters.slice(index + 1), + ]; const filters = [...props.filters]; const updatedFilters: Filter[] = []; @@ -115,22 +130,6 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) { props?.onMultipleFiltersUpdated?.(filtersNew); props.toggleEditFilterModal?.(false); - - - // const mappedFilters = mapAndFlattenFilters(buildFilters); - // const mergedFilters = mappedFilters.map((filter, idx) => { - // return { - // ...filter, - // groupId: selectedFilters[idx].groupId, - // id: selectedFilters[idx].id, - // relationship: selectedFilters[idx].relationship, - // subGroupId: selectedFilters[idx].subGroupId, - // }; - // }); - // props?.onMultipleFiltersUpdated?.(mergedFilters); - - // const filters = [...props.filters, ...buildFilters]; - // props?.onFiltersUpdated?.(filters); } function renderItems() { From e7f82c573ca04dfa9d7911f7b9eaa4ca2b4f7ce5 Mon Sep 17 00:00:00 2001 From: Nodir Date: Fri, 4 Feb 2022 00:42:14 +0500 Subject: [PATCH 03/16] fix: show label in edit --- src/plugins/data/public/ui/filter_bar/filter_bar.tsx | 3 +-- .../data/public/ui/query_string_input/edit_filter_modal.tsx | 4 +--- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx index a348906b4182e..8673f7d54bfe4 100644 --- a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx +++ b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx @@ -232,12 +232,11 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) { onMultipleFiltersSubmit={onEditMultipleFiltersANDOR} applySavedQueries={() => props.toggleEditFilterModal?.(false)} onCancel={() => props.toggleEditFilterModal?.(false)} - filter={props.multipleFilters[0]} + filter={currentEditFilters[0]} multipleFilters={currentEditFilters} indexPatterns={props.indexPatterns!} onRemoveFilterGroup={onDeleteFilterGroup} timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride} - savedQueryManagement={undefined} initialAddFilterMode={undefined} /> )} diff --git a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx index dfe1f930afd3b..7178522939aaa 100644 --- a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx @@ -91,7 +91,6 @@ export function EditFilterModal({ multipleFilters, indexPatterns, timeRangeForSuggestionsOverride, - savedQueryManagement, initialAddFilterMode, onRemoveFilterGroup, }: { @@ -103,13 +102,13 @@ export function EditFilterModal({ multipleFilters?: Filter[]; indexPatterns: IIndexPattern[]; timeRangeForSuggestionsOverride?: boolean; - savedQueryManagement?: JSX.Element; initialAddFilterMode?: string; onRemoveFilterGroup: (groupId: string) => void; }) { const [selectedIndexPattern, setSelectedIndexPattern] = useState( getIndexPatternFromFilter(filter, indexPatterns) ); + // debugger const [addFilterMode, setAddFilterMode] = useState(initialAddFilterMode ?? tabs[0].type); const [customLabel, setCustomLabel] = useState(filter.meta.alias || ''); const [queryDsl, setQueryDsl] = useState(JSON.stringify(cleanFilter(filter), null, 2)); @@ -655,7 +654,6 @@ export function EditFilterModal({ {addFilterMode === 'quick_form' && renderGroupedFilters()} {addFilterMode === 'query_builder' && renderCustomEditor()} - {addFilterMode === 'saved_filters' && savedQueryManagement} From 7dc6df1276f14b29e937737075bfa354ea00aa7c Mon Sep 17 00:00:00 2001 From: Nodir Date: Fri, 4 Feb 2022 05:15:33 +0500 Subject: [PATCH 04/16] fix: update add filter and edit --- .../data/public/ui/filter_bar/filter_bar.tsx | 5 +++-- .../ui/query_string_input/edit_filter_modal.tsx | 14 ++++++++------ 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx index 8673f7d54bfe4..6ff71f6cebb67 100644 --- a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx +++ b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx @@ -206,7 +206,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} @@ -233,7 +233,8 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) { applySavedQueries={() => props.toggleEditFilterModal?.(false)} onCancel={() => props.toggleEditFilterModal?.(false)} filter={currentEditFilters[0]} - multipleFilters={currentEditFilters} + currentEditFilters={currentEditFilters} + multipleFilters={props.multipleFilters} indexPatterns={props.indexPatterns!} onRemoveFilterGroup={onDeleteFilterGroup} timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride} diff --git a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx index 7178522939aaa..3f6ca9fd3e554 100644 --- a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx @@ -89,6 +89,7 @@ export function EditFilterModal({ applySavedQueries, filter, multipleFilters, + currentEditFilters, indexPatterns, timeRangeForSuggestionsOverride, initialAddFilterMode, @@ -100,6 +101,7 @@ export function EditFilterModal({ onCancel: () => void; filter: Filter; multipleFilters?: Filter[]; + currentEditFilters?: Filter[]; indexPatterns: IIndexPattern[]; timeRangeForSuggestionsOverride?: boolean; initialAddFilterMode?: string; @@ -113,9 +115,9 @@ export function EditFilterModal({ const [customLabel, setCustomLabel] = useState(filter.meta.alias || ''); const [queryDsl, setQueryDsl] = useState(JSON.stringify(cleanFilter(filter), null, 2)); const [localFilters, setLocalFilters] = useState( - convertFilterToFilterGroup(multipleFilters) + convertFilterToFilterGroup(currentEditFilters) ); - const [groupsCount, setGroupsCount] = useState(1); + const [groupsCount, setGroupsCount] = useState(filter.groupId); function convertFilterToFilterGroup(convertibleFilters: Filter[] | undefined): FilterGroup[] { if (!convertibleFilters) { @@ -418,7 +420,7 @@ export function EditFilterModal({ }; const onDeliteFilter = () => { - onRemoveFilterGroup(multipleFilters[0]?.groupId); + onRemoveFilterGroup(filter?.groupId); }; const renderGroupedFilters = () => { @@ -481,7 +483,7 @@ export function EditFilterModal({ value: undefined, relationship: undefined, groupId: localfilter.groupId, - id: localFilters.length, + id: multipleFilters.length, subGroupId, }, ]); @@ -519,9 +521,9 @@ export function EditFilterModal({ operator: undefined, value: undefined, relationship: undefined, - groupId: filtersOnGroup.length > 1 ? groupsCount : groupsCount + 1, + groupId: multipleFilters.length + 1, subGroupId, - id: localFilters.length, + id: multipleFilters.length, }, ]); if (filtersOnGroup.length <= 1) { From 51c6326f2b1cd5bcfba43cfa339e4077f4a8edbe Mon Sep 17 00:00:00 2001 From: Nodir Date: Fri, 4 Feb 2022 05:29:54 +0500 Subject: [PATCH 05/16] fix: show right order for filter in edit --- .../data/public/ui/query_string_input/add_filter_modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx index 8f4578cceabba..26f47de4a6522 100644 --- a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx @@ -493,7 +493,7 @@ export function AddFilterModal({ const subGroupId = filtersOnGroup.length > 2 ? localfilter?.subGroupId ?? 0 - : (localfilter?.subGroupId ?? 0) + 1; + : (localfilter?.subGroupId ?? 0); const updatedLocalFilter = { ...localfilter, relationship: 'AND', From e39a34883d1fbbdcda6507f265d4d10c64f3564d Mon Sep 17 00:00:00 2001 From: Nodir Date: Fri, 4 Feb 2022 12:44:40 +0500 Subject: [PATCH 06/16] feat: update edit filter --- .../data/public/ui/query_string_input/add_filter_modal.tsx | 2 +- .../public/ui/query_string_input/edit_filter_modal.tsx | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx index 26f47de4a6522..0641a4b857c47 100644 --- a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx @@ -493,7 +493,7 @@ export function AddFilterModal({ const subGroupId = filtersOnGroup.length > 2 ? localfilter?.subGroupId ?? 0 - : (localfilter?.subGroupId ?? 0); + : localfilter?.subGroupId ?? 0; const updatedLocalFilter = { ...localfilter, relationship: 'AND', diff --git a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx index 3f6ca9fd3e554..25bcd41e5f43d 100644 --- a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx @@ -504,7 +504,7 @@ export function EditFilterModal({ const subGroupId = filtersOnGroup.length > 2 ? localfilter?.subGroupId ?? 0 - : (localfilter?.subGroupId ?? 0) + 1; + : localfilter?.subGroupId ?? 0; const updatedLocalFilter = { ...localfilter, relationship: 'AND', @@ -521,9 +521,10 @@ export function EditFilterModal({ operator: undefined, value: undefined, relationship: undefined, - groupId: multipleFilters.length + 1, + groupId: + filtersOnGroup.length > 1 ? groupsCount : groupsCount + 1, subGroupId, - id: multipleFilters.length, + id: multipleFilters.length + localFilters.length, }, ]); if (filtersOnGroup.length <= 1) { From 8549aaa5f0960c62500a9e522aa43652f1b247a2 Mon Sep 17 00:00:00 2001 From: Nodir Date: Fri, 4 Feb 2022 13:15:33 +0500 Subject: [PATCH 07/16] fix: issue with Add filter --- .../data/public/ui/query_string_input/edit_filter_modal.tsx | 2 +- .../data/public/ui/query_string_input/query_bar_top_row.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx index 25bcd41e5f43d..30bc3b3765f40 100644 --- a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx @@ -483,7 +483,7 @@ export function EditFilterModal({ value: undefined, relationship: undefined, groupId: localfilter.groupId, - id: multipleFilters.length, + id: multipleFilters.length + localFilters.length, subGroupId, }, ]); diff --git a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx index da0d41c0c9bf7..297f3e27cede5 100644 --- a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx +++ b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx @@ -390,7 +390,7 @@ export const QueryBarTopRow = React.memo( function onAddMultipleFiltersANDOR(selectedFilters: FilterGroup[], buildFilters: Filter[]) { const lastFilter: any = props.multipleFilters[props.multipleFilters.length - 1]; const mappedFilters = mapAndFlattenFilters(buildFilters); - if (lastFilter !== undefined) lastFilter.relationship = 'AND'; + // if (lastFilter !== undefined) lastFilter.relationship = 'AND'; const mergedFilters = mappedFilters.map((filter, idx) => { let groupId = selectedFilters[idx].groupId; let id = selectedFilters[idx].id; @@ -450,6 +450,7 @@ export const QueryBarTopRow = React.memo( indexPatterns={props.indexPatterns!} onSubmit={onAddMultipleFilters} onMultipleFiltersSubmit={onAddMultipleFiltersANDOR} + multipleFilters={props.multipleFilters} applySavedQueries={applySavedQueries} timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride} savedQueryManagement={props.savedQueryManagement} From 68685de67d842a3400af9185a8dbe6578ba3c44b Mon Sep 17 00:00:00 2001 From: Nodir Date: Fri, 4 Feb 2022 16:10:58 +0500 Subject: [PATCH 08/16] feat: update add filter --- .../data/public/ui/filter_bar/filter_bar.tsx | 1 + .../query_string_input/add_filter_modal.tsx | 29 ++++++++++--------- .../query_string_input/edit_filter_modal.tsx | 12 ++++---- .../query_string_input/query_bar_top_row.tsx | 9 +++--- 4 files changed, 28 insertions(+), 23 deletions(-) diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx index 6ff71f6cebb67..697ca4014b2c7 100644 --- a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx +++ b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx @@ -96,6 +96,7 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) { } function onEditMultipleFiltersANDOR(selectedFilters: FilterGroup[], buildFilters: Filter[]) { + // debugger const mappedFilters = mapAndFlattenFilters(buildFilters); const mergedFilters = mappedFilters.map((filter, idx) => { return { diff --git a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx index 0641a4b857c47..0dc7827f2b1a9 100644 --- a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx @@ -85,6 +85,7 @@ export function AddFilterModal({ onMultipleFiltersSubmit, onCancel, applySavedQueries, + multipleFilters, filter, indexPatterns, timeRangeForSuggestionsOverride, @@ -110,18 +111,21 @@ export function AddFilterModal({ const [addFilterMode, setAddFilterMode] = useState(initialAddFilterMode ?? tabs[0].type); const [customLabel, setCustomLabel] = useState(filter.meta.alias || ''); const [queryDsl, setQueryDsl] = useState(JSON.stringify(cleanFilter(filter), null, 2)); + const [groupsCount, setGroupsCount] = useState( + multipleFilters?.length ? multipleFilters?.length : 1 + ); + const [localFilters, setLocalFilters] = useState([ { 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(1); const onIndexPatternChange = ([selectedPattern]: IIndexPattern[]) => { setSelectedIndexPattern(selectedPattern); @@ -142,9 +146,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]); @@ -245,10 +247,10 @@ 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} @@ -396,6 +398,7 @@ export function AddFilterModal({ (value) => typeof value !== 'undefined' ) as Filter[]; // onSubmit(finalFilters); + onMultipleFiltersSubmit(localFilters, finalFilters); if (alias) { saveFilters({ @@ -434,8 +437,8 @@ export function AddFilterModal({ subGroup.length > 1 && groupsCount > 1 ? 'kbnQueryBar__filterModalSubGroups' : groupsCount === 1 && subGroup.length > 1 - ? 'kbnQueryBar__filterModalGroups' - : ''; + ? 'kbnQueryBar__filterModalGroups' + : ''; return ( <>
@@ -503,6 +506,7 @@ export function AddFilterModal({ (f) => f.id === localfilter.id && f.groupId === Number(groupId) ); localFilters[idx] = updatedLocalFilter; + // debugger setLocalFilters([ ...localFilters, { @@ -510,10 +514,9 @@ export function AddFilterModal({ operator: undefined, value: undefined, relationship: undefined, - groupId: - filtersOnGroup.length > 1 ? groupsCount : groupsCount + 1, + groupId: groupsCount + 1, subGroupId, - id: localFilters.length, + id: Number(multipleFilters?.length) + localFilters.length, }, ]); if (filtersOnGroup.length <= 1) { diff --git a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx index 30bc3b3765f40..260a76135ecbe 100644 --- a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx @@ -117,7 +117,7 @@ export function EditFilterModal({ const [localFilters, setLocalFilters] = useState( convertFilterToFilterGroup(currentEditFilters) ); - const [groupsCount, setGroupsCount] = useState(filter.groupId); + const [groupsCount, setGroupsCount] = useState(multipleFilters?.length ? multipleFilters?.length : 1); function convertFilterToFilterGroup(convertibleFilters: Filter[] | undefined): FilterGroup[] { if (!convertibleFilters) { @@ -522,14 +522,14 @@ export function EditFilterModal({ value: undefined, relationship: undefined, groupId: - filtersOnGroup.length > 1 ? groupsCount : groupsCount + 1, + groupsCount + 1, subGroupId, - id: multipleFilters.length + localFilters.length, + id: multipleFilters.length + localFilters.length - 1, }, ]); - if (filtersOnGroup.length <= 1) { - setGroupsCount(groupsCount + 1); - } + // if (filtersOnGroup.length <= 1) { + setGroupsCount((groupsCount) => groupsCount + 1); + // } }} iconType="plus" size="s" diff --git a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx index 297f3e27cede5..933cd39b71d99 100644 --- a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx +++ b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx @@ -388,6 +388,7 @@ export const QueryBarTopRow = React.memo( } function onAddMultipleFiltersANDOR(selectedFilters: FilterGroup[], buildFilters: Filter[]) { + // debugger const lastFilter: any = props.multipleFilters[props.multipleFilters.length - 1]; const mappedFilters = mapAndFlattenFilters(buildFilters); // if (lastFilter !== undefined) lastFilter.relationship = 'AND'; @@ -396,10 +397,10 @@ export const QueryBarTopRow = React.memo( let id = selectedFilters[idx].id; // groupId starts from 1; id starts from 0 - if (lastFilter !== undefined) { - groupId += lastFilter.groupId; - id += lastFilter.id + 1; - } + // if (lastFilter !== undefined) { + // groupId += lastFilter.groupId; + // id += lastFilter.id + 1; + // } return { ...filter, From 0048f15927cc1e983621a54494ca0892808f0ecd Mon Sep 17 00:00:00 2001 From: Nodir Date: Fri, 4 Feb 2022 17:24:54 +0500 Subject: [PATCH 09/16] fix: add OR in Add filter --- .../data/public/ui/query_string_input/add_filter_modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx index 0dc7827f2b1a9..87ec711c914cd 100644 --- a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx @@ -475,7 +475,7 @@ export function AddFilterModal({ value: undefined, relationship: undefined, groupId: localfilter.groupId, - id: localFilters.length, + id: Number(multipleFilters?.length) + localFilters.length, subGroupId, }, ]); From b248a738a97a43442eef1fdcc6e492974de9f4bc Mon Sep 17 00:00:00 2001 From: Nodir Date: Fri, 4 Feb 2022 18:19:04 +0500 Subject: [PATCH 10/16] fix: add index for grop --- .../ui/query_string_input/add_filter_modal.tsx | 6 ++---- .../query_string_input/edit_filter_modal.tsx | 18 ++++++++++-------- .../query_string_input/query_bar_top_row.tsx | 4 ++-- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx index 87ec711c914cd..ac056e87a4cb1 100644 --- a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx @@ -111,9 +111,7 @@ export function AddFilterModal({ const [addFilterMode, setAddFilterMode] = useState(initialAddFilterMode ?? tabs[0].type); const [customLabel, setCustomLabel] = useState(filter.meta.alias || ''); const [queryDsl, setQueryDsl] = useState(JSON.stringify(cleanFilter(filter), null, 2)); - const [groupsCount, setGroupsCount] = useState( - multipleFilters?.length ? multipleFilters?.length : 1 - ); + const [groupsCount, setGroupsCount] = useState(1); const [localFilters, setLocalFilters] = useState([ { @@ -514,7 +512,7 @@ export function AddFilterModal({ operator: undefined, value: undefined, relationship: undefined, - groupId: groupsCount + 1, + groupId: Number(multipleFilters?.length) + localFilters.length + 1, subGroupId, id: Number(multipleFilters?.length) + localFilters.length, }, diff --git a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx index 260a76135ecbe..571917a362266 100644 --- a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx @@ -117,7 +117,7 @@ export function EditFilterModal({ const [localFilters, setLocalFilters] = useState( convertFilterToFilterGroup(currentEditFilters) ); - const [groupsCount, setGroupsCount] = useState(multipleFilters?.length ? multipleFilters?.length : 1); + const [groupsCount, setGroupsCount] = useState(1); function convertFilterToFilterGroup(convertibleFilters: Filter[] | undefined): FilterGroup[] { if (!convertibleFilters) { @@ -483,7 +483,7 @@ export function EditFilterModal({ value: undefined, relationship: undefined, groupId: localfilter.groupId, - id: multipleFilters.length + localFilters.length, + id: Number(multipleFilters?.length) + localFilters.length, subGroupId, }, ]); @@ -514,6 +514,9 @@ export function EditFilterModal({ (f) => f.id === localfilter.id && f.groupId === Number(groupId) ); localFilters[idx] = updatedLocalFilter; + const countOfFilterBeforeFilterEdit = multipleFilters.filter( + (f) => f.groupId === Number(groupId) + ); setLocalFilters([ ...localFilters, { @@ -521,15 +524,14 @@ export function EditFilterModal({ operator: undefined, value: undefined, relationship: undefined, - groupId: - groupsCount + 1, + groupId: Number(multipleFilters?.length) - countOfFilterBeforeFilterEdit.length + localFilters.length + 1, subGroupId, - id: multipleFilters.length + localFilters.length - 1, + id: Number(multipleFilters.length) - countOfFilterBeforeFilterEdit.length + localFilters.length, }, ]); - // if (filtersOnGroup.length <= 1) { - setGroupsCount((groupsCount) => groupsCount + 1); - // } + if (filtersOnGroup.length <= 1) { + setGroupsCount((groupsCount) => groupsCount + 1); + } }} iconType="plus" size="s" diff --git a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx index 933cd39b71d99..d963133d3a2b0 100644 --- a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx +++ b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx @@ -397,10 +397,10 @@ export const QueryBarTopRow = React.memo( let id = selectedFilters[idx].id; // groupId starts from 1; id starts from 0 - // if (lastFilter !== undefined) { + if (lastFilter !== undefined) { // groupId += lastFilter.groupId; // id += lastFilter.id + 1; - // } + } return { ...filter, From 022f17a2e15625086ca040c8d6f2b2e0d92ba088 Mon Sep 17 00:00:00 2001 From: Nodir Date: Fri, 4 Feb 2022 19:03:51 +0500 Subject: [PATCH 11/16] fix: create filter --- .../data/public/ui/query_string_input/edit_filter_modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx index 571917a362266..105ddbbeefd92 100644 --- a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx @@ -483,7 +483,7 @@ export function EditFilterModal({ value: undefined, relationship: undefined, groupId: localfilter.groupId, - id: Number(multipleFilters?.length) + localFilters.length, + id: Number(multipleFilters.length) - countOfFilterBeforeFilterEdit.length + localFilters.length, subGroupId, }, ]); From 9fef10b0879f8435e0092ae87add91acb338c759 Mon Sep 17 00:00:00 2001 From: Nodir Date: Fri, 4 Feb 2022 19:13:55 +0500 Subject: [PATCH 12/16] fix: remove filter in Add Filter window --- .../data/public/ui/query_string_input/add_filter_modal.tsx | 2 +- .../data/public/ui/query_string_input/edit_filter_modal.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx index ac056e87a4cb1..3d778a900cf1c 100644 --- a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx @@ -538,7 +538,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) diff --git a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx index 105ddbbeefd92..4ebffb2e71164 100644 --- a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx @@ -550,7 +550,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) From 5d88e1fb1af1f8c1bb639a4ad0ab5f8f268102fd Mon Sep 17 00:00:00 2001 From: Nodir Date: Fri, 4 Feb 2022 19:54:06 +0500 Subject: [PATCH 13/16] fix: create filter --- .../data/public/ui/query_string_input/edit_filter_modal.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx index 4ebffb2e71164..5117b8bfdcee8 100644 --- a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx @@ -475,6 +475,9 @@ export function EditFilterModal({ if (subGroup.length < 2) { localFilters[idx] = updatedLocalFilter; } + const countOfFilterBeforeFilterEdit = multipleFilters.filter( + (f) => f.groupId === Number(groupId) + ); setLocalFilters([ ...localFilters, { From b8d528a592047d5947af3a6dc252e49c718be07a Mon Sep 17 00:00:00 2001 From: Nodir Date: Fri, 4 Feb 2022 20:10:54 +0500 Subject: [PATCH 14/16] fix: edit fitler --- src/plugins/data/public/ui/filter_bar/filter_bar.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx index 697ca4014b2c7..d18fed78d12e0 100644 --- a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx +++ b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx @@ -109,13 +109,10 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) { }); const multipleFilters = [...props.multipleFilters]; - const index = multipleFilters.findIndex((filter) => filter.groupId === Number(groupId)); - const filtersNew = [ - ...multipleFilters.slice(0, index), - ...mergedFilters, - ...multipleFilters.slice(index + 1), - ]; + const newMultipleFilters = multipleFilters.filter((filter) => filter.groupId !== Number(groupId)); + + const filtersNew = newMultipleFilters.concat(mergedFilters); const filters = [...props.filters]; const updatedFilters: Filter[] = []; From a494ba53bbdc866fcd5b13dac46b6f928b113387 Mon Sep 17 00:00:00 2001 From: Nodir Date: Fri, 4 Feb 2022 21:38:39 +0500 Subject: [PATCH 15/16] fix: UI with subgroup --- .../data/public/ui/query_string_input/add_filter_modal.tsx | 4 ++-- .../data/public/ui/query_string_input/edit_filter_modal.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx index 3d778a900cf1c..4a08d95ddbd7b 100644 --- a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx @@ -494,7 +494,7 @@ export function AddFilterModal({ const subGroupId = filtersOnGroup.length > 2 ? localfilter?.subGroupId ?? 0 - : localfilter?.subGroupId ?? 0; + : (localfilter?.subGroupId ?? 0) + 1; const updatedLocalFilter = { ...localfilter, relationship: 'AND', @@ -512,7 +512,7 @@ export function AddFilterModal({ operator: undefined, value: undefined, relationship: undefined, - groupId: Number(multipleFilters?.length) + localFilters.length + 1, + groupId: filtersOnGroup.length > 1 ? groupsCount : (Number(multipleFilters?.length) + localFilters.length + 1), subGroupId, id: Number(multipleFilters?.length) + localFilters.length, }, diff --git a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx index 5117b8bfdcee8..ca7f4b94d730c 100644 --- a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx @@ -527,7 +527,7 @@ export function EditFilterModal({ operator: undefined, value: undefined, relationship: undefined, - groupId: Number(multipleFilters?.length) - countOfFilterBeforeFilterEdit.length + localFilters.length + 1, + groupId: filtersOnGroup.length > 1 ? groupsCount : (Number(multipleFilters?.length) - countOfFilterBeforeFilterEdit.length + localFilters.length + 1), subGroupId, id: Number(multipleFilters.length) - countOfFilterBeforeFilterEdit.length + localFilters.length, }, From bf491d39bcde667f21afc0c8c302184c7de4ba06 Mon Sep 17 00:00:00 2001 From: Nodir Date: Mon, 7 Feb 2022 01:12:06 +0500 Subject: [PATCH 16/16] feat: update add filter --- src/plugins/data/public/ui/filter_bar/filter_bar.tsx | 1 - .../data/public/ui/query_string_input/add_filter_modal.tsx | 3 +-- .../data/public/ui/query_string_input/edit_filter_modal.tsx | 1 - .../data/public/ui/query_string_input/query_bar_top_row.tsx | 1 - 4 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx index f57812941f86a..6344a702a7245 100644 --- a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx +++ b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx @@ -96,7 +96,6 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) { } function onEditMultipleFiltersANDOR(selectedFilters: FilterGroup[], buildFilters: Filter[]) { - // debugger const mappedFilters = mapAndFlattenFilters(buildFilters); const mergedFilters = mappedFilters.map((filter, idx) => { return { diff --git a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx index bb8f0c67ad7b9..1f33f839a62b9 100644 --- a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx @@ -499,7 +499,7 @@ export function AddFilterModal({ const subGroupId = filtersOnGroup.length > 2 ? localfilter?.subGroupId ?? 0 - : (localfilter?.subGroupId ?? 0) + 1; + : (localfilter?.subGroupId ?? 0); const updatedLocalFilter = { ...localfilter, relationship: 'AND', @@ -509,7 +509,6 @@ export function AddFilterModal({ (f) => f.id === localfilter.id && f.groupId === Number(groupId) ); localFilters[idx] = updatedLocalFilter; - // debugger setLocalFilters([ ...localFilters, { diff --git a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx index b0c1063bf48d2..cc836282c9b58 100644 --- a/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/edit_filter_modal.tsx @@ -113,7 +113,6 @@ export function EditFilterModal({ const [selectedIndexPattern, setSelectedIndexPattern] = useState( getIndexPatternFromFilter(filter, indexPatterns) ); - // debugger const [addFilterMode, setAddFilterMode] = useState(initialAddFilterMode ?? tabs[0].type); const [customLabel, setCustomLabel] = useState(filter.meta.alias || ''); const [queryDsl, setQueryDsl] = useState(JSON.stringify(cleanFilter(filter), null, 2)); diff --git a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx index d963133d3a2b0..dd65963eb9fba 100644 --- a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx +++ b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx @@ -388,7 +388,6 @@ export const QueryBarTopRow = React.memo( } function onAddMultipleFiltersANDOR(selectedFilters: FilterGroup[], buildFilters: Filter[]) { - // debugger const lastFilter: any = props.multipleFilters[props.multipleFilters.length - 1]; const mappedFilters = mapAndFlattenFilters(buildFilters); // if (lastFilter !== undefined) lastFilter.relationship = 'AND';