diff --git a/public/components/common/search/search.tsx b/public/components/common/search/search.tsx index 6f85be9e86..65510d24ef 100644 --- a/public/components/common/search/search.tsx +++ b/public/components/common/search/search.tsx @@ -16,10 +16,14 @@ import { EuiIcon, EuiPopover, EuiPopoverFooter, - EuiSuperSelect, - EuiSuperSelectOption, EuiText, EuiToolTip, + EuiContextMenuItem, + EuiModal, + EuiModalHeader, + EuiModalBody, + EuiModalHeaderTitle, + EuiModalFooter, } from '@elastic/eui'; import { isEqual } from 'lodash'; import React, { useEffect, useState } from 'react'; @@ -144,6 +148,9 @@ export const Search = (props: any) => { const sqlService = new SQLService(coreRefs.http); const { application } = coreRefs; const [nlqInput, setNlqInput] = useState(''); + const [isModalVisible, setIsModalVisible] = useState(false); + const closeModal = () => setIsModalVisible(false); + const showModal = () => setIsModalVisible(true); const showQueryArea = !appLogEvents && coreRefs.queryAssistEnabled; @@ -207,7 +214,7 @@ export const Search = (props: any) => { const handleQueryLanguageChange = (lang: string) => { if (lang === QUERY_LANGUAGE.DQL) { - application!.navigateToUrl('../app/data-explorer/discover'); + showModal(); return; } dispatch( @@ -224,9 +231,19 @@ export const Search = (props: any) => { setLanguagePopoverOpen(false); }; - const languageOptions: Array> = [ - { value: QUERY_LANGUAGE.PPL, inputDisplay: PPL }, - { value: QUERY_LANGUAGE.DQL, inputDisplay: DQL }, + const languagePopOverItems = [ + handleQueryLanguageChange(QUERY_LANGUAGE.PPL)} + > + PPL + , + handleQueryLanguageChange(QUERY_LANGUAGE.DQL)} + > + DQL - Opens in Discover + , ]; const onQuerySearch = () => { @@ -294,6 +311,50 @@ export const Search = (props: any) => { : undefined; const loading = indicesLoading || indexPatternsLoading; + const onLanguagePopoverClick = () => { + setLanguagePopoverOpen(!_isLanguagePopoverOpen); + }; + + const languagePopOverButton = ( + + {queryLang} + + ); + + const redirectToDiscover = () => { + application!.navigateToUrl('../app/data-explorer/discover'); + }; + + let redirectionModal = null; + if (isModalVisible) { + redirectionModal = ( + + + +

Open in Discover

+
+
+ + + The OpenSearch Dashboards Query Language (DQL) offers a simplified query syntax and + support for scripted fields. Selecting this option will open the Discover application. + + + + Cancel + { + redirectToDiscover(); + }} + fill + > + Open in Discover + + +
+ ); + } + return (
@@ -311,14 +372,16 @@ export const Search = (props: any) => { {!appLogEvents && ( <> - { - handleQueryLanguageChange(lang); - setQueryLang(lang); - }} - /> + + + { size="l" onClick={() => showFlyout()} color="#159D8D" - // onClickAriaLabel={'pplLinkShowFlyout'} /> {coreRefs.queryAssistEnabled && ( @@ -539,6 +601,7 @@ export const Search = (props: any) => { )} + {redirectionModal} {flyout}
); diff --git a/public/components/common/search/sql_search.tsx b/public/components/common/search/sql_search.tsx index a707463648..1d53e6af64 100644 --- a/public/components/common/search/sql_search.tsx +++ b/public/components/common/search/sql_search.tsx @@ -93,7 +93,6 @@ export const DirectSearch = (props: any) => { const [isLanguagePopoverOpen, setLanguagePopoverOpen] = useState(false); const [queryLang, setQueryLang] = useState(explorerSearchMetadata.lang || QUERY_LANGUAGE.SQL); const sqlService = new SQLService(coreRefs.http); - const { application } = coreRefs; const { data: pollingResult, @@ -140,10 +139,6 @@ export const DirectSearch = (props: any) => { ); const handleQueryLanguageChange = (lang: QUERY_LANGUAGE) => { - if (lang === 'DQL') { - application!.navigateToUrl('../app/data-explorer/discover'); - return; - } dispatch(updateSearchMetaData({ tabId, data: { lang } })); setQueryLang(lang); closeLanguagePopover(); diff --git a/public/components/event_analytics/explorer/datasources/datasources_selection.tsx b/public/components/event_analytics/explorer/datasources/datasources_selection.tsx index 122e7cc7f8..cfd8166c8b 100644 --- a/public/components/event_analytics/explorer/datasources/datasources_selection.tsx +++ b/public/components/event_analytics/explorer/datasources/datasources_selection.tsx @@ -50,6 +50,8 @@ import { SELECTED_TIMESTAMP, } from '../../../../../common/constants/explorer'; +const DATA_SOURCE_SELECTOR_CONFIGS = { customGroupTitleExtension: '' }; + const getDataSourceState = (selectedSourceState: SelectedDataSource[]) => { if (selectedSourceState.length === 0) return []; return [ @@ -255,6 +257,7 @@ export const DataSourceSelection = ({ tabId }: { tabId: string }) => { onDataSourceSelect={handleSourceChange} onFetchDataSetError={handleDataSetFetchError} singleSelection={{ asPlainText: true }} + dataSourceSelectorConfigs={DATA_SOURCE_SELECTOR_CONFIGS} /> ); };