Feature: Add Ability to Select a Search Pipeline in Comparison Tool (#…

…352) (#362)

* Add search pipeline parameters to index and route files



* Add search pipeline dropdown



* Integrate option to select search pipeline



* Update tests and snapshots



* Update get pipelines endpoint



* Update .babelrc



* Update test snapshots



* Add id attribute to search bar (#338)

* Add id to search bar



* Add keys to getDlTmpl component



* Change enclosing tag to span instead of div



---------



* Update .babelrc



* Add ability to select _none option



* Update test coverages



* Update variables in pipeline selection



---------


(cherry picked from commit 29e5867)

Signed-off-by: Nicholas Ung <nicholasung22@gmail.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.babelrc

@@ -14,3 +14,4 @@
     ["@babel/plugin-transform-runtime", { "regenerator": true }]
   ]
 }
+

common/index.ts

@@ -8,6 +8,9 @@ export const PLUGIN_NAME = 'Search Relevance';
 
 export enum ServiceEndpoints {
   GetIndexes = '/api/relevancy/search/indexes',
+  GetPipelines = '/api/relevancy/search/pipelines',
   GetSearchResults = '/api/relevancy/search',
   GetStats = '/api/relevancy/stats',
 }
+
+export const SEARCH_API = '/_search';

public/components/query_compare/home.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect } from 'react';
-import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
+import { NavigationPublicPluginStart } from '../../../../../src/plugins/navigation/public';
 import { CoreStart, ChromeBreadcrumb } from '../../../../../src/core/public';
 import '../../ace-themes/sql_console';
 import { CreateIndex } from './create_index';
@@ -25,7 +25,6 @@ interface QueryExplorerProps {
   setToast: (title: string, color?: string, text?: any, side?: string) => void;
   chrome: CoreStart['chrome'];
 }
-
 export const Home = ({
   parentBreadCrumbs,
   notifications,
@@ -35,19 +34,28 @@ export const Home = ({
   setToast,
   chrome,
 }: QueryExplorerProps) => {
-  const { documentsIndexes, setDocumentsIndexes, showFlyout } = useSearchRelevanceContext();
+  const {
+    documentsIndexes,
+    setDocumentsIndexes,
+    pipelines,
+    setPipelines,
+    showFlyout,
+  } = useSearchRelevanceContext();
 
   useEffect(() => {
     setBreadcrumbs([...parentBreadCrumbs]);
   }, [setBreadcrumbs, parentBreadCrumbs]);
 
-  // Get Indexes
+  // Get Indexes and Pipelines
   useEffect(() => {
     http.get(ServiceEndpoints.GetIndexes).then((res: DocumentsIndex[]) => {
       setDocumentsIndexes(res);
     });
-  }, [http, setDocumentsIndexes]);
 
+    http.get(ServiceEndpoints.GetPipelines).then((res: {}) => {
+      setPipelines(res);
+    });
+  }, [http, setDocumentsIndexes, setPipelines]);
   return (
     <>
       <div className="osdOverviewWrapper">

public/components/query_compare/search_result/index.tsx

@@ -41,6 +41,8 @@ export const SearchResult = ({ http }: SearchResultProps) => {
     updateComparedResult2,
     selectedIndex1,
     selectedIndex2,
+    pipeline1,
+    pipeline2,
   } = useSearchRelevanceContext();
 
   const onClickSearch = () => {
@@ -86,6 +88,7 @@ export const SearchResult = ({ http }: SearchResultProps) => {
   const handleQuery = (
     queryError: QueryError,
     selectedIndex: string,
+    pipeline: string,
     jsonQuery: any,
     updateComparedResult: (result: SearchResults) => void,
     setQueryResult: React.Dispatch<React.SetStateAction<SearchResults>>,
@@ -97,7 +100,7 @@ export const SearchResult = ({ http }: SearchResultProps) => {
       updateComparedResult({} as any);
     } else if (!queryError.queryString.length && !queryError.selectIndex) {
       setQueryError(initialQueryErrorState);
-      return { index: selectedIndex, ...jsonQuery };
+      return { index: selectedIndex, pipeline, ...jsonQuery };
     }
   };
 
@@ -106,6 +109,7 @@ export const SearchResult = ({ http }: SearchResultProps) => {
       query1: handleQuery(
         queryErrors[0],
         selectedIndex1,
+        pipeline1,
         jsonQueries[0],
         updateComparedResult1,
         setQueryResult1,
@@ -114,6 +118,7 @@ export const SearchResult = ({ http }: SearchResultProps) => {
       query2: handleQuery(
         queryErrors[1],
         selectedIndex2,
+        pipeline2,
         jsonQueries[1],
         updateComparedResult2,
         setQueryResult2,

public/components/query_compare/search_result/result_components/result_components.tsx

@@ -29,9 +29,7 @@ const InitialState = () => {
       <EuiEmptyPrompt
         iconType="search"
         title={<h2>No results</h2>}
-        body={
-            <p>Add at least one query to display search results.</p>
-        }
+        body={<p>Add at least one query to display search results.</p>}
       />
     </EuiPanel>
   );