Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Backport 2.x] Adding error message in Search Comparison Tool #305

Merged
merged 1 commit into from
Oct 4, 2023
Merged

[Backport 2.x] Adding error message in Search Comparison Tool #305

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 74 additions & 40 deletions public/components/query_compare/search_result/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,20 @@
import React, { useState } from 'react';
import { EuiPageContentBody } from '@elastic/eui';

import { CoreStart, ChromeBreadcrumb } from '../../../../../../src/core/public';
import { CoreStart } from '../../../../../../src/core/public';
import { SearchConfigsPanel } from './search_components/search_configs/search_configs';
import { SearchInputBar } from './search_components/search_bar';
import { ServiceEndpoints } from '../../../../common';
import { Header } from '../../common/header';
import { SearchResults, QueryError, QueryStringError, SelectIndexError } from '../../../types/index';
import {
SearchResults,
QueryError,
QueryStringError,
SelectIndexError,
initialQueryErrorState,
} from '../../../types/index';
import { ResultComponents } from './result_components/result_components';
import { useSearchRelevanceContext, initialQueryErrorState } from '../../../contexts';
import { useSearchRelevanceContext } from '../../../contexts';

const DEFAULT_QUERY = '{}';

Expand All @@ -26,19 +32,22 @@ export const SearchResult = ({ http }: SearchResultProps) => {
const [queryString2, setQueryString2] = useState(DEFAULT_QUERY);
const [queryResult1, setQueryResult1] = useState<SearchResults>({} as any);
const [queryResult2, setQueryResult2] = useState<SearchResults>({} as any);
const [queryError1, setQueryError1] = useState<QueryError>(initialQueryErrorState);
const [queryError2, setQueryError2] = useState<QueryError>(initialQueryErrorState);
const [searchBarValue, setSearchBarValue] = useState('');

const {
updateComparedResult1,
updateComparedResult2,
selectedIndex1,
selectedIndex2,
setQueryError1,
setQueryError2,
} = useSearchRelevanceContext();

const onClickSearch = () => {
const queryErrors = [{ ...initialQueryErrorState }, { ...initialQueryErrorState }];
const queryErrors = [
{ ...initialQueryErrorState, errorResponse: { ...initialQueryErrorState.errorResponse } },
{ ...initialQueryErrorState, errorResponse: { ...initialQueryErrorState.errorResponse } },
];
const jsonQueries = [{}, {}];

validateQuery(selectedIndex1, queryString1, queryErrors[0]);
Expand All @@ -47,7 +56,7 @@ export const SearchResult = ({ http }: SearchResultProps) => {
validateQuery(selectedIndex2, queryString2, queryErrors[1]);
jsonQueries[1] = rewriteQuery(searchBarValue, queryString2, queryErrors[1]);

handleQuery(jsonQueries, queryErrors);
handleSearch(jsonQueries, queryErrors);
};

const validateQuery = (selectedIndex: string, queryString: string, queryError: QueryError) => {
Expand All @@ -59,45 +68,58 @@ export const SearchResult = ({ http }: SearchResultProps) => {
// Check if query string is empty
if (!queryString.length) {
queryError.queryString = QueryStringError.empty;
queryError.errorResponse.statusCode = 400;
}
};

const rewriteQuery = (searchBarValue: string, queryString: string, queryError: QueryError) => {
const rewriteQuery = (value: string, queryString: string, queryError: QueryError) => {
if (queryString.trim().length > 0) {
try {
return JSON.parse(queryString.replace(/%SearchText%/g, searchBarValue));
return JSON.parse(queryString.replace(/%SearchText%/g, value));
} catch {
queryError.queryString = QueryStringError.invalid;
queryError.errorResponse.statusCode = 400;
}
}
};

const handleQuery = (jsonQueries: any, queryErrors: QueryError[]) => {
let requestBody = {};

// Handle query1
if (queryErrors[0].queryString.length || queryErrors[0].selectIndex.length) {
setQueryError1(queryErrors[0]);
setQueryResult1({} as any);
updateComparedResult1({} as any);
} else if (!queryErrors[0].queryString.length && !queryErrors[0].selectIndex.length) {
requestBody = {
query1: { index: selectedIndex1, ...jsonQueries[0] },
};
}

// Handle query2
if (queryErrors[1].queryString.length || queryErrors[1].selectIndex.length) {
setQueryError2(queryErrors[1]);
setQueryResult2({} as any);
updateComparedResult2({} as any);
} else if (!queryErrors[1].queryString.length && !queryErrors[1].selectIndex.length) {
requestBody = {
...requestBody,
query2: { index: selectedIndex2, ...jsonQueries[1] },
};
const handleQuery = (
queryError: QueryError,
selectedIndex: string,
jsonQuery: any,
updateComparedResult: (result: SearchResults) => void,
setQueryResult: React.Dispatch<React.SetStateAction<SearchResults>>,
setQueryError: React.Dispatch<React.SetStateAction<QueryError>>
) => {
if (queryError.queryString.length || queryError.selectIndex.length) {
setQueryError(queryError);
setQueryResult({} as any);
updateComparedResult({} as any);
} else if (!queryError.queryString.length && !queryError.selectIndex) {
setQueryError(initialQueryErrorState);
return { index: selectedIndex, ...jsonQuery };
}
};

const handleSearch = (jsonQueries: any, queryErrors: QueryError[]) => {
const requestBody = {
query1: handleQuery(
queryErrors[0],
selectedIndex1,
jsonQueries[0],
updateComparedResult1,
setQueryResult1,
setQueryError1
),
query2: handleQuery(
queryErrors[1],
selectedIndex2,
jsonQueries[1],
updateComparedResult2,
setQueryResult2,
setQueryError2
),
};
if (Object.keys(requestBody).length !== 0) {
http
.post(ServiceEndpoints.GetSearchResults, {
Expand All @@ -115,20 +137,23 @@ export const SearchResult = ({ http }: SearchResultProps) => {
}

if (res.errorMessage1) {
setQueryError1({
...queryErrors[0],
setQueryError1((error: QueryError) => ({
...error,
queryString: res.errorMessage1,
});
errorResponse: res.errorMessage1,
}));
}

if (res.errorMessage2) {
setQueryError2({
...queryErrors[1],
setQueryError2((error: QueryError) => ({
...error,
queryString: res.errorMessage2,
});
errorResponse: res.errorMessage2,
}));
}
})
.catch((error: Error) => {
// eslint-disable-next-line no-console
console.error(error);
});
}
Expand All @@ -149,8 +174,17 @@ export const SearchResult = ({ http }: SearchResultProps) => {
queryString2={queryString2}
setQueryString1={setQueryString1}
setQueryString2={setQueryString2}
queryError1={queryError1}
queryError2={queryError2}
setQueryError1={setQueryError1}
setQueryError2={setQueryError2}
/>
<ResultComponents
queryResult1={queryResult1}
queryResult2={queryResult2}
queryError1={queryError1}
queryError2={queryError2}
/>
<ResultComponents queryResult1={queryResult1} queryResult2={queryResult2} />
</EuiPageContentBody>
</>
);
Expand Down
60 changes: 60 additions & 0 deletions ...are/search_result/result_components/__test__/__snapshots__/result_component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,26 @@
exports[`Result component Renders result component 1`] = `
<SearchRelevanceContextProvider>
<ResultComponents
queryError1={
Object {
"errorResponse": Object {
"body": "",
"statusCode": 200,
},
"queryString": "",
"selectIndex": "",
}
}
queryError2={
Object {
"errorResponse": Object {
"body": "",
"statusCode": 200,
},
"queryString": "",
"selectIndex": "",
}
}
queryResult1={
Object {
"_shards": Object {
Expand Down Expand Up @@ -385,6 +405,26 @@ exports[`Result component Renders result component 1`] = `
}
>
<ResultPanels
queryError1={
Object {
"errorResponse": Object {
"body": "",
"statusCode": 200,
},
"queryString": "",
"selectIndex": "",
}
}
queryError2={
Object {
"errorResponse": Object {
"body": "",
"statusCode": 200,
},
"queryString": "",
"selectIndex": "",
}
}
queryResult1={
Object {
"_shards": Object {
Expand Down Expand Up @@ -782,6 +822,16 @@ exports[`Result component Renders result component 1`] = `
className="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero euiSplitPanel euiSplitPanel--row"
>
<ResultPanel
queryError={
Object {
"errorResponse": Object {
"body": "",
"statusCode": 200,
},
"queryString": "",
"selectIndex": "",
}
}
queryResult={
Object {
"_shards": Object {
Expand Down Expand Up @@ -3749,6 +3799,16 @@ exports[`Result component Renders result component 1`] = `
</_EuiSplitPanelInner>
</ResultPanel>
<ResultPanel
queryError={
Object {
"errorResponse": Object {
"body": "",
"statusCode": 200,
},
"queryString": "",
"selectIndex": "",
}
}
queryResult={
Object {
"_shards": Object {
Expand Down
Loading
Loading