Skip to content

Commit

Permalink
Modularize and cleanup panel (opensearch-project#603)
Browse files Browse the repository at this point in the history 
Signed-off-by: Eugene Lee <[email protected]>
  • Loading branch information
@eugenesk24
eugenesk24 committed Jun 6, 2022
1 parent 81d178b commit 3356449
Show file tree
Hide file tree
Showing 20 changed files with 684 additions and 582 deletions.
191 changes: 175 additions & 16 deletions dashboards-observability/.cypress/integration/app_analytics.spec.js
View file
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,
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');
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
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
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

0 comments on commit 3356449

Please sign in to comment.