Skip to content

Commit

Permalink
implemented treemap config options
Browse files Browse the repository at this point in the history
* Initial commit for treemap visualization

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

* changes to labelField, layout and config

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

* reverted changes of layoutConfig

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

* Cypress TestCase for TreeMap

Signed-off-by: Nidhi Singhai <[email protected]>

* added new line

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

* updated test cases

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

* reverted snapshots

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

* added chart styles and treemap options

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

* Added and updated cypress test cases for Tree Map chart

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

* added default state to tiling algorithm options

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

* Updated treemap chart cypress scripts

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

* fixed conditions and formatted file

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

* updated snapshots

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

Co-authored-by: Nidhi Singhai <[email protected]>
Co-authored-by: Pratibha Pandey <[email protected]>
  • Loading branch information
3 people authored May 20, 2022
1 parent 7bd2d7f commit 7ad0ba4
Showing 11 changed files with 736 additions and 60 deletions.
Original file line number Diff line number Diff line change
@@ -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();
@@ -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', '');
@@ -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
@@ -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';
@@ -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 7ad0ba4

Please sign in to comment.