diff --git a/dashboards-observability/.cypress/integration/app_analytics.spec.js b/dashboards-observability/.cypress/integration/app_analytics.spec.js index 58a49c34d..c98096fcf 100644 --- a/dashboards-observability/.cypress/integration/app_analytics.spec.js +++ b/dashboards-observability/.cypress/integration/app_analytics.spec.js @@ -41,28 +41,25 @@ 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').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').trigger('mouseover').click();; + cy.get('[data-test-subj="servicesEntitiesAccordion"]').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="servicesEntitiesCountBadge"]').should('contain', '1'); + cy.get('[data-test-subj="createButton"]').should('not.be.disabled'); + cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').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="traceGroupsAccordion"]').scrollIntoView(); + cy.get('[data-test-subj="traceGroupsAccordion"]').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'); + cy.get('.euiFilterSelectItem').contains(trace_one).click({ force: true }); + cy.get('.euiFilterSelectItem').contains(trace_two).click({ force: true }); + cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '2'); + cy.get('[data-test-subj="createButton"]').should('not.be.disabled'); }); it('Suggests correct autocompletion', () => { - cy.get('.euiAccordion').contains('Log source').trigger('mouseover').click(); + cy.get('[data-test-subj="logSourceAccordion"]').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'); @@ -95,105 +92,98 @@ 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').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="servicesEntitiesAccordion"]').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').trigger('mouseover').click(); + cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '1'); + cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click(); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(baseQuery, {delay: TYPING_DELAY}); + cy.get('[data-test-subj="traceGroupsAccordion"]').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'); - cy.get('.euiButton').contains('Create').click(); - cy.wait(delay*3); - cy.get('.euiTitle').contains(nameOne).should('exist'); - cy.get('.euiTab').contains('Panel').click(); - cy.get('.euiText').contains('Start by adding your first visualization').should('exist'); + cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '2'); + cy.get('[data-test-subj="createButton"]').should('not.be.disabled'); + cy.get('[data-test-subj="createButton"]').click(); + cy.wait(delay * 3); + cy.get('[data-test-subj="applicationTitle"]').should('contain', nameOne); + cy.get('[data-test-subj="app-analytics-panelTab"]').click(); + cy.get('[data-test-subj="addFirstVisualizationText"]').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`, {delay: TYPING_DELAY}); - cy.wait(delay); - cy.get('.euiTableCellContent__text').contains('No items found').should('exist'); - cy.get('.euiFormControlLayoutClearButton').click(); - cy.wait(delay); - } + cy.get('body').then(($body) => { + if ($body.find('[data-test-subj="customPanels__emptyCreateNewPanels"]').length == 1) { + cy.get('[data-test-subj="operationalPanelSearchBar"]').type(`${nameOne}'s Panel`, {delay: TYPING_DELAY}); + 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', () => { - cy.get('.euiButton').contains('Cancel').click(); - cy.wait(delay); - cy.get('.euiTitle').contains('Applications').should('exist'); + cy.get('[data-test-subj="cancelCreateButton"]').contains('Cancel').click(); + cy.get('[data-test-subj="applicationHomePageTitle"]').should('exist'); }); 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').trigger('mouseover').click(); + cy.get('[data-test-subj="logSourceAccordion"]').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="servicesEntitiesAccordion"]').trigger('mouseover').click(); + cy.get('[data-test-subj="servicesEntitiesComboBox"]').scrollIntoView(); 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').trigger('mouseover').click(); + cy.get('.euiFilterSelectItem').contains(service_one).click({ force: true }); + cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '1'); + cy.get('[data-test-subj="traceGroupsAccordion"]').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('[data-test-subj="traceGroupsCountBadge"]').should('contain', '2'); cy.reload(); 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').trigger('mouseover').click(); + cy.get('[data-test-subj="logSourceAccordion"]').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'); + cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '1'); + cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '2'); }); 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="logSourceAccordion"]').trigger('mouseover').click(); + cy.get('[data-test-subj="clearLogSourceButton"]').should('be.disabled'); cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(baseQuery, {delay: TYPING_DELAY}); - cy.get('.euiButton').contains('Clear').click(); + cy.get('[data-test-subj="clearLogSourceButton"]').click(); cy.get('.euiButton--danger').contains('Clear').click(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain.value', ''); - cy.get('.euiAccordion').contains('Services & entities').trigger('mouseover').click(); + cy.get('[data-test-subj="servicesEntitiesAccordion"]').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) => { - cy.get('.euiButton').contains('Clear all').click(); - }) + cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '1'); + cy.get('[data-test-subj="clearServicesEntitiesButton"]').click(); 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').trigger('mouseover').click(); - cy.get('.euiAccordion').contains('Trace groups').trigger('mouseover').click(); + cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '0'); + cy.get('[data-test-subj="servicesEntitiesAccordion"]').trigger('mouseover').click(); + cy.get('[data-test-subj="traceGroupsAccordion"]').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('.euiAccordion-isOpen').within(($trace) => { - cy.get('.euiButton').contains('Clear all').click(); - }) + cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '2'); + cy.get('[data-test-subj="clearTraceGroupsButton"]').click(); cy.get('.euiButton--danger').contains('Clear all').click(); - cy.get('.euiBadge').contains('2').should('not.exist'); - cy.get('.euiBadge').contains('0').should('exist'); + cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '0'); }); }); @@ -203,36 +193,33 @@ describe('Viewing application', () => { }); it('Has working breadcrumbs', () => { - cy.get('.euiBreadcrumb').contains('Cypress').click(); - cy.wait(delay); - cy.get('[data-test-subj="appAnalyticsAppName"]').contains(nameOne).should('exist'); - cy.get('.euiBreadcrumb').contains('Application analytics').click(); - cy.wait(delay); - cy.get('.euiTitle').contains('Applications').should('exist'); - cy.get('.euiBreadcrumb').contains('Observability').click(); - cy.wait(delay); - cy.get('.euiTitle').contains('Event analytics').should('exist'); + cy.get('.euiBreadcrumb').contains(nameOne).click(); + cy.get('[data-test-subj="applicationTitle"]').should('contain', nameOne); + cy.get('.euiBreadcrumb[href="#/application_analytics"]').click(); + cy.get('[data-test-subj="applicationHomePageTitle"]').should('contain', 'Applications'); + cy.get('.euiBreadcrumb[href="observability-dashboards#/"]').click(); + cy.get('[data-test-subj="eventHomePageTitle"]').should('contain', 'Event analytics'); }); it('Shares time range among tabs', () => { moveToApplication(nameOne); changeTimeTo24('months'); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); - cy.get('.euiTab').contains('Services').click(); + cy.get('[data-test-subj="app-analytics-serviceTab"]').click(); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); - cy.get('.euiTab').contains('Traces & Spans').click(); + cy.get('[data-test-subj="app-analytics-traceTab"]').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="app-analytics-logTab"]').click(); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); - cy.get('.euiTab').contains('Panel').click(); + cy.get('[data-test-subj="app-analytics-panelTab"]').click(); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); }); it('Shows latency variance in dashboards table', () => { moveToApplication(nameOne); changeTimeTo24('months'); - cy.get('.euiBasicTable').first().within(($table) => { + cy.get('[data-test-subj="dashboardTable"]').first().within(($table) => { cy.get('.plot-container').should('have.length.at.least', 1); }) }); @@ -240,147 +227,135 @@ 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').trigger('mouseover').click(); + cy.get('[data-test-subj="logSourceAccordion"]').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); - cy.get('.euiTitle').contains(nameTwo).should('exist'); + cy.get('[data-test-subj="createButton"]').should('not.be.disabled'); + cy.get('[data-test-subj="createButton"]').click(); + cy.get('[data-test-subj="applicationTitle"]').should('contain', nameTwo); changeTimeTo24('weeks'); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 weeks'); - cy.get('.euiBreadcrumb').contains('Application analytics').click(); + cy.get('.euiBreadcrumb[href="#/application_analytics"]').click(); cy.wait(delay); cy.get('.euiLink').contains(nameOne).click(); - cy.wait(delay); - cy.get('.euiTitle').contains(nameOne).should('exist'); + cy.get('[data-test-subj="applicationTitle"]').should('contain', nameOne); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); - cy.get('.euiBreadcrumb').contains('Application analytics').click(); - cy.wait(delay); + cy.get('.euiBreadcrumb[href="#/application_analytics"]').click(); cy.get('.euiLink').contains(nameTwo).click(); - cy.wait(delay); - cy.get('.euiTitle').contains(nameTwo).should('exist'); + cy.get('[data-test-subj="applicationTitle"]').should('contain', nameTwo); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 weeks'); }); it('Adds filter when Trace group name is clicked', () => { moveToApplication(nameOne); - cy.get('.euiTab').contains('Overview').click(); - cy.wait(delay); + cy.get('[data-test-subj="app-analytics-overviewTab"]').click(); cy.get('.euiLink').contains('client_create_order').click(); cy.get('.euiTableRow').should('have.length', 1); - cy.get('.euiPopover').contains('traceGroup: client_create_order').should('exist'); - cy.get('[aria-label="Remove filter"]').click(); - cy.get('.euiPopover').contains('traceGroup: client_create_order').should('not.exist'); + cy.get('[data-test-subj="client_create_orderFilterBadge"]').should('exist'); + cy.get('[data-test-subj="filterBadge"]').click(); + cy.get('[data-test-subj="deleteFilterIcon"]').click(); + cy.get('[data-test-subj="client_create_orderFilterBadge"]').should('not.exist'); }); it('Opens service detail flyout when Service Name is clicked', () => { - cy.get('.euiTab').contains('Services').click(); + cy.get('[data-test-subj="app-analytics-serviceTab"]').click(); cy.wait(delay); cy.get('.euiLink').contains('authentication').click(); supressResizeObserverIssue(); - cy.wait(delay * 3); - cy.get('.euiFlyout').contains('Service detail').should('be.visible'); - cy.get('.euiFlyout').within(($flyout) => { - cy.get('.euiDescriptionList').contains('3.52').should('exist'); + cy.get('[data-test-subj="serviceDetailFlyoutTitle"]').should('be.visible'); + cy.get('[data-test-subj="serviceDetailFlyout"]').within(($flyout) => { + cy.get('[data-test-subj="Number of connected servicesDescriptionList"]').should('contain', '3'); cy.get('[data-text="Error rate"]').click(); cy.get('.ytitle').contains('Error rate').should('exist'); }); - cy.get('[data-test-subj="euiFlyoutCloseButton"]').click(); - cy.get('.euiFlyout').should('not.be.visible'); - cy.get('.euiLink').contains('authentication').click(); - supressResizeObserverIssue(); - cy.wait(delay * 3); - 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="spanDetailFlyout"]').contains('Span detail').should('be.visible'); + cy.get('[data-test-subj="ServiceDescriptionList"]').should('contain', 'authentication'); cy.get('[data-test-subj="euiFlyoutCloseButton"]').click(); - cy.get('.euiFlyout').should('not.be.visible'); + cy.get('[data-test-subj="serviceDetailFlyout"]').should('not.be.visible'); + cy.get('[data-test-subj="spanDetailFlyout"]').should('not.be.visible'); }); it('Opens trace detail flyout when Trace ID is clicked', () => { - cy.get('.euiTab').contains('Traces & Spans').click(); + cy.get('[data-test-subj="app-analytics-traceTab"]').click(); supressResizeObserverIssue(); cy.wait(delay); cy.get('[title="03f9c770db5ee2f1caac0afc36db49ba"]').click(); - cy.get('.euiFlyout').contains('Trace detail').should('be.visible'); - cy.get('.euiFlyout').within(($flyout) => { - cy.get('.euiDescriptionList').contains('224.99').should('exist'); + cy.get('[data-test-subj="traceDetailFlyoutTitle"]').should('be.visible'); + cy.get('[data-test-subj="traceDetailFlyout"]').within(($flyout) => { + cy.get('[data-test-subj="LatencyDescriptionList"]').should('contain', '224.99'); }); cy.get('[data-test-subj="euiFlyoutCloseButton"]').click(); cy.wait(delay); - cy.get('.euiFlyout').should('not.be.visible'); + cy.get('[data-test-subj="traceDetailFlyout"]').should('not.be.visible'); cy.get('[title="03f9c770db5ee2f1caac0afc36db49ba"]').click(); cy.get('[data-text="Span list"]').click(); cy.wait(delay); cy.get('[data-test-subj="dataGridRowCell"] button').contains('d67c5bb617ba9203').click(); - cy.get('.euiFlyout').contains('Span detail').should('be.visible'); + cy.get('[data-test-subj="spanDetailFlyout"]').should('be.visible'); cy.get('[data-test-subj="euiFlyoutCloseButton"]').click(); - cy.get('.euiFlyout').should('not.be.visible'); + cy.get('[data-test-subj="spanDetailFlyout"]').should('not.be.visible'); }); it('Opens span detail flyout when Span ID is clicked', () => { - cy.get('.euiTab').contains('Traces & Spans').click(); + cy.get('[data-test-subj="app-analytics-traceTab"]').click(); supressResizeObserverIssue(); cy.wait(delay); - cy.get('.euiLink').contains('5ff3516909562c60').click(); - cy.get('.euiFlyout').contains('Span detail').should('be.visible'); - cy.get('.euiFlyout').within(($flyout) => { - cy.get('.euiText').contains('HTTP GET').should('exist'); + cy.get('[data-test-subj="dataGridRowCell"]').contains('5ff3516909562c60').click(); + cy.get('[data-test-subj="spanDetailFlyout"]').should('be.visible'); + cy.get('[data-test-subj="spanDetailFlyout"]').within(($flyout) => { + cy.get('[data-test-subj="OperationDescriptionList"]').should('contain', 'HTTP GET'); }); cy.get('.euiText').contains('order').click(); cy.get('[aria-label="span-flyout-filter-icon"]').click(); cy.focused().blur(); cy.get('[data-test-subj="euiFlyoutCloseButton"]').click(); - cy.get('.euiPopover').contains('serviceName: order').should('exist'); + cy.get('[data-test-subj="filterBadge"][title="serviceName: order"]').should('exist'); cy.get('[aria-label="Remove filter"]').click(); - cy.get('.euiPopover').contains('serviceName: order').should('not.exist'); + cy.get('[data-test-subj="filterBadge"][title="serviceName: order"]').should('not.exist'); }); it('Shows base query', () => { - cy.get('.euiTab').contains('Log Events').click(); - cy.get('.euiBadge__text').contains('Base Query').should('exist'); + cy.get('[data-test-subj="app-analytics-logTab"]').click(); + cy.get('.euiBadge[title="Base Query"]').should('exist'); + cy.get('.euiBadge[title="Base Query"]').trigger('mouseover'); + cy.get('.euiToolTipPopover').contains('source = opensearch_dashboards_sample_data_flights').should('exist'); }); it('Saves visualization #1 to panel', () => { - cy.get('.euiTab').contains('Panel').click(); - cy.get('.euiButton').contains('Add').click(); + cy.get('[data-test-subj="app-analytics-panelTab"]').click(); + cy.get('[data-test-subj="addVisualizationButton"]').first().click(); cy.wait(delay); - cy.get('.plot-container').should('exist'); + cy.get('[id="explorerPlotComponent"]').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"]').focus().type('x', {delay: TYPING_DELAY}); - cy.focused().clear(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(query_one, {delay: TYPING_DELAY}); changeTimeTo24('months'); cy.wait(delay * 2); - cy.get('.euiTab').contains('Visualizations').click(); + cy.get('[data-test-subj="main-content-visTab"]').click(); supressResizeObserverIssue(); cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); cy.get('[data-test-subj="eventExplorer__querySaveName"]').click().type(visOneName); cy.wait(delay); cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); + cy.get('[data-test-subj="app-analytics-panelTab"]').click(); cy.wait(delay); - cy.get('.euiTab').contains('Panel').click(); - cy.wait(delay); - cy.get('.js-plotly-plot').should('exist'); + cy.get('[data-test-subj="Flights to VeniceVisualizationPanel"]').should('exist'); + cy.get('[id="explorerPlotComponent"]').should('exist'); + cy.get('[class="trace bars"]').should('exist'); }); it('Adds availability level to visualization #1', () => { - cy.get('.euiTab').contains('Panel').click(); - cy.wait(delay); + cy.get('[data-test-subj="app-analytics-panelTab"]').click(); cy.get('[aria-label="actionMenuButton"]').click(); - cy.get('.euiContextMenuItem').contains('Edit').click(); + cy.get('[data-test-subj="editVizContextMenuItem"]').click(); supressResizeObserverIssue(); - cy.wait(delay); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); - cy.get('.euiBadge').contains('Bar').click(); + cy.get('[title="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="addThresholdButton"]').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'); cy.get('option').contains('≥').should('exist'); cy.get('option').contains('≤').should('exist'); @@ -391,39 +366,36 @@ describe('Viewing application', () => { cy.get('[data-test-subj="expressionSelect"]').select('>'); cy.get('[data-test-subj="valueFieldNumber"]').clear().type('0.5'); cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); - cy.wait(delay); cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); 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'); + cy.get('[data-test-subj="app-analytics-panelTab"]').click(); + cy.get('[id="explorerPlotComponent"]').should('exist'); + cy.get('[class="lines"]').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'); + cy.get('.euiBreadcrumb[href="#/application_analytics"]').click(); + cy.get('[data-test-subj="AvailableAvailabilityBadge"]').should('contain', 'Available'); + cy.get('[data-test-subj="AvailableAvailabilityBadge"][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.get('[data-test-subj="app-analytics-logTab"]').click(); cy.wait(delay); - cy.get('.plot-container').should('exist'); + cy.get('[id="explorerPlotComponent"]').should('exist'); cy.get('[data-test-subj="searchAutocompleteTextArea"]').clear(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type('x', {delay: TYPING_DELAY}); cy.focused().clear(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(query_two, {delay: TYPING_DELAY}); - cy.get('.euiButton').contains('Refresh').click(); + cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click(); cy.wait(delay); - cy.get('.euiTab').contains('Visualizations').click(); + cy.get('[data-test-subj="main-content-visTab"]').click(); supressResizeObserverIssue(); - cy.get('.euiBadge').contains('Bar').click(); + cy.get('[title="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="addThresholdButton"]').click(); cy.get('[data-test-subj="euiColorPickerAnchor"]').click(); cy.get('[aria-label="Select #9170B8 as the color"]').click(); cy.wait(delay); @@ -432,7 +404,7 @@ describe('Viewing application', () => { 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="addThresholdButton"]').click(); cy.get('[data-test-subj="euiColorPickerAnchor"]').first().click(); cy.get('[aria-label="Select #CA8EAE as the color"]').click(); cy.wait(delay); @@ -446,20 +418,19 @@ describe('Viewing application', () => { cy.wait(delay); cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); cy.wait(delay); - cy.get('.euiTab').contains('Panel').click(); + cy.get('[data-test-subj="app-analytics-panelTab"]').click(); cy.wait(delay); - cy.get('.js-plotly-plot').should('have.length', 2); + cy.get('[id="explorerPlotComponent"]').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'); + cy.get('[data-test-subj="SuperAvailabilityBadge"][style="background-color: rgb(145, 112, 184); color: rgb(0, 0, 0);"]').should('contain', 'Super'); }); it('Configuration tab shows details', () => { - cy.get('.euiLink').contains(nameOne).click(); + cy.get(`[data-test-subj="${nameOne}ApplicationLink"]`).click(); cy.wait(delay); - cy.get('.euiTab').contains('Configuration').click(); + cy.get('[data-test-subj="app-analytics-configTab"]').click(); cy.wait(delay); - cy.get('.euiCodeBlock__code').contains(baseQuery).should('exist'); + cy.get('[data-test-subj="configBaseQueryCode"]').should('contain', baseQuery); 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); @@ -467,83 +438,78 @@ describe('Viewing application', () => { it('Changes availability visualization', () => { - cy.get('.euiTab').contains('Configuration').click(); + cy.get('[data-test-subj="app-analytics-configTab"]').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'); + cy.get('[data-test-subj="AvailableAvailabilityBadge"][style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('contain', 'Available'); moveToApplication(nameOne); - cy.get('.euiTab').contains('Configuration').click(); + cy.get('[data-test-subj="app-analytics-configTab"]').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('.euiButton').length == 2) { - 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, {delay: TYPING_DELAY}); - 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); - } + cy.wait(delay * 3); + // When there are saved queries or visualizations there are two buttons + cy.get('body').then(($body) => { + if ($body.find('.euiButton').length == 2) { + 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, {delay: TYPING_DELAY}); + cy.wait(delay); + cy.get('.euiTableCellContent__text').contains('No items found').should('exist'); + cy.get('[class="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('[data-test-subj="eventHomeAction"]').click(); + cy.wait(delay); + cy.get('[data-test-subj="eventHomeAction__delete"]').click(); + cy.wait(delay); + cy.get('[data-test-subj="popoverModal__deleteButton"]').should('be.disabled'); + cy.get('[data-test-subj="popoverModal__deleteTextInput"]').type('delete'); + cy.get('[data-test-subj="popoverModal__deleteButton"]').should('not.be.disabled'); + cy.get('[data-test-subj="popoverModal__deleteButton"]').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.get('[data-test-subj="operationalPanelsActionsButton"]').click(); cy.wait(delay); - cy.get('.euiContextMenuItem__text').contains('Add samples').click(); + cy.get('[data-test-subj="addSampleContextMenuItem"]').click(); cy.wait(delay); - cy.get('.euiButton__text').contains('Yes').click(); - cy.wait(delay*2); + cy.get('[data-test-subj="confirmModalConfirmButton"]').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('[data-test-subj="addVisualizationButton"]').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', {delay: TYPING_DELAY}); + cy.get('[data-test-subj="operationalPanelSearchBar"]').type('[Logs] Web traffic Panel', {delay: TYPING_DELAY}); 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); + cy.get('[data-test-subj="operationalPanelsActionsButton"]').click(); + cy.get('[data-test-subj="deleteContextMenuItem"]').click(); + cy.get('[data-test-subj="popoverModal__deleteTextInput"]').type('delete'); + cy.get('[data-test-subj="popoverModal__deleteButton"]').should('not.be.disabled'); + cy.get('[data-test-subj="popoverModal__deleteButton"]').click(); }); }); @@ -553,25 +519,23 @@ describe('Editing application', () => { }); it('Redirects to application after saving changes', () => { - cy.get('.euiAccordion').contains('Log source').click(); + cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('be.disabled'); - cy.get('.euiAccordion').contains('Trace groups').click(); - 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="servicesEntitiesAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="servicesEntitiesComboBox"]').click(); - cy.get('.euiFilterSelectItem').contains(service_two).trigger('click'); - cy.get('.euiBadge').contains('2').should('exist'); - cy.get('.euiButton').contains('Save').click(); - cy.wait(delay); - cy.get('.euiTab').contains('Configuration').click(); - cy.wait(delay); - cy.get('.euiCodeBlock__code').contains(baseQuery).should('exist'); + cy.get('.euiFilterSelectItem').contains(service_two).click(); + cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '2'); + cy.get('[data-test-subj="traceGroupsAccordion"]').trigger('mouseover').click(); + cy.get('[data-test-subj="comboBoxToggleListButton"]').eq(1).click(); + cy.get('.euiFilterSelectItem').contains(trace_three).trigger('click'); + cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '3'); + cy.get('[data-test-subj="traceGroupsAccordion"]').trigger('mouseover').click(); + cy.get('[data-test-subj="createButton"]').click(); + cy.get('[data-test-subj="app-analytics-configTab"]').click(); + cy.get('[data-test-subj="configBaseQueryCode"]').should('contain', baseQuery); cy.get('[aria-label="List of services and entities"]').find('li').should('have.length', 2); cy.get('[aria-label="List of trace groups"]').find('li').should('have.length', 3); - cy.get('.euiTitle').contains(nameOne).should('exist'); + cy.get('[data-test-subj="applicationTitle"]').should('contain', nameOne); }); }); @@ -581,24 +545,22 @@ describe('Application Analytics home page', () => { }) it('Show correct information in table', () => { - 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'); + cy.get(`[data-test-subj="${nameOne}ApplicationLink"]`).should('exist'); + cy.get('[data-test-subj="appAnalytics__compositionColumn"]').should('contain', composition); + cy.get('[data-test-subj="AvailableAvailabilityBadge"][style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('contain', 'Available') }); it('Renames application', () => { - cy.get('.euiPopover').contains('Actions').click(); - cy.wait(delay); - cy.get('.euiContextMenuItem-isDisabled').contains('Rename').should('exist'); + cy.get('[data-test-subj="appAnalyticsActionsButton"]').click(); + cy.get('[data-test-subj="renameApplicationContextMenuItem"]').should('be.disabled'); + cy.get('[data-test-subj="appAnalyticsActionsButton"]').click(); cy.get('.euiTableRow').first().within(($row) => { cy.get('.euiCheckbox').click(); }); - cy.wait(delay); - cy.get('.euiPopover').contains('Actions').click(); - cy.get('.euiContextMenuItem').contains('Rename').click(); - cy.get('.euiFieldText').clear().focus().type(newName); - cy.get('.euiButton--fill').contains('Rename').click(); + cy.get('[data-test-subj="appAnalyticsActionsButton"]').click(); + cy.get('[data-test-subj="renameApplicationContextMenuItem"]').click(); + cy.get('[data-test-subj="customModalFieldText"]').clear().focus().type(newName); + cy.get('[data-test-subj="runModalButton"]').click(); cy.wait(delay); cy.get('.euiToast').contains(`Application successfully renamed to "${newName}"`); cy.get('.euiTableRow').first().within(($row) => { @@ -607,21 +569,20 @@ describe('Application Analytics home page', () => { }); it('Deletes application', () => { - cy.get('.euiPopover').contains('Actions').click(); - cy.get('.euiContextMenuItem-isDisabled').contains('Delete').should('exist'); - cy.get('.euiTableRow').eq(0).within(($row) => { + cy.get('[data-test-subj="appAnalyticsActionsButton"]').click(); + cy.get('[data-test-subj="deleteApplicationContextMenuItem"]').should('exist'); + cy.get('[data-test-subj="appAnalyticsActionsButton"]').click(); + cy.get('.euiTableRow').first().within(($row) => { cy.get('.euiCheckbox').click(); }); 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.get('[data-test-subj="appAnalyticsActionsButton"]').click(); + cy.get('[data-test-subj="deleteApplicationContextMenuItem"]').click(); + cy.get('[data-test-subj="confirmModalConfirmButton"]').click(); cy.wait(delay); cy.get('.euiToast').contains(`Applications successfully deleted!`); - cy.get('.euiLink').contains(newName).should('not.exist'); + cy.get(`[data-test-subj="${newName}ApplicationLink"]`).should('not.exist'); }); }); diff --git a/dashboards-observability/.cypress/utils/app_constants.js b/dashboards-observability/.cypress/utils/app_constants.js index 86e713879..a36a6fb50 100644 --- a/dashboards-observability/.cypress/utils/app_constants.js +++ b/dashboards-observability/.cypress/utils/app_constants.js @@ -17,30 +17,28 @@ export const moveToHomePage = () => { export const moveToCreatePage = () => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/application_analytics/`); - cy.wait(delay * 2); - cy.get('.euiButton__text').contains('Create application').click(); + cy.get('.euiButton[href="#/application_analytics/create"]').eq(0).click(); supressResizeObserverIssue(); - cy.wait(delay); - cy.get('.euiTitle').contains('Create application').should('exist'); + cy.get('[data-test-subj="createPageTitle"]').should('contain', 'Create application'); }; 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.get(`[data-test-subj="${name}ApplicationLink"]`).click(); cy.wait(delay); - cy.get('.euiTitle').contains(name).should('exist'); + cy.get('[data-test-subj="applicationTitle"]').should('contain', name); changeTimeTo24('years'); }; export const moveToEditPage = () => { moveToApplication(nameOne); - cy.get('.euiTab').contains('Configuration').click(); - cy.get('.euiButton').contains('Edit').click(); + cy.get('[data-test-subj="app-analytics-configTab"]').click(); + cy.get('[data-test-subj="editApplicationButton"]').click(); supressResizeObserverIssue(); cy.wait(delay); - cy.get('.euiTitle').contains('Edit application'); + cy.get('[data-test-subj="createPageTitle"]').should('contain', 'Edit application'); }; export const changeTimeTo24 = (timeUnit) => { diff --git a/dashboards-observability/common/constants/application_analytics.ts b/dashboards-observability/common/constants/application_analytics.ts index dc24b495b..df675a704 100644 --- a/dashboards-observability/common/constants/application_analytics.ts +++ b/dashboards-observability/common/constants/application_analytics.ts @@ -3,12 +3,12 @@ * SPDX-License-Identifier: Apache-2.0 */ -export const TAB_OVERVIEW_ID_TXT_PFX = 'app-analytics-overview-'; -export const TAB_SERVICE_ID_TXT_PFX = 'app-analytics-service-'; -export const TAB_TRACE_ID_TXT_PFX = 'app-analytics-trace-'; -export const TAB_LOG_ID_TXT_PFX = 'app-analytics-log-'; -export const TAB_PANEL_ID_TXT_PFX = 'app-analytics-panel-'; -export const TAB_CONFIG_ID_TXT_PFX = 'app-analytics-config-'; +export const TAB_OVERVIEW_ID = 'app-analytics-overview'; +export const TAB_SERVICE_ID = 'app-analytics-service'; +export const TAB_TRACE_ID = 'app-analytics-trace'; +export const TAB_LOG_ID = 'app-analytics-log'; +export const TAB_PANEL_ID = 'app-analytics-panel'; +export const TAB_CONFIG_ID = 'app-analytics-config'; export const TAB_OVERVIEW_TITLE = 'Overview'; export const TAB_SERVICE_TITLE = 'Services'; export const TAB_TRACE_TITLE = 'Traces & Spans'; diff --git a/dashboards-observability/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap b/dashboards-observability/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap index c93d4518e..c8710d638 100644 --- a/dashboards-observability/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap +++ b/dashboards-observability/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap @@ -27,6 +27,7 @@ Object { >

Create application @@ -156,6 +157,7 @@ Object {