explorer ui updates

Signed-off-by: Shenoy Pratik <[email protected]>
ps48 · Oct 6, 2023 · fb1dbf6 · fb1dbf6
1 parent 849b953
commit fb1dbf6
Show file tree

Hide file tree

Showing 10 changed files with 268 additions and 189 deletions.
diff --git a/public/components/common/search/autocomplete.tsx b/public/components/common/search/autocomplete.tsx
@@ -4,15 +4,15 @@
  */
 /* eslint-disable react-hooks/exhaustive-deps */
 
-import './search.scss';
-import $ from 'jquery';
-import React, { useEffect, useMemo, useState } from 'react';
 import { AutocompleteState, createAutocomplete } from '@algolia/autocomplete-core';
 import { EuiFieldText, EuiTextArea } from '@elastic/eui';
+import $ from 'jquery';
 import DSLService from 'public/services/requests/dsl';
-import { IQueryBarProps } from './search';
-import { uiSettingsService } from '../../../../common/utils';
+import React, { useEffect, useMemo, useState } from 'react';
 import { AutocompleteItem } from '../../../../common/constants/autocomplete';
+import { uiSettingsService } from '../../../../common/utils';
+import { IQueryBarProps } from './search';
+import './search.scss';
 
 interface AutocompleteProps extends IQueryBarProps {
   getSuggestions: (
@@ -136,6 +136,7 @@ export const Autocomplete = (props: AutocompleteProps) => {
   return (
     <div className="aa-Autocomplete" {...autocomplete.getRootProps({ id: 'autocomplete-root' })}>
       <TextArea
+        style={{ marginTop: '0px', height: '18px', padding: '8px' }}
         {...autocomplete.getInputProps({
           id: 'autocomplete-textarea',
           'data-test-subj': 'searchAutocompleteTextArea',

diff --git a/public/components/common/search/search.scss b/public/components/common/search/search.scss
@@ -5,14 +5,14 @@
 
 .globalQueryBar {
   margin: 0;
-  padding: .5rem;
+  padding: 0.5rem;
 }
 .aa-Autocomplete {
   width: 100%;
   position: relative;
   --aa-search-input-height: 38px;
-  --aa-panel-border-color-rgb: rgba(227,230,238,255);
-  --aa-input-background-color-rbg: rgba(250,251,253,255);
+  --aa-panel-border-color-rgb: rgba(227, 230, 238, 255);
+  --aa-input-background-color-rbg: rgba(250, 251, 253, 255);
 }
 .styling {
   font-weight: bold;
@@ -26,7 +26,7 @@
 #autocomplete-textarea {
   width: 100%;
   outline: none;
-  min-height: 48px;
+  min-height: 40px;
   max-width: unset;
   height: 45px;
   resize: vertical;
@@ -40,12 +40,12 @@
 }
 
 .aa-Panel--scrollable-dark {
-  background-color: #1D1E24;
+  background-color: #1d1e24;
   border: 2px groove #383444;
 }
 
 .aa-Item-dark {
-  color: #DFE5EF;
+  color: #dfe5ef;
 }
 
 .event-date-picker {
@@ -60,11 +60,11 @@
   background-color: transparent;
 }
 .ppl-link-light {
-  color: #006BB4;
+  color: #006bb4;
 }
 
 .ppl-link-dark {
-  color: #1BA9F5;
+  color: #1ba9f5;
 }
 
 .base-query-popover {

diff --git a/public/components/common/search/search.tsx b/public/components/common/search/search.tsx
@@ -5,39 +5,39 @@
 
 import './search.scss';
 
-import React, { useState, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { isEqual, lowerCase } from 'lodash';
+import '@algolia/autocomplete-theme-classic';
 import {
-  EuiFlexGroup,
+  EuiBadge,
   EuiButton,
+  EuiButtonEmpty,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiFlexGroup,
   EuiFlexItem,
   EuiPopover,
-  EuiButtonEmpty,
   EuiPopoverFooter,
-  EuiBadge,
-  EuiContextMenuPanel,
   EuiToolTip,
-  EuiComboBox,
 } from '@elastic/eui';
-import { DatePicker } from './date_picker';
-import '@algolia/autocomplete-theme-classic';
-import { Autocomplete } from './autocomplete';
-import { SavePanel } from '../../event_analytics/explorer/save_panel';
-import { PPLReferenceFlyout } from '../helpers';
-import { uiSettingsService } from '../../../../common/utils';
+import { isEqual } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { APP_ANALYTICS_TAB_ID_REGEX, RAW_QUERY } from '../../../../common/constants/explorer';
-import { LiveTailButton, StopLiveButton } from '../live_tail/live_tail_button';
 import { PPL_SPAN_REGEX } from '../../../../common/constants/shared';
-import { coreRefs } from '../../../framework/core_refs';
+import { uiSettingsService } from '../../../../common/utils';
 import { useFetchEvents } from '../../../components/event_analytics/hooks';
+import { changeQuery } from '../../../components/event_analytics/redux/slices/query_slice';
+import { usePolling } from '../../../components/hooks/use_polling';
+import { coreRefs } from '../../../framework/core_refs';
 import { SQLService } from '../../../services/requests/sql';
+import { SavePanel } from '../../event_analytics/explorer/save_panel';
 import {
   selectSearchMetaData,
   update as updateSearchMetaData,
 } from '../../event_analytics/redux/slices/search_meta_data_slice';
-import { usePolling } from '../../../components/hooks/use_polling';
-import { changeQuery } from '../../../components/event_analytics/redux/slices/query_slice';
+import { PPLReferenceFlyout } from '../helpers';
+import { LiveTailButton, StopLiveButton } from '../live_tail/live_tail_button';
+import { Autocomplete } from './autocomplete';
+import { DatePicker } from './date_picker';
 export interface IQueryBarProps {
   query: string;
   tempQuery: string;
@@ -101,8 +101,9 @@ export const Search = (props: any) => {
   const dispatch = useDispatch();
   const appLogEvents = tabId.match(APP_ANALYTICS_TAB_ID_REGEX);
   const [isSavePanelOpen, setIsSavePanelOpen] = useState(false);
+  const [isLanguagePopoverOpen, setLanguagePopoverOpen] = useState(false);
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
-  const [queryLang, setQueryLang] = useState([]);
+  const [queryLang, setQueryLang] = useState('PPL');
   const [jobId, setJobId] = useState('');
   const sqlService = new SQLService(coreRefs.http);
   const { application } = coreRefs;
@@ -161,21 +162,45 @@ export const Search = (props: any) => {
     />
   );
 
-  const handleQueryLanguageChange = (lang) => {
-    if (lang[0].label === 'DQL') {
-      return application.navigateToUrl(
+  const handleQueryLanguageChange = (lang: string) => {
+    if (lang === 'DQL') {
+      return application!.navigateToUrl(
         `../app/data-explorer/discover#?_a=(discover:(columns:!(_source),isDirty:!f,sort:!()),metadata:(indexPattern:'${explorerSearchMetadata.datasources[0].value}',view:discover))&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))&_q=(filters:!(),query:(language:kuery,query:''))`
       );
     }
     dispatch(
       updateSearchMetaData({
         tabId,
-        data: { lang: lang[0].label },
+        data: { lang },
       })
     );
     setQueryLang(lang);
+    closeLanguagePopover();
   };
 
+  const onLanguagePopoverClick = () => {
+    setLanguagePopoverOpen(!isLanguagePopoverOpen);
+  };
+
+  const closeLanguagePopover = () => {
+    setLanguagePopoverOpen(false);
+  };
+
+  const languagePopOverItems = [
+    <EuiContextMenuItem key="PPL" onClick={() => handleQueryLanguageChange('PPL')}>
+      PPL
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem key="DQL" onClick={() => handleQueryLanguageChange('DQL')}>
+      DQL
+    </EuiContextMenuItem>,
+  ];
+
+  const languagePopOverButton = (
+    <EuiButton iconType="arrowDown" iconSide="right" onClick={onLanguagePopoverClick} color="text">
+      {queryLang}
+    </EuiButton>
+  );
+
   const onQuerySearch = (lang) => {
     handleTimeRangePickerRefresh();
   };
@@ -217,14 +242,17 @@ export const Search = (props: any) => {
             </EuiToolTip>
           </EuiFlexItem>
         )}
-        <EuiFlexItem key="lang-selector" className="search-area" grow={1}>
-          <EuiComboBox
-            placeholder="No language selected yet"
-            options={[{ label: 'PPL' }, { label: 'DQL' }]}
-            selectedOptions={queryLang}
-            onChange={handleQueryLanguageChange}
-            singleSelection={{ asPlainText: true }}
-          />
+        <EuiFlexItem key="lang-selector" className="search-area lang-selector" grow={false}>
+          <EuiPopover
+            id="smallContextMenuExample"
+            button={languagePopOverButton}
+            isOpen={isLanguagePopoverOpen}
+            closePopover={closeLanguagePopover}
+            panelPaddingSize="none"
+            anchorPosition="downLeft"
+          >
+            <EuiContextMenuPanel size="s" items={languagePopOverItems} />
+          </EuiPopover>
         </EuiFlexItem>
         <EuiFlexItem key="search-bar" className="search-area" grow={5}>
           <Autocomplete

diff --git a/public/components/common/search/sql_search.tsx b/public/components/common/search/sql_search.tsx
@@ -5,37 +5,36 @@
 
 import './search.scss';
 
-import React, { useState, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { isEqual, lowerCase } from 'lodash';
+import '@algolia/autocomplete-theme-classic';
 import {
-  EuiFlexGroup,
+  EuiBadge,
   EuiButton,
+  EuiButtonEmpty,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiFlexGroup,
   EuiFlexItem,
   EuiPopover,
-  EuiButtonEmpty,
   EuiPopoverFooter,
-  EuiBadge,
   EuiToolTip,
-  EuiComboBox,
-  EuiTextArea,
 } from '@elastic/eui';
-import { DatePicker } from './date_picker';
-import '@algolia/autocomplete-theme-classic';
-import { Autocomplete } from './autocomplete';
-import { SavePanel } from '../../event_analytics/explorer/save_panel';
-import { PPLReferenceFlyout } from '../helpers';
-import { uiSettingsService } from '../../../../common/utils';
-import { APP_ANALYTICS_TAB_ID_REGEX, RAW_QUERY } from '../../../../common/constants/explorer';
+import { isEqual, lowerCase } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { APP_ANALYTICS_TAB_ID_REGEX } from '../../../../common/constants/explorer';
 import { PPL_SPAN_REGEX } from '../../../../common/constants/shared';
-import { coreRefs } from '../../../framework/core_refs';
+import { uiSettingsService } from '../../../../common/utils';
 import { useFetchEvents } from '../../../components/event_analytics/hooks';
-import { SQLService } from '../../../services/requests/sql';
 import { usePolling } from '../../../components/hooks/use_polling';
+import { coreRefs } from '../../../framework/core_refs';
+import { SQLService } from '../../../services/requests/sql';
+import { SavePanel } from '../../event_analytics/explorer/save_panel';
 import {
   selectSearchMetaData,
   update as updateSearchMetaData,
 } from '../../event_analytics/redux/slices/search_meta_data_slice';
+import { PPLReferenceFlyout } from '../helpers';
+import { Autocomplete } from './autocomplete';
 export interface IQueryBarProps {
   query: string;
   tempQuery: string;
@@ -100,7 +99,8 @@ export const DirectSearch = (props: any) => {
   const appLogEvents = tabId.match(APP_ANALYTICS_TAB_ID_REGEX);
   const [isSavePanelOpen, setIsSavePanelOpen] = useState(false);
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
-  const [queryLang, setQueryLang] = useState([]);
+  const [isLanguagePopoverOpen, setLanguagePopoverOpen] = useState(false);
+  const [queryLang, setQueryLang] = useState('SQL');
   const [jobId, setJobId] = useState('');
   const sqlService = new SQLService(coreRefs.http);
   const { application } = coreRefs;
@@ -149,21 +149,45 @@ export const DirectSearch = (props: any) => {
     </EuiButton>
   );
 
-  const handleQueryLanguageChange = (lang) => {
-    if (lang[0].label === 'DQL') {
-      return application.navigateToUrl(
+  const handleQueryLanguageChange = (lang: string) => {
+    if (lang === 'DQL') {
+      return application!.navigateToUrl(
         `../app/data-explorer/discover#?_a=(discover:(columns:!(_source),isDirty:!f,sort:!()),metadata:(indexPattern:'${explorerSearchMetadata.datasources[0].value}',view:discover))&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))&_q=(filters:!(),query:(language:kuery,query:''))`
       );
     }
     dispatch(
       updateSearchMetaData({
         tabId,
-        data: { lang: lang[0].label },
+        data: { lang },
       })
     );
     setQueryLang(lang);
+    closeLanguagePopover();
+  };
+
+  const onLanguagePopoverClick = () => {
+    setLanguagePopoverOpen(!isLanguagePopoverOpen);
   };
 
+  const closeLanguagePopover = () => {
+    setLanguagePopoverOpen(false);
+  };
+
+  const languagePopOverItems = [
+    <EuiContextMenuItem key="SQL" onClick={() => handleQueryLanguageChange('SQL')}>
+      SQL
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem key="PPL" onClick={() => handleQueryLanguageChange('PPL')}>
+      PPL
+    </EuiContextMenuItem>,
+  ];
+
+  const languagePopOverButton = (
+    <EuiButton iconType="arrowDown" iconSide="right" onClick={onLanguagePopoverClick} color="text">
+      {queryLang}
+    </EuiButton>
+  );
+
   const onQuerySearch = (lang) => {
     setIsQueryRunning(true);
     dispatch(
@@ -176,7 +200,7 @@ export const DirectSearch = (props: any) => {
     );
     sqlService
       .fetch({
-        lang: lowerCase(lang[0].label),
+        lang: lowerCase(lang),
         query: tempQuery || query,
         datasource: explorerSearchMetadata.datasources[0].name,
       })
@@ -235,14 +259,17 @@ export const DirectSearch = (props: any) => {
             </EuiToolTip>
           </EuiFlexItem>
         )}
-        <EuiFlexItem key="lang-selector" className="search-area" grow={1}>
-          <EuiComboBox
-            placeholder="No language selected yet"
-            options={[{ label: 'SQL' }, { label: 'PPL' }]}
-            selectedOptions={queryLang}
-            onChange={handleQueryLanguageChange}
-            singleSelection={{ asPlainText: true }}
-          />
+        <EuiFlexItem key="lang-selector" className="search-area" grow={false}>
+          <EuiPopover
+            id="smallContextMenuExample"
+            button={languagePopOverButton}
+            isOpen={isLanguagePopoverOpen}
+            closePopover={closeLanguagePopover}
+            panelPaddingSize="none"
+            anchorPosition="downLeft"
+          >
+            <EuiContextMenuPanel size="s" items={languagePopOverItems} />
+          </EuiPopover>
         </EuiFlexItem>
         <EuiFlexItem key="search-bar" className="search-area" grow={5}>
           <Autocomplete
@@ -258,9 +285,9 @@ export const DirectSearch = (props: any) => {
             getSuggestions={getSuggestions}
             onItemSelect={onItemSelect}
             tabId={tabId}
-            isSuggestionDisabled={queryLang[0]?.label === 'SQL'}
+            isSuggestionDisabled={queryLang === 'SQL'}
           />
-          {queryLang[0]?.label && (
+          {queryLang === 'PPL' && (
             <EuiBadge
               className={`ppl-link ${
                 uiSettingsService.get('theme:darkMode') ? 'ppl-link-dark' : 'ppl-link-light'