Add correct erroring in Event Analytics

dashboards-observability/common/types/explorer.ts

@@ -14,11 +14,12 @@ import {
   SELECTED_TIMESTAMP,
   SELECTED_DATE_RANGE
  } from '../constants/explorer';
- import { HttpStart } from '../../../../src/core/public';
+ import { HttpStart, NotificationsStart } from '../../../../src/core/public';
  import SavedObjects from '../../public/services/saved_objects/event_analytics/saved_objects';
  import TimestampUtils from '../../public/services/timestamp/timestamp';
  import PPLService from '../../public/services/requests/ppl';
  import DSLService from '../../public/services/requests/dsl';
+ import { History } from 'history';
 
 export interface IQueryTab {
   id: string;
@@ -69,6 +70,8 @@ export interface ILogExplorerProps {
   dslService: DSLService;
   savedObjects: SavedObjects;
   http: HttpStart;
+  history: History;
+  notifications: NotificationsStart;
   timestampUtils: TimestampUtils;
   setToast: (
     title: string,
@@ -78,4 +81,21 @@ export interface ILogExplorerProps {
   ) => void;
   savedObjectId: string;
   getExistingEmptyTab: (params: EmptyTabParams) => string;
+}
+
+export interface IExplorerProps {
+  pplService: PPLService;
+  dslService: DSLService;
+  tabId: string;
+  savedObjects: SavedObjects;
+  timestampUtils: TimestampUtils;
+  history: History;
+  notifications: NotificationsStart;
+  savedObjectId: string;
+  setToast: (
+    title: string,
+    color?: string,
+    text?: React.ReactChild | undefined,
+    side?: string | undefined
+  ) => void;
 }

dashboards-observability/public/components/app.tsx

@@ -103,6 +103,7 @@ export const App = ({
                       savedObjects={savedObjects}
                       timestampUtils={timestampUtils}
                       http={http}
+                      notifications={notifications}
                       {...props}
                     />
                   );

dashboards-observability/public/components/common/search/autocomplete.tsx

@@ -6,7 +6,6 @@
 import './search.scss';
 import $ from 'jquery';
 import React, {
-  useEffect,
   useMemo,
   useState
 } from 'react';
@@ -150,14 +149,6 @@ const getSuggestions = async (str: string, dslService: DSLService) => {
       return [{ label: str + '|', input: str, suggestion: '|', itemName: '|' }].filter(
         ({ label }) => label.toLowerCase().startsWith(lowerPrefix) && lowerPrefix.localeCompare(label.toLowerCase())
       );
-    } else if (inMatch && fieldList.includes(splittedModel[splittedModel.length - 2])) {
-      inMatch = true;
-      currField = splittedModel[splittedModel.length - 2];
-      currFieldType = fieldsFromBackend.find((field) => field.label === currField)?.type || '';
-      await getDataValues(currIndex, currField, currFieldType, dslService)
-      return [{ label: str + ',', input: str, suggestion: ',', itemName: ','}].filter(
-        ({ suggestion }) => suggestion.startsWith(prefix) && prefix !== suggestion
-      );
     } else if (splittedModel[splittedModel.length - 2] === 'stats') {
       nextStats = splittedModel.length;
       return fillSuggestions(str, prefix, statsCommands);
@@ -218,6 +209,14 @@ const getSuggestions = async (str: string, dslService: DSLService) => {
       currFieldType = fieldsFromBackend.find((field: {label: string, type: string}) => field.label === currField)?.type || '';
       await getDataValues(currIndex, currField, currFieldType, dslService);
       return fullSuggestions.filter((suggestion: { label: string }) => suggestion.label.toLowerCase().startsWith(lowerPrefix) && lowerPrefix.localeCompare(suggestion.label.toLowerCase()));
+    }  else if (inMatch && fieldList.includes(splittedModel[splittedModel.length - 2])) {
+      inMatch = true;
+      currField = splittedModel[splittedModel.length - 2];
+      currFieldType = fieldsFromBackend.find((field) => field.label === currField)?.type || '';
+      await getDataValues(currIndex, currField, currFieldType, dslService);
+      return [{ label: str + ',', input: str, suggestion: ',', itemName: ','}].filter(
+        ({ suggestion }) => suggestion.startsWith(prefix) && prefix !== suggestion
+      );
     } else if (nextWhere === splittedModel.length - 2) {
         return fillSuggestions(
           str,
@@ -265,7 +264,9 @@ const getFields = async (dslService: DSLService) => {
     const res = await dslService.fetchFields(currIndex);
     fieldsFromBackend.length = 0;
     for (const element in res?.[currIndex].mappings.properties) {
-      if (res?.[currIndex].mappings.properties[element].type === 'keyword') {
+      if (res?.[currIndex].mappings.properties[element].properties || res?.[currIndex].mappings.properties[element].fields) {
+        fieldsFromBackend.push({ label: element, type: 'string' });
+      } else if (res?.[currIndex].mappings.properties[element].type === 'keyword') {
         fieldsFromBackend.push({ label: element, type: 'string' });
       } else {
         fieldsFromBackend.push({

dashboards-observability/public/components/common/search/queries/data_queries.ts

@@ -10,10 +10,10 @@ export const getDataValueQuery = (index: string, field: string) => {
     'aggs': {
       'top_tags': {
         'terms': {
-          'field': field
+          'field': field,
         }
       }
     }
   }
   return query;
-}
+}

dashboards-observability/public/components/explorer/event_analytics.tsx

@@ -21,6 +21,7 @@ export const EventAnalytics = ({
   savedObjects,
   timestampUtils,
   http,
+  notifications,
   ...props
 }: any) => {
   const history = useHistory();
@@ -82,6 +83,7 @@ export const EventAnalytics = ({
                   chrome={chrome}
                   getExistingEmptyTab={getExistingEmptyTab}
                   history={history}
+                  notifications={notifications}
                 />
               );
             }}

dashboards-observability/public/components/explorer/explorer.tsx

@@ -54,10 +54,7 @@ import { selectFields, updateFields, sortFields } from './slices/field_slice';
 import { updateTabName } from './slices/query_tab_slice';
 import { selectCountDistribution } from './slices/count_distribution_slice';
 import { selectExplorerVisualization } from './slices/visualization_slice';
-import PPLService from '../../services/requests/ppl';
-import DSLService from '../../services/requests/dsl';
-import SavedObjects from '../../services/saved_objects/event_analytics/saved_objects';
-import TimestampUtils from 'public/services/timestamp/timestamp';
+import { IExplorerProps } from '../../../common/types/explorer';
 
 const TAB_EVENT_ID = 'main-content-events';
 const TAB_CHART_ID = 'main-content-vis';
@@ -66,20 +63,6 @@ const TYPE_TAB_MAPPING = {
   [SAVED_VISUALIZATION]: TAB_CHART_ID
 };
 
-interface IExplorerProps {
-  pplService: PPLService;
-  dslService: DSLService;
-  tabId: string;
-  savedObjects: SavedObjects;
-  timestampUtils: TimestampUtils;
-  setToast: (
-    title: string,
-    color?: string,
-    text?: React.ReactChild | undefined,
-    side?: string | undefined
-  ) => void;
-}
-
 export const Explorer = ({
   pplService,
   dslService,
@@ -88,6 +71,7 @@ export const Explorer = ({
   timestampUtils,
   setToast,
   history,
+  notifications,
   savedObjectId
 }: IExplorerProps) => {
   const dispatch = useDispatch();
@@ -127,7 +111,7 @@ export const Explorer = ({
   const [tempQuery, setTempQuery] = useState(query[RAW_QUERY]);
 
   const queryRef = useRef();
-  const selectedPanelNameRef = useRef();
+  const selectedPanelNameRef = useRef('');
   const explorerFieldsRef = useRef();
   queryRef.current = query;
   selectedPanelNameRef.current = selectedPanelName;
@@ -171,6 +155,23 @@ export const Explorer = ({
     });
   };
 
+  const formatError = (name: string, message: string, details: string) => {
+    return { 
+      name: name, 
+      message: message, 
+      body: { 
+        attributes: { 
+          error: { 
+            caused_by: { 
+              type: '', 
+              reason: details
+            }
+          }
+        }
+      }
+    }
+  }
+
   const getSavedDataById = async (objectId: string) => {
     // load saved query/visualization if object id exists
     await savedObjects.fetchSavedObjects({
@@ -220,7 +221,9 @@ export const Explorer = ({
 
     })
     .catch((error) => {
-      setToast(`Cannot get saved data for object id: ${objectId}, error: ${error.message}`, 'danger');
+      notifications.toasts.addError(error, {
+        title: `Cannot get saved data for object id: ${objectId}`
+      });
     });
   };
 
@@ -286,10 +289,10 @@ export const Explorer = ({
     } else {
       findAutoInterval(curQuery![SELECTED_DATE_RANGE][0], curQuery![SELECTED_DATE_RANGE][1])
       getEvents(undefined, (error) => {
-        setToast(
-          `Error fetching events: ${error?.body?.message || 'see console error for more details.'}`,
-          'danger'
-        );
+        const formattedError = formatError(error.name, error.message, error.body.message);
+        notifications.toasts.addError(formattedError, {
+          title: 'Error fetching events'
+        });
       });
       getCountVisualizations(minInterval);
     }
@@ -423,8 +426,10 @@ export const Explorer = ({
         setToast(`Timestamp has been overridden successfully.`, 'success');
         return res;
       })
-      .catch((error: any) => { 
-        setToast(`Cannot override timestamp, error: ${error.message}`, 'danger');
+      .catch((error: any) => {
+        notifications.toasts.addError(error, {
+          title: 'Cannot override timestamp'
+        });
       })
       .finally(() => {
         setIsOverridingTimestamp(false);
@@ -438,7 +443,9 @@ export const Explorer = ({
         return res;
       })
       .catch((error: any) => { 
-        setToast(`Cannot override timestamp, error: ${error.message}`, 'danger');
+        notifications.toasts.addError(error, {
+          title: 'Cannot override timestamp'
+        });
       })
       .finally(() => {
         setIsOverridingTimestamp(false);
@@ -698,7 +705,9 @@ export const Explorer = ({
           return res;
         })
         .catch((error: any) => {
-          setToast(`Cannot update query '${selectedPanelNameRef.current}', error: ${error.message}`, 'danger');
+          notifications.toasts.addError(error, {
+            title: `Cannot update query '${selectedPanelNameRef.current}'`
+          });
         });
       } else {
         // create new saved query
@@ -725,7 +734,9 @@ export const Explorer = ({
           if (error?.body?.statusCode === 403) {
             showPermissionErrorToast();
           } else {
-            setToast(`Cannot save query '${selectedPanelNameRef.current}', error: ${error.message}`, 'danger');
+            notifications.toasts.addError(error ,{
+              title: `Cannot save query '${selectedPanelNameRef.current}'`
+            });
           }
         });
       }
@@ -753,7 +764,9 @@ export const Explorer = ({
           return res;
         })
         .catch((error: any) => {
-          setToast(`Cannot update Visualization '${selectedPanelNameRef.current}', error: ${error.message}`, 'danger');
+          notifications.toasts.addError(error, {
+            title: `Cannot update Visualization '${selectedPanelNameRef.current}'`
+          });
         });
       } else {
         // create new saved visualization
@@ -783,7 +796,9 @@ export const Explorer = ({
           setToast(`New visualization '${selectedPanelNameRef.current}' has been successfully saved.`, 'success');
         })
         .catch((error: any) => {
-          setToast(`Cannot save Visualization '${selectedPanelNameRef.current}', error: ${error.message}`, 'danger');
+          notifications.toasts.addError(error, {
+            title: `Cannot save Visualization '${selectedPanelNameRef.current}'`
+          });
         });
       }
       if (!has(savingVisRes, 'objectId')) return;
@@ -797,7 +812,9 @@ export const Explorer = ({
           setToast(`Visualization '${selectedPanelNameRef.current}' has been successfully saved to operation panels.`, 'success');
         })
         .catch((error: any) => {
-          setToast(`Cannot add Visualization '${selectedPanelNameRef.current}' to operation panels, error: ${error.message}`, 'danger');
+          notifications.toasts.addError(error, {
+            title: `Cannot add Visualization '${selectedPanelNameRef.current}' to operation panels`
+          });
         });
       }
     }

dashboards-observability/public/components/explorer/log_explorer.tsx

@@ -34,7 +34,8 @@ export const LogExplorer = ({
   setToast,
   savedObjectId,
   getExistingEmptyTab,
-  history
+  history,
+  notifications,
 }: ILogExplorerProps) => {
 
   const dispatch = useDispatch();
@@ -181,6 +182,7 @@ export const LogExplorer = ({
             timestampUtils={ timestampUtils }
             setToast={ setToast }
             history={history}
+            notifications={notifications}
             savedObjectId={savedObjectId}
             tabCreatedTypes={tabCreatedTypes}
           />