From cc946c46e445934f8644722c179517f84c75753f Mon Sep 17 00:00:00 2001 From: christineweng <18648970+christineweng@users.noreply.github.com> Date: Tue, 15 Aug 2023 03:34:34 -0500 Subject: [PATCH 1/3] [Security solution] Expandable flyout - add subtab to path (#162748) --- packages/kbn-expandable-flyout/index.ts | 2 +- .../kbn-expandable-flyout/src/reducer.test.ts | 4 +- packages/kbn-expandable-flyout/src/types.ts | 15 ++++++- .../public/flyout/left/index.tsx | 19 ++++----- .../public/flyout/left/tabs/insights_tab.tsx | 39 ++++++++++++++++--- .../public/flyout/left/tabs/visualize_tab.tsx | 31 +++++++++++++-- .../public/flyout/preview/index.tsx | 7 ++-- .../right/components/analyzer_tree.test.tsx | 5 ++- .../flyout/right/components/analyzer_tree.tsx | 8 +++- .../components/correlations_overview.test.tsx | 5 ++- .../components/correlations_overview.tsx | 8 +++- .../flyout/right/components/description.tsx | 4 +- .../right/components/entities_overview.tsx | 8 +++- .../highlighted_fields_cell.test.tsx | 5 ++- .../components/highlighted_fields_cell.tsx | 5 ++- .../components/host_entity_overview.test.tsx | 5 ++- .../right/components/host_entity_overview.tsx | 5 ++- .../components/investigation_guide_button.tsx | 6 ++- .../components/prevalence_overview.test.tsx | 5 ++- .../right/components/prevalence_overview.tsx | 8 +++- .../right/components/response_button.tsx | 4 +- .../right/components/session_preview.test.tsx | 5 ++- .../right/components/session_preview.tsx | 9 +++-- .../threat_intelligence_overview.test.tsx | 5 ++- .../threat_intelligence_overview.tsx | 8 +++- .../components/user_entity_overview.test.tsx | 5 ++- .../right/components/user_entity_overview.tsx | 5 ++- .../public/flyout/right/index.tsx | 12 +++--- 28 files changed, 174 insertions(+), 73 deletions(-) diff --git a/packages/kbn-expandable-flyout/index.ts b/packages/kbn-expandable-flyout/index.ts index 576525206d4e2..5a9094d6dbac9 100644 --- a/packages/kbn-expandable-flyout/index.ts +++ b/packages/kbn-expandable-flyout/index.ts @@ -16,4 +16,4 @@ export { export type { ExpandableFlyoutApi } from './src/context'; export type { ExpandableFlyoutProps } from './src'; -export type { FlyoutPanelProps } from './src/types'; +export type { FlyoutPanelProps, PanelPath } from './src/types'; diff --git a/packages/kbn-expandable-flyout/src/reducer.test.ts b/packages/kbn-expandable-flyout/src/reducer.test.ts index d5deeb6c0b03b..475566a059a80 100644 --- a/packages/kbn-expandable-flyout/src/reducer.test.ts +++ b/packages/kbn-expandable-flyout/src/reducer.test.ts @@ -12,7 +12,7 @@ import { Action, ActionType } from './actions'; const rightPanel1: FlyoutPanelProps = { id: 'right1', - path: ['path'], + path: { tab: 'tab' }, }; const leftPanel1: FlyoutPanelProps = { id: 'left1', @@ -25,7 +25,7 @@ const previewPanel1: FlyoutPanelProps = { const rightPanel2: FlyoutPanelProps = { id: 'right2', - path: ['path'], + path: { tab: 'tab' }, }; const leftPanel2: FlyoutPanelProps = { id: 'left2', diff --git a/packages/kbn-expandable-flyout/src/types.ts b/packages/kbn-expandable-flyout/src/types.ts index 883f0b7aefc00..bfe64c4599085 100644 --- a/packages/kbn-expandable-flyout/src/types.ts +++ b/packages/kbn-expandable-flyout/src/types.ts @@ -8,6 +8,17 @@ import React from 'react'; +export interface PanelPath { + /** + * Top level tab that to be displayed + */ + tab: string; + /** + * Optional secondary level to be displayed under top level tab + */ + subTab?: string; +} + export interface FlyoutPanelProps { /** * Unique key to identify the panel @@ -18,9 +29,9 @@ export interface FlyoutPanelProps { */ params?: Record; /** - * Tracks the path for what to show in a panel. We may have multiple tabs or details..., so easiest to just use a stack + * Tracks the path for what to show in a panel, such as activated tab and subtab */ - path?: string[]; + path?: PanelPath; /** * Tracks visual state such as whether the panel is collapsed */ diff --git a/x-pack/plugins/security_solution/public/flyout/left/index.tsx b/x-pack/plugins/security_solution/public/flyout/left/index.tsx index c8a3a73b5b84d..627689f78b39d 100644 --- a/x-pack/plugins/security_solution/public/flyout/left/index.tsx +++ b/x-pack/plugins/security_solution/public/flyout/left/index.tsx @@ -9,7 +9,7 @@ import type { FC } from 'react'; import React, { memo, useMemo } from 'react'; import { useEuiBackgroundColor } from '@elastic/eui'; import { css } from '@emotion/react'; -import type { FlyoutPanelProps } from '@kbn/expandable-flyout'; +import type { FlyoutPanelProps, PanelPath } from '@kbn/expandable-flyout'; import { useExpandableFlyoutContext } from '@kbn/expandable-flyout'; import { PanelHeader } from './header'; import { PanelContent } from './content'; @@ -19,15 +19,14 @@ import { useLeftPanelContext } from './context'; export type LeftPanelPaths = 'visualize' | 'insights' | 'investigation' | 'response'; export const LeftPanelKey: LeftPanelProps['key'] = 'document-details-left'; - -export const LeftPanelVisualizeTabPath: LeftPanelProps['path'] = ['visualize']; -export const LeftPanelInsightsTabPath: LeftPanelProps['path'] = ['insights']; -export const LeftPanelInvestigationTabPath: LeftPanelProps['path'] = ['investigation']; -export const LeftPanelResponseTabPath: LeftPanelProps['path'] = ['response']; +export const LeftPanelVisualizeTab: LeftPanelPaths = 'visualize'; +export const LeftPanelInsightsTab: LeftPanelPaths = 'insights'; +export const LeftPanelInvestigationTab: LeftPanelPaths = 'investigation'; +export const LeftPanelResponseTab: LeftPanelPaths = 'response'; export interface LeftPanelProps extends FlyoutPanelProps { key: 'document-details-left'; - path?: LeftPanelPaths[]; + path?: PanelPath; params?: { id: string; indexName: string; @@ -42,13 +41,15 @@ export const LeftPanel: FC> = memo(({ path }) => { const selectedTabId = useMemo(() => { const defaultTab = tabs[0].id; if (!path) return defaultTab; - return tabs.map((tab) => tab.id).find((tabId) => tabId === path[0]) ?? defaultTab; + return tabs.map((tab) => tab.id).find((tabId) => tabId === path.tab) ?? defaultTab; }, [path]); const setSelectedTabId = (tabId: LeftPanelTabsType[number]['id']) => { openLeftPanel({ id: LeftPanelKey, - path: [tabId], + path: { + tab: tabId, + }, params: { id: eventId, indexName, diff --git a/x-pack/plugins/security_solution/public/flyout/left/tabs/insights_tab.tsx b/x-pack/plugins/security_solution/public/flyout/left/tabs/insights_tab.tsx index 3db07a1d455a2..a041a980752be 100644 --- a/x-pack/plugins/security_solution/public/flyout/left/tabs/insights_tab.tsx +++ b/x-pack/plugins/security_solution/public/flyout/left/tabs/insights_tab.tsx @@ -5,10 +5,11 @@ * 2.0. */ -import React, { memo, useCallback, useState } from 'react'; +import React, { memo, useCallback, useState, useEffect } from 'react'; import { EuiButtonGroup, EuiSpacer } from '@elastic/eui'; import type { EuiButtonGroupOptionProps } from '@elastic/eui/src/components/button/button_group/button_group'; +import { useExpandableFlyoutContext } from '@kbn/expandable-flyout'; import { INSIGHTS_TAB_BUTTON_GROUP_TEST_ID, INSIGHTS_TAB_ENTITIES_BUTTON_TEST_ID, @@ -16,7 +17,8 @@ import { INSIGHTS_TAB_PREVALENCE_BUTTON_TEST_ID, INSIGHTS_TAB_CORRELATIONS_BUTTON_TEST_ID, } from './test_ids'; - +import { useLeftPanelContext } from '../context'; +import { LeftPanelKey, LeftPanelInsightsTab } from '..'; import { INSIGHTS_BUTTONGROUP_OPTIONS, ENTITIES_BUTTON, @@ -59,11 +61,36 @@ const insightsButtons: EuiButtonGroupOptionProps[] = [ * Insights view displayed in the document details expandable flyout left section */ export const InsightsTab: React.FC = memo(() => { - const [activeInsightsId, setActiveInsightsId] = useState(ENTITIES_TAB_ID); + const { eventId, indexName, scopeId } = useLeftPanelContext(); + const { panels, openLeftPanel } = useExpandableFlyoutContext(); + const [activeInsightsId, setActiveInsightsId] = useState( + panels.left?.path?.subTab ?? ENTITIES_TAB_ID + ); + + const onChangeCompressed = useCallback( + (optionId: string) => { + setActiveInsightsId(optionId); + openLeftPanel({ + id: LeftPanelKey, + path: { + tab: LeftPanelInsightsTab, + subTab: optionId, + }, + params: { + id: eventId, + indexName, + scopeId, + }, + }); + }, + [eventId, indexName, scopeId, openLeftPanel] + ); - const onChangeCompressed = useCallback((optionId: string) => { - setActiveInsightsId(optionId); - }, []); + useEffect(() => { + if (panels.left?.path?.subTab) { + setActiveInsightsId(panels.left?.path?.subTab); + } + }, [panels.left?.path?.subTab]); return ( <> diff --git a/x-pack/plugins/security_solution/public/flyout/left/tabs/visualize_tab.tsx b/x-pack/plugins/security_solution/public/flyout/left/tabs/visualize_tab.tsx index 7f31d25058c1c..baedc5c1cec73 100644 --- a/x-pack/plugins/security_solution/public/flyout/left/tabs/visualize_tab.tsx +++ b/x-pack/plugins/security_solution/public/flyout/left/tabs/visualize_tab.tsx @@ -6,9 +6,12 @@ */ import type { FC } from 'react'; -import React, { memo, useState, useCallback } from 'react'; +import React, { memo, useState, useCallback, useEffect } from 'react'; import { EuiButtonGroup, EuiSpacer } from '@elastic/eui'; import type { EuiButtonGroupOptionProps } from '@elastic/eui/src/components/button/button_group/button_group'; +import { useExpandableFlyoutContext } from '@kbn/expandable-flyout'; +import { useLeftPanelContext } from '../context'; +import { LeftPanelKey, LeftPanelVisualizeTab } from '..'; import { VISUALIZE_TAB_BUTTON_GROUP_TEST_ID, VISUALIZE_TAB_GRAPH_ANALYZER_BUTTON_TEST_ID, @@ -41,7 +44,11 @@ const visualizeButtons: EuiButtonGroupOptionProps[] = [ * Visualize view displayed in the document details expandable flyout left section */ export const VisualizeTab: FC = memo(() => { - const [activeVisualizationId, setActiveVisualizationId] = useState(SESSION_VIEW_ID); + const { eventId, indexName, scopeId } = useLeftPanelContext(); + const { panels, openLeftPanel } = useExpandableFlyoutContext(); + const [activeVisualizationId, setActiveVisualizationId] = useState( + panels.left?.path?.subTab ?? SESSION_VIEW_ID + ); const { startTransaction } = useStartTransaction(); const onChangeCompressed = useCallback( (optionId: string) => { @@ -49,10 +56,28 @@ export const VisualizeTab: FC = memo(() => { if (optionId === ANALYZE_GRAPH_ID) { startTransaction({ name: ALERTS_ACTIONS.OPEN_ANALYZER }); } + openLeftPanel({ + id: LeftPanelKey, + path: { + tab: LeftPanelVisualizeTab, + subTab: optionId, + }, + params: { + id: eventId, + indexName, + scopeId, + }, + }); }, - [startTransaction] + [startTransaction, eventId, indexName, scopeId, openLeftPanel] ); + useEffect(() => { + if (panels.left?.path?.subTab) { + setActiveVisualizationId(panels.left?.path?.subTab); + } + }, [panels.left?.path?.subTab]); + return ( <> > = memo(({ path }) => { const previewPanel = useMemo(() => { - return path ? panels.find((panel) => panel.id === path[0]) : null; + return path ? panels.find((panel) => panel.id === path.tab) : null; }, [path]); if (!previewPanel) { diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/analyzer_tree.test.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/analyzer_tree.test.tsx index ce29b9959ff8c..8cbc791c234d2 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/analyzer_tree.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/analyzer_tree.test.tsx @@ -22,7 +22,8 @@ import { AnalyzerTree } from './analyzer_tree'; import { ExpandableFlyoutContext } from '@kbn/expandable-flyout/src/context'; import { TestProviders } from '@kbn/timelines-plugin/public/mock'; import { RightPanelContext } from '../context'; -import { LeftPanelKey, LeftPanelVisualizeTabPath } from '../../left'; +import { LeftPanelKey, LeftPanelVisualizeTab } from '../../left'; +import { ANALYZE_GRAPH_ID } from '../../left/components/analyze_graph'; const defaultProps: AnalyzerTreeProps = { statsNodes: mock.mockStatsNodes, @@ -92,7 +93,7 @@ describe('', () => { getByTestId(ANALYZER_PREVIEW_TITLE_LINK_TEST_ID).click(); expect(flyoutContextValue.openLeftPanel).toHaveBeenCalledWith({ id: LeftPanelKey, - path: LeftPanelVisualizeTabPath, + path: { tab: LeftPanelVisualizeTab, subTab: ANALYZE_GRAPH_ID }, params: { id: panelContextValue.eventId, indexName: panelContextValue.indexName, diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/analyzer_tree.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/analyzer_tree.tsx index 87504dc05818f..e22ee53fda80c 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/analyzer_tree.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/analyzer_tree.tsx @@ -9,9 +9,10 @@ import { EuiTreeView } from '@elastic/eui'; import { useExpandableFlyoutContext } from '@kbn/expandable-flyout'; import { ExpandablePanel } from '../../shared/components/expandable_panel'; import { useRightPanelContext } from '../context'; -import { LeftPanelKey, LeftPanelVisualizeTabPath } from '../../left'; +import { LeftPanelKey, LeftPanelVisualizeTab } from '../../left'; import { ANALYZER_PREVIEW_TITLE } from './translations'; import { ANALYZER_PREVIEW_TEST_ID } from './test_ids'; +import { ANALYZE_GRAPH_ID } from '../../left/components/analyze_graph'; import type { StatsNode } from '../../../common/containers/alerts/use_alert_prevalence_from_process_tree'; import { getTreeNodes } from '../utils/analyzer_helpers'; @@ -63,7 +64,10 @@ export const AnalyzerTree: React.FC = ({ const goToAnalyserTab = useCallback(() => { openLeftPanel({ id: LeftPanelKey, - path: LeftPanelVisualizeTabPath, + path: { + tab: LeftPanelVisualizeTab, + subTab: ANALYZE_GRAPH_ID, + }, params: { id: eventId, indexName, diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/correlations_overview.test.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/correlations_overview.test.tsx index b5be75716664a..70b37762b704b 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/correlations_overview.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/correlations_overview.test.tsx @@ -11,8 +11,9 @@ import { ExpandableFlyoutContext } from '@kbn/expandable-flyout/src/context'; import { RightPanelContext } from '../context'; import { TestProviders } from '../../../common/mock'; import { CorrelationsOverview } from './correlations_overview'; -import { LeftPanelInsightsTabPath, LeftPanelKey } from '../../left'; import { useCorrelations } from '../../shared/hooks/use_correlations'; +import { CORRELATIONS_TAB_ID } from '../../left/components/correlations_details'; +import { LeftPanelInsightsTab, LeftPanelKey } from '../../left'; import { INSIGHTS_CORRELATIONS_CONTENT_TEST_ID, INSIGHTS_CORRELATIONS_LOADING_TEST_ID, @@ -154,7 +155,7 @@ describe('', () => { getByTestId(INSIGHTS_CORRELATIONS_TITLE_LINK_TEST_ID).click(); expect(flyoutContextValue.openLeftPanel).toHaveBeenCalledWith({ id: LeftPanelKey, - path: LeftPanelInsightsTabPath, + path: { tab: LeftPanelInsightsTab, subTab: CORRELATIONS_TAB_ID }, params: { id: panelContextValue.eventId, indexName: panelContextValue.indexName, diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/correlations_overview.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/correlations_overview.tsx index 92bf782f4988a..73d2407c9d115 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/correlations_overview.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/correlations_overview.tsx @@ -14,7 +14,8 @@ import { useCorrelations } from '../../shared/hooks/use_correlations'; import { INSIGHTS_CORRELATIONS_TEST_ID } from './test_ids'; import { useRightPanelContext } from '../context'; import { CORRELATIONS_TITLE } from './translations'; -import { LeftPanelKey, LeftPanelInsightsTabPath } from '../../left'; +import { LeftPanelKey, LeftPanelInsightsTab } from '../../left'; +import { CORRELATIONS_TAB_ID } from '../../left/components/correlations_details'; /** * Correlations section under Insights section, overview tab. @@ -29,7 +30,10 @@ export const CorrelationsOverview: React.FC = () => { const goToCorrelationsTab = useCallback(() => { openLeftPanel({ id: LeftPanelKey, - path: LeftPanelInsightsTabPath, + path: { + tab: LeftPanelInsightsTab, + subTab: CORRELATIONS_TAB_ID, + }, params: { id: eventId, indexName, diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/description.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/description.tsx index 4f416c97fbb70..6c4d49d9d6b4c 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/description.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/description.tsx @@ -23,7 +23,7 @@ import { RULE_SUMMARY_TEXT, PREVIEW_RULE_DETAILS, } from './translations'; -import { PreviewPanelKey, type PreviewPanelProps } from '../../preview'; +import { PreviewPanelKey, type PreviewPanelProps, RulePreviewPanel } from '../../preview'; /** * Displays the description of a document. @@ -36,7 +36,7 @@ export const Description: FC = () => { ); const { openPreviewPanel } = useExpandableFlyoutContext(); const openRulePreview = useCallback(() => { - const PreviewPanelRulePreview: PreviewPanelProps['path'] = ['rule-preview']; + const PreviewPanelRulePreview: PreviewPanelProps['path'] = { tab: RulePreviewPanel }; openPreviewPanel({ id: PreviewPanelKey, path: PreviewPanelRulePreview, diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/entities_overview.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/entities_overview.tsx index 3a6c58caeb54f..d74fd844ea4a9 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/entities_overview.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/entities_overview.tsx @@ -15,7 +15,8 @@ import { ENTITIES_TITLE } from './translations'; import { getField } from '../../shared/utils'; import { HostEntityOverview } from './host_entity_overview'; import { UserEntityOverview } from './user_entity_overview'; -import { LeftPanelKey, LeftPanelInsightsTabPath } from '../../left'; +import { LeftPanelKey, LeftPanelInsightsTab } from '../../left'; +import { ENTITIES_TAB_ID } from '../../left/components/entities_details'; /** * Entities section under Insights section, overview tab. It contains a preview of host and user information. @@ -29,7 +30,10 @@ export const EntitiesOverview: React.FC = () => { const goToEntitiesTab = useCallback(() => { openLeftPanel({ id: LeftPanelKey, - path: LeftPanelInsightsTabPath, + path: { + tab: LeftPanelInsightsTab, + subTab: ENTITIES_TAB_ID, + }, params: { id: eventId, indexName, diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/highlighted_fields_cell.test.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/highlighted_fields_cell.test.tsx index 67ab4ccb81679..3f844c08a5466 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/highlighted_fields_cell.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/highlighted_fields_cell.test.tsx @@ -15,8 +15,9 @@ import { import { HighlightedFieldsCell } from './highlighted_fields_cell'; import { ExpandableFlyoutContext } from '@kbn/expandable-flyout/src/context'; import { RightPanelContext } from '../context'; -import { LeftPanelInsightsTabPath, LeftPanelKey } from '../../left'; +import { LeftPanelInsightsTab, LeftPanelKey } from '../../left'; import { TestProviders } from '../../../common/mock'; +import { ENTITIES_TAB_ID } from '../../left/components/entities_details'; const flyoutContextValue = { openLeftPanel: jest.fn(), @@ -61,7 +62,7 @@ describe('', () => { getByTestId(HIGHLIGHTED_FIELDS_LINKED_CELL_TEST_ID).click(); expect(flyoutContextValue.openLeftPanel).toHaveBeenCalledWith({ id: LeftPanelKey, - path: LeftPanelInsightsTabPath, + path: { tab: LeftPanelInsightsTab, subTab: ENTITIES_TAB_ID }, params: { id: panelContextValue.eventId, indexName: panelContextValue.indexName, diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/highlighted_fields_cell.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/highlighted_fields_cell.tsx index ff5ca1edaadf9..a603d0528c119 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/highlighted_fields_cell.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/highlighted_fields_cell.tsx @@ -16,7 +16,8 @@ import { HOST_NAME_FIELD_NAME, USER_NAME_FIELD_NAME, } from '../../../timelines/components/timeline/body/renderers/constants'; -import { LeftPanelInsightsTabPath, LeftPanelKey } from '../../left'; +import { LeftPanelInsightsTab, LeftPanelKey } from '../../left'; +import { ENTITIES_TAB_ID } from '../../left/components/entities_details'; import { HIGHLIGHTED_FIELDS_AGENT_STATUS_CELL_TEST_ID, HIGHLIGHTED_FIELDS_BASIC_CELL_TEST_ID, @@ -42,7 +43,7 @@ const LinkFieldCell: VFC = ({ value }) => { const goToInsightsEntities = useCallback(() => { openLeftPanel({ id: LeftPanelKey, - path: LeftPanelInsightsTabPath, + path: { tab: LeftPanelInsightsTab, subTab: ENTITIES_TAB_ID }, params: { id: eventId, indexName, diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.test.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.test.tsx index c7cd137808c18..9021318685373 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.test.tsx @@ -20,7 +20,8 @@ import { RightPanelContext } from '../context'; import { mockContextValue } from '../mocks/mock_right_panel_context'; import { mockDataFormattedForFieldBrowser } from '../mocks/mock_context'; import { ExpandableFlyoutContext } from '@kbn/expandable-flyout/src/context'; -import { LeftPanelInsightsTabPath, LeftPanelKey } from '../../left'; +import { LeftPanelInsightsTab, LeftPanelKey } from '../../left'; +import { ENTITIES_TAB_ID } from '../../left/components/entities_details'; const hostName = 'host'; const ip = '10.200.000.000'; @@ -143,7 +144,7 @@ describe('', () => { getByTestId(ENTITIES_HOST_OVERVIEW_LINK_TEST_ID).click(); expect(flyoutContextValue.openLeftPanel).toHaveBeenCalledWith({ id: LeftPanelKey, - path: LeftPanelInsightsTabPath, + path: { tab: LeftPanelInsightsTab, subTab: ENTITIES_TAB_ID }, params: { id: panelContextValue.eventId, indexName: panelContextValue.indexName, diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.tsx index d32df4f205088..babd0b7c37015 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/host_entity_overview.tsx @@ -37,6 +37,7 @@ import { useRiskScore } from '../../../explore/containers/risk_score'; import { useHostDetails } from '../../../explore/hosts/containers/hosts/details'; import * as i18n from '../../../overview/components/host_overview/translations'; import { TECHNICAL_PREVIEW_TITLE, TECHNICAL_PREVIEW_MESSAGE } from './translations'; +import { ENTITIES_TAB_ID } from '../../left/components/entities_details'; import { TECHNICAL_PREVIEW_ICON_TEST_ID, ENTITIES_HOST_OVERVIEW_TEST_ID, @@ -44,7 +45,7 @@ import { ENTITIES_HOST_OVERVIEW_RISK_LEVEL_TEST_ID, ENTITIES_HOST_OVERVIEW_LINK_TEST_ID, } from './test_ids'; -import { LeftPanelInsightsTabPath, LeftPanelKey } from '../../left'; +import { LeftPanelInsightsTab, LeftPanelKey } from '../../left'; const HOST_ICON = 'storage'; const CONTEXT_ID = `flyout-host-entity-overview`; @@ -65,7 +66,7 @@ export const HostEntityOverview: React.FC = ({ hostName const goToEntitiesTab = useCallback(() => { openLeftPanel({ id: LeftPanelKey, - path: LeftPanelInsightsTabPath, + path: { tab: LeftPanelInsightsTab, subTab: ENTITIES_TAB_ID }, params: { id: eventId, indexName, diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/investigation_guide_button.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/investigation_guide_button.tsx index 2712cb24fe8e7..ce9eb79c903b3 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/investigation_guide_button.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/investigation_guide_button.tsx @@ -10,7 +10,7 @@ import { useExpandableFlyoutContext } from '@kbn/expandable-flyout'; import { useRightPanelContext } from '../context'; import { useRuleWithFallback } from '../../../detection_engine/rule_management/logic/use_rule_with_fallback'; import { useBasicDataFromDetailsData } from '../../../timelines/components/side_panel/event_details/helpers'; -import { LeftPanelKey, LeftPanelInvestigationTabPath } from '../../left'; +import { LeftPanelKey, LeftPanelInvestigationTab } from '../../left'; import { INVESTIGATION_GUIDE_BUTTON_TEST_ID } from './test_ids'; import { INVESTIGATION_GUIDE_TITLE } from './translations'; @@ -27,7 +27,9 @@ export const InvestigationGuideButton: React.FC = () => { const goToInvestigationsTab = useCallback(() => { openLeftPanel({ id: LeftPanelKey, - path: LeftPanelInvestigationTabPath, + path: { + tab: LeftPanelInvestigationTab, + }, params: { id: eventId, indexName, diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/prevalence_overview.test.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/prevalence_overview.test.tsx index d3a3e3c57d4ed..828a8b247543b 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/prevalence_overview.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/prevalence_overview.test.tsx @@ -15,13 +15,14 @@ import { INSIGHTS_PREVALENCE_TITLE_TEXT_TEST_ID, INSIGHTS_PREVALENCE_TOGGLE_ICON_TEST_ID, } from './test_ids'; -import { LeftPanelInsightsTabPath, LeftPanelKey } from '../../left'; +import { LeftPanelInsightsTab, LeftPanelKey } from '../../left'; import React from 'react'; import { PrevalenceOverview } from './prevalence_overview'; import { usePrevalence } from '../hooks/use_prevalence'; import { PrevalenceOverviewRow } from './prevalence_overview_row'; import { useFetchFieldValuePairWithAggregation } from '../../shared/hooks/use_fetch_field_value_pair_with_aggregation'; import { useFetchUniqueByField } from '../../shared/hooks/use_fetch_unique_by_field'; +import { PREVALENCE_TAB_ID } from '../../left/components/prevalence_details'; import type { BrowserFields, TimelineEventsDetailsItem } from '@kbn/timelines-plugin/common'; jest.mock('../../shared/hooks/use_fetch_field_value_pair_with_aggregation'); @@ -156,7 +157,7 @@ describe('', () => { getByTestId(INSIGHTS_PREVALENCE_TITLE_LINK_TEST_ID).click(); expect(flyoutContextValue.openLeftPanel).toHaveBeenCalledWith({ id: LeftPanelKey, - path: LeftPanelInsightsTabPath, + path: { tab: LeftPanelInsightsTab, subTab: PREVALENCE_TAB_ID }, params: { id: 'eventId', indexName: 'indexName', diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/prevalence_overview.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/prevalence_overview.tsx index c4a9dfd235949..a98246c3eaa0c 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/prevalence_overview.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/prevalence_overview.tsx @@ -14,7 +14,8 @@ import { usePrevalence } from '../hooks/use_prevalence'; import { INSIGHTS_PREVALENCE_TEST_ID } from './test_ids'; import { useRightPanelContext } from '../context'; import { PREVALENCE_TITLE } from './translations'; -import { LeftPanelKey, LeftPanelInsightsTabPath } from '../../left'; +import { LeftPanelKey, LeftPanelInsightsTab } from '../../left'; +import { PREVALENCE_TAB_ID } from '../../left/components/prevalence_details'; /** * Prevalence section under Insights section, overview tab. @@ -29,7 +30,10 @@ export const PrevalenceOverview: FC = () => { const goToCorrelationsTab = useCallback(() => { openLeftPanel({ id: LeftPanelKey, - path: LeftPanelInsightsTabPath, + path: { + tab: LeftPanelInsightsTab, + subTab: PREVALENCE_TAB_ID, + }, params: { id: eventId, indexName, diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/response_button.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/response_button.tsx index df1196358dfa9..0db15a342e71b 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/response_button.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/response_button.tsx @@ -13,7 +13,7 @@ import type { RawEventData, } from '../../../../common/types/response_actions'; import { useRightPanelContext } from '../context'; -import { LeftPanelKey, LeftPanelResponseTabPath } from '../../left'; +import { LeftPanelKey, LeftPanelResponseTab } from '../../left'; import { RESPONSE_BUTTON_TEST_ID, RESPONSE_EMPTY_TEST_ID } from './test_ids'; import { RESPONSE_EMPTY, RESPONSE_TITLE } from './translations'; @@ -33,7 +33,7 @@ export const ResponseButton: React.FC = () => { const goToResponseTab = useCallback(() => { openLeftPanel({ id: LeftPanelKey, - path: LeftPanelResponseTabPath, + path: { tab: LeftPanelResponseTab }, params: { id: eventId, indexName, diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/session_preview.test.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/session_preview.test.tsx index b651ad670015f..64247d5b0dd17 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/session_preview.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/session_preview.test.tsx @@ -19,7 +19,8 @@ import { SESSION_PREVIEW_TITLE_TEXT_TEST_ID, SESSION_PREVIEW_TOGGLE_ICON_TEST_ID, } from './test_ids'; -import { LeftPanelKey, LeftPanelVisualizeTabPath } from '../../left'; +import { LeftPanelKey, LeftPanelVisualizeTab } from '../../left'; +import { SESSION_VIEW_ID } from '../../left/components/session_view'; jest.mock('../hooks/use_process_data'); @@ -131,7 +132,7 @@ describe('SessionPreview', () => { getByTestId(SESSION_PREVIEW_TITLE_LINK_TEST_ID).click(); expect(flyoutContextValue.openLeftPanel).toHaveBeenCalledWith({ id: LeftPanelKey, - path: LeftPanelVisualizeTabPath, + path: { tab: LeftPanelVisualizeTab, subTab: SESSION_VIEW_ID }, params: { id: panelContextValue.eventId, indexName: panelContextValue.indexName, diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/session_preview.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/session_preview.tsx index b6ba4398f7e6b..5c298311bf3c0 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/session_preview.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/session_preview.tsx @@ -12,7 +12,6 @@ import { ExpandablePanel } from '../../shared/components/expandable_panel'; import { SIGNAL_RULE_NAME_FIELD_NAME } from '../../../timelines/components/timeline/body/renderers/constants'; import { useRightPanelContext } from '../context'; import { PreferenceFormattedDate } from '../../../common/components/formatted_date'; - import { useProcessData } from '../hooks/use_process_data'; import { SESSION_PREVIEW_TEST_ID } from './test_ids'; import { @@ -22,8 +21,9 @@ import { SESSION_PREVIEW_TIME_TEXT, SESSION_PREVIEW_TITLE, } from './translations'; -import { LeftPanelKey, LeftPanelVisualizeTabPath } from '../../left'; +import { LeftPanelKey, LeftPanelVisualizeTab } from '../../left'; import { RenderRuleName } from '../../../timelines/components/timeline/body/renderers/formatted_field_helpers'; +import { SESSION_VIEW_ID } from '../../left/components/session_view'; /** * One-off helper to make sure that inline values are rendered consistently @@ -51,7 +51,10 @@ export const SessionPreview: FC = () => { const goToSessionViewTab = useCallback(() => { openLeftPanel({ id: LeftPanelKey, - path: LeftPanelVisualizeTabPath, + path: { + tab: LeftPanelVisualizeTab, + subTab: SESSION_VIEW_ID, + }, params: { id: eventId, indexName, diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/threat_intelligence_overview.test.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/threat_intelligence_overview.test.tsx index 09628a71fbbba..2dca57df2b3eb 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/threat_intelligence_overview.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/threat_intelligence_overview.test.tsx @@ -11,8 +11,9 @@ import { ExpandableFlyoutContext } from '@kbn/expandable-flyout/src/context'; import { RightPanelContext } from '../context'; import { TestProviders } from '../../../common/mock'; import { ThreatIntelligenceOverview } from './threat_intelligence_overview'; -import { LeftPanelInsightsTabPath, LeftPanelKey } from '../../left'; +import { LeftPanelInsightsTab, LeftPanelKey } from '../../left'; import { useFetchThreatIntelligence } from '../hooks/use_fetch_threat_intelligence'; +import { THREAT_INTELLIGENCE_TAB_ID } from '../../left/components/threat_intelligence_details'; import { INSIGHTS_THREAT_INTELLIGENCE_CONTAINER_TEST_ID, INSIGHTS_THREAT_INTELLIGENCE_CONTENT_TEST_ID, @@ -185,7 +186,7 @@ describe('', () => { getByTestId(INSIGHTS_THREAT_INTELLIGENCE_TITLE_LINK_TEST_ID).click(); expect(flyoutContextValue.openLeftPanel).toHaveBeenCalledWith({ id: LeftPanelKey, - path: LeftPanelInsightsTabPath, + path: { tab: LeftPanelInsightsTab, subTab: THREAT_INTELLIGENCE_TAB_ID }, params: { id: panelContextValue.eventId, indexName: panelContextValue.indexName, diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/threat_intelligence_overview.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/threat_intelligence_overview.tsx index aa6ced53979e8..38ac0a0015eba 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/threat_intelligence_overview.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/threat_intelligence_overview.tsx @@ -21,7 +21,8 @@ import { THREAT_MATCHES_DETECTED, THREAT_ENRICHMENTS, } from './translations'; -import { LeftPanelKey, LeftPanelInsightsTabPath } from '../../left'; +import { LeftPanelKey, LeftPanelInsightsTab } from '../../left'; +import { THREAT_INTELLIGENCE_TAB_ID } from '../../left/components/threat_intelligence_details'; /** * Threat Intelligence section under Insights section, overview tab. @@ -35,7 +36,10 @@ export const ThreatIntelligenceOverview: FC = () => { const goToThreatIntelligenceTab = useCallback(() => { openLeftPanel({ id: LeftPanelKey, - path: LeftPanelInsightsTabPath, + path: { + tab: LeftPanelInsightsTab, + subTab: THREAT_INTELLIGENCE_TAB_ID, + }, params: { id: eventId, indexName, diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.test.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.test.tsx index c2c26a8d288b8..eea824bd3dcc8 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.test.tsx @@ -21,7 +21,8 @@ import { mockContextValue } from '../mocks/mock_right_panel_context'; import { mockDataFormattedForFieldBrowser } from '../mocks/mock_context'; import { ExpandableFlyoutContext } from '@kbn/expandable-flyout/src/context'; import { RightPanelContext } from '../context'; -import { LeftPanelInsightsTabPath, LeftPanelKey } from '../../left'; +import { LeftPanelInsightsTab, LeftPanelKey } from '../../left'; +import { ENTITIES_TAB_ID } from '../../left/components/entities_details'; const userName = 'user'; const ip = '10.200.000.000'; @@ -144,7 +145,7 @@ describe('', () => { getByTestId(ENTITIES_USER_OVERVIEW_LINK_TEST_ID).click(); expect(flyoutContextValue.openLeftPanel).toHaveBeenCalledWith({ id: LeftPanelKey, - path: LeftPanelInsightsTabPath, + path: { tab: LeftPanelInsightsTab, subTab: ENTITIES_TAB_ID }, params: { id: panelContextValue.eventId, indexName: panelContextValue.indexName, diff --git a/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.tsx b/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.tsx index 61a598ddef771..3e015659a7ebc 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/components/user_entity_overview.tsx @@ -18,7 +18,8 @@ import { import { css } from '@emotion/css'; import { getOr } from 'lodash/fp'; import { useExpandableFlyoutContext } from '@kbn/expandable-flyout'; -import { LeftPanelInsightsTabPath, LeftPanelKey } from '../../left'; +import { LeftPanelInsightsTab, LeftPanelKey } from '../../left'; +import { ENTITIES_TAB_ID } from '../../left/components/entities_details'; import { useRightPanelContext } from '../context'; import type { DescriptionList } from '../../../../common/utility_types'; import { @@ -65,7 +66,7 @@ export const UserEntityOverview: React.FC = ({ userName const goToEntitiesTab = useCallback(() => { openLeftPanel({ id: LeftPanelKey, - path: LeftPanelInsightsTabPath, + path: { tab: LeftPanelInsightsTab, subTab: ENTITIES_TAB_ID }, params: { id: eventId, indexName, diff --git a/x-pack/plugins/security_solution/public/flyout/right/index.tsx b/x-pack/plugins/security_solution/public/flyout/right/index.tsx index f779a2fd98c08..80600b1357b60 100644 --- a/x-pack/plugins/security_solution/public/flyout/right/index.tsx +++ b/x-pack/plugins/security_solution/public/flyout/right/index.tsx @@ -7,7 +7,7 @@ import type { FC } from 'react'; import React, { memo, useMemo } from 'react'; -import type { FlyoutPanelProps } from '@kbn/expandable-flyout'; +import type { FlyoutPanelProps, PanelPath } from '@kbn/expandable-flyout'; import { useExpandableFlyoutContext } from '@kbn/expandable-flyout'; import { useRightPanelContext } from './context'; import { PanelHeader } from './header'; @@ -17,13 +17,11 @@ import { tabs } from './tabs'; import { PanelFooter } from './footer'; export type RightPanelPaths = 'overview' | 'table' | 'json'; - export const RightPanelKey: RightPanelProps['key'] = 'document-details-right'; -export const RightPanelTableTabPath: RightPanelProps['path'] = ['table']; export interface RightPanelProps extends FlyoutPanelProps { key: 'document-details-right'; - path?: RightPanelPaths[]; + path?: PanelPath; params?: { id: string; indexName: string; @@ -41,13 +39,15 @@ export const RightPanel: FC> = memo(({ path }) => { const selectedTabId = useMemo(() => { const defaultTab = tabs[0].id; if (!path) return defaultTab; - return tabs.map((tab) => tab.id).find((tabId) => tabId === path[0]) ?? defaultTab; + return tabs.map((tab) => tab.id).find((tabId) => tabId === path.tab) ?? defaultTab; }, [path]); const setSelectedTabId = (tabId: RightPanelTabsType[number]['id']) => { openRightPanel({ id: RightPanelKey, - path: [tabId], + path: { + tab: tabId, + }, params: { id: eventId, indexName, From 00cad18131a2afb02f687bc44cc4f0952554ce5a Mon Sep 17 00:00:00 2001 From: Maryam Saeidi Date: Tue, 15 Aug 2023 10:40:55 +0200 Subject: [PATCH 2/3] [AO] Add tooltip for custom equation and update its message (#163833) Closes #163821 ## Summary This PR adds a tooltip for the custom equation and updates its message, similar to what we have in SLO. |Before|After| |---|---| |![image](https://github.com/elastic/kibana/assets/12370520/f3f66f2c-9cab-4680-8139-036e82a3aabe)|![image](https://github.com/elastic/kibana/assets/12370520/1f8e8c0d-38fa-408d-b091-bbd6c9517837)| --- .../custom_equation_editor.tsx | 22 +++++++++++++++---- .../components/threshold/i18n_strings.ts | 5 ++++- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/observability/public/components/threshold/components/custom_equation/custom_equation_editor.tsx b/x-pack/plugins/observability/public/components/threshold/components/custom_equation/custom_equation_editor.tsx index cdb4f7b7155a0..8dbb44eda71dd 100644 --- a/x-pack/plugins/observability/public/components/threshold/components/custom_equation/custom_equation_editor.tsx +++ b/x-pack/plugins/observability/public/components/threshold/components/custom_equation/custom_equation_editor.tsx @@ -9,6 +9,7 @@ import { EuiFormRow, EuiFlexItem, EuiFlexGroup, + EuiIconTip, EuiButtonEmpty, EuiSpacer, EuiExpression, @@ -193,10 +194,23 @@ export function CustomEquationEditor({ >
setCustomEqPopoverOpen(false)}> - + + +   + + , <, =', + } ); export const LABEL_LABEL = i18n.translate( From 12a10d98559fb6fee98d81c7bbb22cf654187bde Mon Sep 17 00:00:00 2001 From: Dzmitry Lemechko Date: Tue, 15 Aug 2023 11:13:56 +0200 Subject: [PATCH 3/3] Add appex-qa as codeowner for FTR serverless base config files (#163914) ## Summary This way Appex-QA can keep track on config changes and make sure folks aware that some changes might not work for real MKI-hosted projects. --- .github/CODEOWNERS | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 7f82bd7e8c41e..7197ed867b5e0 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -997,6 +997,7 @@ x-pack/plugins/infra/server/lib/alerting @elastic/actionable-observability /x-pack/performance @elastic/appex-qa /packages/kbn-test/src/functional_test_runner @elastic/appex-qa /packages/kbn-performance-testing-dataset-extractor @elastic/appex-qa +/x-pack/test_serverless/**/*config.base.ts @elastic/appex-qa # Core /config/ @elastic/kibana-core