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

Modularize and cleanup panel #603

Merged
merged 17 commits into from
Mar 31, 2022
Merged

Modularize and cleanup panel #603

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
b5d6def
Remove switch to edit viz and clean up breadcrumbs
eugenesk24 Mar 21, 2022
5c678b4
Add onEditClick prop to modularize
eugenesk24 Mar 22, 2022
dbd046e
Remove duplicate components
eugenesk24 Mar 22, 2022
354fe56
Update snapshot
eugenesk24 Mar 22, 2022
26543df
Make add visualization popover a component
eugenesk24 Mar 23, 2022
85f9e99
Sentence case event analytics
eugenesk24 Mar 23, 2022
dbe358e
Add and update cypress tests
eugenesk24 Mar 23, 2022
58f4730
Merge remote-tracking branch 'origin' into modularize-and-cleanup-panel
eugenesk24 Mar 24, 2022
53dcf74
Try java 11
eugenesk24 Mar 28, 2022
5d26ed9
Merge branch 'main' into modularize-and-cleanup-panel
eugenesk24 Mar 28, 2022
0bf4ab3
Update snapshots
eugenesk24 Mar 29, 2022
9a2303c
Fix merge conflicts
eugenesk24 Mar 30, 2022
ef962d2
Update snapshots
eugenesk24 Mar 30, 2022
6e1f9ff
Update snapshots more
eugenesk24 Mar 30, 2022
dba0f56
Fix snapshot
eugenesk24 Mar 30, 2022
b1a264f
Remove obsolete snapshots:
eugenesk24 Mar 30, 2022
fe540cc
Fix merge conflicts
eugenesk24 Mar 31, 2022
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
191 changes: 175 additions & 16 deletions dashboards-observability/.cypress/integration/app_analytics.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,14 @@ import {
trace_one,
trace_two,
trace_three,
spanQueryPartOne,
spanQueryPartTwo,
spanQueryPartThree,
visName,
spanQueryOnePartOne,
spanQueryOnePartTwo,
spanQueryOnePartThree,
spanQueryTwoPartOne,
spanQueryTwoPartTwo,
spanQueryTwoPartThree,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

np but might be better to loop over array, also why does this need to be split into 3 parts?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was finding that cypress would mistype it if it was just one long string, if I split it up and start at the parts where it was missing it works. 🦺

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i see, this is ok but you can also just pass the whole string and use a separate function to split by fixed length and feed to cypress.type()

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea the only problem is cypress would repeatedly miss certain characters so I had to split the string at those places not at a fixed length

visOneName,
visTwoName,
composition,
newName,
} from '../utils/app_constants';
Expand Down Expand Up @@ -95,10 +99,24 @@ describe('Creating application', () => {
cy.get('.euiBadge').contains('2').should('exist');
cy.get('.euiButton').contains('Create').should('not.be.disabled');
cy.get('.euiButton').contains('Create').click();
cy.wait(delay);
cy.wait(delay*3);
cy.get('.euiTitle').contains(nameOne).should('exist');
cy.get('.euiTab').contains('Panel').click();
cy.get('.euiText').contains('Start by adding metrics').should('exist');
cy.get('.euiText').contains('Start by adding your first visualization').should('exist');
});

it('Hides application panels in Operational Panels', () => {
cy.visit(
`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/`
);
cy.wait(delay*4);
if (cy.get('.euiButton').contains('Create panel').length < 2) {
cy.get('input.euiFieldSearch').type(`${nameOne}'s Panel`);
cy.wait(delay);
cy.get('.euiTableCellContent__text').contains('No items found').should('exist');
cy.get('.euiFormControlLayoutClearButton').click();
cy.wait(delay);
}
});

