Skip to content

Commit

Permalink
implemented treemap config options
Browse files Browse the repository at this point in the history
Signed-off-by: Mrunal Zambre <[email protected]>
  • Loading branch information
mrunal-z committed May 20, 2022
1 parent 7bd2d7f commit b09676a
Show file tree
Hide file tree
Showing 11 changed files with 736 additions and 60 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,27 +17,27 @@ import {
landOnEventHome,
landOnEventExplorer,
landOnEventVisualizations,
landOnPanels
landOnPanels,
renderTreeMapchart
} from '../utils/event_constants';
import { supressResizeObserverIssue } from '../utils/constants';

const vis_name_sub_string = Math.floor(Math.random() * 100);
const saveVisulizationAndVerify = () => {
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 visulization_Gauge` + vis_name_sub_string);
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 visulization_Gauge` + vis_name_sub_string).type('{enter}');
cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input').eq(0).type(`Test visualization` + vis_name_sub_string).type('{enter}');
cy.get('.euiBasicTable .euiTableCellContent button').eq(0).click();
}
const deleteVisulaization = () => {
const deleteVisualization = () => {
cy.get('a[href = "#/event_analytics"]').click();
cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input').eq(0).type(`Test visulization_Gauge`).type('{enter}');
cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input').eq(0).type(`Test visualization`).type('{enter}');
cy.get('input[data-test-subj = "checkboxSelectAll"]').click();
cy.get('.euiButtonContent.euiButtonContent--iconRight.euiButton__content').click();
cy.get('.euiContextMenuItem .euiContextMenuItem__text').eq(0).click();
Expand Down Expand Up @@ -647,31 +647,13 @@ describe('Renders Tree Map', () => {
});

it('Renders Tree Map', () => {
querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].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('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(0).click();
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(3).click();
cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click();
cy.get('.euiComboBoxOption__content').eq(1).click();
renderTreeMapchart();
cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click();
cy.get('path.surface').should('have.length', 176);
});

it('Renders Tree Map, add value parameters and verify Reset button click is working', () => {
querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM);
cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Tree Map').type('{enter}');
cy.wait(delay);
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('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(0).click();
cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(1).click();
cy.get('.euiComboBoxOption__content').eq(0).click();
cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(2).click();
cy.get('.euiComboBoxOption__content').eq(0).click();
renderTreeMapchart();
cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click();
cy.get('[data-test-subj="visualizeEditorResetButton"]').click();
cy.get('#configPanel__panelOptions .euiFieldText').should('have.value', '');
Expand All @@ -681,24 +663,67 @@ describe('Renders Tree Map', () => {
cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(3).should('have.value', '');
});

it('Renders Tree Map and Save Visulization', () => {
querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM);
it('Renders Tree Map, Save and Delete Visualization', () => {
renderTreeMapchart();
cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click();
saveVisualizationAndVerify();
cy.wait(delay * 4);
deleteVisualization();
});

it('Render Tree Map chart and verify color theme under Chart styles options', () =>{
renderTreeMapchart();
cy.get('.euiTitle.euiTitle--xxsmall').contains('Color Theme').should('exist');
cy.get('.euiSuperSelectControl').contains('Default').click();
cy.get('.euiContextMenuItem__text .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('.euiButton__text').contains('Preview').should('exist').click();
cy.get('path[style*="rgb(29, 30, 36)"]').eq(0).should('exist');
cy.get('.euiSuperSelectControl').click();
cy.get('.euiColorPalettePicker__item').eq(7).contains('Red-Blue').click();
cy.get('.euiButton__text').contains('Preview').should('exist').click();
cy.get('path[style*="rgb(68, 68, 68)"]').eq(0).should('exist');
});

it('Traverse between root and parent node in Tree Map chart', () => {
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('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(0).click();
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(3).click();
cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click();
cy.get('.euiComboBoxOption__content').eq(1).click();
cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click();
saveVisulizationAndVerify();
cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click();
cy.get('.euiComboBoxOption__content').eq(0).click();
cy.wait(delay);
cy.get('.euiSuperSelectControl').click();
cy.get('.euiColorPalettePicker__item').eq(7).contains('Red-Blue').click();
cy.get('.euiButton__text').contains('Preview').should('exist').click();
cy.get('.slicetext[data-unformatted="US"]').click({force:true});
cy.wait(delay);
cy.get('.slicetext[data-unformatted*="Cleveland"]').click({force:true});
cy.get('text.slicetext').contains('100% of entry').should('exist');
cy.get('.pathbar.cursor-pointer .slicetext[data-unformatted="US"]').click({force:true});
cy.wait(delay);
cy.get('.pathbar.cursor-pointer .slicetext[data-unformatted=" "]').click({force:true});
});


it('Delete All the Random Created Visulization Gauge Chart', () => {
deleteVisulaization();
it('"No results found" message when user fails to select proper fields', () =>{
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('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(0).click();
cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click();
cy.get('.euiComboBoxOption__content').eq(1).click();
cy.wait(delay);
cy.get('.euiSuperSelectControl').click();
cy.get('.euiColorPalettePicker__item').eq(7).contains('Red-Blue').click();
cy.get('.euiButton__text').contains('Preview').should('exist').click();
cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist');
});
});

23 changes: 22 additions & 1 deletion dashboards-observability/.cypress/utils/event_constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ export const TEST_QUERIES = [
query: 'source = opensearch_dashboards_sample_data_logs | stats count(), avg(bytes) by host, tags',
dateRangeDOM: YEAR_TO_DATE_DOM_ID
},
{
query: 'source=opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by DestCountry, DestCityName',
dateRangeDOM: YEAR_TO_DATE_DOM_ID
},
];

export const TESTING_PANEL = 'Mock Testing Panels';
Expand Down Expand Up @@ -70,4 +74,21 @@ export const landOnPanels = () => {
`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels`
);
cy.wait(delay);
};
};

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();
};
162 changes: 162 additions & 0 deletions dashboards-observability/common/constants/colors.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import { colorPalette } from '@elastic/eui';

export const BLUES_PALETTE = {
name: 'Blues',
label: 'Blues',
colors: [
'rgb(5,10,172)',
'rgb(40,60,190)',
'rgb(70,100,245)',
'rgb(90,120,245)',
'rgb(106,137,247)',
'rgb(220,220,220)',
],
};

export const REDS_PALETTE = {
name: 'Reds',
label: 'Reds',
colors: ['rgb(220,220,220)', 'rgb(245,195,157)', 'rgb(245,160,105)', 'rgb(178,10,28)'],
};

export const GREENS_PALETTE = {
name: 'Greens',
label: 'Greens',
colors: [
'rgb(0,68,27)',
'rgb(0,109,44)',
'rgb(35,139,69)',
'rgb(65,171,93)',
'rgb(116,196,118)',
'rgb(161,217,155)',
'rgb(199,233,192)',
'rgb(229,245,224)',
'rgb(247,252,245)',
],
};

export const GREYS_PALETTE = {
name: 'Greys',
label: 'Greys',
colors: ['rgb(0,0,0)', 'rgb(255,255,255)'],
};

export const BLUERED_PALETTE = {
name: 'Bluered',
label: 'Blue-Red',
colors: ['rgb(0,0,255)', 'rgb(255,0,0)'],
};

export const RdBu_PALETTE = {
name: 'RdBu',
label: 'Red-Blue',
colors: [
'rgb(5,10,172)',
'rgb(106,137,247)',
'rgb(190,190,190)',
'rgb(220,170,132)',
'rgb(230,145,90)',
'rgb(178,10,28)',
],
};

export const YlOrRd_PALETTE = {
name: 'YlOrRd',
label: 'Yellow-Orange-Red',
colors: [
'rgb(128,0,38)',
'rgb(189,0,38)',
'rgb(227,26,28)',
'rgb(252,78,42)',
'rgb(253,141,60)',
'rgb(254,178,76)',
'rgb(254,217,118)',
'rgb(255,237,160)',
'rgb(255,255,204)',
],
};

export const YlGnBu_PALETTE = {
name: 'YlGnBu',
label: 'Yellow-Green-Blue',
colors: [
'rgb(8,29,88)',
'rgb(37,52,148)',
'rgb(34,94,168)',
'rgb(29,145,192)',
'rgb(65,182,196)',
'rgb(127,205,187)',
'rgb(199,233,180)',
'rgb(237,248,217)',
'rgb(255,255,217)',
],
};

export const DEFAULT_PALETTE = 'default';
export const SINGLE_COLOR_PALETTE = 'singleColor';

export const TREEMAP_PALETTES = [
{
value: DEFAULT_PALETTE,
title: 'Default',
type: 'text',
},
{
value: SINGLE_COLOR_PALETTE,
title: 'Single Color',
type: 'text',
},
{
value: BLUES_PALETTE.name,
title: BLUES_PALETTE.label,
palette: colorPalette(BLUES_PALETTE.colors, 20),
type: 'gradient',
},
{
value: REDS_PALETTE.name,
title: REDS_PALETTE.label,
palette: colorPalette(REDS_PALETTE.colors, 20),
type: 'gradient',
},
{
value: GREENS_PALETTE.name,
title: GREENS_PALETTE.label,
palette: colorPalette(GREENS_PALETTE.colors, 20),
type: 'gradient',
},
{
value: GREYS_PALETTE.name,
title: GREYS_PALETTE.label,
palette: colorPalette(GREYS_PALETTE.colors, 20),
type: 'gradient',
},
{
value: BLUERED_PALETTE.name,
title: BLUERED_PALETTE.label,
palette: colorPalette(BLUERED_PALETTE.colors, 20),
type: 'gradient',
},
{
value: RdBu_PALETTE.name,
title: RdBu_PALETTE.label,
palette: colorPalette(RdBu_PALETTE.colors, 20, true),
type: 'gradient',
},
{
value: YlOrRd_PALETTE.name,
title: YlOrRd_PALETTE.label,
palette: colorPalette(YlOrRd_PALETTE.colors, 20),
type: 'gradient',
},
{
value: YlGnBu_PALETTE.name,
title: YlGnBu_PALETTE.label,
palette: colorPalette(YlGnBu_PALETTE.colors, 20),
type: 'gradient',
},
];
Loading

0 comments on commit b09676a

Please sign in to comment.