Revert "[Feature] Match discover look and feel (opensearch-project#1135…

…) (opensearch-project#1179)"

This reverts commit b69801e.

common/constants/shared.ts

@@ -242,7 +242,6 @@ export const WAITING_TIME_ON_USER_ACTIONS = 300;
 export const VISUALIZATION_ERROR = {
   NO_DATA: 'No data found.',
   INVALID_DATA: 'Invalid visualization data',
-  NO_SERIES: 'Add a field to start',
 };
 
 export const S3_DATASOURCE_TYPE = 'S3_DATASOURCE';

common/types/explorer.ts

@@ -38,7 +38,6 @@ import {
   SavedObjectsStart,
 } from '../../../../src/core/public/saved_objects';
 import { ChromeBreadcrumb } from '../../../../src/core/public/chrome';
-import { DataSourceType } from '../../../../src/plugins/data/public';
 
 export interface IQueryTab {
   id: string;
@@ -146,23 +145,13 @@ export interface IExplorerProps {
   queryManager?: QueryManager;
 }
 
-export interface SelectedDataSource {
-  label: string;
-  name: string;
-  value: string;
-  type: string;
-  ds?: DataSourceType;
-}
-
-export interface SavedQuery extends SavedObjectAttributes {
+export interface SavedQuery {
   description: string;
   name: string;
   query: string;
   selected_date_range: { start: string; end: string; text: string };
   selected_fields: { text: string; tokens: IField[] };
   selected_timestamp: IField;
-  dataSources: string; // list of type SelectedDataSources that is stringified
-  queryLang: string;
 }
 
 export interface SavedVisualization extends SavedObjectAttributes {
@@ -177,8 +166,6 @@ export interface SavedVisualization extends SavedObjectAttributes {
   user_configs?: string;
   units_of_measure?: string;
   application_id?: string;
-  dataSources: string; // list of type SelectedDataSources that is stringified
-  queryLang: string;
 }
 
 export interface ExplorerDataType {
@@ -419,11 +406,3 @@ export interface GridSortingColumn {
   id: string;
   direction: 'asc' | 'desc';
 }
-
-export enum DirectQueryLoadingStatus {
-  SUCCESS = 'SUCCESS',
-  FAILED = 'FAILED',
-  RUNNING = 'RUNNING',
-  SCHEDULED = 'SCHEDULED',
-  CANCELED = 'CANCELED',
-}

common/types/observability_saved_object_attributes.ts

@@ -4,14 +4,10 @@
  */
 
 import { SavedObjectAttributes } from '../../../../src/core/types';
-import { SavedQuery, SavedVisualization } from './explorer';
+import { SavedVisualization } from './explorer';
 
 export const VISUALIZATION_SAVED_OBJECT = 'observability-visualization';
-export const SEARCH_SAVED_OBJECT = 'observability-search';
-export const OBSERVABILTY_SAVED_OBJECTS = [
-  VISUALIZATION_SAVED_OBJECT,
-  SEARCH_SAVED_OBJECT,
-] as const;
+export const OBSERVABILTY_SAVED_OBJECTS = [VISUALIZATION_SAVED_OBJECT] as const;
 export const SAVED_OBJECT_VERSION = 1;
 
 export interface VisualizationSavedObjectAttributes extends SavedObjectAttributes {
@@ -21,11 +17,3 @@ export interface VisualizationSavedObjectAttributes extends SavedObjectAttribute
   createdTimeMs: number;
   savedVisualization: SavedVisualization;
 }
-
-export interface SearchSavedObjectAttributes extends SavedObjectAttributes {
-  title: string;
-  description: string;
-  version: number;
-  createdTimeMs: number;
-  savedQuery: SavedQuery;
-}

common/utils/index.ts

@@ -10,7 +10,6 @@ export {
   buildRawQuery,
   composeFinalQuery,
   removeBacktick,
-  getSavingCommonParams,
 } from '../../public/components/common/query_utils';
 
 export * from './core_services';

public/components/application_analytics/components/application.tsx

@@ -116,7 +116,6 @@ export function Application(props: AppDetailProps) {
     callback,
     queryManager,
     mode,
-    dataSourcePluggables,
   } = props;
   const [application, setApplication] = useState<ApplicationType>({
     id: '',
@@ -372,7 +371,6 @@ export function Application(props: AppDetailProps) {
         callbackInApp={callbackInApp}
         queryManager={queryManager}
         curSelectedTabId={selectedTabId}
-        dataSourcePluggables={dataSourcePluggables}
       />
     );
   };

public/components/application_analytics/home.tsx

@@ -73,7 +73,6 @@ export const Home = (props: HomeProps) => {
     chrome,
     notifications,
     queryManager,
-    dataSourcePluggables,
   } = props;
   const [triggerSwitchToEvent, setTriggerSwitchToEvent] = useState(0);
   const dispatch = useDispatch();
@@ -141,7 +140,6 @@ export const Home = (props: HomeProps) => {
     setEndTime,
     mode: 'data_prepper',
     dataPrepperIndicesExist: indicesExist,
-    dataSourcePluggables,
   };
 
   const setToast = (title: string, color = 'success', text?: ReactChild) => {

public/components/common/field_icon/field_icon.tsx

@@ -50,7 +50,7 @@ export const typeToEuiIconMap: Partial<Record<string, EuiTokenProps>> = {
 export function FieldIcon({
   type,
   label,
-  size = 's',
+  size = 'l',
   scripted,
   className,
   ...rest

public/components/common/query_utils/index.ts

@@ -6,20 +6,17 @@
 import dateMath from '@elastic/datemath';
 import { Moment } from 'moment-timezone';
 import { isEmpty } from 'lodash';
-import { SearchMetaData } from 'public/components/event_analytics/redux/slices/search_meta_data_slice';
+import moment from 'moment';
 import {
+  DATE_PICKER_FORMAT,
   PPL_DEFAULT_PATTERN_REGEX_FILETER,
-  SELECTED_DATE_RANGE,
-  SELECTED_FIELDS,
-  SELECTED_TIMESTAMP,
 } from '../../../../common/constants/explorer';
 import {
   PPL_DATE_FORMAT,
   PPL_INDEX_INSERT_POINT_REGEX,
   PPL_INDEX_REGEX,
   PPL_NEWLINE_REGEX,
 } from '../../../../common/constants/shared';
-import { IExplorerFields, IQuery } from '../../../../common/types/explorer';
 
 /*
  * "Query Utils" This file contains different reused functions in operational panels
@@ -189,6 +186,9 @@ export const preprocessQuery = ({
 
   if (!start || !end) return finalQuery;
 
+  const formattedStart = moment(start).utc().format(DATE_PICKER_FORMAT);
+  const formattedEnd = moment(end).utc().format(DATE_PICKER_FORMAT);
+
   const promQLTokens = parsePromQLIntoKeywords(rawQuery);
 
   if (promQLTokens?.connection) {
@@ -245,12 +245,24 @@ export const buildPatternsQuery = (
   return finalQuery;
 };
 
-export const buildQuery = (baseQuery: string, currQuery: string) => baseQuery + '| ' + currQuery;
+export const buildQuery = (baseQuery: string, currQuery: string) => {
+  let fullQuery: string;
+  if (baseQuery) {
+    fullQuery = baseQuery;
+    if (currQuery) {
+      fullQuery += '| ' + currQuery;
+    }
+  } else {
+    fullQuery = currQuery;
+  }
+  return fullQuery;
+};
 
-export const buildRawQuery = (query: IQuery, appBaseQuery: string) => {
-  if (appBaseQuery && !query.rawQuery.includes(appBaseQuery))
-    return buildQuery(appBaseQuery, query.rawQuery);
-  return query.rawQuery;
+export const buildRawQuery = (query: any, appBaseQuery: string) => {
+  const rawQueryStr = (query.rawQuery as string).includes(appBaseQuery)
+    ? query.rawQuery
+    : buildQuery(appBaseQuery, query.rawQuery);
+  return rawQueryStr;
 };
 
 export const composeFinalQuery = (
@@ -282,28 +294,3 @@ export const removeBacktick = (stringContainsBacktick: string) => {
   if (!stringContainsBacktick) return '';
   return stringContainsBacktick.replace(/`/g, '');
 };
-
-export const getSavingCommonParams = (
-  queryState: IQuery,
-  appBaseQuery: string,
-  fields: IExplorerFields,
-  savingTitle: string,
-  explorerSearchMeta: SearchMetaData
-) => {
-  return {
-    dataSources: JSON.stringify([
-      {
-        name: explorerSearchMeta.datasources?.[0]?.name || '',
-        type: explorerSearchMeta.datasources?.[0]?.type || '',
-        label: explorerSearchMeta.datasources?.[0]?.label || '',
-        value: explorerSearchMeta.datasources?.[0]?.value || '',
-      },
-    ]),
-    queryLang: explorerSearchMeta.lang,
-    query: buildRawQuery(queryState, appBaseQuery),
-    fields: fields[SELECTED_FIELDS],
-    dateRange: queryState[SELECTED_DATE_RANGE],
-    name: savingTitle,
-    timestamp: queryState[SELECTED_TIMESTAMP],
-  };
-};

public/components/common/search/search.tsx

@@ -20,21 +20,24 @@ import {
 } from '@elastic/eui';
 import { isEqual } from 'lodash';
 import React, { useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
-import { APP_ANALYTICS_TAB_ID_REGEX } from '../../../../common/constants/explorer';
+import { useDispatch, useSelector } from 'react-redux';
+import { APP_ANALYTICS_TAB_ID_REGEX, RAW_QUERY } from '../../../../common/constants/explorer';
 import { PPL_SPAN_REGEX } from '../../../../common/constants/shared';
 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 { update as updateSearchMetaData } from '../../event_analytics/redux/slices/search_meta_data_slice';
+import {
+  selectSearchMetaData,
+  update as updateSearchMetaData,
+} from '../../event_analytics/redux/slices/search_meta_data_slice';
 import { PPLReferenceFlyout } from '../helpers';
 import { LiveTailButton, StopLiveButton } from '../live_tail/live_tail_button';
 import { Autocomplete } from './autocomplete';
 import { DatePicker } from './date_picker';
-import { QUERY_LANGUAGE } from '../../../../common/constants/data_sources';
 export interface IQueryBarProps {
   query: string;
   tempQuery: string;
@@ -94,12 +97,14 @@ export const Search = (props: any) => {
     setIsQueryRunning,
   } = props;
 
+  const explorerSearchMetadata = useSelector(selectSearchMetaData)[tabId];
   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(QUERY_LANGUAGE.PPL);
+  const [queryLang, setQueryLang] = useState('PPL');
+  const [jobId, setJobId] = useState('');
   const sqlService = new SQLService(coreRefs.http);
   const { application } = coreRefs;
 
@@ -114,7 +119,7 @@ export const Search = (props: any) => {
   }, 5000);
 
   const requestParams = { tabId };
-  const { dispatchOnGettingHis } = useFetchEvents({
+  const { getLiveTail, getEvents, getAvailableFields, dispatchOnGettingHis } = useFetchEvents({
     pplService: new SQLService(coreRefs.http),
     requestParams,
   });
@@ -158,9 +163,10 @@ export const Search = (props: any) => {
   );
 
   const handleQueryLanguageChange = (lang: string) => {
-    if (lang === QUERY_LANGUAGE.DQL) {
-      application!.navigateToUrl('../app/data-explorer/discover');
-      return;
+    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({
@@ -181,16 +187,10 @@ export const Search = (props: any) => {
   };
 
   const languagePopOverItems = [
-    <EuiContextMenuItem
-      key={QUERY_LANGUAGE.PPL}
-      onClick={() => handleQueryLanguageChange(QUERY_LANGUAGE.PPL)}
-    >
+    <EuiContextMenuItem key="PPL" onClick={() => handleQueryLanguageChange('PPL')}>
       PPL
     </EuiContextMenuItem>,
-    <EuiContextMenuItem
-      key={QUERY_LANGUAGE.DQL}
-      onClick={() => handleQueryLanguageChange(QUERY_LANGUAGE.DQL)}
-    >
+    <EuiContextMenuItem key="DQL" onClick={() => handleQueryLanguageChange('DQL')}>
       DQL
     </EuiContextMenuItem>,
   ];
@@ -215,9 +215,24 @@ export const Search = (props: any) => {
     }
   }, [pollingResult, pollingError]);
 
+  useEffect(() => {
+    if (explorerSearchMetadata.datasources?.[0]?.type === 'DEFAULT_INDEX_PATTERNS') {
+      const queryWithSelectedSource = `source = ${explorerSearchMetadata.datasources[0].label}`;
+      handleQueryChange(queryWithSelectedSource);
+      dispatch(
+        changeQuery({
+          tabId,
+          query: {
+            [RAW_QUERY]: queryWithSelectedSource,
+          },
+        })
+      );
+    }
+  }, [explorerSearchMetadata.datasources]);
+
   return (
     <div className="globalQueryBar">
-      <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="flexStart" wrap>
+      <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="flexStart">
         {appLogEvents && (
           <EuiFlexItem style={{ minWidth: 110 }} grow={false}>
             <EuiToolTip position="top" content={baseQuery}>
@@ -227,21 +242,19 @@ export const Search = (props: any) => {
             </EuiToolTip>
           </EuiFlexItem>
         )}
-        {!appLogEvents && (
-          <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} style={{ minWidth: 400 }}>
+        <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
             key={'autocomplete-search-bar'}
             query={query}