Skip to content

Commit

Permalink
Fix workbench bugs from plugin platform upgrade (opendistro-for-elast…
Browse files Browse the repository at this point in the history 
…icsearch#886)

* Fix download json api path

* Fix cypress tests

* Fix response tab margin

* Update cypress tests

* Fix server log message

* Fix asScoped call for security plugin

* Update cypress tests

* Fix unique keys problem

* Remove console log
  • Loading branch information
@joshuali925 @chloe-zh
joshuali925 authored and chloe-zh committed Dec 15, 2020
1 parent 198a3da commit 3ffeabe
Show file tree
Hide file tree
Showing 12 changed files with 133 additions and 126 deletions.
132 changes: 82 additions & 50 deletions workbench/.cypress/integration/ui.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,41 +23,49 @@ describe('Test PPL UI', () => {
beforeEach(() => {
cy.visit('app/opendistro-query-workbench');
cy.wait(delay);
cy.get('.euiToggle__input[title=PPL]').click();
cy.get('.euiToggle__input[title=PPL]').click({ force: true });
cy.wait(delay);
});

it('Confirm results are empty', () => {
cy.get('.euiTextAlign').contains('Enter a query in the query editor above to see results.').should('have.length', 1);
cy.get('.euiTextAlign')
.contains('Enter a query in the query editor above to see results.')
.should('have.length', 1);
});

it('Test Run button', () => {
cy.get('textarea.ace_text-input').eq(0).focus().type('source=accounts', { force: true });
cy.wait(delay);
cy.get('.euiButton__text').contains('Run').click();
cy.get('.euiButton__text').contains('Run').click({ force: true });
cy.wait(delay);
cy.get('.euiTab__content').contains('Events').click();
cy.get('.euiTab__content').contains('Events').click({ force: true });

cy.get('span.euiTableCellContent__text').eq(21).should((employer) => {
expect(employer).to.contain('Pyrami');
});
cy.get('span.euiTableCellContent__text')
.eq(19)
.should((employer) => {
expect(employer).to.contain('Pyrami');
});
});

it('Test Clear button', () => {
cy.get('textarea.ace_text-input').eq(0).focus().type('source=accounts', { force: true });
cy.wait(delay);
cy.get('.euiButton__text').contains('Run').click();
cy.get('.euiButton__text').contains('Run').click({ force: true });
cy.wait(delay);
cy.get('.euiTab__content').contains('Events').click();
cy.get('.euiTab__content').contains('Events').click({ force: true });
cy.wait(delay);
cy.get('.euiButton__text').contains('Clear').click();
cy.get('.euiButton__text').contains('Clear').click({ force: true });
cy.wait(delay);

cy.get('.euiTextAlign').contains('Enter a query in the query editor above to see results.').should('have.length', 1);
cy.get('.ace_content').eq(0).then((queryEditor) => {
const editor = edit(queryEditor[0]);
expect(editor.getValue()).to.equal('');
});
cy.get('.euiTextAlign')
.contains('Enter a query in the query editor above to see results.')
.should('have.length', 1);
cy.get('.ace_content')
.eq(0)
.then((queryEditor) => {
const editor = edit(queryEditor[0]);
expect(editor.getValue()).to.equal('');
});
});

it('Test full screen view', () => {
Expand All @@ -66,13 +74,13 @@ describe('Test PPL UI', () => {

cy.get('textarea.ace_text-input').eq(0).focus().type('source=accounts', { force: true });
cy.wait(delay);
cy.get('.euiButton__text').contains('Run').click();
cy.get('.euiButton__text').contains('Run').click({ force: true });
cy.wait(delay);
cy.get('.euiButton__text').contains('Full screen view').click();
cy.get('.euiButton__text').contains('Full screen view').click({ force: true });

cy.get('.euiTitle').should('not.exist');

cy.get('button#exit-fullscreen-button').click();
cy.get('button#exit-fullscreen-button').click({ force: true });
cy.wait(delay);
cy.get('.euiButton__text').contains('Full screen view').should('exist');
cy.get('.euiTitle').contains('Query Workbench').should('exist');
Expand All @@ -83,56 +91,70 @@ describe('Test SQL UI', () => {
beforeEach(() => {
cy.visit('app/opendistro-query-workbench');
cy.wait(delay);
cy.get('.euiToggle__input[title=SQL]').click();
cy.get('.euiToggle__input[title=SQL]').click({ force: true });
cy.wait(delay);
});

it('Confirm results are empty', () => {
cy.get('.euiTextAlign').contains('Enter a query in the query editor above to see results.').should('have.length', 1);
cy.get('.euiTextAlign')
.contains('Enter a query in the query editor above to see results.')
.should('have.length', 1);
});

it('Test Run button and field search', () => {
cy.get('textarea.ace_text-input').eq(0).focus().type('{enter}select * from accounts where balance > 49500;', { force: true });
cy.get('textarea.ace_text-input')
.eq(0)
.focus()
.type('{enter}select * from accounts where balance > 49500;', { force: true });
cy.wait(delay);
cy.get('.euiButton__text').contains('Run').click();
cy.get('.euiButton__text').contains('Run').click({ force: true });
cy.wait(delay);
cy.get('.euiTab__content').contains('accounts').click();
cy.get('.euiTab__content').contains('accounts').click({ force: true });

cy.get('input.euiFieldSearch').type('marissa');
cy.get('span.euiTableCellContent__text').eq(15).should((account_number) => {
expect(account_number).to.contain('803');
});
cy.get('span.euiTableCellContent__text')
.eq(13)
.should((account_number) => {
expect(account_number).to.contain('803');
});
});

it('Test Translate button', () => {
cy.get('textarea.ace_text-input').eq(0).focus().type('{selectall}{backspace}', { force: true });
cy.wait(delay);
cy.get('textarea.ace_text-input').eq(0).focus().type('{selectall}{backspace}select log(balance) from accounts where abs(age) > 20;', { force: true });
cy.get('textarea.ace_text-input')
.eq(0)
.focus()
.type('{selectall}{backspace}select log(balance) from accounts where abs(age) > 20;', {
force: true,
});
cy.wait(delay);
cy.get('.euiButton__text').contains('Explain').click();
cy.get('.euiButton__text').contains('Explain').click({ force: true });
cy.wait(delay);

// hard to get euiCodeBlock content, check length instead
cy.get('.euiCodeBlock__code').children().should('have.length', 37);
});

it('Test Clear button', () => {
cy.get('.euiButton__text').contains('Clear').click();
cy.get('.euiButton__text').contains('Clear').click({ force: true });
cy.wait(delay);

cy.get('.ace_content').eq(0).then((queryEditor) => {
const editor = edit(queryEditor[0]);
expect(editor.getValue()).to.equal('');
});
cy.get('.ace_content')
.eq(0)
.then((queryEditor) => {
const editor = edit(queryEditor[0]);
expect(editor.getValue()).to.equal('');
});
});

it('Test full screen view', () => {
cy.get('.euiButton__text').contains('Full screen view').should('not.exist');
cy.get('.euiTitle').contains('Query Workbench').should('exist');

cy.get('.euiButton__text').contains('Run').click();
cy.get('.euiButton__text').contains('Run').click({ force: true });
cy.wait(delay);
cy.get('.euiButton__text').contains('Full screen view').click();
cy.get('.euiButton__text').contains('Full screen view').click({ force: true });

cy.get('.euiTitle').should('not.exist');
});
Expand All @@ -147,13 +169,13 @@ describe('Test and verify SQL downloads', () => {
url: url,
headers: {
'content-type': 'application/json;charset=UTF-8',
'kbn-version': '7.9.1',
'kbn-version': '7.10.0',
},
body: {
'query': 'select * from accounts where balance > 49500'
}
}).then(response => {
expect(response.body.resp).to.have.string(files[file]);
}).then((response) => {
expect(response.body.data.resp).to.have.string(files[file]);
});
});
});
Expand All @@ -163,35 +185,45 @@ describe('Test table display', () => {
beforeEach(() => {
cy.visit('app/opendistro-query-workbench');
cy.wait(delay);
cy.get('.euiToggle__input[title=SQL]').click();
cy.get('.euiToggle__input[title=SQL]').click({ force: true });
cy.wait(delay);
cy.get('textarea.ace_text-input').eq(0).focus().type('{selectall}{backspace}', { force: true });
cy.wait(delay);
});

testQueries.map(({ title, query, cell_idx, expected_string }) => {
it(title, () => {
cy.get('textarea.ace_text-input').eq(0).focus().type(`{selectall}{backspace}${query}`, { force: true });
cy.get('textarea.ace_text-input')
.eq(0)
.focus()
.type(`{selectall}{backspace}${query}`, { force: true });
cy.wait(delay);
cy.get('.euiButton__text').contains('Run').click();
cy.get('.euiButton__text').contains('Run').click({ force: true });
cy.wait(delay);

cy.get('span.euiTableCellContent__text').eq(cell_idx).should((cell) => {
expect(cell).to.contain(expected_string);
});
cy.get('span.euiTableCellContent__text')
.eq(cell_idx)
.should((cell) => {
expect(cell).to.contain(expected_string);
});
});
});

it('Test nested fields display', () => {
cy.get('textarea.ace_text-input').eq(0).focus().type(`{selectall}{backspace}select * from employee_nested;`, { force: true });
cy.get('textarea.ace_text-input')
.eq(0)
.focus()
.type(`{selectall}{backspace}select * from employee_nested;`, { force: true });
cy.wait(delay);
cy.get('.euiButton__text').contains('Run').click();
cy.get('.euiButton__text').contains('Run').click({ force: true });
cy.wait(delay);

cy.get('span.euiTableCellContent__text').eq(21).click();
cy.get('button.euiLink').eq(2).click({ force: true });
cy.wait(delay);
cy.get('span.euiTableCellContent__text').eq(27).should((cell) => {
expect(cell).to.contain('2018-06-23');
});
cy.get('span.euiTableCellContent__text')
.eq(24)
.should((cell) => {
expect(cell).to.contain('2018-06-23');
});
});
});
12 changes: 6 additions & 6 deletions workbench/.cypress/utils/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,32 +42,32 @@ export const testQueries = [
{
title: 'Test GROUP BY',
query: 'select count(*) from accounts group by gender;',
cell_idx: 5,
cell_idx: 3,
expected_string: '507'
},
{
title: 'Test GROUP BY with aliases and scalar function',
query: 'SELECT ABS(age) AS a FROM accounts GROUP BY ABS(age);',
cell_idx: 17,
expected_string: '35.0'
expected_string: '28.0'
},
{
title: 'Test GROUP BY and HAVING',
query: 'SELECT age, MAX(balance) FROM accounts GROUP BY age HAVING MIN(balance) > 3000;',
cell_idx: 15,
expected_string: '49339'
cell_idx: 5,
expected_string: '47257'
},
{
title: 'Test ORDER BY',
query: 'SELECT account_number FROM accounts ORDER BY account_number DESC;',
cell_idx: 5,
expected_string: '999'
expected_string: '998'
},
{
title: 'Test JOIN',
query: 'select a.account_number, a.firstname, a.lastname, e.id, e.name from accounts a join employee_nested e order by a.account_number;',
cell_idx: 45,
expected_string: 'Amber'
expected_string: 'Duke'
},
];

Expand Down
12 changes: 6 additions & 6 deletions workbench/public/components/Main/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -325,7 +325,7 @@ 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, { query }).catch((error: any) => {
this.httpClient.post(endpoint, { body: `{ "query": "${query}" }` }).catch((error: any) => {
this.setState({
messages: [
{
Expand Down Expand Up @@ -372,7 +372,7 @@ 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, { query }).catch((error: any) => {
this.httpClient.post(endpoint, { body: `{ "query": "${query}" }` }).catch((error: any) => {
this.setState({
messages: [
{
Expand Down Expand Up @@ -416,7 +416,7 @@ export class Main extends React.Component<MainProps, MainState> {
if (queries.length > 0) {
Promise.all(
queries.map((query: string) =>
this.httpClient.post('../api/sql_console/queryjson', { query }).catch((error: any) => {
this.httpClient.post('../api/sql_console/sqljson', { body: `{ "query": "${query}" }` }).catch((error: any) => {
this.setState({
messages: [
{
Expand Down Expand Up @@ -448,7 +448,7 @@ 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, { query }).catch((error: any) => {
this.httpClient.post(endpoint, { body: `{ "query": "${query}" }` }).catch((error: any) => {
this.setState({
messages: [
{
Expand Down Expand Up @@ -480,7 +480,7 @@ 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, { query }).catch((error: any) => {
this.httpClient.post(endpoint, { body: `{ "query": "${query}" }` }).catch((error: any) => {
this.setState({
messages: [
{
Expand Down Expand Up @@ -512,7 +512,7 @@ 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, { query }).catch((error: any) => {
this.httpClient.post(endpoint, { body: `{ "query": "${query}" }` }).catch((error: any) => {
this.setState({
messages: [
{
Expand Down
2 changes: 1 addition & 1 deletion workbench/public/components/QueryResults/QueryResults.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -347,7 +347,7 @@ class QueryResults extends React.Component<QueryResultsProps, QueryResultsState>
style={{ marginTop: "8px" }}
grow={false}
>
<EuiTabs>{tabsButtons}</EuiTabs>
<EuiTabs style={{marginLeft: 7, marginBottom: 6}}>{tabsButtons}</EuiTabs>
</EuiFlexItem>
</EuiFlexGroup>

Expand Down
16 changes: 8 additions & 8 deletions workbench/public/components/QueryResults/QueryResultsBody.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -683,7 +683,7 @@ class QueryResultsBody extends React.Component<QueryResultsBodyProps, QueryResul
}
tableCells.push(
<EuiTableRowCell
key={field}
key={`rowCell-${field}-${rowId}`}
truncateText={false}
textOnly={true}
>
Expand All @@ -695,7 +695,7 @@ class QueryResultsBody extends React.Component<QueryResultsBodyProps, QueryResul
// Expanding icon cell
else {
tableCells.push(
<EuiTableRowCell id={tree._root.nodeId}>
<EuiTableRowCell id={tree._root.nodeId} key={`rowCell-expandIconRow-${rowId}`}>
{expandingNode}
</EuiTableRowCell>
);
Expand All @@ -704,26 +704,26 @@ class QueryResultsBody extends React.Component<QueryResultsBodyProps, QueryResul
} else {
const fieldObj = this.getFieldValue(rowItem, "");
tableCells.push(
<EuiTableRowCell truncateText={false} textOnly={true}>
<EuiTableRowCell key={`rowCell-default-${rowId}`} truncateText={false} textOnly={true}>
{fieldObj.value}
</EuiTableRowCell>
);
}

const tableRow = <EuiTableRow key={rowId} data-test-subj={'tableRow'}>{tableCells}</EuiTableRow>;
let row = <Fragment>{tableRow}</Fragment>;
const tableRow = <EuiTableRow key={`row-${rowId}`} data-test-subj={'tableRow'}>{tableCells}</EuiTableRow>;
let row = <Fragment key={`row-wrapper-${rowId}`}>{tableRow}</Fragment>;

if (expandedRowMap[rowId] && expandedRowMap[rowId].expandedRow) {
const tableRow = (
<EuiTableRow className="expanded-row" key={rowId}>
<EuiTableRow className="expanded-row" key={`expanded-row-${rowId}`}>
{tableCells}{" "}
</EuiTableRow>
);
const expandedRow = (
<EuiTableRow>{expandedRowMap[rowId].expandedRow}</EuiTableRow>
<EuiTableRow key={`row-${rowId}`}>{expandedRowMap[rowId].expandedRow}</EuiTableRow>
);
row = (
<Fragment>
<Fragment key={`row-wrapper-${rowId}`}>
{tableRow}
{expandedRow}
</Fragment>
Expand Down
Loading

0 comments on commit 3ffeabe

Please sign in to comment.