error able to show

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>
abbyhu2000 · Aug 30, 2024 · f6006d1 · f6006d1
1 parent c4f9ded
commit f6006d1
Show file tree

Hide file tree

Showing 12 changed files with 106 additions and 5 deletions.
diff --git a/src/plugins/data/public/query/query_string/language_service/query_result.tsx b/src/plugins/data/public/query/query_string/language_service/query_result.tsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './_recent_query.scss';
+
+import { EuiButtonEmpty, EuiPopover, EuiText, EuiContextMenu, EuiPopoverTitle } from '@elastic/eui';
+
+import React, { useState } from 'react';
+import { SearchData } from '../../../../../discover/public';
+
+export function QueryResult(props: { queryResult: SearchData }) {
+  console.log('QueryResult', props.queryResult);
+  const [isPopoverOpen, setPopover] = useState(false);
+  const onButtonClick = () => {
+    setPopover(!isPopoverOpen);
+  };
+
+  const status = props.queryResult.status;
+
+  if (status === 'ready') {
+    return (
+      <EuiButtonEmpty iconSide="left" iconType={'checkInCircleEmpty'} size="xs" onClick={() => {}}>
+        <EuiText size="xs" color="subdued">
+          {'Complete'}
+        </EuiText>
+      </EuiButtonEmpty>
+    );
+  }
+
+  return (
+    <EuiPopover
+      button={
+        <EuiButtonEmpty iconSide="left" iconType={'alert'} size="xs" onClick={onButtonClick}>
+          <EuiText size="xs" color="subdued">
+            {'Error'}
+          </EuiText>
+        </EuiButtonEmpty>
+      }
+      isOpen={isPopoverOpen}
+      closePopover={() => setPopover(false)}
+      panelPaddingSize="none"
+      anchorPosition={'downRight'}
+    >
+      <EuiPopoverTitle>Error message</EuiPopoverTitle>
+      <div style={{ width: '250px' }}>
+        <EuiText size="s">
+          {props.queryResult.errorMsg && props.queryResult.errorMsg.message}
+        </EuiText>
+      </div>
+    </EuiPopover>
+  );
+}
diff --git a/src/plugins/data/public/ui/query_editor/query_editor.tsx b/src/plugins/data/public/ui/query_editor/query_editor.tsx
@@ -29,6 +29,8 @@ import { DatasetSelector } from '../dataset_selector';
 import { QueryControls } from '../../query/query_string/language_service/get_query_control_links';
 import { RecentQuery } from '../../query/query_string/language_service/recent_query';
 import { DefaultInputProps } from './editors';
+import { SearchData } from '../../../../discover/public';
+import { QueryResult } from '../../query/query_string/language_service/query_result';
 
 const LANGUAGE_ID_SQL = 'SQL';
 monaco.languages.register({ id: LANGUAGE_ID_SQL });
@@ -59,6 +61,7 @@ export interface QueryEditorProps {
   filterBar?: any;
   prepend?: React.ComponentProps<typeof EuiCompressedFieldText>['prepend'];
   savedQueryManagement?: any;
+  queryResult?: SearchData;
 }
 
 interface Props extends QueryEditorProps {
@@ -356,6 +359,7 @@ export default class QueryEditorUI extends Component<Props, State> {
           <EuiText size="xs" color="subdued">
             {this.props.query.dataset?.timeFieldName || ''}
           </EuiText>,
+          <QueryResult queryResult={this.props.queryResult!} />,
         ],
         end: [
           <RecentQuery

diff --git a/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx b/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx
@@ -12,6 +12,7 @@ import {
   OnRefreshProps,
   prettyDuration,
 } from '@elastic/eui';
+import { BehaviorSubject } from 'rxjs';
 import classNames from 'classnames';
 import React, { useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -24,6 +25,7 @@ import { UI_SETTINGS } from '../../../common';
 import { getQueryLog, PersistedLog } from '../../query';
 import { NoDataPopover } from './no_data_popover';
 import QueryEditorUI from './query_editor';
+import { SearchData } from '../../../../discover/public';
 
 const QueryEditor = withOpenSearchDashboards(QueryEditorUI);
 
@@ -54,6 +56,7 @@ export interface QueryEditorTopRowProps {
   indicateNoData?: boolean;
   datePickerRef?: React.RefObject<HTMLDivElement>;
   savedQueryManagement?: any;
+  queryResult?: SearchData;
 }
 
 // Needed for React.lazy
@@ -186,6 +189,7 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
           dataTestSubj={props.dataTestSubj}
           filterBar={props.filterBar}
           savedQueryManagement={props.savedQueryManagement}
+          queryResult={props.queryResult}
         />
       </EuiFlexItem>
     );

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
@@ -144,8 +144,9 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
       filters: props.filters,
       filterManager: data.query.filterManager,
     });
