diff --git a/packages/kbn-esql-editor/src/editor_footer/index.tsx b/packages/kbn-esql-editor/src/editor_footer/index.tsx index 4e60e65f19ca4..e6973e39657d9 100644 --- a/packages/kbn-esql-editor/src/editor_footer/index.tsx +++ b/packages/kbn-esql-editor/src/editor_footer/index.tsx @@ -297,7 +297,13 @@ export const EditorFooter = memo(function EditorFooter({ /> )} - + diff --git a/packages/kbn-grid-layout/grid/grid_layout.test.tsx b/packages/kbn-grid-layout/grid/grid_layout.test.tsx new file mode 100644 index 0000000000000..33b1bad784618 --- /dev/null +++ b/packages/kbn-grid-layout/grid/grid_layout.test.tsx @@ -0,0 +1,167 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ +import React from 'react'; +import { fireEvent, render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { getSampleLayout } from './test_utils/sample_layout'; +import { GridLayout, GridLayoutProps } from './grid_layout'; +import { gridSettings, mockRenderPanelContents } from './test_utils/mocks'; +import { cloneDeep } from 'lodash'; + +describe('GridLayout', () => { + const renderGridLayout = (propsOverrides: Partial = {}) => { + const defaultProps: GridLayoutProps = { + accessMode: 'EDIT', + layout: getSampleLayout(), + gridSettings, + renderPanelContents: mockRenderPanelContents, + onLayoutChange: jest.fn(), + }; + + const { rerender, ...rtlRest } = render(); + + return { + ...rtlRest, + rerender: (overrides: Partial) => + rerender(), + }; + }; + const getAllThePanelIds = () => + screen + .getAllByRole('button', { name: /panelId:panel/i }) + .map((el) => el.getAttribute('aria-label')?.replace(/panelId:/g, '')); + + const startDragging = (handle: HTMLElement, options = { clientX: 0, clientY: 0 }) => { + fireEvent.mouseDown(handle, options); + }; + const moveTo = (options = { clientX: 256, clientY: 128 }) => { + fireEvent.mouseMove(document, options); + }; + const drop = (handle: HTMLElement) => { + fireEvent.mouseUp(handle); + }; + + const assertTabThroughPanel = async (panelId: string) => { + await userEvent.tab(); // tab to drag handle + await userEvent.tab(); // tab to the panel + expect(screen.getByLabelText(`panelId:${panelId}`)).toHaveFocus(); + await userEvent.tab(); // tab to the resize handle + }; + + const expectedInitialOrder = [ + 'panel1', + 'panel5', + 'panel2', + 'panel3', + 'panel7', + 'panel6', + 'panel8', + 'panel4', + 'panel9', + 'panel10', + ]; + + beforeEach(() => { + jest.clearAllMocks(); + }); + + it(`'renderPanelContents' is not called during dragging`, () => { + renderGridLayout(); + + expect(mockRenderPanelContents).toHaveBeenCalledTimes(10); // renderPanelContents is called for each of 10 panels + jest.clearAllMocks(); + + const panel1DragHandle = screen.getAllByRole('button', { name: /drag to move/i })[0]; + startDragging(panel1DragHandle); + moveTo({ clientX: 256, clientY: 128 }); + expect(mockRenderPanelContents).toHaveBeenCalledTimes(0); // renderPanelContents should not be called during dragging + + drop(panel1DragHandle); + expect(mockRenderPanelContents).toHaveBeenCalledTimes(0); // renderPanelContents should not be called after reordering + }); + + describe('panels order: panels are rendered from left to right, from top to bottom', () => { + it('focus management - tabbing through the panels', async () => { + renderGridLayout(); + // we only test a few panels because otherwise that test would execute for too long + await assertTabThroughPanel('panel1'); + await assertTabThroughPanel('panel5'); + await assertTabThroughPanel('panel2'); + await assertTabThroughPanel('panel3'); + }); + it('on initializing', () => { + renderGridLayout(); + expect(getAllThePanelIds()).toEqual(expectedInitialOrder); + }); + + it('after reordering some panels', async () => { + renderGridLayout(); + + const panel1DragHandle = screen.getAllByRole('button', { name: /drag to move/i })[0]; + startDragging(panel1DragHandle); + + moveTo({ clientX: 256, clientY: 128 }); + expect(getAllThePanelIds()).toEqual(expectedInitialOrder); // the panels shouldn't be reordered till we drop + + drop(panel1DragHandle); + expect(getAllThePanelIds()).toEqual([ + 'panel2', + 'panel5', + 'panel3', + 'panel7', + 'panel1', + 'panel8', + 'panel6', + 'panel4', + 'panel9', + 'panel10', + ]); + }); + it('after removing a panel', async () => { + const { rerender } = renderGridLayout(); + const sampleLayoutWithoutPanel1 = cloneDeep(getSampleLayout()); + delete sampleLayoutWithoutPanel1[0].panels.panel1; + rerender({ layout: sampleLayoutWithoutPanel1 }); + + expect(getAllThePanelIds()).toEqual([ + 'panel2', + 'panel5', + 'panel3', + 'panel7', + 'panel6', + 'panel8', + 'panel4', + 'panel9', + 'panel10', + ]); + }); + it('after replacing a panel id', async () => { + const { rerender } = renderGridLayout(); + const modifiedLayout = cloneDeep(getSampleLayout()); + const newPanel = { ...modifiedLayout[0].panels.panel1, id: 'panel11' }; + delete modifiedLayout[0].panels.panel1; + modifiedLayout[0].panels.panel11 = newPanel; + + rerender({ layout: modifiedLayout }); + + expect(getAllThePanelIds()).toEqual([ + 'panel11', + 'panel5', + 'panel2', + 'panel3', + 'panel7', + 'panel6', + 'panel8', + 'panel4', + 'panel9', + 'panel10', + ]); + }); + }); +}); diff --git a/packages/kbn-grid-layout/grid/grid_layout.tsx b/packages/kbn-grid-layout/grid/grid_layout.tsx index 2a14456b1ef62..1406d4b6eb55d 100644 --- a/packages/kbn-grid-layout/grid/grid_layout.tsx +++ b/packages/kbn-grid-layout/grid/grid_layout.tsx @@ -21,7 +21,7 @@ import { useGridLayoutState } from './use_grid_layout_state'; import { isLayoutEqual } from './utils/equality_checks'; import { resolveGridRow } from './utils/resolve_grid_row'; -interface GridLayoutProps { +export interface GridLayoutProps { layout: GridLayoutData; gridSettings: GridSettings; renderPanelContents: (panelId: string) => React.ReactNode; @@ -121,11 +121,6 @@ export const GridLayout = ({ rowIndex={rowIndex} renderPanelContents={renderPanelContents} gridLayoutStateManager={gridLayoutStateManager} - toggleIsCollapsed={() => { - const newLayout = cloneDeep(gridLayoutStateManager.gridLayout$.value); - newLayout[rowIndex].isCollapsed = !newLayout[rowIndex].isCollapsed; - gridLayoutStateManager.gridLayout$.next(newLayout); - }} setInteractionEvent={(nextInteractionEvent) => { if (!nextInteractionEvent) { gridLayoutStateManager.activePanel$.next(undefined); diff --git a/packages/kbn-grid-layout/grid/grid_panel/drag_handle.tsx b/packages/kbn-grid-layout/grid/grid_panel/drag_handle.tsx new file mode 100644 index 0000000000000..90305812ff8d5 --- /dev/null +++ b/packages/kbn-grid-layout/grid/grid_panel/drag_handle.tsx @@ -0,0 +1,74 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import React from 'react'; + +import { EuiIcon, useEuiTheme } from '@elastic/eui'; +import { css } from '@emotion/react'; +import { euiThemeVars } from '@kbn/ui-theme'; +import { i18n } from '@kbn/i18n'; +import { PanelInteractionEvent } from '../types'; + +export const DragHandle = ({ + interactionStart, +}: { + interactionStart: ( + type: PanelInteractionEvent['type'] | 'drop', + e: React.MouseEvent + ) => void; +}) => { + const { euiTheme } = useEuiTheme(); + return ( + + ); +}; diff --git a/packages/kbn-grid-layout/grid/grid_panel/grid_panel.test.tsx b/packages/kbn-grid-layout/grid/grid_panel/grid_panel.test.tsx new file mode 100644 index 0000000000000..2829a320abab4 --- /dev/null +++ b/packages/kbn-grid-layout/grid/grid_panel/grid_panel.test.tsx @@ -0,0 +1,68 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import React from 'react'; +import { render, screen, fireEvent } from '@testing-library/react'; +import { GridPanel, GridPanelProps } from './grid_panel'; +import { gridLayoutStateManagerMock } from '../test_utils/mocks'; + +describe('GridPanel', () => { + const mockRenderPanelContents = jest.fn((panelId) =>
Panel Content {panelId}
); + const mockInteractionStart = jest.fn(); + + const renderGridPanel = (propsOverrides: Partial = {}) => { + return render( + + ); + }; + afterEach(() => { + jest.clearAllMocks(); + }); + + it('renders panel contents correctly', () => { + renderGridPanel(); + expect(screen.getByText('Panel Content panel1')).toBeInTheDocument(); + }); + + describe('drag handle interaction', () => { + it('calls `drag` interactionStart on mouse down', () => { + renderGridPanel(); + const dragHandle = screen.getByRole('button', { name: /drag to move/i }); + fireEvent.mouseDown(dragHandle); + expect(mockInteractionStart).toHaveBeenCalledWith('drag', expect.any(Object)); + }); + it('calls `drop` interactionStart on mouse up', () => { + renderGridPanel(); + const dragHandle = screen.getByRole('button', { name: /drag to move/i }); + fireEvent.mouseUp(dragHandle); + expect(mockInteractionStart).toHaveBeenCalledWith('drop', expect.any(Object)); + }); + }); + describe('resize handle interaction', () => { + it('calls `resize` interactionStart on mouse down', () => { + renderGridPanel(); + const resizeHandle = screen.getByRole('button', { name: /resize/i }); + fireEvent.mouseDown(resizeHandle); + expect(mockInteractionStart).toHaveBeenCalledWith('resize', expect.any(Object)); + }); + it('calls `drop` interactionStart on mouse up', () => { + renderGridPanel(); + const resizeHandle = screen.getByRole('button', { name: /resize/i }); + fireEvent.mouseUp(resizeHandle); + expect(mockInteractionStart).toHaveBeenCalledWith('drop', expect.any(Object)); + }); + }); +}); diff --git a/packages/kbn-grid-layout/grid/grid_panel.tsx b/packages/kbn-grid-layout/grid/grid_panel/grid_panel.tsx similarity index 67% rename from packages/kbn-grid-layout/grid/grid_panel.tsx rename to packages/kbn-grid-layout/grid/grid_panel/grid_panel.tsx index 91f935f4507f1..e817f5fc3871b 100644 --- a/packages/kbn-grid-layout/grid/grid_panel.tsx +++ b/packages/kbn-grid-layout/grid/grid_panel/grid_panel.tsx @@ -10,39 +10,30 @@ import React, { forwardRef, useEffect, useMemo } from 'react'; import { combineLatest, skip } from 'rxjs'; -import { - EuiIcon, - EuiPanel, - euiFullHeight, - transparentize, - useEuiOverflowScroll, - useEuiTheme, -} from '@elastic/eui'; +import { EuiPanel, euiFullHeight, useEuiOverflowScroll } from '@elastic/eui'; import { css } from '@emotion/react'; import { euiThemeVars } from '@kbn/ui-theme'; - -import { GridLayoutStateManager, PanelInteractionEvent } from './types'; -import { getKeysInOrder } from './utils/resolve_grid_row'; - -export const GridPanel = forwardRef< - HTMLDivElement, - { - panelId: string; - rowIndex: number; - renderPanelContents: (panelId: string) => React.ReactNode; - interactionStart: ( - type: PanelInteractionEvent['type'] | 'drop', - e: React.MouseEvent - ) => void; - gridLayoutStateManager: GridLayoutStateManager; - } ->( +import { GridLayoutStateManager, PanelInteractionEvent } from '../types'; +import { getKeysInOrder } from '../utils/resolve_grid_row'; +import { DragHandle } from './drag_handle'; +import { ResizeHandle } from './resize_handle'; + +export interface GridPanelProps { + panelId: string; + rowIndex: number; + renderPanelContents: (panelId: string) => React.ReactNode; + interactionStart: ( + type: PanelInteractionEvent['type'] | 'drop', + e: React.MouseEvent + ) => void; + gridLayoutStateManager: GridLayoutStateManager; +} + +export const GridPanel = forwardRef( ( { panelId, rowIndex, renderPanelContents, interactionStart, gridLayoutStateManager }, panelRef ) => { - const { euiTheme } = useEuiTheme(); - /** Set initial styles based on state at mount to prevent styles from "blipping" */ const initialStyles = useMemo(() => { const initialPanel = gridLayoutStateManager.gridLayout$.getValue()[rowIndex].panels[panelId]; @@ -158,7 +149,7 @@ export const GridPanel = forwardRef< const panel = allPanels[panelId]; if (!ref || !panel) return; - const sortedKeys = getKeysInOrder(gridLayout[rowIndex]); + const sortedKeys = getKeysInOrder(gridLayout[rowIndex].panels); const currentPanelPosition = sortedKeys.indexOf(panelId); const sortedKeysBefore = sortedKeys.slice(0, currentPanelPosition); const responsiveGridRowStart = sortedKeysBefore.reduce( @@ -180,7 +171,6 @@ export const GridPanel = forwardRef< // eslint-disable-next-line react-hooks/exhaustive-deps [] ); - /** * Memoize panel contents to prevent unnecessary re-renders */ @@ -189,93 +179,29 @@ export const GridPanel = forwardRef< }, [panelId, renderPanelContents]); return ( - <> -
- + + +
- {/* drag handle */} -
interactionStart('drag', e)} - onMouseUp={(e) => interactionStart('drop', e)} - > - -
- {/* Resize handle */} -
interactionStart('resize', e)} - onMouseUp={(e) => interactionStart('drop', e)} - css={css` - right: 0; - bottom: 0; - opacity: 0; - margin: -2px; - position: absolute; - width: ${euiThemeVars.euiSizeL}; - height: ${euiThemeVars.euiSizeL}; - transition: opacity 0.2s, border 0.2s; - border-radius: 7px 0 7px 0; - border-bottom: 2px solid ${euiThemeVars.euiColorSuccess}; - border-right: 2px solid ${euiThemeVars.euiColorSuccess}; - :hover { - opacity: 1; - background-color: ${transparentize(euiThemeVars.euiColorSuccess, 0.05)}; - cursor: se-resize; - } - .kbnGrid--static & { - opacity: 0 !important; - display: none; - } - `} - /> -
- {panelContents} -
- -
- + {panelContents} +
+ + +
); } ); diff --git a/packages/kbn-grid-layout/grid/grid_panel/index.tsx b/packages/kbn-grid-layout/grid/grid_panel/index.tsx new file mode 100644 index 0000000000000..e286fc92fd9f7 --- /dev/null +++ b/packages/kbn-grid-layout/grid/grid_panel/index.tsx @@ -0,0 +1,10 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +export { GridPanel } from './grid_panel'; diff --git a/packages/kbn-grid-layout/grid/grid_panel/resize_handle.tsx b/packages/kbn-grid-layout/grid/grid_panel/resize_handle.tsx new file mode 100644 index 0000000000000..4c4a2d60ee5cb --- /dev/null +++ b/packages/kbn-grid-layout/grid/grid_panel/resize_handle.tsx @@ -0,0 +1,70 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import React from 'react'; + +import { transparentize } from '@elastic/eui'; +import { css } from '@emotion/react'; +import { euiThemeVars } from '@kbn/ui-theme'; +import { i18n } from '@kbn/i18n'; +import { PanelInteractionEvent } from '../types'; + +export const ResizeHandle = ({ + interactionStart, +}: { + interactionStart: ( + type: PanelInteractionEvent['type'] | 'drop', + e: React.MouseEvent + ) => void; +}) => { + return ( + +)); + +const runtimeSettings$ = new BehaviorSubject({ + ...gridSettings, + columnPixelWidth: 0, +}); + +export const gridLayoutStateManagerMock: GridLayoutStateManager = { + expandedPanelId$: new BehaviorSubject(undefined), + isMobileView$: new BehaviorSubject(false), + gridLayout$, + runtimeSettings$, + panelRefs: { current: [] }, + rowRefs: { current: [] }, + interactionEvent$: new BehaviorSubject(undefined), + activePanel$: new BehaviorSubject(undefined), + gridDimensions$: new BehaviorSubject({ width: 600, height: 900 }), +}; diff --git a/packages/kbn-grid-layout/grid/test_utils/sample_layout.ts b/packages/kbn-grid-layout/grid/test_utils/sample_layout.ts new file mode 100644 index 0000000000000..035a6f1dda2ee --- /dev/null +++ b/packages/kbn-grid-layout/grid/test_utils/sample_layout.ts @@ -0,0 +1,101 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import { GridLayoutData } from '../types'; + +export const getSampleLayout = (): GridLayoutData => [ + { + title: 'Large section', + isCollapsed: false, + panels: { + panel1: { + id: 'panel1', + row: 0, + column: 0, + width: 12, + height: 6, + }, + panel2: { + id: 'panel2', + row: 6, + column: 0, + width: 8, + height: 4, + }, + panel3: { + id: 'panel3', + row: 6, + column: 8, + width: 12, + height: 4, + }, + panel4: { + id: 'panel4', + row: 10, + column: 0, + width: 48, + height: 4, + }, + panel5: { + id: 'panel5', + row: 0, + column: 12, + width: 36, + height: 6, + }, + panel6: { + id: 'panel6', + row: 6, + column: 24, + width: 24, + height: 4, + }, + panel7: { + id: 'panel7', + row: 6, + column: 20, + width: 4, + height: 2, + }, + panel8: { + id: 'panel8', + row: 8, + column: 20, + width: 4, + height: 2, + }, + }, + }, + { + title: 'Small section', + isCollapsed: false, + panels: { + panel9: { + id: 'panel9', + row: 0, + column: 0, + width: 12, + height: 16, + }, + }, + }, + { + title: 'Another small section', + isCollapsed: false, + panels: { + panel10: { + id: 'panel10', + row: 0, + column: 24, + width: 12, + height: 6, + }, + }, + }, +]; diff --git a/packages/kbn-grid-layout/grid/use_grid_layout_events.ts b/packages/kbn-grid-layout/grid/use_grid_layout_events.ts index 9a6d6d2303909..64cc8f482838e 100644 --- a/packages/kbn-grid-layout/grid/use_grid_layout_events.ts +++ b/packages/kbn-grid-layout/grid/use_grid_layout_events.ts @@ -87,6 +87,7 @@ export const useGridLayoutEvents = ({ bottom: mouseTargetPixel.y - interactionEvent.mouseOffsets.bottom, right: mouseTargetPixel.x - interactionEvent.mouseOffsets.right, }; + gridLayoutStateManager.activePanel$.next({ id: interactionEvent.id, position: previewRect }); // find the grid that the preview rect is over diff --git a/packages/kbn-grid-layout/grid/utils/resolve_grid_row.ts b/packages/kbn-grid-layout/grid/utils/resolve_grid_row.ts index 9a6f28d006e0a..38b778b5d0571 100644 --- a/packages/kbn-grid-layout/grid/utils/resolve_grid_row.ts +++ b/packages/kbn-grid-layout/grid/utils/resolve_grid_row.ts @@ -34,11 +34,11 @@ const getAllCollisionsWithPanel = ( return collidingPanels; }; -export const getKeysInOrder = (rowData: GridRowData, draggedId?: string): string[] => { - const panelKeys = Object.keys(rowData.panels); +export const getKeysInOrder = (panels: GridRowData['panels'], draggedId?: string): string[] => { + const panelKeys = Object.keys(panels); return panelKeys.sort((panelKeyA, panelKeyB) => { - const panelA = rowData.panels[panelKeyA]; - const panelB = rowData.panels[panelKeyB]; + const panelA = panels[panelKeyA]; + const panelB = panels[panelKeyB]; // sort by row first if (panelA.row > panelB.row) return 1; @@ -60,7 +60,7 @@ export const getKeysInOrder = (rowData: GridRowData, draggedId?: string): string const compactGridRow = (originalLayout: GridRowData) => { const nextRowData = { ...originalLayout, panels: { ...originalLayout.panels } }; // compact all vertical space. - const sortedKeysAfterMove = getKeysInOrder(nextRowData); + const sortedKeysAfterMove = getKeysInOrder(nextRowData.panels); for (const panelKey of sortedKeysAfterMove) { const panel = nextRowData.panels[panelKey]; // try moving panel up one row at a time until it collides @@ -90,7 +90,7 @@ export const resolveGridRow = ( // return nextRowData; // push all panels down if they collide with another panel - const sortedKeys = getKeysInOrder(nextRowData, dragRequest?.id); + const sortedKeys = getKeysInOrder(nextRowData.panels, dragRequest?.id); for (const key of sortedKeys) { const panel = nextRowData.panels[key]; diff --git a/packages/kbn-grid-layout/tsconfig.json b/packages/kbn-grid-layout/tsconfig.json index f0dd3232a42d5..bd16ae0f0adeb 100644 --- a/packages/kbn-grid-layout/tsconfig.json +++ b/packages/kbn-grid-layout/tsconfig.json @@ -2,12 +2,6 @@ "extends": "../../tsconfig.base.json", "compilerOptions": { "outDir": "target/types", - "types": [ - "jest", - "node", - "react", - "@emotion/react/types/css-prop" - ] }, "include": [ "**/*.ts", diff --git a/packages/kbn-securitysolution-utils/src/esql/index.ts b/packages/kbn-securitysolution-utils/src/esql/index.ts index 22c2cc42a9fed..930ff246988ea 100644 --- a/packages/kbn-securitysolution-utils/src/esql/index.ts +++ b/packages/kbn-securitysolution-utils/src/esql/index.ts @@ -9,3 +9,4 @@ export * from './compute_if_esql_query_aggregating'; export * from './get_index_list_from_esql_query'; +export * from './parse_esql_query'; diff --git a/packages/kbn-securitysolution-utils/src/esql/parse_esql_query.test.ts b/packages/kbn-securitysolution-utils/src/esql/parse_esql_query.test.ts new file mode 100644 index 0000000000000..6c4fdafd8e70b --- /dev/null +++ b/packages/kbn-securitysolution-utils/src/esql/parse_esql_query.test.ts @@ -0,0 +1,119 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import { parseEsqlQuery } from './parse_esql_query'; + +describe('parseEsqlQuery', () => { + describe('ES|QL query syntax', () => { + it.each([['incorrect syntax'], ['from test* metadata']])( + 'detects incorrect syntax in "%s"', + (esqlQuery) => { + const result = parseEsqlQuery(esqlQuery); + expect(result.errors.length).toEqual(1); + expect(result.errors[0].message.startsWith('SyntaxError:')).toBeTruthy(); + expect(parseEsqlQuery(esqlQuery)).toMatchObject({ + hasMetadataOperator: false, + isEsqlQueryAggregating: false, + }); + } + ); + + it.each([ + ['from test* metadata _id'], + [ + 'FROM kibana_sample_data_logs | STATS total_bytes = SUM(bytes) BY host | WHERE total_bytes > 200000 | SORT total_bytes DESC | LIMIT 10', + ], + [ + `from packetbeat* metadata + _id + | limit 100`, + ], + [ + `FROM kibana_sample_data_logs | + STATS total_bytes = SUM(bytes) BY host | + WHERE total_bytes > 200000 | + SORT total_bytes DESC | + LIMIT 10`, + ], + ])('parses correctly valid syntax in "%s"', (esqlQuery) => { + const result = parseEsqlQuery(esqlQuery); + expect(result.errors.length).toEqual(0); + expect(result).toMatchObject({ errors: [] }); + }); + }); + + describe('METADATA operator', () => { + it.each([ + ['from test*'], + ['from metadata*'], + ['from test* | keep metadata'], + ['from test* | eval x="metadata _id"'], + ])('detects when METADATA operator is missing in a NON aggregating query "%s"', (esqlQuery) => { + expect(parseEsqlQuery(esqlQuery)).toEqual({ + errors: [], + hasMetadataOperator: false, + isEsqlQueryAggregating: false, + }); + }); + + it.each([ + ['from test* metadata _id'], + ['from test* metadata _id, _index'], + ['from test* metadata _index, _id'], + ['from test* metadata _id '], + ['from test* metadata _id '], + ['from test* metadata _id | limit 10'], + [ + `from packetbeat* metadata + + _id + | limit 100`, + ], + ])('detects existin METADATA operator in a NON aggregating query "%s"', (esqlQuery) => + expect(parseEsqlQuery(esqlQuery)).toEqual({ + errors: [], + hasMetadataOperator: true, + isEsqlQueryAggregating: false, + }) + ); + + it('detects missing METADATA operator in an aggregating query "from test* | stats c = count(*) by fieldA"', () => + expect(parseEsqlQuery('from test* | stats c = count(*) by fieldA')).toEqual({ + errors: [], + hasMetadataOperator: false, + isEsqlQueryAggregating: true, + })); + }); + + describe('METADATA _id field for NON aggregating queries', () => { + it('detects missing METADATA "_id" field', () => { + expect(parseEsqlQuery('from test*')).toEqual({ + errors: [], + hasMetadataOperator: false, + isEsqlQueryAggregating: false, + }); + }); + + it('detects existing METADATA "_id" field', async () => { + expect(parseEsqlQuery('from test* metadata _id')).toEqual({ + errors: [], + hasMetadataOperator: true, + isEsqlQueryAggregating: false, + }); + }); + }); + + describe('METADATA _id field for aggregating queries', () => { + it('detects existing METADATA operator with missing "_id" field', () => { + expect( + parseEsqlQuery('from test* metadata someField | stats c = count(*) by fieldA') + ).toEqual({ errors: [], hasMetadataOperator: false, isEsqlQueryAggregating: true }); + }); + }); +}); diff --git a/x-pack/plugins/security_solution/server/lib/siem_migrations/rules/task/agent/sub_graphs/translate_rule/nodes/validation/esql_query.ts b/packages/kbn-securitysolution-utils/src/esql/parse_esql_query.ts similarity index 66% rename from x-pack/plugins/security_solution/server/lib/siem_migrations/rules/task/agent/sub_graphs/translate_rule/nodes/validation/esql_query.ts rename to packages/kbn-securitysolution-utils/src/esql/parse_esql_query.ts index a8c1d6acff408..2a62aed8873a0 100644 --- a/x-pack/plugins/security_solution/server/lib/siem_migrations/rules/task/agent/sub_graphs/translate_rule/nodes/validation/esql_query.ts +++ b/packages/kbn-securitysolution-utils/src/esql/parse_esql_query.ts @@ -1,21 +1,40 @@ /* * 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. + * or more contributor license agreements. Licensed under the "Elastic License + * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". */ -import type { ESQLAstQueryExpression, ESQLCommandOption, EditorError } from '@kbn/esql-ast'; -import { parse } from '@kbn/esql-ast'; +import { type ESQLAstQueryExpression, parse, ESQLCommandOption, EditorError } from '@kbn/esql-ast'; import { isColumnItem, isOptionItem } from '@kbn/esql-validation-autocomplete'; -import { isAggregatingQuery } from '@kbn/securitysolution-utils'; +import { isAggregatingQuery } from './compute_if_esql_query_aggregating'; -interface ParseEsqlQueryResult { +export interface ParseEsqlQueryResult { errors: EditorError[]; isEsqlQueryAggregating: boolean; hasMetadataOperator: boolean; } +/** + * check if esql query valid for Security rule: + * - if it's non aggregation query it must have metadata operator + */ +export const parseEsqlQuery = (query: string): ParseEsqlQueryResult => { + const { root, errors } = parse(query); + const isEsqlQueryAggregating = isAggregatingQuery(root); + + return { + errors, + isEsqlQueryAggregating, + hasMetadataOperator: computeHasMetadataOperator(root), + }; +}; + +/** + * checks whether query has metadata _id operator + */ function computeHasMetadataOperator(astExpression: ESQLAstQueryExpression): boolean { // Check whether the `from` command has `metadata` operator const metadataOption = getMetadataOption(astExpression); @@ -50,13 +69,3 @@ function getMetadataOption(astExpression: ESQLAstQueryExpression): ESQLCommandOp return undefined; } - -export const parseEsqlQuery = (query: string): ParseEsqlQueryResult => { - const { root, errors } = parse(query); - const isEsqlQueryAggregating = isAggregatingQuery(root); - return { - errors, - isEsqlQueryAggregating, - hasMetadataOperator: computeHasMetadataOperator(root), - }; -}; diff --git a/packages/kbn-securitysolution-utils/tsconfig.json b/packages/kbn-securitysolution-utils/tsconfig.json index 5b9520c487e31..d45b0c973af87 100644 --- a/packages/kbn-securitysolution-utils/tsconfig.json +++ b/packages/kbn-securitysolution-utils/tsconfig.json @@ -13,7 +13,8 @@ "kbn_references": [ "@kbn/i18n", "@kbn/esql-utils", - "@kbn/esql-ast" + "@kbn/esql-ast", + "@kbn/esql-validation-autocomplete" ], "exclude": [ "target/**/*", diff --git a/x-pack/plugins/observability_solution/synthetics/common/rules/alert_actions.test.ts b/x-pack/plugins/observability_solution/synthetics/common/rules/alert_actions.test.ts index dd7ad03b9ac32..3bb2c9a4f5aef 100644 --- a/x-pack/plugins/observability_solution/synthetics/common/rules/alert_actions.test.ts +++ b/x-pack/plugins/observability_solution/synthetics/common/rules/alert_actions.test.ts @@ -291,4 +291,77 @@ describe('Alert Actions factory', () => { }, ]); }); + + it('generate expected action for email opsgenie connector', async () => { + const resp = populateAlertActions({ + groupId: SYNTHETICS_MONITOR_STATUS.id, + defaultActions: [ + { + frequency: { + notifyWhen: 'onActionGroupChange', + summary: false, + throttle: null, + }, + actionTypeId: '.opsgenie', + group: 'xpack.synthetics.alerts.actionGroups.monitorStatus', + params: {}, + id: 'f2a3b195-ed76-499a-805d-82d24d4eeba9', + }, + ] as unknown as ActionConnector[], + defaultEmail: { + to: ['test@email.com'], + }, + translations: { + defaultActionMessage: SyntheticsMonitorStatusTranslations.defaultActionMessage, + defaultRecoveryMessage: SyntheticsMonitorStatusTranslations.defaultRecoveryMessage, + defaultSubjectMessage: SyntheticsMonitorStatusTranslations.defaultSubjectMessage, + defaultRecoverySubjectMessage: + SyntheticsMonitorStatusTranslations.defaultRecoverySubjectMessage, + }, + }); + expect(resp).toEqual([ + { + frequency: { + notifyWhen: 'onActionGroupChange', + summary: false, + throttle: null, + }, + group: 'recovered', + id: 'f2a3b195-ed76-499a-805d-82d24d4eeba9', + params: { + subAction: 'closeAlert', + subActionParams: { + alias: '{{rule.id}}:{{alert.id}}', + description: + 'The alert for monitor "{{context.monitorName}}" from {{context.locationNames}} is no longer active: {{context.recoveryReason}}. - Elastic Synthetics\n\nDetails:\n\n- Monitor name: {{context.monitorName}} \n- {{context.monitorUrlLabel}}: {{{context.monitorUrl}}} \n- Monitor type: {{context.monitorType}} \n- From: {{context.locationNames}} \n- Last error received: {{{context.lastErrorMessage}}} \n{{{context.linkMessage}}}', + message: + 'Monitor "{{context.monitorName}}" ({{context.locationNames}}) {{context.recoveryStatus}} - Elastic Synthetics', + priority: 'P2', + tags: ['{{rule.tags}}'], + }, + }, + }, + { + frequency: { + notifyWhen: 'onActionGroupChange', + summary: false, + throttle: null, + }, + group: 'xpack.synthetics.alerts.actionGroups.monitorStatus', + id: 'f2a3b195-ed76-499a-805d-82d24d4eeba9', + params: { + subAction: 'createAlert', + subActionParams: { + alias: '{{rule.id}}:{{alert.id}}', + description: + 'Monitor "{{context.monitorName}}" is {{{context.status}}} from {{context.locationNames}}.{{{context.pendingLastRunAt}}} - Elastic Synthetics\n\nDetails:\n\n- Monitor name: {{context.monitorName}} \n- {{context.monitorUrlLabel}}: {{{context.monitorUrl}}} \n- Monitor type: {{context.monitorType}} \n- Checked at: {{context.checkedAt}} \n- From: {{context.locationNames}} \n- Reason: {{{context.reason}}} \n- Error received: {{{context.lastErrorMessage}}} \n{{{context.linkMessage}}}', + message: + 'Monitor "{{context.monitorName}}" ({{context.locationNames}}) is down - Elastic Synthetics', + priority: 'P2', + tags: ['{{rule.tags}}'], + }, + }, + }, + ]); + }); }); diff --git a/x-pack/plugins/observability_solution/synthetics/common/rules/alert_actions.ts b/x-pack/plugins/observability_solution/synthetics/common/rules/alert_actions.ts index 9b6d9d0992baa..a9981cd257ee6 100644 --- a/x-pack/plugins/observability_solution/synthetics/common/rules/alert_actions.ts +++ b/x-pack/plugins/observability_solution/synthetics/common/rules/alert_actions.ts @@ -14,10 +14,12 @@ import type { WebhookActionParams, EmailActionParams, SlackApiActionParams, + OpsgenieActionParams, } from '@kbn/stack-connectors-plugin/server/connector_types'; import { RuleAction as RuleActionOrig } from '@kbn/alerting-plugin/common'; import { v4 as uuidv4 } from 'uuid'; +import { OpsgenieSubActions } from '@kbn/stack-connectors-plugin/common'; import { ActionConnector, ActionTypeId } from './types'; import { DefaultEmail } from '../runtime_types'; @@ -31,6 +33,7 @@ export const SERVICE_NOW_ACTION_ID: ActionTypeId = '.servicenow'; export const JIRA_ACTION_ID: ActionTypeId = '.jira'; export const WEBHOOK_ACTION_ID: ActionTypeId = '.webhook'; export const EMAIL_ACTION_ID: ActionTypeId = '.email'; +export const OPSGENIE_ACTION_ID: ActionTypeId = '.opsgenie'; export type RuleAction = Omit; @@ -128,6 +131,14 @@ export function populateAlertActions({ actions.push(recoveredAction); } break; + case OPSGENIE_ACTION_ID: + // @ts-expect-error + action.params = getOpsgenieActionParams(translations); + // @ts-expect-error + recoveredAction.params = getOpsgenieActionParams(translations, true); + actions.push(recoveredAction); + break; + default: action.params = { message: translations.defaultActionMessage, @@ -293,3 +304,24 @@ function getEmailActionParams( }, }; } + +function getOpsgenieActionParams( + { + defaultActionMessage, + defaultSubjectMessage, + defaultRecoverySubjectMessage, + defaultRecoveryMessage, + }: Translations, + isRecovery?: boolean +): OpsgenieActionParams { + return { + subAction: isRecovery ? OpsgenieSubActions.CloseAlert : OpsgenieSubActions.CreateAlert, + subActionParams: { + alias: '{{rule.id}}:{{alert.id}}', + tags: ['{{rule.tags}}'], + message: isRecovery ? defaultRecoverySubjectMessage : defaultSubjectMessage, + description: isRecovery ? defaultRecoveryMessage : defaultActionMessage, + priority: 'P2', + }, + } as OpsgenieActionParams; +} diff --git a/x-pack/plugins/observability_solution/synthetics/common/rules/types.ts b/x-pack/plugins/observability_solution/synthetics/common/rules/types.ts index a1888a100c178..0186bc8dc5252 100644 --- a/x-pack/plugins/observability_solution/synthetics/common/rules/types.ts +++ b/x-pack/plugins/observability_solution/synthetics/common/rules/types.ts @@ -16,6 +16,7 @@ import type { TeamsConnectorTypeId, WebhookConnectorTypeId, EmailConnectorTypeId, + OpsgenieConnectorTypeId, } from '@kbn/stack-connectors-plugin/server/connector_types'; import type { ActionConnector as RawActionConnector } from '@kbn/triggers-actions-ui-plugin/public'; @@ -31,6 +32,7 @@ export type ActionTypeId = | typeof ServiceNowConnectorTypeId | typeof JiraConnectorTypeId | typeof WebhookConnectorTypeId - | typeof EmailConnectorTypeId; + | typeof EmailConnectorTypeId + | typeof OpsgenieConnectorTypeId; export type ActionConnector = Omit & { config?: SlackApiConfig }; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/esql_query_edit/validators/esql_query_validator_factory.ts b/x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/esql_query_edit/validators/esql_query_validator_factory.ts index 90cdaff14cc9b..c5b54db172a18 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/esql_query_edit/validators/esql_query_validator_factory.ts +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/esql_query_edit/validators/esql_query_validator_factory.ts @@ -7,10 +7,7 @@ import type { QueryClient } from '@tanstack/react-query'; import type { DatatableColumn } from '@kbn/expressions-plugin/common'; -import type { ESQLAstQueryExpression, ESQLCommandOption } from '@kbn/esql-ast'; -import { parse } from '@kbn/esql-ast'; -import { isAggregatingQuery } from '@kbn/securitysolution-utils'; -import { isColumnItem, isOptionItem } from '@kbn/esql-validation-autocomplete'; +import { parseEsqlQuery } from '@kbn/securitysolution-utils'; import type { FormData, ValidationError, ValidationFunc } from '../../../../../shared_imports'; import type { FieldValueQueryBar } from '../../../../rule_creation_ui/components/query_bar_field'; import { fetchEsqlQueryColumns } from '../../../logic/esql_query_columns'; @@ -79,59 +76,6 @@ function hasIdColumn(columns: DatatableColumn[]): boolean { return columns.some(({ id }) => '_id' === id); } -/** - * check if esql query valid for Security rule: - * - if it's non aggregation query it must have metadata operator - */ -function parseEsqlQuery(query: string) { - const { root, errors } = parse(query); - const isEsqlQueryAggregating = isAggregatingQuery(root); - - return { - errors, - isEsqlQueryAggregating, - hasMetadataOperator: computeHasMetadataOperator(root), - }; -} - -/** - * checks whether query has metadata _id operator - */ -function computeHasMetadataOperator(astExpression: ESQLAstQueryExpression): boolean { - // Check whether the `from` command has `metadata` operator - const metadataOption = getMetadataOption(astExpression); - if (!metadataOption) { - return false; - } - - // Check whether the `metadata` operator has `_id` argument - const idColumnItem = metadataOption.args.find( - (fromArg) => isColumnItem(fromArg) && fromArg.name === '_id' - ); - if (!idColumnItem) { - return false; - } - - return true; -} - -function getMetadataOption(astExpression: ESQLAstQueryExpression): ESQLCommandOption | undefined { - const fromCommand = astExpression.commands.find((x) => x.name === 'from'); - - if (!fromCommand?.args) { - return undefined; - } - - // Check whether the `from` command has `metadata` operator - for (const fromArg of fromCommand.args) { - if (isOptionItem(fromArg) && fromArg.name === 'metadata') { - return fromArg; - } - } - - return undefined; -} - function constructSyntaxError(error: Error): ValidationError { return { code: ESQL_ERROR_CODES.INVALID_SYNTAX, diff --git a/x-pack/plugins/security_solution/server/lib/siem_migrations/rules/task/agent/sub_graphs/translate_rule/nodes/validation/validation.ts b/x-pack/plugins/security_solution/server/lib/siem_migrations/rules/task/agent/sub_graphs/translate_rule/nodes/validation/validation.ts index 272aedfe4793d..6f97678a04558 100644 --- a/x-pack/plugins/security_solution/server/lib/siem_migrations/rules/task/agent/sub_graphs/translate_rule/nodes/validation/validation.ts +++ b/x-pack/plugins/security_solution/server/lib/siem_migrations/rules/task/agent/sub_graphs/translate_rule/nodes/validation/validation.ts @@ -7,8 +7,8 @@ import type { Logger } from '@kbn/core/server'; import { isEmpty } from 'lodash/fp'; +import { parseEsqlQuery } from '@kbn/securitysolution-utils'; import type { GraphNode } from '../../types'; -import { parseEsqlQuery } from './esql_query'; interface GetValidationNodeParams { logger: Logger; diff --git a/x-pack/plugins/security_solution/tsconfig.json b/x-pack/plugins/security_solution/tsconfig.json index 91951c667fa45..c4e658eacd44f 100644 --- a/x-pack/plugins/security_solution/tsconfig.json +++ b/x-pack/plugins/security_solution/tsconfig.json @@ -205,8 +205,6 @@ "@kbn/core-theme-browser", "@kbn/integration-assistant-plugin", "@kbn/avc-banner", - "@kbn/esql-ast", - "@kbn/esql-validation-autocomplete", "@kbn/config", "@kbn/openapi-common", "@kbn/securitysolution-lists-common", diff --git a/x-pack/plugins/stack_connectors/server/connector_types/index.ts b/x-pack/plugins/stack_connectors/server/connector_types/index.ts index a156547cc2fa6..08b0331f1cf2f 100644 --- a/x-pack/plugins/stack_connectors/server/connector_types/index.ts +++ b/x-pack/plugins/stack_connectors/server/connector_types/index.ts @@ -63,6 +63,7 @@ export { ConnectorTypeId as WebhookConnectorTypeId } from './webhook'; export type { ActionParamsType as WebhookActionParams } from './webhook/types'; export { ConnectorTypeId as XmattersConnectorTypeId } from './xmatters'; export type { ActionParamsType as XmattersActionParams } from './xmatters'; +export { OpsgenieConnectorTypeId } from './opsgenie'; export type { OpsgenieActionConfig, diff --git a/x-pack/plugins/stack_connectors/server/connector_types/opsgenie/index.ts b/x-pack/plugins/stack_connectors/server/connector_types/opsgenie/index.ts index 7e92a3b7f3332..9570e0033f531 100644 --- a/x-pack/plugins/stack_connectors/server/connector_types/opsgenie/index.ts +++ b/x-pack/plugins/stack_connectors/server/connector_types/opsgenie/index.ts @@ -39,6 +39,8 @@ export const getOpsgenieConnectorType = (): SubActionConnectorType