Add compare queries card to search use case overview page (#427)

* add query compare card Signed-off-by: Hailong Cui <[email protected]> * add comments Signed-off-by: Hailong Cui <[email protected]> --------- Signed-off-by: Hailong Cui <[email protected]>
opensearch-project · Sep 3, 2024 · 924b570 · 924b570
1 parent e061e66
commit 924b570
Show file tree

Hide file tree

Showing 6 changed files with 351 additions and 6 deletions.
diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
@@ -7,6 +7,6 @@
   "requiredPlugins": [
     "navigation"
   ],
-  "optionalPlugins": ["dataSource","dataSourceManagement"],
+  "optionalPlugins": ["dataSource","dataSourceManagement","contentManagement"],
   "supportedOSDataSourceVersions": ">=2.8.0"
 }
diff --git a/public/components/service_card/__test__/compare_query_card.test.tsx b/public/components/service_card/__test__/compare_query_card.test.tsx
@@ -0,0 +1,49 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { registerCompareQueryCard } from '../compare_query_card';
+
+describe('CompareQueryCard', () => {
+  const registerContentProviderMock = jest.fn();
+
+  const contentManagement = {
+    registerContentProvider: registerContentProviderMock,
+    updatePageSection: jest.fn(),
+    renderPage: jest.fn(),
+  };
+
+  it('registerCompareQueryCard', () => {
+    registerCompareQueryCard(contentManagement, {});
+    const call = registerContentProviderMock.mock.calls[0];
+    expect(call[0].getTargetArea()).toEqual('search_overview/config_evaluate_search');
+    expect(call[0].getContent()).toMatchInlineSnapshot(`
+      Object {
+        "cardProps": Object {
+          "children": <EuiFlexGroup
+            justifyContent="flexEnd"
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <EuiButton
+                onClick={[Function]}
+                size="s"
+              >
+                Compare search results
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>,
+          "layout": "horizontal",
+        },
+        "description": "The search comparison tool lets you compare the results of two different DSL queries applied to the same user query.",
+        "getIcon": [Function],
+        "id": "compare_query",
+        "kind": "card",
+        "order": 20,
+        "title": "Compare queries",
+      }
+    `);
+  });
+});
diff --git a/public/components/service_card/compare_query_card.tsx b/public/components/service_card/compare_query_card.tsx
@@ -0,0 +1,60 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { PLUGIN_ID } from '../../../common';
+import { ContentManagementPluginStart } from '../../../../../src/plugins/content_management/public';
+import { CoreStart } from '../../../../../src/core/public';
+import compareQueriesIcon from './icon.svg';
+
+export const registerCompareQueryCard = (
+  contentManagement: ContentManagementPluginStart,
+  core: CoreStart
+) => {
+  const icon = (
+    <EuiIcon size="original" aria-label="compare search queries" type={compareQueriesIcon} />
+  );
+
+  const footer = (
+    <EuiFlexGroup justifyContent="flexEnd">
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          size="s"
+          onClick={() => {
+            core.application.navigateToApp(PLUGIN_ID);
+          }}
+        >
+          {i18n.translate('searchRelevanceDashboards.compareQueryCard.footer', {
+            defaultMessage: 'Compare search results',
+          })}
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
+  contentManagement.registerContentProvider({
+    id: 'compare_query_card',
+    getContent: () => ({
+      id: 'compare_query',
+      kind: 'card',
+      order: 20,
+      title: i18n.translate('searchRelevanceDashboards.compareQueryCard.title', {
+        defaultMessage: 'Compare queries',
+      }),
+      description: i18n.translate('searchRelevanceDashboards.compareQueryCard.description', {
+        defaultMessage:
+          'The search comparison tool lets you compare the results of two different DSL queries applied to the same user query.',
+      }),
+      getIcon: () => icon,
+      cardProps: {
+        children: footer,
+        layout: 'horizontal',
+      },
+    }),
+    getTargetArea: () => 'search_overview/config_evaluate_search',
+  });
+};
diff --git a/public/components/service_card/icon.svg b/public/components/service_card/icon.svg
diff --git a/public/plugin.ts b/public/plugin.ts
@@ -5,7 +5,10 @@
 
 import { i18n } from '@osd/i18n';
 import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../src/core/public';
-import { DataSourcePluginSetup, DataSourcePluginStart } from '../../../src/plugins/data_source/public';
+import {
+  DataSourcePluginSetup,
+  DataSourcePluginStart,
+} from '../../../src/plugins/data_source/public';
 import { DataSourceManagementPluginSetup } from '../../../src/plugins/data_source_management/public';
 import { PLUGIN_ID, PLUGIN_NAME } from '../common';
 import {
@@ -14,19 +17,25 @@ import {
   SearchRelevancePluginStart,
 } from './types';
 import { registerAllPluginNavGroups } from './plugin_nav';
+import { ContentManagementPluginStart } from '../../../src/plugins/content_management/public';
+import { registerCompareQueryCard } from './components/service_card/compare_query_card';
 
 export interface SearchRelevancePluginSetupDependencies {
   dataSource: DataSourcePluginSetup;
-  dataSourceManagement: DataSourceManagementPluginSetup
+  dataSourceManagement: DataSourceManagementPluginSetup;
 }
 
 export interface SearchRelevanceStartDependencies {
   dataSource: DataSourcePluginStart;
+  contentManagement?: ContentManagementPluginStart;
 }
 
 export class SearchRelevancePlugin
   implements Plugin<SearchRelevancePluginSetup, SearchRelevancePluginStart> {
-  public setup(core: CoreSetup,  {dataSource, dataSourceManagement} : SearchRelevancePluginSetupDependencies): SearchRelevancePluginSetup {
+  public setup(
+    core: CoreSetup,
+    { dataSource, dataSourceManagement }: SearchRelevancePluginSetupDependencies
+  ): SearchRelevancePluginSetup {
     // Register an application into the side navigation menu
     core.application.register({
       id: PLUGIN_ID,
@@ -42,7 +51,12 @@ export class SearchRelevancePlugin
         // Get start services as specified in opensearch_dashboards.json
         const [coreStart, depsStart] = await core.getStartServices();
         // Render the application
-        return renderApp(coreStart, depsStart as AppPluginStartDependencies, params, dataSourceManagement);
+        return renderApp(
+          coreStart,
+          depsStart as AppPluginStartDependencies,
+          params,
+          dataSourceManagement
+        );
       },
     });
     registerAllPluginNavGroups(core);
@@ -59,7 +73,13 @@ export class SearchRelevancePlugin
     };
   }
 
-  public start(core: CoreStart, {dataSource}: SearchRelevanceStartDependencies): SearchRelevancePluginStart {
+  public start(
+    core: CoreStart,
+    { dataSource, contentManagement }: SearchRelevanceStartDependencies
+  ): SearchRelevancePluginStart {
+    if (contentManagement) {
+      registerCompareQueryCard(contentManagement, core);
+    }
     return {};
   }