Merge branch 'main' into serverless-tags

.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

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';

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',

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<string, unknown>;
   /**
-   * 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
    */

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({
         >
           <div>
             <ClosablePopoverTitle onClose={() => setCustomEqPopoverOpen(false)}>
-              <FormattedMessage
-                id="xpack.observability.threshold.rule.alertFlyout.customEquationLabel"
-                defaultMessage="Custom equation"
-              />
+              <span>
+                <FormattedMessage
+                  id="xpack.observability.threshold.rule.alertFlyout.customEquationLabel"
+                  defaultMessage="Custom equation"
+                />
+                &nbsp;
+                <EuiIconTip
+                  content={i18n.translate(
+                    'xpack.observability.threshold.rule.alertFlyout.customEquationTooltip',
+                    {
+                      defaultMessage:
+                        'This supports basic math (A + B / C) and boolean logic (A < B ? A : B).',
+                    }
+                  )}
+                  position="top"
+                />
+              </span>
             </ClosablePopoverTitle>
             <EuiFormRow
               fullWidth

x-pack/plugins/observability/public/components/threshold/i18n_strings.ts

@@ -9,7 +9,10 @@ import { i18n } from '@kbn/i18n';
 
 export const EQUATION_HELP_MESSAGE = i18n.translate(
   'xpack.observability.threshold.rule.alertFlyout.customEquationEditor.equationHelpMessage',
-  { defaultMessage: 'Supports basic math expressions' }
+  {
+    defaultMessage:
+      'Supports basic math equations, valid charaters are: A-Z, +, -, /, *, (, ), ?, !, &, :, |, >, <, =',
+  }
 );
 
 export const LABEL_LABEL = i18n.translate(

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<Partial<LeftPanelProps>> = 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,

x-pack/plugins/security_solution/public/flyout/left/tabs/insights_tab.tsx

@@ -5,18 +5,20 @@
  * 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,
   INSIGHTS_TAB_THREAT_INTELLIGENCE_BUTTON_TEST_ID,
   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 (
     <>

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,18 +44,40 @@ 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) => {
       setActiveVisualizationId(optionId);
       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 (
     <>
       <EuiButtonGroup

x-pack/plugins/security_solution/public/flyout/preview/index.tsx

@@ -6,16 +6,17 @@
  */
 
 import React, { memo, useMemo } from 'react';
-import type { FlyoutPanelProps } from '@kbn/expandable-flyout';
+import type { FlyoutPanelProps, PanelPath } from '@kbn/expandable-flyout';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { panels } from './panels';
 
 export type PreviewPanelPaths = 'rule-preview';
+export const RulePreviewPanel: PreviewPanelPaths = 'rule-preview';
 export const PreviewPanelKey: PreviewPanelProps['key'] = 'document-details-preview';
 
 export interface PreviewPanelProps extends FlyoutPanelProps {
   key: 'document-details-preview';
-  path?: PreviewPanelPaths[];
+  path?: PanelPath;
   params?: {
     id: string;
     indexName: string;
@@ -29,7 +30,7 @@ export interface PreviewPanelProps extends FlyoutPanelProps {
  */
 export const PreviewPanel: React.FC<Partial<PreviewPanelProps>> = 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) {

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('<AnalyzerTree />', () => {
     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,

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<AnalyzerTreeProps> = ({
   const goToAnalyserTab = useCallback(() => {
     openLeftPanel({
       id: LeftPanelKey,
-      path: LeftPanelVisualizeTabPath,
+      path: {
+        tab: LeftPanelVisualizeTab,
+        subTab: ANALYZE_GRAPH_ID,
+      },
       params: {
         id: eventId,
         indexName,

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('<CorrelationsOverview />', () => {
     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,

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,