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

Feature/new configs 670 #3

Closed
wants to merge 13 commits into from
Closed

Feature/new configs 670 #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
42d0679
graph style section UI schema
rinku-kumar-psl May 18, 2022
3b3abea
changes for style mode and interpolation
rinku-kumar-psl May 18, 2022
2105e8e
lineWidth integration for line mode
rinku-kumar-psl May 18, 2022
68fb02b
changes for Legend and Orientation in Line
rinku-kumar-psl May 11, 2022
b2758a9
point size and Bar Alignment changes
rinku-kumar-psl May 18, 2022
6cf80f8
implemented fill opacity for line chart
rinku-kumar-psl May 18, 2022
9e41e21
changes for line width and fill opacity in bar mode and removed mode …
rinku-kumar-psl May 12, 2022
07d1243
updated bar mode opacity in line chart
rinku-kumar-psl May 13, 2022
f678627
refactored the config chart style code
rinku-kumar-psl May 17, 2022
2c47319
snapshot updated and code refactored
rinku-kumar-psl May 18, 2022
7efa6ff
type added to new component
rinku-kumar-psl May 19, 2022
b101c83
review comments addressed
rinku-kumar-psl May 23, 2022
c0f9783
cypress test case added and resolve button label wraping issue
rinku-kumar-psl May 24, 2022
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
197 changes: 194 additions & 3 deletions 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 @@ -305,7 +305,7 @@ describe('Override timestamp for an index', () => {
cy.wait(delay);

cy.get('[data-attr-field="utc_time"] [data-test-subj="eventFields__default-timestamp-mark"')
.contains('Default Timestamp').should('exist');
.contains('Default Timestamp').should('exist');
cy.get('[data-attr-field="timestamp"] [data-test-subj="eventFields__default-timestamp-mark"').should('not.exist');
});
});
Expand Down Expand Up @@ -426,8 +426,8 @@ describe('Live tail stop automatically', () => {
cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
.find('button.euiTab')
.should('have.length', initialLength + 1);
});
});
});

it('Click to switch to another tab', () => {
cy.get('[data-test-subj="eventExplorer__addNewTab"]').click();
Expand Down Expand Up @@ -615,4 +615,195 @@ describe('Renders data view', () => {
cy.get('[data-test-subj="workspace__dataTableViewSwitch"]').click();
cy.get('[data-test-subj="workspace__dataTable"]').should('not.exist');
});
});
});

describe('Render line chart for value options ', () => {
beforeEach(() => {
landOnEventVisualizations();
querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM);
cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').click();
cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Line').type('{enter}')
});

it('Render line chart and add value Options ', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with value adding Parameter');
cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(1).click();
cy.get('.euiComboBoxOption__content').eq(0).click();
cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(2).click();
cy.get('.euiComboBoxOption__content').eq(0).click();
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
cy.get('.nsewdrag.drag.cursor-pointer').should('be.visible')
});
});

describe('Render line chart for Legend ', () => {
beforeEach(() => {
cy.wait(2000);
landOnEventVisualizations();
querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM);
cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').click();
cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Line').click();
});

it('Render line chart and verify legends for Show and Hidden', () => {
cy.get('[data-text="Show"]').should('have.text', 'Show');
cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked');
cy.get('[data-text="Hidden"]').should('have.text', 'Hidden').click();
cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
cy.wait(delay);
cy.get('.nsewdrag.drag.cursor-pointer').should('be.visible')
.and(chart => {
expect(chart.height()).to.be.greaterThan(200)
})
});

it('Render line chart and verify legends for Position Right and Bottom', () => {
cy.get('[data-text="Right"]').should('have.text', 'Right');
cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked');
cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click();
cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
})
});

