Skip to content

Commit

Permalink
Merge pull request elastic#14 from abdulloh76/pills-from-saved
Browse files Browse the repository at this point in the history 
Fix issue with add, edit filters as dsl query & Badges from saved filters
  • Loading branch information
@stratoula
stratoula authored Feb 28, 2022
2 parents 8e49c68 + c5e991a commit 38d9a12
Show file tree
Hide file tree
Showing 5 changed files with 317 additions and 190 deletions.
182 changes: 124 additions & 58 deletions src/plugins/data/public/ui/filter_bar/filter_bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,20 @@ import { groupBy, isEqual } from 'lodash';
import { InjectedIntl, injectI18n } from '@kbn/i18n-react';
import { Filter, toggleFilterNegated } from '@kbn/es-query';
import classNames from 'classnames';
import React, { useRef, useState } from 'react';
import React, { useCallback, useEffect, useRef, useState } from 'react';

import { METRIC_TYPE } from '@kbn/analytics';
import { FilterItem } from './filter_item';
import { useKibana } from '../../../../kibana_react/public';
import { IDataPluginServices, IIndexPattern } from '../..';
import { IDataPluginServices, IIndexPattern, SavedQueryService } from '../..';
import type { SavedQuery } from '../../query';
import { SavedQueriesItem } from './saved_queries_item';
import { FilterExpressionItem } from './filter_expression_item';

import { EditFilterModal } from '../query_string_input/edit_filter_modal';
import { EditFilterModal, FilterGroup } from '../query_string_input/edit_filter_modal';
import { mapAndFlattenFilters } from '../../query/filter_manager/lib/map_and_flatten_filters';
import { FilterGroup } from '../query_string_input/edit_filter_modal';
import { SavedQueryMeta } from '../saved_query_form';
import { SavedQueryService } from '../..';
import { QUERY_BUILDER } from '../query_string_input/add_filter_modal';

interface Props {
filters: Filter[];
Expand All @@ -51,7 +50,60 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
const groupRef = useRef<HTMLDivElement>(null);
const kibana = useKibana<IDataPluginServices>();
const { appName, usageCollection, uiSettings } = kibana.services;
const [groupIds, setGroupIds] = useState<[] | undefined>(undefined);
const [groupIds, setGroupIds] = useState<number[]>([]);
// we need this to disable quick_form tab for editing saved filters
const [selectedSavedFiltersGroupIds, setSelectedSavedFiltersGroupIds] = useState<number[]>([]);

const getInitForField = useCallback((multipleFilters: any[], field: string, minValue: number) => {
return multipleFilters.length
? Math.max.apply(
Math,
multipleFilters.map((f) => f[field])
) + 1
: minValue;
}, []);

const sortFiltersByGroupId = useCallback((multipleFilters: Filter[]) => {
// when user adds new filters in edit modal they should appear near of editing filter
let gId: number = 0;
let reserveGroupId: number; // for cases where multiple filters have same groupId
return multipleFilters.map((filter, idx) => {
if (filter.groupId !== reserveGroupId) {
reserveGroupId = filter.groupId;
gId++;
}
return {
...filter,
groupId: gId,
id: idx,
};
});
}, []);

useEffect(() => {
const savedFiltersGroupIds: number[] = [];
let groupId = getInitForField(props.multipleFilters, 'groupId', 1);
let id = getInitForField(props.multipleFilters, 'id', 0);

const groupsFromSavedFilters: Filter[] = [];
props.selectedSavedQueries?.map((savedQuery) => {
savedQuery.attributes.filters?.map((f) => {
savedFiltersGroupIds.push(groupId);
groupsFromSavedFilters.push({
...f,
groupId,
id,
subgroupId: 1,
relationship: undefined,
});
groupId++;
id++;
});
});
setSelectedSavedFiltersGroupIds(savedFiltersGroupIds);
props?.onMultipleFiltersUpdated?.([...props.multipleFilters, ...groupsFromSavedFilters]);
}, [props.selectedSavedQueries]);

if (!uiSettings) return null;

const reportUiCounter = usageCollection?.reportUiCounter.bind(usageCollection, appName);
Expand Down Expand Up @@ -90,18 +142,50 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
props.toggleEditFilterModal?.(false);
};

