[Data Explorer] Implement data fetch logic in Discover 2.0

Signed-off-by: ananzh <[email protected]>

src/plugins/data/common/search/search_source/search_source.ts

@@ -81,6 +81,8 @@
  */
 
 import { setWith } from '@elastic/safer-lodash-set';
+import { Observable, from } from 'rxjs';
+import { switchMap, tap, of } from 'rxjs/operators';
 import { uniqueId, uniq, extend, pick, difference, omit, isObject, keys, isFunction } from 'lodash';
 import { normalizeSortRequest } from './normalize_sort_request';
 import { filterDocvalueFields } from './filter_docvalue_fields';
@@ -296,6 +298,39 @@ export class SearchSource {
     return response;
   }
 
+  /**
+   * Fetch this source and return Observable
+   */
+  fetch$(options: ISearchOptions = {}) {
+    const { getConfig } = this.dependencies;
+
+    return from(this.requestIsStarting(options)).pipe(
+      switchMap(() => this.flatten()),
+      tap((searchRequest) => {
+        this.history = [searchRequest];
+        let response$: Observable<any>;
+
+        if (getConfig(UI_SETTINGS.COURIER_BATCH_SEARCHES)) {
+          response$ = from(this.legacyFetch(searchRequest, options));
+        } else {
+          const indexPattern = this.getField('index');
+          searchRequest.dataSourceId = indexPattern?.dataSourceRef?.id;
+
+          response$ = from(this.fetchSearch(searchRequest, options));
+        }
+
+        return response$;
+      }),
+      switchMap((response) => {
+        if ((response as any).error) {
+          throw new RequestFailure(null, response);
+        }
+
+        return of(response);
+      })
+    );
+  }
+
   /**
    *  Add a handler that will be notified whenever requests start
    *  @param  {Function} handler

src/plugins/discover/public/application/components/data_grid/discover_table_component.tsx

@@ -0,0 +1,21 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// ToDo: impletment DiscoverTableComponent which return
+// should handle data columns, rows
+{
+  /* <DataGridTable
+  columns={state.columns || []}
+  indexPattern={indexPattern}
+  rows={rows}
+  sort={(state.sort as Array<[any, any]>) || []}
+  onAddColumn={addColumn}
+  onFilter={onAddFilter}
+  onRemoveColumn={onRemoveColumn}
+  onSetColumns={onSetColumns}
+  onSort={onSort}
+  displayTimeColumn={displayTimeColumn}
+  services={services}
+/>;*/
+}

src/plugins/discover/public/application/components/discover.tsx

