Feature toasts errors handling

dashboards-observability/common/constants/explorer.ts

@@ -12,7 +12,8 @@
 export const RAW_QUERY = 'rawQuery';
 export const FINAL_QUERY = 'finalQuery';
 export const SELECTED_DATE_RANGE = 'selectedDateRange';
-export const INDEX = 'indexPattern';
+export const INDEX = 'index';
+export const SELECTED_TIMESTAMP = 'selectedTimestamp';
 export const SELECTED_FIELDS = 'selectedFields';
 export const UNSELECTED_FIELDS = 'unselectedFields';
 export const AVAILABLE_FIELDS = 'availableFields';
@@ -23,6 +24,7 @@ export const TAB_CHART_TITLE = 'Visualizations';
 export const TAB_EVENT_TITLE = 'Events';
 export const TAB_EVENT_ID_TXT_PFX = 'main-content-events-';
 export const TAB_CHART_ID_TXT_PFX = 'main-content-vis-';
+export const HAS_SAVED_TIMESTAMP = 'hasSavedTimestamp';
 
 export const DATE_PICKER_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 export const TIME_INTERVAL_OPTIONS = [

dashboards-observability/common/types/explorer.ts

@@ -14,7 +14,11 @@ import {
   SELECTED_FIELDS,
   UNSELECTED_FIELDS,
   AVAILABLE_FIELDS,
-  QUERIED_FIELDS
+  QUERIED_FIELDS,
+  INDEX,
+  FINAL_QUERY,
+  SELECTED_TIMESTAMP,
+  SELECTED_DATE_RANGE
  } from '../constants/explorer';
  import SavedObjects from '../../public/services/saved_objects/event_analytics/saved_objects';
 
@@ -38,7 +42,11 @@ export interface ITabQueries {
 }
 
 export interface IQuery {
-  [RAW_QUERY]: string
+  [RAW_QUERY]: string;
+  [FINAL_QUERY]: string;
+  [INDEX]: string;
+  [SELECTED_DATE_RANGE]: Array<string>;
+  [SELECTED_TIMESTAMP]: string;
 }
 
 export interface IExplorerTabFields {

dashboards-observability/common/utils/query_utils.ts

@@ -29,7 +29,7 @@ export const insertDateRangeToQuery = ({
   rawQuery,
   startTime,
   endTime,
-  timeField = 'utc_time',
+  timeField,
 }: {
   rawQuery: string;
   startTime: string;

dashboards-observability/public/components/app.tsx

@@ -30,14 +30,16 @@ interface ObservabilityAppDeps {
   pplService: any;
   dslService: any;
   savedObjects: any;
+  timestampUtils: any;
 }
 
 export const App = ({
   CoreStart,
   DepsStart,
   pplService,
   dslService,
-  savedObjects
+  savedObjects,
+  timestampUtils
 }: ObservabilityAppDeps) => {
 
   const { chrome, http, notifications } = CoreStart;
@@ -107,6 +109,7 @@ export const App = ({
                       pplService={ pplService }
                       dslService={ dslService }
                       savedObjects={ savedObjects }
+                      timestampUtils={ timestampUtils }
                       http={ http }
                       { ...props }
                     />

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

@@ -45,7 +45,7 @@ export function Autocomplete(props: IQueryBarProps) {
       render({ children }, root) {
         render(children, root);
       },
-      initialState: { query: query[RAW_QUERY] },
+      initialState: { query: query },
       openOnFocus: true,
       placeholder: 'Enter PPL query to retrieve log, traces, and metrics',
       plugins: [PPLSuggestionPlugin],

dashboards-observability/public/components/common/search/autocomplete_plugin.ts

@@ -268,7 +268,7 @@ export function createPPLSuggestionsPlugin(
 ): AutocompletePlugin<PPLSuggestion, undefined> {
   return {
     onStateChange: ({ state }) => {
-      if (options.query.rawQuery !== state.query) {
+      if (options.query !== state.query) {
         options.handleQueryChange(state.query, currIndex);
       }
     },

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

@@ -23,14 +23,15 @@ import {
   EuiPopoverFooter,
 } from '@elastic/eui';
 import _ from 'lodash';
+import { IQuery } from '../../../../common/types/explorer';
 import { DatePicker } from './date_picker';
 import '@algolia/autocomplete-theme-classic';
 import { Autocomplete } from './autocomplete';
 import { SavePanel } from '../../explorer/save_panel';
 import { useCallback } from 'react';
 
 export interface IQueryBarProps {
-  query: any;
+  query: IQuery;
   handleQueryChange: (query: string, index: string) => void;
   handleQuerySearch: () => void;
   dslService: any;
@@ -67,7 +68,8 @@ export const Search = (props: any) => {
     isPanelTextFieldInvalid,
     savedObjects,
     showSavePanelOptionsList,
-    showSaveButton = true
+    showSaveButton = true,
+    setToast
   } = props;
 
   const [isSavePanelOpen, setIsSavePanelOpen] = useState<boolean>(false);
@@ -90,7 +92,7 @@ export const Search = (props: any) => {
       <Autocomplete
         query={query}
         handleQueryChange={handleQueryChange}
-        handleQuerySearch={handleQuerySearch}
+        handleQuerySearch={memorizedHandleQuerySearch}
         dslService={dslService}
       />
     );
@@ -115,7 +117,14 @@ export const Search = (props: any) => {
     <div className="globalQueryBar">
       <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
         <div className="autocomplete">
-          {renderAutocomplete({ query, handleQueryChange, handleQuerySearch, dslService })}
+          {
+            renderAutocomplete({ 
+              query, 
+              handleQueryChange, 
+              handleQuerySearch: memorizedHandleQuerySearch,
+              dslService
+            })
+          }
         </div>
         <DatePicker
           startTime={startTime}
@@ -176,7 +185,10 @@ export const Search = (props: any) => {
                       <EuiButton
                         size="s"
                         fill
-                        onClick={() => handleSavingObject()}>
+                        onClick={() => { 
+                          handleSavingObject();
+                          setIsSavePanelOpen(false);
+                        }}>
                         { "Save" }
                       </EuiButton>
                     </EuiFlexItem>

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

@@ -9,8 +9,10 @@
  * GitHub history for details.
  */
 
-import React from 'react';
+import React, { useState, ReactChild } from 'react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
+import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
+import { EuiGlobalToastList } from '@elastic/eui';
 import { LogExplorer } from './log_explorer';
 import { Home as EventExplorerHome } from './home';
 import { renderPageWithSidebar } from '../common/side_nav';
@@ -21,17 +23,33 @@ export const EventAnalytics = ({
   pplService,
   dslService,
   savedObjects,
+  timestampUtils,
   http,
   ...props
 }: any) => {
 
+  const [toasts, setToasts] = useState<Array<Toast>>([]);
+
   const eventAnalyticsBreadcrumb = {
     text: 'Event analytics',
     href: '#/event_analytics',
   };
 
+  const setToast = (title: string, color = 'success', text?: ReactChild, side?: string) => {
+    if (!text) text = '';
+    setToasts([...toasts, { id: new Date().toISOString(), title, text, color } as Toast]);
+  };
+
   return (
-    <HashRouter>
+    <>
+      <EuiGlobalToastList
+        toasts={toasts}
+        dismissToast={(removedToast) => {
+          setToasts(toasts.filter((toast) => toast.id !== removedToast.id));
+        }}
+        toastLifeTimeMs={6000}
+      />
+      <HashRouter>
       <Switch>
         <Route
           path={`${props.match.path}/explorer`}
@@ -49,7 +67,9 @@ export const EventAnalytics = ({
                 pplService={ pplService }
                 dslService={ dslService }
                 savedObjects={ savedObjects }
+                timestampUtils={ timestampUtils }
                 http={ http }
+                setToast={ setToast }
               />
             );
           }}
@@ -65,10 +85,18 @@ export const EventAnalytics = ({
                 href: '#/event_analytics',
               }
             ]);
-            return renderPageWithSidebar(<EventExplorerHome http={ http } savedObjects={ savedObjects } />);
+            return renderPageWithSidebar(
+              <EventExplorerHome 
+                http={ http } 
+                savedObjects={ savedObjects }
+                dslService={ dslService }
+                timestampUtils={ timestampUtils }
+              />
+            );
           }}
         />
       </Switch>
     </HashRouter>
+    </>
   );
 }