Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sprint2 (#47) #868

Merged
merged 1 commit into from
Jul 26, 2022
Merged

Sprint2 (#47) #868

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
181 changes: 180 additions & 1 deletion dashboards-observability/.cypress/integration/1_event_analytics.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,29 @@ import {
renderTreeMapchart,
renderPieChart,
renderLineChartForDataConfig,
DataConfigLineChart
renderDataConfig,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we further break down this event test file into smaller files that all with the same prefix? We can extract visualization only tests to a different spec file

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes Eric we have already divided the event file into smaller ones on the basis of different charts and made a new folder for Visualizations charts. The code is still to be merged.
Please refer to the image below and suggest if any change is required.
image

aggregationValues,
DataConfigLineChart,
renderAddParent,
renderGaugeChart,
renderAddParent
} from '../utils/event_constants';
import { supressResizeObserverIssue } from '../utils/constants';

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();
Expand Down Expand Up @@ -857,3 +876,163 @@ describe('Render Time series chart/Line chart and verify Data configurations UI
DataConfigLineChart();
});
});

describe('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('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('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('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('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);
});
});

describe('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);
});
});
117 changes: 97 additions & 20 deletions dashboards-observability/.cypress/utils/event_constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,11 @@ export const TEST_QUERIES = [
dateRangeDOM: YEAR_TO_DATE_DOM_ID
},
{
query:"source = opensearch_dashboards_sample_data_logs | where response='503' or response='404' | stats count() by span(timestamp,1d)",
query: "source = opensearch_dashboards_sample_data_logs | where response='503' or response='404' | stats count() by span(timestamp,1d)",
dateRangeDOM: YEAR_TO_DATE_DOM_ID
},
{
query: 'source=opensearch_dashboards_sample_data_flights |where FlightDelayMin > 0 | stats sum(FlightDelayMin) as total_delay_min, count() as total_delayed by Carrier |eval avg_delay=total_delay_min / total_delayed | sort - avg_delay',
dateRangeDOM: YEAR_TO_DATE_DOM_ID
},
];
Expand All @@ -44,6 +48,8 @@ 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 aggregationValues = ["COUNT", "SUM", "AVERAGE", "MAX", "MIN", "VAR_SAMP", "VAR_POP", "STDDEV_SAMP", "STDDEV_POP"];

export const querySearch = (query, rangeSelected) => {
cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(query);
cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click();
Expand Down Expand Up @@ -80,21 +86,54 @@ export const landOnPanels = () => {
cy.wait(delay);
};

const vis_name_sub_string = Math.floor(Math.random() * 100);
export 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();
};

export const deleteVisualization = () => {
cy.get('a[href = "#/event_analytics"]').click();
cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input')
.eq(0)
.type(`Test visualization` + vis_name_sub_string)
.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');
};

export const renderTreeMapchart = () => {
querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM);
cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Tree Map').type('{enter}');
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Tree Map');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Tree Map');
cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(1).click();
cy.get('.euiComboBoxOption__content').eq(2).click();
cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(2).click();
cy.get('.euiComboBoxOption__content').eq(1).click();
cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click();
cy.get('.euiComboBoxOption__content').eq(0).click();
cy.get('.euiIEFlexWrapFix').eq(2).contains('Treemap').should('exist');
cy.get('#configPanel__treemap_options').contains('Tiling Algorithm').should('exist');
cy.get('[data-test-subj = "comboBoxInput"]').eq(4).click();
cy.get('button[name="Slice Dice"]').click();
querySearch(TEST_QUERIES[7].query, TEST_QUERIES[7].dateRangeDOM);
cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
.type('Tree Map')
.type('{enter}');
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Tree Map');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]')
.click()
.type('This is the description for Tree Map');
cy.get('.euiIEFlexWrapFix').eq(1).contains('Treemap').should('exist');
cy.get('#configPanel__treemap_options').contains('Tiling Algorithm').should('exist');
cy.get('[data-test-subj = "comboBoxInput"]').eq(3).click();
cy.get('button[name="Slice Dice"]').click();
};

