diff --git a/CHANGELOG.md b/CHANGELOG.md index 31d65e5cf6bd..6e1de560c08e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) - [Discover] Display inner properties in the left navigation bar [#5429](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5429) - [Chrome] Introduce registerCollapsibleNavHeader to allow plugins to customize the rendering of nav menu header ([#5244](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5244)) - [Custom Branding] Relative URL should be allowed for logos ([#5572](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5572)) +- [Data Explorer] Adding PPL to query language selector ([#5623](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5623)) ### 🐛 Bug Fixes diff --git a/src/plugins/data/public/ui/query_string_input/_index.scss b/src/plugins/data/public/ui/query_string_input/_index.scss index 8686490016c5..f21b9cbb4327 100644 --- a/src/plugins/data/public/ui/query_string_input/_index.scss +++ b/src/plugins/data/public/ui/query_string_input/_index.scss @@ -1 +1,2 @@ @import "./query_bar"; +@import "./language_switcher" diff --git a/src/plugins/data/public/ui/query_string_input/_language_switcher.scss b/src/plugins/data/public/ui/query_string_input/_language_switcher.scss new file mode 100644 index 000000000000..13ed7f42007e --- /dev/null +++ b/src/plugins/data/public/ui/query_string_input/_language_switcher.scss @@ -0,0 +1,5 @@ +// TODO: removed the following CSS +// when https://github.com/opensearch-project/OpenSearch-Dashboards/issues/5628 is completed +.languageSwitcher { + max-width: 150px; +} diff --git a/src/plugins/data/public/ui/query_string_input/language_switcher.test.tsx b/src/plugins/data/public/ui/query_string_input/language_switcher.test.tsx index 22ec4e9edd96..11cac579d0f2 100644 --- a/src/plugins/data/public/ui/query_string_input/language_switcher.test.tsx +++ b/src/plugins/data/public/ui/query_string_input/language_switcher.test.tsx @@ -41,6 +41,7 @@ describe('LanguageSwitcher', () => { const services = { uiSettings: startMock.uiSettings, docLinks: startMock.docLinks, + application: startMock.application, }; return ( diff --git a/src/plugins/data/public/ui/query_string_input/language_switcher.tsx b/src/plugins/data/public/ui/query_string_input/language_switcher.tsx index 816c21bc0848..bddb13122713 100644 --- a/src/plugins/data/public/ui/query_string_input/language_switcher.tsx +++ b/src/plugins/data/public/ui/query_string_input/language_switcher.tsx @@ -30,6 +30,8 @@ import { EuiButtonEmpty, + EuiComboBox, + EuiComboBoxOptionOption, EuiForm, EuiFormRow, EuiLink, @@ -42,7 +44,9 @@ import { } from '@elastic/eui'; import { FormattedMessage } from '@osd/i18n/react'; import React, { useState } from 'react'; +import { useObservable } from 'react-use'; import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public'; +import { IDataPluginServices } from '../../types'; interface Props { language: string; @@ -51,6 +55,34 @@ interface Props { } export function QueryLanguageSwitcher(props: Props) { + const opensearchDashboards = useOpenSearchDashboards(); + const { application } = opensearchDashboards.services; + const currentApp$ = application?.currentAppId$; + let useNewQuerySelector; + application?.applications$.subscribe((applications) => { + applications.forEach((applicationEntry) => { + if (applicationEntry.id === 'observability-dashboards') { + useNewQuerySelector = true; + return; + } + }); + }); + + const dataExplorerOptions = [ + { + label: 'DQL', + }, + { + label: 'lucene', + }, + { + label: 'PPL', + }, + { + label: 'SQL', + }, + ]; + const osdDQLDocs = useOpenSearchDashboards().services.docLinks?.links.opensearchDashboards.dql .base; const [isPopoverOpen, setIsPopoverOpen] = useState(false); @@ -78,66 +110,95 @@ export function QueryLanguageSwitcher(props: Props) { ); - return ( - setIsPopoverOpen(false)} - repositionOnScroll - > - - - -
- -

- - {dqlFullName} - - ), - }} - /> -

-
+ const handleLanguageChange = (newLanguage: EuiComboBoxOptionOption[]) => { + if (['PPL', 'SQL'].includes(newLanguage[0].label)) { + application?.navigateToUrl('../observability-logs#/explorer'); + return; + } + const queryLanguage = newLanguage[0].label === 'DQL' ? 'kuery' : newLanguage[0].label; + props.onSelectLanguage(queryLanguage); + }; - + // The following is a temporary solution for adding PPL navigation, and should be replaced once final solution is determined. + // Follow-up issue: https://github.com/opensearch-project/OpenSearch-Dashboards/issues/5628 + if (useObservable(currentApp$!, '') === 'data-explorer' && useNewQuerySelector) { + const selectedLanguage = { + label: props.language === 'kuery' ? 'DQL' : props.language, + }; + return ( + + ); + } else { + return ( + setIsPopoverOpen(false)} + repositionOnScroll + > + + + +
+ +

+ + {dqlFullName} + + ), + }} + /> +

+
- - - - ) : ( - - ) - } - checked={props.language === 'kuery'} - onChange={() => { - const newLanguage = props.language === 'lucene' ? 'kuery' : 'lucene'; - props.onSelectLanguage(newLanguage); - }} - data-test-subj="languageToggle" - /> - - -
-
- ); + + + + + + ) : ( + + ) + } + checked={props.language === 'kuery'} + onChange={() => { + const newLanguage = props.language === 'lucene' ? 'kuery' : 'lucene'; + props.onSelectLanguage(newLanguage); + }} + data-test-subj="languageToggle" + /> + + +
+
+ ); + } } diff --git a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx index 5d071748700c..b6d451a17555 100644 --- a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx +++ b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx @@ -229,7 +229,6 @@ export default class QueryStringInputUI extends Component { if (this.persistedLog) { this.persistedLog.add(query.query); } - this.props.onSubmit({ query: fromUser(query.query), language: query.language }); } };