diff --git a/dashboards-observability/.cypress/integration/event_analytics.spec.js b/dashboards-observability/.cypress/integration/event_analytics.spec.js index e5347551e..5ee45d3b8 100644 --- a/dashboards-observability/.cypress/integration/event_analytics.spec.js +++ b/dashboards-observability/.cypress/integration/event_analytics.spec.js @@ -12,35 +12,15 @@ import { SAVE_QUERY2, SAVE_QUERY3, SAVE_QUERY4, -} from '../utils/constants'; + querySearch, + YEAR_TO_DATE_DOM_ID, + landOnEventHome, + landOnEventExplorer, + landOnEventVisualizations, + landOnPanels +} from '../utils/event_constants'; import { supressResizeObserverIssue } from '../utils/constants'; -const landOnEventHome = () => { - cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics`); - cy.wait(delay); -}; - -const landOnEventExplorer = () => { - cy.visit( - `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/explorer` - ); - cy.wait(delay * 2); -}; - -const landOnPanels = () => { - cy.visit( - `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels` - ); - cy.wait(delay); -}; - -const querySearch = (query) => { - cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(query); - cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click(); - cy.get('[data-test-subj="superDatePickerCommonlyUsed_This_year"]').click(); - cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click(); -}; - describe('Adding sample data and visualization', () => { it('Adds sample flights data for event analytics', () => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`); @@ -54,6 +34,7 @@ describe('Adding sample data and visualization', () => { describe('Has working breadcrumbs', () => { it('Redirect to correct page on breadcrumb click', () => { landOnEventExplorer(); + cy.wait(delay * 3); cy.get('.euiBreadcrumb').contains('Explorer').click(); cy.wait(delay); cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('exist'); @@ -66,15 +47,33 @@ describe('Has working breadcrumbs', () => { }); }); +describe('Search a query on event home', () => { + it('Search a query and redirect to explorer to display query output', () => { + landOnEventHome(); + + cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[0].query); + cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click(); + cy.get('[data-test-subj="superDatePickerCommonlyUsed_Year_to date"]').click(); + cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click(); + cy.window().its('store').invoke('getState').then((state) => { + expect(Object.values(state.queries)[0]['rawQuery'].trim()).equal(TEST_QUERIES[0].query) + expect(Object.values(state.queries)[0]['selectedDateRange'][0]).equal("now/y"); + expect(Object.values(state.queries)[0]['selectedDateRange'][1]).equal("now"); + }); + cy.wait(delay); + + cy.url().should('contain', '#/event_analytics/explorer'); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').contains(TEST_QUERIES[0].query); + }); +}); + describe('Open flyout for a data row to see details', () => { beforeEach(() => { landOnEventExplorer(); + querySearch(TEST_QUERIES[0].query, TEST_QUERIES[0].dateRangeDOM); }); it('Should be able to open flyout and see data, json and traces', () => { - cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[0].query); - cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click(); - cy.wait(delay); cy.get('[data-test-subj="docTable"] tbody tr button.euiButtonIcon').first().click(); cy.get('.observability-flyout').should('exist'); cy.get('.observability-flyout .osdDocViewer .euiTabs span.euiTab__content').contains('JSON').click(); @@ -83,9 +82,6 @@ describe('Open flyout for a data row to see details', () => { }); it('Should be able to see srrounding docs', () => { - cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[0].query); - cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click(); - cy.wait(delay); cy.get('[data-test-subj="docTable"] tbody tr button.euiButtonIcon').first().click(); cy.get('.observability-flyout').should('exist'); cy.get('.observability-flyout span.euiButton__text').contains('View surrounding events').click(); @@ -93,19 +89,6 @@ describe('Open flyout for a data row to see details', () => { }); }); -describe('Search a query on event home', () => { - it('Search a query and redirect to explorer to display result data', () => { - landOnEventHome(); - - cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[0].query); - cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click(); - cy.wait(delay); - - cy.url().should('contain', '#/event_analytics/explorer'); - cy.get('[data-test-subj="searchAutocompleteTextArea"]').contains(TEST_QUERIES[0].query); - }); -}); - describe('Add/delete/switch explorer top level tabs', () => { beforeEach(() => { landOnEventExplorer(); @@ -186,15 +169,13 @@ describe('Add/delete/switch explorer top level tabs', () => { describe('Load a saved query from event home', () => { it('Click on a saved query and redirect to explorer', () => { landOnEventExplorer(); - cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[0].query); - cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click(); - cy.wait(delay); + querySearch(TEST_QUERIES[0].query, TEST_QUERIES[0].dateRangeDOM); cy.get('.tab-title').contains('Events').click(); cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); cy.get('[data-test-subj="eventExplorer__querySaveName"]').type(SAVE_QUERY4); cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); - cy.wait(delay); + cy.wait(delay * 2); cy.get('.euiToastHeader__title').contains('successfully').should('exist'); @@ -218,16 +199,17 @@ describe('Click actions', () => { it('Actions - click event explorer', () => { cy.get('[data-test-subj="eventHomeAction"]').click(); - cy.get('[data-test-subj="eventHomeAction__explorer"]').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 * 2); + cy.wait(delay * 4); cy.get('.euiToastHeader__title').contains('successfully').should('exist'); }); @@ -255,7 +237,7 @@ describe('Saves a query on explorer page', () => { cy.wait(delay); cy.get('[data-test-subj="eventExplorer__querySaveName"]').type(SAVE_QUERY1); cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); - cy.wait(delay); + cy.wait(delay * 2); cy.get('.euiToastHeader__title').contains('successfully').should('exist'); @@ -275,7 +257,7 @@ describe('Saves a query on explorer page', () => { cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); cy.get('[data-test-subj="eventExplorer__querySaveName"]').type(SAVE_QUERY2); cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); - cy.wait(delay); + cy.wait(delay * 2); cy.get('.euiToastHeader__title').contains('successfully').should('exist'); @@ -314,7 +296,7 @@ describe('Saves a query on explorer page', () => { }); }); -describe('Override default timestamp for an index', () => { +describe('Override timestamp for an index', () => { it('Click override button to override default timestamp', () => { landOnEventExplorer(); @@ -333,7 +315,7 @@ describe('Override default timestamp for an index', () => { describe('Toggle sidebar fields', () => { it('Toggle fields between available and selected section', () => { landOnEventExplorer(); - querySearch(TEST_QUERIES[0].query); + querySearch(TEST_QUERIES[0].query, YEAR_TO_DATE_DOM_ID); cy.wait(delay); cy.get('[data-test-subj="fieldToggle-AvgTicketPrice"]').click(); @@ -348,7 +330,7 @@ describe('Toggle sidebar fields', () => { describe('Search fields in sidebar', () => { it('Search a field', () => { landOnEventExplorer(); - querySearch(TEST_QUERIES[0].query); + querySearch(TEST_QUERIES[0].query, YEAR_TO_DATE_DOM_ID); cy.wait(delay); cy.get('[data-test-subj="eventExplorer__sidebarSearch"]').type('A'); @@ -376,11 +358,36 @@ describe('Delete saved objects', () => { 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 * 4); cy.get('.euiTextAlign').contains('No Queries or Visualizations').should('exist'); }); }); +describe('Click to view field insights', () => { + beforeEach(() => { + landOnEventExplorer(); + 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'); + }); + + 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'); + }); +}); + describe('Switch on and off livetail', () => { it('Switch on and off in live tail', () => { landOnEventExplorer(); @@ -437,7 +444,7 @@ describe('Live tail stop automatically', () => { .find('button.euiTab') .first() .should('have.class', 'euiTab-isSelected'); -}); + }); it('Close current selected tab', () => { cy.get('[data-test-subj="eventExplorer__addNewTab"]').click(); @@ -457,4 +464,158 @@ describe('Live tail stop automatically', () => { it('Live tail should be stopped', () => { cy.get('.euiButton__text').contains('Live'); }); +}); + +describe('Renders noresult chart', () => { + beforeEach(() => { + landOnEventVisualizations(); + }); + + it('It should render no result when there is no data', () => { + cy.get('[data-test-subj="vizWorkspace__noData"] p').contains('No results found').should('exist'); + }); +}); + +describe('Renders bar charts', () => { + beforeEach(() => { + landOnEventVisualizations(); + }); + + 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('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('Renders pie charts', () => { + beforeEach(() => { + landOnEventVisualizations(); + }); + + 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('Renders heatmap chart', () => { + beforeEach(() => { + landOnEventVisualizations(); + }); + + 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(); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); + cy.wait(delay * 2); + cy.get('g.g-gtitle text[data-unformatted|="avg(bytes)"]').should('exist'); + }); +}); + +describe('Renders markdown chart', () => { + beforeEach(() => { + landOnEventVisualizations(); + }); + + it('Renders markdown chart with test title', () => { + 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('[data-test-subj="visualizeEditorRenderButton"]').click(); + cy.wait(delay * 2); + cy.get('[data-test-subj="workspace__viz_markdown"] h2').contains('testing title').should('exist'); + }); +}); + +describe('Renders data view', () => { + beforeEach(() => { + landOnEventVisualizations(); + }); + + it('Switch views between data table and visualization workspace', () => { + 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'); + }); }); \ No newline at end of file diff --git a/dashboards-observability/.cypress/utils/constants.js b/dashboards-observability/.cypress/utils/constants.js index e99c97ddc..56506b842 100644 --- a/dashboards-observability/.cypress/utils/constants.js +++ b/dashboards-observability/.cypress/utils/constants.js @@ -93,25 +93,6 @@ export const PPL_QUERY_TEXT = `%ppl source=opensearch_dashboards_sample_data_flights ` -// event analytics -export const TEST_QUERIES = [ - { - query: 'source = opensearch_dashboards_sample_data_flights' - }, - { - query: 'source = opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by Carrier' - }, - { - query: 'source = opensearch_dashboards_sample_data_logs' - }, -]; - -export const TESTING_PANEL = 'Mock Testing Panels'; -export const SAVE_QUERY1 = 'Mock Flight Events Overview'; -export const SAVE_QUERY2 = 'Mock Flight count by destination'; -export const SAVE_QUERY3 = 'Mock Flight count by destination save to panel'; -export const SAVE_QUERY4 = 'Mock Flight peek'; - export const supressResizeObserverIssue = () => { // exception is thrown on loading EuiDataGrid in cypress only, ignore for now cy.on('uncaught:exception', (err, runnable) => { diff --git a/dashboards-observability/.cypress/utils/event_constants.js b/dashboards-observability/.cypress/utils/event_constants.js new file mode 100644 index 000000000..7e3b5b8bc --- /dev/null +++ b/dashboards-observability/.cypress/utils/event_constants.js @@ -0,0 +1,71 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { supressResizeObserverIssue } from './constants' + +export const delay = 1000; +export const YEAR_TO_DATE_DOM_ID = '[data-test-subj="superDatePickerCommonlyUsed_Year_to date"]' + +export const TEST_QUERIES = [ + { + query: 'source = opensearch_dashboards_sample_data_flights', + dateRangeDOM: YEAR_TO_DATE_DOM_ID + }, + { + query: 'source = opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by Carrier' + }, + { + query: 'source = opensearch_dashboards_sample_data_logs' + }, + { + query: 'source = opensearch_dashboards_sample_data_logs | stats count() by host', + dateRangeDOM: YEAR_TO_DATE_DOM_ID + }, + { + query: 'source = opensearch_dashboards_sample_data_logs | stats count(), avg(bytes) by host, tags', + dateRangeDOM: YEAR_TO_DATE_DOM_ID + }, +]; + +export const TESTING_PANEL = 'Mock Testing Panels'; +export const SAVE_QUERY1 = 'Mock Flight Events Overview'; +export const SAVE_QUERY2 = 'Mock Flight count by destination'; +export const SAVE_QUERY3 = 'Mock Flight count by destination save to panel'; +export const SAVE_QUERY4 = 'Mock Flight peek'; + +export const querySearch = (query, rangeSelected) => { + cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(query); + cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click(); + cy.get(rangeSelected).click(); + 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` + ); + cy.wait(delay); +}; + +export const landOnEventVisualizations = () => { + cy.visit( + `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/explorer` + ); + cy.get('button[id="main-content-vis"]').contains('Visualizations').click(); + supressResizeObserverIssue(); + cy.wait(delay); +}; + +export const landOnPanels = () => { + cy.visit( + `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels` + ); + cy.wait(delay); +}; \ No newline at end of file diff --git a/dashboards-observability/public/components/app.tsx b/dashboards-observability/public/components/app.tsx index 36594b890..3cc0da4de 100644 --- a/dashboards-observability/public/components/app.tsx +++ b/dashboards-observability/public/components/app.tsx @@ -26,6 +26,11 @@ interface ObservabilityAppDeps { timestampUtils: any; } +// for cypress to test redux store +if (window.Cypress) { + window.store = store; +} + export const App = ({ CoreStartProp, DepsStart, diff --git a/dashboards-observability/public/components/explorer/sidebar/field_insights.tsx b/dashboards-observability/public/components/explorer/sidebar/field_insights.tsx index fd03ce1f5..90b3c958e 100644 --- a/dashboards-observability/public/components/explorer/sidebar/field_insights.tsx +++ b/dashboards-observability/public/components/explorer/sidebar/field_insights.tsx @@ -127,7 +127,7 @@ export const FieldInsights = ({ field, query }: any) => { }, [curReport, reportContent, field.name]); return ( - + {generalReports.map((report) => { diff --git a/dashboards-observability/public/components/explorer/timechart_header/timechart_header.tsx b/dashboards-observability/public/components/explorer/timechart_header/timechart_header.tsx index 651563023..81b53f627 100644 --- a/dashboards-observability/public/components/explorer/timechart_header/timechart_header.tsx +++ b/dashboards-observability/public/components/explorer/timechart_header/timechart_header.tsx @@ -66,7 +66,7 @@ export function TimechartHeader({ })} compressed id="dscResultsIntervalSelector" - data-test-subj="discoverIntervalSelect" + data-test-subj="eventAnalytics__EventIntervalSelect" options={options} value={interval} onChange={handleIntervalChange} diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_value_options.tsx b/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_value_options.tsx index f3b80e568..f7ff2e609 100644 --- a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_value_options.tsx +++ b/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_value_options.tsx @@ -13,6 +13,7 @@ export const ConfigValueOptions = ({ vizState, handleConfigChange, sectionName, + sectionId = 'valueOptions' }: any) => { const { data } = visualizations; const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData; @@ -55,7 +56,7 @@ export const ConfigValueOptions = ({ return ( diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/default_vis_editor.tsx b/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/default_vis_editor.tsx index 0cbad5326..1b6ec01e1 100644 --- a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/default_vis_editor.tsx +++ b/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/default_vis_editor.tsx @@ -27,6 +27,7 @@ export const VizDataPanel = ({ visualizations, onConfigChange, vizState = {}, ta handleConfigChange={handleConfigEditing(section.mapTo)} vizState={vizState[section.mapTo] || section.defaultState || {}} sectionName={section.name} + sectionId={section.id} /> ); diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_panel.tsx b/dashboards-observability/public/components/explorer/visualizations/config_panel/config_panel.tsx index 783ae69fc..83a9012f0 100644 --- a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_panel.tsx +++ b/dashboards-observability/public/components/explorer/visualizations/config_panel/config_panel.tsx @@ -186,7 +186,9 @@ export const ConfigPanel = ({ visualizations, setCurVisId }: any) => { gutterSize="none" responsive={false} > - +
diff --git a/dashboards-observability/public/components/explorer/visualizations/shared_components/empty_placeholder.tsx b/dashboards-observability/public/components/explorer/visualizations/shared_components/empty_placeholder.tsx index 30e316ace..40d449ea7 100644 --- a/dashboards-observability/public/components/explorer/visualizations/shared_components/empty_placeholder.tsx +++ b/dashboards-observability/public/components/explorer/visualizations/shared_components/empty_placeholder.tsx @@ -9,12 +9,12 @@ import { FormattedMessage } from '@osd/i18n/react'; export const EmptyPlaceholder = (props: {icon: string}) => ( <> - +

diff --git a/dashboards-observability/public/components/explorer/visualizations/workspace_panel/workspace_panel.tsx b/dashboards-observability/public/components/explorer/visualizations/workspace_panel/workspace_panel.tsx index 9934e4f27..525083525 100644 --- a/dashboards-observability/public/components/explorer/visualizations/workspace_panel/workspace_panel.tsx +++ b/dashboards-observability/public/components/explorer/visualizations/workspace_panel/workspace_panel.tsx @@ -21,7 +21,7 @@ interface IWorkSpacePanel { export function WorkspacePanel({ visualizations }: IWorkSpacePanel) { const [isTableViewOn, setIsTableViewOn] = useState(false); const VisualizationPanel = useMemo(() => { - return ; + return ; }, [visualizations]); return ( @@ -55,6 +55,7 @@ export function WorkspacePanel({ visualizations }: IWorkSpacePanel) { setIsTableViewOn((staleState) => !staleState); }} aria-describedby="table view switcher" + data-test-subj="workspace__dataTableViewSwitch" compressed /> @@ -64,7 +65,10 @@ export function WorkspacePanel({ visualizations }: IWorkSpacePanel) { - {isTableViewOn ? : VisualizationPanel} + {isTableViewOn ? + : VisualizationPanel} diff --git a/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx b/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx index 99f72748d..912a9dc2c 100644 --- a/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx +++ b/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx @@ -87,6 +87,7 @@ export const DataTable = ({ visualizations }: any) => { return ( { const { dataConfig = {} } = visualizations?.data?.userConfigs; return ( - - {dataConfig.text?.markdown ? dataConfig.text?.markdown : DEFAULT_MARKDOWN} - +
+ + {dataConfig.text?.markdown ? dataConfig.text?.markdown : DEFAULT_MARKDOWN} + +
); };