(query assist) support option to disable summary (#1376)

Signed-off-by: Joshua Li <[email protected]>

common/constants/shared.ts

@@ -261,4 +261,4 @@ export const DIRECT_DUMMY_QUERY = 'select 1';
 
 export const DEFAULT_START_TIME = 'now-15m';
 export const QUERY_ASSIST_START_TIME = 'now-40y';
-export const QUERY_ASSIST_END_TIME = 'now';
+export const QUERY_ASSIST_END_TIME = 'now';

public/components/common/search/__tests__/search.test.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { configure, mount, shallow } from 'enzyme';
+import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { applyMiddleware, createStore } from '@reduxjs/toolkit';
@@ -13,7 +13,7 @@ import { Search } from '../search';
 import thunk from 'redux-thunk';
 import { initialTabId } from '../../../../framework/redux/store/shared_state';
 
-describe.only('Explorer Search component', () => {
+describe('Explorer Search component', () => {
   configure({ adapter: new Adapter() });
   const store = createStore(rootReducer, applyMiddleware(thunk));
 

public/components/common/search/query_assist_summarization.tsx

@@ -16,8 +16,8 @@ import {
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
-import chatLogo from '../../datasources/icons/query-assistant-logo.svg';
 import React from 'react';
+import chatLogo from '../../datasources/icons/query-assistant-logo.svg';
 
 export function QueryAssistSummarization({
   queryAssistantSummarization,

public/components/common/search/search.tsx

@@ -10,7 +10,6 @@ import {
   EuiButtonEmpty,
   EuiComboBox,
   EuiComboBoxOptionOption,
-  EuiContextMenuItem,
   EuiContextMenuPanel,
   EuiFlexGroup,
   EuiFlexItem,
@@ -91,7 +90,6 @@ export const Search = (props: any) => {
     query,
     tempQuery,
     handleQueryChange,
-    handleQuerySearch,
     handleTimePickerChange,
     dslService,
     startTime,
@@ -134,7 +132,7 @@ 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 [_isLanguagePopoverOpen, setLanguagePopoverOpen] = useState(false);
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [queryLang, setQueryLang] = useState(QUERY_LANGUAGE.PPL);
   const [timeRange, setTimeRange] = useState([
@@ -151,9 +149,9 @@ export const Search = (props: any) => {
 
   const {
     data: pollingResult,
-    loading: pollingLoading,
+    loading: _pollingLoading,
     error: pollingError,
-    startPolling,
+    startPolling: _startPolling,
     stopPolling,
   } = usePolling<any, any>((params) => {
     return sqlService.fetchWithJobId(params);
@@ -222,10 +220,6 @@ export const Search = (props: any) => {
     closeLanguagePopover();
   };
 
-  const onLanguagePopoverClick = () => {
-    setLanguagePopoverOpen(!isLanguagePopoverOpen);
-  };
-
   const closeLanguagePopover = () => {
     setLanguagePopoverOpen(false);
   };
@@ -235,28 +229,7 @@ export const Search = (props: any) => {
     { value: QUERY_LANGUAGE.DQL, inputDisplay: <EuiText>DQL</EuiText> },
   ];
 
-  const languagePopOverItems = [
-    <EuiContextMenuItem
-      key={QUERY_LANGUAGE.PPL}
-      onClick={() => handleQueryLanguageChange(QUERY_LANGUAGE.PPL)}
-    >
-      PPL
-    </EuiContextMenuItem>,
-    <EuiContextMenuItem
-      key={QUERY_LANGUAGE.DQL}
-      onClick={() => handleQueryLanguageChange(QUERY_LANGUAGE.DQL)}
-    >
-      DQL
-    </EuiContextMenuItem>,
-  ];
-
-  const languagePopOverButton = (
-    <EuiButton iconType="arrowDown" iconSide="right" onClick={onLanguagePopoverClick} color="text">
-      {queryLang}
-    </EuiButton>
-  );
-
-  const onQuerySearch = (lang) => {
+  const onQuerySearch = () => {
     handleTimeRangePickerRefresh();
   };
 

public/components/common/search/sql_search.tsx

@@ -97,7 +97,7 @@ export const DirectSearch = (props: any) => {
 
   const {
     data: pollingResult,
-    loading: pollingLoading,
+    loading: _pollingLoading,
     error: pollingError,
     startPolling,
     stopPolling,
@@ -139,7 +139,7 @@ export const DirectSearch = (props: any) => {
     </EuiButton>
   );
 
-  const handleQueryLanguageChange = (lang: string) => {
+  const handleQueryLanguageChange = (lang: QUERY_LANGUAGE) => {
     if (lang === 'DQL') {
       application!.navigateToUrl('../app/data-explorer/discover');
       return;

public/components/event_analytics/explorer/events_views/data_grid.tsx

@@ -3,31 +3,30 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useMemo, useState, useRef, Fragment, useCallback, useEffect } from 'react';
 import {
   EuiDataGrid,
+  EuiDataGridColumn,
+  EuiDataGridSorting,
   EuiDescriptionList,
   EuiDescriptionListDescription,
   EuiDescriptionListTitle,
-  EuiDataGridColumn,
-  EuiDataGridSorting,
   EuiPanel,
   EuiDataGridProps,
 } from '@elastic/eui';
 import moment from 'moment';
-import { MutableRefObject } from 'react';
-import { IExplorerFields, IField } from '../../../../../common/types/explorer';
+import React, { Fragment, MutableRefObject, useEffect, useRef, useState } from 'react';
+import { HttpSetup } from '../../../../../../../src/core/public';
 import {
   DATE_DISPLAY_FORMAT,
   DEFAULT_EMPTY_EXPLORER_FIELDS,
   DEFAULT_SOURCE_COLUMN,
   DEFAULT_TIMESTAMP_COLUMN,
 } from '../../../../../common/constants/explorer';
-import { HttpSetup } from '../../../../../../../src/core/public';
+import { IExplorerFields, IField } from '../../../../../common/types/explorer';
 import PPLService from '../../../../services/requests/ppl';
-import { FlyoutButton } from './docViewRow';
 import { useFetchEvents } from '../../hooks';
 import { redoQuery } from '../../utils/utils';
+import { FlyoutButton } from './docViewRow';
 
 export interface DataGridProps {
   http: HttpSetup;

public/components/event_analytics/explorer/explorer.tsx

@@ -78,6 +78,7 @@ import {
   getSavingCommonParams,
   uiSettingsService,
 } from '../../../../common/utils';
+import { coreRefs } from '../../../framework/core_refs';
 import { initialTabId } from '../../../framework/redux/store/shared_state';
 import { PPLDataFetcher } from '../../../services/data_fetchers/ppl/ppl_data_fetcher';
 import { getSavedObjectsClient } from '../../../services/saved_objects/saved_object_client/client_factory';
@@ -115,7 +116,7 @@ import {
   change as updateVizConfig,
 } from '../redux/slices/viualization_config_slice';
 import { getDefaultVisConfig } from '../utils';
-import { getContentTabTitle, getDateRange } from '../utils/utils';
+import { formatError, getContentTabTitle, getDateRange } from '../utils/utils';
 import { DataSourceSelection } from './datasources/datasources_selection';
 import { DirectQueryRunning } from './direct_query_running';
 import { DataGrid } from './events_views/data_grid';
@@ -161,7 +162,7 @@ export const Explorer = ({
     requestParams,
   });
   const {
-    isEventsLoading: isPatternLoading,
+    isEventsLoading: _isPatternLoading,
     getPatterns,
     setDefaultPatternsField,
   } = useFetchPatterns({
@@ -181,7 +182,7 @@ export const Explorer = ({
   const [selectedCustomPanelOptions, setSelectedCustomPanelOptions] = useState([]);
   const [selectedPanelName, setSelectedPanelName] = useState('');
   const [curVisId, setCurVisId] = useState('bar');
-  const [isPanelTextFieldInvalid, setIsPanelTextFieldInvalid] = useState(false);
+  const [isPanelTextFieldInvalid, _setIsPanelTextFieldInvalid] = useState(false);
   const [timeIntervalOptions, setTimeIntervalOptions] = useState(TIME_INTERVAL_OPTIONS);
   const [isOverridingTimestamp, setIsOverridingTimestamp] = useState(false);
   const [tempQuery, setTempQuery] = useState(query[RAW_QUERY]);
@@ -214,8 +215,8 @@ export const Explorer = ({
     value: string;
   }>();
   const [subType, setSubType] = useState('visualization');
-  const [metricMeasure, setMetricMeasure] = useState('');
-  const [metricChecked, setMetricChecked] = useState(false);
+  const [_metricMeasure, setMetricMeasure] = useState('');
+  const [_metricChecked, setMetricChecked] = useState(false);
   const queryRef = useRef();
   const appBasedRef = useRef('');
   appBasedRef.current = appBaseQuery;
@@ -273,10 +274,11 @@ export const Explorer = ({
 
   const getErrorHandler = (title: string) => {
     return (error: any) => {
-      // const formattedError = formatError(error.name, error.message, error.body.message);
-      // notifications.toasts.addError(formattedError, {
-      //   title,
-      // });
+      if (coreRefs.summarizeEnabled) return;
+      const formattedError = formatError(error.name, error.message, error.body.message);
+      notifications.toasts.addError(formattedError, {
+        title,
+      });
     };
   };
 

public/components/event_analytics/explorer/no_results.tsx

@@ -14,8 +14,8 @@ import {
   EuiText,
   EuiEmptyPrompt,
 } from '@elastic/eui';
-import { coreRefs } from '../../../framework/core_refs';
 import { useSelector } from 'react-redux';
+import { coreRefs } from '../../../framework/core_refs';
 import { selectQueries } from '../redux/slices/query_slice';
 
 export const NoResults = ({ tabId }: any) => {

public/components/event_analytics/explorer/query_assist/__tests__/input.test.tsx

@@ -85,7 +85,23 @@ describe('<QueryAssistInput /> spec', () => {
     );
   });
 
+  it('should not call summarize if disabled', async () => {
+    coreRefs.summarizeEnabled = false;
+    httpMock.post.mockRejectedValueOnce({ body: { statusCode: 429 } });
+
+    const { component } = renderQueryAssistInput();
+    await waitFor(() => {
+      fireEvent.click(component.getByTestId('query-assist-generate-and-run-button'));
+    });
+
+    expect(httpMock.post).toBeCalledWith(QUERY_ASSIST_API.GENERATE_PPL, {
+      body: '{"question":"test-input","index":"selected-test-index"}',
+    });
+    expect(httpMock.post).not.toBeCalledWith(QUERY_ASSIST_API.SUMMARIZE, expect.anything());
+  });
+
   it('should call summarize for generate and run errors', async () => {
+    coreRefs.summarizeEnabled = true;
     httpMock.post.mockRejectedValueOnce({ body: { statusCode: 429 } }).mockResolvedValueOnce({
       summary: 'too many requests',
       suggestedQuestions: ['1', '2'],

public/components/event_analytics/explorer/query_assist/input.tsx

@@ -23,6 +23,7 @@ import { ResponseError } from '@opensearch-project/opensearch/lib/errors';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { RAW_QUERY } from '../../../../../common/constants/explorer';
+import { QUERY_ASSIST_API } from '../../../../../common/constants/query_assist';
 import { getOSDHttp } from '../../../../../common/utils';
 import { coreRefs } from '../../../../framework/core_refs';
 import chatLogo from '../../../datasources/icons/query-assistant-logo.svg';
@@ -34,7 +35,6 @@ import {
 } from '../../redux/slices/query_assistant_summarization_slice';
 import { reset, selectQueryResult } from '../../redux/slices/query_result_slice';
 import { changeQuery, selectQueries } from '../../redux/slices/query_slice';
-import { QUERY_ASSIST_API } from '../../../../../common/constants/query_assist';
 
 interface SummarizationContext {
   question: string;
@@ -87,21 +87,23 @@ export const QueryAssistInput: React.FC<Props> = (props) => {
 
   useEffect(() => {
     if (
-      summaryData.responseForSummaryStatus === 'success' ||
-      summaryData.responseForSummaryStatus === 'failure'
-    ) {
-      void (async () => {
-        await dispatch(
-          changeSummary({
-            tabId: props.tabId,
-            data: {
-              summaryLoading: false,
-            },
-          })
-        );
-        if (explorerData.total > 0) generateSummary();
-      })();
-    }
+      props.nlqInput.trim().length === 0 ||
+      (summaryData.responseForSummaryStatus !== 'success' &&
+        summaryData.responseForSummaryStatus !== 'failure')
+    )
+      return;
+    void (async () => {
+      await dispatch(
+        changeSummary({
+          tabId: props.tabId,
+          data: {
+            summaryLoading: false,
+          },
+        })
+      );
+      if (explorerData.total > 0 || summaryData.responseForSummaryStatus === 'failure')
+        generateSummary();
+    })();
   }, [summaryData.responseForSummaryStatus]);
 
   const [barSelected, setBarSelected] = useState(false);
@@ -173,6 +175,7 @@ export const QueryAssistInput: React.FC<Props> = (props) => {
     }
   };
   const generateSummary = async (context?: Partial<SummarizationContext>) => {
+    if (!coreRefs.summarizeEnabled) return;
     try {
       const isError = summaryData.responseForSummaryStatus === 'failure';
       const summarizationContext: SummarizationContext = {
@@ -333,7 +336,9 @@ export const QueryAssistInput: React.FC<Props> = (props) => {
                   <EuiButton
                     isLoading={generating}
                     onClick={generatePPL}
-                    isDisabled={generating || generatingOrRunning}
+                    isDisabled={
+                      generating || generatingOrRunning || props.nlqInput.trim().length === 0
+                    }
                     iconSide="right"
                     fill={false}
                     data-test-subj="query-assist-generate-button"
@@ -346,7 +351,9 @@ export const QueryAssistInput: React.FC<Props> = (props) => {
                   <EuiButton
                     isLoading={generatingOrRunning}
                     onClick={runAndSummarize}
-                    isDisabled={generating || generatingOrRunning}
+                    isDisabled={
+                      generating || generatingOrRunning || props.nlqInput.trim().length === 0
+                    }
                     iconType="returnKey"
                     iconSide="right"
                     type="submit"