Merge branch 'main' into feature/eui-75.0.0

elastic · Feb 10, 2023 · def62eb · def62eb
2 parents 7142f5f + 74e61b5
commit def62eb
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 20 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/components/field_selection/index.tsx b/x-pack/plugins/security_solution/public/common/components/field_selection/index.tsx
@@ -32,6 +32,7 @@ export interface Props {
   stackByField1ComboboxRef?: React.RefObject<EuiComboBox<string | number | string[] | undefined>>;
   stackByWidth?: number;
   uniqueQueryId: string;
+  useLensCompatibleFields?: boolean;
 }
 
 const FieldSelectionComponent: React.FC<Props> = ({
@@ -46,6 +47,7 @@ const FieldSelectionComponent: React.FC<Props> = ({
   stackByField1ComboboxRef,
   stackByWidth,
   uniqueQueryId,
+  useLensCompatibleFields,
 }: Props) => (
   <EuiFlexGroup alignItems="flexStart" data-test-subj="fieldSelection" gutterSize="none">
     <EuiFlexItem grow={false}>
@@ -58,6 +60,7 @@ const FieldSelectionComponent: React.FC<Props> = ({
         selected={stackByField0}
         inputRef={setStackByField0ComboboxInputRef}
         width={stackByWidth}
+        useLensCompatibleFields={useLensCompatibleFields}
       />
       <EuiSpacer size="s" />
       <StackByComboBox
@@ -69,6 +72,7 @@ const FieldSelectionComponent: React.FC<Props> = ({
         selected={stackByField1 ?? ''}
         inputRef={setStackByField1ComboboxInputRef}
         width={stackByWidth}
+        useLensCompatibleFields={useLensCompatibleFields}
       />
     </EuiFlexItem>
     <EuiFlexItem grow={false}>

diff --git a/...s/security_solution/public/detections/components/alerts_kpis/alerts_count_panel/index.tsx b/...s/security_solution/public/detections/components/alerts_kpis/alerts_count_panel/index.tsx
@@ -235,6 +235,7 @@ export const AlertsCountPanel = memo<AlertsCountPanelProps>(
               stackByField1ComboboxRef={stackByField1ComboboxRef}
               stackByWidth={stackByWidth}
               uniqueQueryId={uniqueQueryId}
+              useLensCompatibleFields={isChartEmbeddablesEnabled}
             />
           </HeaderSection>
           {showCount &&

diff --git a/...curity_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/index.tsx b/...curity_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/index.tsx
@@ -406,12 +406,13 @@ export const AlertsHistogramPanel = memo<AlertsHistogramPanelProps>(
                 {showStackBy && (
                   <>
                     <StackByComboBox
-                      ref={comboboxRef}
                       data-test-subj="stackByComboBox"
-                      selected={selectedStackByOption}
+                      inputRef={setComboboxInputRef}
                       onSelect={onSelect}
                       prepend={stackByLabel}
-                      inputRef={setComboboxInputRef}
+                      ref={comboboxRef}
+                      selected={selectedStackByOption}
+                      useLensCompatibleFields={isChartEmbeddablesEnabled}
                       width={stackByWidth}
                     />
                     {showGroupByPlaceholder && (
@@ -422,11 +423,12 @@ export const AlertsHistogramPanel = memo<AlertsHistogramPanelProps>(
                           content={i18n.NOT_AVAILABLE_TOOLTIP}
                         >
                           <StackByComboBox
-                            isDisabled={true}
                             data-test-subj="stackByPlaceholder"
+                            isDisabled={true}
                             onSelect={noop}
                             prepend={GROUP_BY_TOP_LABEL}
                             selected=""
+                            useLensCompatibleFields={isChartEmbeddablesEnabled}
                             width={stackByWidth}
                           />
                         </EuiToolTip>

diff --git a/.../plugins/security_solution/public/detections/components/alerts_kpis/common/components.tsx b/.../plugins/security_solution/public/detections/components/alerts_kpis/common/components.tsx
@@ -53,13 +53,14 @@ export const KpiPanel = styled(EuiPanel)<{
 interface StackedBySelectProps {
   'aria-label'?: string;
   'data-test-subj'?: string;
+  dropDownoptions?: Array<EuiComboBoxOptionOption<string | number | string[] | undefined>>;
+  inputRef?: (inputRef: HTMLInputElement | null) => void;
   isDisabled?: boolean;
+  onSelect: (selected: string) => void;
   prepend?: string;
   selected: string;
-  inputRef?: (inputRef: HTMLInputElement | null) => void;
-  onSelect: (selected: string) => void;
+  useLensCompatibleFields?: boolean;
   width?: number;
-  dropDownoptions?: Array<EuiComboBoxOptionOption<string | number | string[] | undefined>>;
 }
 
 export const StackByComboBoxWrapper = styled.div<{ width: number }>`
@@ -79,6 +80,7 @@ export const StackByComboBox = React.forwardRef(
       inputRef,
       width = DEFAULT_WIDTH,
       dropDownoptions,
+      useLensCompatibleFields,
     }: StackedBySelectProps,
     ref
   ) => {
@@ -96,7 +98,7 @@ export const StackByComboBox = React.forwardRef(
       return [{ label: selected, value: selected }];
     }, [selected]);
 
-    const stackOptions = useStackByFields();
+    const stackOptions = useStackByFields(useLensCompatibleFields);
     const singleSelection = useMemo(() => {
       return { asPlainText: true };
     }, []);

diff --git a/.../plugins/security_solution/public/detections/components/alerts_kpis/common/hooks.test.tsx b/.../plugins/security_solution/public/detections/components/alerts_kpis/common/hooks.test.tsx
@@ -11,18 +11,40 @@ import type { UseInspectButtonParams } from './hooks';
 import { getAggregatableFields, useInspectButton, useStackByFields } from './hooks';
 import { mockBrowserFields } from '../../../../common/containers/source/mock';
 import { TestProviders } from '../../../../common/mock';
+import { useSourcererDataView } from '../../../../common/containers/sourcerer';
 
 jest.mock('react-router-dom', () => {
   const actual = jest.requireActual('react-router-dom');
   return { ...actual, useLocation: jest.fn().mockReturnValue({ pathname: '' }) };
 });
+jest.mock('../../../../common/containers/sourcerer', () => ({
+  useSourcererDataView: jest.fn(),
+  getScopeFromPath: jest.fn(),
+}));
 
 test('getAggregatableFields', () => {
   expect(getAggregatableFields(mockBrowserFields)).toMatchSnapshot();
 });
 
+test('getAggregatableFields when useLensCompatibleFields = true', () => {
+  const useLensCompatibleFields = true;
+  expect(
+    getAggregatableFields({ base: mockBrowserFields.base }, useLensCompatibleFields)
+  ).toHaveLength(0);
+});
+
 describe('hooks', () => {
+  const mockUseSourcererDataView = useSourcererDataView as jest.Mock;
+
   describe('useInspectButton', () => {
+    beforeEach(() => {
+      mockUseSourcererDataView.mockReturnValue({
+        browserFields: mockBrowserFields,
+      });
+
+      jest.clearAllMocks();
+    });
+
     const defaultParams: UseInspectButtonParams = {
       setQuery: jest.fn(),
       response: '',
@@ -58,9 +80,13 @@ describe('hooks', () => {
   });
 
   describe('useStackByFields', () => {
-    jest.mock('../../../../common/containers/sourcerer', () => ({
-      useSourcererDataView: jest.fn().mockReturnValue({ browserFields: mockBrowserFields }),
-    }));
+    beforeEach(() => {
+      mockUseSourcererDataView.mockReturnValue({
+        browserFields: mockBrowserFields,
+      });
+
+      jest.clearAllMocks();
+    });
     it('returns only aggregateable fields', () => {
       const wrapper = ({ children }: { children: JSX.Element }) => (
         <TestProviders>{children}</TestProviders>
@@ -73,5 +99,40 @@ describe('hooks', () => {
         aggregateableFields?.find((field) => field.label === 'nestedField.firstAttributes')
       ).toBe(undefined);
     });
+
+    it('returns only Lens compatible fields (check if one of esTypes is keyword)', () => {
+      mockUseSourcererDataView.mockReturnValue({
+        browserFields: { base: mockBrowserFields.base },
+      });
+
+      const wrapper = ({ children }: { children: JSX.Element }) => (
+        <TestProviders>{children}</TestProviders>
+      );
+      const useLensCompatibleFields = true;
+      const { result, unmount } = renderHook(() => useStackByFields(useLensCompatibleFields), {
+        wrapper,
+      });
+      const aggregateableFields = result.current;
+      unmount();
+      expect(aggregateableFields?.find((field) => field.label === '@timestamp')).toBeUndefined();
+      expect(aggregateableFields?.find((field) => field.label === '_id')).toBeUndefined();
+    });
+
+    it('returns only Lens compatible fields (check if it is a nested field)', () => {
+      mockUseSourcererDataView.mockReturnValue({
+        browserFields: { nestedField: mockBrowserFields.nestedField },
+      });
+
+      const wrapper = ({ children }: { children: JSX.Element }) => (
+        <TestProviders>{children}</TestProviders>
+      );
+      const useLensCompatibleFields = true;
+      const { result, unmount } = renderHook(() => useStackByFields(useLensCompatibleFields), {
+        wrapper,
+      });
+      const aggregateableFields = result.current;
+      unmount();
+      expect(aggregateableFields).toHaveLength(0);
+    });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/common/hooks.ts b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/common/hooks.ts
@@ -69,28 +69,37 @@ export function isKeyword(field: Partial<BrowserField>) {
   return field.esTypes && field.esTypes?.indexOf('keyword') >= 0;
 }
 
-export function getAggregatableFields(fields: {
-  [fieldName: string]: Partial<BrowserField>;
-}): EuiComboBoxOptionOption[] {
+export function getAggregatableFields(
+  fields: {
+    [fieldName: string]: Partial<BrowserField>;
+  },
+  useLensCompatibleFields?: boolean
+): EuiComboBoxOptionOption[] {
   const result = [];
   for (const [key, field] of Object.entries(fields)) {
-    if (field.aggregatable === true && isKeyword(field) && !isDataViewFieldSubtypeNested(field)) {
-      result.push({ label: key, value: key });
+    if (useLensCompatibleFields) {
+      if (field.aggregatable === true && isKeyword(field) && !isDataViewFieldSubtypeNested(field)) {
+        result.push({ label: key, value: key });
+      }
+    } else {
+      if (field.aggregatable === true) {
+        result.push({ label: key, value: key });
+      }
     }
   }
   return result;
 }
 
-export const useStackByFields = () => {
+export const useStackByFields = (useLensCompatibleFields?: boolean) => {
   const { pathname } = useLocation();
 
   const { browserFields } = useSourcererDataView(getScopeFromPath(pathname));
   const allFields = useMemo(() => getAllFieldsByName(browserFields), [browserFields]);
   const [stackByFieldOptions, setStackByFieldOptions] = useState(() =>
-    getAggregatableFields(allFields)
+    getAggregatableFields(allFields, useLensCompatibleFields)
   );
   useEffect(() => {
-    setStackByFieldOptions(getAggregatableFields(allFields));
-  }, [allFields]);
+    setStackByFieldOptions(getAggregatableFields(allFields, useLensCompatibleFields));
+  }, [allFields, useLensCompatibleFields]);
   return useMemo(() => stackByFieldOptions, [stackByFieldOptions]);
 };