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

Fix query string handling for workbench #305

Merged
merged 2 commits into from
Nov 30, 2021
Merged

Fix query string handling for workbench #305

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
80fd05f
fix line break handling for ppl
joshuali925 Nov 30, 2021
338eb7f
escape quotes in query requests
joshuali925 Nov 30, 2021
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
201 changes: 107 additions & 94 deletions workbench/public/components/Main/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,23 @@
* SPDX-License-Identifier: Apache-2.0
*/


import React from 'react';
import { EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiButton, EuiTitle } from '@elastic/eui';
import { IHttpResponse, IHttpService } from 'angular';
import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
import { IHttpResponse } from 'angular';
import _ from 'lodash';
import QueryResults from '../QueryResults/QueryResults';
import Switch from '../QueryLanguageSwitch/Switch';
import { SQLPage } from '../SQLPage/SQLPage';
import { PPLPage } from '../PPLPage/PPLPage';
import React from 'react';
import { ChromeBreadcrumb, CoreStart } from '../../../../../src/core/public';
import { MESSAGE_TAB_LABEL } from '../../utils/constants';
import {
getDefaultTabId,
getDefaultTabLabel,
getQueries,
getSelectedResults,
Tree,
} from '../../utils/utils';
import { MESSAGE_TAB_LABEL } from '../../utils/constants';
import { ChromeBreadcrumb, CoreStart } from '../../../../../src/core/public';
import { PPLPage } from '../PPLPage/PPLPage';
import Switch from '../QueryLanguageSwitch/Switch';
import QueryResults from '../QueryResults/QueryResults';
import { SQLPage } from '../SQLPage/SQLPage';

interface ResponseData {
ok: boolean;
Expand Down Expand Up @@ -62,9 +61,9 @@ export type ItemIdToExpandedRowMap = {
};

export type DataRow = {
rowId: number
data: { [key: string]: any }
}
rowId: number;
data: { [key: string]: any };
};

interface MainProps {
httpClient: CoreStart['http'];
Expand Down Expand Up @@ -93,12 +92,16 @@ interface MainState {
const SUCCESS_MESSAGE = 'Success';

const errorQueryResponse = (queryResultResponseDetail: any) => {
let errorMessage = queryResultResponseDetail.errorMessage + ', this query is not runnable. \n \n' +
let errorMessage =
queryResultResponseDetail.errorMessage +
', this query is not runnable. \n \n' +
queryResultResponseDetail.data;
return errorMessage;
}
};

export function getQueryResultsForTable(queryResults: ResponseDetail<string>[]): ResponseDetail<QueryResult>[] {
export function getQueryResultsForTable(
queryResults: ResponseDetail<string>[]
): ResponseDetail<QueryResult>[] {
return queryResults.map(
(queryResultResponseDetail: ResponseDetail<string>): ResponseDetail<QueryResult> => {
if (!queryResultResponseDetail.fulfilled) {
Expand All @@ -107,7 +110,9 @@ export function getQueryResultsForTable(queryResults: ResponseDetail<string>[]):
errorMessage: errorQueryResponse(queryResultResponseDetail),
};
} else {
const responseObj = queryResultResponseDetail.data ? JSON.parse(queryResultResponseDetail.data) : '';
const responseObj = queryResultResponseDetail.data
? JSON.parse(queryResultResponseDetail.data)
: '';
let fields: string[] = [];
let dataRows: DataRow[] = [];

Expand Down Expand Up @@ -141,7 +146,7 @@ export function getQueryResultsForTable(queryResults: ResponseDetail<string>[]):
row['TABLE_NAME'] = field[index];
let dataRow: DataRow = {
rowId: id,
data: row
data: row,
};
dataRows[id] = dataRow;
}
Expand All @@ -168,14 +173,13 @@ export function getQueryResultsForTable(queryResults: ResponseDetail<string>[]):
}
let dataRow: DataRow = {
rowId: id,
data: row
data: row,
};
dataRows[id] = dataRow;
}
break;

default:

}
return {
fulfilled: queryResultResponseDetail.fulfilled,
Expand All @@ -185,7 +189,6 @@ export function getQueryResultsForTable(queryResults: ResponseDetail<string>[]):
message: SUCCESS_MESSAGE,
},
};

}
}
);
Expand Down Expand Up @@ -224,14 +227,12 @@ export class Main extends React.Component<MainProps, MainState> {
}

componentDidMount() {
this.props.setBreadcrumbs(
[
{
text: 'Query Workbench',
href: '#',
},
]
);
this.props.setBreadcrumbs([
{
text: 'Query Workbench',
href: '#',
},
]);
}

