Add data summary panel in discover

changelogs/fragments/8186.yml

@@ -0,0 +1,2 @@
+feat:
+- Add data summary panel in discover ([#8186](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8186))

src/plugins/data/common/data_frames/types.ts

@@ -4,6 +4,7 @@
  */
 
 import { SearchResponse } from 'elasticsearch';
+import { BehaviorSubject } from 'rxjs';
 import { IFieldType } from './fields';
 
 export * from './_df_cache';
@@ -19,6 +20,7 @@ export interface DataFrameService {
   get: () => IDataFrame | undefined;
   set: (dataFrame: IDataFrame) => void;
   clear: () => void;
+  df$: BehaviorSubject<IDataFrame | undefined>;
 }
 
 /**

src/plugins/data/public/search/search_service.ts

@@ -85,6 +85,7 @@
   private searchInterceptor!: ISearchInterceptor;
   private defaultSearchInterceptor!: ISearchInterceptor;
   private usageCollector?: SearchUsageCollector;
+  private dataFrame$ = new BehaviorSubject<IDataFrame | undefined>(undefined);
 
   constructor(private initializerContext: PluginInitializerContext<ConfigSchema>) {}
 
@@ -120,13 +121,31 @@
       expressions.registerFunction(aggShardDelay);
     }
 
+    const dfService: DataFrameService = {
+      get: () => {
+        const df = this.dfCache.get();
+        this.dataFrame$.next(df);
+        return df;
+      },
+      set: (dataFrame: IDataFrame) => {
+        this.dfCache.set(dataFrame);
+      },
+      clear: () => {
+        if (this.dfCache.get() === undefined) return;
+        this.dfCache.clear();
+        this.dataFrame$.next(undefined);
+      },
+      df$: this.dataFrame$,
+    };
+
     return {
       aggs,
       usageCollector: this.usageCollector!,
       __enhance: (enhancements: SearchEnhancements) => {
         this.searchInterceptor = enhancements.searchInterceptor;
       },
       getDefaultSearchInterceptor: () => this.defaultSearchInterceptor,
+      df: dfService,
     };
   }
 
@@ -152,16 +171,21 @@
 
     const loadingCount$ = new BehaviorSubject(0);
     http.addLoadingCountSource(loadingCount$);
-
     const dfService: DataFrameService = {
-      get: () => this.dfCache.get(),
-      set: async (dataFrame: IDataFrame) => {
+      get: () => {
+        const df = this.dfCache.get();
+        this.dataFrame$.next(df);
+        return df;
+      },
+      set: (dataFrame: IDataFrame) => {
         this.dfCache.set(dataFrame);
       },
       clear: () => {
         if (this.dfCache.get() === undefined) return;
         this.dfCache.clear();
+        this.dataFrame$.next(undefined);
       },
+      df$: this.dataFrame$,
     };
 
     const searchSourceDependencies: SearchSourceDependencies = {

src/plugins/data/public/search/types.ts

@@ -55,6 +55,7 @@ export interface ISearchSetup {
    */
   __enhance: (enhancements: SearchEnhancements) => void;
   getDefaultSearchInterceptor: () => ISearchInterceptor;
+  df: DataFrameService;
 }
 
 /**

src/plugins/data/public/ui/query_editor/query_editor.tsx

@@ -337,6 +337,19 @@ export default class QueryEditorUI extends Component<Props, State> {
     return <QueryControls queryControls={queryControls} />;
   };
 
+  private renderExtensionSearchBarButtion = () => {
+    const supported = 'query-assist';
+    if (!this.extensionMap || Object.keys(this.extensionMap).length === 0) return null;
+    if (!(supported in this.extensionMap) || !this.extensionMap[supported].getSearchBarButton)
+      return null;
+    return this.extensionMap[supported].getSearchBarButton({
+      language: this.props.query.language,
+      onSelectLanguage: this.onSelectLanguage,
+      isCollapsed: this.state.isCollapsed,
+      setIsCollapsed: this.setIsCollapsed,
+    });
+  };
+
   public render() {
     const className = classNames(this.props.className);
 
@@ -455,6 +468,7 @@ export default class QueryEditorUI extends Component<Props, State> {
             <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
               {this.renderQueryControls(languageEditor.TopBar.Controls)}
               {!languageEditor.TopBar.Expanded && this.renderToggleIcon()}
+              {!languageEditor.TopBar.Expanded && this.renderExtensionSearchBarButtion()}
               {this.props.savedQueryManagement}
             </EuiFlexGroup>
           </div>

src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.tsx

@@ -69,6 +69,10 @@ export interface QueryEditorExtensionConfig {
    * @returns The component the query editor extension.
    */
   getBanner?: (dependencies: QueryEditorExtensionDependencies) => React.ReactElement | null;
+
+  getSearchBarButton?: (
+    dependencies: QueryEditorExtensionDependencies
+  ) => React.ReactElement | null;
 }
 const QueryEditorExtensionPortal: React.FC<{ container: Element }> = (props) => {
   if (!props.children) return null;

src/plugins/query_enhancements/common/config.ts

@@ -17,6 +17,9 @@ export const configSchema = schema.object({
         defaultValue: [{ language: 'PPL', agentConfig: 'os_query_assist_ppl' }],
       }
     ),
+    summary: schema.object({
+      enabled: schema.boolean({ defaultValue: false }),
+    }),
   }),
 });
 

