Query selector working

Signed-off-by: abbyhu2000 <[email protected]>
opensearch-project · Dec 15, 2023 · fb3fcb8 · fb3fcb8
1 parent 608ce47
commit fb3fcb8
Show file tree

Hide file tree

Showing 16 changed files with 115 additions and 102 deletions.
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "dashboarding"
   ],
   "private": true,
-  "version": "2.11.0",
+  "version": "3.0.0",
   "branch": "main",
   "types": "./opensearch_dashboards.d.ts",
   "tsdocMetadata": "./build/tsdoc-metadata.json",

diff --git a/plugins_internal/.gitignore b/plugins_internal/.gitignore
diff --git a/src/plugins/data/opensearch_dashboards.json b/src/plugins/data/opensearch_dashboards.json
@@ -4,7 +4,7 @@
   "server": true,
   "ui": true,
   "requiredPlugins": ["expressions", "uiActions"],
-  "optionalPlugins": ["usageCollection", "dataSource", "observability-dashboards"],
+  "optionalPlugins": ["usageCollection", "dataSource"],
   "extraPublicDirs": ["common", "common/utils/abort_utils", "common/index_patterns/utils.ts"],
   "requiredBundles": [
     "usageCollection",

diff --git a/src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx b/src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx
@@ -117,8 +117,6 @@ export const DataSourceSelectable = ({
     (selectedOptions: any) => onDataSourceSelect(selectedOptions),
     [onDataSourceSelect]
   );
-  console.log("dataSourceOptionList", dataSourceOptionList)
-  console.log("selectedSource", selectedSources)
 
   return (
     <EuiComboBox

diff --git a/src/plugins/data/public/types.ts b/src/plugins/data/public/types.ts
@@ -42,15 +42,15 @@ import { IndexPatternsContract } from './index_patterns';
 import { IndexPatternSelectProps, StatefulSearchBarProps } from './ui';
 import { UsageCollectionSetup } from '../../usage_collection/public';
 import { DataSourceStart } from './data_sources/datasource_services/types';
-
+import { ObservabilitySetup } from '../../../../plugins/dashboards-observability/public/types';
 export interface DataPublicPluginEnhancements {
   search: SearchEnhancements;
 }
 
 export interface DataSetupDependencies {
   expressions: ExpressionsSetup;
   uiActions: UiActionsSetup;
-  usageCollection?: UsageCollectionSetup
+  usageCollection?: UsageCollectionSetup;
 }
 
 export interface DataStartDependencies {

diff --git 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
@@ -0,0 +1,3 @@
+.languageSwitcher {
+  max-width: 150px;
+}
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
@@ -43,32 +43,32 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import React, { useState } from 'react';
-import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
-import { useCallback } from 'react';
 import { Observable } from 'rxjs';
 import { useObservable } from 'react-use';
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 
 interface Props {
   language: string;
   onSelectLanguage: (newLanguage: string) => void;
   anchorPosition?: PopoverAnchorPosition;
-  currentApp$?: Observable<string|undefined>
+  currentApp$?: Observable<string | undefined>;
+  useNewQuerySelector?: boolean;
 }
 
 export function QueryLanguageSwitcher(props: Props) {
   const dataExplorerOptions = [
     {
-      label: 'DQL'
+      label: 'DQL',
     },
     {
       label: 'lucene',
     },
     {
-      label: 'PPL'
-    }
-  ]
-  const [selectedLanguage, setSelectedLanguage] = useState([dataExplorerOptions[0]])
-  
+      label: 'PPL',
+    },
+  ];
+  const [selectedLanguage, setSelectedLanguage] = useState([dataExplorerOptions[0]]);
+
   const osdDQLDocs = useOpenSearchDashboards().services.docLinks?.links.opensearchDashboards.dql
     .base;
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -85,8 +85,6 @@ export function QueryLanguageSwitcher(props: Props) {
     />
   );
 
-
-
   const button = (
     <EuiButtonEmpty
       size="xs"
@@ -98,89 +96,87 @@ export function QueryLanguageSwitcher(props: Props) {
     </EuiButtonEmpty>
   );
 
-  const handleLanguageChange = (newLanguage:any) => {
-      const queryLanguage = newLanguage[0].label === 'DQL' ? 'kuery' : newLanguage[0].label;	
-      props.onSelectLanguage(queryLanguage)
-      setSelectedLanguage(newLanguage)
-    }
+  const handleLanguageChange = (newLanguage: any) => {
+    const queryLanguage = newLanguage[0].label === 'DQL' ? 'kuery' : newLanguage[0].label;
+    props.onSelectLanguage(queryLanguage);
+    setSelectedLanguage(newLanguage);
+  };
 
-  if(props.currentApp$ && useObservable(props.currentApp$, '') === "data-explorer"){
+  if (useObservable(props.currentApp$!, '') === 'data-explorer' && props.useNewQuerySelector) {
     return (
       <EuiComboBox
+        className="languageSwitcher"
         data-test-subj="languageSelect"
         options={dataExplorerOptions}
         selectedOptions={selectedLanguage}
         onChange={handleLanguageChange}
-        singleSelection={{asPlainText: true}}
+        singleSelection={{ asPlainText: true }}
         isClearable={false}
         async
       />
-  );
-  }
-  else{
-    return (	  
-      <EuiPopover	    
-        id="queryLanguageSwitcherPopover"	      
-        anchorClassName="euiFormControlLayout__append"	     
-        ownFocus	      
-        anchorPosition={props.anchorPosition || 'downRight'}	    
-        button={button}	   
-        isOpen={isPopoverOpen}	  
-        closePopover={() => setIsPopoverOpen(false)}	
-        repositionOnScroll	
-      >	
-        <EuiPopoverTitle>	
-          <FormattedMessage	
-            id="data.query.queryBar.syntaxOptionsTitle"	
-            defaultMessage="Syntax options"	
-          />	
-        </EuiPopoverTitle>	
-        <div style={{ width: '350px' }}>	
-          <EuiText>	
-            <p>	
-              <FormattedMessage	
-                id="data.query.queryBar.syntaxOptionsDescription"	
+    );
+  } else {
+    return (
+      <EuiPopover
+        id="queryLanguageSwitcherPopover"
+        anchorClassName="euiFormControlLayout__append"
+        ownFocus
+        anchorPosition={props.anchorPosition || 'downRight'}
+        button={button}
+        isOpen={isPopoverOpen}
+        closePopover={() => setIsPopoverOpen(false)}
+        repositionOnScroll
+      >
+        <EuiPopoverTitle>
+          <FormattedMessage
+            id="data.query.queryBar.syntaxOptionsTitle"
+            defaultMessage="Syntax options"
+          />
+        </EuiPopoverTitle>
+        <div style={{ width: '350px' }}>
+          <EuiText>
+            <p>
+              <FormattedMessage
+                id="data.query.queryBar.syntaxOptionsDescription"
                 defaultMessage="The {docsLink} (DQL) offers a simplified query	
                 syntax and support for scripted fields. If you turn off DQL,	
-                OpenSearch Dashboards uses Lucene."	
-                values={{	
-                  docsLink: (	
-                    <EuiLink href={osdDQLDocs} target="_blank">	
-                      {dqlFullName}	
-                    </EuiLink>	
-                  ),	
-                }}	
-              />	
-            </p>	
-          </EuiText>	
-
-          <EuiSpacer size="m" />	
-
-
-          <EuiForm>	  
-            <EuiFormRow label={dqlFullName}>	    
-              <EuiSwitch	      
-                id="queryEnhancementOptIn"	     
-                name="popswitch"	      
-                label={	     
-                  props.language === 'kuery' ? (	     
-                    <FormattedMessage id="data.query.queryBar.dqlOnLabel" defaultMessage="On" />	     
-                  ) : (	     
-                    <FormattedMessage id="data.query.queryBar.dqlOffLabel" defaultMessage="Off" />	    
-                  )	
-                }	
-                checked={props.language === 'kuery'}	
-                onChange={() => {	
-                  const newLanguage = props.language === 'lucene' ? 'kuery' : 'lucene';	
-                  props.onSelectLanguage(newLanguage);	
-                }}	
-                data-test-subj="languageToggle"	
-              />	
-            </EuiFormRow>	
-          </EuiForm>	
-        </div>	
+                OpenSearch Dashboards uses Lucene."
+                values={{
+                  docsLink: (
+                    <EuiLink href={osdDQLDocs} target="_blank">
+                      {dqlFullName}
+                    </EuiLink>
+                  ),
+                }}
+              />
+            </p>
+          </EuiText>
+
+          <EuiSpacer size="m" />
+
+          <EuiForm>
+            <EuiFormRow label={dqlFullName}>
+              <EuiSwitch
+                id="queryEnhancementOptIn"
+                name="popswitch"
+                label={
+                  props.language === 'kuery' ? (
+                    <FormattedMessage id="data.query.queryBar.dqlOnLabel" defaultMessage="On" />
+                  ) : (
+                    <FormattedMessage id="data.query.queryBar.dqlOffLabel" defaultMessage="Off" />
+                  )
+                }
+                checked={props.language === 'kuery'}
+                onChange={() => {
+                  const newLanguage = props.language === 'lucene' ? 'kuery' : 'lucene';
+                  props.onSelectLanguage(newLanguage);
+                }}
+                data-test-subj="languageToggle"
+              />
+            </EuiFormRow>
+          </EuiForm>
+        </div>
       </EuiPopover>
-    )
+    );
   }
- }
-
+}
diff --git a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx
@@ -83,6 +83,7 @@ export interface QueryBarTopRowProps {
   isDirty: boolean;
   timeHistory?: TimeHistoryContract;
   indicateNoData?: boolean;
+  useNewQuerySelector?: boolean;
 }
 
 // Needed for React.lazy
@@ -92,7 +93,14 @@ export default function QueryBarTopRow(props: QueryBarTopRowProps) {
   const [isQueryInputFocused, setIsQueryInputFocused] = useState(false);
 
   const opensearchDashboards = useOpenSearchDashboards<IDataPluginServices>();
-  const { application, uiSettings, notifications, storage, appName, docLinks } = opensearchDashboards.services;
+  const {
+    application,
+    uiSettings,
+    notifications,
+    storage,
+    appName,
+    docLinks,
+  } = opensearchDashboards.services;
 
   const currentApp = application?.currentAppId$;
   const osdDQLDocs: string = docLinks!.links.opensearchDashboards.dql.base;
@@ -213,6 +221,7 @@ export default function QueryBarTopRow(props: QueryBarTopRowProps) {
           persistedLog={persistedLog}
           dataTestSubj={props.dataTestSubj}
           currentApp$={currentApp}
+          useNewQuerySelector={props.useNewQuerySelector}
         />
       </EuiFlexItem>
     );

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
@@ -47,6 +47,7 @@ import {
 import { FormattedMessage } from '@osd/i18n/react';
 import { debounce, compact, isEqual, isFunction } from 'lodash';
 import { Toast } from 'src/core/public';
+import { Observable } from 'rxjs';
 import { IDataPluginServices, IIndexPattern, Query } from '../..';
 import { QuerySuggestion, QuerySuggestionTypes } from '../../autocomplete';
 
@@ -59,7 +60,6 @@ import { QueryLanguageSwitcher } from './language_switcher';
 import { PersistedLog, getQueryLog, matchPairs, toUser, fromUser } from '../../query';
 import { SuggestionsListSize } from '../typeahead/suggestions_component';
 import { SuggestionsComponent } from '..';
-import { Observable } from 'rxjs';
 
 export interface QueryStringInputProps {
   indexPatterns: Array<IIndexPattern | string>;
@@ -79,7 +79,8 @@ export interface QueryStringInputProps {
   size?: SuggestionsListSize;
   className?: string;
   isInvalid?: boolean;
-  currentApp$?: Observable<string|undefined>
+  currentApp$?: Observable<string | undefined>;
+  useNewQuerySelector?: boolean;
 }
 
 interface Props extends QueryStringInputProps {
@@ -122,7 +123,7 @@ export default class QueryStringInputUI extends Component<Props, State> {
     selectionEnd: null,
     indexPatterns: [],
     queryBarRect: undefined,
-    currentApp: undefined
+    currentApp: undefined,
   };
 
   public inputRef: HTMLTextAreaElement | null = null;
@@ -233,8 +234,6 @@ export default class QueryStringInputUI extends Component<Props, State> {
       if (this.persistedLog) {
         this.persistedLog.add(query.query);
       }
-
-      console.log("on submit query language", query.language)
       this.props.onSubmit({ query: fromUser(query.query), language: query.language });
     }
   };
@@ -463,8 +462,8 @@ export default class QueryStringInputUI extends Component<Props, State> {
   };
 
   private onSelectLanguage = (language: string) => {
-    if(language === 'PPL'){
-      this.services.application?.navigateToUrl('../observability-logs#/explorer')
+    if (language === 'PPL') {
+      this.services.application?.navigateToUrl('../observability-logs#/explorer');
       return;
     }
     // Send telemetry info every time the user opts in or out of kuery
@@ -711,6 +710,7 @@ export default class QueryStringInputUI extends Component<Props, State> {
           anchorPosition={this.props.languageSwitcherPopoverAnchorPosition}
           onSelectLanguage={this.onSelectLanguage}
           currentApp$={this.props.currentApp$}
+          useNewQuerySelector={this.props.useNewQuerySelector}
         />
       </div>
     );

diff --git a/src/plugins/data/public/ui/search_bar/create_search_bar.tsx b/src/plugins/data/public/ui/search_bar/create_search_bar.tsx
@@ -188,6 +188,7 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
           showAutoRefreshOnly={props.showAutoRefreshOnly}
           showDatePicker={props.showDatePicker}
           showFilterBar={props.showFilterBar}
+          useNewQuerySelector={props.useNewQuerySelector}
           showQueryBar={props.showQueryBar}
           showQueryInput={props.showQueryInput}
           showSaveQuery={props.showSaveQuery}

diff --git a/src/plugins/data/public/ui/search_bar/search_bar.tsx b/src/plugins/data/public/ui/search_bar/search_bar.tsx
@@ -47,6 +47,7 @@ import { TimeRange, Query, Filter, IIndexPattern } from '../../../common';
 import { FilterBar } from '../filter_bar/filter_bar';
 import { SavedQueryMeta, SaveQueryForm } from '../saved_query_form';
 import { SavedQueryManagementComponent } from '../saved_query_management';
+import { services } from '../../../../../../test/api_integration/services/index';
 
 interface SearchBarInjectedDeps {
   opensearchDashboards: OpenSearchDashboardsReactContextValue<IDataPluginServices>;
@@ -92,6 +93,7 @@ export interface SearchBarOwnProps {
 
   onRefresh?: (payload: { dateRange: TimeRange }) => void;
   indicateNoData?: boolean;
+  useNewQuerySelector?: boolean;
 }
 
 export type SearchBarProps = SearchBarOwnProps & SearchBarInjectedDeps;
@@ -418,6 +420,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
           }
           dataTestSubj={this.props.dataTestSubj}
           indicateNoData={this.props.indicateNoData}
+          useNewQuerySelector={this.props.useNewQuerySelector}
         />
       );
     }