processTranslateResponse(response: IHttpResponse<ResponseData>): ResponseDetail<TranslateResult> {
Expand Down Expand Up @@ -265,23 +266,23 @@ export class Main extends React.Component<MainProps, MainState> {
}
if (!response.data.ok) {
let err = response.data.resp;
console.log("Error occurred when processing query response: ", err)
console.log('Error occurred when processing query response: ', err);

// Exclude a special case from the error cases:
// When downloading the csv result, it gets the "Unable to parse/serialize body" response
// But data is also returned in data body. For this case:
// Mark fulfilled to true for this case to write the csv result to downloading file
if (response.data.body && err == "Unable to parse/serialize body") {
if (response.data.body && err == 'Unable to parse/serialize body') {
return {
fulfilled: true,
errorMessage: err,
data: response.data.body
}
data: response.data.body,
};
}
return {
fulfilled: false,
errorMessage: err,
data: ''
data: '',
};
}

Expand Down Expand Up @@ -341,16 +342,18 @@ export class Main extends React.Component<MainProps, MainState> {
let endpoint = '../api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlquery' : 'pplquery');
const responsePromise = Promise.all(
queries.map((query: string) =>
this.httpClient.post(endpoint, { body: `{ "query": "${query}" }` }).catch((error: any) => {
this.setState({
messages: [
{
text: error.message,
className: 'error-message',
},
],
});
})
this.httpClient
.post(endpoint, { body: JSON.stringify({ query }) })
.catch((error: any) => {
this.setState({
messages: [
{
text: error.message,
className: 'error-message',
},
],
});
})
)
);

Expand Down Expand Up @@ -388,16 +391,18 @@ export class Main extends React.Component<MainProps, MainState> {
'../api/sql_console/' + (_.isEqual(language, 'SQL') ? 'translatesql' : 'translateppl');
const translationPromise = Promise.all(
queries.map((query: string) =>
this.httpClient.post(endpoint, { body: `{ "query": "${query}" }` }).catch((error: any) => {
this.setState({
messages: [
{
text: error.message,
className: 'error-message',
},
],
});
})
this.httpClient
.post(endpoint, { body: JSON.stringify({ query }) })
.catch((error: any) => {
this.setState({
messages: [
{
text: error.message,
className: 'error-message',
},
],
});
})
)
);

Expand Down Expand Up @@ -432,16 +437,18 @@ export class Main extends React.Component<MainProps, MainState> {
if (queries.length > 0) {
Promise.all(
queries.map((query: string) =>
this.httpClient.post('../api/sql_console/sqljson', { body: `{ "query": "${query}" }` }).catch((error: any) => {
this.setState({
messages: [
{
text: error.message,
className: 'error-message',
},
],
});
})
this.httpClient
.post('../api/sql_console/sqljson', { body: JSON.stringify({ query }) })
.catch((error: any) => {
this.setState({
messages: [
{
text: error.message,
className: 'error-message',
},
],
});
})
)
).then((response) => {
const results: ResponseDetail<string>[] = response.map((response) =>
Expand All @@ -464,16 +471,18 @@ export class Main extends React.Component<MainProps, MainState> {
let endpoint = '../api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlquery' : 'pplquery');
Promise.all(
queries.map((query: string) =>
this.httpClient.post(endpoint, { body: `{ "query": "${query}" }` }).catch((error: any) => {
this.setState({
messages: [
{
text: error.message,
className: 'error-message',
},
],
});
})
this.httpClient
.post(endpoint, { body: JSON.stringify({ query }) })
.catch((error: any) => {
this.setState({
messages: [
{
text: error.message,
className: 'error-message',
},
],
});
})
)
).then((jdbcResponse) => {
const jdbcResult: ResponseDetail<string>[] = jdbcResponse.map((jdbcResponse) =>
Expand All @@ -496,16 +505,18 @@ export class Main extends React.Component<MainProps, MainState> {
let endpoint = '../api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlcsv' : 'pplcsv');
Promise.all(
queries.map((query: string) =>
this.httpClient.post(endpoint, { body: `{ "query": "${query}" }` }).catch((error: any) => {
this.setState({
messages: [
{
text: error.message,
className: 'error-message',
},
],
});
})
this.httpClient
.post(endpoint, { body: JSON.stringify({ query }) })
.catch((error: any) => {
this.setState({
messages: [
{
text: error.message,
className: 'error-message',
},
],
});
})
)
).then((csvResponse) => {
const csvResult: ResponseDetail<string>[] = csvResponse.map((csvResponse) =>
Expand All @@ -528,16 +539,18 @@ export class Main extends React.Component<MainProps, MainState> {
let endpoint = '../api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqltext' : 'ppltext');
Promise.all(
queries.map((query: string) =>
this.httpClient.post(endpoint, { body: `{ "query": "${query}" }` }).catch((error: any) => {
this.setState({
messages: [
{
text: error.message,
className: 'error-message',
},
],
});
})
this.httpClient
.post(endpoint, { body: JSON.stringify({ query }) })
.catch((error: any) => {
this.setState({
messages: [
{
text: error.message,
className: 'error-message',
},
],
});
})
)
).then((textResponse) => {
const textResult: ResponseDetail<string>[] = textResponse.map((textResponse) =>
Expand Down
2 changes: 1 addition & 1 deletion workbench/public/utils/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const getQueries = (queriesString: string): string[] => {

return queriesString
.split(';')
.map((query: string) => query.trim())
.map((query: string) => query.trim().replace(/[\r\n]+/g, ' '))
.filter((query: string) => query != '');
};

Expand Down