Feature/p1 release

common/constants/explorer.ts

@@ -10,16 +10,51 @@
  */
 
 export const RAW_QUERY = 'rawQuery';
-export const INDEX = 'index';
+export const FINAL_QUERY = 'finalQuery';
+export const SELECTED_DATE_RANGE = 'selectedDateRange';
+export const INDEX = 'indexPattern';
 export const SELECTED_FIELDS = 'selectedFields';
 export const UNSELECTED_FIELDS = 'unselectedFields';
 export const AVAILABLE_FIELDS = 'availableFields';
+export const QUERIED_FIELDS = 'queriedFields';
 export const TAB_ID_TXT_PFX = 'query-panel-';
 export const TAB_TITLE = 'New query';
 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-charts-';
+export const TAB_CHART_ID_TXT_PFX = 'main-content-vis-';
+
+export const DATE_PICKER_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+export const TIME_INTERVAL_OPTIONS = [
+  {
+    display: 'Auto',
+    val: 'h' // same as value of Hour for now
+  },
+  {
+    display: 'Minute',
+    val: 'm'
+  },
+  {
+    display: 'Hour',
+    val: 'h'
+  },
+  {
+    display: 'Day',
+    val: 'd'
+  },
+  {
+    display: 'Week',
+    val: 'w'
+  },
+  {
+    display: 'Month',
+    val: 'M'
+  },
+  {
+    display: 'Year',
+    val: 'y'
+  },
+]
 
 // redux
 export const SELECTED_QUERY_TAB = 'selectedQueryTab';

common/constants/shared.ts

@@ -16,6 +16,11 @@ export const DSL_BASE = '/api/dsl';
 export const DSL_SEARCH = '/search';
 export const DSL_CAT = '/cat.indices';
 export const DSL_MAPPING = '/indices.getFieldMapping';
+export const OBSERVABILITY_BASE = '/api/observability';
+export const EVENT_ANALYTICS = '/event_analytics';
+export const SAVED_OBJECTS = '/saved_objects';
+export const SAVED_QUERY = '/query';
+export const SAVED_VISUALIZATION = '/vis';
 
 // Server route
 export const PPL_ENDPOINT = '/_plugins/_ppl';
@@ -29,11 +34,16 @@ export const observabilityPluginOrder = 6000;
 // Shared Constants 
 export const UI_DATE_FORMAT = 'MM/DD/YYYY hh:mm A';
 export const PPL_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+export const PPL_STATS_REGEX = /\|\s*stats/i;
+export const PPL_INDEX_INSERT_POINT_REGEX = /search (source|index)\s*=\s*([^\s]+)(.*)/i;
 export const PPL_INDEX_REGEX = /(search source|source|index)\s*=\s*([^|\s]+)/i;
 export const PPL_CONTAINS_TIMESTAMP_REGEX = /\|\s*.*\s*[<|<=|=|>=|>]\s*timestamp\([^\)]+\)/i;
 
 // Observability plugin URI
 const BASE_OBSERVABILITY_URI = '/_plugins/_observability';
 export const OPENSEARCH_PANELS_API = {
   OBJECT: `${BASE_OBSERVABILITY_URI}/object`,
-};
+};
+
+// Saved Objects
+export const SAVED_OBJECT = '/object';

common/types/explorer.ts

