From 64dbac4f7bab0cbba35ad011d2e5a4965315078e Mon Sep 17 00:00:00 2001 From: Eric Wei Date: Thu, 26 Jan 2023 11:33:45 -0800 Subject: [PATCH] Cypress test update and related linting fixes (#220) * resolve one failing test and remove tests of unreleased visualizations Signed-off-by: Eric Wei * fix failing table view tests and remove/modify metric switcher Signed-off-by: Eric Wei * update events tests and added vis tests Signed-off-by: Eric Wei * added fixes for linting Signed-off-by: Eric Wei * update one snapshot Signed-off-by: Eric Wei Signed-off-by: Eric Wei (cherry picked from commit 1fd72fcb1996e3d256d3b6e2b4cfbd6c3ed45ccf) --- .../integration/1_event_analytics.spec.js | 718 ++++-------------- .cypress/utils/event_analytics/constants.js | 27 +- common/types/explorer.ts | 4 +- public/components/common/search/search.tsx | 37 +- .../event_analytics/explorer/explorer.tsx | 48 +- .../__snapshots__/save_panel.test.tsx.snap | 4 +- .../explorer/save_panel/save_panel.tsx | 78 +- .../data_config_panel_fields.tsx | 36 +- .../data_configurations_panel.tsx | 33 +- .../explorer/visualizations/index.tsx | 7 +- .../hooks/use_render_visualizations.ts | 18 +- 11 files changed, 288 insertions(+), 722 deletions(-) diff --git a/.cypress/integration/1_event_analytics.spec.js b/.cypress/integration/1_event_analytics.spec.js index 39b207ff9b..8056c32993 100644 --- a/.cypress/integration/1_event_analytics.spec.js +++ b/.cypress/integration/1_event_analytics.spec.js @@ -18,79 +18,32 @@ import { landOnEventExplorer, landOnEventVisualizations, landOnPanels, - renderPieChart, - renderLineChartForDataConfig, - renderDataConfig, - aggregationValues, - DataConfigLineChart, - renderGaugeChart, + HOST_TEXT_1, + HOST_TEXT_2, + HOST_TEXT_3, + HOST_TEXT_4, + AGENT_TEXT_1, + AGENT_TEXT_2, + AGENT_TEXT_3, + BAR_LEG_TEXT_1, + BAR_LEG_TEXT_2, + BAR_LEG_TEXT_3, + VIS_TYPE_PIE, + VIS_TYPE_HBAR, + VIS_TYPE_VBAR, + VIS_TYPE_HEATMAP, + FIELD_HOST, + FIELD_AGENT } from '../utils/event_analytics/constants'; import { supressResizeObserverIssue, COMMAND_TIMEOUT_LONG } from '../utils/constants'; import { clearQuerySearchBoxText } from '../utils/event_analytics/helpers'; -const renderHistogramChart = () => { - querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM); - cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') - .type('Histogram') - .type('{enter}'); - cy.wait(delay); - cy.get('g.draglayer.cursor-crosshair').should('exist'); - cy.get('#configPanel__panelOptions .euiFieldText').click().type('Histogram chart'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]') - .click() - .type('This is the description for Histogram chart'); - cy.get('.euiIEFlexWrapFix').eq(1).contains('Chart Styles').should('exist'); - cy.get('.euiFormLabel.euiFormRow__label').eq(2).contains('Bucket Size'); - cy.get('.euiFieldNumber').eq(0).type('4'); - cy.get('.euiFormLabel.euiFormRow__label').eq(3).contains('Bucket Offset'); - cy.get('.euiFieldNumber').eq(0).type('6'); -}; - -const vis_name_sub_string = Math.floor(Math.random() * 100); - -const saveVisualizationAndVerify = () => { - cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); - cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').click(); - cy.get('.euiComboBoxOptionsList__rowWrap .euiFilterSelectItem').eq(0).click(); - cy.get( - '.euiPopover__panel .euiFormControlLayoutIcons [data-test-subj="comboBoxToggleListButton"]' - ) - .eq(0) - .click(); - cy.get('.euiPopover__panel input') - .eq(1) - .type(`Test visualization` + vis_name_sub_string); - cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); - cy.wait(delay); - cy.get('.euiHeaderBreadcrumbs a').eq(1).click(); - cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input') - .eq(0) - .type(`Test visualization` + vis_name_sub_string) - .type('{enter}'); - cy.get('.euiBasicTable .euiTableCellContent button').eq(0).click(); -}; - -const deleteVisualization = () => { - cy.get('a[href = "#/event_analytics"]').click(); - cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input') - .eq(0) - .type(`Test visualization`) - .type('{enter}'); - cy.get('input[data-test-subj = "checkboxSelectAll"]').click(); - cy.get('.euiButtonContent.euiButtonContent--iconRight.euiButton__content').click(); - cy.get('.euiContextMenuItem .euiContextMenuItem__text').eq(0).click(); - cy.get('input[placeholder = "delete"]').clear().type('delete'); - cy.get('button[data-test-subj = "popoverModal__deleteButton"]').click(); - cy.get('.euiToastHeader').should('exist'); -}; - describe('Adding sample data and visualization', () => { it('Adds sample flights data for event analytics', () => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`); cy.get('div[data-test-subj="sampleDataSetCardflights"]') .contains(/(Add|View) data/) .click(); - cy.wait(delay); }); }); @@ -150,7 +103,7 @@ describe('Open flyout for a data row to see details', () => { .should('be.visible'); }); - it('Should be able to see srrounding docs', () => { + it('Should be able to see surrounding docs', () => { cy.get('.observability-flyout span.euiButton__text') .contains('View surrounding events') .should('be.visible') @@ -164,6 +117,7 @@ describe('Open flyout for a data row to see details', () => { describe('Add/delete/switch explorer top level tabs', () => { before(() => { landOnEventExplorer(); + supressResizeObserverIssue(); }); it('Add a new tab', () => { @@ -184,7 +138,6 @@ describe('Add/delete/switch explorer top level tabs', () => { .find('button.euiTab') .first() .click(); - cy.wait(delay); supressResizeObserverIssue(); cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]') .find('button.euiTab') @@ -245,18 +198,15 @@ describe('Click actions', () => { it('Actions - click event explorer', () => { cy.get('[data-test-subj="eventHomeAction"]').click(); - cy.wait(delay); cy.get('[data-test-subj="eventHomeAction__explorer"]').click(); cy.url().should('contain', '#/event_analytics/explorer'); }); it('Actions - add sample data', () => { cy.get('[data-test-subj="eventHomeAction"]').click(); - cy.wait(delay); cy.get('[data-test-subj="eventHomeAction__addSamples"]').click(); cy.get('[data-test-subj="confirmModalConfirmButton"]').click(); - cy.wait(delay * 4); - cy.get('.euiToastHeader__title').contains('successfully').should('exist'); + cy.get('.euiToastHeader__title').should('contain', 'successfully'); }); it('Actions - delete saved queries', () => { @@ -265,7 +215,6 @@ describe('Click actions', () => { cy.get('[data-test-subj="eventHomeAction__delete"]').click(); cy.get('[data-test-subj="popoverModal__deleteTextInput"]').type('delete'); cy.get('[data-test-subj="popoverModal__deleteButton"').click(); - cy.wait(delay); cy.get('.euiToastHeader__title').contains('successfully').should('exist'); }); }); @@ -280,19 +229,14 @@ describe('Saves a query on explorer page', () => { cy.get('[data-test-subj="eventExplorer__querySaveName"]') .focus() .type(SAVE_QUERY2, { force: true }); - - cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); - cy.wait(delay * 2); - cy.get('.euiToastHeader__title').contains('successfully').should('exist'); - + cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click({ force: true }); + cy.get('.euiToastHeader__title').should('contain', 'successfully'); landOnEventHome(); - cy.get('[data-test-subj="eventHome__savedQueryTableName"]').first().contains(SAVE_QUERY2); }); it('Saves a visualization to an existing panel', () => { landOnPanels(); - cy.get('[data-test-subj="customPanels__createNewPanels"]').click(); cy.get('input.euiFieldText').type(TESTING_PANEL); cy.get('.euiButton__text') @@ -312,12 +256,12 @@ describe('Saves a query on explorer page', () => { cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').type(TESTING_PANEL); cy.get(`input[value="${TESTING_PANEL}"]`).click(); cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click({ force: true }); - cy.wait(delay); cy.get('.euiToastHeader__title').contains('successfully').should('exist'); }); it('Saves a query on event tab of explorer page', () => { landOnEventExplorer(); + supressResizeObserverIssue(); querySearch(TEST_QUERIES[0].query, TEST_QUERIES[0].dateRangeDOM); cy.get('.tab-title').contains('Events').click(); @@ -337,6 +281,7 @@ describe('Saves a query on explorer page', () => { it('Click on a saved query from event analytics home', () => { landOnEventExplorer(); + supressResizeObserverIssue(); querySearch(TEST_QUERIES[0].query, TEST_QUERIES[0].dateRangeDOM); cy.get('.tab-title').contains('Events').click(); @@ -365,6 +310,7 @@ describe('Saves a query on explorer page', () => { describe('Override timestamp for an index', () => { it('Click override button to override default timestamp', () => { landOnEventExplorer(); + supressResizeObserverIssue(); clearQuerySearchBoxText('searchAutocompleteTextArea'); cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[2].query); cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click(); @@ -384,6 +330,7 @@ describe('Override timestamp for an index', () => { describe('Toggle sidebar fields', () => { it('Toggle fields between available and selected section', () => { landOnEventExplorer(); + supressResizeObserverIssue(); querySearch(TEST_QUERIES[0].query, YEAR_TO_DATE_DOM_ID); cy.get('[data-test-subj="fieldToggle-AvgTicketPrice"]').click(); cy.get('[data-test-subj="field-AvgTicketPrice"]').should('exist'); @@ -397,6 +344,7 @@ describe('Toggle sidebar fields', () => { describe('Search fields in sidebar', () => { it('Search a field', () => { landOnEventExplorer(); + supressResizeObserverIssue(); querySearch(TEST_QUERIES[0].query, YEAR_TO_DATE_DOM_ID); cy.get('[data-test-subj="eventExplorer__sidebarSearch"]').type('A'); cy.get('[data-test-subj="field-Cancelled"]').should('not.exist'); @@ -407,7 +355,7 @@ describe('Search fields in sidebar', () => { }); describe('Delete saved objects', () => { - it('Delete visualizations/querys from event analytics', () => { + it('Delete visualizations/queries from event analytics', () => { landOnEventHome(); cy.get('[data-test-subj="tablePaginationPopoverButton"]').click(); cy.get('.euiContextMenuItem__text').contains('50 rows').click(); @@ -425,69 +373,58 @@ describe('Delete saved objects', () => { describe('Click to view field insights', () => { beforeEach(() => { landOnEventExplorer(); + supressResizeObserverIssue(); querySearch(TEST_QUERIES[2].query, YEAR_TO_DATE_DOM_ID); }); it('Click a numerical field to view field insights', () => { cy.get('[data-test-subj="field-bytes-showDetails"]').click(); - cy.get('[data-test-subj="sidebarField__fieldInsights"] button') - .contains('Top values') - .should('exist'); - cy.get('[data-test-subj="sidebarField__fieldInsights"] button') - .contains('Rare values') - .should('exist'); - cy.get('[data-test-subj="sidebarField__fieldInsights"] button') - .contains('Average overtime') - .should('exist'); - cy.get('[data-test-subj="sidebarField__fieldInsights"] button') - .contains('Maximum overtime') - .should('exist'); - cy.get('[data-test-subj="sidebarField__fieldInsights"] button') - .contains('Minimum overtime') - .should('exist'); + cy.get('[data-test-subj="sidebarField__fieldInsights"] button').should('contain', 'Top values'); + cy.get('[data-test-subj="sidebarField__fieldInsights"] button').should( + 'contain', + 'Rare values' + ); + cy.get('[data-test-subj="sidebarField__fieldInsights"] button').should( + 'contain', + 'Average overtime' + ); + cy.get('[data-test-subj="sidebarField__fieldInsights"] button').should( + 'contain', + 'Maximum overtime' + ); + cy.get('[data-test-subj="sidebarField__fieldInsights"] button').should( + 'contain', + 'Minimum overtime' + ); }); it('Click a non-numerical field to view insights', () => { cy.get('[data-test-subj="field-host-showDetails"]').click(); - cy.get('[data-test-subj="sidebarField__fieldInsights"] button') - .contains('Top values') - .should('exist'); - cy.get('[data-test-subj="sidebarField__fieldInsights"] button') - .contains('Rare values') - .should('exist'); - cy.get('[data-test-subj="sidebarField__fieldInsights"] button') - .contains('Average overtime') - .should('not.exist'); - cy.get('[data-test-subj="sidebarField__fieldInsights"] button') - .contains('Maximum overtime') - .should('not.exist'); - cy.get('[data-test-subj="sidebarField__fieldInsights"] button') - .contains('Minimum overtime') - .should('not.exist'); + cy.get('[data-test-subj="sidebarField__fieldInsights"] button').should('contain', 'Top values'); + cy.get('[data-test-subj="sidebarField__fieldInsights"] button').should( + 'contain', + 'Rare values' + ); }); }); describe('Switch on and off livetail', () => { it('Switch on and off in live tail', () => { landOnEventExplorer(); - cy.wait(delay); - + supressResizeObserverIssue(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[1].query); - cy.get('[data-test-subj=eventLiveTail]').click(); cy.get('[data-test-subj=eventLiveTail__delay10s]').click(); - cy.wait(delay * 2); - cy.get('.euiToastHeader__title').contains('On').should('exist'); - + cy.get('.euiToastHeader__title').should('contain', 'On'); cy.get('[data-test-subj=eventLiveTail__off').click(); - cy.wait(delay * 2); - cy.get('.euiToastHeader__title').contains('Off').should('exist'); + cy.get('.euiToastHeader__title').should('contain', 'Off'); }); }); describe('Live tail stop automatically', () => { it('Moving to other tab should stop live tail automatically', () => { landOnEventExplorer(); + supressResizeObserverIssue(); clearQuerySearchBoxText('searchAutocompleteTextArea'); cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[1].query); cy.get('[data-test-subj=eventLiveTail]').click(); @@ -496,6 +433,7 @@ describe('Live tail stop automatically', () => { }); it('Add a new tab', () => { + supressResizeObserverIssue(); cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]') .find('button.euiTab') .then((lists) => { @@ -548,474 +486,106 @@ describe('Live tail stop automatically', () => { }); }); -describe.skip('Renders bar charts', () => { - beforeEach(() => { - landOnEventVisualizations(); - clearQuerySearchBoxText('searchAutocompleteTextArea'); - }); - - it('Renders vertical bar chart', () => { - querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM); - cy.get( - '[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]' - ).click(); - cy.wait(delay * 2); - cy.get('[data-test-subj="comboBoxOptionsList "] span').contains('Bar').click(); - cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').first().click(); - cy.wait(delay * 2); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('host').click(); - cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').eq(1).click(); - cy.wait(delay); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('count()').click(); - cy.get('#configPanel__chart_options [data-test-subj="comboBoxInput"]').first().click(); - cy.wait(delay); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Vertical').click(); - cy.get('#configPanel__chart_options [data-test-subj="comboBoxInput"]').last().click(); - cy.wait(delay); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Group').click(); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); - cy.wait(delay * 2); - cy.get( - 'g.xaxislayer-above > g.xtick text[data-unformatted|="artifacts.opensearch.org"]' - ).should('exist'); - }); - - it('Renders horiztontal bar chart', () => { - querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM); - cy.get( - '[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]' - ).click(); - cy.wait(delay * 2); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Bar').click(); - cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').first().click(); - cy.wait(delay); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('count()').click(); - cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').eq(1).click(); - cy.wait(delay); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('host').click(); - cy.get('#configPanel__chart_options [data-test-subj="comboBoxInput"]').first().click(); - cy.wait(delay * 2); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Horizontal').click(); - cy.get('#configPanel__chart_options [data-test-subj="comboBoxInput"]').eq(1).click(); - cy.wait(delay * 2); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Group').click(); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); - cy.wait(delay * 2); - cy.get( - 'g.yaxislayer-above > g.ytick text[data-unformatted|="artifacts.opensearch.org"]' - ).should('exist'); - }); -}); - -describe.skip('Renders line charts', () => { - beforeEach(() => { - landOnEventVisualizations(); - }); - - it('Renders line chart with threshold', () => { - querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM); - cy.get( - '[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]' - ).click(); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Line').click(); - cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').first().click(); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('host').click(); - cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').eq(1).click(); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('count()').click(); - cy.get('#configPanel__chart_options [data-test-subj="comboBoxInput"]').click(); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Lines').click(); - cy.get('#configPanel__Thresholds span').contains('+ Add threadshold').click(); - cy.get('[data-test-subj="nameFieldText"]').type('Max'); - cy.get('[data-test-subj="valueFieldNumber"]').type(3800); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); - cy.wait(delay * 2); - cy.get('g.text > g.textpoint text[data-unformatted|="Max"]').should('exist'); - cy.get( - 'g.xaxislayer-above > g.xtick text[data-unformatted|="artifacts.opensearch.org"]' - ).should('exist'); - }); -}); - -describe.skip('Renders pie charts', () => { - beforeEach(() => { - landOnEventVisualizations(); - clearQuerySearchBoxText('searchAutocompleteTextArea'); - }); - - it('Renders pie chart', () => { - querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM); - cy.get( - '[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]' - ).click(); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Pie').click(); - cy.wait(delay); - cy.get('g.pielayer').should('exist'); - }); -}); - -describe.skip('Renders heatmap chart', () => { - beforeEach(() => { +describe('Visualizing data', () => { + before(() => { landOnEventVisualizations(); - clearQuerySearchBoxText('searchAutocompleteTextArea'); + querySearch(TEST_QUERIES[2].query, YEAR_TO_DATE_DOM_ID); }); - it('Renders heatmap chart with different z-axes', () => { - querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM); - cy.get( - '[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]' - ).click(); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Heatmap').click(); - cy.wait(delay * 2); - cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').click(); - cy.wait(delay * 2); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('count()').click(); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); - cy.get('g.g-gtitle text[data-unformatted|="count()"]').should('exist'); - cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').click(); - cy.wait(delay * 2); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('avg(bytes)').click(); + it('Visualize pie chart', () => { + cy.get('[data-test-subj="comboBoxInput"]').click(); + cy.get('[data-test-subj="comboBoxOptionsList "] span').contains(VIS_TYPE_PIE).click(); + cy.get('[data-test-subj="vizConfigSection-series"]') + .find('[data-test-subj="viz-config-add-btn"]') + .click(); + cy.get('[data-test-subj="panelCloseBtn"]').click(); + cy.get('[data-test-subj="vizConfigSection-dimensions"]') + .find('[data-test-subj="viz-config-add-btn"]') + .click(); + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]') + .find('[data-test-subj="comboBoxInput"]') + .click() + .type(FIELD_HOST); + cy.get(`input[value="${FIELD_HOST}"]`).click(); + cy.get('[data-test-subj="panelCloseBtn"]').click(); cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); - cy.wait(delay * 2); - cy.get('g.g-gtitle text[data-unformatted|="avg(bytes)"]').should('exist'); - }); -}); - -describe.skip('Renders markdown chart', () => { - it('Renders markdown chart with test title', () => { - landOnEventVisualizations(); - clearQuerySearchBoxText('searchAutocompleteTextArea'); - querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM); - cy.get( - '[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]' - ).click(); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Text').click(); - cy.get('[data-test-subj="workspace__viz_markdown"] h2').contains('Text').should('exist'); - cy.get('textarea.euiMarkdownEditorTextArea').type('## testing title'); + cy.get('.infolayer .legendtext').as('legandTxt'); + cy.get('@legandTxt').should('contain', HOST_TEXT_1); + cy.get('@legandTxt').should('contain', HOST_TEXT_2); + cy.get('@legandTxt').should('contain', HOST_TEXT_3); + cy.get('@legandTxt').should('contain', HOST_TEXT_4); + }); + + it('Visualize vertical bar chart', () => { + cy.get('[data-test-subj="comboBoxInput"]').click(); + cy.get('[data-test-subj="comboBoxOptionsList "] span').contains(VIS_TYPE_VBAR).click(); + cy.get('[data-test-subj="vizConfigSection-series"]') + .find('[data-test-subj="viz-config-add-btn"]') + .click(); + cy.get('[data-test-subj="panelCloseBtn"]').click(); + cy.get('[data-test-subj="vizConfigSection-dimensions"]') + .find('[data-test-subj="viz-config-add-btn"]') + .click(); + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]') + .find('[data-test-subj="comboBoxInput"]') + .click() + .type(FIELD_HOST); + cy.get(`input[value="${FIELD_HOST}"]`).click(); + cy.get('[data-test-subj="panelCloseBtn"]').click(); + cy.get('[data-test-subj="vizConfigSection-breakdowns"]') + .find('[data-test-subj="viz-config-add-btn"]') + .click(); + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]') + .find('[data-test-subj="comboBoxInput"]') + .click() + .type(FIELD_AGENT); + cy.get(`input[value="${FIELD_AGENT}"]`).click(); + cy.get('[data-test-subj="panelCloseBtn"]').click(); cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); - cy.wait(delay * 2); - cy.get('[data-test-subj="workspace__viz_markdown"] h2') - .contains('testing title') - .should('exist'); - }); -}); - -describe.skip('Renders data view', () => { - it('Switch views between data table and visualization workspace', () => { - landOnEventVisualizations(); - clearQuerySearchBoxText('searchAutocompleteTextArea'); - querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM); - cy.get('[data-test-subj="workspace__dataTableViewSwitch"]').click(); - cy.get('[data-test-subj="workspace__dataTable"]').should('exist'); - cy.get('[data-test-subj="workspace__dataTableViewSwitch"]').click(); - cy.get('[data-test-subj="workspace__dataTable"]').should('not.exist'); - }); -}); + supressResizeObserverIssue(); -describe.skip('Renders chart and verify Toast message if X-axis and Y-axis values are empty', () => { - beforeEach(() => { - landOnEventVisualizations(); - }); - it('Renders chart, clear X-axis and Y-axis value and click on Apply button, Toast message should display with error message', () => { - querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM); - cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') - .type('Bar') - .type('{enter}'); - cy.wait(delay); - cy.get('#configPanel__value_options [data-test-subj="comboBoxClearButton"]') - .eq(0) - .click({ force: true }); - cy.get('#configPanel__value_options [data-test-subj="comboBoxToggleListButton"]').eq(0).click(); - cy.wait(delay); - cy.get('#configPanel__value_options [data-test-subj="comboBoxClearButton"]').click({ - multiple: true, - }); - cy.get('#configPanel__value_options [data-test-subj="comboBoxToggleListButton"]').eq(1).click(); - cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]') - .eq(0) - .should('have.value', ''); - cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]') - .eq(1) - .should('have.value', ''); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); - cy.get('[data-test-subj="euiToastHeader"]') - .contains('Invalid value options configuration selected.') - .should('exist'); + cy.get('.infolayer .legendtext').as('legandTxt'); + cy.get('@legandTxt').should('contain', BAR_LEG_TEXT_1); + cy.get('@legandTxt').should('contain', BAR_LEG_TEXT_2); + cy.get('@legandTxt').should('contain', BAR_LEG_TEXT_3); }); - it('Renders chart, clear X-axis and Y-axis value and try to save visulization, Toast message should display with error message', () => { - querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM); - cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') - .type('Bar') - .type('{enter}'); - cy.wait(delay); - cy.get('#configPanel__value_options [data-test-subj="comboBoxClearButton"]') - .eq(0) - .click({ force: true }); - cy.get('#configPanel__value_options [data-test-subj="comboBoxToggleListButton"]').eq(0).click(); - cy.wait(delay); - cy.get('#configPanel__value_options [data-test-subj="comboBoxClearButton"]').click({ - multiple: true, - }); - cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]') - .eq(0) - .should('have.value', ''); - cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]') + it('Visualize horizontal bar chart', () => { + cy.get('[data-test-subj="comboBoxInput"]').click(); + cy.get('[data-test-subj="comboBoxOptionsList "] span').contains(VIS_TYPE_HBAR).click(); + cy.get('[data-test-subj="vizConfigSection-dimensions"]') + .find('[data-test-subj="viz-config-section"]') .eq(1) - .should('have.value', ''); - cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); - cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').click(); - cy.get('.euiComboBoxOptionsList__rowWrap .euiFilterSelectItem').eq(0).click(); - cy.get( - '.euiPopover__panel .euiFormControlLayoutIcons [data-test-subj="comboBoxToggleListButton"]' - ) - .eq(0) + .find('[data-test-subj="viz-config-delete-btn"]') .click(); - cy.get('.euiPopover__panel input').eq(1).type(`Test visulization_`); - cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); - cy.get('[data-test-subj="euiToastHeader"]') - .contains('Invalid value options configuration selected.') - .should('exist'); - }); -}); - -describe.skip('Render Table View', () => { - before(() => { - landOnEventVisualizations(); - clearQuerySearchBoxText('searchAutocompleteTextArea'); - querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM); - cy.get('[data-test-subj="workspace__dataTableViewSwitch"]').click(); - }); - - it('Switch visualization for table view and verify table data', () => { - cy.get('.ag-header-cell-text').contains('max(AvgTicketPrice)').should('exist'); - cy.get('.ag-header-cell-text').contains('DestCountry').should('exist'); - cy.get('.ag-header-cell-text').contains('DestCityName').should('exist'); - cy.get('.ag-header-cell-text').contains('Carrier').should('exist'); - }); - - it('Switch visualization for table view and change data table density', () => { - cy.get('.euiButtonEmpty__text').contains('Density').click(); - cy.get('.euiButtonIcon.euiButtonIcon--primary.euiButtonIcon--xSmall').eq(1).click(); - cy.get('.euiButtonIcon.euiButtonIcon--primary.euiButtonIcon--xSmall').eq(2).click(); - }); - - it('Switch visualization for table view and show and hide column', () => { - cy.get('.euiButtonEmpty__text').contains('Columns').click(); - cy.get('.euiSwitch__label').contains('DestCountry').click(); - cy.get('.ag-header-cell-text').contains('DestCountry').should('not.exist'); - cy.get('.euiSwitch__label').contains('Carrier').click(); - cy.get('.ag-header-cell-text').contains('Carrier').should('not.exist'); - cy.get('.euiSwitch__label').contains('DestCountry').click(); - cy.get('.ag-header-cell-text').contains('DestCountry').should('exist'); - }); - - it('Switch visualization for table view and see data in full screen', () => { - cy.get('.ag-header-cell-text').contains('max(AvgTicketPrice)').should('exist'); - cy.get('.ag-header-cell-text').contains('DestCountry').should('exist'); - cy.get('.ag-header-cell-text').contains('DestCityName').should('exist'); - cy.get('.ag-header-cell-text').contains('Carrier').should('exist'); - cy.get('.euiButtonEmpty__text').contains('Full screen').click(); - cy.wait(delay); - cy.get('body').type('{esc}'); - cy.wait(delay); - }); - - it('Switch visualization for table view and sort the column data', () => { - cy.get('.ag-header-cell-text').contains('max(AvgTicketPrice)').click(); - cy.get('.ag-cell-value').contains('125.49737').should('exist'); - cy.get('.ag-header-cell-text').contains('max(AvgTicketPrice)').click(); - cy.get('.ag-cell-value').contains('1199.729').should('exist'); - cy.get('.ag-header-cell-text').contains('DestCountry').click(); - cy.get('.ag-cell-value').contains('AE').should('exist'); - }); - - it('Switch visualization for table view and verify pagination link', () => { - cy.get('[aria-label="Next page"]').click(); - cy.get('.ag-cell-value').contains('Vienna').should('exist'); - cy.get('[aria-label="Previous page"]').click(); - cy.get('.ag-cell-value').contains('Dubai').should('exist'); - cy.get('[aria-label="Page 4"]').contains('4').click(); - cy.get('.ag-cell-value').contains('Edmonton').should('exist'); - }); - - it('Switch visualization for table view and rows per page data', () => { - cy.get('.euiButtonEmpty__text').eq('6').click(); - cy.get('.euiContextMenuItem__text').eq(1).click(); - }); -}); - -describe.skip('Render Time series chart/Line chart and verify Data configurations UI ', () => { - it('Render line chart and verify Data Configuration Panel', () => { - renderLineChartForDataConfig(); - DataConfigLineChart(); - }); -}); - -describe.skip('Renders Data Configurations section for Pie chart', () => { - beforeEach(() => { - landOnEventVisualizations(); - }); - - it('Renders Dimensions and Metrics under Data Configurations for Pie chart', () => { - renderPieChart(); - renderDataConfig(); - }); - - it('Validate "Add" and "X" buttons', () => { - renderPieChart(); - cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations'); - cy.get('.euiButton.euiButton--primary.euiButton--fullWidth').contains('Add').click(); - cy.get('.euiFormRow__fieldWrapper .euiComboBox').eq(3).click(); - cy.get('.euiComboBoxOption__content').eq(2).click(); - cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(4).click(); - cy.get('.euiComboBoxOption__content').eq(1).click(); - cy.get('.euiFieldText[placeholder="Custom label"]').eq(1).type('Demo field'); - cy.get('.euiIcon.euiIcon--medium.euiIcon--danger').eq(1).click(); - cy.get('.euiButton.euiButton--primary.euiButton--fullWidth').contains('Add').should('exist'); - }); - - it('Verify drop down values for Aggregation', () => { - renderPieChart(); - cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations'); - cy.get('.euiTitle.euiTitle--xxsmall').eq(1).contains('Dimensions').should('exist'); - cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(0).contains('Aggregation'); - cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); - aggregationValues.forEach(function (value) { - cy.get('.euiComboBoxOption__content').contains(value); - }); - }); - - it('Collapsible mode for Data Configuration panel', () => { - renderPieChart(); - cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations'); - cy.get('.euiResizableButton.euiResizableButton--horizontal').eq(1).click(); - cy.get('[data-test-subj="panel-1-toggle"]').click(); - cy.get('[class*="euiResizableToggleButton-isCollapsed"]').eq(1).should('exist'); - }); -}); - -describe.skip('Renders Histogram chart', () => { - beforeEach(() => { - landOnEventVisualizations(); - }); - - it('Renders Histogram chart and save visualization', () => { - renderHistogramChart(); - cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click(); - cy.wait(delay); - saveVisualizationAndVerify(); - }); - - it('Delete Visualization for Histogram chart from list of saved Visualizations on Event analytics page', () => { - deleteVisualization(); - }); - - it('Renders Histogram chart, add value parameters and verify Reset button click is working', () => { - renderHistogramChart(); - cy.get('[data-test-subj="visualizeEditorResetButton"]').click(); - }); -}); - -describe.skip('Render Gauge Chart and verify if data gets render', () => { - it('Render gauge chart and verify by default no data gets render', () => { - renderGaugeChart(); - cy.get('.main-svg').contains('BeatsWest').should('not.exist'); - }); - - it('Render gauge chart and verify data gets render after click on update chart', () => { - renderGaugeChart(); - cy.get('.euiButton__text').contains('Update chart').click(); - cy.get('.main-svg').contains('BeatsWest').should('exist'); - }); -}); - -describe.skip('Render Gauge Chart and work with chart styles', () => { - it('Render gauge chart and change orientation to vertical', () => { - renderGaugeChart(); - cy.get('.euiButton__text').contains('Update chart').click(); - cy.get('.euiButton__text').contains('Vertical').click(); - cy.get('.euiButton__text').contains('Preview').click(); - }); - - it('Render gauge chart and change title size then verify the update on chart', () => { - renderGaugeChart(); - cy.get('.euiButton__text').contains('Update chart').click(); - cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click(); - cy.get('[data-test-subj="valueFieldNumber"]').eq(0).type('30'); - cy.get('.euiButton__text').contains('Preview').click(); - }); - - it('Render gauge chart and change value size then verify the update on chart', () => { - renderGaugeChart(); - cy.get('.euiButton__text').contains('Update chart').click(); - cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click(); - cy.get('[data-test-subj="valueFieldNumber"]').eq(1).type('20'); - cy.get('.euiButton__text').contains('Preview').click(); - }); -}); - -describe.skip('Render Gauge Chart and work with threshold', () => { - it('Render gauge chart and add threshold then verify by default the threshold is not seen', () => { - renderGaugeChart(); - cy.get('.euiButton__text').contains('Update chart').click(); - cy.get('.euiButton__text').contains('+ Add threshold').click(); - cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold'); - cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50'); - cy.get('.euiButton__text').contains('Preview').click(); - cy.get('[data-unformatted="Gauge Threshold"]').should('not.be.visible'); - }); - - it('Render gauge chart and add threshold then verify the threshold label are seen after show threshold button enabled ', () => { - renderGaugeChart(); - cy.get('.euiButton__text').contains('Update chart').click(); - cy.get('.euiButton__text').contains('+ Add threshold').click(); - cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold'); - cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50'); - cy.get('.euiSwitch__label').contains('Show threshold labels').click(); - cy.get('.euiButton__text').contains('Preview').click(); - cy.get('[data-unformatted="Gauge Threshold"]').should('be.visible'); - }); - - it('Render gauge chart and add threshold then verify the threshold marker are seen after show threshold button enabled ', () => { - renderGaugeChart(); - cy.get('.euiButton__text').contains('Update chart').click(); - cy.get('.euiButton__text').contains('+ Add threshold').click(); - cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold'); - cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50'); - cy.get('.euiSwitch__label').contains('Show threshold markers').click(); - cy.get('.euiButton__text').contains('Preview').click(); - cy.get('path[style*="rgb(252, 5, 5)"]').eq(1).should('exist'); - cy.get('.bg-arc').find('path[style*="rgb(252, 5, 5)"]').should('have.length', 4); + cy.get('[data-test-subj="vizConfigSection-breakdowns"]') + .find('[data-test-subj="viz-config-add-btn"]') + .click(); + cy.get('[data-test-subj="explorer__vizDataConfig-panel"]') + .find('[data-test-subj="comboBoxInput"]') + .click() + .type(FIELD_AGENT); + cy.get(`input[value="${FIELD_AGENT}"]`).click(); + cy.get('[data-test-subj="panelCloseBtn"]').click(); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); + cy.get('.infolayer .legendtext').as('legandTxt'); + cy.get('@legandTxt').should('contain', BAR_LEG_TEXT_1); + cy.get('@legandTxt').should('contain', BAR_LEG_TEXT_2); + cy.get('@legandTxt').should('contain', BAR_LEG_TEXT_3); }); -}); -describe.skip('Render gauge chart and verify if reset works properly', () => { - it('Render gauge chart with all feild data then click on reset and verify reset works properly', () => { - renderGaugeChart(); - cy.get('.euiButton__text').contains('Update chart').click(); - cy.get('input[placeholder="Title"]').type('Gauge Chart'); - cy.get('textarea[placeholder="Description"]').type('Description For Gauge Chart'); - cy.get('.euiButton__text').contains('Vertical').click(); - cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click(); - cy.get('[data-test-subj="valueFieldNumber"]').eq(0).type('30'); - cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click(); - cy.get('[data-test-subj="valueFieldNumber"]').eq(1).type('20'); - cy.get('.euiButton__text').contains('+ Add threshold').click(); - cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold'); - cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50'); - cy.get('.euiSwitch__label').contains('Show threshold labels').click(); - cy.get('.euiSwitch__label').contains('Show threshold markers').click(); - cy.get('.euiButton__text').contains('Preview').click(); - cy.get('.euiButtonEmpty__text').contains('Reset').click(); - cy.get('input[placeholder="Title"]').should('not.have.value', 'Gauge Chart'); - cy.get('textarea[placeholder="Description"]').should( - 'not.have.value', - 'Description For Gauge Chart' - ); - cy.get('[data-test-subj="valueFieldNumber"]').eq(0).should('have.value', ''); - cy.get('[data-test-subj="valueFieldNumber"]').eq(1).should('have.value', ''); - cy.get('button.euiSwitch__button[aria-checked="false"]') - .should('exist') - .should('have.length', 3); + it('Visualize heatmap chart', () => { + cy.get('[data-test-subj="comboBoxInput"]').click(); + cy.get('[data-test-subj="comboBoxOptionsList "] span').contains(VIS_TYPE_HEATMAP).click(); + supressResizeObserverIssue(); + cy.get('g.cartesianlayer g.xy g.xaxislayer-above g.xtick text').as('legandXTxt'); + cy.get('@legandXTxt').should('contain', HOST_TEXT_1); + cy.get('@legandXTxt').should('contain', HOST_TEXT_3); + cy.get('@legandXTxt').should('contain', HOST_TEXT_4); + cy.get('@legandXTxt').should('contain', HOST_TEXT_2); + cy.get('g.cartesianlayer g.xy g.yaxislayer-above g.ytick text').as('legandYTxt'); + cy.get('@legandYTxt').should('contain', AGENT_TEXT_1); + cy.get('@legandYTxt').should('contain', AGENT_TEXT_2); + cy.get('@legandYTxt').should('contain', AGENT_TEXT_3); }); }); diff --git a/.cypress/utils/event_analytics/constants.js b/.cypress/utils/event_analytics/constants.js index 8a996fd12d..4168fa74ab 100644 --- a/.cypress/utils/event_analytics/constants.js +++ b/.cypress/utils/event_analytics/constants.js @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { COMMAND_TIMEOUT_LONG, supressResizeObserverIssue, TIMEOUT_DELAY } from '../constants'; +import { COMMAND_TIMEOUT_LONG, supressResizeObserverIssue } from '../constants'; export const delay = 1000; export const YEAR_TO_DATE_DOM_ID = '[data-test-subj="superDatePickerCommonlyUsed_Year_to date"]'; @@ -20,6 +20,7 @@ export const TEST_QUERIES = [ }, { query: 'source = opensearch_dashboards_sample_data_logs', + dateRangeDOM: YEAR_TO_DATE_DOM_ID, }, { query: @@ -78,30 +79,25 @@ export const querySearch = (query, rangeSelected) => { .type(query, { delay: 50 }); cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click(); cy.get(rangeSelected).click(); - cy.wait(delay * 2); cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click(); }; export const landOnEventHome = () => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics`); - cy.wait(delay); }; export const landOnEventExplorer = () => { cy.visit( `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/explorer` ); - supressResizeObserverIssue(); - cy.wait(delay); }; export const landOnEventVisualizations = () => { cy.visit( `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/explorer` ); + supressResizeObserverIssue(); // have to add cy.get('button[id="main-content-vis"]').contains('Visualizations').click(); - supressResizeObserverIssue(); - cy.wait(delay); }; export const landOnPanels = () => { @@ -252,3 +248,20 @@ export const renderGaugeChart = () => { .type('Gauge') .type('{enter}'); }; + +export const HOST_TEXT_1 = "artifacts.opensearch.org"; +export const HOST_TEXT_2 = "www.opensearch.org"; +export const HOST_TEXT_3 = "cdn.opensearch-opensearch-opensearch.org"; +export const HOST_TEXT_4 = "opensearch-opensearch-opensearch.org"; +export const AGENT_TEXT_1 = "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"; +export const AGENT_TEXT_2 = "Mozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24"; +export const AGENT_TEXT_3 = "Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1"; +export const BAR_LEG_TEXT_1 = `${AGENT_TEXT_1},count()`; +export const BAR_LEG_TEXT_2 = `${AGENT_TEXT_2},count()`; +export const BAR_LEG_TEXT_3 = `${AGENT_TEXT_3},count()`; +export const VIS_TYPE_PIE = 'Pie'; +export const VIS_TYPE_VBAR = 'Vertical bar'; +export const VIS_TYPE_HBAR = 'Horizontal bar'; +export const VIS_TYPE_HEATMAP = 'Heatmap'; +export const FIELD_HOST = 'host'; +export const FIELD_AGENT = 'agent'; diff --git a/common/types/explorer.ts b/common/types/explorer.ts index 3174d5c0b1..b81ec6f61e 100644 --- a/common/types/explorer.ts +++ b/common/types/explorer.ts @@ -289,7 +289,7 @@ export interface PatternTableData { pattern: string; sampleLog: string; anomalyCount?: number; -}; +} export interface ConfigListEntry { label: string; @@ -379,7 +379,7 @@ export interface VisMeta { } export interface VisualizationState { - query: Query; + queryState: Query; visData: any; visConfMetadata: ConfigList; visMeta: VisMeta; diff --git a/public/components/common/search/search.tsx b/public/components/common/search/search.tsx index 989912f338..98805db2bd 100644 --- a/public/components/common/search/search.tsx +++ b/public/components/common/search/search.tsx @@ -6,6 +6,7 @@ import './search.scss'; import React, { useState } from 'react'; +import { isEqual } from 'lodash'; import { EuiFlexGroup, EuiButton, @@ -16,7 +17,7 @@ import { EuiBadge, EuiContextMenuPanel, EuiToolTip, - EuiCallOut + EuiCallOut, } from '@elastic/eui'; import { DatePicker } from './date_picker'; import '@algolia/autocomplete-theme-classic'; @@ -26,6 +27,7 @@ import { PPLReferenceFlyout } from '../helpers'; import { uiSettingsService } from '../../../../common/utils'; import { APP_ANALYTICS_TAB_ID_REGEX } from '../../../../common/constants/explorer'; import { LiveTailButton, StopLiveButton } from '../live_tail/live_tail_button'; +import { PPL_SPAN_REGEX } from '../../../../common/constants/shared'; export interface IQueryBarProps { query: string; tempQuery: string; @@ -68,7 +70,6 @@ export const Search = (props: any) => { showSavePanelOptionsList, showSaveButton = true, handleTimeRangePickerRefresh, - liveTailButton, isLiveTailPopoverOpen, closeLiveTailPopover, popoverItems, @@ -84,14 +85,9 @@ export const Search = (props: any) => { liveTailName, searchError = null, curVisId, - spanValue, setSubType, - metricMeasure, - setMetricMeasure, - setMetricLabel, - metricChecked, } = props; - + const appLogEvents = tabId.match(APP_ANALYTICS_TAB_ID_REGEX); const [isSavePanelOpen, setIsSavePanelOpen] = useState(false); const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); @@ -222,15 +218,12 @@ export const Search = (props: any) => { showOptionList={ showSavePanelOptionsList && searchBarConfigs[selectedSubTabId]?.showSavePanelOptionsList - } curVisId={curVisId} - spanValue={spanValue} setSubType={setSubType} - metricMeasure={metricMeasure} - setMetricMeasure={setMetricMeasure} - setMetricLabel={setMetricLabel} - metricChecked={metricChecked} + isSaveAsMetricEnabled={ + isEqual(curVisId, 'line') && tempQuery.match(PPL_SPAN_REGEX) !== null + } /> @@ -263,17 +256,19 @@ export const Search = (props: any) => { )} - { searchError && searchError.error && ( + {searchError && searchError.error && ( - -

- {JSON.parse(searchError.message).error.details} -

+ +

{JSON.parse(searchError.message).error.details}

 - ) - } + + )} {flyout} ); diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx index f151e67504..169f3f0e56 100644 --- a/public/components/event_analytics/explorer/explorer.tsx +++ b/public/components/event_analytics/explorer/explorer.tsx @@ -187,10 +187,8 @@ export const Explorer = ({ value: string; }>(); const [viewLogPatterns, setViewLogPatterns] = useState(false); - const [spanValue, setSpanValue] = useState(false); const [subType, setSubType] = useState('visualization'); const [metricMeasure, setMetricMeasure] = useState(''); - const [metricLabel, setMetricLabel] = useState([]); const [metricChecked, setMetricChecked] = useState(false); const queryRef = useRef(); const appBasedRef = useRef(''); @@ -570,7 +568,10 @@ export const Explorer = ({ await updateQueryInStore(patternSelectQuery); // Passing in empty string will remove pattern query const patternErrorHandler = getErrorHandler('Error fetching patterns'); - getPatterns(selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y', patternErrorHandler); + getPatterns( + selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y', + patternErrorHandler + ); } }; @@ -645,7 +646,10 @@ export const Explorer = ({ getErrorHandler('Error overriding default pattern') ); setIsOverridingPattern(false); - await getPatterns(selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y', getErrorHandler('Error fetching patterns')); + await getPatterns( + selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y', + getErrorHandler('Error fetching patterns') + ); }; const totalHits: number = useMemo(() => { @@ -850,7 +854,10 @@ export const Explorer = ({ }) ); await getPatterns( - selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y', + selectedIntervalRef.current?.value.replace( + /^auto_/, + '' + ) || 'y', getErrorHandler('Error fetching patterns') ); }} @@ -1253,7 +1260,7 @@ export const Explorer = ({ ? JSON.stringify(userVizConfigs[curVisId]) : JSON.stringify({}), description: vizDescription, - subType: subType, + subType, }) .then((res: any) => { setToast( @@ -1288,7 +1295,7 @@ export const Explorer = ({ ? JSON.stringify(userVizConfigs[curVisId]) : JSON.stringify({}), description: vizDescription, - subType: subType, + subType, }) .then((res: any) => { batch(() => { @@ -1430,25 +1437,17 @@ export const Explorer = ({ [tempQuery] ); - const generateViewQuery = (query: string) => { - if (query.includes(appBaseQuery)) { - if (query.includes('|')) { + const generateViewQuery = (queryString: string) => { + if (queryString.includes(appBaseQuery)) { + if (queryString.includes('|')) { // Some scenarios have ' | ' after base query and some have '| ' - return query.replace(' | ', '| ').replace(appBaseQuery + '| ', ''); + return queryString.replace(' | ', '| ').replace(appBaseQuery + '| ', ''); } return ''; } - return query; + return queryString; }; - useEffect(() => { - if (isEqual(selectedContentTabId, TAB_CHART_ID)) { - const statsTokens = queryManager.queryParser().parse(tempQuery).getStats(); - const updatedDataConfig = getDefaultVisConfig(statsTokens); - setSpanValue(!isEqual(typeof updatedDataConfig.span, 'undefined')); - } - }, [tempQuery, selectedContentTabId, curVisId]); - return ( -
+