github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

Add text search mode in global kuery bar (#91814)

Browse source 
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Shahzad 2021-02-23 10:37:56 +01:00 • committed by GitHub
parent 89c103a896
commit 2ce344019a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 236 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinputprops.icontype.md
View file

@ -7,5 +7,5 @@
<b>Signature:</b>
```typescript
iconType?: string;
iconType?: EuiIconProps['type'];
```

11
docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinputprops.isclearable.md Normal file
View file

@ -0,0 +1,11 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [QueryStringInputProps](./kibana-plugin-plugins-data-public.querystringinputprops.md) &gt; [isClearable](./kibana-plugin-plugins-data-public.querystringinputprops.isclearable.md)
## QueryStringInputProps.isClearable property
<b>Signature:</b>
```typescript
isClearable?: boolean;
```

5
docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinputprops.md
View file

@ -19,10 +19,13 @@ export interface QueryStringInputProps
| [dataTestSubj](./kibana-plugin-plugins-data-public.querystringinputprops.datatestsubj.md) | <code>string</code> | |
| [disableAutoFocus](./kibana-plugin-plugins-data-public.querystringinputprops.disableautofocus.md) | <code>boolean</code> | |
| [disableLanguageSwitcher](./kibana-plugin-plugins-data-public.querystringinputprops.disablelanguageswitcher.md) | <code>boolean</code> | |
| [iconType](./kibana-plugin-plugins-data-public.querystringinputprops.icontype.md) | <code>string</code> | |
| [iconType](./kibana-plugin-plugins-data-public.querystringinputprops.icontype.md) | <code>EuiIconProps['type']</code> | |
| [indexPatterns](./kibana-plugin-plugins-data-public.querystringinputprops.indexpatterns.md) | <code>Array&lt;IIndexPattern &#124; string&gt;</code> | |
| [isClearable](./kibana-plugin-plugins-data-public.querystringinputprops.isclearable.md) | <code>boolean</code> | |
| [isInvalid](./kibana-plugin-plugins-data-public.querystringinputprops.isinvalid.md) | <code>boolean</code> | |
| [languageSwitcherPopoverAnchorPosition](./kibana-plugin-plugins-data-public.querystringinputprops.languageswitcherpopoveranchorposition.md) | <code>PopoverAnchorPosition</code> | |
| [nonKqlMode](./kibana-plugin-plugins-data-public.querystringinputprops.nonkqlmode.md) | <code>'lucene' &#124; 'text'</code> | |
| [nonKqlModeHelpText](./kibana-plugin-plugins-data-public.querystringinputprops.nonkqlmodehelptext.md) | <code>string</code> | |
| [onBlur](./kibana-plugin-plugins-data-public.querystringinputprops.onblur.md) | <code>() =&gt; void</code> | |
| [onChange](./kibana-plugin-plugins-data-public.querystringinputprops.onchange.md) | <code>(query: Query) =&gt; void</code> | |
| [onChangeQueryInputFocus](./kibana-plugin-plugins-data-public.querystringinputprops.onchangequeryinputfocus.md) | <code>(isFocused: boolean) =&gt; void</code> | |

11
docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinputprops.nonkqlmode.md Normal file
View file

@ -0,0 +1,11 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [QueryStringInputProps](./kibana-plugin-plugins-data-public.querystringinputprops.md) &gt; [nonKqlMode](./kibana-plugin-plugins-data-public.querystringinputprops.nonkqlmode.md)
## QueryStringInputProps.nonKqlMode property
<b>Signature:</b>
```typescript
nonKqlMode?: 'lucene' | 'text';
```

11
docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinputprops.nonkqlmodehelptext.md Normal file
View file

@ -0,0 +1,11 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [QueryStringInputProps](./kibana-plugin-plugins-data-public.querystringinputprops.md) &gt; [nonKqlModeHelpText](./kibana-plugin-plugins-data-public.querystringinputprops.nonkqlmodehelptext.md)
## QueryStringInputProps.nonKqlModeHelpText property
<b>Signature:</b>
```typescript
nonKqlModeHelpText?: string;
```

4
docs/development/plugins/data/public/kibana-plugin-plugins-data-public.searchbar.md
View file

@ -7,7 +7,7 @@
<b>Signature:</b>
```typescript
SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "isLoading" | "indexPatterns" | "filters" | "dataTestSubj" | "intl" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, "query" | "isLoading" | "indexPatterns" | "filters" | "dataTestSubj" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, any> & {
WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "isLoading" | "indexPatterns" | "filters" | "dataTestSubj" | "intl" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated"> & ReactIntl.InjectedIntlProps>;
SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "placeholder" | "isLoading" | "iconType" | "indexPatterns" | "filters" | "dataTestSubj" | "isClearable" | "intl" | "refreshInterval" | "nonKqlMode" | "nonKqlModeHelpText" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, "query" | "placeholder" | "isLoading" | "iconType" | "indexPatterns" | "filters" | "dataTestSubj" | "isClearable" | "refreshInterval" | "nonKqlMode" | "nonKqlModeHelpText" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, any> & {
WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "placeholder" | "isLoading" | "iconType" | "indexPatterns" | "filters" | "dataTestSubj" | "isClearable" | "intl" | "refreshInterval" | "nonKqlMode" | "nonKqlModeHelpText" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated"> & ReactIntl.InjectedIntlProps>;
}
```

13
src/plugins/data/public/public.api.md
View file

@ -35,6 +35,7 @@ import { EuiComboBoxProps } from '@elastic/eui';
import { EuiConfirmModalProps } from '@elastic/eui';
import { EuiFlyoutSize } from '@elastic/eui';
import { EuiGlobalToastListToast } from '@elastic/eui';
import { EuiIconProps } from '@elastic/eui';
import { EventEmitter } from 'events';
import { ExecutionContext } from 'src/plugins/expressions/common';
import { ExpressionAstExpression } from 'src/plugins/expressions/common';
@ -1998,14 +1999,20 @@ export interface QueryStringInputProps {
// (undocumented)
disableLanguageSwitcher?: boolean;
// (undocumented)
iconType?: string;
iconType?: EuiIconProps['type'];
// (undocumented)
indexPatterns: Array<IIndexPattern | string>;
// (undocumented)
isClearable?: boolean;
// (undocumented)
isInvalid?: boolean;
// (undocumented)
languageSwitcherPopoverAnchorPosition?: PopoverAnchorPosition;
// (undocumented)
nonKqlMode?: 'lucene' | 'text';
// (undocumented)
nonKqlModeHelpText?: string;
// (undocumented)
onBlur?: () => void;
// (undocumented)
onChange?: (query: Query) => void;
@ -2254,8 +2261,8 @@ export const SEARCH_SESSIONS_MANAGEMENT_ID = "search_sessions";
// Warning: (ae-missing-release-tag) "SearchBar" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export const SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "isLoading" | "indexPatterns" | "filters" | "dataTestSubj" | "intl" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, "query" | "isLoading" | "indexPatterns" | "filters" | "dataTestSubj" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, any> & {
WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "isLoading" | "indexPatterns" | "filters" | "dataTestSubj" | "intl" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated"> & ReactIntl.InjectedIntlProps>;
export const SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "placeholder" | "isLoading" | "iconType" | "indexPatterns" | "filters" | "dataTestSubj" | "isClearable" | "intl" | "refreshInterval" | "nonKqlMode" | "nonKqlModeHelpText" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, "query" | "placeholder" | "isLoading" | "iconType" | "indexPatterns" | "filters" | "dataTestSubj" | "isClearable" | "refreshInterval" | "nonKqlMode" | "nonKqlModeHelpText" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, any> & {
WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "placeholder" | "isLoading" | "iconType" | "indexPatterns" | "filters" | "dataTestSubj" | "isClearable" | "intl" | "refreshInterval" | "nonKqlMode" | "nonKqlModeHelpText" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated"> & ReactIntl.InjectedIntlProps>;
};
// Warning: (ae-forgotten-export) The symbol "SearchBarOwnProps" needs to be exported by the entry point index.d.ts

93
src/plugins/data/public/ui/query_string_input/language_switcher.test.tsx
View file

@ -7,15 +7,15 @@
*/
import React from 'react';
import { QueryLanguageSwitcher } from './language_switcher';
import { QueryLanguageSwitcher, QueryLanguageSwitcherProps } from './language_switcher';
import { KibanaContextProvider } from 'src/plugins/kibana_react/public';
import { coreMock } from '../../../../../core/public/mocks';
import { mountWithIntl } from '@kbn/test/jest';
import { EuiButtonEmpty, EuiPopover } from '@elastic/eui';
import { EuiButtonEmpty, EuiIcon, EuiPopover } from '@elastic/eui';
const startMock = coreMock.createStart();
describe('LanguageSwitcher', () => {
function wrapInContext(testProps: any) {
function wrapInContext(testProps: QueryLanguageSwitcherProps) {
const services = {
uiSettings: startMock.uiSettings,
docLinks: startMock.docLinks,
@ -55,4 +55,91 @@ describe('LanguageSwitcher', () => {
expect(component.find(EuiPopover).prop('isOpen')).toBe(true);
expect(component.find('[data-test-subj="languageToggle"]').get(0).props.checked).toBeTruthy();
});
it('should toggle off if language is text', () => {
const component = mountWithIntl(
wrapInContext({
language: 'text',
onSelectLanguage: () => {
return;
},
})
);
component.find(EuiButtonEmpty).simulate('click');
expect(component.find(EuiPopover).prop('isOpen')).toBe(true);
expect(component.find('[data-test-subj="languageToggle"]').get(0).props.checked).toBeFalsy();
});
it('it set language on nonKql mode text', () => {
const onSelectLanguage = jest.fn();
const component = mountWithIntl(
wrapInContext({
language: 'kuery',
nonKqlMode: 'text',
onSelectLanguage,
})
);
component.find(EuiButtonEmpty).simulate('click');
expect(component.find(EuiPopover).prop('isOpen')).toBe(true);
expect(component.find('[data-test-subj="languageToggle"]').get(0).props.checked).toBeTruthy();
component.find('[data-test-subj="languageToggle"]').at(1).simulate('click');
expect(onSelectLanguage).toHaveBeenCalledWith('text');
});
it('it set language on nonKql mode lucene', () => {
const onSelectLanguage = jest.fn();
const component = mountWithIntl(
wrapInContext({
language: 'kuery',
nonKqlMode: 'lucene',
onSelectLanguage,
})
);
component.find(EuiButtonEmpty).simulate('click');
component.find('[data-test-subj="languageToggle"]').at(1).simulate('click');
expect(onSelectLanguage).toHaveBeenCalledWith('lucene');
});
it('it set language on kuery mode with nonKqlMode text', () => {
const onSelectLanguage = jest.fn();
const component = mountWithIntl(
wrapInContext({
language: 'text',
nonKqlMode: 'text',
onSelectLanguage,
})
);
expect(component.find(EuiIcon).prop('type')).toBe('boxesVertical');
component.find(EuiButtonEmpty).simulate('click');
component.find('[data-test-subj="languageToggle"]').at(1).simulate('click');
expect(onSelectLanguage).toHaveBeenCalledWith('kuery');
});
it('it set language on kuery mode with nonKqlMode lucene', () => {
const onSelectLanguage = jest.fn();
const component = mountWithIntl(
wrapInContext({
language: 'lucene',
nonKqlMode: 'lucene',
onSelectLanguage,
})
);
expect(component.find('[data-test-subj="switchQueryLanguageButton"]').at(0).text()).toBe(
'Lucene'
);
component.find(EuiButtonEmpty).simulate('click');
component.find('[data-test-subj="languageToggle"]').at(1).simulate('click');
expect(onSelectLanguage).toHaveBeenCalledWith('kuery');
});
});

47
src/plugins/data/public/ui/query_string_input/language_switcher.tsx
View file

@ -10,6 +10,7 @@ import {
EuiButtonEmpty,
EuiForm,
EuiFormRow,
EuiIcon,
EuiLink,
EuiPopover,
EuiPopoverTitle,
@ -19,16 +20,25 @@ import {
PopoverAnchorPosition,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import React, { useState } from 'react';
import { useKibana } from '../../../../kibana_react/public';
interface Props {
export interface QueryLanguageSwitcherProps {
language: string;
onSelectLanguage: (newLanguage: string) => void;
anchorPosition?: PopoverAnchorPosition;
nonKqlMode?: 'lucene' | 'text';
nonKqlModeHelpText?: string;
}
export function QueryLanguageSwitcher(props: Props) {
export function QueryLanguageSwitcher({
language,
anchorPosition,
onSelectLanguage,
nonKqlMode = 'lucene',
nonKqlModeHelpText,
}: QueryLanguageSwitcherProps) {
const kibana = useKibana();
const kueryQuerySyntaxDocs = kibana.services.docLinks!.links.query.kueryQuerySyntax;
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@ -38,6 +48,7 @@ export function QueryLanguageSwitcher(props: Props) {
const kqlLabel = (
<FormattedMessage id="data.query.queryBar.kqlLanguageName" defaultMessage="KQL" />
);
const kqlFullName = (
<FormattedMessage
id="data.query.queryBar.kqlFullLanguageName"
@ -45,6 +56,10 @@ export function QueryLanguageSwitcher(props: Props) {
/>
);
const kqlModeTitle = i18n.translate('data.query.queryBar.languageSwitcher.toText', {
defaultMessage: 'Switch to Kibana Query Language for search',
});
const button = (
<EuiButtonEmpty
size="xs"
@ -52,7 +67,13 @@ export function QueryLanguageSwitcher(props: Props) {
className="euiFormControlLayout__append kqlQueryBar__languageSwitcherButton"
data-test-subj={'switchQueryLanguageButton'}
>
{props.language === 'lucene' ? luceneLabel : kqlLabel}
{language === 'kuery' ? (
kqlLabel
) : nonKqlMode === 'lucene' ? (
luceneLabel
) : (
<EuiIcon type={'boxesVertical'} title={kqlModeTitle} aria-label={kqlModeTitle} />
)}
</EuiButtonEmpty>
);
@ -60,7 +81,7 @@ export function QueryLanguageSwitcher(props: Props) {
<EuiPopover
id="queryLanguageSwitcherPopover"
anchorClassName="euiFormControlLayout__append"
anchorPosition={props.anchorPosition || 'downRight'}
anchorPosition={anchorPosition || 'downRight'}
button={button}
isOpen={isPopoverOpen}
closePopover={() => setIsPopoverOpen(false)}
@ -79,13 +100,21 @@ export function QueryLanguageSwitcher(props: Props) {
id="data.query.queryBar.syntaxOptionsDescription"
defaultMessage="The {docsLink} (KQL) offers a simplified query
syntax and support for scripted fields. KQL also provides autocomplete if you have
a Basic license or above. If you turn off KQL, Kibana uses Lucene."
a Basic license or above. If you turn off KQL, {nonKqlModeHelpText}"
values={{
docsLink: (
<EuiLink href={kueryQuerySyntaxDocs} target="_blank">
{kqlFullName}
</EuiLink>
),
nonKqlModeHelpText:
nonKqlModeHelpText ||
i18n.translate(
'data.query.queryBar.syntaxOptionsDescription.nonKqlModeHelpText',
{
defaultMessage: 'Kibana uses Lucene.',
}
),
}}
/>
</p>
@ -99,16 +128,16 @@ export function QueryLanguageSwitcher(props: Props) {
id="queryEnhancementOptIn"
name="popswitch"
label={
props.language === 'kuery' ? (
language === 'kuery' ? (
<FormattedMessage id="data.query.queryBar.kqlOnLabel" defaultMessage="On" />
) : (
<FormattedMessage id="data.query.queryBar.kqlOffLabel" defaultMessage="Off" />
)
}
checked={props.language === 'kuery'}
checked={language === 'kuery'}
onChange={() => {
const newLanguage = props.language === 'lucene' ? 'kuery' : 'lucene';
props.onSelectLanguage(newLanguage);
const newLanguage = language === 'kuery' ? nonKqlMode : 'kuery';
onSelectLanguage(newLanguage);
}}
data-test-subj="languageToggle"
/>

11
src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx
View file

@ -19,6 +19,7 @@ import {
EuiSuperDatePicker,
EuiFieldText,
prettyDuration,
EuiIconProps,
} from '@elastic/eui';
// @ts-ignore
import { EuiSuperUpdateButton, OnRefreshProps } from '@elastic/eui';
@ -57,6 +58,11 @@ export interface QueryBarTopRowProps {
isDirty: boolean;
timeHistory?: TimeHistoryContract;
indicateNoData?: boolean;
iconType?: EuiIconProps['type'];
placeholder?: string;
isClearable?: boolean;
nonKqlMode?: 'lucene' | 'text';
nonKqlModeHelpText?: string;
}
// Needed for React.lazy
@ -185,6 +191,11 @@ export default function QueryBarTopRow(props: QueryBarTopRowProps) {
onSubmit={onInputSubmit}
persistedLog={persistedLog}
dataTestSubj={props.dataTestSubj}
placeholder={props.placeholder}
isClearable={props.isClearable}
iconType={props.iconType}
nonKqlMode={props.nonKqlMode}
nonKqlModeHelpText={props.nonKqlModeHelpText}
/>
</EuiFlexItem>
);

31
src/plugins/data/public/ui/query_string_input/query_string_input.tsx
View file

@ -21,6 +21,7 @@ import {
htmlIdGenerator,
EuiPortal,
EuiIcon,
EuiIconProps,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
@ -56,7 +57,15 @@ export interface QueryStringInputProps {
size?: SuggestionsListSize;
className?: string;
isInvalid?: boolean;
iconType?: string;
isClearable?: boolean;
iconType?: EuiIconProps['type'];
/**
* @param nonKqlMode by default if language switch is enabled, user can switch between kql and lucene syntax mode
* this params add another option text, which is just a simple keyword search mode, the way a simple search box works
*/
nonKqlMode?: 'lucene' | 'text';
nonKqlModeHelpText?: string;
}
interface Props extends QueryStringInputProps {
@ -698,10 +707,26 @@ export default class QueryStringInputUI extends Component<Props, State> {
<EuiIcon
className="euiFormControlLayoutCustomIcon__icon"
aria-hidden="true"
type="search"
type={this.props.iconType}
/>
</div>
) : null}
{this.props.isClearable && this.props.query.query ? (
<div className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right">
<button
type="button"
className="euiFormControlLayoutClearButton"
title={i18n.translate('data.query.queryBar.clearInputLabel', {
defaultMessage: 'Clear input',
})}
onClick={() => {
this.onQueryStringChange('');
}}
>
<EuiIcon className="euiFormControlLayoutClearButton__icon" type="cross" />
</button>
</div>
) : null}
</div>
<EuiPortal>
<SuggestionsComponent
@ -722,6 +747,8 @@ export default class QueryStringInputUI extends Component<Props, State> {
language={this.props.query.language}
anchorPosition={this.props.languageSwitcherPopoverAnchorPosition}
onSelectLanguage={this.onSelectLanguage}
nonKqlMode={this.props.nonKqlMode}
nonKqlModeHelpText={this.props.nonKqlModeHelpText}
/>
)}
</div>

6
src/plugins/data/public/ui/search_bar/create_search_bar.tsx
View file

@ -189,6 +189,12 @@ export function createSearchBar({ core, storage, data, usageCollection }: Statef
onClearSavedQuery={defaultOnClearSavedQuery(props, clearSavedQuery)}
onSavedQueryUpdated={defaultOnSavedQueryUpdated(props, setSavedQuery)}
onSaved={defaultOnSavedQueryUpdated(props, setSavedQuery)}
iconType={props.iconType}
nonKqlMode={props.nonKqlMode}
nonKqlModeHelpText={props.nonKqlModeHelpText}
customSubmitButton={props.customSubmitButton}
isClearable={props.isClearable}
placeholder={props.placeholder}
{...overrideDefaultBehaviors(props)}
/>
</KibanaContextProvider>

12
src/plugins/data/public/ui/search_bar/search_bar.tsx
View file

@ -12,6 +12,7 @@ import classNames from 'classnames';
import React, { Component } from 'react';
import ResizeObserver from 'resize-observer-polyfill';
import { get, isEqual } from 'lodash';
import { EuiIconProps } from '@elastic/eui';
import { METRIC_TYPE } from '@kbn/analytics';
import { withKibana, KibanaReactContextValue } from '../../../../kibana_react/public';
@ -68,6 +69,12 @@ export interface SearchBarOwnProps {
onRefresh?: (payload: { dateRange: TimeRange }) => void;
indicateNoData?: boolean;
placeholder?: string;
isClearable?: boolean;
iconType?: EuiIconProps['type'];
nonKqlMode?: 'lucene' | 'text';
nonKqlModeHelpText?: string;
}
export type SearchBarProps = SearchBarOwnProps & SearchBarInjectedDeps;
@ -399,6 +406,11 @@ class SearchBarUI extends Component<SearchBarProps, State> {
}
dataTestSubj={this.props.dataTestSubj}
indicateNoData={this.props.indicateNoData}
placeholder={this.props.placeholder}
isClearable={this.props.isClearable}
iconType={this.props.iconType}
nonKqlMode={this.props.nonKqlMode}
nonKqlModeHelpText={this.props.nonKqlModeHelpText}
/>
);
}

1
x-pack/plugins/translations/translations/ja-JP.json
View file

@ -906,7 +906,6 @@
"data.query.queryBar.luceneSyntaxWarningTitle": "Lucene 構文警告",
"data.query.queryBar.searchInputAriaLabel": "{pageType} ページの検索とフィルタリングを行うには入力を開始してください",
"data.query.queryBar.searchInputPlaceholder": "検索",
"data.query.queryBar.syntaxOptionsDescription": "{docsLink} (KQL) は、シンプルなクエリ構文とスクリプトフィールドのサポートを提供します。また、KQL はベーシックライセンス以上をご利用の場合、自動入力も提供します。KQL をオフにすると、Kibana は Lucene を使用します。",
"data.query.queryBar.syntaxOptionsDescription.docsLinkText": "こちら",
"data.query.queryBar.syntaxOptionsTitle": "構文オプション",
"data.search.aggs.aggGroups.bucketsText": "バケット",

1
x-pack/plugins/translations/translations/zh-CN.json
View file

@ -906,7 +906,6 @@
"data.query.queryBar.luceneSyntaxWarningTitle": "Lucene 语法警告",
"data.query.queryBar.searchInputAriaLabel": "开始键入内容，以搜索并筛选 {pageType} 页面",
"data.query.queryBar.searchInputPlaceholder": "搜索",
"data.query.queryBar.syntaxOptionsDescription": "{docsLink} (KQL) 提供简化查询语法并支持脚本字段。如果您具有基本级或更高级别的许可，KQL 还提供自动填充功能。如果关闭 KQL，Kibana 将使用 Lucene。",
"data.query.queryBar.syntaxOptionsDescription.docsLinkText": "此处",
"data.query.queryBar.syntaxOptionsTitle": "语法选项",
"data.search.aggs.aggGroups.bucketsText": "存储桶",