export const renderPieChart = () => {
Expand All @@ -104,11 +143,25 @@ export const renderPieChart = () => {
cy.wait(delay);
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Pie chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Pie chart');
cy.get('.euiIEFlexWrapFix').eq(1).contains('Value options').should('exist');
cy.get('[data-test-subj="comboBoxInput"]').eq(1).click();
cy.get('[name="count()"]').eq(0).click();
cy.get('[data-test-subj="comboBoxToggleListButton"]').eq(0).click();
cy.get('[data-test-subj="comboBoxInput"]').eq(2).click();
cy.get('[aria-controls="configPanel__legend"]').contains('Legend').should('exist');
cy.get('#configPanel__legend .euiTitle.euiTitle--xxsmall').eq(0).contains('Show Legend');
cy.get('span[data-text="Show"]').contains('Show').should('exist');
cy.get('#configPanel__legend .euiTitle.euiTitle--xxsmall').eq(1).contains('Position');
cy.get('span[data-text="Right"]').contains('Right').should('exist');
cy.get('#configPanel__legend .euiTitle.euiTitle--xxsmall').eq(2).contains('Legend Size');
cy.get('[aria-controls="configPanel__chartStyles"]').contains('Chart Styles').should('exist');
cy.get('#configPanel__chartStyles .euiTitle.euiTitle--xxsmall').eq(0).contains('Mode').click();
cy.get('#configPanel__chartStyles .euiComboBox__inputWrap.euiComboBox__inputWrap--noWrap.euiComboBox__inputWrap-isClearable').click();
cy.get('.euiComboBoxOption__content').contains('Donut').click();
cy.get('#configPanel__chartStyles .euiTitle.euiTitle--xxsmall').eq(1).contains('Label Size');
cy.get('#configPanel__chartStyles input[type="number"]').click().type('10');
cy.get('#configPanel__chartStyles .euiTitle.euiTitle--xxsmall').eq(2).contains('Color Theme');
cy.get('.euiSuperSelectControl').click();
cy.get('.euiColorPalettePicker__item').eq(1).contains('Single Color').click();
cy.get('.euiFieldText.euiColorPicker__input.euiFieldText--withIcon').click();
cy.get('[aria-label="Select #D36086 as the color"]').click();
cy.get('.visEditorSidebar__controls [data-test-subj="visualizeEditorRenderButton"]').contains('Preview').click();
cy.get('.plot-container.plotly').should('exist');
};

export const renderDataConfig = () => {
Expand Down Expand Up @@ -136,5 +189,29 @@ export const renderDataConfig = () => {
export const renderLineChart = () => {
landOnEventVisualizations();
querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM);
cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
.type('Line')
.type('{enter}');
};

export const renderAddParent = () => {
cy.get(' [data-test-subj="addParentButton"] .euiButton__text').contains('+ Add Parent').click();
cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Parent 1').should('exist');
cy.get('p.euiComboBoxPlaceholder').eq(0).click({ force: true });
cy.get('.euiComboBoxOption__content').eq(0).click();
cy.get(' [data-test-subj="addParentButton"] .euiButton__text').contains('+ Add Parent').click();
cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Parent 2').should('exist');
cy.get('p.euiComboBoxPlaceholder').click({ force: true });
cy.get('.euiComboBoxOption__content').eq(1).click();
cy.get(' [data-test-subj="addParentButton"] .euiButton__text').contains('+ Add Parent').click();
cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Parent 3').should('exist');
cy.get('p.euiComboBoxPlaceholder').click({ force: true });
cy.get('.euiComboBoxOption__content').eq(2).click();
cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Line').type('{enter}');
};

export const renderGaugeChart = () => {
landOnEventVisualizations();
querySearch(TEST_QUERIES[1].query, TEST_QUERIES[1].dateRangeDOM);
cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Gauge').type('{enter}');
};
23 changes: 22 additions & 1 deletion dashboards-observability/common/constants/explorer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export const REDUX_EXPL_SLICE_FIELDS = 'fields';
export const REDUX_EXPL_SLICE_QUERY_TABS = 'queryTabs';
export const REDUX_EXPL_SLICE_VISUALIZATION = 'explorerVisualization';
export const REDUX_EXPL_SLICE_COUNT_DISTRIBUTION = 'countDistributionVisualization';
export const PLOTLY_GAUGE_COLUMN_NUMBER = 5;
export const PLOTLY_GAUGE_COLUMN_NUMBER = 4;
export const APP_ANALYTICS_TAB_ID_REGEX = /application-analytics-tab.+/;
export const DEFAULT_AVAILABILITY_QUERY = 'stats count() by span( timestamp, 1h )';
export const ADD_BUTTON_TEXT = '+ Add color theme';
Expand Down Expand Up @@ -118,6 +118,8 @@ export const AGGREGATION_OPTIONS = [
},
];

// numeric fields type for metrics
export const numericalTypes = ['float', 'double', 'bigint', 'long', 'octet', 'short', 'byte', 'integer'];
// Data table constants
export const GRID_HEADER_COLUMN_MAX_WIDTH = '150px';
export const GRID_PAGE_RANGE_DISPLAY = 5;
Expand All @@ -130,3 +132,22 @@ export const ROW_DENSITIES = [
];

export const HEADER_HEIGHT = 35;

// gauge chart default parameters
export interface DefaultGaugeChartParametersProps {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seems like this is type, not constants. Please move these to /common/types/explorer.ts

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure @mengweieric , Thanks!

GaugeTitleSize: number,
DisplayDefaultGauges: number,
OrientationDefault: string,
TickLength: number,
LegendPlacement: string,
ThresholdsMaxLimit: number
};

export const DefaultGaugeChartParameters: DefaultGaugeChartParametersProps = {
GaugeTitleSize: 14,
DisplayDefaultGauges: 1,
OrientationDefault: 'h',
TickLength: 5,
LegendPlacement: 'center',
ThresholdsMaxLimit: 1
}
Loading