rendered default axes selected and added error toasts on Save and App…

…ly click if invalid value option selected Signed-off-by: rinku-kumar-psl <[email protected]>
opensearch-project · May 13, 2022 · b8f8671 · b8f8671
1 parent 291d17f
commit b8f8671
Show file tree

Hide file tree

Showing 9 changed files with 140 additions and 7 deletions.
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"

diff --git a/...ents/event_analytics/explorer/visualizations/config_panel/__tests__/config_panel.test.tsx b/...ents/event_analytics/explorer/visualizations/config_panel/__tests__/config_panel.test.tsx
@@ -26,6 +26,7 @@ describe('Config panel component', () => {
     const tabId = 'query-panel-1';
     const curVisId = 'bar';
     const pplService = new PPLService(httpClientMock);
+    const mockChangeIsValidConfigOptionState = jest.fn();
 
     const wrapper = mount(
       <TabContext.Provider
@@ -39,7 +40,7 @@ describe('Config panel component', () => {
           pplService: pplService,
         }}
       >
-        <ConfigPanel visualizations={TEST_VISUALIZATIONS_DATA} setCurVisId={setCurVisId} />
+        <ConfigPanel visualizations={TEST_VISUALIZATIONS_DATA} setCurVisId={setCurVisId} changeIsValidConfigOptionState={mockChangeIsValidConfigOptionState} />
       </TabContext.Provider>
     );