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/error toast on invalid valueoption selection 666 #736

Merged
merged 3 commits into from
Jun 8, 2022
Merged

Feature/error toast on invalid valueoption selection 666 #736

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2cd6059
rendered default axes selected and added error toasts on Save and App…
rinku-kumar-psl May 13, 2022
b6f6105
Cypress changes for error toasts on invalid value options selected
rinku-kumar-psl May 13, 2022
29b83ee
added constant VIZ_CONTAIN_XY_AXIS for x, y value axis
rinku-kumar-psl May 17, 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
44 changes: 44 additions & 0 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 @@ -615,4 +615,48 @@ describe('Renders data view', () => {
cy.get('[data-test-subj="workspace__dataTableViewSwitch"]').click();
cy.get('[data-test-subj="workspace__dataTable"]').should('not.exist');
});
});

describe('Renders chart and verify Toast message if X-axis and Y-axis values are empty', () => {
beforeEach(() => {
landOnEventVisualizations();
});

it('Renders chart, clear X-axis and Y-axis value and click on Apply button, Toast message should display with error message', () => {
querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM);
cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
.type('Bar')
.type('{enter}');
cy.wait(delay);
cy.get('#configPanel__value_options [data-test-subj="comboBoxClearButton"]').eq(0).click({force:true});
cy.get('#configPanel__value_options [data-test-subj="comboBoxToggleListButton"]').eq(0).click();
cy.wait(delay)
cy.get('#configPanel__value_options [data-test-subj="comboBoxClearButton"]').click({multiple:true});
cy.get('#configPanel__value_options [data-test-subj="comboBoxToggleListButton"]').eq(1).click();
cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').eq(0).should('have.value', '');
cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').eq(1).should('have.value', '');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
cy.get('[data-test-subj="euiToastHeader"]').contains('Invalid value options configuration selected.').should('exist');
});

it('Renders chart, clear X-axis and Y-axis value and try to save visulization, Toast message should display with error message', () => {
querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM);
cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
.type('Bar')
.type('{enter}');
cy.wait(delay);
cy.get('#configPanel__value_options [data-test-subj="comboBoxClearButton"]').eq(0).click({force:true});
cy.get('#configPanel__value_options [data-test-subj="comboBoxToggleListButton"]').eq(0).click();
cy.wait(delay)
cy.get('#configPanel__value_options [data-test-subj="comboBoxClearButton"]').click({multiple:true});
cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').eq(0).should('have.value', '');
cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').eq(1).should('have.value', '');
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_`);
cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click();
cy.get('[data-test-subj="euiToastHeader"]').contains('Invalid value options configuration selected.').should('exist');
});
});
3 changes: 3 additions & 0 deletions dashboards-observability/common/constants/explorer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* SPDX-License-Identifier: Apache-2.0
*/

import { visChartTypes } from "./shared";
export const EVENT_ANALYTICS_DOCUMENTATION_URL =
'https://opensearch.org/docs/latest/observability-plugin/event-analytics/';
export const OPEN_TELEMETRY_LOG_CORRELATION_LINK =
Expand Down Expand Up @@ -77,3 +78,5 @@ export const REDUX_EXPL_SLICE_COUNT_DISTRIBUTION = 'countDistributionVisualizati
export const PLOTLY_GAUGE_COLUMN_NUMBER = 5;
export const APP_ANALYTICS_TAB_ID_REGEX = /application-analytics-tab.+/;
export const DEFAULT_AVAILABILITY_QUERY = 'stats count() by span( timestamp, 1h )';

export const VIZ_CONTAIN_XY_AXIS = [visChartTypes.Bar, visChartTypes.Histogram, visChartTypes.Line, visChartTypes.Pie];
26 changes: 25 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 @@ -3,6 +3,7 @@
* SPDX-License-Identifier: Apache-2.0
*/

import { IField } from '../../common/types/explorer';
import CSS from 'csstype';

// Client route
Expand Down Expand Up @@ -71,9 +72,32 @@ export const pageStyles: CSS.Properties = {
maxWidth: '1130px',
};


export enum visChartTypes {
Bar = 'bar',
HorizontalBar = 'horizontal_bar',
Line = 'line',
Pie = 'pie',
HeatMap = 'heatmap',
Text = 'text',
Gauge = 'gauge',
Histogram = 'histogram',
TreeMap = 'tree_map'
}

export interface ValueOptionsAxes {
xaxis ?: IField[];
yaxis ?: IField[];
zaxis ?: IField[];
childField?: IField[];
valueField?: IField[];
series?: IField[];
value?: IField[];
}

export const NUMERICAL_FIELDS = ['short', 'integer', 'long', 'float', 'double'];

export const ENABLED_VIS_TYPES = ['bar', 'horizontal_bar', 'line', 'pie', 'heatmap', 'text'];
export const ENABLED_VIS_TYPES = [visChartTypes.Bar, visChartTypes.HorizontalBar, visChartTypes.Line, visChartTypes.Pie, visChartTypes.HeatMap, visChartTypes.Text];

//Live tail constants
export const LIVE_OPTIONS = [
Expand Down
1 change: 1 addition & 0 deletions dashboards-observability/common/types/explorer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export interface IQueryTab {
export interface IField {
name: string;
type: string;
label?: string;
}

export interface ITabQueryResults {
Expand Down
24 changes: 24 additions & 0 deletions ...ility/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,14 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
"defaultAxes": Object {
"xaxis": Array [
Object {
"label": "Carrier",
"name": "Carrier",
"type": "keyword",
},
],
"yaxis": Array [
Object {
"label": "avg(FlightDelayMin)",
"name": "avg(FlightDelayMin)",
"type": "double",
},
Expand Down Expand Up @@ -224,12 +226,14 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
"defaultAxes": Object {
"xaxis": Array [
Object {
"label": "Carrier",
"name": "Carrier",
"type": "keyword",
},
],
"yaxis": Array [
Object {
"label": "avg(FlightDelayMin)",
"name": "avg(FlightDelayMin)",
"type": "double",
},
Expand Down Expand Up @@ -461,12 +465,14 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
"defaultAxes": Object {
"xaxis": Array [
Object {
"label": "Carrier",
"name": "Carrier",
"type": "keyword",
},
],
"yaxis": Array [
Object {
"label": "avg(FlightDelayMin)",
"name": "avg(FlightDelayMin)",
"type": "double",
},
Expand Down Expand Up @@ -853,12 +859,14 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
"defaultAxes": Object {
"xaxis": Array [
Object {
"label": "Carrier",
"name": "Carrier",
"type": "keyword",
},
],
"yaxis": Array [
Object {
"label": "avg(FlightDelayMin)",
"name": "avg(FlightDelayMin)",
"type": "double",
},
Expand Down Expand Up @@ -1084,12 +1092,14 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
"defaultAxes": Object {
"xaxis": Array [
Object {
"label": "Carrier",
"name": "Carrier",
"type": "keyword",
},
],
"yaxis": Array [
Object {
"label": "avg(FlightDelayMin)",
"name": "avg(FlightDelayMin)",
"type": "double",
},
Expand Down Expand Up @@ -1369,12 +1379,14 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
"defaultAxes": Object {
"xaxis": Array [
Object {
"label": "Carrier",
"name": "Carrier",
"type": "keyword",
},
],
"yaxis": Array [
Object {
"label": "avg(FlightDelayMin)",
"name": "avg(FlightDelayMin)",
"type": "double",
},
Expand Down Expand Up @@ -1788,12 +1800,14 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
"defaultAxes": Object {
"xaxis": Array [
Object {
"label": "Carrier",
"name": "Carrier",
"type": "keyword",
},
],
"yaxis": Array [
Object {
"label": "avg(FlightDelayMin)",
"name": "avg(FlightDelayMin)",
"type": "double",
},
Expand Down Expand Up @@ -1996,12 +2010,14 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
"defaultAxes": Object {
"xaxis": Array [
Object {
"label": "Carrier",
"name": "Carrier",
"type": "keyword",
},
],
"yaxis": Array [
Object {
"label": "avg(FlightDelayMin)",
"name": "avg(FlightDelayMin)",
"type": "double",
},
Expand Down Expand Up @@ -2227,12 +2243,14 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
"defaultAxes": Object {
"xaxis": Array [
Object {
"label": "Carrier",
"name": "Carrier",
"type": "keyword",
},
],
"yaxis": Array [
Object {
"label": "avg(FlightDelayMin)",
"name": "avg(FlightDelayMin)",
"type": "double",
},
Expand Down Expand Up @@ -2613,12 +2631,14 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
"defaultAxes": Object {
"xaxis": Array [
Object {
"label": "span(timestamp,1h)",
"name": "span(timestamp,1h)",
"type": "timestamp",
},
],
"yaxis": Array [
Object {
"label": "count('ip')",
"name": "count('ip')",
"type": "integer",
},
Expand Down Expand Up @@ -2794,12 +2814,14 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
"defaultAxes": Object {
"xaxis": Array [
Object {
"label": "span(timestamp,1h)",
"name": "span(timestamp,1h)",
"type": "timestamp",
},
],
"yaxis": Array [
Object {
"label": "count('ip')",
"name": "count('ip')",
"type": "integer",
},
Expand Down Expand Up @@ -2998,12 +3020,14 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
"defaultAxes": Object {
"xaxis": Array [
Object {
"label": "span(timestamp,1h)",
"name": "span(timestamp,1h)",
"type": "timestamp",
},
],
"yaxis": Array [
Object {
"label": "count('ip')",
"name": "count('ip')",
"type": "integer",
},
Expand Down
9 changes: 9 additions & 0 deletions dashboards-observability/public/components/event_analytics/explorer/explorer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ export const Explorer = ({
const [browserTabFocus, setBrowserTabFocus] = useState(true);
const [liveTimestamp, setLiveTimestamp] = useState(DATE_PICKER_FORMAT);
const [triggerAvailability, setTriggerAvailability] = useState(false);
const [isValidDataConfigOptionSelected, setIsValidDataConfigOptionSelected] = useState<Boolean>(false);

const queryRef = useRef();
const appBasedRef = useRef('');
Expand Down Expand Up @@ -727,6 +728,9 @@ export const Explorer = ({
}
};

const changeIsValidConfigOptionState = (isValidConfig: Boolean) =>
setIsValidDataConfigOptionSelected(isValidConfig);

const getExplorerVis = () => {
return (
<ExplorerVisualizations
Expand All @@ -741,6 +745,7 @@ export const Explorer = ({
visualizations={visualizations}
handleOverrideTimestamp={handleOverrideTimestamp}
callback={callbackForConfig}
changeIsValidConfigOptionState={changeIsValidConfigOptionState}
/>
);
};
Expand Down Expand Up @@ -835,6 +840,10 @@ export const Explorer = ({
setToast('Name field cannot be empty.', 'danger');
return;
}
if (!isValidDataConfigOptionSelected) {
setToast('Invalid value options configuration selected.', 'danger');
return;
}
setIsPanelTextFieldInvalid(false);
if (isEqual(selectedContentTabId, TAB_EVENT_ID)) {
const isTabMatchingSavedType = isEqual(currQuery![SAVED_OBJECT_TYPE], SAVED_QUERY);
Expand Down
30 changes: 30 additions & 0 deletions ...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,21 @@

exports[`Config panel component Renders config panel with visualization data 1`] = `
<ConfigPanel
changeIsValidConfigOptionState={
[MockFunction] {
"calls": Array [
Array [
true,
],
],
"results": Array [
Object {
"type": "return",
"value": undefined,
},
],
}
}
setCurVisId={[MockFunction]}
visualizations={
Object {
Expand Down Expand Up @@ -2541,6 +2556,11 @@ exports[`Config panel component Renders config panel with visualization data 1`]
},
}
}
vizState={
Object {
"valueOptions": Object {},
}
}
/>,
"id": "data-panel",
"name": "Data",
Expand Down Expand Up @@ -2962,6 +2982,11 @@ exports[`Config panel component Renders config panel with visualization data 1`]
},
}
}
vizState={
Object {
"valueOptions": Object {},
}
}
/>,
"id": "data-panel",
"name": "Data",
Expand Down Expand Up @@ -3830,6 +3855,11 @@ exports[`Config panel component Renders config panel with visualization data 1`]
},
}
}
vizState={
Object {
"valueOptions": Object {},
}
}
>
<div
className="visEditorSidebar__config"
Expand Down
Loading