[SIEM] Implement NP Plugin Setup

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

@@ -27,8 +27,6 @@ export const DEFAULT_SEARCH_AFTER_PAGE_SIZE = 100;
 export const DEFAULT_ANOMALY_SCORE = 'siem:defaultAnomalyScore';
 export const DEFAULT_MAX_TABLE_QUERY_SIZE = 10000;
 export const DEFAULT_SCALE_DATE_FORMAT = 'dateFormat:scaled';
-export const DEFAULT_KBN_VERSION = 'kbnVersion';
-export const DEFAULT_TIMEZONE_BROWSER = 'timezoneBrowser';
 export const DEFAULT_FROM = 'now-24h';
 export const DEFAULT_TO = 'now';
 export const DEFAULT_INTERVAL_PAUSE = true;

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

@@ -9,7 +9,7 @@ import { resolve } from 'path';
 import { Server } from 'hapi';
 import { Root } from 'joi';
 
-import { PluginInitializerContext } from 'src/core/server';
+import { PluginInitializerContext } from '../../../../src/core/server';
 import { plugin } from './server';
 import { savedObjectMappings } from './server/saved_objects';
 
@@ -43,7 +43,7 @@ export const siem = (kibana: any) => {
         description: i18n.translate('xpack.siem.securityDescription', {
           defaultMessage: 'Explore your SIEM App',
         }),
-        main: 'plugins/siem/app',
+        main: 'plugins/siem/legacy',
         euiIconType: 'securityAnalyticsApp',
         title: APP_NAME,
         listed: false,

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

@@ -25,7 +25,7 @@ import { DEFAULT_DARK_MODE } from '../../common/constants';
 import { ErrorToastDispatcher } from '../components/error_toast_dispatcher';
 import { compose } from '../lib/compose/kibana_compose';
 import { AppFrontendLibs, AppApolloClient } from '../lib/lib';
-import { StartCore, StartPlugins } from './plugin';
+import { CoreStart, StartPlugins } from '../plugin';
 import { PageRouter } from '../routes';
 import { createStore } from '../store';
 import { GlobalToaster, ManageGlobalToaster } from '../components/toasters';
@@ -89,10 +89,8 @@ const StartAppComponent: FC<AppFrontendLibs> = libs => {
 
 const StartApp = memo(StartAppComponent);
 
-export const ROOT_ELEMENT_ID = 'react-siem-root';
-
 interface SiemAppComponentProps {
-  core: StartCore;
+  core: CoreStart;
   plugins: StartPlugins;
 }
 

x-pack/legacy/plugins/siem/public/app/index.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+
+import { CoreStart, StartPlugins, AppMountParameters } from '../plugin';
+import { SiemApp } from './app';
+
+export const renderApp = (
+  core: CoreStart,
+  plugins: StartPlugins,
+  { element }: AppMountParameters
+) => {
+  render(<SiemApp core={core} plugins={plugins} />, element);
+  return () => unmountComponentAtNode(element);
+};

x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx

@@ -18,6 +18,7 @@ import {
 import { getOr, get, isNull, isNumber } from 'lodash/fp';
 import { AutoSizer } from '../auto_sizer';
 import { ChartPlaceHolder } from './chart_place_holder';
+import { useTimeZone } from '../../hooks';
 import {
   chartDefaultSettings,
   ChartSeriesConfigs,
@@ -26,7 +27,6 @@ import {
   getChartWidth,
   WrappedByAutoSizer,
   useTheme,
-  useBrowserTimeZone,
 } from './common';
 
 // custom series styles: https://ela.st/areachart-styling
@@ -71,7 +71,7 @@ export const AreaChartBaseComponent = ({
   configs?: ChartSeriesConfigs | undefined;
 }) => {
   const theme = useTheme();
-  const timeZone = useBrowserTimeZone();
+  const timeZone = useTimeZone();
   const xTickFormatter = get('configs.axis.xTickFormatter', chartConfigs);
   const yTickFormatter = get('configs.axis.yTickFormatter', chartConfigs);
   const xAxisId = `group-${data[0].key}-x`;

x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx

@@ -7,6 +7,7 @@
 import React from 'react';
 import { Chart, BarSeries, Axis, Position, ScaleType, Settings } from '@elastic/charts';
 import { getOr, get, isNumber } from 'lodash/fp';
+import { useTimeZone } from '../../hooks';
 import { AutoSizer } from '../auto_sizer';
 import { ChartPlaceHolder } from './chart_place_holder';
 import {
@@ -17,7 +18,6 @@ import {
   getChartHeight,
   getChartWidth,
   WrappedByAutoSizer,
-  useBrowserTimeZone,
   useTheme,
 } from './common';
 
@@ -44,7 +44,7 @@ export const BarChartBaseComponent = ({
   configs?: ChartSeriesConfigs | undefined;
 }) => {
   const theme = useTheme();
-  const timeZone = useBrowserTimeZone();
+  const timeZone = useTimeZone();
   const xTickFormatter = get('configs.axis.xTickFormatter', chartConfigs);
   const yTickFormatter = get('configs.axis.yTickFormatter', chartConfigs);
   const tickSize = getOr(0, 'configs.axis.tickSize', chartConfigs);

x-pack/legacy/plugins/siem/public/components/charts/common.tsx

@@ -15,10 +15,9 @@ import {
   SettingsSpecProps,
   TickFormatter,
 } from '@elastic/charts';
-import moment from 'moment-timezone';
 import styled from 'styled-components';
 import { useUiSetting } from '../../lib/kibana';
-import { DEFAULT_DATE_FORMAT_TZ, DEFAULT_DARK_MODE } from '../../../common/constants';
+import { DEFAULT_DARK_MODE } from '../../../common/constants';
 
 export const defaultChartHeight = '100%';
 export const defaultChartWidth = '100%';
@@ -108,11 +107,6 @@ export const chartDefaultSettings = {
   debug: false,
 };
 
-export const useBrowserTimeZone = () => {
-  const kibanaTimezone = useUiSetting<string>(DEFAULT_DATE_FORMAT_TZ);
-  return kibanaTimezone === 'Browser' ? moment.tz.guess() : kibanaTimezone;
-};
-
 export const getChartHeight = (customHeight?: number, autoSizerHeight?: number): string => {
   const height = customHeight || autoSizerHeight;
   return height ? `${height}px` : defaultChartHeight;

x-pack/legacy/plugins/siem/public/components/event_details/event_fields_browser.test.tsx

@@ -14,8 +14,6 @@ import { mockBrowserFields } from '../../containers/source/mock';
 import { defaultHeaders } from '../../mock/header';
 import { useMountAppended } from '../../utils/use_mount_appended';
 
-jest.mock('../../lib/kibana');
-
 describe('EventFieldsBrowser', () => {
   const mount = useMountAppended();
 

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

@@ -18,8 +18,6 @@ import { mockBrowserFields } from '../../containers/source/mock';
 import { eventsDefaultModel } from './default_model';
 import { useMountAppended } from '../../utils/use_mount_appended';
 
-jest.mock('../../lib/kibana');
-
 const mockUseFetchIndexPatterns: jest.Mock = useFetchIndexPatterns as jest.Mock;
 jest.mock('../../containers/detection_engine/rules/fetch_index_patterns');
 mockUseFetchIndexPatterns.mockImplementation(() => [

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

@@ -17,8 +17,6 @@ import { useFetchIndexPatterns } from '../../containers/detection_engine/rules/f
 import { mockBrowserFields } from '../../containers/source/mock';
 import { eventsDefaultModel } from './default_model';
 
-jest.mock('../../lib/kibana');
-
 const mockUseFetchIndexPatterns: jest.Mock = useFetchIndexPatterns as jest.Mock;
 jest.mock('../../containers/detection_engine/rules/fetch_index_patterns');
 mockUseFetchIndexPatterns.mockImplementation(() => [

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

@@ -16,8 +16,6 @@ const testFlyoutHeight = 980;
 const testWidth = 640;
 const usersViewing = ['elastic'];
 
-jest.mock('../../../lib/kibana');
-
 describe('Pane', () => {
   test('renders correctly against snapshot', () => {
     const EmptyComponent = shallow(

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

@@ -8,58 +8,49 @@ import { mount, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import * as React from 'react';
 
-import { mockFrameworks, getMockKibanaUiSetting } from '../../mock';
 import { useUiSetting$ } from '../../lib/kibana';
 
 import { PreferenceFormattedBytesComponent } from '.';
 
 jest.mock('../../lib/kibana');
 const mockUseUiSetting$ = useUiSetting$ as jest.Mock;
 
-describe('formatted_bytes', () => {
-  describe('PreferenceFormattedBytes', () => {
-    describe('rendering', () => {
-      beforeEach(() => {
-        mockUseUiSetting$.mockClear();
-      });
+const DEFAULT_BYTES_FORMAT_VALUE = '0,0.[0]b'; // kibana's default for this setting
+const bytes = '2806422';
 
-      const bytes = '2806422';
+describe('PreferenceFormattedBytes', () => {
+  test('renders correctly against snapshot', () => {
+    mockUseUiSetting$.mockImplementation(() => [DEFAULT_BYTES_FORMAT_VALUE]);
+    const wrapper = shallow(<PreferenceFormattedBytesComponent value={bytes} />);
 
-      test('renders correctly against snapshot', () => {
-        mockUseUiSetting$.mockImplementation(
-          getMockKibanaUiSetting(mockFrameworks.default_browser)
-        );
-        const wrapper = shallow(<PreferenceFormattedBytesComponent value={bytes} />);
-        expect(toJson(wrapper)).toMatchSnapshot();
-      });
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  test('it renders bytes to Numeral formatting when no format setting exists', () => {
+    mockUseUiSetting$.mockImplementation(() => [null]);
+    const wrapper = mount(<PreferenceFormattedBytesComponent value={bytes} />);
+
+    expect(wrapper.text()).toEqual('2,806,422');
+  });
 
-      test('it renders bytes to hardcoded format when no configuration exists', () => {
-        mockUseUiSetting$.mockImplementation(() => [null]);
-        const wrapper = mount(<PreferenceFormattedBytesComponent value={bytes} />);
-        expect(wrapper.text()).toEqual('2.7MB');
-      });
+  test('it renders bytes according to the default format', () => {
+    mockUseUiSetting$.mockImplementation(() => [DEFAULT_BYTES_FORMAT_VALUE]);
+    const wrapper = mount(<PreferenceFormattedBytesComponent value={bytes} />);
 
-      test('it renders bytes according to the default format', () => {
-        mockUseUiSetting$.mockImplementation(
-          getMockKibanaUiSetting(mockFrameworks.default_browser)
-        );
-        const wrapper = mount(<PreferenceFormattedBytesComponent value={bytes} />);
-        expect(wrapper.text()).toEqual('2.7MB');
-      });
+    expect(wrapper.text()).toEqual('2.7MB');
+  });
+
+  test('it renders bytes supplied as a number according to the default format', () => {
+    mockUseUiSetting$.mockImplementation(() => [DEFAULT_BYTES_FORMAT_VALUE]);
+    const wrapper = mount(<PreferenceFormattedBytesComponent value={+bytes} />);
+
+    expect(wrapper.text()).toEqual('2.7MB');
+  });
 
-      test('it renders bytes supplied as a number according to the default format', () => {
-        mockUseUiSetting$.mockImplementation(
-          getMockKibanaUiSetting(mockFrameworks.default_browser)
-        );
-        const wrapper = mount(<PreferenceFormattedBytesComponent value={+bytes} />);
-        expect(wrapper.text()).toEqual('2.7MB');
-      });
+  test('it renders bytes according to new format', () => {
+    mockUseUiSetting$.mockImplementation(() => ['0b']);
+    const wrapper = mount(<PreferenceFormattedBytesComponent value={bytes} />);
 
-      test('it renders bytes according to new format', () => {
-        mockUseUiSetting$.mockImplementation(getMockKibanaUiSetting(mockFrameworks.bytes_short));
-        const wrapper = mount(<PreferenceFormattedBytesComponent value={bytes} />);
-        expect(wrapper.text()).toEqual('3MB');
-      });
-    });
+    expect(wrapper.text()).toEqual('3MB');
   });
 });

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

@@ -10,13 +10,22 @@ import numeral from '@elastic/numeral';
 import { DEFAULT_BYTES_FORMAT } from '../../../common/constants';
 import { useUiSetting$ } from '../../lib/kibana';
 
-export const PreferenceFormattedBytesComponent = ({ value }: { value: string | number }) => {
+type Bytes = string | number;
+
+export const formatBytes = (value: Bytes, format: string) => {
+  return numeral(value).format(format);
+};
+
+export const useFormatBytes = () => {
   const [bytesFormat] = useUiSetting$<string>(DEFAULT_BYTES_FORMAT);
-  return (
-    <>{bytesFormat ? numeral(value).format(bytesFormat) : numeral(value).format('0,0.[0]b')}</>
-  );
+
+  return (value: Bytes) => formatBytes(value, bytesFormat);
 };
 
+export const PreferenceFormattedBytesComponent = ({ value }: { value: Bytes }) => (
+  <>{useFormatBytes()(value)}</>
+);
+
 PreferenceFormattedBytesComponent.displayName = 'PreferenceFormattedBytesComponent';
 
 export const PreferenceFormattedBytes = React.memo(PreferenceFormattedBytesComponent);