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

[Discover][Unified Search][Alerting] Configurable filter menu options #6

Closed
wants to merge 1 commit into from
Closed

[Discover][Unified Search][Alerting] Configurable filter menu options #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 3 additions & 1 deletion src/plugins/unified_search/public/filter_bar/filter_bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { InjectedIntl, injectI18n } from '@kbn/i18n-react';
import type { Filter } from '@kbn/es-query';
import React, { useRef } from 'react';
import { DataView } from '@kbn/data-views-plugin/public';
import FilterItems from './filter_item/filter_items';
import FilterItems, { Props as FilterItemsProps } from './filter_item/filter_items';

import { filterBarStyles } from './filter_bar.styles';

Expand All @@ -22,6 +22,7 @@ export interface Props {
indexPatterns: DataView[];
intl: InjectedIntl;
timeRangeForSuggestionsOverride?: boolean;
hiddenPanelOptions?: FilterItemsProps['hiddenPanelOptions'];
/**
* Applies extra styles necessary when coupled with the query bar
*/
Expand All @@ -48,6 +49,7 @@ const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
onFiltersUpdated={props.onFiltersUpdated}
indexPatterns={props.indexPatterns!}
timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride}
hiddenPanelOptions={props.hiddenPanelOptions}
/>
</EuiFlexGroup>
);
Expand Down
7 changes: 3 additions & 4 deletions src/plugins/unified_search/public/filter_bar/filter_item/filter_item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,7 @@ import {
import { FilterEditor } from '../filter_editor';
import { FilterView } from '../filter_view';
import { getIndexPatterns } from '../../services';

type PanelOptions = 'pinFilter' | 'editFilter' | 'negateFilter' | 'disableFilter' | 'deleteFilter';
import { FilterPanelOption } from '../../types';

export interface FilterItemProps {
id: string;
Expand All @@ -41,7 +40,7 @@ export interface FilterItemProps {
onRemove: () => void;
intl: InjectedIntl;
uiSettings: IUiSettingsClient;
hiddenPanelOptions?: PanelOptions[];
hiddenPanelOptions?: FilterPanelOption[];
timeRangeForSuggestionsOverride?: boolean;
}

Expand Down Expand Up @@ -247,7 +246,7 @@ export function FilterItem(props: FilterItemProps) {

if (hiddenPanelOptions && hiddenPanelOptions.length > 0) {
mainPanelItems = mainPanelItems.filter(
(pItem) => !hiddenPanelOptions.includes(pItem['data-test-subj'] as PanelOptions)
(pItem) => !hiddenPanelOptions.includes(pItem['data-test-subj'] as FilterPanelOption)
);
}
return [
Expand Down
4 changes: 3 additions & 1 deletion src/plugins/unified_search/public/filter_bar/filter_item/filter_items.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,15 @@ import { IDataPluginServices } from '@kbn/data-plugin/public';
import { METRIC_TYPE } from '@kbn/analytics';
import { DataView } from '@kbn/data-views-plugin/public';
import { useKibana } from '@kbn/kibana-react-plugin/public';
import { FilterItem } from './filter_item';
import { FilterItem, FilterItemProps } from './filter_item';

export interface Props {
filters: Filter[];
onFiltersUpdated?: (filters: Filter[]) => void;
indexPatterns: DataView[];
intl: InjectedIntl;
timeRangeForSuggestionsOverride?: boolean;
hiddenPanelOptions?: FilterItemProps['hiddenPanelOptions'];
}

const FilterItemsUI = React.memo(function FilterItemsUI(props: Props) {
Expand Down Expand Up @@ -56,6 +57,7 @@ const FilterItemsUI = React.memo(function FilterItemsUI(props: Props) {
onRemove={() => onRemove(i)}
indexPatterns={props.indexPatterns}
uiSettings={uiSettings!}
hiddenPanelOptions={props.hiddenPanelOptions}
timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride}
/>
</EuiFlexItem>
Expand Down
5 changes: 4 additions & 1 deletion src/plugins/unified_search/public/query_string_input/query_bar_menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { i18n } from '@kbn/i18n';
import type { Filter, Query } from '@kbn/es-query';
import type { DataView } from '@kbn/data-views-plugin/public';
import type { TimeRange, SavedQueryService, SavedQuery } from '@kbn/data-plugin/public';
import { QueryBarMenuPanels } from './query_bar_menu_panels';
import { QueryBarMenuPanels, QueryBarMenuPanelsProps } from './query_bar_menu_panels';
import { FilterEditorWrapper } from './filter_editor_wrapper';

export interface QueryBarMenuProps {
Expand All @@ -36,6 +36,7 @@ export interface QueryBarMenuProps {
saveAsNewQueryFormComponent?: JSX.Element;
saveFormComponent?: JSX.Element;
manageFilterSetComponent?: JSX.Element;
hiddenPanelOptions?: QueryBarMenuPanelsProps['hiddenPanelOptions'];
onFiltersUpdated?: (filters: Filter[]) => void;
filters?: Filter[];
query?: Query;
Expand All @@ -60,6 +61,7 @@ export function QueryBarMenu({
saveAsNewQueryFormComponent,
saveFormComponent,
manageFilterSetComponent,
hiddenPanelOptions,
openQueryBarMenu,
toggleFilterBarMenuPopover,
onFiltersUpdated,
Expand Down Expand Up @@ -124,6 +126,7 @@ export function QueryBarMenu({
savedQueryService,
saveAsNewQueryFormComponent,
manageFilterSetComponent,
hiddenPanelOptions,
nonKqlMode,
closePopover,
onQueryBarSubmit,
Expand Down
33 changes: 30 additions & 3 deletions src/plugins/unified_search/public/query_string_input/query_bar_menu_panels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,17 @@ import type {
} from '@kbn/data-plugin/public';
import { fromUser } from './from_user';
import { QueryLanguageSwitcher } from './language_switcher';
import { FilterPanelOption } from '../types';

interface QueryBarMenuPanelProps {
const MAP_ITEMS_TO_FILTER_OPTION: Record<string, FilterPanelOption> = {
'filter-sets-pinAllFilters': 'pinFilter',
'filter-sets-unpinAllFilters': 'pinFilter',
'filter-sets-enableAllFilters': 'disableFilter',
'filter-sets-disableAllFilters': 'disableFilter',
'filter-sets-invertAllFilters': 'negateFilter',
};

export interface QueryBarMenuPanelsProps {
filters?: Filter[];
savedQuery?: SavedQuery;
language: string;
Expand All @@ -50,6 +59,7 @@ interface QueryBarMenuPanelProps {
savedQueryService: SavedQueryService;
saveAsNewQueryFormComponent?: JSX.Element;
manageFilterSetComponent?: JSX.Element;
hiddenPanelOptions?: FilterPanelOption[];
nonKqlMode?: 'lucene' | 'text';
closePopover: () => void;
onQueryBarSubmit: (payload: { dateRange: TimeRange; query?: Query }) => void;
Expand All @@ -72,14 +82,15 @@ export function QueryBarMenuPanels({
savedQueryService,
saveAsNewQueryFormComponent,
manageFilterSetComponent,
hiddenPanelOptions,
nonKqlMode,
closePopover,
onQueryBarSubmit,
onFiltersUpdated,
onClearSavedQuery,
onQueryChange,
setRenderedComponent,
}: QueryBarMenuPanelProps) {
}: QueryBarMenuPanelsProps) {
const kibana = useKibana<IDataPluginServices>();
const { appName, usageCollection, uiSettings, http, storage } = kibana.services;
const reportUiCounter = usageCollection?.reportUiCounter.bind(usageCollection, appName);
Expand Down Expand Up @@ -319,7 +330,7 @@ export function QueryBarMenuPanels({
});
}

const panels = [
let panels = [
{
id: 0,
title: (
Expand Down Expand Up @@ -490,5 +501,21 @@ export function QueryBarMenuPanels({
},
] as EuiContextMenuPanelDescriptor[];

if (hiddenPanelOptions && hiddenPanelOptions.length > 0) {
panels = panels.map((panel) => ({
...panel,
items: panel.items?.filter((panelItem) => {
if (!panelItem['data-test-subj']) {
return true;
}
const panelFilterOption = MAP_ITEMS_TO_FILTER_OPTION[panelItem['data-test-subj']];
if (!panelFilterOption) {
return true;
}
return !hiddenPanelOptions.includes(panelFilterOption);
}),
}));
}

return panels;
}
6 changes: 5 additions & 1 deletion src/plugins/unified_search/public/search_bar/search_bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { DataView } from '@kbn/data-views-plugin/public';

import { SavedQueryMeta, SaveQueryForm } from '../saved_query_form';
import { SavedQueryManagementList } from '../saved_query_management';
import { QueryBarMenu } from '../query_string_input/query_bar_menu';
import { QueryBarMenu, QueryBarMenuProps } from '../query_string_input/query_bar_menu';
import type { DataViewPickerProps } from '../dataview_picker';
import QueryBarTopRow from '../query_string_input/query_bar_top_row';
import { FilterBar, FilterItems } from '../filter_bar';
Expand Down Expand Up @@ -57,6 +57,7 @@ export interface SearchBarOwnProps {
showDatePicker?: boolean;
showAutoRefreshOnly?: boolean;
filters?: Filter[];
hiddenFilterPanelOptions?: QueryBarMenuProps['hiddenPanelOptions'];
// Date picker
isRefreshPaused?: boolean;
refreshInterval?: number;
Expand Down Expand Up @@ -394,6 +395,7 @@ class SearchBarUI extends Component<SearchBarProps & WithEuiThemeProps, State> {
openQueryBarMenu={this.state.openQueryBarMenu}
onFiltersUpdated={this.props.onFiltersUpdated}
filters={this.props.filters}
hiddenPanelOptions={this.props.hiddenFilterPanelOptions}
query={this.state.query}
savedQuery={this.props.savedQuery}
onClearSavedQuery={this.props.onClearSavedQuery}
Expand Down Expand Up @@ -423,6 +425,7 @@ class SearchBarUI extends Component<SearchBarProps & WithEuiThemeProps, State> {
onFiltersUpdated={this.props.onFiltersUpdated}
indexPatterns={this.props.indexPatterns!}
timeRangeForSuggestionsOverride={timeRangeForSuggestionsOverride}
hiddenPanelOptions={this.props.hiddenFilterPanelOptions}
/>
) : (
<FilterBar
Expand All @@ -431,6 +434,7 @@ class SearchBarUI extends Component<SearchBarProps & WithEuiThemeProps, State> {
onFiltersUpdated={this.props.onFiltersUpdated}
indexPatterns={this.props.indexPatterns!}
timeRangeForSuggestionsOverride={timeRangeForSuggestionsOverride}
hiddenPanelOptions={this.props.hiddenFilterPanelOptions}
data-test-subj="unifiedFilterBar"
/>
);
Expand Down
10 changes: 10 additions & 0 deletions src/plugins/unified_search/public/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,13 @@ export interface UnifiedSearchPublicPluginStart {
*/
ui: UnifiedSearchPublicPluginStartUi;
}

/**
* Filter options which will be available in menu panels
*/
export type FilterPanelOption =
| 'pinFilter'
| 'editFilter'
| 'negateFilter'
| 'disableFilter'
| 'deleteFilter';
7 changes: 5 additions & 2 deletions ...ins/stack_alerts/public/alert_types/es_query/expression/search_source_expression_form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
ThresholdExpression,
ValueExpression,
} from '@kbn/triggers-actions-ui-plugin/public';
import { SearchBar } from '@kbn/unified-search-plugin/public';
import { SearchBar, SearchBarProps } from '@kbn/unified-search-plugin/public';
import { mapAndFlattenFilters, SavedQuery, TimeHistory } from '@kbn/data-plugin/public';
import { Storage } from '@kbn/kibana-utils-plugin/public';
import { DataViewOption, EsQueryAlertParams, SearchType } from '../types';
Expand Down Expand Up @@ -63,6 +63,8 @@ const withDebounce = debounce((execute: () => void) => execute(), 500, {
trailing: true,
});

const HIDDEN_FILTER_PANEL_OPTIONS: SearchBarProps['hiddenFilterPanelOptions'] = ['pinFilter'];
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jughosta I think it's fine to create a PR to main excluding this file. seems just tests are missing. So we'd also get CI feedback.


export const SearchSourceExpressionForm = (props: SearchSourceExpressionFormProps) => {
const { data } = useTriggersAndActionsUiDeps();
const { searchSource, ruleParams, errors, initialSavedQuery, setParam } = props;
Expand Down Expand Up @@ -173,6 +175,7 @@ export const SearchSourceExpressionForm = (props: SearchSourceExpressionFormProp
onQueryChange={onChangeQuery}
savedQuery={savedQuery}
filters={filters}
hiddenFilterPanelOptions={HIDDEN_FILTER_PANEL_OPTIONS}
onFiltersUpdated={onUpdateFilters}
onClearSavedQuery={onClearSavedQuery}
onSavedQueryUpdated={onSavedQueryUpdated}
Expand All @@ -182,7 +185,7 @@ export const SearchSourceExpressionForm = (props: SearchSourceExpressionFormProp
showFilterBar={true}
showDatePicker={false}
showAutoRefreshOnly={false}
customSubmitButton={<></>}
showSubmitButton={false}
dateRangeFrom={undefined}
dateRangeTo={undefined}
timeHistory={timeHistory}
Expand Down