function onAddMultipleFilters(selectedFilters: Filter[]) {
props.toggleEditFilterModal?.(false);
function onEditMultipleFilters(selectedFilters: Filter[]) {
const editedFilters = props.multipleFilters.filter((f) => groupIds.includes(f.groupId));
const oldFilters = props.filters.filter(
(filter) => !editedFilters.find((editedFilter) => isEqual(filter.query, editedFilter.query))
);
const updatedFilters = [...oldFilters, ...selectedFilters];
props?.onFiltersUpdated?.(updatedFilters);

const editedFilterGroupId = groupIds[0];
const multipleFilters = [...props.multipleFilters];
const idxEditedFilterInMultiple = props.multipleFilters.findIndex(
(f) => Number(f.groupId) === Number(editedFilterGroupId)
);
const initGroupId = getInitForField(props.multipleFilters, 'groupId', 1);
const initId = getInitForField(props.multipleFilters, 'id', 0);
const newMultipleFilters = selectedFilters.map((filter, idx) => {
return {
...filter,
groupId: initGroupId + idx,
id: initId + idx,
relationship: 'AND',
subGroupId: 1,
};
});

const filters = [...props.filters, ...selectedFilters];
props?.onFiltersUpdated?.(filters);
multipleFilters.splice(idxEditedFilterInMultiple, groupIds.length, ...newMultipleFilters);
const updatedMultipleFilters = sortFiltersByGroupId(multipleFilters);

props?.onMultipleFiltersUpdated?.(updatedMultipleFilters);
props.toggleEditFilterModal?.(false);
}

function onEditMultipleFiltersANDOR(
selectedFilters: FilterGroup[],
buildFilters: Filter[],
groupCount: number
groupCount: number = 0
) {
const editedFilters = props.multipleFilters.filter((f) => groupIds.includes(f.groupId));
const oldFilters = props.filters.filter(
(filter) => !editedFilters.find((editedFilter) => isEqual(filter.query, editedFilter.query))
);
const updatedFilters = [...oldFilters, ...buildFilters];
props?.onFiltersUpdated?.(updatedFilters);

const mappedFilters = mapAndFlattenFilters(buildFilters);
const mergedFilters = mappedFilters.map((filter, idx) => {
return {
Expand All @@ -110,54 +194,19 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
id: selectedFilters[idx].id,
relationship: selectedFilters[idx].relationship,
subGroupId: selectedFilters[idx].subGroupId,
groupCount
groupCount,
};
});

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

const newMultipleFilters = multipleFilters.filter(
(filter) => !groupIds.includes(filter.groupId)
const indexOfCurFilter = multipleFilters.findIndex(
(f) => Number(f.groupId) === Number(groupIds[0])
);
multipleFilters.splice(indexOfCurFilter, groupIds.length, ...mergedFilters);
const updatedMultipleFilters = sortFiltersByGroupId(multipleFilters);

const filtersNew = newMultipleFilters.concat(mergedFilters);

// const indexOfCurFilter = multipleFilters.findIndex(
// (f) => Number(f.groupId) === Number(groupId)
// );

// multipleFilters.splice(indexOfCurFilter, 1, ...mergedFilters);

// when user adds new filters in edit modal they should appear near of editing filter
// let gId: number = 0;
// let reserveGroupId: number;
// const updatedMultipleFilters = multipleFilters.map((filter, idx) => {
// if (filter.groupId !== reserveGroupId) {
// reserveGroupId = filter.groupId;
// gId++;
// }
// return {
// ...filter,
// groupId: gId,
// id: idx,
// };
// });

props?.onMultipleFiltersUpdated?.(filtersNew);

const filters = [...props.filters, ...buildFilters];
const updatedFilters: Filter[] = [];

filtersNew.forEach((filter) => {
filters.forEach((f) => {
if (isEqual(f.query, filter.query)) {
updatedFilters.push(f);
}
});
});

props?.onFiltersUpdated?.(updatedFilters);

props?.onMultipleFiltersUpdated?.(updatedMultipleFilters);
props.toggleEditFilterModal?.(false);
}

Expand Down Expand Up @@ -248,29 +297,46 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
}

function renderEditFilter() {
let currentEditFilters = [];
const currentEditFilters: Filter[] = [];
groupIds?.forEach((groupId) => {
const filteredFilters = props.multipleFilters.filter(filter => filter.groupId === groupId);
const filteredFilters = props.multipleFilters.filter((filter) => filter.groupId === groupId);
currentEditFilters.push(...filteredFilters);
});

const saerchedFilters: Filter[] = [];

currentEditFilters.forEach((filter) => {
props.filters.forEach((f) => {
if (isEqual(f.query, filter.query)) {
saerchedFilters.push(f);
}
});
});

const queryBuilderTab = QUERY_BUILDER;
const tabs = selectedSavedFiltersGroupIds.some((g) => groupIds.includes(g))
? [queryBuilderTab]
: undefined;

return (
<EuiFlexItem grow={false}>
{props.isEditFilterModalOpen && (
<EditFilterModal
onSubmit={onAddMultipleFilters}
onSubmit={onEditMultipleFilters}
onMultipleFiltersSubmit={onEditMultipleFiltersANDOR}
applySavedQueries={() => props.toggleEditFilterModal?.(false)}
onCancel={() => props.toggleEditFilterModal?.(false)}
filter={currentEditFilters[0]}
filter={saerchedFilters[0]}
currentEditFilters={currentEditFilters}
filters={saerchedFilters}
multipleFilters={props.multipleFilters}
indexPatterns={props.indexPatterns!}
onRemoveFilterGroup={onDeleteFilterGroup}
timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride}
initialAddFilterMode={undefined}
saveFilters={props.onFilterSave}
savedQueryService={props.savedQueryService}
tabs={tabs}
initialLabel={saerchedFilters[0].meta.alias!}
/>
)}
</EuiFlexItem>
Expand Down Expand Up @@ -365,7 +431,7 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
tabIndex={-1}
>
{renderMultipleFilters()}
{renderSelectedSavedQueries()}
{/*{renderSelectedSavedQueries()}*/}
{props.multipleFilters.length === 0 && renderItems()}
{renderEditFilter()}
</EuiFlexGroup>
Expand Down
Loading

0 comments on commit 38d9a12

Please sign in to comment.