Feature/error toast on invalid valueoption selection 666 (#736)

* rendered default axes selected and added error toasts on Save and Apply click if invalid value option selected Signed-off-by: rinku-kumar-psl <[email protected]> * Cypress changes for error toasts on invalid value options selected Signed-off-by: rinku-kumar-psl <[email protected]> * added constant VIZ_CONTAIN_XY_AXIS for x, y value axis Signed-off-by: rinku-kumar-psl <[email protected]>
opensearch-project · Jun 8, 2022 · 4fa6e82 · 4fa6e82
1 parent 7bdeec5
commit 4fa6e82
Show file tree

Hide file tree

Showing 11 changed files with 188 additions and 7 deletions.
diff --git a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js
@@ -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');
+  });
 });
diff --git a/dashboards-observability/common/constants/explorer.ts b/dashboards-observability/common/constants/explorer.ts
@@ -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 =
@@ -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];
diff --git a/dashboards-observability/common/constants/shared.ts b/dashboards-observability/common/constants/shared.ts
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { IField } from '../../common/types/explorer';
 import CSS from 'csstype';
 
 // Client route
@@ -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 = [

diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts
@@ -31,6 +31,7 @@ export interface IQueryTab {
 export interface IField {
   name: string;
   type: string;
+  label?: string;
 }
 
 export interface ITabQueryResults {

diff --git a/...ility/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/...ility/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
@@ -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",
               },
@@ -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",
                 },
@@ -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",
                   },
@@ -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",
               },
@@ -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",
                 },
@@ -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",
                   },
@@ -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",
               },
@@ -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",
                 },
@@ -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",
                   },
@@ -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",
               },
@@ -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",
                 },
@@ -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",
                   },

diff --git a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx
@@ -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('');
@@ -727,6 +728,9 @@ export const Explorer = ({
     }
   };
 
+  const changeIsValidConfigOptionState = (isValidConfig: Boolean) =>
+  setIsValidDataConfigOptionSelected(isValidConfig);
+
   const getExplorerVis = () => {
     return (
       <ExplorerVisualizations
@@ -741,6 +745,7 @@ export const Explorer = ({
         visualizations={visualizations}
         handleOverrideTimestamp={handleOverrideTimestamp}
         callback={callbackForConfig}
+        changeIsValidConfigOptionState={changeIsValidConfigOptionState}
       />
     );
   };
@@ -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);

diff --git a/...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
@@ -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 {
@@ -2541,6 +2556,11 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                         }
                       }
+                      vizState={
+                        Object {
+                          "valueOptions": Object {},
+                        }
+                      }
                     />,
                     "id": "data-panel",
                     "name": "Data",
@@ -2962,6 +2982,11 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             },
                           }
                         }
+                        vizState={
+                          Object {
+                            "valueOptions": Object {},
+                          }
+                        }
                       />,
                       "id": "data-panel",
                       "name": "Data",
@@ -3830,6 +3855,11 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                         }
                       }
+                      vizState={
+                        Object {
+                          "valueOptions": Object {},
+                        }
+                      }
                     >
                       <div
                         className="visEditorSidebar__config"