describe('Render line chart for Chart Styles ', () => {
beforeEach(() => {
landOnEventVisualizations();
querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM);
cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').click();
cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Line').type('{enter}')
});

it('Render line chart and Verify Chart Style of Lines Mode with Smooth Interpolation ', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Smooth Interpolation');
cy.get('[data-text="Lines"]').should('have.text', 'Lines');
cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked');
cy.get('[data-text="Smooth"]').should('have.text', 'Smooth');
cy.get('[data-text="Smooth"] [data-test-subj="spline"]').should('have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Lines Mode with Smooth Interpolation with higher Line width and Fill Opacity ', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Smooth Interpolation');
cy.get('[data-text="Lines"]').should('have.text', 'Lines');
cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked');
cy.get('[data-text="Smooth"]').should('have.text', 'Smooth');
cy.get('[data-text="Smooth"] [data-test-subj="spline"]').should('have.attr', 'checked');
cy.get('input[type="range"]').eq(0)
.then($el => $el[0].stepUp(4))
.trigger('change')
cy.get('.euiRangeSlider').eq(0).should('have.value', 6)
cy.get('input[type="range"]').eq(1)
.then($el => $el[0].stepUp(40))
.trigger('change')
cy.get('.euiRangeSlider').eq(1).should('have.value', 80)
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Lines Mode with Linear Interpolation ', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Linear Interpolation');
cy.get('[data-text="Lines"]').should('have.text', 'Lines');
cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked');
cy.get('[data-text="Linear"]').should('have.text', 'Linear').click();
cy.get('[data-text="Linear"]').should('have.text', 'Linear');
cy.get('[data-text="Linear"] [data-test-subj="linear"]').should('not.have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Lines Mode with Step before Interpolation ', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Step before Interpolation');
cy.get('[data-text="Lines"]').should('have.text', 'Lines');
cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked');
cy.get('[data-text="Step before"]').should('have.text', 'Step before').click();
cy.get('[data-text="Step before"] [data-test-subj="Step before"]').should('not.have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Lines Mode with Step after Interpolation ', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Step after Interpolation');
cy.get('[data-text="Lines"]').should('have.text', 'Lines');
cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked');
cy.get('[data-text="Step after"]').should('have.text', 'Step after').click();
cy.get('[data-text="Step after"] [data-test-subj="Step after"]').should('not.have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Bars Mode with Center bar alignment ', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Bars');
cy.get('[data-text="Bars"]').should('have.text', 'Bars').click();
cy.get('[data-text="Center"] [data-test-subj="center"]').should('have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Bars Mode with Before bar alignment ', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Bars');
cy.get('[data-text="Bars"]').should('have.text', 'Bars').click();
cy.get('[data-text="Before"] [data-test-subj="before"]').should('not.have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Bars Mode with After bar alignment ', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Bars');
cy.get('[data-text="Bars"]').should('have.text', 'Bars').click();
cy.get('[data-text="After"] [data-test-subj="after"]').should('not.have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Points Mode', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Points');
cy.get('[data-text="Points"]').should('have.text', 'Points').click();
cy.get('[data-text="Points"] [data-test-subj="markers"]').should('not.have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Points Mode with larger Point size', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Points');
cy.get('[data-text="Points"]').should('have.text', 'Points').click();
cy.get('[data-text="Points"] [data-test-subj="markers"]').should('not.have.attr', 'checked');
cy.get('input[type="range"]')
.then($el => $el[0].stepUp(30))
.trigger('change')
cy.get('.euiRangeSlider').should('have.value', 35)
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Lines+Points Mode', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Lines and Points');
cy.get('[data-text="Lines + Points"]').should('have.text', 'Lines + Points').click();
cy.get('[data-text="Lines + Points"] [data-test-subj="lines+markers"]').should('not.have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Lines+Points Mode with Line Width, Fill Opacity and Point Size', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Lines and Points');
cy.get('[data-text="Lines + Points"]').should('have.text', 'Lines + Points').click();
cy.get('[data-text="Lines + Points"] [data-test-subj="lines+markers"]').should('not.have.attr', 'checked');
cy.get('input[type="range"]').eq(0)
.then($el => $el[0].stepUp(4))
.trigger('change')
cy.get('.euiRangeSlider').eq(0).should('have.value', 6)
cy.get('input[type="range"]').eq(1)
.then($el => $el[0].stepUp(40))
.trigger('change')
cy.get('.euiRangeSlider').eq(1).should('have.value', 80)
cy.get('input[type="range"]').eq(2)
.then($el => $el[0].stepUp(15))
.trigger('change')
cy.get('.euiRangeSlider').eq(2).should('have.value', 20)
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});
});
4 changes: 4 additions & 0 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 @@ -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_logs | where response="503" or response="404" | stats count() as ip_count, sum(bytes) as sum_bytes by host, response | rename response as resp_code | sort - ip_count, + sum_bytes | eval per_ip_bytes=sum_bytes/ip_count, double_per_ip_bytes = 2 * per_ip_bytes',
dateRangeDOM: YEAR_TO_DATE_DOM_ID
},
];

export const TESTING_PANEL = 'Mock Testing Panels';
Expand Down
24 changes: 23 additions & 1 deletion dashboards-observability/common/constants/shared.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,4 +124,26 @@ export const LIVE_OPTIONS = [
},
];

export const LIVE_END_TIME ='now';
export const LIVE_END_TIME ='now';

export interface DefaultChartStylesProps {
DefaultMode: string,
Interpolation: string,
LineWidth: number,
FillOpacity: number,
MarkerSize: number,
ShowLegend: string,
LegendPosition: string
};

export const DefaultChartStyles: DefaultChartStylesProps = {
DefaultMode: 'lines',
Interpolation: 'spline',
LineWidth: 2,
FillOpacity: 40,
MarkerSize: 5,
ShowLegend: 'show',
LegendPosition: 'v'
}

export const FILLOPACITY_DIV_FACTOR = 200;
4 changes: 3 additions & 1 deletion dashboards-observability/common/types/explorer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,9 +186,11 @@ export interface IConfigPanelOptions {
export interface IConfigPanelOptionSection {
name: string;
component: null;
mapTo: 'mode';
mapTo: 'mode' | string;
props?: any;
isSingleSelection?: boolean;
defaultState?: number;
eleType?: string;
}

export interface IVisualizationTypeDefination {
Expand Down
Loading