it('Redirects to home page on cancel', () => {
Expand Down Expand Up @@ -276,6 +294,7 @@ describe('Viewing application', () => {

it('Opens span detail flyout when Span ID is clicked', () => {
cy.get('.euiTab').contains('Traces & Spans').click();
supressResizeObserverIssue();
cy.wait(delay);
cy.get('.euiLink').contains('5ff3516909562c60').click();
cy.get('.euiFlyout').contains('Span detail').should('be.visible');
Expand All @@ -296,36 +315,38 @@ describe('Viewing application', () => {
cy.get('.euiBadge__text').contains('Base Query').should('exist');
});

it('Saves visualization to panel', () => {
cy.get('.euiTab').contains('Log Events').click();
it('Saves visualization #1 to panel', () => {
cy.get('.euiTab').contains('Panel').click();
cy.get('.euiButton').eq(3).contains('Add').click();
cy.wait(delay);
cy.get('.plot-container').should('exist');
cy.get('[data-test-subj="searchAutocompleteTextArea"]').click();
cy.get('.aa-List').find('.aa-Item').should('have.length', 11);
cy.get('[data-test-subj="searchAutocompleteTextArea"]').type('x');
cy.get('[data-test-subj="searchAutocompleteTextArea"]').clear().wait(delay * 2).type(spanQueryPartOne);
cy.get('[data-test-subj="searchAutocompleteTextArea"]').wait(delay * 2).type(spanQueryPartTwo);
cy.get('[data-test-subj="searchAutocompleteTextArea"]').wait(delay * 2).type(spanQueryPartThree);
changeTimeTo24('hours');
cy.get('.euiButton').contains('Refresh').click();
cy.get('[data-test-subj="searchAutocompleteTextArea"]').clear().wait(delay * 2).type(spanQueryOnePartOne);
cy.get('[data-test-subj="searchAutocompleteTextArea"]').wait(delay * 2).type(spanQueryOnePartTwo);
cy.get('[data-test-subj="searchAutocompleteTextArea"]').wait(delay * 2).type(spanQueryOnePartThree);
changeTimeTo24('months');
cy.get('.euiTab').contains('Visualizations').click();
supressResizeObserverIssue();
cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
cy.get('[data-test-subj="eventExplorer__querySaveName"]').click().type(visName);
cy.get('[data-test-subj="eventExplorer__querySaveName"]').click().type(visOneName);
cy.wait(delay);
cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click();
cy.wait(delay);
cy.get('.euiTab').contains('Panel').click();
cy.wait(delay);
cy.get('.js-plotly-plot').should('exist');
});

it('Adds availability level to visualization', () => {
it('Adds availability level to visualization #1', () => {
cy.get('.euiTab').contains('Panel').click();
cy.wait(delay);
cy.get('[aria-label="actionMenuButton"]').click();
cy.get('.euiContextMenuItem').contains('Edit').click();
supressResizeObserverIssue();
cy.wait(delay);
cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 hours');
cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will this test work when it's 2024?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The year 2024??

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do the sample logs not get updated every time the cypress tests run??

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if it's using dashboards sample data then should be ok, if using the trace data then no

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most of the tests with time range changes are using dashboards sample data with logs so I think it should be okay.

cy.get('.euiBadge').contains('Bar').click();
cy.focused().type('{downArrow}');
cy.focused().type('{enter}');
Expand All @@ -346,14 +367,152 @@ describe('Viewing application', () => {
cy.wait(delay);
cy.get('.js-plotly-plot').should('exist');
cy.get('.textpoint').contains('Available').should('exist');
cy.get('.euiBreadcrumb').contains('Application analytics').click();
cy.wait(delay);
cy.get('.euiBadge').contains('Available').should('exist');
cy.get('[style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('exist');
});

it('Saves visualization #2 to panel with availability level', () => {
moveToApplication(nameOne);
changeTimeTo24('months');
cy.get('.euiTab').contains('Log Events').click();
cy.wait(delay);
cy.get('.plot-container').should('exist');
cy.get('[data-test-subj="searchAutocompleteTextArea"]').clear();
cy.get('[data-test-subj="searchAutocompleteTextArea"]').type('x');
cy.get('[data-test-subj="searchAutocompleteTextArea"]').clear().wait(delay * 2).type(spanQueryTwoPartOne);
cy.get('[data-test-subj="searchAutocompleteTextArea"]').wait(delay * 2).type(spanQueryTwoPartTwo);
cy.get('[data-test-subj="searchAutocompleteTextArea"]').wait(delay * 2).type(spanQueryTwoPartThree);
cy.get('.euiButton').contains('Refresh').click();
cy.wait(delay);
cy.get('.euiTab').contains('Visualizations').click();
supressResizeObserverIssue();
cy.get('.euiBadge').contains('Bar').click();
cy.focused().type('{downArrow}');
cy.focused().type('{enter}');
cy.wait(delay);
cy.get('.euiButton').contains('+ Add availability level').click();
cy.get('[data-test-subj="colorPickerAnchor"]').click();
cy.get('[aria-label="Select #9170B8 as the color"]').click();
cy.wait(delay);
cy.get('[data-test-subj="nameFieldText"]').click().type('Super');
cy.get('[data-test-subj="expressionSelect"]').select('<');
cy.get('[data-test-subj="valueFieldNumber"]').clear().type('5.5');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
cy.wait(delay);
cy.get('.euiButton').contains('+ Add availability level').click();
cy.get('[data-test-subj="colorPickerAnchor"]').first().click();
cy.get('[aria-label="Select #CA8EAE as the color"]').click();
cy.wait(delay);
cy.get('[data-test-subj="nameFieldText"]').first().click().type('Cool');
cy.get('[data-test-subj="expressionSelect"]').first().select('>');
cy.get('[data-test-subj="valueFieldNumber"]').first().clear().type('0');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
cy.wait(delay);
cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
cy.get('[data-test-subj="eventExplorer__querySaveName"]').click().type(visTwoName);
cy.wait(delay);
cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click();
cy.wait(delay);
cy.get('.euiTab').contains('Panel').click();
cy.wait(delay);
cy.get('.js-plotly-plot').should('have.length', 2);
moveToHomePage();
cy.get('.euiBadge').contains('Super').should('exist');
cy.get('[style="background-color: rgb(145, 112, 184); color: rgb(0, 0, 0);"]').should('exist');
});

it('Configuration tab shows details', () => {
cy.get('.euiLink').contains(nameOne).click();
cy.wait(delay);
cy.get('.euiTab').contains('Configuration').click();
cy.wait(delay);
cy.get('.euiCodeBlock__code').contains(baseQuery).should('exist');
cy.get('[aria-label="List of services and entities"]').find('li').should('have.length', 1);
cy.get('[aria-label="List of trace groups"]').find('li').should('have.length', 2);
cy.get('option').should('have.length', 2);
});


it('Changes availability visualization', () => {
cy.get('.euiTab').contains('Configuration').click();
cy.wait(delay);
cy.get('select').select(visOneName);
cy.wait(delay);
moveToHomePage();
cy.get('.euiBadge').contains('Available').should('exist');
cy.get('[style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('exist');
moveToApplication(nameOne);
cy.get('.euiTab').contains('Configuration').click();
cy.wait(delay);
cy.get('select').find('option:selected').should('have.text', visOneName);
})

it('Hides application visualizations in Event Analytics', () => {
cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics`);
cy.wait(delay*3);
if (cy.get('.euiFieldSearch').length > 1) {
cy.get('input.euiFieldSearch').type(visOneName);
cy.wait(delay);
cy.get('.euiTableCellContent__text').contains('No items found').should('exist');
cy.get('input.euiFieldSearch').clear().type(visTwoName);
cy.wait(delay);
cy.get('.euiTableCellContent__text').contains('No items found').should('exist');
cy.get('.euiFormControlLayoutClearButton').click();
cy.wait(delay);
cy.get('[data-test-subj="tablePaginationPopoverButton"]').click();
cy.get('.euiContextMenuItem__text').contains('50 rows').click();
cy.get('.euiCheckbox__input[data-test-subj="checkboxSelectAll"]').click();
cy.wait(delay);
cy.get('.euiButton__text').contains('Actions').click();
cy.wait(delay);
cy.get('.euiContextMenuItem__text').contains('Delete').click();
cy.wait(delay);

cy.get('button.euiButton--danger').should('be.disabled');

cy.get('input.euiFieldText[placeholder="delete"]').type('delete');
cy.get('button.euiButton--danger').should('not.be.disabled');
cy.get('.euiButton__text').contains('Delete').click();
cy.wait(delay);
}
});

it('Hides application visualizations in Operational Panels', () => {
cy.visit(
`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/`
);
cy.wait(delay*3);
cy.get('.euiButton__text').contains('Actions').click();
cy.wait(delay);
cy.get('.euiContextMenuItem__text').contains('Add samples').click();
cy.wait(delay);
cy.get('.euiButton__text').contains('Yes').click();
cy.wait(delay*2);
cy.get('.euiLink').contains('[Logs] Web traffic Panel').first().click();
cy.wait(delay);
cy.get('.euiButton__text').contains('Add visualization').click();
cy.get('.euiContextMenuItem__text').contains('Select existing visualization').click();
cy.get('option').contains(visOneName).should('not.exist');
cy.get('option').contains(visTwoName).should('not.exist');
cy.visit(
`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/`
);
cy.wait(delay*3);
cy.get('input.euiFieldSearch').type('[Logs] Web traffic Panel');
cy.wait(delay);
cy.get('.euiTableRow').first().within(($row) => {
cy.get('.euiCheckbox').click();
});
cy.get('.euiButton__text').contains('Actions').click();
cy.wait(delay);
cy.get('.euiContextMenuItem__text').contains('Delete').click();
cy.wait(delay);
cy.get('input.euiFieldText[placeholder="delete"]').type('delete');
cy.get('button.euiButton--danger').should('not.be.disabled');
cy.get('.euiButton__text').contains('Delete').click();
cy.wait(delay);
});
});

Expand Down
30 changes: 24 additions & 6 deletions dashboards-observability/.cypress/integration/panels.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,24 @@ describe('Testing a panel', () => {
moveToTestPanel();
});

it('Opens visualization flyout from empty panel', () => {
cy.get('.euiButton').eq(4).contains('Add visualization').click();
cy.wait(delay);
cy.get('.euiContextMenuItem__text').contains('Select existing visualization').click();
cy.wait(delay);
cy.get('.euiButton').contains('Cancel').click();
cy.get('.euiButton').eq(2).contains('Add visualization').click();
cy.wait(delay);
cy.get('.euiContextMenuItem__text').contains('Select existing visualization').click();
cy.wait(delay);
cy.get('.euiButton').contains('Cancel').click();
cy.get('.euiButton').contains('Add visualization').first().click();
cy.get('.euiContextMenuItem__text').contains('Create new visualization').click();
cy.wait(delay);
cy.get('.euiBreadcrumb').contains('Explorer').should('exist');
cy.get('.euiCallOut').contains('No results match your search criteria').should('exist');
});

it('Redirects to correct page on breadcrumb click', () => {
moveToTestPanel();
cy.get('.euiBreadcrumb').contains(TEST_PANEL).click();
Expand Down Expand Up @@ -240,9 +258,9 @@ describe('Testing a panel', () => {
});

it('Add existing visualization #1', () => {
cy.get('.euiButton__text').contains('Add Visualization').click();
cy.get('.euiButton__text').contains('Add visualization').click();
cy.wait(delay);
cy.get('.euiContextMenuItem__text').contains('Select Existing Visualization').click();
cy.get('.euiContextMenuItem__text').contains('Select existing visualization').click();
cy.wait(delay);
cy.get('select').select(PPL_VISUALIZATIONS_NAMES[0]);
cy.get('button[aria-label="refreshPreview"]').click();
Expand All @@ -254,9 +272,9 @@ describe('Testing a panel', () => {
});

it('Add existing visualization #2', () => {
cy.get('.euiButton__text').contains('Add Visualization').click();
cy.get('.euiButton__text').contains('Add visualization').click();
cy.wait(delay);
cy.get('.euiContextMenuItem__text').contains('Select Existing Visualization').click();
cy.get('.euiContextMenuItem__text').contains('Select existing visualization').click();
cy.wait(delay);
cy.get('select').select(PPL_VISUALIZATIONS_NAMES[1]);
cy.get('button[aria-label="refreshPreview"]').click();
Expand Down Expand Up @@ -367,9 +385,9 @@ describe('Testing a panel', () => {
});

it('Create new visualization and add to panel', () => {
cy.get('.euiButton__text').contains('Add Visualization').click();
cy.get('.euiButton__text').contains('Add visualization').click();
cy.wait(delay);
cy.get('.euiContextMenuItem__text').contains('Create New Visualization').click();
cy.get('.euiContextMenuItem__text').contains('Create new visualization').click();
cy.wait(delay * 3);
cy.url().should('match', new RegExp('(.*)#/event_analytics/explorer'));
cy.get('[id^=autocomplete-textarea]').type(PPL_VISUALIZATIONS[2]);
Expand Down
22 changes: 17 additions & 5 deletions dashboards-observability/.cypress/utils/app_constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

import { supressResizeObserverIssue } from './constants';

export const delay = 700;
export const delay = 1000;

export const moveToHomePage = () => {
cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/application_analytics/`);
Expand Down Expand Up @@ -45,13 +45,21 @@ export const changeTimeTo24 = (timeUnit) => {
cy.get('[aria-label="Time unit"]').select(timeUnit);
cy.get('.euiButton').contains('Apply').click();
cy.wait(delay);
cy.get('.euiButton').contains('Refresh').click();
};

export const expectMessageOnHover = (message) => {
cy.get('.euiToolTipAnchor').contains('Create').click({ force: true });
cy.get('.euiToolTipPopover').contains(message).should('exist');
};

export const moveToPanelHome = () => {
cy.visit(
`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/`
);
cy.wait(delay * 3);
};

export const baseQuery = 'source = opensearch_dashboards_sample_data_flights';
export const nameOne = 'Cypress';
export const nameTwo = 'Pine';
Expand All @@ -61,9 +69,13 @@ export const service_two = 'payment';
export const trace_one = 'HTTP POST';
export const trace_two = 'HTTP GET';
export const trace_three = 'client_pay_order';
export const spanQueryPartOne = 'where DestCityName ';
export const spanQueryPartTwo = '= "Venice" | stats count() by span( timestamp ';
export const spanQueryPartThree = ', 6h )';
export const visName = 'Flights to Venice';
export const spanQueryOnePartOne = 'where DestCityName ';
export const spanQueryOnePartTwo = '= "Venice" | stats count() by span( timestamp ';
export const spanQueryOnePartThree = ', 6h )';
export const spanQueryTwoPartOne = 'where OriginCityName ';
export const spanQueryTwoPartTwo = '= "Seoul" | stats count() by span( timestamp ';
export const spanQueryTwoPartThree = ', 6h )';
export const visOneName = 'Flights to Venice';
export const visTwoName = 'Flights from Seoul';
export const composition = 'order, payment, HTTP POST, HTTP GET, client_pay_order'
export const newName = 'Monterey Cypress';
Loading