[SecuritySolution] Render histograms with Lens

x-pack/plugins/security_solution/public/actions/show_top_n/show_top_n_component.test.tsx

@@ -20,6 +20,7 @@ jest.mock('react-router-dom', () => {
     useLocation: jest.fn().mockReturnValue({ pathname: '/test' }),
   };
 });
+jest.mock('../../common/components/visualization_actions');
 
 const casesService = {
   ui: { getCasesContext: () => mockCasesContext },

x-pack/plugins/security_solution/public/app/index.tsx

@@ -49,5 +49,8 @@ export const renderApp = ({
     </SecurityApp>,
     element
   );
-  return () => unmountComponentAtNode(element);
+  return () => {
+    services.data.search.session.clear();
+    unmountComponentAtNode(element);
+  };
 };

x-pack/plugins/security_solution/public/common/components/charts/donutchart.tsx

@@ -46,7 +46,6 @@ export interface DonutChartProps {
   data: DonutChartData[] | null | undefined;
   fillColor: FillColor;
   height?: number;
-  isChartEmbeddablesEnabled?: boolean;
   label: React.ReactElement | string;
   legendItems?: LegendItem[] | null | undefined;
   onElementClick?: ElementClickListener;
@@ -67,10 +66,10 @@ export interface DonutChartWrapperProps {
 /* Make this position absolute in order to overlap the text onto the donut */
 export const DonutTextWrapper = styled(EuiFlexGroup)<
   EuiFlexGroupProps & {
-    $isChartEmbeddablesEnabled?: boolean;
     $dataExists?: boolean;
+    $donutTextWrapperStyles?: FlattenSimpleInterpolation;
+    $isChartEmbeddablesEnabled?: boolean;
     className?: string;
-    donutTextWrapperStyles?: FlattenSimpleInterpolation;
   }
 >`
   top: ${({ $isChartEmbeddablesEnabled, $dataExists }) =>
@@ -80,8 +79,8 @@ export const DonutTextWrapper = styled(EuiFlexGroup)<
   position: absolute;
   z-index: 1;
 
-  ${({ className, donutTextWrapperStyles }) =>
-    className && donutTextWrapperStyles ? `&.${className} {${donutTextWrapperStyles}}` : ''}
+  ${({ className, $donutTextWrapperStyles }) =>
+    className && $donutTextWrapperStyles ? `&.${className} {${$donutTextWrapperStyles}}` : ''}
 `;
 
 export const StyledEuiFlexItem = styled(EuiFlexItem)`
@@ -117,11 +116,11 @@ const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
       <StyledEuiFlexItem grow={isChartEmbeddablesEnabled}>
         <DonutTextWrapper
           $dataExists={dataExists}
+          $donutTextWrapperStyles={donutTextWrapperStyles}
           $isChartEmbeddablesEnabled={isChartEmbeddablesEnabled}
           alignItems="center"
           className={donutTextWrapperClassName}
           direction="column"
-          donutTextWrapperStyles={donutTextWrapperStyles}
           gutterSize="none"
           justifyContent="center"
         >
@@ -151,7 +150,6 @@ export const DonutChart = ({
   data,
   fillColor,
   height = 90,
-  isChartEmbeddablesEnabled,
   label,
   legendItems,
   onElementClick,
@@ -165,7 +163,7 @@ export const DonutChart = ({
       dataExists={data != null && data.length > 0}
       label={label}
       title={title}
-      isChartEmbeddablesEnabled={isChartEmbeddablesEnabled}
+      isChartEmbeddablesEnabled={false}
     >
       <>
         {data == null || totalCount == null || totalCount === 0 ? (

x-pack/plugins/security_solution/public/common/components/events_tab/events_query_tab_body.test.tsx

@@ -47,6 +47,9 @@ jest.mock('../../lib/kibana', () => {
   };
 });
 
+jest.mock('../visualization_actions');
+jest.mock('../visualization_actions/lens_embeddable');
+
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useHistory: () => mockHistory,

x-pack/plugins/security_solution/public/common/components/matrix_histogram/chart_content.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import type { BarChartComponentProps } from '../charts/barchart';
+import { BarChart } from '../charts/barchart';
+import { MatrixLoader } from './matrix_loader';
+
+const MatrixHistogramChartContentComponent = ({
+  isInitialLoading,
+  barChart,
+  configs,
+  stackByField,
+  scopeId,
+}: BarChartComponentProps & { isInitialLoading: boolean }) => {
+  return isInitialLoading ? (
+    <MatrixLoader />
+  ) : (
+    <BarChart barChart={barChart} configs={configs} stackByField={stackByField} scopeId={scopeId} />
+  );
+};
+
+export const MatrixHistogramChartContent = React.memo(MatrixHistogramChartContentComponent);
+
+MatrixHistogramChartContentComponent.displayName = 'MatrixHistogramChartContentComponent';

x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.test.tsx

@@ -176,22 +176,7 @@ describe('Matrix Histogram Component', () => {
   });
 
   describe('Inspect button', () => {
-    test("it doesn't render Inspect button by default on Host page", () => {
-      mockLocation.mockReturnValue({ pathname: '/hosts' });
-
-      const testProps = {
-        ...mockMatrixOverTimeHistogramProps,
-        lensAttributes: dnsTopDomainsLensAttributes,
-      };
-      wrapper = mount(<MatrixHistogram {...testProps} />, {
-        wrappingComponent: TestProviders,
-      });
-      expect(wrapper.find('[data-test-subj="inspect-icon-button"]').exists()).toBe(false);
-    });
-
-    test("it doesn't render Inspect button by default on Network page", () => {
-      mockLocation.mockReturnValue({ pathname: '/network' });
-
+    test("it doesn't render Inspect button by default", () => {
       const testProps = {
         ...mockMatrixOverTimeHistogramProps,
         lensAttributes: dnsTopDomainsLensAttributes,
@@ -201,41 +186,10 @@ describe('Matrix Histogram Component', () => {
       });
       expect(wrapper.find('[data-test-subj="inspect-icon-button"]').exists()).toBe(false);
     });
-
-    test('it render Inspect button by default on other pages', () => {
-      mockLocation.mockReturnValue({ pathname: '/overview' });
-
-      const testProps = {
-        ...mockMatrixOverTimeHistogramProps,
-        lensAttributes: dnsTopDomainsLensAttributes,
-      };
-      wrapper = mount(<MatrixHistogram {...testProps} />, {
-        wrappingComponent: TestProviders,
-      });
-      expect(wrapper.find('[data-test-subj="inspect-icon-button"]').exists()).toBe(true);
-    });
   });
 
   describe('VisualizationActions', () => {
-    test('it renders VisualizationActions on Host page if lensAttributes is provided', () => {
-      mockLocation.mockReturnValue({ pathname: '/hosts' });
-
-      const testProps = {
-        ...mockMatrixOverTimeHistogramProps,
-        lensAttributes: dnsTopDomainsLensAttributes,
-      };
-      wrapper = mount(<MatrixHistogram {...testProps} />, {
-        wrappingComponent: TestProviders,
-      });
-      expect(wrapper.find('[data-test-subj="mock-viz-actions"]').exists()).toBe(true);
-      expect(wrapper.find('[data-test-subj="mock-viz-actions"]').prop('className')).toEqual(
-        'histogram-viz-actions'
-      );
-    });
-
-    test('it renders VisualizationActions on Network page if lensAttributes is provided', () => {
-      mockLocation.mockReturnValue({ pathname: '/network' });
-
+    test('it renders VisualizationActions if lensAttributes is provided', () => {
       const testProps = {
         ...mockMatrixOverTimeHistogramProps,
         lensAttributes: dnsTopDomainsLensAttributes,
@@ -248,20 +202,6 @@ describe('Matrix Histogram Component', () => {
         'histogram-viz-actions'
       );
     });
-
-    test("it doesn't renders VisualizationActions except Host / Network pages", () => {
-      const testProps = {
-        ...mockMatrixOverTimeHistogramProps,
-        lensAttributes: dnsTopDomainsLensAttributes,
-      };
-
-      mockLocation.mockReturnValue({ pathname: '/overview' });
-
-      wrapper = mount(<MatrixHistogram {...testProps} />, {
-        wrappingComponent: TestProviders,
-      });
-      expect(wrapper.find('[data-test-subj="mock-viz-actions"]').exists()).toBe(false);
-    });
   });
 
   describe('toggle query', () => {

x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.tsx

@@ -11,11 +11,8 @@ import styled from 'styled-components';
 
 import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiSelect, EuiSpacer } from '@elastic/eui';
 import { useDispatch } from 'react-redux';
-import { useLocation } from 'react-router-dom';
 import * as i18n from './translations';
-import { BarChart } from '../charts/barchart';
 import { HeaderSection } from '../header_section';
-import { MatrixLoader } from './matrix_loader';
 import { Panel } from '../panel';
 import { getBarchartConfigs, getCustomChartData } from './utils';
 import { useMatrixHistogramCombined } from '../../containers/matrix_histogram';
@@ -35,8 +32,10 @@ import { HoverVisibilityContainer } from '../hover_visibility_container';
 import { VisualizationActions } from '../visualization_actions';
 import type { GetLensAttributes, LensAttributes } from '../visualization_actions/types';
 import { useQueryToggle } from '../../containers/query_toggle';
+import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
 import { VISUALIZATION_ACTIONS_BUTTON_CLASS } from '../visualization_actions/utils';
-import { isExplorePage } from '../../../helpers';
+import { VisualizationEmbeddable } from '../visualization_actions/visualization_embeddable';
+import { MatrixHistogramChartContent } from './chart_content';
 
 export type MatrixHistogramComponentProps = MatrixHistogramProps &
   Omit<MatrixHistogramQueryProps, 'stackByField'> & {
@@ -71,6 +70,8 @@ const HistogramPanel = styled(Panel)<{ height?: number }>`
   ${({ height }) => (height != null ? `min-height: ${height}px;` : '')}
 `;
 
+const CHART_HEIGHT = '150px';
+
 export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> = ({
   chartHeight,
   defaultStackByOption,
@@ -107,7 +108,6 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
   hideQueryToggle = false,
 }) => {
   const dispatch = useDispatch();
-  const { pathname } = useLocation();
 
   const handleBrushEnd = useCallback(
     ({ x }) => {
@@ -169,6 +169,8 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
     [setQuerySkip, setToggleStatus]
   );
 
+  const isChartEmbeddablesEnabled = useIsExperimentalFeatureEnabled('chartEmbeddablesEnabled');
+
   const matrixHistogramRequest = {
     endDate,
     errorMessage,
@@ -180,11 +182,10 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
     stackByField: selectedStackByOption.value,
     runtimeMappings,
     isPtrIncluded,
-    skip: querySkip,
+    skip: querySkip || isChartEmbeddablesEnabled,
   };
   const [loading, { data, inspect, totalCount, refetch }] =
     useMatrixHistogramCombined(matrixHistogramRequest);
-  const onExplorePage = isExplorePage(pathname);
 
   const titleWithStackByField = useMemo(
     () => (title != null && typeof title === 'function' ? title(selectedStackByOption) : title),
@@ -209,22 +210,28 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
 
   useEffect(() => {
     if (!loading && !isInitialLoading) {
-      setQuery({ id, inspect, loading, refetch });
+      setQuery({
+        id,
+        inspect,
+        loading,
+        refetch,
+      });
     }
 
     if (isInitialLoading && !!barChartData && data) {
       setIsInitialLoading(false);
     }
   }, [
-    setQuery,
+    barChartData,
+    data,
     id,
     inspect,
+    isChartEmbeddablesEnabled,
+    isInitialLoading,
     loading,
     refetch,
-    isInitialLoading,
-    barChartData,
-    data,
     setIsInitialLoading,
+    setQuery,
   ]);
 
   const timerange = useMemo(() => ({ from: startDate, to: endDate }), [startDate, endDate]);
@@ -261,11 +268,11 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
             toggleQuery={hideQueryToggle ? undefined : toggleQuery}
             subtitle={subtitleWithCounts}
             inspectMultiple
-            showInspectButton={showInspectButton || !onExplorePage}
+            showInspectButton={showInspectButton && !isChartEmbeddablesEnabled}
             isInspectDisabled={filterQuery === undefined}
           >
             <EuiFlexGroup alignItems="center" gutterSize="none">
-              {onExplorePage && (getLensAttributes || lensAttributes) && timerange && (
+              {(getLensAttributes || lensAttributes) && timerange && (
                 <EuiFlexItem grow={false}>
                   <VisualizationActions
                     className="histogram-viz-actions"
@@ -293,10 +300,20 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
             </EuiFlexGroup>
           </HeaderSection>
           {toggleStatus ? (
-            isInitialLoading ? (
-              <MatrixLoader />
+            isChartEmbeddablesEnabled ? (
+              <VisualizationEmbeddable
+                data-test-subj="embeddable-matrix-histogram"
+                getLensAttributes={getLensAttributes}
+                height={CHART_HEIGHT}
+                id={`${id}-embeddable`}
+                inspectTitle={title as string}
+                lensAttributes={lensAttributes}
+                stackByField={selectedStackByOption.value}
+                timerange={timerange}
+              />
             ) : (
-              <BarChart
+              <MatrixHistogramChartContent
+                isInitialLoading={isInitialLoading}
                 barChart={barChartData}
                 configs={barchartConfigs}
                 stackByField={selectedStackByOption.value}

x-pack/plugins/security_solution/public/common/components/page/__mocks__/use_refetch_by_session.tsx

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export const useRefetchByRestartingSession = jest.fn().mockReturnValue({
+  session: {
+    current: {
+      start: jest
+        .fn()
+        .mockReturnValueOnce('mockSearchSessionId')
+        .mockReturnValue('mockSearchSessionIdDefault'),
+    },
+  },
+  refetchByRestartingSession: jest.fn(),
+});