-    const { query } = useQueryStringManager({
+    const { query, queryResult } = useQueryStringManager({
       queryString: data.query.queryString,
+      data$: props.data$,
     });
 
     const { timeRange, refreshInterval } = useTimefilter({
@@ -211,6 +212,7 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
           datePickerRef={props.datePickerRef}
           isFilterBarPortable={props.isFilterBarPortable}
           {...overrideDefaultBehaviors(props)}
+          queryResult={queryResult}
         />
       </OpenSearchDashboardsContextProvider>
     );

diff --git a/src/plugins/data/public/ui/search_bar/lib/use_query_string_manager.ts b/src/plugins/data/public/ui/search_bar/lib/use_query_string_manager.ts
@@ -29,18 +29,21 @@
  */
 
 import { useState, useEffect, useCallback } from 'react';
-import { Subscription } from 'rxjs';
+import { BehaviorSubject, Subscription } from 'rxjs';
 import { Query } from '../../..';
 import { QueryStringContract } from '../../../query/query_string';
+import { SearchData } from '../../../../../discover/public';
 
 interface UseQueryStringProps {
   query?: Query;
   queryString: QueryStringContract;
+  data$?: BehaviorSubject<SearchData>;
 }
 
 export const useQueryStringManager = (props: UseQueryStringProps) => {
   // Filters should be either what's passed in the initial state or the current state of the filter manager
   const [query, setQuery] = useState(() => props.query || props.queryString.getQuery());
+  const [queryResult, setQueryResult] = useState<SearchData | undefined>(undefined);
 
   useEffect(() => {
     const subscriptions = new Subscription();
@@ -60,6 +63,15 @@ export const useQueryStringManager = (props: UseQueryStringProps) => {
     };
   }, [props.queryString]);
 
+  useEffect(() => {
+    if (!props.data$) {
+      return;
+    }
+    const subscription = props.data$.subscribe((d) => {
+      setQueryResult(d);
+    });
+  }, [props.data$]);
+
   // Use callback to memoize the function
   const updateQuery = useCallback(
     (newQueryPartial: Partial<Query>) => {
@@ -73,5 +85,6 @@ export const useQueryStringManager = (props: UseQueryStringProps) => {
   return {
     query,
     updateQuery,
+    queryResult,
   };
 };
diff --git a/src/plugins/data/public/ui/search_bar/search_bar.tsx b/src/plugins/data/public/ui/search_bar/search_bar.tsx
@@ -30,6 +30,7 @@
 
 import { InjectedIntl, injectI18n } from '@osd/i18n/react';
 import classNames from 'classnames';
+import { BehaviorSubject } from 'rxjs';
 import { compact, get, isEqual } from 'lodash';
 import React, { Component } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
@@ -45,6 +46,7 @@ import { QueryEditorTopRow } from '../query_editor';
 import QueryBarTopRow from '../query_string_input/query_bar_top_row';
 import { SavedQueryMeta, SaveQueryForm } from '../saved_query_form';
 import { FilterOptions } from '../filter_bar/filter_options';
+import { SearchData } from '../../../../discover/public';
 
 interface SearchBarInjectedDeps {
   opensearchDashboards: OpenSearchDashboardsReactContextValue<IDataPluginServices>;
@@ -92,6 +94,7 @@ export interface SearchBarOwnProps {
 
   onRefresh?: (payload: { dateRange: TimeRange }) => void;
   indicateNoData?: boolean;
+  queryResult?: SearchData;
 }
 
 export type SearchBarProps = SearchBarOwnProps & SearchBarInjectedDeps;
@@ -550,6 +553,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
           indicateNoData={this.props.indicateNoData}
           datePickerRef={this.props.datePickerRef}
           savedQueryManagement={searchBarMenu(false, true)}
+          queryResult={this.props.queryResult}
         />
       );
     }

diff --git a/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx b/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx
@@ -34,7 +34,7 @@ export interface TopNavProps {
 
 export const TopNav = ({ opts, showSaveQuery, isEnhancementsEnabled }: TopNavProps) => {
   const { services } = useOpenSearchDashboards<DiscoverViewServices>();
-  const { inspectorAdapters, savedSearch, indexPattern } = useDiscoverContext();
+  const { data$, inspectorAdapters, savedSearch, indexPattern } = useDiscoverContext();
   const [indexPatterns, setIndexPatterns] = useState<IndexPattern[] | undefined>(undefined);
   const [screenTitle, setScreenTitle] = useState<string>('');
   const state = useSelector((s) => s.discover);
@@ -124,6 +124,8 @@ export const TopNav = ({ opts, showSaveQuery, isEnhancementsEnabled }: TopNavPro
   const displayToNavLinkInPortal =
     isEnhancementsEnabled && !!opts?.optionalRef?.topLinkRef?.current && !showActionsInGroup;
 
+  console.log('in discover top  nav', data$);
+
   return (
     <>
       {displayToNavLinkInPortal &&
@@ -160,6 +162,7 @@ export const TopNav = ({ opts, showSaveQuery, isEnhancementsEnabled }: TopNavPro
         datePickerRef={opts?.optionalRef?.datePickerRef}
         groupActions={showActionsInGroup}
         screenTitle={screenTitle}
+        data$={data$}
       />
     </>
   );

diff --git a/src/plugins/discover/public/application/view_components/index.ts b/src/plugins/discover/public/application/view_components/index.ts
@@ -5,3 +5,4 @@
 
 export * from './canvas';
 export * from './panel';
+export * from './utils';
diff --git a/src/plugins/discover/public/application/view_components/utils/index.tsx b/src/plugins/discover/public/application/view_components/utils/index.tsx
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { SearchData, ResultStatus } from './use_search';
diff --git a/src/plugins/discover/public/application/view_components/utils/use_search.ts b/src/plugins/discover/public/application/view_components/utils/use_search.ts
@@ -39,6 +39,7 @@ export enum ResultStatus {
   LOADING = 'loading', // initial data load
   READY = 'ready', // results came back
   NO_RESULTS = 'none', // no results came back
+  ERROR = 'error', // error occurred
 }
 
 export interface SearchData {
@@ -50,6 +51,7 @@ export interface SearchData {
   bucketInterval?: TimechartHeaderBucketInterval | {};
   chartData?: Chart;
   title?: string;
+  errorMsg?: any;
 }
 
 export type SearchRefetch = 'refetch' | undefined;
@@ -222,13 +224,14 @@ export const useSearch = (services: DiscoverViewServices) => {
       if (error instanceof Error && error.name === 'AbortError') return;
 
       data$.next({
-        status: ResultStatus.NO_RESULTS,
+        status: ResultStatus.ERROR,
         rows: [],
+        errorMsg: error.body || error,
       });
 
       console.log('error', error.body);
 
-      data.search.showError((error.body || error) as Error);
+      //data.search.showError((error.body || error) as Error);
     } finally {
       initalSearchComplete.current = true;
     }

diff --git a/src/plugins/discover/public/index.ts b/src/plugins/discover/public/index.ts
@@ -40,3 +40,4 @@ export { SavedSearch, SavedSearchLoader, createSavedSearchesLoader } from './sav
 
 export { ISearchEmbeddable, SEARCH_EMBEDDABLE_TYPE, SearchInput } from './embeddable';
 export { DISCOVER_APP_URL_GENERATOR, DiscoverUrlGeneratorState } from './url_generator';
+export { SearchData, ResultStatus } from './application/view_components';
diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
@@ -31,6 +31,7 @@
 import { EuiFlexGroup, EuiFlexItem, EuiHeaderLinks, EuiText } from '@elastic/eui';
 import classNames from 'classnames';
 import React, { ReactElement, useRef } from 'react';
+import { BehaviorSubject } from 'rxjs';
 
 import { MountPoint } from '../../../../core/public';
 import {
@@ -42,6 +43,7 @@ import { DataSourceMenuProps, createDataSourceMenu } from '../../../data_source_
 import { MountPointPortal } from '../../../opensearch_dashboards_react/public';
 import { TopNavMenuData } from './top_nav_menu_data';
 import { TopNavMenuItem } from './top_nav_menu_item';
+import { SearchData } from '../../../discover/public';
 
 export enum TopNavMenuItemRenderType {
   IN_PORTAL = 'in_portal',
@@ -82,6 +84,7 @@ export type TopNavMenuProps = Omit<StatefulSearchBarProps, 'showDatePicker'> &
      * ```
      */
     setMenuMountPoint?: (menuMount: MountPoint | undefined) => void;
+    data$?: BehaviorSubject<SearchData>;
   };
 
 /*
@@ -102,6 +105,7 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
     dataSourceMenuConfig,
     groupActions,
     screenTitle,
+    data$,
     ...searchBarProps
   } = props;
 
@@ -152,10 +156,12 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
     // Validate presence of all required fields
     if (!showSearchBar || !props.data) return null;
     const { SearchBar } = props.data.ui;
+    console.log('in top nav menu', props.data$);
     return (
       <SearchBar
         {...searchBarProps}
         showDatePicker={![TopNavMenuItemRenderType.OMITTED, false].includes(showDatePicker!)}
+        data$={props.data$}
         {...overrides}
       />
     );
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,3 +5,4 @@

		export * from './canvas';
		export * from './panel';
		export * from './utils';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -40,3 +40,4 @@ export { SavedSearch, SavedSearchLoader, createSavedSearchesLoader } from './sav

		export { ISearchEmbeddable, SEARCH_EMBEDDABLE_TYPE, SearchInput } from './embeddable';
		export { DISCOVER_APP_URL_GENERATOR, DiscoverUrlGeneratorState } from './url_generator';
		export { SearchData, ResultStatus } from './application/view_components';