[SecuritySolution] Replace donuts with Lens

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

@@ -25,10 +25,11 @@ import {
   Wrapper,
   ChartWrapper,
 } from './common';
-import { VisualizationActions, HISTOGRAM_ACTIONS_BUTTON_CLASS } from '../visualization_actions';
+import { VisualizationActions } from '../visualization_actions';
 import type { VisualizationActionsProps } from '../visualization_actions/types';
 
 import { HoverVisibilityContainer } from '../hover_visibility_container';
+import { VISUALIZATION_ACTIONS_BUTTON_CLASS } from '../visualization_actions/utils';
 
 // custom series styles: https://ela.st/areachart-styling
 const getSeriesLineStyle = (): RecursivePartial<AreaSeriesStyle> => {
@@ -155,7 +156,7 @@ export const AreaChartComponent: React.FC<AreaChartComponentProps> = ({
 
   return (
     <Wrapper>
-      <HoverVisibilityContainer targetClassNames={[HISTOGRAM_ACTIONS_BUTTON_CLASS]}>
+      <HoverVisibilityContainer targetClassNames={[VISUALIZATION_ACTIONS_BUTTON_CLASS]}>
         {isValidSeriesExist && areaChart && (
           <ChartWrapper gutterSize="none">
             <EuiFlexItem grow={true}>

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

@@ -35,9 +35,10 @@ import {
 import { DraggableLegend } from './draggable_legend';
 import type { LegendItem } from './draggable_legend_item';
 import type { ChartData, ChartSeriesConfigs, ChartSeriesData } from './common';
-import { VisualizationActions, HISTOGRAM_ACTIONS_BUTTON_CLASS } from '../visualization_actions';
+import { VisualizationActions } from '../visualization_actions';
 import type { VisualizationActionsProps } from '../visualization_actions/types';
 import { HoverVisibilityContainer } from '../hover_visibility_container';
+import { VISUALIZATION_ACTIONS_BUTTON_CLASS } from '../visualization_actions/utils';
 
 const LegendFlexItem = styled(EuiFlexItem)`
   overview: hidden;
@@ -207,7 +208,7 @@ export const BarChartComponent: React.FC<BarChartComponentProps> = ({
 
   return (
     <Wrapper>
-      <HoverVisibilityContainer targetClassNames={[HISTOGRAM_ACTIONS_BUTTON_CLASS]}>
+      <HoverVisibilityContainer targetClassNames={[VISUALIZATION_ACTIONS_BUTTON_CLASS]}>
         {isValidSeriesExist && barChart && (
           <BarChartWrapper gutterSize="none">
             <EuiFlexItem grow={true}>

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

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import type { EuiFlexGroupProps } from '@elastic/eui';
 import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import React, { useMemo } from 'react';
 
@@ -44,46 +45,54 @@ export interface DonutChartProps {
   data: DonutChartData[] | null | undefined;
   fillColor: FillColor;
   height?: number;
+  isChartEmbeddablesEnabled?: boolean;
   label: React.ReactElement | string;
   legendItems?: LegendItem[] | null | undefined;
+  onElementClick?: ElementClickListener;
   title: React.ReactElement | string | number | null;
   totalCount: number | null | undefined;
-  onElementClick?: ElementClickListener;
+}
+
+export interface DonutChartWrapperProps {
+  children?: React.ReactElement;
+  dataExists: boolean;
+  label: React.ReactElement | string;
+  title: React.ReactElement | string | number | null;
+  isChartEmbeddablesEnabled?: boolean;
 }
 
 /* Make this position absolute in order to overlap the text onto the donut */
-const DonutTextWrapper = styled(EuiFlexGroup)`
-  top: 34%;
+export const DonutTextWrapper = styled(EuiFlexGroup)<
+  EuiFlexGroupProps & { $isChartEmbeddablesEnabled?: boolean; $dataExists?: boolean }
+>`
+  top: ${({ $isChartEmbeddablesEnabled, $dataExists }) =>
+    $isChartEmbeddablesEnabled && !$dataExists ? `66%` : `34%;`};
   width: 100%;
   max-width: 77px;
   position: absolute;
   z-index: 1;
 `;
 
-const StyledEuiFlexItem = styled(EuiFlexItem)`
+export const StyledEuiFlexItem = styled(EuiFlexItem)`
   position: relative;
   align-items: center;
 `;
 
-export const DonutChart = ({
-  data,
-  fillColor,
-  height = 90,
+const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
+  children,
+  dataExists,
+  isChartEmbeddablesEnabled,
   label,
-  legendItems,
   title,
-  totalCount,
-  onElementClick,
-}: DonutChartProps) => {
-  const theme = useTheme();
+}) => {
   const { euiTheme } = useEuiTheme();
   const emptyLabelStyle = useMemo(
     () => ({
       color: euiTheme.colors.disabled,
     }),
     [euiTheme.colors.disabled]
   );
-
+  const className = isChartEmbeddablesEnabled ? undefined : 'eui-textTruncate';
   return (
     <EuiFlexGroup
       alignItems="center"
@@ -92,26 +101,56 @@ export const DonutChart = ({
       gutterSize="l"
       data-test-subj="donut-chart"
     >
-      <StyledEuiFlexItem grow={false}>
+      <StyledEuiFlexItem grow={isChartEmbeddablesEnabled}>
         <DonutTextWrapper
+          $dataExists={dataExists}
+          $isChartEmbeddablesEnabled={isChartEmbeddablesEnabled}
+          alignItems="center"
           direction="column"
           gutterSize="none"
-          alignItems="center"
           justifyContent="center"
         >
           <EuiFlexItem>{title}</EuiFlexItem>
-          <EuiFlexItem className="eui-textTruncate">
+          <EuiFlexItem className={className}>
             <EuiToolTip content={label}>
               <EuiText
-                className="eui-textTruncate"
+                className={className}
                 size="s"
-                style={data ? undefined : emptyLabelStyle}
+                style={dataExists ? undefined : emptyLabelStyle}
               >
                 {label}
               </EuiText>
             </EuiToolTip>
           </EuiFlexItem>
         </DonutTextWrapper>
+        {children}
+      </StyledEuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+export const DonutChartWrapper = React.memo(DonutChartWrapperComponent);
+
+export const DonutChart = ({
+  data,
+  fillColor,
+  height = 90,
+  isChartEmbeddablesEnabled,
+  label,
+  legendItems,
+  onElementClick,
+  title,
+  totalCount,
+}: DonutChartProps) => {
+  const theme = useTheme();
+
+  return (
+    <DonutChartWrapper
+      dataExists={data != null && data.length > 0}
+      label={label}
+      title={title}
+      isChartEmbeddablesEnabled={isChartEmbeddablesEnabled}
+    >
+      <>
         {data == null || totalCount == null || totalCount === 0 ? (
           <DonutChartEmpty size={height} />
         ) : (
@@ -135,12 +174,13 @@ export const DonutChart = ({
             />
           </Chart>
         )}
-      </StyledEuiFlexItem>
-      {legendItems && legendItems?.length > 0 && (
-        <EuiFlexItem>
-          <DraggableLegend legendItems={legendItems} height={height} />
-        </EuiFlexItem>
-      )}
-    </EuiFlexGroup>
+
+        {legendItems && legendItems?.length > 0 && (
+          <EuiFlexItem>
+            <DraggableLegend legendItems={legendItems} height={height} />
+          </EuiFlexItem>
+        )}
+      </>
+    </DonutChartWrapper>
   );
 };

x-pack/plugins/security_solution/public/common/components/events_tab/histogram_configurations.ts

@@ -8,7 +8,7 @@ import numeral from '@elastic/numeral';
 
 import { MatrixHistogramType } from '../../../../common/search_strategy/security_solution';
 import { getExternalAlertLensAttributes } from '../visualization_actions/lens_attributes/common/external_alert';
-import { getEventsHistogramLensAttributes } from '../visualization_actions/lens_attributes/hosts/events';
+import { getEventsHistogramLensAttributes } from '../visualization_actions/lens_attributes/common/events';
 import type { MatrixHistogramConfigs, MatrixHistogramOption } from '../matrix_histogram/types';
 import * as i18n from './translations';
 

x-pack/plugins/security_solution/public/common/components/inspect/modal.tsx

@@ -45,6 +45,7 @@ const DescriptionListStyled = styled(EuiDescriptionList)`
 DescriptionListStyled.displayName = 'DescriptionListStyled';
 
 export interface ModalInspectProps {
+  adHocDataViews?: string[] | null;
   additionalRequests?: string[] | null;
   additionalResponses?: string[] | null;
   closeModal: () => void;
@@ -108,6 +109,7 @@ export const formatIndexPatternRequested = (indices: string[] = []) => {
 };
 
 export const ModalInspectQuery = ({
+  adHocDataViews,
   additionalRequests,
   additionalResponses,
   closeModal,
@@ -120,6 +122,7 @@ export const ModalInspectQuery = ({
   const { selectedPatterns } = useSourcererDataView(
     inputId === 'timeline' ? SourcererScopeName.timeline : getScopeFromPath(pathname)
   );
+
   const requests: string[] = [request, ...(additionalRequests != null ? additionalRequests : [])];
   const responses: string[] = [
     response,
@@ -150,7 +153,13 @@ export const ModalInspectQuery = ({
       ),
       description: (
         <span data-test-subj="index-pattern-description">
-          <p>{formatIndexPatternRequested(inspectRequests[0]?.index ?? [])}</p>
+          <p>
+            {formatIndexPatternRequested(
+              adHocDataViews != null && adHocDataViews.length > 0
+                ? adHocDataViews
+                : inspectRequests[0]?.index ?? []
+            )}
+          </p>
 
           {!isSourcererPattern && (
             <p>

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

@@ -31,11 +31,12 @@ import type { GlobalTimeArgs } from '../../containers/use_global_time';
 import { setAbsoluteRangeDatePicker } from '../../store/inputs/actions';
 import { InputsModelId } from '../../store/inputs/constants';
 import { HoverVisibilityContainer } from '../hover_visibility_container';
-import { HISTOGRAM_ACTIONS_BUTTON_CLASS, VisualizationActions } from '../visualization_actions';
+import { VisualizationActions } from '../visualization_actions';
 import type { GetLensAttributes, LensAttributes } from '../visualization_actions/types';
 import { SecurityPageName } from '../../../../common/constants';
 import { useRouteSpy } from '../../utils/route/use_route_spy';
 import { useQueryToggle } from '../../containers/query_toggle';
+import { VISUALIZATION_ACTIONS_BUTTON_CLASS } from '../visualization_actions/utils';
 
 export type MatrixHistogramComponentProps = MatrixHistogramProps &
   Omit<MatrixHistogramQueryProps, 'stackByField'> & {
@@ -236,7 +237,7 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
     <>
       <HoverVisibilityContainer
         show={!isInitialLoading}
-        targetClassNames={[HISTOGRAM_ACTIONS_BUTTON_CLASS]}
+        targetClassNames={[VISUALIZATION_ACTIONS_BUTTON_CLASS]}
       >
         <HistogramPanel
           data-test-subj={`${id}Panel`}

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

@@ -60,7 +60,7 @@ describe(`useRefetchByRestartingSession`, () => {
       children: React.ReactNode;
     },
     {
-      searchSessionId: string;
+      searchSessionId: string | undefined;
       refetchByRestartingSession: Refetch;
     }
   >;

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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { useCallback, useRef, useEffect, useMemo } from 'react';
+import { useCallback, useRef, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { useDeepEqualSelector } from '../../hooks/use_selector';
 import { useKibana } from '../../lib/kibana';
@@ -23,21 +23,28 @@ interface UseRefetchByRestartingSessionProps {
 export const useRefetchByRestartingSession = ({
   inputId,
   queryId,
+  skip,
 }: UseRefetchByRestartingSessionProps): {
-  searchSessionId: string;
+  searchSessionId: string | undefined;
   refetchByRestartingSession: Refetch;
 } => {
   const dispatch = useDispatch();
   const { data } = useKibana().services;
 
   const session = useRef(data.search.session);
-  const searchSessionId = useMemo(() => session.current.start(), [session]);
+
   const getGlobalQuery = inputsSelectors.globalQueryByIdSelector();
   const getTimelineQuery = inputsSelectors.timelineQueryByIdSelector();
-  const { selectedInspectIndex } = useDeepEqualSelector((state) =>
-    inputId === InputsModelId.global
-      ? getGlobalQuery(state, queryId)
-      : getTimelineQuery(state, queryId)
+  const { selectedInspectIndex, searchSessionId: existingSearchSessionId } = useDeepEqualSelector(
+    (state) =>
+      inputId === InputsModelId.global
+        ? getGlobalQuery(state, queryId)
+        : getTimelineQuery(state, queryId)
+  );
+
+  const searchSessionId = useMemo(
+    () => (skip ? undefined : existingSearchSessionId ?? session.current.start()),
+    [existingSearchSessionId, skip]
   );
 
   const refetchByRestartingSession = useCallback(() => {
@@ -51,16 +58,10 @@ export const useRefetchByRestartingSession = ({
          * like most of our components, it refetches when receiving a new search
          * session ID.
          **/
-        searchSessionId: session.current.start(),
+        searchSessionId: skip ? undefined : session.current.start(),
       })
     );
-  }, [dispatch, queryId, selectedInspectIndex]);
-
-  useEffect(() => {
-    return () => {
-      data.search.session.clear();
-    };
-  });
+  }, [dispatch, queryId, selectedInspectIndex, skip]);
 
   return { searchSessionId, refetchByRestartingSession };
 };

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

@@ -0,0 +1,9 @@
+/*
+ * 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';
+
+export const VisualizationActions = () => <div data-test-subj="visualizationActions" />;

x-pack/plugins/security_solution/public/common/components/visualization_actions/__mocks__/lens_embeddable.tsx

@@ -0,0 +1,9 @@
+/*
+ * 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';
+
+export const LensEmbeddable = () => <div data-test-subj="lens-embeddable" />;