Skip to content

Commit

Permalink
Sprint2 (opensearch-project#47) (opensearch-project#868)
Browse files Browse the repository at this point in the history 
* graph style section UI schema

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/visualizations/charts/lines/line_type.ts

* changes for style mode and interpolation

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/visualizations/charts/lines/line_type.ts

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts

* lineWidth integration for line mode

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/visualizations/charts/lines/line.tsx
#	dashboards-observability/public/components/visualizations/charts/lines/line_type.ts

# Conflicts:
#	dashboards-observability/common/constants/shared.ts
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx

* changes for Legend and Orientation in Line

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx

* point size and Bar Alignment changes

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/visualizations/charts/lines/line.tsx
#	dashboards-observability/public/components/visualizations/charts/lines/line_type.ts

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts

# Conflicts:
#	dashboards-observability/common/constants/shared.ts
#	dashboards-observability/common/types/explorer.ts

* implemented fill opacity for line chart

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/visualizations/charts/lines/line.tsx

# Conflicts:
#	dashboards-observability/public/components/event_analytics/utils/utils.tsx

* changes for line width and fill opacity in bar mode and removed mode from chartOption

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/common/constants/shared.ts

* updated bar mode opacity in line chart

Signed-off-by: rinku-kumar-psl <[email protected]>

* refactored the config chart style code

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts

# Conflicts:
#	dashboards-observability/common/constants/shared.ts
#	dashboards-observability/common/types/explorer.ts

* snapshot updated and code refactored

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/event_analytics/utils/utils.tsx

* type added to new component

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx

* review comments addressed

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/event_analytics/utils/utils.tsx

# Conflicts:
#	dashboards-observability/common/constants/shared.ts

* cypress test case added and resolve button label wraping issue

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/.cypress/integration/1_event_analytics.spec.js
#	dashboards-observability/.cypress/utils/event_constants.js

# Conflicts:
#	dashboards-observability/.cypress/integration/1_event_analytics.spec.js

# Conflicts:
#	dashboards-observability/.cypress/integration/1_event_analytics.spec.js

* multi matrices changes for Line

Signed-off-by: rinku-kumar-psl <[email protected]>

* dimensions and metrics UI changes for time-series

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/common/constants/explorer.ts
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx

* made data config pannel collapsable and initial fields render

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx

* code refactored

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx

* snapshot updated and handled corner cases

Signed-off-by: rinku-kumar-psl <[email protected]>

* code styling fixes and added TODO comment

Signed-off-by: rinku-kumar-psl <[email protected]>

* sequence change for dimensions and metrics

Signed-off-by: Deepak Nevde <[email protected]>

* Sprint1 (opensearch-project#14)

* graph style section UI schema

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/visualizations/charts/lines/line_type.ts

* changes for style mode and interpolation

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/visualizations/charts/lines/line_type.ts

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts

* lineWidth integration for line mode

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/visualizations/charts/lines/line.tsx
#	dashboards-observability/public/components/visualizations/charts/lines/line_type.ts

# Conflicts:
#	dashboards-observability/common/constants/shared.ts
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx

* changes for Legend and Orientation in Line

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx

* point size and Bar Alignment changes

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/visualizations/charts/lines/line.tsx
#	dashboards-observability/public/components/visualizations/charts/lines/line_type.ts

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts

# Conflicts:
#	dashboards-observability/common/constants/shared.ts
#	dashboards-observability/common/types/explorer.ts

* implemented fill opacity for line chart

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/visualizations/charts/lines/line.tsx

# Conflicts:
#	dashboards-observability/public/components/event_analytics/utils/utils.tsx

* changes for line width and fill opacity in bar mode and removed mode from chartOption

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/common/constants/shared.ts

* updated bar mode opacity in line chart

Signed-off-by: rinku-kumar-psl <[email protected]>

* refactored the config chart style code

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts

# Conflicts:
#	dashboards-observability/common/constants/shared.ts
#	dashboards-observability/common/types/explorer.ts

* snapshot updated and code refactored

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/event_analytics/utils/utils.tsx

* type added to new component

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx

* review comments addressed

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/event_analytics/utils/utils.tsx

# Conflicts:
#	dashboards-observability/common/constants/shared.ts

* cypress test case added and resolve button label wraping issue

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/.cypress/integration/1_event_analytics.spec.js
#	dashboards-observability/.cypress/utils/event_constants.js

# Conflicts:
#	dashboards-observability/.cypress/integration/1_event_analytics.spec.js

# Conflicts:
#	dashboards-observability/.cypress/integration/1_event_analytics.spec.js

* multi matrices changes for Line

Signed-off-by: rinku-kumar-psl <[email protected]>

* dimensions and metrics UI changes for time-series

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/common/constants/explorer.ts
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx

* made data config pannel collapsable and initial fields render

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx

* code refactored

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx

* snapshot updated and handled corner cases

Signed-off-by: rinku-kumar-psl <[email protected]>

* code styling fixes and added TODO comment

Signed-off-by: rinku-kumar-psl <[email protected]>

* data config reviewed code added

Signed-off-by: Deepak Nevde <[email protected]>

* Text correction

Signed-off-by: Deepak Nevde <[email protected]>

* Conflicts resolved

Signed-off-by: Deepak Nevde <[email protected]>

* table view: eui table replaced with ag-grid

Signed-off-by: Ramneet Chopra <[email protected]>

* drag-drop issue fixed

Signed-off-by: Ramneet Chopra <[email protected]>

* test case of data_table updated

Signed-off-by: Ramneet Chopra <[email protected]>

* feedback comments resolved

Signed-off-by: Ramneet Chopra <[email protected]>

* grid height issue:fixed

Signed-off-by: Ramneet Chopra <[email protected]>

* column height, value getter for type double

Signed-off-by: Ramneet Chopra <[email protected]>

* data_table elements moved to separate

Signed-off-by: Ramneet Chopra <[email protected]>

* footer components

Signed-off-by: Ramneet Chopra <[email protected]>

* cypress test cases for table view

Signed-off-by: Ramneet Chopra <[email protected]>

* enhancement for heatmap with new UI

Signed-off-by: Shankha Das <[email protected]>

* line chart test cases

Signed-off-by: Shankha Das <[email protected]>

* console logs removed

Signed-off-by: Shankha Das <[email protected]>

* updated value options ui for treemap

Signed-off-by: Mrunal Zambre <[email protected]>

* removed console

Signed-off-by: Mrunal Zambre <[email protected]>

* Fixes of sprint1 for new ui implementation (opensearch-project#12)

Signed-off-by: ruchika-narang <[email protected]>

Co-authored-by: rinku-kumar-psl <[email protected]>
Co-authored-by: Deepak Nevde <[email protected]>
Co-authored-by: Ramneet Chopra <[email protected]>
Co-authored-by: Shankha Das <[email protected]>
Co-authored-by: Mrunal Zambre <[email protected]>
Co-authored-by: ruchika-narang <[email protected]>

* Latest code added

Signed-off-by: Deepak Nevde <[email protected]>

* Collapsapable button position change to top

Signed-off-by: Deepak Nevde <[email protected]>

* table view: eui table replaced with ag-grid

Signed-off-by: Ramneet Chopra <[email protected]>

* drag-drop issue fixed

Signed-off-by: Ramneet Chopra <[email protected]>

* test case of data_table updated

Signed-off-by: Ramneet Chopra <[email protected]>

* feedback comments resolved

Signed-off-by: Ramneet Chopra <[email protected]>

* grid height issue:fixed

Signed-off-by: Ramneet Chopra <[email protected]>

* column height, value getter for type double

Signed-off-by: Ramneet Chopra <[email protected]>

* data_table elements moved to separate

Signed-off-by: Ramneet Chopra <[email protected]>

* footer components

Signed-off-by: Ramneet Chopra <[email protected]>

* cypress test cases for table view

Signed-off-by: Ramneet Chopra <[email protected]>

* data config reviewed code added

Signed-off-by: Deepak Nevde <[email protected]>

* Text correction

Signed-off-by: Deepak Nevde <[email protected]>

* Conflicts resolved

Signed-off-by: Deepak Nevde <[email protected]>

* enhancement for heatmap with new UI

Signed-off-by: Shankha Das <[email protected]>

* line chart test cases

Signed-off-by: Shankha Das <[email protected]>

* console logs removed

Signed-off-by: Shankha Das <[email protected]>

* updated value options ui for treemap

Signed-off-by: Mrunal Zambre <[email protected]>

* removed console

Signed-off-by: Mrunal Zambre <[email protected]>

* sprint1-visualization-fixes.

Signed-off-by: abasatwar <[email protected]>

* added colorscale config options for treemap

Signed-off-by: Mrunal Zambre <[email protected]>

* code review comment resolved

Signed-off-by: Deepak Nevde <[email protected]>

* added config option to sort treemap sectors

Signed-off-by: Mrunal Zambre <[email protected]>

* changes to resctct duplicte options

Signed-off-by: rinku-kumar-psl <[email protected]>

* Updated and Added test scripts for Treemap chart along with data config and worked on reassembling the event_constants.js file

Signed-off-by: Pratibha Pandey <[email protected]>

* Removed unwanted code

Signed-off-by: Pratibha Pandey <[email protected]>

* implementation of histogram with new UI

Signed-off-by: ruchika-narang <[email protected]>

* gauge chart added

Signed-off-by: Ramneet Chopra <[email protected]>

* Pie chart enhancement, multi labels change

Signed-off-by: Deepak Nevde <[email protected]>

* threshold text fix

Signed-off-by: Ramneet Chopra <[email protected]>

* cypress test cases added

Signed-off-by: Ramneet Chopra <[email protected]>

* Code review comment resolved

Signed-off-by: Deepak Nevde <[email protected]>

* reset fixed, unused imports removed, PR checks fixed

Signed-off-by: Ramneet Chopra <[email protected]>

* single timestamp dimension, no data dsiplay, label rotate, label/legend size

Signed-off-by: Ramneet Chopra <[email protected]>

* layout fixed for primary y axis

Signed-off-by: Ramneet Chopra <[email protected]>

* change of screen size of no data found and visualization

Signed-off-by: Shankha Das <[email protected]>

* changes for restriction of duplicate fields on Data Config and only numeric field selection to metrics

Signed-off-by: rinku-kumar-psl <[email protected]>

* line label replaced with time series

Signed-off-by: Ramneet Chopra <[email protected]>

* snapshot tests

Signed-off-by: Ramneet Chopra <[email protected]>

* Removed unwanted spaces

Signed-off-by: Pratibha Pandey <[email protected]>

* initialize default params for DimensonComponent and formatted the codes

Signed-off-by: rinku-kumar-psl <[email protected]>

* pr review feedback

Signed-off-by: Ramneet Chopra <[email protected]>

* updated preview functionality for charts

Signed-off-by: Mrunal Zambre <[email protected]>

* updated snapshots

Signed-off-by: Mrunal Zambre <[email protected]>

* Worked on review comments

Signed-off-by: Pratibha Pandey <[email protected]>

* changed variable names

Signed-off-by: Mrunal Zambre <[email protected]>

* code review changes done

Signed-off-by: rinku-kumar-psl <[email protected]>

* added empty line at end.

Signed-off-by: abasatwar <[email protected]>

* updated variable names

Signed-off-by: Mrunal Zambre <[email protected]>

* updated snapshots

Signed-off-by: Mrunal Zambre <[email protected]>

* Added pie chart test cases

Signed-off-by: Pratibha Pandey <[email protected]>

* updated snapshots

Signed-off-by: ruchika-narang <[email protected]>

* Removed consoles

Signed-off-by: ruchika-narang <[email protected]>

* Worked on conflicts

Signed-off-by: Pratibha Pandey <[email protected]>

* color selector added

Signed-off-by: Ramneet Chopra <[email protected]>

* updated snapshots

Signed-off-by: ruchika-narang <[email protected]>

* UI updated as recommended

Signed-off-by: Shankha Das <[email protected]>

* Added legend to heatmap

Signed-off-by: ruchika-narang <[email protected]>

* data_config_panel_item timeseries code removed

Signed-off-by: Ramneet Chopra <[email protected]>

* bar chart with multiple dimension and metrics, timestamp

Signed-off-by: abasatwar <[email protected]>

* limit no. of gauge option added

Signed-off-by: Ramneet Chopra <[email protected]>

* threshold limit added, gauge default parameters moved to constants/explorer

Signed-off-by: Ramneet Chopra <[email protected]>

* legend placement added

Signed-off-by: Ramneet Chopra <[email protected]>

* yarn test

Signed-off-by: Ramneet Chopra <[email protected]>

* snapshot updated

Signed-off-by: abasatwar <[email protected]>

* snapshot updated

Signed-off-by: abasatwar <[email protected]>

* Resolving issues after removal of preview functionality

Signed-off-by: ruchika-narang <[email protected]>

* updated snapshots

Signed-off-by: ruchika-narang <[email protected]>

* Updated snapshots

Signed-off-by: ruchika-narang <[email protected]>

* changes for default timestamp data for time-series and corner cases

Signed-off-by: rinku-kumar-psl <[email protected]>

* code review comment addressed

Signed-off-by: rinku-kumar-psl <[email protected]>

* pr feedback

Signed-off-by: Ramneet Chopra <[email protected]>

* dimensions, metrics length checks refined

Signed-off-by: Ramneet Chopra <[email protected]>

* updated as per review comments

Signed-off-by: abasatwar <[email protected]>

* fixing of data config corner cases

Signed-off-by: rinku-kumar-psl <[email protected]>

* snapshot updated

Signed-off-by: abasatwar <[email protected]>

* pr feedback

Signed-off-by: Ramneet Chopra <[email protected]>

Co-authored-by: rinku-kumar-psl <[email protected]>
Co-authored-by: Deepak Nevde <[email protected]>
Co-authored-by: Ramneet Chopra <[email protected]>
Co-authored-by: Shankha Das <[email protected]>
Co-authored-by: Mrunal Zambre <[email protected]>
Co-authored-by: ruchika-narang <[email protected]>
Co-authored-by: Pratibha Pandey <[email protected]>
Co-authored-by: ruchika-narang <[email protected]>
Co-authored-by: Shankha Das <[email protected]>

Co-authored-by: rinku-kumar-psl <[email protected]>
Co-authored-by: Deepak Nevde <[email protected]>
Co-authored-by: Ramneet Chopra <[email protected]>
Co-authored-by: Shankha Das <[email protected]>
Co-authored-by: Mrunal Zambre <[email protected]>
Co-authored-by: ruchika-narang <[email protected]>
Co-authored-by: Pratibha Pandey <[email protected]>
Co-authored-by: ruchika-narang <[email protected]>
Co-authored-by: Shankha Das <[email protected]>
  • Loading branch information
@abasatwar @rinku-kumar-psl
@deepaknevdepsl @ramneet-persistent @mrunal-z @ruchika-narang @pratibhapandey16 @shankha-das
10 people authored Jul 26, 2022
1 parent dd298c2 commit 1a95ba5
Show file tree
Hide file tree
Showing 54 changed files with 7,671 additions and 7,466 deletions.
181 changes: 180 additions & 1 deletion dashboards-observability/.cypress/integration/1_event_analytics.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,29 @@ import {
renderTreeMapchart,
renderPieChart,
renderLineChartForDataConfig,
DataConfigLineChart
renderDataConfig,
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
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
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 {
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

0 comments on commit 1a95ba5

Please sign in to comment.