@@ -9,8 +9,8 @@ import {
   EuiPage,
   EuiPageBody,
   EuiButtonEmpty,
-  EuiButtonIcon,
-  EuiPageSideBar,
+  //EuiButtonIcon,
+  //EuiPageSideBar,
   EuiPageContent,
   EuiFlexGroup,
   EuiFlexItem,
@@ -20,7 +20,7 @@ import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
 import { IUiSettingsClient, MountPoint } from 'opensearch-dashboards/public';
 import { HitsCounter } from './hits_counter';
 import { TimechartHeader } from './timechart_header';
-import { DiscoverSidebar } from './sidebar';
+//import { DiscoverSidebar } from './sidebar';
 import { DataGridTable } from './data_grid/data_grid_table';
 import { getServices, IndexPattern } from '../../opensearch_dashboards_services';
 // @ts-ignore
@@ -30,7 +30,7 @@ import { DiscoverHistogram } from './histogram/histogram';
 import { LoadingSpinner } from './loading_spinner/loading_spinner';
 import { SkipBottomButton } from './skip_bottom_button';
 import {
-  IndexPatternField,
+  //IndexPatternField,
   search,
   ISearchSource,
   TimeRange,
@@ -51,13 +51,13 @@ export interface DiscoverProps {
   addColumn: (column: string) => void;
   fetch: () => void;
   fetchCounter: number;
-  fieldCounts: Record<string, number>;
+  //fieldCounts: Record<string, number>;
   histogramData: Chart;
   hits: number;
   indexPattern: IndexPattern;
   onAddFilter: DocViewFilterFn;
   onChangeInterval: (interval: string) => void;
-  onMoveColumn: (columns: string, newIdx: number) => void;
+  //onMoveColumn: (columns: string, newIdx: number) => void;
   onRemoveColumn: (column: string) => void;
   onSetColumns: (columns: string[]) => void;
   onSkipBottomButtonClick: () => void;
@@ -90,13 +90,13 @@ export function Discover({
   addColumn,
   fetch,
   fetchCounter,
-  fieldCounts,
+  //fieldCounts,
   histogramData,
   hits,
   indexPattern,
   onAddFilter,
   onChangeInterval,
-  onMoveColumn,
+  //onMoveColumn,
   onRemoveColumn,
   onSkipBottomButtonClick,
   onSetColumns,
@@ -105,20 +105,20 @@ export function Discover({
   resetQuery,
   resultState,
   rows,
-  searchSource,
-  setIndexPattern,
-  showSaveQuery,
+  //searchSource,
+  //setIndexPattern,
+  //showSaveQuery,
   state,
   timefilterUpdateHandler,
   timeRange,
-  topNavMenu,
-  updateQuery,
-  updateSavedQueryId,
+  //topNavMenu,
+  //updateQuery,
+  //updateSavedQueryId,
   vis,
 }: DiscoverProps) {
-  const [isSidebarClosed, setIsSidebarClosed] = useState(false);
+  //const [isSidebarClosed, setIsSidebarClosed] = useState(false);
   const services = getServices();
-  const { TopNavMenu } = services.navigation.ui;
+  //const { TopNavMenu } = services.navigation.ui;
   const { savedSearch, indexPatternList, config } = opts;
   const bucketAggConfig = vis?.data?.aggs?.aggs[1];
   const bucketInterval =
@@ -146,9 +146,8 @@ export function Discover({
   return (
     <I18nProvider>
       <EuiPage className="dscAppContainer" data-fetch-counter={fetchCounter}>
-        <h1 className="euiScreenReaderOnly">{savedSearch.title}</h1>
-
-        <TopNavMenu
+        {/*<h1 className="euiScreenReaderOnly">{savedSearch.title}</h1>*/}
+        {/*<TopNavMenu
           appName="discover"
           config={topNavMenu}
           indexPatterns={[indexPattern]}
@@ -162,11 +161,11 @@ export function Discover({
           showSaveQuery={showSaveQuery}
           showSearchBar={true}
           useDefaultBehaviors={true}
-        />
+        />*/}
 
         <EuiPageBody className="dscPageBody" component="div">
           <EuiFlexGroup>
-            <EuiFlexItem grow={false}>
+            {/*<EuiFlexItem grow={false}>
               <EuiPageSideBar>
                 {!isSidebarClosed && (
                   <div className="dscFieldChooser">
@@ -195,11 +194,11 @@ export function Discover({
                   className="dscCollapsibleSidebar__collapseButton euiButtonIcon--auto"
                 />
               </EuiPageSideBar>
-            </EuiFlexItem>
+            </EuiFlexItem>*/}
 
             <EuiFlexItem>
               <EuiPageContent>
-                {resultState === 'none' && (
+                {/*{resultState === 'none' && (
                   <DiscoverNoResults
                     timeFieldName={opts.timefield}
                     queryLanguage={state.query ? state.query.language : ''}
@@ -208,22 +207,22 @@ export function Discover({
                 {resultState === 'uninitialized' && <DiscoverUninitialized onRefresh={fetch} />}
 
                 {/* Loading State */}
-                {resultState === 'loading' && (
+                {/*{resultState === 'loading' && (
                   <div className="dscOverlay">
                     <LoadingSpinner />
                   </div>
-                )}
+                )}*/}
 
                 {/* Ready State */}
                 {resultState === 'ready' && (
                   <div className="dscWrapper__content">
-                    <SkipBottomButton onClick={onSkipBottomButtonClick} />
+                    {/*<SkipBottomButton onClick={onSkipBottomButtonClick} />
                     <HitsCounter
                       hits={hits > 0 ? hits : 0}
                       showResetButton={!!(savedSearch && savedSearch.id)}
                       onResetQuery={resetQuery}
-                    />
-                    {opts.timefield && (
+                    />*/}
+                    {/*{opts.timefield && (
                       <TimechartHeader
                         dateFormat={opts.config.get('dateFormat')}
                         timeRange={timeRange}
@@ -232,9 +231,9 @@ export function Discover({
                         stateInterval={state.interval || ''}
                         bucketInterval={bucketInterval}
                       />
-                    )}
+                    )}*/}
 
-                    {opts.timefield && (
+                    {/*{opts.timefield && (
                       <section
                         aria-label={i18n.translate('discover.histogramOfFoundDocumentsAriaLabel', {
                           defaultMessage: 'Histogram of found documents',
@@ -250,7 +249,7 @@ export function Discover({
                           </div>
                         )}
                       </section>
-                    )}
+                    )}*/}
 
                     <div className="dscResults">
                       <section
@@ -279,29 +278,6 @@ export function Discover({
                               displayTimeColumn={displayTimeColumn}
                               services={services}
                             />
-                            <a tabIndex={0} id="discoverBottomMarker">
-                              &#8203;
-                            </a>
-                            {rows.length === opts.sampleSize && (
-                              <div
-                                className="dscTable__footer"
-                                data-test-subj="discoverDocTableFooter"
-                              >
-                                <FormattedMessage
-                                  id="discover.howToSeeOtherMatchingDocumentsDescription"
-                                  defaultMessage="These are the first {sampleSize} documents matching
-                  your search, refine your search to see others."
-                                  values={{ sampleSize: opts.sampleSize }}
-                                />
-
-                                <EuiButtonEmpty onClick={() => window.scrollTo(0, 0)}>
-                                  <FormattedMessage
-                                    id="discover.backToTopLinkText"
-                                    defaultMessage="Back to top."
-                                  />
-                                </EuiButtonEmpty>
-                              </div>
-                            )}
                           </div>
                         )}
                       </section>

src/plugins/discover/public/application/view_components/canvas/discover_canvas.tsx

@@ -8,7 +8,7 @@ import { History } from 'history';
 import { SavedObject } from 'src/core/types/saved_objects';
 import { DiscoverServices } from '../../../build_services';
 import { SavedSearch } from '../../../saved_searches';
-import { DiscoverCanvasApp } from './discover_canvas_app';
+import { DiscoverCanvasService } from './discover_canvas_service';
 import { fetchIndexPattern, fetchSavedSearch } from './utils/index_pattern_helper';
 
 export interface DiscoverCanvasProps {
@@ -60,7 +60,7 @@ export const DiscoverCanvas = ({ history, services }: DiscoverCanvasProps) => {
   }, [data, config, core, chrome, toastNotifications, history, savedSearchId, services, basePath]);
 
   return (
-    <DiscoverCanvasApp
+    <DiscoverCanvasService
       history={history}
       services={services}
       savedSearch={savedSearch}

src/plugins/discover/public/application/view_components/canvas/discover_canvas_app.tsx

@@ -2,31 +2,32 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-
 import React from 'react';
-import { SavedObject } from 'src/core/types/saved_objects';
-import { History } from 'history';
-import { SearchSource } from 'src/plugins/data/common';
-import { DiscoverServices } from '../../../build_services';
-import { SavedSearch } from '../../../saved_searches';
-import { IndexPatternData } from './utils/index_pattern_helper';
-
-export interface DiscoverCanvasAppProps {
-  services: DiscoverServices;
-  history: History;
-  savedSearch: SavedSearch | undefined;
-  indexPatternList: Array<SavedObject<any>>;
-}
+import { EuiPage, EuiPageBody, EuiFlexGroup, EuiFlexItem, EuiPageContent } from '@elastic/eui';
+import { DiscoverTableComponent } from '../../components/data_grid/discover_table_component';
 
-export const DiscoverCanvasApp = ({
-  history,
-  services,
-  savedSearch,
-  indexPatternList,
-}: DiscoverCanvasAppProps) => {
-  if (savedSearch && savedSearch.searchSource) {
-    const ip = (savedSearch.searchSource as SearchSource).getField('index') as IndexPatternData;
-    return <div>{ip.loaded.id}</div>;
-  }
-  return <div>{'DiscoverCanvasApp'}</div>;
+export const DiscoverCanvasApplication = ({}) => {
+  return (
+    <EuiPage className="dscCanvasAppPage">
+      <EuiPageBody className="dscCanvasAppPageBody">
+        <EuiFlexGroup className="dscCanvasAppPageBody__contents">
+          <EuiFlexItem>
+            <EuiPageContent>
+              {
+                <div className="dscDiscoverGrid">
+                  <DiscoverTableComponent
+                    data={data$}
+                    indexPattern={indexPattern}
+                    savedSearch={savedSearch}
+                    onAddFilter={onAddFilter}
+                    services={services}
+                  />
+                </div>
+              }
+            </EuiPageContent>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPageBody>
+    </EuiPage>
+  );
 };

src/plugins/discover/public/application/view_components/canvas/discover_canvas_service.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { SavedObject } from 'src/core/types/saved_objects';
+import { History } from 'history';
+import { SearchSource } from 'src/plugins/data/common';
+import { DiscoverServices } from '../../../build_services';
+import { SavedSearch } from '../../../saved_searches';
+import { IndexPatternData } from '../utils/index_pattern_helper';
+import { useDiscoverCanvasService } from './use_discover_canvas_service';
+
+export interface DiscoverCanvasAppProps {
+  services: DiscoverServices;
+  history: History;
+  savedSearch: SavedSearch | undefined;
+  indexPatternList: Array<SavedObject<any>>;
+}
+
+export const DiscoverCanvasService = ({
+  history,
+  services,
+  savedSearch,
+  indexPatternList,
+}: DiscoverCanvasAppProps) => {
+  const { data$ } = useDiscoverCanvasService({ services, savedSearch, history });
+  // if (savedSearch && savedSearch.searchSource) {
+  //  const ip = (savedSearch.searchSource as SearchSource).getField('index') as IndexPatternData;
+  // }
+  // ToDo: DiscoverCanvasApplication
+  return <div>{'DiscoverCanvasApp'}</div>;
+};