diff --git a/dashboards-observability/.cypress/integration/app_analytics.spec.js b/dashboards-observability/.cypress/integration/app_analytics.spec.js index 32eed9986..61dcbbef7 100644 --- a/dashboards-observability/.cypress/integration/app_analytics.spec.js +++ b/dashboards-observability/.cypress/integration/app_analytics.spec.js @@ -22,16 +22,11 @@ import { trace_one, trace_two, trace_three, - spanQueryOnePartOne, - spanQueryOnePartTwo, - spanQueryOnePartThree, - spanQueryTwoPartOne, - spanQueryTwoPartTwo, - spanQueryTwoPartThree, visOneName, visTwoName, composition, newName, + TYPING_DELAY } from '../utils/app_constants'; import { supressResizeObserverIssue } from '../utils/constants'; @@ -44,28 +39,28 @@ describe('Creating application', () => { expectMessageOnHover('Name is required.'); cy.get('[data-test-subj="nameFormRow"]').type(nameOne); expectMessageOnHover('Provide at least one log source, service, entity or trace group.'); - cy.get('.euiAccordion').contains('Log source').click(); - cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(baseQuery); + cy.get('.euiAccordion').contains('Log source').trigger('mouseover').click(); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(baseQuery, {delay: TYPING_DELAY}); cy.get('.euiButton').contains('Create').should('not.be.disabled'); cy.get('[data-test-subj="searchAutocompleteTextArea"]').clear(); expectMessageOnHover('Provide at least one log source, service, entity or trace group.'); - cy.get('.euiAccordion').contains('Services & entities').click(); - cy.get('[data-test-subj="servicesEntitiesComboBox"]').click(); + cy.get('.euiAccordion').contains('Services & entities').trigger('mouseover').click();; + cy.get('[data-test-subj="servicesEntitiesComboBox"]').trigger('mouseover').click(); cy.focused().type('{downArrow}'); cy.focused().type('{enter}'); cy.get('.euiBadge').contains('1').should('exist'); cy.get('.euiButton').contains('Create').should('not.be.disabled'); - cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(baseQuery); - cy.get('.euiAccordion').contains('Trace groups').click(); - cy.get('[data-test-subj="traceGroupsComboBox"]').type('http'); - cy.get('.euiFilterSelectItem').contains(trace_one).click(); - cy.get('.euiFilterSelectItem').contains(trace_two).click(); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(baseQuery, {delay: TYPING_DELAY}); + cy.get('.euiAccordion').contains('Trace groups').trigger('mouseover').click(); + cy.get('[data-test-subj="traceGroupsComboBox"]').scrollIntoView().type('http'); + cy.get('.euiFilterSelectItem').contains(trace_one).trigger('click') + cy.get('.euiFilterSelectItem').contains(trace_two).trigger('click'); cy.get('.euiBadge').contains('2').should('exist'); cy.get('.euiButton').contains('Create').should('not.be.disabled'); }); it('Suggests correct autocompletion', () => { - cy.get('.euiAccordion').contains('Log source').click(); + cy.get('.euiAccordion').contains('Log source').trigger('mouseover').click(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').click(); cy.get('.aa-List').find('.aa-Item').should('have.length', 1); cy.get('.aa-Item').contains('source').should('exist'); @@ -98,15 +93,15 @@ describe('Creating application', () => { it('Creates an application and redirects to application', () => { cy.get('[data-test-subj="nameFormRow"]').type(nameOne); cy.get('[data-test-subj="descriptionFormRow"]').type('This application is for testing.'); - cy.get('.euiAccordion').contains('Log source').click(); - cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(baseQuery); - cy.get('.euiAccordion').contains('Services & entities').click(); + cy.get('.euiAccordion').contains('Log source').trigger('mouseover').click(); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(baseQuery, {delay: TYPING_DELAY}); + cy.get('.euiAccordion').contains('Services & entities').trigger('mouseover').click(); cy.get('[data-test-subj="servicesEntitiesComboBox"]').click(); cy.focused().type('{downArrow}'); cy.focused().type('{enter}'); cy.get('.euiBadge').contains('1').should('exist'); - cy.get('.euiAccordion').contains('Trace groups').click(); - cy.get('[data-test-subj="traceGroupsComboBox"]').type('http'); + cy.get('.euiAccordion').contains('Trace groups').trigger('mouseover').click(); + cy.get('[data-test-subj="traceGroupsComboBox"]').scrollIntoView().type('http'); cy.get('.euiFilterSelectItem').contains(trace_one).trigger('click'); cy.get('.euiFilterSelectItem').contains(trace_two).trigger('click'); cy.get('.euiBadge').contains('2').should('exist'); @@ -124,7 +119,7 @@ describe('Creating application', () => { ); cy.wait(delay*4); if (cy.get('.euiButton').contains('Create panel').length < 2) { - cy.get('input.euiFieldSearch').type(`${nameOne}'s Panel`); + cy.get('input.euiFieldSearch').type(`${nameOne}'s Panel`, {delay: TYPING_DELAY}); cy.wait(delay); cy.get('.euiTableCellContent__text').contains('No items found').should('exist'); cy.get('.euiFormControlLayoutClearButton').click(); @@ -141,14 +136,20 @@ describe('Creating application', () => { it('Saves current input on reload', () => { cy.get('[data-test-subj="nameFormRow"]').type(nameOne); cy.get('[data-test-subj="descriptionFormRow"]').type(description); - cy.get('.euiAccordion').contains('Log source').click(); - cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(baseQuery); - cy.get('.euiAccordion').contains('Services & entities').click(); - cy.get('[data-test-subj="servicesEntitiesComboBox"]').click(); + cy.get('.euiAccordion').contains('Log source').trigger('mouseover').click(); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').click(); + cy + .get('[data-test-subj="searchAutocompleteTextArea"]') + .focus() + .type(baseQuery, {delay: TYPING_DELAY}); + cy.get('.euiAccordion').contains('Services & entities').trigger('mouseover').click(); + cy.wait(delay); + cy.get('[data-test-subj="servicesEntitiesComboBox"]').trigger('mouseover').click(); + cy.wait(delay); cy.get('.euiFilterSelectItem').contains(service_one).trigger('click'); cy.get('.euiBadge').contains('1').should('exist'); - cy.get('.euiAccordion').contains('Trace groups').click(); - cy.get('[data-test-subj="traceGroupsComboBox"]').type('http'); + cy.get('.euiAccordion').contains('Trace groups').trigger('mouseover').click(); + cy.get('[data-test-subj="traceGroupsComboBox"]').scrollIntoView().type('http'); cy.get('.euiFilterSelectItem').contains(trace_one).trigger('click'); cy.get('.euiFilterSelectItem').contains(trace_two).trigger('click'); cy.get('.euiBadge').contains('2').should('exist'); @@ -156,7 +157,7 @@ describe('Creating application', () => { cy.wait(delay); cy.get('[data-test-subj="nameFormRow"]').find('.euiFieldText').should('contain.value', nameOne); cy.get('[data-test-subj="descriptionFormRow"]').find('.euiFieldText').should('contain.value', description); - cy.get('.euiAccordion').contains('Log source').click(); + cy.get('.euiAccordion').contains('Log source').trigger('mouseover').click(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain.value', baseQuery); cy.get('.euiBadge').contains('1').should('exist'); cy.get('.euiBadge').contains('2').should('exist'); @@ -165,12 +166,12 @@ describe('Creating application', () => { it('Shows clear modals before clearing', () => { cy.get('.euiAccordion').contains('Log source').click(); cy.get('.euiButton-isDisabled').contains('Clear').should('exist'); - cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(baseQuery); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(baseQuery, {delay: TYPING_DELAY}); cy.get('.euiButton').contains('Clear').click(); cy.get('.euiButton--danger').contains('Clear').click(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain.value', ''); - cy.get('.euiAccordion').contains('Services & entities').click(); - cy.get('[data-test-subj="servicesEntitiesComboBox"]').click(); + cy.get('.euiAccordion').contains('Services & entities').trigger('mouseover').click(); + cy.get('[data-test-subj="servicesEntitiesComboBox"]').trigger('mouseover').click(); cy.get('.euiFilterSelectItem').contains(service_one).trigger('click'); cy.get('.euiBadge').contains('1').should('exist'); cy.get('.euiAccordion-isOpen').within(($service) => { @@ -179,9 +180,9 @@ describe('Creating application', () => { cy.get('.euiButton--danger').contains('Clear all').click(); cy.get('.euiBadge').contains('1').should('not.exist'); cy.get('.euiBadge').contains('0').should('exist'); - cy.get('.euiAccordion').contains('Services & entities').click(); - cy.get('.euiAccordion').contains('Trace groups').click(); - cy.get('[data-test-subj="traceGroupsComboBox"]').type('http'); + cy.get('.euiAccordion').contains('Services & entities').trigger('mouseover').click(); + cy.get('.euiAccordion').contains('Trace groups').trigger('mouseover').click(); + cy.get('[data-test-subj="traceGroupsComboBox"]').scrollIntoView().type('http'); cy.get('.euiFilterSelectItem').contains(trace_one).trigger('click'); cy.get('.euiFilterSelectItem').contains(trace_two).trigger('click'); cy.get('.euiBadge').contains('2').should('exist'); @@ -218,6 +219,7 @@ describe('Viewing application', () => { cy.get('.euiTab').contains('Services').click(); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); cy.get('.euiTab').contains('Traces & Spans').click(); + supressResizeObserverIssue(); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); cy.get('.euiTab').contains('Log Events').click(); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); @@ -236,8 +238,8 @@ describe('Viewing application', () => { it('Saves time range for each application', () => { moveToCreatePage(); cy.get('[data-test-subj="nameFormRow"]').type(nameTwo); - cy.get('.euiAccordion').contains('Log source').click(); - cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(baseQuery); + cy.get('.euiAccordion').contains('Log source').trigger('mouseover').click(); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(baseQuery, {delay: TYPING_DELAY}); cy.get('.euiButton').contains('Create').should('not.be.disabled'); cy.get('.euiButton').contains('Create').click(); cy.wait(delay); @@ -278,7 +280,7 @@ describe('Viewing application', () => { cy.get('.euiFlyout').contains('Service detail').should('be.visible'); cy.get('.euiFlyout').within(($flyout) => { cy.get('.euiDescriptionList').contains('3.52').should('exist'); - cy.get('[aria-label="Error rate"]').click(); + cy.get('[data-text="Error rate"]').click(); cy.get('.ytitle').contains('Error rate').should('exist'); }); cy.get('[data-test-subj="euiFlyoutCloseButton"]').click(); @@ -286,8 +288,8 @@ describe('Viewing application', () => { cy.get('.euiLink').contains('authentication').click(); supressResizeObserverIssue(); cy.wait(delay * 3); - cy.get('.euiFlyout').contains('Service detail').should('be.visible'); - cy.get('.euiLink').contains('718dc32a693c8a17').click(); + cy.get('.euiFlyout').contains('Service detail').scrollIntoView().should('be.visible'); + cy.get('[data-test-subj="dataGridRowCell"] button').contains('718dc32a693c8a17').click(); cy.get('.euiFlyout').contains('Span detail').should('be.visible'); cy.get('[data-test-subj="euiFlyoutCloseButton"]').click(); cy.get('.euiFlyout').should('not.be.visible'); @@ -303,11 +305,12 @@ describe('Viewing application', () => { cy.get('.euiDescriptionList').contains('224.99').should('exist'); }); cy.get('[data-test-subj="euiFlyoutCloseButton"]').click(); + cy.wait(delay); cy.get('.euiFlyout').should('not.be.visible'); cy.get('[title="03f9c770db5ee2f1caac0afc36db49ba"]').click(); - cy.get('[aria-label="Span list"]').click(); + cy.get('[data-text="Span list"]').click(); cy.wait(delay); - cy.get('.euiLink').contains('d67c5bb617ba9203').click(); + cy.get('[data-test-subj="dataGridRowCell"] button').contains('d67c5bb617ba9203').click(); cy.get('.euiFlyout').contains('Span detail').should('be.visible'); cy.get('[data-test-subj="euiFlyoutCloseButton"]').click(); cy.get('.euiFlyout').should('not.be.visible'); @@ -338,17 +341,16 @@ describe('Viewing application', () => { it('Saves visualization #1 to panel', () => { cy.get('.euiTab').contains('Panel').click(); - cy.get('.euiButton').eq(3).contains('Add').click(); + cy.get('.euiButton').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"]').focus().type('x', {delay: TYPING_DELAY}); cy.focused().clear(); - 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); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type('where DestCityName = "Venice" | stats count() by span( timestamp , 6h )', {delay: TYPING_DELAY}); changeTimeTo24('months'); + cy.wait(delay * 2); cy.get('.euiTab').contains('Visualizations').click(); supressResizeObserverIssue(); cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); @@ -374,7 +376,7 @@ describe('Viewing application', () => { cy.focused().type('{enter}'); cy.wait(delay); cy.get('.euiButton').contains('+ Add availability level').click(); - cy.get('[data-test-subj="colorPickerAnchor"]').click(); + cy.get('[data-test-subj="euiColorPickerAnchor"]').click(); cy.get('[aria-label="Select #54B399 as the color"]').click(); cy.wait(delay); cy.get('[data-test-subj="nameFieldText"]').click().type('Available'); @@ -408,10 +410,9 @@ describe('Viewing application', () => { 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('[data-test-subj="searchAutocompleteTextArea"]').focus().type('x', {delay: TYPING_DELAY}); + cy.focused().clear(); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type('where DestCityName = "Venice" | stats count() by span( timestamp , 6h )', {delay: TYPING_DELAY}); cy.get('.euiButton').contains('Refresh').click(); cy.wait(delay); cy.get('.euiTab').contains('Visualizations').click(); @@ -421,7 +422,7 @@ describe('Viewing application', () => { cy.focused().type('{enter}'); cy.wait(delay); cy.get('.euiButton').contains('+ Add availability level').click(); - cy.get('[data-test-subj="colorPickerAnchor"]').click(); + cy.get('[data-test-subj="euiColorPickerAnchor"]').click(); cy.get('[aria-label="Select #9170B8 as the color"]').click(); cy.wait(delay); cy.get('[data-test-subj="nameFieldText"]').click().type('Super'); @@ -430,7 +431,7 @@ describe('Viewing application', () => { 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('[data-test-subj="euiColorPickerAnchor"]').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'); @@ -481,10 +482,10 @@ describe('Viewing application', () => { 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.get('input.euiFieldSearch').type(visOneName, {delay: TYPING_DELAY}); cy.wait(delay); cy.get('.euiTableCellContent__text').contains('No items found').should('exist'); - cy.get('input.euiFieldSearch').clear().type(visTwoName); + cy.get('input.euiFieldSearch').clear().type(visTwoName, {delay: TYPING_DELAY}); cy.wait(delay); cy.get('.euiTableCellContent__text').contains('No items found').should('exist'); cy.get('.euiFormControlLayoutClearButton').click(); @@ -528,7 +529,7 @@ describe('Viewing application', () => { `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/` ); cy.wait(delay*3); - cy.get('input.euiFieldSearch').type('[Logs] Web traffic Panel'); + cy.get('input.euiFieldSearch').type('[Logs] Web traffic Panel', {delay: TYPING_DELAY}); cy.wait(delay); cy.get('.euiTableRow').first().within(($row) => { cy.get('.euiCheckbox').click(); @@ -556,6 +557,7 @@ describe('Editing application', () => { cy.get('[data-test-subj="comboBoxToggleListButton"]').filter(':visible').click(); cy.get('.euiFilterSelectItem').contains(trace_three).trigger('click'); cy.get('.euiBadge').contains('3').should('exist'); + cy.get('.euiAccordion').contains('Trace groups').click(); cy.get('.euiAccordion').contains('Services & entities').click(); cy.get('[data-test-subj="servicesEntitiesComboBox"]').click(); cy.get('.euiFilterSelectItem').contains(service_two).trigger('click'); @@ -577,16 +579,15 @@ describe('Application Analytics home page', () => { }) it('Show correct information in table', () => { - cy.get('.euiTableRow').first().within(($row) => { - cy.get('.euiLink').contains(nameOne).should('exist'); - cy.get('.euiTableCellContent').contains(composition).should('exist'); - cy.get('.euiBadge').contains('Available').should('exist'); - cy.get('[style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('exist'); - }); + cy.get('.euiLink').contains(nameOne).should('exist'); + cy.get('[data-test-subj="appAnalytics__compositionColumn"]').contains(composition).should('exist'); + cy.get('.euiBadge').contains('Available').should('exist'); + cy.get('[style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('exist'); }); it('Renames application', () => { cy.get('.euiPopover').contains('Actions').click(); + cy.wait(delay); cy.get('.euiContextMenuItem-isDisabled').contains('Rename').should('exist'); cy.get('.euiTableRow').first().within(($row) => { cy.get('.euiCheckbox').click(); @@ -594,7 +595,7 @@ describe('Application Analytics home page', () => { cy.wait(delay); cy.get('.euiPopover').contains('Actions').click(); cy.get('.euiContextMenuItem').contains('Rename').click(); - cy.get('.euiFieldText').clear().type(newName); + cy.get('.euiFieldText').clear().focus().type(newName); cy.get('.euiButton--fill').contains('Rename').click(); cy.wait(delay); cy.get('.euiToast').contains(`Application successfully renamed to "${newName}"`); @@ -603,7 +604,6 @@ describe('Application Analytics home page', () => { }); }); - it('Deletes application', () => { cy.get('.euiPopover').contains('Actions').click(); cy.get('.euiContextMenuItem-isDisabled').contains('Delete').should('exist'); @@ -613,7 +613,9 @@ describe('Application Analytics home page', () => { cy.get('.euiTableRow').eq(1).within(($row) => { cy.get('.euiCheckbox').click(); }); + cy.wait(delay); cy.get('.euiPopover').contains('Actions').click(); + cy.wait(delay); cy.get('.euiContextMenuItem').contains('Delete').click(); cy.get('.euiButton--fill').contains('Delete').click(); cy.wait(delay); diff --git a/dashboards-observability/.cypress/utils/app_constants.js b/dashboards-observability/.cypress/utils/app_constants.js index 70a8d220a..bc3b7e856 100644 --- a/dashboards-observability/.cypress/utils/app_constants.js +++ b/dashboards-observability/.cypress/utils/app_constants.js @@ -7,6 +7,8 @@ import { supressResizeObserverIssue } from './constants'; export const delay = 1000; +export const TYPING_DELAY = 500; + export const moveToHomePage = () => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/application_analytics/`); cy.wait(delay * 3); @@ -24,6 +26,7 @@ export const moveToCreatePage = () => { export const moveToApplication = (name) => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/application_analytics/`); + supressResizeObserverIssue(); cy.wait(delay * 6); cy.get('.euiLink').contains(name).click(); cy.wait(delay); @@ -41,7 +44,8 @@ export const moveToEditPage = () => { }; export const changeTimeTo24 = (timeUnit) => { - cy.get('#QuickSelectPopover').click(); + cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').trigger('mouseover').click(); + cy.wait(delay); cy.get('[aria-label="Time unit"]').select(timeUnit); cy.get('.euiButton').contains('Apply').click(); cy.wait(delay); @@ -60,6 +64,14 @@ export const moveToPanelHome = () => { cy.wait(delay * 3); }; +export const deleteAllSavedApplications = () => { + moveToHomePage(); + cy.get('[data-test-subj="checkboxSelectAll"]').click(); + cy.get('.euiPopover').contains('Actions').click(); + cy.get('.euiContextMenuItem').contains('Delete').click(); + cy.get('.euiButton__text').contains('Delete').click(); +}; + export const baseQuery = 'source = opensearch_dashboards_sample_data_flights'; export const nameOne = 'Cypress'; export const nameTwo = 'Pine'; diff --git a/dashboards-observability/public/components/application_analytics/components/app_table.tsx b/dashboards-observability/public/components/application_analytics/components/app_table.tsx index 850afa1ce..96ce4dd06 100644 --- a/dashboards-observability/public/components/application_analytics/components/app_table.tsx +++ b/dashboards-observability/public/components/application_analytics/components/app_table.tsx @@ -195,7 +195,10 @@ export function AppTable(props: AppTableProps) { truncateText: true, render: (value) => ( - {value.join(', ')} + {value.join(', ')} ), },