src/plugins/query_enhancements/opensearch_dashboards.json

@@ -4,6 +4,7 @@
   "server": true,
   "ui": true,
   "requiredPlugins": ["data", "opensearchDashboardsReact", "opensearchDashboardsUtils", "savedObjects", "uiActions"],
-  "optionalPlugins": ["dataSource"]
+  "optionalPlugins": ["dataSource", "usageCollection"],
+  "configPath": ["queryEnhancements"]
 }
 

src/plugins/query_enhancements/public/plugin.tsx

@@ -38,7 +38,7 @@ export class QueryEnhancementsPlugin
 
   public setup(
     core: CoreSetup<QueryEnhancementsPluginStartDependencies>,
-    { data }: QueryEnhancementsPluginSetupDependencies
+    { data, usageCollection }: QueryEnhancementsPluginSetupDependencies
   ): QueryEnhancementsPluginSetup {
     const { queryString } = data.query;
     const pplSearchInterceptor = new PPLSearchInterceptor({
@@ -105,7 +105,12 @@ export class QueryEnhancementsPlugin
 
     data.__enhance({
       editor: {
-        queryEditorExtension: createQueryAssistExtension(core.http, data, this.config.queryAssist),
+        queryEditorExtension: createQueryAssistExtension(
+          core,
+          data,
+          this.config.queryAssist,
+          usageCollection
+        ),
       },
     });
 

src/plugins/query_enhancements/public/query_assist/_index.scss

@@ -4,6 +4,10 @@
  */
 
 .queryAssist {
+  &.queryAssist__summary {
+    margin-top: $euiSizeXS;
+  }
+
   &.queryAssist__callout {
     margin-top: $euiSizeXS;
   }

src/plugins/query_enhancements/public/query_assist/components/index.ts

@@ -5,3 +5,5 @@
 
 export { QueryAssistBar } from './query_assist_bar';
 export { QueryAssistBanner } from './query_assist_banner';
+export { QueryAssistSummary } from './query_assist_summary';
+export { QueryAssistButton } from './query_assist_button';

src/plugins/query_enhancements/public/query_assist/components/query_assist_bar.test.tsx

@@ -17,6 +17,7 @@ import { setData, setStorage } from '../../services';
 import { useGenerateQuery } from '../hooks';
 import { AgentError, ProhibitedQueryError } from '../utils';
 import { QueryAssistInput } from './query_assist_input';
+import { useQueryAssist } from '../hooks';
 
 jest.mock('../../../../opensearch_dashboards_react/public', () => ({
   useOpenSearchDashboards: jest.fn(),
@@ -25,6 +26,9 @@ jest.mock('../../../../opensearch_dashboards_react/public', () => ({
 
 jest.mock('../hooks', () => ({
   useGenerateQuery: jest.fn().mockReturnValue({ generateQuery: jest.fn(), loading: false }),
+  useQueryAssist: jest
+    .fn()
+    .mockReturnValue({ updateQuestion: jest.fn(), isQueryAssistCollapsed: false }),
 }));
 
 jest.mock('./query_assist_input', () => ({
@@ -86,6 +90,14 @@ describe('QueryAssistBar', () => {
     expect(component.container).toBeEmptyDOMElement();
   });
 
+  it('renders null if question assist is collapsed', () => {
+    useQueryAssist.mockReturnValueOnce({ updateQuestion: jest.fn(), isQueryAssistCollapsed: true });
+    const { component } = renderQueryAssistBar({
+      dependencies: { ...dependencies, isCollapsed: false },
+    });
+    expect(component.container).toBeEmptyDOMElement();
+  });
+
   it('matches snapshot', () => {
     const { component } = renderQueryAssistBar();
     expect(component.container).toMatchSnapshot();

src/plugins/query_enhancements/public/query_assist/components/query_assist_bar.tsx

@@ -19,6 +19,7 @@ import { getPersistedLog, AgentError, ProhibitedQueryError } from '../utils';
 import { QueryAssistCallOut, QueryAssistCallOutType } from './call_outs';
 import { QueryAssistInput } from './query_assist_input';
 import { QueryAssistSubmitButton } from './submit_button';
+import { useQueryAssist } from '../hooks';
 
 interface QueryAssistInputProps {
   dependencies: QueryEditorExtensionDependencies;
@@ -42,6 +43,7 @@ export const QueryAssistBar: React.FC<QueryAssistInputProps> = (props) => {
   );
   const selectedIndex = selectedDataset?.title;
   const previousQuestionRef = useRef<string>();
+  const { updateQuestion, isQueryAssistCollapsed } = useQueryAssist();
 
   useEffect(() => {
     const subscription = queryString.getUpdates$().subscribe((query) => {
@@ -64,6 +66,7 @@ export const QueryAssistBar: React.FC<QueryAssistInputProps> = (props) => {
     setAgentError(undefined);
     previousQuestionRef.current = inputRef.current.value;
     persistedLog.add(inputRef.current.value);
+    updateQuestion(inputRef.current.value);
     const params: QueryAssistParameters = {
       question: inputRef.current.value,
       index: selectedIndex,
@@ -90,7 +93,7 @@ export const QueryAssistBar: React.FC<QueryAssistInputProps> = (props) => {
     }
   };
 
-  if (props.dependencies.isCollapsed) return null;
+  if (props.dependencies.isCollapsed || isQueryAssistCollapsed) return null;
 
   return (
     <EuiForm component="form" onSubmit={onSubmit} className="queryAssist queryAssist__form">

src/plugins/query_enhancements/public/query_assist/components/query_assist_button.test.tsx

@@ -0,0 +1,69 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { QueryAssistButton, QueryAssistButtonProps } from './query_assist_button';
+import { useQueryAssist } from '../hooks';
+
+jest.mock('../hooks', () => ({
+  useQueryAssist: jest.fn(),
+}));
+
+describe('query assist button', () => {
+  const setIsCollapsed = jest.fn();
+  const updateIsQueryAssistCollapsed = jest.fn();
+
+  const props: QueryAssistButtonProps = {
+    dependencies: {
+      isCollapsed: false,
+      setIsCollapsed,
+    },
+  };
+  const renderQueryAssistButton = (isCollapsed: boolean) => {
+    const component = render(
+      <div>
+        <QueryAssistButton
+          dependencies={{
+            ...props.dependencies,
+            isCollapsed,
+          }}
+        />
+      </div>
+    );
+    return component;
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('if query editor collapsed, click button to expand', async () => {
+    useQueryAssist.mockImplementationOnce(() => ({
+      isQueryAssistCollapsed: true,
+      updateIsQueryAssistCollapsed,
+    }));
+    renderQueryAssistButton(true);
+    expect(screen.getByTestId('queryAssist_summary_button')).toBeInTheDocument();
+    await screen.getByTestId('queryAssist_summary_button');
+    fireEvent.click(screen.getByTestId('queryAssist_summary_button'));
+    expect(setIsCollapsed).toHaveBeenCalledWith(false);
+    expect(updateIsQueryAssistCollapsed).toHaveBeenCalledWith(false);
+  });
+
+  [true, false].forEach((isQueryAssistCollapsed) => {
+    it('if query editor expanded, click button to switch', async () => {
+      useQueryAssist.mockImplementationOnce(() => ({
+        isQueryAssistCollapsed,
+        updateIsQueryAssistCollapsed,
+      }));
+      renderQueryAssistButton(false);
+      expect(screen.getByTestId('queryAssist_summary_button')).toBeInTheDocument();
+      await screen.getByTestId('queryAssist_summary_button');
+      fireEvent.click(screen.getByTestId('queryAssist_summary_button'));
+      expect(setIsCollapsed).not.toHaveBeenCalled();
+      expect(updateIsQueryAssistCollapsed).toHaveBeenCalledWith(!isQueryAssistCollapsed);
+    });
+  });
+});