@@ -12,7 +12,9 @@
 import { 
   RAW_QUERY,
   SELECTED_FIELDS,
-  UNSELECTED_FIELDS
+  UNSELECTED_FIELDS,
+  AVAILABLE_FIELDS,
+  QUERIED_FIELDS
  } from '../constants/explorer';
 
 export interface IQueryTab {
@@ -45,6 +47,8 @@ export interface IExplorerTabFields {
 export interface IExplorerFields {
   [SELECTED_FIELDS]: Array<IField>;
   [UNSELECTED_FIELDS]: Array<IField>;
+  [AVAILABLE_FIELDS]: Array<IField>;
+  [QUERIED_FIELDS]: Array<IField>;
 }
 
 export interface ILogExplorerProps {

common/utils/index.ts

@@ -9,4 +9,4 @@
  * GitHub history for details.
  */
 
-export { getIndexPatternFromRawQuery } from './query_utils';
+export { getIndexPatternFromRawQuery, insertDateRangeToQuery } from './query_utils';

common/utils/query_utils.ts

@@ -9,12 +9,45 @@
  * GitHub history for details.
  */
 
-import { PPL_INDEX_REGEX } from "../constants/shared";
+import { isEmpty } from 'lodash';
+import datemath from '@elastic/datemath';
+import { DATE_PICKER_FORMAT } from '../../common/constants/explorer';
+import {
+  PPL_INDEX_REGEX,
+  PPL_INDEX_INSERT_POINT_REGEX
+} from '../../common/constants/shared';
 
 export const getIndexPatternFromRawQuery = (query: string) : string => {
   const matches = query.match(PPL_INDEX_REGEX);
   if (matches) {
     return matches[2];
   }
   return '';
+};
+
+export const insertDateRangeToQuery = ({
+  rawQuery,
+  startTime,
+  endTime,
+  timeField = 'utc_time',
+}: {
+  rawQuery: string;
+  startTime: string;
+  endTime: string;
+  timeField?: string;
+}) => {
+
+  let finalQuery = '';
+
+  if (isEmpty(rawQuery)) return finalQuery;
+
+  // convert to moment
+  const start = datemath.parse(startTime)?.format(DATE_PICKER_FORMAT);
+  const end = datemath.parse(endTime)?.format(DATE_PICKER_FORMAT);
+  const tokens = rawQuery.match(PPL_INDEX_INSERT_POINT_REGEX);
+
+  if (isEmpty(tokens)) return finalQuery;
+  finalQuery = `search ${tokens![1]}=${tokens![2]} | where ${timeField} >= timestamp('${start}') and ${timeField} <= timestamp('${end}')${tokens![3]}`;
+
+  return finalQuery;
 };

public/components/app.tsx

@@ -20,8 +20,7 @@ import { AppPluginStartDependencies } from '../types';
 import { Home as ApplicationAnalyticsHome } from './application_analytics/home';
 import { renderPageWithSidebar } from './common/side_nav';
 import { Home as CustomPanelsHome } from './custom_panels/home';
-import { Home as EventExplorerHome } from './explorer/home';
-import { LogExplorer } from './explorer/log_explorer';
+import { EventAnalytics } from './explorer/event_analytics';
 import { Main as NotebooksHome } from './notebooks/components/main';
 import { Home as TraceAnalyticsHome } from './trace_analytics/home';
 
@@ -30,13 +29,15 @@ interface ObservabilityAppDeps {
   DepsStart: AppPluginStartDependencies;
   pplService: any;
   dslService: any;
+  savedObjects: any;
 }
 
 export const App = ({
   CoreStart,
   DepsStart,
   pplService,
-  dslService
+  dslService,
+  savedObjects
 }: ObservabilityAppDeps) => {
 
   const { chrome, http, notifications } = CoreStart;
@@ -97,17 +98,19 @@ export const App = ({
                 )}
               />
               <Route
-                exact
-                path={['/explorer', '/explorer/home']}
+                path="/event_analytics"
                 render={(props) => {
-                  chrome.setBreadcrumbs([
-                    parentBreadcrumb,
-                    {
-                      text: 'Event analytics',
-                      href: '/explorer/events',
-                    },
-                  ]);
-                  return renderPageWithSidebar(<EventExplorerHome />);
+                  return (
+                    <EventAnalytics
+                      chrome={ chrome }
+                      parentBreadcrumb={ parentBreadcrumb }
+                      pplService={ pplService }
+                      dslService={ dslService }
+                      savedObjects={ savedObjects }
+                      http={ http }
+                      { ...props }
+                    />
+                  );
                 }}
               />
               <Route
@@ -125,14 +128,6 @@ export const App = ({
                   );
                 }}
               />
-              <Route
-                exact
-                path='/explorer/events'
-                render={(props) => <LogExplorer
-                  pplService={ pplService }
-                  dslService={ dslService }
-                /> }
-              />
             </Switch>
           </>
         </I18nProvider>

public/components/common/search/autocomplete.tsx

@@ -10,25 +10,42 @@
  */
 
 import './search.scss';
-import React, { useEffect } from 'react';
+import React, { 
+  createElement,
+  Fragment,
+  useEffect,
+  useRef 
+} from 'react';
+import { render } from 'react-dom';
 import { autocomplete } from '@algolia/autocomplete-js';
 import { IQueryBarProps } from './search';
 import { RAW_QUERY } from '../../../../common/constants/explorer';
 import { createPPLSuggestionsPlugin } from './autocomplete_plugin';
 
 export function Autocomplete(props: IQueryBarProps) {
+  const containerRef = useRef(null);
   const { query, handleQueryChange, handleQuerySearch, dslService } = props;
 
   const PPLSuggestionPlugin = createPPLSuggestionsPlugin({
+    query,
     handleQueryChange: props.handleQueryChange,
     handleQuerySearch: props.handleQuerySearch,
     dslService: props.dslService,
   });
 
   useEffect(() => {
+
+    if (!containerRef.current) {
+      return undefined;
+    }
+
     const search = autocomplete({
-      container: '#autocomplete',
-      initialState: { query: props.query[RAW_QUERY] },
+      container: containerRef.current,
+      renderer: { createElement, Fragment },
+      render({ children }, root) {
+        render(children, root);
+      },
+      initialState: { query: query[RAW_QUERY] },
       openOnFocus: true,
       placeholder: 'Enter PPL query to retrieve log, traces, and metrics',
       plugins: [PPLSuggestionPlugin],
@@ -40,5 +57,5 @@ export function Autocomplete(props: IQueryBarProps) {
     };
   }, []);
 
-  return <div id="autocomplete" />;
+  return <div ref={containerRef} />;
 }

public/components/common/search/autocomplete_plugin.ts

@@ -21,6 +21,7 @@ interface PPLSuggestion {
 }
 
 interface CreatePPLSuggestionsPluginProps {
+  query: any;
   handleQueryChange: (query: string, index: string) => void;
   handleQuerySearch: () => void;
   dslService: DSLService;
@@ -173,7 +174,7 @@ const getSuggestions = async (str: string, dslService: DSLService) => {
         item: '=',
       });
       currField = splittedModel[splittedModel.length - 2];
-      currFieldType = fieldsFromBackend.find((field) => field.label === currField).type;
+      currFieldType = fieldsFromBackend.find((field) => field.label === currField)?.type;
       return fullSuggestions.filter(({ label }) => label.startsWith(prefix) && prefix !== label);
     } else if (nextWhere === splittedModel.length - 2) {
       return fillSuggestions(
@@ -267,9 +268,8 @@ export function createPPLSuggestionsPlugin(
 ): AutocompletePlugin<PPLSuggestion, undefined> {
   return {
     onStateChange: ({ state }) => {
-      if (state.query.length > queryLength) {
+      if (options.query.rawQuery !== state.query) {
         options.handleQueryChange(state.query, currIndex);
-        queryLength++;
       }
     },
     onSubmit: () => {

public/components/common/search/Filter.tsx → public/components/common/search/date_picker.tsx

@@ -12,21 +12,20 @@
 import React from 'react';
 import {
   EuiFlexItem,
-  EuiSwitch,
-  EuiSuperDatePicker,
+  EuiSuperDatePicker
 } from '@elastic/eui';
 import {
-  IFilterProps
+  IDatePickerProps
 } from './search';
 
-export function Filter(props: IFilterProps) {
+export function DatePicker(props: IDatePickerProps) {
 
   const {
     startTime,
     endTime,
     setStartTime,
     setEndTime,
-    setIsOutputStale
+    handleTimePickerChange
   } = props;
 
   function handleTimeChange({
@@ -69,8 +68,9 @@ export function Filter(props: IFilterProps) {
         showUpdateButton={ false }
         dateFormat="MM/DD/YYYY hh:mm:ss A"
         onTimeChange={(e) => {
-          setStartTime(e.start);
-          setEndTime(e.end);
+          const start = e.start;
+          const end = e.start === e.end ? 'now' : e.end;
+          handleTimePickerChange([start, end]);
         }}
         onRefresh={ handleRefresh }
         className="osdQueryBar__datePicker"