[SIEM] Add SavedQuery in Timeline

src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_top_row.tsx

@@ -82,8 +82,11 @@ function QueryBarTopRowUI(props: Props) {
 
   const queryLanguage = props.query && props.query.language;
   const persistedLog: PersistedLog | undefined = React.useMemo(
-    () => (queryLanguage ? getQueryLog(uiSettings!, storage, appName, queryLanguage) : undefined),
-    [queryLanguage]
+    () =>
+      queryLanguage && uiSettings && storage && appName
+        ? getQueryLog(uiSettings!, storage, appName, queryLanguage)
+        : undefined,
+    [appName, queryLanguage, uiSettings, storage]
   );
 
   function onClickSubmitButton(event: React.MouseEvent<HTMLButtonElement>) {

src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx

@@ -72,6 +72,7 @@ export interface SearchBarOwnProps {
   // Show when user has privileges to save
   showSaveQuery?: boolean;
   savedQuery?: SavedQuery;
+  onQueryChange?: (payload: { dateRange: TimeRange; query?: Query }) => void;
   onQuerySubmit?: (payload: { dateRange: TimeRange; query?: Query }) => void;
   // User has saved the current state as a saved query
   onSaved?: (savedQuery: SavedQuery) => void;
@@ -206,6 +207,18 @@ class SearchBarUI extends Component<SearchBarProps, State> {
     );
   }
 
+  /*
+   * This Function is here to show the toggle in saved query form
+   * in case you the date range (from/to)
+   */
+  private shouldRenderTimeFilterInSavedQueryForm() {
+    const { dateRangeFrom, dateRangeTo, showDatePicker } = this.props;
+    return (
+      showDatePicker ||
+      (!showDatePicker && dateRangeFrom !== undefined && dateRangeTo !== undefined)
+    );
+  }
+
   public setFilterBarHeight = () => {
     requestAnimationFrame(() => {
       const height =
@@ -299,6 +312,9 @@ class SearchBarUI extends Component<SearchBarProps, State> {
       dateRangeFrom: queryAndDateRange.dateRange.from,
       dateRangeTo: queryAndDateRange.dateRange.to,
     });
+    if (this.props.onQueryChange) {
+      this.props.onQueryChange(queryAndDateRange);
+    }
   };
 
   public onQueryBarSubmit = (queryAndDateRange: { dateRange?: TimeRange; query?: Query }) => {
@@ -440,7 +456,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
             onSave={this.onSave}
             onClose={() => this.setState({ showSaveQueryModal: false })}
             showFilterOption={this.props.showFilterBar}
-            showTimeFilterOption={this.props.showDatePicker}
+            showTimeFilterOption={this.shouldRenderTimeFilterInSavedQueryForm()}
           />
         ) : null}
         {this.state.showSaveNewQueryModal ? (
@@ -449,7 +465,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
             onSave={savedQueryMeta => this.onSave(savedQueryMeta, true)}
             onClose={() => this.setState({ showSaveNewQueryModal: false })}
             showFilterOption={this.props.showFilterBar}
-            showTimeFilterOption={this.props.showDatePicker}
+            showTimeFilterOption={this.shouldRenderTimeFilterInSavedQueryForm()}
           />
         ) : null}
       </div>

src/plugins/data/common/es_query/filters/meta_filter.ts

@@ -33,15 +33,17 @@ export interface FilterValueFormatter {
 }
 
 export interface FilterMeta {
+  alias: string | null;
+  disabled: boolean;
+  negate: boolean;
+  // controlledBy is there to identify who owns the filter
+  controlledBy?: string;
   // index and type are optional only because when you create a new filter, there are no defaults
   index?: string;
   type?: string;
-  disabled: boolean;
-  negate: boolean;
-  alias: string | null;
   key?: string;
-  value?: string | ((formatter?: FilterValueFormatter) => string);
   params?: any;
+  value?: string | ((formatter?: FilterValueFormatter) => string);
 }
 
 export interface Filter {

x-pack/legacy/plugins/siem/common/constants.ts

@@ -25,6 +25,7 @@ export const DEFAULT_TO = 'now';
 export const DEFAULT_INTERVAL_PAUSE = true;
 export const DEFAULT_INTERVAL_TYPE = 'manual';
 export const DEFAULT_INTERVAL_VALUE = 300000; // ms
+export const DEFAULT_TIMEPICKER_QUICK_RANGES = 'timepicker:quickRanges';
 
 /**
  * Id for the SIGNALS alerting type

x-pack/legacy/plugins/siem/public/apps/index.ts

@@ -9,4 +9,7 @@ import { npStart } from 'ui/new_platform';
 import { Plugin } from './plugin';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-new Plugin({ opaqueId: Symbol('siem'), env: {} as any }, chrome).start(npStart);
+new Plugin({ opaqueId: Symbol('siem'), env: {} as any }, chrome).start(
+  npStart.core,
+  npStart.plugins
+);

x-pack/legacy/plugins/siem/public/apps/plugin.tsx

@@ -15,11 +15,6 @@ import template from './template.html';
 
 export const ROOT_ELEMENT_ID = 'react-siem-root';
 
-export interface StartObject {
-  core: LegacyCoreStart;
-  plugins: PluginsStart;
-}
-
 export class Plugin {
   constructor(
     // @ts-ignore this is added to satisfy the New Platform typing constraint,
@@ -30,8 +25,7 @@ export class Plugin {
     this.chrome = chrome;
   }
 
-  public start(start: StartObject): void {
-    const { core, plugins } = start;
+  public start(core: LegacyCoreStart, plugins: PluginsStart) {
     // @ts-ignore improper type description
     this.chrome.setRootTemplate(template);
     const checkForRoot = () => {

x-pack/legacy/plugins/siem/public/apps/start_app.tsx

@@ -9,6 +9,8 @@ import React, { memo, FC } from 'react';
 import { ApolloProvider } from 'react-apollo';
 import { Provider as ReduxStoreProvider } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
+import { LegacyCoreStart } from 'kibana/public';
+import { PluginsStart } from 'ui/new_platform/new_platform';
 
 import { EuiErrorBoundary } from '@elastic/eui';
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
@@ -17,6 +19,9 @@ import { BehaviorSubject } from 'rxjs';
 import { pluck } from 'rxjs/operators';
 import { I18nContext } from 'ui/i18n';
 
+import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
+import { Storage } from '../../../../../../src/plugins/kibana_utils/public';
+
 import { DEFAULT_DARK_MODE } from '../../common/constants';
 import { ErrorToastDispatcher } from '../components/error_toast_dispatcher';
 import { compose } from '../lib/compose/kibana_compose';
@@ -31,8 +36,6 @@ import { MlCapabilitiesProvider } from '../components/ml/permissions/ml_capabili
 
 import { ApolloClientContext } from '../utils/apollo_context';
 
-import { StartObject } from './plugin';
-
 const StartApp: FC<AppFrontendLibs> = memo(libs => {
   const history = createHashHistory();
 
@@ -74,10 +77,21 @@ const StartApp: FC<AppFrontendLibs> = memo(libs => {
 
 export const ROOT_ELEMENT_ID = 'react-siem-root';
 
-export const SiemApp = memo<StartObject>(({ core, plugins }) => (
-  <KibanaCoreContextProvider core={core}>
-    <KibanaPluginsContextProvider plugins={plugins}>
-      <StartApp {...compose()} />
-    </KibanaPluginsContextProvider>
-  </KibanaCoreContextProvider>
-));
+export const SiemApp = memo<{ core: LegacyCoreStart; plugins: PluginsStart }>(
+  ({ core, plugins }) => (
+    <KibanaContextProvider
+      services={{
+        appName: 'siem',
+        data: plugins.data,
+        storage: new Storage(localStorage),
+        ...core,
+      }}
+    >
+      <KibanaCoreContextProvider core={core}>
+        <KibanaPluginsContextProvider plugins={plugins}>
+          <StartApp {...compose()} />
+        </KibanaPluginsContextProvider>
+      </KibanaCoreContextProvider>
+    </KibanaContextProvider>
+  )
+);

x-pack/legacy/plugins/siem/public/components/flyout/index.test.tsx

@@ -20,6 +20,8 @@ import { FlyoutButton } from './button';
 const testFlyoutHeight = 980;
 const usersViewing = ['elastic'];
 
+jest.mock('../../lib/settings/use_kibana_ui_setting');
+
 describe('Flyout', () => {
   const state: State = mockGlobalState;
 

x-pack/legacy/plugins/siem/public/components/flyout/pane/index.test.tsx

@@ -10,14 +10,21 @@ import 'jest-styled-components';
 import * as React from 'react';
 
 import { flyoutHeaderHeight } from '../';
+import { useKibanaCore } from '../../../lib/compose/kibana_core';
 import { TestProviders } from '../../../mock';
-
+import { mockUiSettings } from '../../../mock/ui_settings';
 import { Pane } from '.';
 
 const testFlyoutHeight = 980;
 const testWidth = 640;
 const usersViewing = ['elastic'];
 
+const mockUseKibanaCore = useKibanaCore as jest.Mock;
+jest.mock('../../../lib/compose/kibana_core');
+mockUseKibanaCore.mockImplementation(() => ({
+  uiSettings: mockUiSettings,
+}));
+
 describe('Pane', () => {
   test('renders correctly against snapshot', () => {
     const EmptyComponent = shallow(